:root { /* Pretendard and Fraunces are loaded via in each page's (see landing.html and the other top-level pages). Inter was previously listed here but never actually loaded anywhere in the codebase, so every visitor was silently rendering their OS default font underneath copy that implied a deliberate typographic choice. Pretendard now genuinely loads. */ --ui-font: "Pretendard", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif; --ui-font-display: "Fraunces", "Noto Serif KR", var(--ui-font); --ui-radius-xs: 6px; --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 16px; --ui-focus: #8f7bc2; --ui-layer-sticky: 40; --ui-layer-dock: 60; --ui-layer-popover: 70; --ui-layer-sheet: 80; --ui-layer-modal: 90; --ui-layer-toast: 100; } .pulsenal-page { font-family: var(--ui-font); font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .pulsenal-page :where(button, input, select, textarea, summary, a) { font: inherit; } .pulsenal-page :where(button, input, select, textarea, summary, a):focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-focus) 54%, transparent); outline-offset: 2px; } .pulsenal-page :where(button, .button, input, select, textarea) { border-radius: var(--ui-radius-sm); } .pulsenal-page :where(button, .button) { touch-action: manipulation; } .pulsenal-page ::selection { background: color-mix(in srgb, #6750a4 26%, transparent); } /* Product application ---------------------------------------------------- */ .pulsenal-app { --ui-surface-shadow: 0 10px 28px rgba(12, 10, 18, .12); background-attachment: fixed; } .pulsenal-app[data-theme="dark"], .pulsenal-app[data-theme="neon"] { background-image: radial-gradient(circle at 10% -12%, rgba(154, 132, 205, .14), transparent 34rem), radial-gradient(circle at 100% 12%, rgba(92, 105, 151, .07), transparent 30rem), linear-gradient(180deg, #13111b, #0e0d14 68%) !important; background-size: auto !important; } .pulsenal-app header { z-index: var(--ui-layer-sticky); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: none; } .pulsenal-app .panel, .pulsenal-app .live-strip, .pulsenal-app .home-brief-section, .pulsenal-app .home-brief-kpi { border-color: var(--line); background-image: none !important; box-shadow: var(--ui-surface-shadow); } .pulsenal-app :where(.panel, .live-strip, .analysis-card, .command-tile, .metric, .asset-card) { border-radius: var(--ui-radius-md); } .pulsenal-app :where(.panel > h2, .live-head strong, .home-brief-section-head strong, .learning-brief-section-head strong, .score-pool-kpi span, .home-brief-kpi span, .metric span) { font-family: var(--ui-font) !important; letter-spacing: normal !important; } .pulsenal-app :where(.panel > h2, .live-head strong)::before { content: none !important; } .pulsenal-app :where(.dot, .live-dot) { animation: none !important; box-shadow: none !important; } .pulsenal-app button.primary { border-color: var(--accent-strong) !important; background: var(--accent-strong) !important; box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 18%, transparent) !important; } .pulsenal-app nav button.active, .pulsenal-app .mobile-dock button.active { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)) !important; background: var(--accent-soft) !important; color: var(--accent) !important; box-shadow: none !important; } .pulsenal-app .mobile-dock { z-index: var(--ui-layer-dock); border-radius: var(--ui-radius-lg); background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 14px 34px rgba(4, 3, 8, .28); backdrop-filter: blur(10px); } .pulsenal-app .mobile-dock button { border-radius: 10px; } .pulsenal-app .profile-menu { z-index: var(--ui-layer-popover); } .pulsenal-app .mobile-more-backdrop { z-index: var(--ui-layer-sheet); background: rgba(8, 7, 13, .66); backdrop-filter: blur(3px); } .pulsenal-app .mobile-more-sheet { border-radius: var(--ui-radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, .34); } .pulsenal-app .mobile-more-grid button { border-radius: var(--ui-radius-md); } .pulsenal-app :where(.detail-overlay, .onboarding-overlay) { z-index: var(--ui-layer-modal); background: rgba(8, 7, 13, .68); backdrop-filter: blur(3px); } .pulsenal-app .detail-modal, .pulsenal-app .onboarding-card { border-radius: var(--ui-radius-lg); background: var(--panel); box-shadow: 0 28px 76px rgba(0, 0, 0, .38); } .pulsenal-app :where(.toast, .app-tip) { z-index: var(--ui-layer-toast); border-radius: var(--ui-radius-sm); } .pulsenal-app :where(input, select, textarea) { min-height: 40px; border-color: var(--line); } .pulsenal-app button:hover { transform: none; } .pulsenal-app .report-table tbody tr:hover, .pulsenal-app table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 34%, transparent); } .pulsenal-app .learning-answer-card, .pulsenal-app .learning-brief-section, .pulsenal-app .home-brief-hero, .pulsenal-app .home-brief-section { border-radius: var(--ui-radius-lg); } /* Public and utility pages ---------------------------------------------- */ .pulsenal-landing, .pulsenal-legal, .pulsenal-delete, .pulsenal-recovery, .pulsenal-settings { color-scheme: light; --ui-page-bg: #f7f5fb; --ui-panel: #fff; --ui-ink: #191724; --ui-muted: #667085; --ui-line: #e2ddec; --ui-accent: #6750a4; --ui-accent-strong: #594588; } .pulsenal-legal, .pulsenal-delete, .pulsenal-recovery, .pulsenal-settings { background: radial-gradient(circle at 10% -10%, #eeeaf7, transparent 30rem), var(--ui-page-bg) !important; color: var(--ui-ink) !important; } .pulsenal-legal header, .pulsenal-delete header, .pulsenal-recovery header, .pulsenal-settings header { border-color: var(--ui-line); } .pulsenal-legal :where(p, li), .pulsenal-delete :where(p, li), .pulsenal-recovery p, .pulsenal-settings p { color: var(--ui-muted) !important; } .pulsenal-legal .note, .pulsenal-delete main, .pulsenal-recovery .panel, .pulsenal-settings .panel { border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius-lg) !important; background: var(--ui-panel) !important; color: var(--ui-ink) !important; box-shadow: 0 12px 34px rgba(48, 35, 77, .07) !important; } .pulsenal-delete a, .pulsenal-recovery a, .pulsenal-legal a { color: var(--ui-accent); } .pulsenal-delete a.button, .pulsenal-recovery .primary, .pulsenal-settings button { border-color: var(--ui-accent-strong) !important; background: var(--ui-accent-strong) !important; color: #fff !important; } .pulsenal-recovery .card { border-color: var(--ui-line); border-radius: var(--ui-radius-md); background: #faf8fd; } .pulsenal-recovery .note { border-left-color: var(--ui-accent); border-radius: var(--ui-radius-sm); background: #f4f0fb; } .pulsenal-settings :where(input[type="number"], select) { min-height: 40px; border-color: var(--ui-line); background: #fff; } @media (max-width: 860px) { .pulsenal-app .shell > header { width: auto; grid-template-columns: minmax(104px, 1fr) max-content !important; gap: 8px; margin: 0; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; } .pulsenal-app .shell > header .brand-logo { width: 124px; } .pulsenal-app .shell > header .actions { width: auto; max-width: none !important; grid-template-columns: 76px minmax(88px, 104px) 42px !important; gap: 5px; } .pulsenal-app .shell > header .actions .profile-wrap { width: 42px !important; grid-column: auto !important; } .pulsenal-app .shell > header .actions #profileBtn { width: 42px !important; min-width: 42px; } .pulsenal-app main { padding-inline: 10px; } .pulsenal-app .panel { border-radius: var(--ui-radius-lg); box-shadow: 0 8px 24px rgba(4, 3, 8, .18); } .pulsenal-app :where(.home-brief-kpi, .learning-answer-card, .mobile-pick-card) { border-radius: var(--ui-radius-md); } .pulsenal-app :where(.toast, .app-tip) { bottom: calc(84px + env(safe-area-inset-bottom)); } } @media (max-width: 420px) { .pulsenal-app .shell > header { grid-template-columns: minmax(96px, 1fr) max-content !important; } .pulsenal-app .shell > header .actions { grid-template-columns: 72px minmax(84px, 96px) 40px !important; } .pulsenal-app .shell > header .brand-logo { width: 112px; } .pulsenal-app .mobile-more-backdrop { padding: 10px; } } /* Evidence state -------------------------------------------------------- */ /* How much a number is trusted is carried by weight and a single hairline, not by colour alarm. A withheld score should read as deliberate restraint, not as an error state. */ .pulsenal-app .score-cell { position: relative; padding-left: 9px; } .pulsenal-app .score-cell::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--line); } .pulsenal-app .score-cell[data-evidence="direction"]::before { background: var(--accent); } .pulsenal-app .score-cell[data-evidence="move"]::before { background: color-mix(in srgb, var(--accent) 46%, var(--line)); } .pulsenal-app .score-cell[data-evidence="direction"] strong { font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .pulsenal-app .score-cell[data-evidence="move"] strong, .pulsenal-app .score-cell[data-evidence="legacy"] strong { font-variant-numeric: tabular-nums; font-weight: 600; opacity: .82; } .pulsenal-app .score-cell-withheld { font-weight: 500; opacity: .46; } .pulsenal-app .score-cell span { letter-spacing: .01em; opacity: .72; } .pulsenal-app .evidence-banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-left: 2px solid color-mix(in srgb, var(--accent) 52%, var(--line)); border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--panel) 70%, transparent); font-size: .82rem; line-height: 1.5; } .pulsenal-app .evidence-banner strong { font-weight: 600; letter-spacing: -.005em; } .pulsenal-app .evidence-banner em { font-style: normal; opacity: .74; } .pulsenal-app .evidence-banner .evidence-market { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; } .pulsenal-app .evidence-banner .evidence-market::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); } .pulsenal-app .evidence-banner .evidence-market[data-state="rank_only"]::before, .pulsenal-app .evidence-banner .evidence-market[data-state="unavailable"]::before { background: color-mix(in srgb, var(--muted, #8a8698) 70%, transparent); } .pulsenal-app .evidence-banner .evidence-market[data-state="movement_only"]::before { background: color-mix(in srgb, var(--accent) 50%, transparent); } @media (prefers-reduced-motion: reduce) { .pulsenal-page *, .pulsenal-page *::before, .pulsenal-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media (prefers-contrast: more) { .pulsenal-page :where(button, input, select, textarea, .panel, .card) { border-width: 2px; } }