/* ============================================================ Research Hub — Shared Design System (theme.css) oklch color tokens following shadcn --color- convention Fonts: Inter / JetBrains Mono Dark mode default (class="dark" on ) ============================================================ */ /* ── Reset ─────────────────────────────────────────────────── */ *, ::after, ::before { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* ── Design Tokens: Light Mode ─────────────────────────────── */ :root { /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Typography */ --font-sans: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Core palette */ --color-background: oklch(0.990 0.005 260); --color-foreground: oklch(0.145 0.015 260); --color-card: oklch(1 0 0); --color-card-foreground: oklch(0.145 0.015 260); --color-primary: oklch(0.450 0.200 260); --color-primary-foreground: oklch(0.98 0.01 260); --color-secondary: oklch(0.965 0.01 260); --color-secondary-foreground: oklch(0.3 0.100 260); --color-muted: oklch(0.965 0.005 260); --color-muted-foreground: oklch(0.55 0.02 260); --color-accent: oklch(0.94 0.040 150); --color-accent-foreground: oklch(0.3 0.100 150); --color-destructive: oklch(0.577 0.245 27.325); --color-border: oklch(0.915 0.01 260); --color-input: oklch(0.915 0.01 260); --color-ring: oklch(0.450 0.200 260); /* Charts */ --color-chart-1: oklch(0.450 0.200 260); --color-chart-2: oklch(0.6 0.15 150); --color-chart-3: oklch(0.55 0.18 20); --color-chart-4: oklch(0.65 0.15 320); --color-chart-5: oklch(0.5 0.2 140); /* Sidebar */ --color-sidebar-background: oklch(0.985 0.003 260); --color-sidebar-foreground: oklch(0.145 0.015 260); --color-sidebar-primary: oklch(0.450 0.200 260); --color-sidebar-border: oklch(0.915 0.01 260); /* Shorthand color aliases */ --blue: oklch(0.450 0.200 260); --green: oklch(0.6 0.15 150); --red: oklch(0.55 0.18 20); --amber: oklch(0.7 0.15 80); --purple: oklch(0.65 0.15 320); --cyan: oklch(0.6 0.15 200); --orange: oklch(0.65 0.18 50); --pink: oklch(0.65 0.15 350); --lime: oklch(0.7 0.18 140); /* Country colors (life trajectory) */ --tw: oklch(0.7 0.15 350); --jp: oklch(0.6 0.18 20); --cn: oklch(0.75 0.15 80); --sg: oklch(0.65 0.15 150); --th: oklch(0.7 0.15 320); } /* ── Design Tokens: Dark Mode ──────────────────────────────── */ .dark { --color-background: oklch(0.13 0.015 260); --color-foreground: oklch(0.96 0.005 260); --color-card: oklch(0.18 0.02 260); --color-card-foreground: oklch(0.96 0.005 260); --color-primary: oklch(0.600 0.200 260); --color-primary-foreground: oklch(0.1 0.01 260); --color-secondary: oklch(0.25 0.02 260); --color-secondary-foreground: oklch(0.92 0.005 260); --color-muted: oklch(0.25 0.015 260); --color-muted-foreground: oklch(0.65 0.02 260); --color-accent: oklch(0.25 0.030 150); --color-accent-foreground: oklch(0.92 0.005 150); --color-destructive: oklch(0.704 0.191 22.216); --color-border: oklch(1 0.005 260 / 10%); --color-input: oklch(1 0.005 260 / 15%); --color-ring: oklch(0.600 0.200 260); --color-chart-1: oklch(0.600 0.200 260); --color-chart-2: oklch(0.65 0.15 150); --color-chart-3: oklch(0.6 0.18 20); --color-chart-4: oklch(0.7 0.15 320); --color-chart-5: oklch(0.55 0.2 140); --color-sidebar-background: oklch(0.13 0.015 260); --color-sidebar-foreground: oklch(0.96 0.005 260); --color-sidebar-primary: oklch(0.600 0.200 260); --color-sidebar-border: oklch(1 0.005 260 / 10%); --blue: oklch(0.600 0.200 260); --green: oklch(0.65 0.15 150); --red: oklch(0.6 0.18 20); --amber: oklch(0.75 0.15 80); --purple: oklch(0.7 0.15 320); --cyan: oklch(0.65 0.15 200); --orange: oklch(0.7 0.18 50); --pink: oklch(0.7 0.15 350); --lime: oklch(0.75 0.18 140); --tw: oklch(0.7 0.15 350); --jp: oklch(0.6 0.18 20); --cn: oklch(0.75 0.15 80); --sg: oklch(0.65 0.15 150); --th: oklch(0.7 0.15 320); } /* ── Base / Body ───────────────────────────────────────────── */ body { background: var(--color-background); color: var(--color-foreground); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } code, pre { font-family: var(--font-mono); } /* ── Animation ─────────────────────────────────────────────── */ @keyframes fi { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Hero ──────────────────────────────────────────────────── */ .hero { padding: 56px 24px 36px; text-align: center; border-bottom: 1px solid var(--color-border); position: relative; overflow: hidden; background: var(--color-background); } .hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient( circle at 50% 40%, oklch(0.5 0.15 260 / 6%), transparent 55% ); pointer-events: none; } .hero h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; position: relative; margin-bottom: 6px; letter-spacing: -0.02em; color: var(--color-foreground); } .hero h1 span { color: var(--color-primary); } .hero p { color: var(--color-muted-foreground); font-size: 0.92rem; position: relative; max-width: 660px; margin: 0 auto; } .hero .sub { color: var(--color-muted-foreground); font-size: 0.8rem; margin-top: 8px; position: relative; opacity: 0.7; } /* ── Nav Tabs ──────────────────────────────────────────────── */ nav { position: sticky; top: 0; z-index: 50; background: oklch(from var(--color-background) l c h / 94%); backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; } nav::-webkit-scrollbar { display: none; } .nav-inner { display: flex; gap: 4px; max-width: 1200px; margin: 0 auto; padding: 8px 16px; } .nb { background: none; border: 1px solid transparent; color: var(--color-muted-foreground); padding: 7px 14px; border-radius: var(--radius-md); cursor: pointer; font-size: 0.8rem; font-weight: 500; white-space: nowrap; transition: 0.15s; font-family: var(--font-sans); text-decoration: none; display: inline-block; } .nb:hover { color: var(--color-foreground); background: var(--color-muted); } /* ── Container ─────────────────────────────────────────────── */ .container { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; } /* ── Sections ─────────────────────────────────────────────── */ .sec { display: block; padding-top: 16px; scroll-margin-top: 60px; } .sec-divider { border: none; border-top: 1px solid var(--color-border); margin: 48px 0 8px; } /* ── Headings ──────────────────────────────────────────────── */ h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; } h3 { font-weight: 600; margin: 20px 0 10px; font-size: 1rem; } .sec-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; } .sec-sub, .sub-h { color: var(--color-muted-foreground); margin-bottom: 20px; font-size: 0.9rem; } /* ── Tables ────────────────────────────────────────────────── */ .tbl, .comp-table, .cmp-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.82rem; } .tbl th, .comp-table th, .cmp-table th { text-align: left; padding: 10px 12px; background: var(--color-muted); color: var(--color-muted-foreground); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--color-border); } .tbl td, .comp-table td, .cmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; } .tbl tr:hover td, .comp-table tr:hover td, .cmp-table tr:hover td { background: oklch(from var(--color-primary) l c h / 3%); } .tbl .money { font-family: var(--font-mono); font-weight: 600; text-align: right; } .tbl .r { color: var(--red); } .tbl .g { color: var(--green); } .tbl .a { color: var(--amber); } .tbl .b { color: var(--blue); } /* ── Cards ─────────────────────────────────────────────────── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 24px; } .card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; transition: all 0.2s; } .card:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .card-title { font-weight: 600; margin-bottom: 8px; font-size: 0.92rem; display: flex; align-items: center; gap: 8px; } .card-body { color: var(--color-muted-foreground); font-size: 0.85rem; } .card-body ul { margin: 6px 0 0 16px; } .card-body li { margin-bottom: 3px; } .card-body strong { color: var(--color-foreground); } /* ── Stat Cards ────────────────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 24px; } .stat-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; text-align: center; } .stat-card:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .stat-num { font-size: 1.5rem; font-weight: 800; font-family: var(--font-mono); } .stat-label { color: var(--color-muted-foreground); font-size: 0.72rem; margin-top: 2px; } /* ── Tags ──────────────────────────────────────────────────── */ .tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 0.72rem; font-weight: 600; font-family: var(--font-mono); } .tag-green, .badge-best { background: oklch(from var(--green) l c h / 14%); color: var(--green); } .tag-blue, .badge-good { background: oklch(from var(--blue) l c h / 14%); color: var(--blue); } .tag-amber, .badge-ok { background: oklch(from var(--amber) l c h / 14%); color: var(--amber); } .tag-red, .badge-bad { background: oklch(from var(--red) l c h / 14%); color: var(--red); } .tag-purple { background: oklch(from var(--purple) l c h / 14%); color: var(--purple); } .tag-cyan { background: oklch(from var(--cyan) l c h / 14%); color: var(--cyan); } .tag-pink { background: oklch(from var(--pink) l c h / 14%); color: var(--pink); } .tag-brand { background: oklch(from var(--color-primary) l c h / 14%); color: var(--color-primary); } /* ── Alerts ────────────────────────────────────────────────── */ .alert { border-left: 3px solid; border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 14px 18px; margin-bottom: 10px; background: var(--color-card); } .alert-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; } .alert-text { color: var(--color-muted-foreground); font-size: 0.85rem; } .alert.red, .alert.critical { border-color: var(--red); } .alert.red .alert-label, .alert.critical .alert-label { color: var(--red); } .alert.amber, .alert.warning { border-color: var(--amber); } .alert.amber .alert-label, .alert.warning .alert-label { color: var(--amber); } .alert.green, .alert.info { border-color: var(--green); } .alert.green .alert-label, .alert.info .alert-label { color: var(--green); } .alert.blue, .alert.brand { border-color: var(--color-primary); } .alert.blue .alert-label, .alert.brand .alert-label { color: var(--color-primary); } .alert.purple { border-color: var(--purple); } .alert.purple .alert-label { color: var(--purple); } .alert.cyan { border-color: var(--cyan); } .alert.cyan .alert-label { color: var(--cyan); } /* ── Quotes ────────────────────────────────────────────────── */ .quote { border-left: 3px solid var(--color-primary); padding: 12px 18px; margin: 12px 0; background: oklch(from var(--color-primary) l c h / 5%); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; color: var(--color-muted-foreground); font-size: 0.9rem; } .quote-src { font-style: normal; color: var(--color-muted-foreground); font-size: 0.8rem; margin-top: 4px; opacity: 0.7; } /* ── Bar Charts ────────────────────────────────────────────── */ .bar-group { margin-bottom: 20px; } .bar-group-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; } .bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .bar-flag { font-size: 1.1rem; width: 28px; text-align: center; flex-shrink: 0; } .bar-name { font-size: 0.8rem; color: var(--color-muted-foreground); width: 80px; flex-shrink: 0; } .bar-track { flex: 1; height: 12px; background: var(--color-muted); border-radius: var(--radius-sm); overflow: hidden; } .bar-fill { height: 100%; border-radius: var(--radius-sm); transition: width 1s ease; } .bar-val { font-size: 0.74rem; font-weight: 700; font-family: var(--font-mono); width: 70px; flex-shrink: 0; text-align: right; } /* ── Scenario Cards ────────────────────────────────────────── */ .sc { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px; transition: 0.2s; } .sc:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .sc-id { font-size: 0.75rem; font-weight: 700; color: var(--color-primary); letter-spacing: 0.5px; font-family: var(--font-mono); } .sc-title { font-weight: 700; font-size: 1rem; } .sc-meta { display: flex; gap: 8px; flex-wrap: wrap; } .sc-tag { font-size: 0.72rem; padding: 2px 8px; border-radius: var(--radius-sm); font-weight: 600; font-family: var(--font-mono); } .sc-body { color: var(--color-muted-foreground); font-size: 0.85rem; margin-bottom: 8px; } .sc-detail { font-size: 0.82rem; color: var(--color-muted-foreground); } .sc-detail strong { color: var(--color-foreground); } .sc-detail p { margin-bottom: 4px; } /* ── Timeline ──────────────────────────────────────────────── */ .tl { position: relative; padding-left: 36px; } .tl::before { content: ''; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--color-primary), var(--purple), var(--red)); } .tl-item { position: relative; margin-bottom: 24px; padding: 16px 20px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .tl-item:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .tl-dot { position: absolute; left: -29px; top: 20px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-primary); background: var(--color-background); } .tl-year { font-size: 0.75rem; color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-mono); } .tl-title { font-weight: 600; margin: 2px 0 4px; } .tl-body { color: var(--color-muted-foreground); font-size: 0.88rem; } /* ── Polls ─────────────────────────────────────────────────── */ .poll { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; } .poll:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .poll-title { font-weight: 600; margin-bottom: 12px; font-size: 0.95rem; } .poll-row { margin-bottom: 10px; } .poll-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 4px; } .poll-label span:last-child { font-weight: 700; font-family: var(--font-mono); } .poll-bar { height: 10px; border-radius: var(--radius-sm); background: var(--color-muted); overflow: hidden; } .poll-fill { height: 100%; border-radius: var(--radius-sm); transition: width 0.8s ease; } /* ── Country Cards ─────────────────────────────────────────── */ .country { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 14px; transition: 0.2s; } .country:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .country-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .country-flag { font-size: 2rem; flex-shrink: 0; } .country-name { font-weight: 700; font-size: 1.1rem; } .country-stance { font-size: 0.8rem; padding: 2px 10px; border-radius: var(--radius-sm); font-weight: 600; } .country-body { color: var(--color-muted-foreground); font-size: 0.9rem; } .country-body ul { margin: 8px 0 0 18px; } .country-body li { margin-bottom: 4px; } .country-body strong { color: var(--color-foreground); } /* ── Country Cards with Color Border (.cc) ─────────────────── */ .cc { border-top: 3px solid; } .cc.tw { border-top-color: var(--tw); } .cc.jp { border-top-color: var(--jp); } .cc.cn { border-top-color: var(--cn); } .cc.sg { border-top-color: var(--sg); } .cc.th { border-top-color: var(--th); } /* ── Safety Cards ──────────────────────────────────────────── */ .safety-card { background: var(--color-card); border-left: 3px solid; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 16px 20px; margin-bottom: 12px; } .safety-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .safety-text { color: var(--color-muted-foreground); font-size: 0.9rem; } .safety-card.critical { border-left-color: var(--red); } .safety-card.critical .safety-label { color: var(--red); } .safety-card.warning { border-left-color: var(--amber); } .safety-card.warning .safety-label { color: var(--amber); } .safety-card.info { border-left-color: var(--green); } .safety-card.info .safety-label { color: var(--green); } /* ── Firmware / Framework Cards ────────────────────────────── */ .fw-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; transition: 0.2s; } .fw-card:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .fw-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .fw-name { font-weight: 700; font-size: 1.15rem; } .fw-tags { display: flex; gap: 6px; flex-wrap: wrap; } .fw-tag { font-size: 0.75rem; padding: 2px 10px; border-radius: var(--radius-xl); background: var(--color-muted); color: var(--color-muted-foreground); } .fw-features { display: flex; flex-direction: column; gap: 6px; } .fw-feat { font-size: 0.85rem; color: var(--color-muted-foreground); display: flex; align-items: center; gap: 6px; } .fw-feat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .fw-feat.yes::before { background: var(--green); } .fw-feat.no::before { background: var(--red); } .fw-feat.partial::before { background: var(--amber); } /* ── Effort Bars ───────────────────────────────────────────── */ .effort-bar { background: var(--color-muted); border-radius: var(--radius-sm); height: 10px; overflow: hidden; margin-top: 4px; } .effort-fill { height: 100%; border-radius: var(--radius-sm); } /* ── Pipe Cards ────────────────────────────────────────────── */ .pipe { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; transition: 0.2s; } .pipe:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .pipe-icon { font-size: 1.6rem; flex-shrink: 0; } .pipe-name { font-weight: 700; font-size: 0.9rem; } .pipe-meta { color: var(--color-muted-foreground); font-size: 0.8rem; } .pipe-cap { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; white-space: nowrap; margin-left: auto; } /* ── Phase Cards ───────────────────────────────────────────── */ .phase { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 16px; transition: 0.2s; } .phase:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .phase-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .phase-title { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; } .phase-time { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; } .phase-body { color: var(--color-muted-foreground); font-size: 0.88rem; } .phase-body ul { margin: 6px 0 0 16px; } .phase-body li { margin-bottom: 3px; } /* ── Persona Cards ─────────────────────────────────────────── */ .persona { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; border-top: 3px solid; } .persona-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; } .persona-sub { color: var(--color-muted-foreground); font-size: 0.85rem; font-style: italic; margin-bottom: 10px; } .persona-body { color: var(--color-muted-foreground); font-size: 0.88rem; } /* ── Feature Groups ────────────────────────────────────────── */ .feat-group { margin-bottom: 22px; } .feat-group-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .feat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; } .feat-item { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 16px; font-size: 0.88rem; color: var(--color-muted-foreground); transition: 0.2s; } .feat-item:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .feat-item strong { color: var(--color-foreground); } /* ── VS Comparison ─────────────────────────────────────────── */ .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .vs-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; } .vs-card:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .vs-card.highlight { border-color: var(--color-ring); background: oklch(from var(--color-primary) l c h / 4%); } .vs-title { font-weight: 700; font-size: 1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .vs-body { color: var(--color-muted-foreground); font-size: 0.85rem; } .vs-body ul { margin: 6px 0 0 16px; } .vs-body li { margin-bottom: 3px; } /* ── Scope Cut Cards ───────────────────────────────────────── */ .scope-cut { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; } .scope-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; } .scope-card h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .scope-card ul { color: var(--color-muted-foreground); font-size: 0.85rem; margin-left: 16px; } /* ── Arch Box ──────────────────────────────────────────────── */ .arch-box { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-muted-foreground); line-height: 2.2; overflow-x: auto; } /* ── Settings Grid ─────────────────────────────────────────── */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; } .setting-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; text-align: center; } .setting-card:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .setting-value { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); font-family: var(--font-mono); } .setting-label { color: var(--color-muted-foreground); font-size: 0.8rem; margin-top: 2px; } /* ── Material Bars ─────────────────────────────────────────── */ .material-bar { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 12px; transition: 0.2s; } .material-bar:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .material-name { font-weight: 600; font-size: 1rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .material-meta { color: var(--color-muted-foreground); font-size: 0.85rem; margin-bottom: 12px; } .stat-row { display: flex; gap: 16px; flex-wrap: wrap; } /* ── Inline Stat Bars ──────────────────────────────────────── */ .stat { flex: 1; min-width: 120px; } .stat-bar-wrap { background: var(--color-muted); border-radius: var(--radius-sm); height: 8px; overflow: hidden; } .stat-bar { height: 100%; border-radius: var(--radius-sm); transition: width 0.8s ease; } /* ── Calculator ────────────────────────────────────────────── */ .calc-wrap { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; } .calc-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 20px; } .calc-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border); } .calc-row:last-child { border-bottom: none; } .calc-item { color: var(--color-muted-foreground); font-size: 0.9rem; } .calc-price { font-weight: 600; font-family: var(--font-mono); } .calc-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 0; margin-top: 8px; border-top: 2px solid var(--color-primary); } .calc-total-label { font-weight: 700; font-size: 1.1rem; } .calc-total-price { font-size: 1.4rem; font-weight: 800; color: var(--color-primary); font-family: var(--font-mono); } /* ── Tier Tabs ─────────────────────────────────────────────── */ .tier-tabs { display: flex; gap: 6px; margin-bottom: 24px; padding: 3px; background: var(--color-muted); border-radius: var(--radius-md); width: fit-content; } .tier-tab { padding: 6px 16px; border-radius: 6px; border: none; background: transparent; color: var(--color-muted-foreground); cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: 0.15s; font-family: var(--font-sans); } .tier-tab:hover { color: var(--color-foreground); } .tier-tab.active { background: var(--color-card); color: var(--color-foreground); box-shadow: 0 1px 3px oklch(0 0 0 / 10%); } .tier-content { display: none; } .tier-content.active { display: block; } /* ── Checklist Steps ───────────────────────────────────────── */ .tl-step { position: relative; margin-bottom: 32px; padding: 20px 24px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: 0.2s; } .tl-step:hover { border-color: var(--color-ring); transform: translateX(4px); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .tl-step.done .tl-dot { background: var(--green); border-color: var(--green); } .tl-checklist { list-style: none; margin-top: 10px; } .tl-checklist li { padding: 4px 0; color: var(--color-muted-foreground); font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 8px; } .tl-checklist li::before { content: ''; width: 16px; height: 16px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); display: inline-block; flex-shrink: 0; transition: 0.2s; } .tl-checklist li.checked { color: var(--green); text-decoration: line-through; } .tl-checklist li.checked::before { background: var(--green); border-color: var(--green); } .tl-day { font-size: 0.75rem; color: var(--color-primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-family: var(--font-mono); } /* ── Project Cards ─────────────────────────────────────────── */ .project-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; transition: 0.2s; cursor: pointer; text-decoration: none; color: inherit; } .project-card:hover { border-color: var(--color-ring); transform: translateX(4px); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); text-decoration: none; } .project-icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .project-info { flex: 1; min-width: 0; } .project-name { font-weight: 600; margin-bottom: 2px; } .project-desc { color: var(--color-muted-foreground); font-size: 0.85rem; } .project-tag { font-size: 0.75rem; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-muted); color: var(--color-muted-foreground); margin-top: 6px; display: inline-block; } .project-link { color: var(--color-primary); font-size: 0.85rem; white-space: nowrap; } /* ── 5-Column Grid ─────────────────────────────────────────── */ .c5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; } /* ── Color Strip ───────────────────────────────────────────── */ .cstrip { display: flex; gap: 0; margin-bottom: 24px; border-radius: var(--radius-md); overflow: hidden; height: 4px; } .cstrip div { flex: 1; } /* ── Comparison Cards ──────────────────────────────────────── */ .comp-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 12px; transition: 0.2s; } .comp-card:hover { border-color: var(--color-ring); box-shadow: 0 4px 16px oklch(from var(--color-primary) l c h / 8%); } .comp-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; } .comp-desc { color: var(--color-muted-foreground); font-size: 0.85rem; margin-bottom: 8px; } .comp-meta { font-size: 0.78rem; color: var(--color-muted-foreground); } .comp-price { font-weight: 700; font-family: var(--font-mono); } /* ── Big Number ────────────────────────────────────────────── */ .big-num { font-size: 2.5rem; font-weight: 800; font-family: var(--font-mono); color: var(--color-primary); letter-spacing: -0.02em; } /* ── Sidebar Navigator ─────────────────────────────────────── */ .rs-toggle { position: fixed; top: 12px; left: 12px; z-index: 9999; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-muted-foreground); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: 0.15s; box-shadow: 0 2px 8px oklch(0 0 0 / 8%); } .dark .rs-toggle { box-shadow: 0 2px 8px oklch(0 0 0 / 25%); } .rs-toggle:hover { color: var(--color-foreground); border-color: var(--color-ring); } .rs-panel { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background: oklch(from var(--color-background) l c h / 97%); backdrop-filter: blur(16px); border-right: 1px solid var(--color-border); z-index: 9998; transform: translateX(-100%); transition: transform 0.25s ease; overflow-y: auto; padding: 56px 16px 24px; scrollbar-width: thin; } .rs-panel.open { transform: translateX(0); } .rs-panel.open ~ .rs-toggle { left: 248px; } .rs-stitle, .rs-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-muted-foreground); font-weight: 700; margin: 16px 0 8px; padding: 0 4px; } .rs-stitle:first-child, .rs-title:first-child { margin-top: 0; } .rs-link { display: block; padding: 7px 10px; border-radius: var(--radius-md); color: var(--color-muted-foreground); text-decoration: none; font-size: 0.82rem; transition: 0.15s; margin-bottom: 2px; line-height: 1.3; } .rs-link:hover { color: var(--color-foreground); background: var(--color-muted); text-decoration: none; } .rs-link.current { color: var(--color-primary); background: oklch(from var(--color-primary) l c h / 10%); font-weight: 600; } .rs-sep { height: 1px; background: var(--color-border); margin: 12px 4px; } .rs-home { display: block; padding: 8px 10px; border-radius: var(--radius-md); color: var(--color-primary); text-decoration: none; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; transition: 0.15s; } .rs-home:hover { background: oklch(from var(--color-primary) l c h / 10%); text-decoration: none; } /* ── Page Theme Toggle ─────────────────────────────────────── */ /* Fixed toggle container — wraps lang + theme toggles at top-right */ .page-fixed-toggles { position: fixed; top: 12px; right: 12px; z-index: 9999; display: flex; align-items: center; gap: 8px; } .page-theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-muted-foreground); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: 0.15s; box-shadow: 0 2px 8px oklch(0 0 0 / 8%); } .dark .page-theme-toggle { box-shadow: 0 2px 8px oklch(0 0 0 / 25%); } .page-theme-toggle:hover { color: var(--color-foreground); border-color: var(--color-ring); } /* ── Scrollbar Styling ─────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-muted); border-radius: var(--radius-sm); } ::-webkit-scrollbar-thumb:hover { background: var(--color-muted-foreground); } * { scrollbar-width: thin; scrollbar-color: var(--color-muted) transparent; } /* ── Responsive: Tablet (max-width 800px) ──────────────────── */ @media (max-width: 800px) { .c5 { grid-template-columns: 1fr; } .vs, .scope-cut { grid-template-columns: 1fr; } .bar-name { width: 60px; } .bar-val { width: 50px; } } /* ── Responsive: Mobile (max-width 640px) ──────────────────── */ @media (max-width: 640px) { .card-grid, .feat-list { grid-template-columns: 1fr; } .stat-grid { grid-template-columns: 1fr 1fr; } .stat-row { flex-direction: column; gap: 8px; } .settings-grid { grid-template-columns: 1fr 1fr; } .hero { padding: 40px 16px 24px; } .container { padding: 16px 12px 60px; } .nav-inner { padding: 6px 10px; } .project-card { flex-direction: column; align-items: flex-start; gap: 10px; } .big-num { font-size: 1.8rem; } }