/* revit-theme.css — Revit-like dark UI theme for kramer.argla-tools.de Drop-in theme: uses CSS variables + component styling. */ :root{ --nav-h: 52px; --sidebar-w: 260px; /* Revit-ish dark palette */ --bg: #0f1114; --panel: #171a1f; --panel-2: #1d222a; --panel-3: #232a34; --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.14); --text: rgba(255,255,255,.88); --sub: rgba(255,255,255,.72); --muted: rgba(255,255,255,.52); /* Accent (Revit-blue) */ --accent: #4aa3ff; --accent-2: #2f78d6; --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --radius: 10px; --radius-sm: 8px; --shadow: 0 10px 26px rgba(0,0,0,.45); --font: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif; } /* Optional: Kramer CI toggle via attribute … */ body[data-theme="kramer"]{ --accent: #0b5cff; --accent-2: #083fae; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); } a{ color: inherit; } /* ── TOP NAV ───────────────────────────────────────── */ .top-nav{ position: fixed; inset: 0 0 auto 0; height: var(--nav-h); display:flex; align-items:center; gap: 1.1rem; padding: 0 1.25rem; background: linear-gradient(180deg, #171a1f 0%, #121519 100%); border-bottom: 1px solid var(--border); z-index: 200; } .kramer-logo{ display:flex; align-items:center; text-decoration:none; } .kramer-logo img{ height:28px; width:auto; opacity:.92; } .nav-divider{ width:1px; height:22px; background: rgba(255,255,255,.15); } .nav-title{ font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.66); letter-spacing:.01em; } /* ── LAYOUT ────────────────────────────────────────── */ .layout{ display:flex; min-height: 100vh; padding-top: var(--nav-h); } /* ── SIDEBAR ───────────────────────────────────────── */ .sidebar{ width: var(--sidebar-w); position: fixed; top: var(--nav-h); bottom: 0; left: 0; background: var(--panel); border-right: 1px solid var(--border); overflow-y:auto; padding: 1.2rem 0; z-index: 100; } .sidebar::-webkit-scrollbar{ width:4px; } .sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 2px; } .sidebar-section{ padding: 0 1.1rem; margin-bottom: 1.2rem; } .sidebar-label{ font-size: .67rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: .55rem; padding: 0 .25rem; } .sidebar-link{ display:flex; align-items:center; gap:.6rem; padding: .5rem .65rem; border-radius: 8px; font-size: .82rem; color: rgba(255,255,255,.62); text-decoration:none; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; margin-bottom: 2px; } .sidebar-link:hover{ background: rgba(255,255,255,.05); color: rgba(255,255,255,.86); } .sidebar-link.active{ background: rgba(74,163,255,.12); border-color: rgba(74,163,255,.18); color: rgba(255,255,255,.92); } .sidebar-num{ font-size: .72rem; color: rgba(255,255,255,.25); width: 14px; flex-shrink:0; } .dot{ width:10px; height:10px; border-radius: 50%; background: var(--ok); flex-shrink:0; } .dot.online{ background: var(--accent); } .dot.soon{ background: var(--bad); } /* ── MAIN ──────────────────────────────────────────── */ .main{ margin-left: var(--sidebar-w); flex: 1; padding: 2.25rem 2.25rem 4rem; max-width: none; background: radial-gradient(1100px 520px at 18% 0%, rgba(74,163,255,.10), transparent 55%), radial-gradient(900px 460px at 84% 24%, rgba(47,120,214,.07), transparent 60%), var(--bg); } /* ── HEADER BLOCK ─────────────────────────────────── */ .page-header{ text-align:center; margin: 0 0 2rem; } .page-header .logo-block{ margin-bottom: 1.2rem; } .page-header .logo-block img{ height: 92px; width:auto; opacity:.95; } .page-header h1{ font-size: 1.55rem; font-weight: 700; letter-spacing: -0.3px; margin: .6rem 0 .35rem; } .page-header .subtitle{ font-size: .85rem; color: var(--muted); } .tag-row{ display:flex; justify-content:center; gap:.55rem; margin-top: 1rem; flex-wrap: wrap; } .tag{ display:inline-flex; align-items:center; gap:.5rem; font-size: .70rem; font-weight: 650; padding: .28rem .75rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--border); color: rgba(255,255,255,.72); } /* ── CARDS ───────────────────────────────────────── */ .intro-card, .tool-card-wrap, .placeholder-card{ background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); } .intro-card{ padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; font-size: .88rem; color: var(--sub); line-height: 1.75; } .intro-card p{ margin: 0; } .intro-card p + p{ margin-top: .65rem; } .section-card{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-bottom: 1.1rem; } .section-card .eyebrow{ font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: .55rem; } .section-card h2{ font-size: 1.15rem; font-weight: 750; margin:0 0 .35rem; color: rgba(255,255,255,.92); } .section-card p{ margin:0; font-size: .84rem; color: rgba(255,255,255,.55); } /* ── TOOL LIST ───────────────────────────────────── */ .tool-card-wrap{ overflow:hidden; margin-bottom: .75rem; } .tool-card-wrap + .tool-card-wrap{ margin-top: 1px; } .tool-card-wrap img{ width:100%; height:150px; object-fit:cover; object-position: top; display:block; border-bottom:1px solid var(--border); opacity:.92; filter: saturate(.95) contrast(1.05); } .tool-card{ display:flex; align-items:center; justify-content: space-between; gap: 1.25rem; padding: 1.2rem 1.4rem; text-decoration:none; color: inherit; transition: background .15s; } .tool-card:hover{ background: rgba(255,255,255,.03); } .tool-left{ display:flex; align-items:flex-start; gap: 1rem; flex: 1; min-width: 0; } .tool-info{ flex:1; min-width:0; } .tool-name{ font-size: .98rem; font-weight: 800; color: rgba(255,255,255,.90); margin-bottom: .3rem; } .tool-desc{ font-size: .82rem; color: rgba(255,255,255,.62); line-height: 1.65; } .tool-badges{ display:flex; gap: .5rem; margin-top: .85rem; flex-wrap:wrap; } .tbadge{ display:inline-flex; align-items:center; gap:.35rem; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.05); color: rgba(255,255,255,.66); } .tbadge-live{ border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.08); color: rgba(210,255,226,.90); } .tbadge-online{ border-color: rgba(74,163,255,.30); background: rgba(74,163,255,.10); color: rgba(212,236,255,.92); } .tbadge-live::before, .tbadge-online::before{ content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; } .tbadge-type{ } .tool-right{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; } /* ── Buttons ─────────────────────────────────────── */ .btn-open, .btn-dl{ display:inline-flex; align-items:center; gap:.45rem; font-family: var(--font); font-size: .74rem; font-weight: 650; padding: .48rem .95rem; border-radius: 9px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.90); border: 1px solid var(--border); text-decoration:none; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; } .btn-open:hover, .btn-dl:hover{ background: rgba(74,163,255,.14); border-color: rgba(74,163,255,.30); } .btn-open:active, .btn-dl:active{ transform: translateY(1px); } .btn-dl svg{ width: 12px; height: 12px; stroke: currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ── Placeholder ─────────────────────────────────── */ .placeholder-card{ padding: 1rem 1.4rem; display:flex; align-items:center; gap:.75rem; margin-top: 8px; } .placeholder-card p{ margin:0; font-size: .82rem; color: rgba(255,255,255,.58); } .placeholder-card a{ color: rgba(255,255,255,.82); } .placeholder-card a:hover{ color: var(--accent); } /* ── Footer ──────────────────────────────────────── */ .footer{ margin-left: var(--sidebar-w); border-top: 1px solid var(--border); padding: 1.05rem 2.25rem; display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; color: rgba(255,255,255,.55); } .footer p{ margin:0; font-size: .76rem; } .footer a{ color: rgba(255,255,255,.72); text-decoration:none; } .footer a:hover{ color: rgba(255,255,255,.92); } /* ── Accessibility / Focus ───────────────────────── */ :focus-visible{ outline: 2px solid rgba(74,163,255,.55); outline-offset: 2px; border-radius: 10px; } /* ── Responsive ──────────────────────────────────── */ @media (max-width: 820px){ :root{ --sidebar-w: 0px; } .sidebar{ display:none; } .main{ margin-left:0; padding: 1.6rem 1.1rem 3.2rem; } .footer{ margin-left:0; padding: 1rem 1.1rem; } .tool-right{ flex-direction: column; align-items: flex-start; } }