/* HansamBio theme palette r1 (applies to all pages) - 목적: 흑/백 단조 느낌을 줄이고, 카테고리별(페이지별) 색상 테마 지원 - 사용법: 처럼 theme-* 클래스를 부여 */ /* Base (Light) */ :root{ --bg: #f6f7fb; --surface: #ffffff; --surface2: rgba(255,255,255,.72); --text: #0f172a; --muted: rgba(15,23,42,.70); --border: rgba(15,23,42,.12); --shadow: 0 18px 40px rgba(15,23,42,.10); /* Accent (default) */ --accent: #0ea5e9; /* sky */ --accent2:#22c55e; /* green */ --accent3:#a855f7; /* purple */ --grad: radial-gradient(1200px 600px at 15% 5%, rgba(14,165,233,.20), transparent 55%), radial-gradient(1000px 500px at 85% 10%, rgba(34,197,94,.16), transparent 60%), radial-gradient(900px 520px at 50% 92%, rgba(168,85,247,.14), transparent 60%); } /* Dark baseline (optional) */ body.theme-dark{ --bg:#0b0f14; --surface: rgba(255,255,255,.10); --surface2: rgba(255,255,255,.14); --text:#f5f7fa; --muted: rgba(245,247,250,.78); --border: rgba(255,255,255,.18); --shadow: 0 16px 40px rgba(0,0,0,.35); --grad: radial-gradient(1200px 600px at 12% 8%, rgba(14,165,233,.22), transparent 55%), radial-gradient(900px 520px at 88% 12%, rgba(34,197,94,.18), transparent 60%), radial-gradient(900px 520px at 50% 95%, rgba(168,85,247,.16), transparent 62%); } /* Page theme presets */ body.theme-emerald{ --accent:#22c55e; --accent2:#06b6d4; --accent3:#84cc16; } body.theme-indigo { --accent:#6366f1; --accent2:#0ea5e9; --accent3:#a855f7; } body.theme-amber { --accent:#f59e0b; --accent2:#ef4444; --accent3:#0ea5e9; } body.theme-rose { --accent:#f43f5e; --accent2:#8b5cf6; --accent3:#22c55e; } body.theme-teal { --accent:#14b8a6; --accent2:#0ea5e9; --accent3:#a855f7; } body.theme-slate { --accent:#64748b; --accent2:#0ea5e9; --accent3:#22c55e; } body.theme-purple { --accent:#a855f7; --accent2:#0ea5e9; --accent3:#22c55e; } /* Global background */ html,body{background:var(--bg); color:var(--text);} body::before{ content:""; position:fixed; inset:0; pointer-events:none; background: var(--grad); opacity: .95; z-index:-1; } /* Header: subtle gradient underline + glass */ .site-header{ background: var(--surface2); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: sticky; top:0; z-index: 40; } .site-header::after{ content:""; display:block; height:2px; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3)); opacity:.65; } .site-header .brand a{color:var(--text)!important;} .site-header .nav a, .site-header .tools a{color:var(--muted);} .site-header .nav a:hover, .site-header .tools a:hover{color:var(--text);} /* Common blocks/cards */ .card, .hsb-card, .hsb-panel{ background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } /* Accent button / links */ .hsb-btn.primary{ border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); } /* Section headers (optional utility) */ .hsb-page-hero{ padding: 42px 0 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent2) 12%, transparent) 45%, transparent 80%); border-bottom: 1px solid var(--border); } .hsb-page-hero h1{margin:0 0 8px; font-weight: 900; letter-spacing:-.02em;} .hsb-page-hero p{margin:0; color:var(--muted); max-width: 78ch;} /* Make existing hero blocks colorful without rewriting each page */ .ab-hero, .prod-hero, .paper-hero, .iss-hero, .pt-hero, .cm-hero, .inq-hero{ position:relative; overflow:hidden; border-bottom: 1px solid var(--border); } .ab-hero::before, .prod-hero::before, .paper-hero::before, .iss-hero::before, .pt-hero::before, .cm-hero::before, .inq-hero::before{ content:""; position:absolute; inset:-2px; background: radial-gradient(900px 420px at 12% 20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), radial-gradient(900px 420px at 88% 10%, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 60%), radial-gradient(900px 520px at 50% 95%, color-mix(in srgb, var(--accent3) 18%, transparent), transparent 62%); opacity:.9; pointer-events:none; } .ab-hero .inner, .prod-hero .inner, .paper-hero .inner, .iss-hero .inner, .pt-hero .inner, .cm-hero .inner, .inq-hero .inner{ position:relative; } /* Improve readability on dark themes */ body.theme-dark .card, body.theme-dark .hsb-card, body.theme-dark .hsb-panel{ background: var(--surface); } /* Small screens */ @media (max-width: 860px){ body::before{opacity:.85;} } /* === Readability fixes (r1.1) === */ /* Ensure common text elements follow theme text color */ a{color:var(--text);} a:hover{color:var(--accent);} .section-title{color:var(--text);} /* Products grid cards (products.r5.css uses hardcoded colors) */ .card-prod{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)!important;box-shadow:var(--shadow)!important;} .card-prod .meta{color:var(--muted)!important;} .card-prod .thumb{background:color-mix(in srgb, var(--bg) 70%, transparent)!important;} /* News cards (papers/issues style.r3.css uses fixed colors) */ .card-news{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)!important;box-shadow:var(--shadow)!important;} .card-news .summary,.card-news .meta{color:var(--muted)!important;} .card-news .title a{color:var(--text)!important;} /* Pager */ .pager a,.pager span{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)!important;} .pager .active{background:color-mix(in srgb, var(--accent) 14%, transparent)!important;border-color:color-mix(in srgb, var(--accent) 40%, var(--border))!important;} /* Admin cards/links */ .admin-card,.admin-panel,.admin-box{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)!important;} /* === About page readability overrides (r1.2) === */ /* about_layout.r3.css has hardcoded dark text colors; override to follow theme variables */ .ab-grid .card h2{color:var(--text)!important;} .ab-grid .card .big, .ab-grid .text.big{color:var(--text)!important;} .ab-grid .kv span{color:var(--muted)!important;} .ab-grid .kv b{color:var(--text)!important;} .ab-grid .timeline b{color:var(--text)!important;} .ab-grid .timeline span{color:var(--muted)!important;} .ab-grid .chips span{ background: color-mix(in srgb, var(--accent) 12%, var(--surface))!important; border-color: color-mix(in srgb, var(--accent) 22%, var(--border))!important; color: var(--text)!important; }