/* * Visual theme for the Claude apps gateway admin console. * * An Anthropic-inspired "warm editorial" theme: bone-paper backgrounds, a * terracotta ("Claude clay") accent, a Fraunces serif for display headings * over a Hanken Grotesk body, and IBM Plex Mono for codes and identifiers. * Plain CSS driving a server-rendered Jinja2 app -- the templates reference * only the semantic class names defined here, so the whole look is themed * from this one file. Fonts are loaded via in the page s. */ :root { /* ---- Surfaces (warm paper) ---- */ --paper: #f0eee6; /* page background -- warm bone */ --paper-2: #e7e3d7; /* deeper tone for gradients */ --surface: #fbfaf6; /* cards / containers */ --surface-header: #f4f1e8; /* container header strip */ /* ---- Ink & text ---- */ --ink: #1a1915; /* headings */ --ink-body: #2f2c26; /* body text */ --muted: #78746a; /* secondary text */ /* ---- Lines ---- */ --line: #e4e0d4; /* hairline dividers */ --line-strong: #d2ccbc; /* input borders */ /* ---- Accent (terracotta) ---- */ --accent: #c96442; --accent-hover: #ac5030; --accent-tint: #f3e6de; /* soft accent background */ /* ---- Status (warm-toned) ---- */ --ok-bg: #e7efe4; --ok-ink: #3f6b47; --ok-line: #bcd0b7; --warn-bg: #f6ecd4; --warn-ink: #8a6420; --warn-line: #e2cd9b; --err-bg: #f6e2dc; --err-ink: #a23a22; --err-line: #e3b7aa; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace; --space-xxs: 4px; --space-xs: 8px; --space-s: 12px; --space-m: 16px; --space-l: 20px; --space-xl: 32px; --r-card: 14px; --r-btn: 8px; --r-input: 8px; --shadow-card: 0 1px 2px rgba(40, 34, 24, 0.04), 0 10px 28px -14px rgba(40, 34, 24, 0.14); --shadow-btn: 0 1px 2px rgba(40, 34, 24, 0.12); } * { box-sizing: border-box; } html { background: var(--paper); } body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--ink-body); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--accent-tint); color: var(--accent-hover); } /* Faint film-grain over the paper -- adds texture without touching legibility. */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.022; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Brand mark (terracotta sunburst) ---- */ .brand-mark { color: var(--accent); flex-shrink: 0; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } /* ---- Top navigation ---- */ .top-nav { position: sticky; top: 0; z-index: 100; background: rgba(240, 238, 230, 0.82); backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line); height: 60px; display: flex; align-items: center; padding: 0 var(--space-xl); gap: var(--space-m); } .top-nav__brand { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px; } .top-nav__brand:hover .brand-mark { transform: rotate(90deg); } .top-nav__spacer { flex: 1; } .top-nav__identity { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: var(--space-m); } .top-nav__signout { color: var(--ink-body); text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--r-btn); padding: 6px 14px; font-size: 13px; font-weight: 500; background: var(--surface); transition: border-color 0.15s ease, background 0.15s ease; } .top-nav__signout:hover { border-color: var(--muted); background: #fff; } /* ---- Layout: side nav + content ---- */ .app-layout { display: flex; min-height: calc(100vh - 60px); } .side-nav { width: 248px; border-right: 1px solid var(--line); padding: var(--space-l) 0 var(--space-xl); flex-shrink: 0; } .side-nav__section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); padding: 0 var(--space-l); margin: var(--space-l) 0 var(--space-xs); } .side-nav__section-title:first-child { margin-top: var(--space-xs); } .side-nav__link { display: block; margin: 2px var(--space-s); padding: 9px var(--space-m); color: var(--ink-body); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: var(--r-btn); position: relative; transition: background 0.15s ease, color 0.15s ease; } .side-nav__link:hover { background: rgba(201, 100, 66, 0.07); } .side-nav__link--active { background: var(--accent-tint); color: var(--accent-hover); font-weight: 600; } .side-nav__link--active::before { content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px; background: var(--accent); } .content { flex: 1; padding: 40px 48px; max-width: 1180px; position: relative; z-index: 2; } /* ---- Staggered page-load reveal ---- */ @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .content > * { animation: fade-up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .content > *:nth-child(1) { animation-delay: 0.02s; } .content > *:nth-child(2) { animation-delay: 0.08s; } .content > *:nth-child(3) { animation-delay: 0.14s; } .content > *:nth-child(4) { animation-delay: 0.20s; } .content > *:nth-child(5) { animation-delay: 0.26s; } /* ---- Page header ---- */ .page-header { margin-bottom: 28px; } .page-header h1 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; font-size: 32px; line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 10px; } .page-header__description { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; max-width: 72ch; } /* ---- Container ---- */ .container { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); margin-bottom: var(--space-l); overflow: hidden; } .container__header { padding: var(--space-m) var(--space-l); border-bottom: 1px solid var(--line); background: var(--surface-header); display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); flex-wrap: wrap; } .container__header h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; margin: 0; color: var(--ink); } .container__body { padding: var(--space-l); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: var(--space-xxs); font-family: var(--font-sans); font-size: 14px; font-weight: 600; border-radius: var(--r-btn); padding: 9px 18px; cursor: pointer; border: 1px solid transparent; text-decoration: none; line-height: 1.2; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-btn); } .btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn--primary:active { transform: none; } .btn--normal { background: var(--surface); color: var(--ink-body); border-color: var(--line-strong); } .btn--normal:hover { background: #fff; border-color: var(--muted); } .btn--danger { background: transparent; color: var(--err-ink); border-color: var(--err-line); } .btn--danger:hover { background: var(--err-bg); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---- Forms ---- */ .form-field { margin-bottom: var(--space-m); } .form-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--space-xxs); color: var(--ink); } .form-field__hint { font-size: 12.5px; color: var(--muted); margin-top: var(--space-xxs); line-height: 1.45; } input[type="text"], input[type="number"], select { width: 100%; max-width: 400px; padding: 9px 12px; font-size: 14px; font-family: inherit; color: var(--ink-body); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-input); transition: border-color 0.15s ease, box-shadow 0.15s ease; } input[type="text"]::placeholder { color: #a8a397; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } /* ---- Tables ---- */ table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; } table.data-table th { text-align: left; padding: var(--space-s) var(--space-l); border-bottom: 1px solid var(--line-strong); color: var(--muted); font-weight: 600; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; background: transparent; } table.data-table td { padding: 14px var(--space-l); border-bottom: 1px solid var(--line); color: var(--ink-body); } table.data-table tr:last-child td { border-bottom: none; } table.data-table tbody tr { transition: background 0.12s ease; } table.data-table tbody tr:hover td { background: rgba(201, 100, 66, 0.04); } table.data-table .numeric { text-align: right; font-family: var(--font-mono); font-size: 13px; } /* ---- Status badges ---- */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; } .badge--success { background: var(--ok-bg); color: var(--ok-ink); } .badge--warning { background: var(--warn-bg); color: var(--warn-ink); } .badge--error { background: var(--err-bg); color: var(--err-ink); } .badge--info { background: var(--accent-tint); color: var(--accent-hover); } /* ---- Alerts ---- */ .alert { border-radius: var(--r-card); padding: 14px var(--space-m); margin-bottom: var(--space-l); display: flex; gap: var(--space-s); font-size: 14px; line-height: 1.5; border: 1px solid transparent; } .alert--error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-ink); } .alert--info { background: var(--accent-tint); border-color: #e7c9bc; color: var(--accent-hover); } .alert--success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); } /* ---- Utility ---- */ .text-secondary { color: var(--muted); } .mono { font-family: var(--font-mono); } .flex-row { display: flex; align-items: center; gap: var(--space-s); } .flex-row--between { display: flex; align-items: center; justify-content: space-between; } .empty-state { text-align: center; padding: 56px var(--space-l); color: var(--muted); font-size: 15px; line-height: 1.6; } /* ---- Toggle switch ---- */ .toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle__track { position: absolute; inset: 0; background: var(--line-strong); border-radius: 999px; transition: background 0.15s ease; cursor: pointer; } .toggle__track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .toggle input:checked + .toggle__track { background: var(--accent); } .toggle input:checked + .toggle__track::before { transform: translateX(16px); } .toggle input:disabled + .toggle__track { opacity: 0.5; cursor: not-allowed; } /* ---- Eventual-consistency status pill ---- */ .status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); } .status-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-ink); } .status-pill--applying .status-pill__dot { background: var(--warn-ink); animation: status-pulse 1.2s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---- Sign-in / device-code pages ---- */ .signin-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-l); background: radial-gradient(1100px 520px at 50% -12%, #f8f5eb 0%, rgba(248, 245, 235, 0) 70%), linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); } .signin-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 64px -28px rgba(40, 34, 24, 0.35); padding: 44px 40px; max-width: 440px; width: 100%; text-align: center; animation: fade-up 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .signin-card h1 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; font-size: 26px; letter-spacing: -0.015em; color: var(--ink); margin-top: 0; margin-bottom: var(--space-s); display: flex; align-items: center; justify-content: center; gap: 10px; } .device-code { font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: 6px; color: var(--accent-hover); background: var(--accent-tint); border-radius: 12px; padding: 18px; margin: var(--space-l) 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }