/* ═══════════════════════════════════════════════ THINKLUSIVE DESIGN SYSTEM Monochrom · Editorial · Schwarz/Weiß Shared across tools.thinklusive.de ═══════════════════════════════════════════════ */ /* Fonts: loaded in HTML - Cormorant Garamond (Display/Headings) - Outfit (Body/UI) - IBM Plex Mono (Labels/Code/Data) Google Fonts URL: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Outfit:wght@200;300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap */ :root { /* ── Grayscale Palette ── */ --black: #0a0a0a; --ink: #111111; --charcoal: #1a1a1a; --graphite: #2a2a2a; --ash: #3a3a3a; --stone: #555555; --silver: #888888; --mist: #b0b0b0; --fog: #d0d0d0; --smoke: #e8e8e8; --pearl: #f2f2f2; --white: #fafafa; --pure: #ffffff; /* ── Scores (only exception to monochrom — for data viz) ── */ --score-good: #3a3a3a; --score-ok: #888888; --score-bad: #555555; /* ── Spacing ── */ --r: 16px; --rs: 8px; /* ── Easing ── */ --t: cubic-bezier(0.22, 1, 0.36, 1); } /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; scroll-behavior: smooth; } body { font-family: 'Outfit', sans-serif; background: var(--white); color: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ── Grain Overlay ── */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; } /* ═══ TYPOGRAPHY ═══ */ .t-display { font-family: 'Cormorant Garamond', serif; font-weight: 300; letter-spacing: -1px; line-height: 1.1; } .t-body { font-family: 'Outfit', sans-serif; font-weight: 300; line-height: 1.8; color: var(--stone); } .t-mono { font-family: 'IBM Plex Mono', monospace; } .t-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--silver); } .t-label::after { content: ''; flex: 1; height: 1px; background: var(--smoke); } /* ═══ NAV ═══ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background: rgba(250, 250, 250, 0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--smoke); } .nav-wordmark { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; letter-spacing: 2px; text-decoration: none; color: var(--black); display: inline-flex; line-height: 1; } .nav-wordmark .th { display: inline-block; transition: opacity 0.6s var(--t), transform 0.6s var(--t), letter-spacing 0.6s var(--t); } .nav-wordmark:hover .th { opacity: 0; transform: translateX(-4px); letter-spacing: -4px; } .nav-wordmark .inklusive { display: inline-block; transition: transform 0.6s var(--t); } .nav-wordmark:hover .inklusive { transform: translateX(-8px); } .nav-badge { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; background: var(--pearl); border: 1px solid var(--smoke); color: var(--stone); padding: 3px 10px; border-radius: 100px; margin-left: 10px; } .nav-right { display: flex; align-items: center; gap: 20px; } .nav-link { font-size: 13px; color: var(--stone); text-decoration: none; transition: color 0.3s; } .nav-link:hover { color: var(--black); } .nav-cta { padding: 10px 24px; background: var(--black); color: var(--pure); font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: all 0.3s var(--t); } .nav-cta:hover { background: var(--graphite); transform: translateY(-1px); } /* ═══ TOOL INPUT ═══ */ .tool-input-wrap { display: flex; gap: 0; max-width: 600px; margin: 0 auto; border: 2px solid var(--black); border-radius: var(--r); overflow: hidden; transition: box-shadow 0.3s var(--t); } .tool-input-wrap:focus-within { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); } .tool-input { flex: 1; padding: 16px 20px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 300; border: none; outline: none; background: var(--pure); color: var(--black); } .tool-input::placeholder { color: var(--mist); } .tool-submit { padding: 16px 28px; background: var(--black); color: var(--pure); font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; border: none; cursor: pointer; transition: background 0.3s; white-space: nowrap; } .tool-submit:hover { background: var(--graphite); } /* ═══ RESULT CARDS ═══ */ .result-card { background: var(--pure); border: 1px solid var(--smoke); border-radius: var(--r); padding: 28px; transition: all 0.3s var(--t); } .result-card:hover { border-color: var(--ash); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); } .result-card-dark { background: var(--black); border-color: var(--graphite); color: var(--pure); } .result-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--silver); margin-bottom: 8px; } .result-value { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; letter-spacing: -1px; line-height: 1; } .result-bar { height: 4px; background: var(--smoke); border-radius: 2px; overflow: hidden; margin-top: 12px; } .result-bar-fill { height: 100%; background: var(--ash); border-radius: 2px; transition: width 1s var(--t); } /* ═══ SCORE RING ═══ */ .score-ring { width: 160px; height: 160px; position: relative; margin: 0 auto; } .score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .score-ring circle { fill: none; stroke-linecap: round; } .score-ring .ring-bg { stroke: var(--smoke); stroke-width: 6; } .score-ring .ring-fg { stroke: var(--ash); stroke-width: 6; transition: stroke-dashoffset 1.5s var(--t); } .score-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } /* ═══ CTA BANNER ═══ */ .cta-banner { background: var(--black); color: var(--pure); padding: 48px; border-radius: var(--r); text-align: center; margin-top: 48px; } .cta-banner h3 { font-family: 'Cormorant Garamond', serif; font-size: clamp(22px, 3vw, 32px); font-weight: 300; margin-bottom: 12px; } .cta-banner h3 em { font-style: italic; font-weight: 400; } .cta-banner p { font-size: 14px; color: var(--silver); margin-bottom: 28px; } .cta-banner a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; background: var(--pure); color: var(--black); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: all 0.3s var(--t); } .cta-banner a:hover { background: var(--fog); transform: translateY(-2px); } .cta-banner a svg { width: 14px; height: 14px; } /* ═══ FOOTER ═══ */ .footer { padding: 48px 40px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--smoke); } .footer-brand { font-family: 'Cormorant Garamond', serif; font-size: 16px; color: var(--mist); letter-spacing: 1px; } .footer-links { display: flex; gap: 24px; } .footer-links a { font-size: 12px; color: var(--silver); text-decoration: none; transition: color 0.3s; } .footer-links a:hover { color: var(--black); } .footer-meta { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--silver); text-transform: uppercase; } /* ═══ ANIMATIONS ═══ */ .reveal { opacity: 0; transform: translateY(24px); transition: all 0.8s var(--t); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Loading spinner */ .spinner { width: 24px; height: 24px; border: 2px solid var(--smoke); border-top-color: var(--ash); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ═══ RESPONSIVE ═══ */ @media (max-width: 768px) { .nav { padding: 16px 20px; } .tool-input-wrap { flex-direction: column; } .tool-submit { padding: 14px; } .footer { padding: 32px 20px; flex-direction: column; gap: 16px; text-align: center; } }