/* * style.css - Main stylesheet for kristiankroghbang.com * * Design system mirrors the client-onboarding tool (onboarding.kristiankroghbang.com): * system font stack, blue accent (#2563eb), neutral grays, 6px/8px radii, subtle shadows. * * Two themes via data-theme attribute on : * - default (light) : client-onboarding look * - "dark" : matrix-inspired (black + phosphor green + monospace) * * Theme is toggled from main.js and persisted in localStorage. * No frameworks, no build step. */ /* Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Design tokens - LIGHT (client-onboarding) */ :root { --color-bg: #f8f9fa; --color-surface: #ffffff; --color-surface-alt: #f9fafb; --color-text: #1a1a1a; --color-text-body: #555555; --color-text-muted: #374151; --color-text-light: #6b7280; --color-text-faint: #9ca3af; --color-accent: #2563eb; --color-accent-hover: #1d4ed8; --color-accent-soft: #eff6ff; --color-border: #e5e7eb; --color-border-strong: #d1d5db; --color-success-bg: #d1fae5; --color-success-text: #065f46; --color-warn-bg: #fef3c7; --color-warn-text: #92400e; --color-danger: #dc2626; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08); --max-width: 740px; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 3rem; --space-xl: 5rem; --text-glow: none; --nav-bg: rgba(248, 249, 250, 0.9); } /* Design tokens - DARK (matrix) */ [data-theme="dark"] { --color-bg: #000000; --color-surface: #0a0f0a; --color-surface-alt: #05080a; --color-text: #00ff41; --color-text-body: #00d138; --color-text-muted: #00d138; --color-text-light: #00a82c; --color-text-faint: #007a20; --color-accent: #00ff41; --color-accent-hover: #39ff6b; --color-accent-soft: rgba(0, 255, 65, 0.08); --color-border: rgba(0, 255, 65, 0.25); --color-border-strong: rgba(0, 255, 65, 0.5); --color-success-bg: rgba(0, 255, 65, 0.15); --color-success-text: #00ff41; --color-warn-bg: rgba(255, 200, 0, 0.15); --color-warn-text: #ffc800; --color-danger: #ff4141; --font-body: "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace; --shadow-card: 0 0 0 1px rgba(0, 255, 65, 0.15), 0 0 20px rgba(0, 255, 65, 0.05); --shadow-card-hover: 0 0 0 1px rgba(0, 255, 65, 0.4), 0 0 28px rgba(0, 255, 65, 0.15); --text-glow: 0 0 6px rgba(0, 255, 65, 0.5); --nav-bg: rgba(0, 0, 0, 0.9); } /* Base */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--color-bg); overflow-x: hidden; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--color-text); background: var(--color-bg); padding: 24px 16px; min-width: 100%; overflow-x: hidden; } /* Matrix rain canvas (dark only) */ #matrix-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } [data-theme="dark"] #matrix-canvas { opacity: 0.12; } [data-theme="dark"] body > *:not(#matrix-canvas) { position: relative; z-index: 1; } /* Typography */ h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--color-text); text-shadow: var(--text-glow); } h1 { font-size: 1.5rem; margin-bottom: 8px; } h2 { font-size: 1.15rem; margin-bottom: 8px; } h3 { font-size: 1rem; margin-bottom: 8px; } p { margin-bottom: 16px; color: var(--color-text-body); } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } ul { list-style: none; padding: 0; } /* Layout */ .container { max-width: var(--max-width); margin: 0 auto; word-wrap: break-word; overflow-wrap: break-word; } /* Navigation - static header, matches client-onboarding .header (border sits on inner container so it only spans content width, not viewport) */ .nav { margin-bottom: 32px; } .nav .container { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); } .nav-brand { font-weight: 600; font-size: 1rem; color: var(--color-text); text-decoration: none; letter-spacing: -0.01em; text-shadow: var(--text-glow); } .nav-brand:hover { color: var(--color-accent); text-decoration: none; } .nav-right { display: flex; align-items: center; gap: var(--space-md); } .nav-links { display: flex; gap: var(--space-md); list-style: none; } .nav-links a { color: var(--color-text-light); font-size: 0.9375rem; text-decoration: none; transition: color 0.15s ease; } .nav-links a:hover, .nav-links a.active { color: var(--color-accent); text-decoration: none; } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); border-radius: var(--radius); width: 36px; height: 36px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; padding: 0; } .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-soft); } .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } /* Mobile nav toggle */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-xs); color: var(--color-text); } .nav-toggle svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; } /* Hero */ .hero { padding: 0 0 var(--space-lg); } .hero h1 { margin-bottom: 8px; } .hero .tagline { font-size: 1rem; color: var(--color-text-light); margin-bottom: var(--space-lg); } /* Sections */ .section { padding: var(--space-lg) 0; } .section + .section { border-top: 1px solid var(--color-border); } .section-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); margin-bottom: var(--space-sm); } /* Achievements */ .achievements li { position: relative; padding-left: 1.25rem; margin-bottom: var(--space-xs); color: var(--color-text-muted); } .achievements li::before { content: ">"; position: absolute; left: 0; color: var(--color-accent); font-weight: 600; font-family: var(--font-mono); } .highlight { background: var(--color-accent); color: #ffffff; padding: 0.1em 0.4em; border-radius: var(--radius-sm); font-weight: 500; } [data-theme="dark"] .highlight { color: #000; } /* Buttons (client-onboarding .btn) */ .btn { display: inline-block; padding: 8px 20px; background: var(--color-accent); color: #fff; border: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 500; cursor: pointer; text-decoration: none; font-family: inherit; } .btn:hover { background: var(--color-accent-hover); text-decoration: none; color: #fff; } [data-theme="dark"] .btn { color: #000; } [data-theme="dark"] .btn:hover { color: #000; } .btn-outline { background: #ffffff; color: var(--color-accent); border: 1px solid var(--color-accent); } .btn-outline:hover { background: var(--color-accent-soft); color: var(--color-accent); } [data-theme="dark"] .btn-outline { background: transparent; color: var(--color-accent); } [data-theme="dark"] .btn-outline:hover { color: var(--color-accent); } .btn-danger { background: var(--color-danger); color: #fff; } .btn-danger:hover { background: #b91c1c; color: #fff; } [data-theme="dark"] .btn-danger { color: #000; } [data-theme="dark"] .btn-danger:hover { color: #000; } .btn-sm { padding: 4px 12px; font-size: 0.8rem; } /* Cards (generic, services, testimonials, blog items) */ .services-grid, .testimonials-grid, .blog-list { display: grid; gap: var(--space-md); } .card, .service-card, .testimonial, .blog-item { padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 16px; } .service-card h3 { color: var(--color-text); } .service-card p { color: var(--color-text-light); margin-bottom: 0; font-size: 0.9375rem; } .testimonial blockquote { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-muted); margin-bottom: var(--space-sm); font-style: italic; } .testimonial-author { font-size: 0.875rem; font-weight: 600; color: var(--color-text); } .testimonial-role { font-size: 0.8125rem; color: var(--color-text-light); } .testimonial-links { display: flex; gap: var(--space-sm); margin-top: 0.375rem; font-size: 0.8125rem; } .testimonial-links a { color: var(--color-text-light); text-decoration: none; } .testimonial-links a:hover { color: var(--color-accent); } .blog-item { display: block; text-decoration: none; } .blog-item:hover { text-decoration: none; } .blog-item-date { font-size: 0.8125rem; color: var(--color-text-light); margin-bottom: 0.25rem; } .blog-item-title { font-size: 1.0625rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; } .blog-item-excerpt { font-size: 0.9375rem; color: var(--color-text-light); } /* Blog post content */ .post-meta { font-size: 0.875rem; color: var(--color-text-light); margin-bottom: var(--space-lg); } .post-content h2 { margin-top: var(--space-lg); } .post-content h3 { margin-top: var(--space-md); } .post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: var(--space-sm); color: var(--color-text-muted); } .post-content ul { list-style: disc; } .post-content ol { list-style: decimal; } .post-content li { margin-bottom: 0.25rem; } .post-content code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-surface-alt); border: 1px solid var(--color-border); padding: 0.125em 0.375em; border-radius: var(--radius-sm); color: var(--color-text-muted); } .post-content pre { background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-text); padding: var(--space-md); border-radius: var(--radius); overflow-x: auto; margin-bottom: var(--space-sm); font-family: var(--font-mono); font-size: 0.875rem; } .post-content pre code { background: none; border: none; padding: 0; color: inherit; } .post-content a { text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } /* Contact */ .contact-link { display: inline-block; font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 600; color: var(--color-accent); text-decoration: none; border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; transition: color 0.15s ease, border-color 0.15s ease; } .contact-link:hover { color: var(--color-accent-hover); border-color: var(--color-accent-hover); text-decoration: none; } .social-links { display: flex; gap: var(--space-md); margin-top: var(--space-md); } .social-links a { color: var(--color-text-light); font-size: 0.9375rem; text-decoration: none; transition: color 0.15s ease; } .social-links a:hover { color: var(--color-accent); } /* Footer - border on inner container so it only spans content width */ .footer { margin-top: 32px; text-align: center; font-size: 0.8125rem; color: var(--color-text-light); background: var(--color-bg); } .footer .container { border-top: 1px solid var(--color-border); padding-top: 16px; } .footer p { margin-bottom: 0.25rem; } .footer p:last-child { margin-bottom: 0; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-xs); } .footer-links a { color: var(--color-text-light); text-decoration: none; } .footer-links a:hover { color: var(--color-accent); } /* Responsive */ @media (max-width: 600px) { .nav .container { flex-direction: column; align-items: flex-start; gap: 12px; } .nav-links { display: none; width: 100%; flex-direction: column; gap: var(--space-sm); } .nav-links.open { display: flex; } .nav-toggle { display: block; } .page { padding-bottom: var(--space-lg); } .section { padding: var(--space-md) 0; } .footer { padding: var(--space-md) 0; } .contact-link { font-size: 1.125rem; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } #matrix-canvas { display: none; } }