/* ============================================================================= chabasan.ai — design system Rules: docs/DESIGN-GUIDELINES.md Monochrome: black header/footer, near-black page, grey surfaces, white text. ============================================================================= */ :root { --c-black: #000000; /* header, footer */ --c-bg: #0d0d0d; /* page background */ --c-surface: #161616; /* cards, panels */ --c-surface-2:#1e1e1e; /* hover surfaces */ --c-border: #2a2a2a; /* hairlines */ --c-border-2: #3d3d3d; /* hover hairlines */ --c-text: #f2f2f2; /* primary text */ --c-muted: #a3a3a3; /* secondary text */ --c-dim: #6f6f6f; /* tertiary text */ --header-h: 64px; --maxw: 960px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.7; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } /* --- Accessibility ---------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-text); color: var(--c-black); padding: 0.5rem 1rem; z-index: 200; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } /* --- Header ------------------------------------------------------------------ */ .site-header { background: var(--c-black); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 100; } .header-inner { max-width: 1200px; margin: 0 auto; height: var(--header-h); padding: 0 1.25rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } /* Left: nav (desktop) / burger (mobile) */ .nav-left { display: flex; align-items: center; gap: 0.25rem; justify-self: start; } .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--c-text); text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 0.45rem 0.8rem; border-radius: 6px; background: none; border: 0; font-family: inherit; cursor: pointer; line-height: 1.4; } .nav-link:hover { background: var(--c-surface-2); color: #ffffff; } /* Center: logo */ .brand { justify-self: center; display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 6px; } .brand .logo { height: 40px; width: auto; display: block; } /* Right: language switcher */ .lang { justify-self: end; position: relative; } /* Dropdowns (products, language) */ .dropdown { position: relative; } .caret { width: 10px; height: 10px; flex: none; transition: transform 0.15s; } .dropdown.open > .nav-link .caret, .lang.open .caret { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; background: var(--c-black); border: 1px solid var(--c-border); border-radius: 8px; padding: 0.4rem; display: none; flex-direction: column; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); } .dropdown.open > .dropdown-menu, .lang.open .dropdown-menu { display: flex; } .lang .dropdown-menu { left: auto; right: 0; min-width: 180px; } /* No-JS fallback: while (removed by js/site.js on load), dropdowns open via keyboard focus so navigation works without script. Footer also carries static Deutsch/English links as a universal fallback. */ .no-js .dropdown:focus-within > .dropdown-menu { display: flex; } .dropdown-menu a { color: var(--c-text); text-decoration: none; font-size: 0.95rem; padding: 0.55rem 0.8rem; border-radius: 6px; display: flex; align-items: center; gap: 0.6rem; } .dropdown-menu a:hover { background: var(--c-surface-2); } .dropdown-menu a .hint { margin-left: auto; color: var(--c-dim); font-size: 0.8rem; } .dropdown-menu a[aria-current] { color: #ffffff; font-weight: 600; } .flag { width: 20px; height: 14px; flex: none; border-radius: 2px; display: block; } /* Burger (mobile only) */ .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 0; border-radius: 6px; cursor: pointer; } .burger span { display: block; height: 2px; width: 100%; background: var(--c-text); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; } .burger:hover { background: var(--c-surface-2); } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile slide-down menu */ .mobile-menu { display: none; background: var(--c-black); border-bottom: 1px solid var(--c-border); padding: 0.5rem 1.25rem 1rem; } .mobile-menu.open { display: block; } .mobile-menu a { display: block; color: var(--c-text); text-decoration: none; font-size: 1.05rem; padding: 0.65rem 0.5rem; border-radius: 6px; } .mobile-menu a:hover { background: var(--c-surface-2); } .mobile-menu a.sub { padding-left: 1.5rem; color: var(--c-muted); } .mobile-menu a.sub:hover { color: var(--c-text); } .mobile-group-label { display: block; padding: 0.65rem 0.5rem 0.2rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-dim); } .mobile-divider { border-top: 1px solid var(--c-border); margin: 0.5rem 0; } /* --- Content ------------------------------------------------------------------ */ main { flex: 1; width: 100%; } .container { max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.5rem 4rem; width: 100%; } .container.narrow { max-width: 760px; } a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-dim); text-underline-offset: 3px; } a:hover { color: #ffffff; text-decoration-color: #ffffff; } h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: #ffffff; margin-bottom: 1rem; } h2 { font-size: 1.35rem; font-weight: 650; margin-top: 2.5rem; margin-bottom: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border); color: #ffffff; letter-spacing: -0.01em; } h2:first-of-type { border-top: none; padding-top: 0; } h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: var(--c-text); } p { margin-bottom: 0.75rem; } strong { color: #ffffff; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; padding: 0.1em 0.35em; } ul, ol { margin-bottom: 0.75rem; padding-left: 1.25rem; } ul li, ol li { margin-bottom: 0.35rem; } ul.index { list-style: none; padding-left: 0; columns: 2; column-gap: 1.5rem; } ul.index li { margin-bottom: 0.25rem; } ul.glossary { list-style: none; padding-left: 0; } ul.glossary li { margin-bottom: 0.75rem; } address { font-style: normal; margin-bottom: 0.75rem; } /* --- Hero ----------------------------------------------------------------------- */ .hero { padding: 3.5rem 0 1.5rem; text-align: center; } .hero .hero-logo { height: 96px; width: auto; margin: 0 auto 2rem; display: block; } .hero h1 { font-size: 2.4rem; margin-bottom: 0.75rem; } .hero .lead { font-size: 1.15rem; color: var(--c-muted); max-width: 620px; margin: 0 auto 0.75rem; } .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dim); margin-bottom: 1rem; } /* --- Product cards ---------------------------------------------------------------- */ .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.25rem; } .product-card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--c-border); border-radius: 10px; padding: 1.5rem 1.6rem; background: var(--c-surface); transition: border-color 0.15s, background 0.15s, transform 0.15s; } .product-card:hover { border-color: var(--c-border-2); background: var(--c-surface-2); transform: translateY(-2px); } .product-card h3 { margin-top: 0; color: #ffffff; font-size: 1.15rem; } .product-card p { color: var(--c-muted); margin-bottom: 0; } .product-card .card-link { display: inline-block; margin-top: 0.9rem; font-size: 0.9rem; color: var(--c-text); text-decoration: none; border-bottom: 1px solid var(--c-dim); } .product-card:hover .card-link { border-bottom-color: #ffffff; } .tag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); border: 1px solid var(--c-border-2); border-radius: 4px; padding: 0.12rem 0.45rem; margin-left: 0.5rem; vertical-align: middle; } /* --- Notices / blocks --------------------------------------------------------------- */ .notice { border: 1px dashed var(--c-border-2); border-radius: 10px; padding: 1.25rem 1.5rem; background: var(--c-surface); color: var(--c-muted); margin-top: 1.5rem; } .legal-block { border: 1px solid var(--c-border); border-radius: 10px; padding: 1.25rem 1.5rem; margin-top: 1rem; background: var(--c-surface); } .faq-item { border: 1px solid var(--c-border); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; background: var(--c-surface); } .faq-item h3 { margin-top: 0; } .cross-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.75rem; } .cross-links a { display: inline-block; border: 1px solid var(--c-border); border-radius: 8px; padding: 0.55rem 1rem; background: var(--c-surface); text-decoration: none; } .cross-links a:hover { border-color: var(--c-border-2); background: var(--c-surface-2); } .page-logo { height: 56px; width: auto; display: block; margin-bottom: 1.75rem; } .seal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border); font-size: 0.85rem; color: var(--c-dim); } .seal a { color: var(--c-dim); } /* --- Footer ----------------------------------------------------------------------- */ .site-footer { background: var(--c-black); border-top: 1px solid var(--c-border); margin-top: auto; } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--c-dim); } .footer-brand { display: flex; align-items: center; gap: 0.9rem; } .footer-logo { height: 26px; width: auto; opacity: 0.6; } .footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; } .site-footer a { color: var(--c-dim); text-decoration: none; } .site-footer a:hover { color: var(--c-text); } /* --- Responsive --------------------------------------------------------------------- */ @media (max-width: 860px) { .nav-left { display: none; } .burger { display: flex; justify-self: start; } .brand .logo { height: 34px; } .lang-label { display: none; } /* mobile: flag only, per design guidelines */ .container { padding: 2rem 1.25rem 3rem; } h1 { font-size: 1.6rem; } .hero { padding: 2rem 0 1rem; } .hero h1 { font-size: 1.8rem; } .hero .hero-logo { height: 64px; margin-bottom: 1.5rem; } ul.index { columns: 1; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; } }