/* ============================================================ ZB Consulting - design system One token set, four themes. Switch via [data-theme] on . Themes: corporate (default), terminal, editorial, brutalist. ============================================================ */ /* Fonts are self-hosted (wwwroot/fonts/fonts.css, loaded from App.razor) so no visitor IP reaches a Google server. Adding a family or weight here means regenerating that file - see the Fonts section in README.md. */ /* ---------- default tokens (corporate) ---------- */ :root, :root[data-theme="corporate"] { --bg: #ffffff; --bg-elev: #f6f9fd; --bg-deep: #0f1b2e; --fg: #111d2b; --fg-muted: #56697d; --accent: #2563eb; --accent-2: #0ea5e9; --accent-soft: rgba(37, 99, 235, 0.09); --accent-contrast: #ffffff; --on-deep: #cdd9e6; --border: #e4eaf1; --border-strong: #cbd6e3; --hero-tint: rgba(37, 99, 235, 0.06); --code-bg: #0f1b2d; --code-fg: #e6edf6; --texture: none; --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --radius: 16px; --radius-sm: 9px; --shadow-sm: 0 1px 2px rgba(17, 29, 43, 0.05), 0 2px 6px rgba(17, 29, 43, 0.06); --shadow: 0 18px 44px -20px rgba(17, 29, 43, 0.30); --shadow-lift: 0 26px 60px -24px rgba(37, 99, 235, 0.38); --maxw: 1160px; --eyebrow-spacing: 0.16em; --hero-weight: 600; --display-tight: -0.02em; } /* ---------- terminal (dark, technical) ---------- */ :root[data-theme="terminal"] { --bg: #070a0e; --bg-elev: #0e141b; --bg-deep: #05080b; --fg: #dbe5ee; --fg-muted: #9fb0bd; --accent: #3ee9b6; --accent-2: #2bd4e6; --accent-soft: rgba(62, 233, 182, 0.10); --accent-contrast: #04130e; --on-deep: #8a99a6; --border: #1a242d; --border-strong: #2a3742; --hero-tint: rgba(62, 233, 182, 0.07); --code-bg: #0c131a; --code-fg: #c2efe0; --texture: linear-gradient(rgba(62,233,182,0.030) 1px, transparent 1px), linear-gradient(90deg, rgba(62,233,182,0.030) 1px, transparent 1px); --font-display: "JetBrains Mono", ui-monospace, Consolas, monospace; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --radius: 10px; --radius-sm: 6px; --shadow-sm: 0 0 0 1px rgba(62, 233, 182, 0.05); --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85); --shadow-lift: 0 0 0 1px rgba(62, 233, 182, 0.35), 0 24px 60px -28px rgba(0, 0, 0, 0.9); --eyebrow-spacing: 0.24em; --hero-weight: 600; --display-tight: 0; } /* ---------- editorial (warm, modern magazine) ---------- */ :root[data-theme="editorial"] { --bg: #f9f6f0; --bg-elev: #fffdf9; --bg-deep: #211b14; --fg: #1b1712; --fg-muted: #6b6056; --accent: #c2410c; --accent-2: #0d9488; --accent-soft: rgba(194, 65, 12, 0.09); --accent-contrast: #fffaf5; --on-deep: #d9cdbb; --border: #e8dfd1; --border-strong: #d8cab4; --hero-tint: rgba(194, 65, 12, 0.05); --code-bg: #221c15; --code-fg: #efe6d8; --texture: none; --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --radius: 6px; --radius-sm: 4px; --shadow-sm: 0 1px 2px rgba(27, 23, 18, 0.05); --shadow: 0 20px 46px -22px rgba(27, 23, 18, 0.28); --shadow-lift: 0 26px 56px -24px rgba(194, 65, 12, 0.28); --eyebrow-spacing: 0.18em; --hero-weight: 600; --display-tight: -0.015em; } /* ---------- brutalist (bold, acid, hard edges - Modus-Forma inspired) ---------- */ :root[data-theme="brutalist"] { --bg: #f5f5ef; --bg-elev: #ffffff; --bg-deep: #0a0a0a; --fg: #0a0a0a; --fg-muted: #45453d; --accent: #cdf500; --accent-2: #a6d400; --accent-soft: rgba(205, 245, 0, 0.20); --accent-contrast: #0a0a0a; --on-deep: #ededdf; --border: #0a0a0a; --border-strong: #0a0a0a; --hero-tint: rgba(205, 245, 0, 0.45); --code-bg: #0a0a0a; --code-fg: #e9ffb0; --texture: none; --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --radius: 0px; --radius-sm: 0px; --shadow-sm: 3px 3px 0 #0a0a0a; --shadow: 5px 5px 0 #0a0a0a; --shadow-lift: 7px 7px 0 #0a0a0a; --eyebrow-spacing: 0.22em; --hero-weight: 700; --display-tight: -0.03em; } /* acid is a fill/highlight here, never low-contrast text on the light background */ [data-theme="brutalist"] a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } [data-theme="brutalist"] .btn, [data-theme="brutalist"] .nav a, [data-theme="brutalist"] .brand, [data-theme="brutalist"] a.card-link, [data-theme="brutalist"] .lang-switch a { text-decoration: none; } [data-theme="brutalist"] .eyebrow, [data-theme="brutalist"] .nav a.active, [data-theme="brutalist"] a.card-link { color: var(--fg); } [data-theme="brutalist"] .card-index, [data-theme="brutalist"] .outcome { color: var(--fg); background: var(--accent); } [data-theme="brutalist"] .hero h1 .accent { color: var(--fg); background: var(--accent); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } [data-theme="brutalist"] .hero-stat .num { background: none; -webkit-text-fill-color: var(--fg); color: var(--fg); } [data-theme="brutalist"] .btn--primary { border-color: var(--fg); box-shadow: var(--shadow-sm); } [data-theme="brutalist"] .btn--ghost:hover { color: var(--fg); background: var(--accent); border-color: var(--fg); } [data-theme="brutalist"] .btn:hover { box-shadow: var(--shadow); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 0.5em; font-weight: var(--hero-weight); letter-spacing: var(--display-tight); } h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none; } p { margin: 0 0 1em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: var(--accent-contrast); } /* ---------- layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 26px; } .section { padding-block: clamp(60px, 9vw, 120px); position: relative; } .section--alt { background: var(--bg-elev); border-block: 1px solid var(--border); } .section-head { max-width: 660px; margin-bottom: 48px; } .section-head.center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--eyebrow-spacing); text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); display: inline-block; } .center .eyebrow { justify-content: center; } .section-head h1, .section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); } .lead { font-size: 1.14rem; color: var(--fg-muted); margin: 0; line-height: 1.55; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); } .site-header .bar { display: flex; align-items: center; gap: 28px; height: 72px; } .brand { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.02; position: relative; z-index: 60; } .brand:hover { text-decoration: none; } .brand:hover .brand-name { color: var(--accent); } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: var(--fg); letter-spacing: -0.02em; transition: color 0.15s; } .brand-sub { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; } .brand .dot { color: var(--accent); } /* desktop: inline top navigation */ .nav { display: flex; gap: 2px; margin-left: auto; } .nav a { position: relative; color: var(--fg-muted); padding: 8px 13px; border-radius: var(--radius-sm); font-size: 0.94rem; font-weight: 500; transition: color 0.15s; } .nav a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .nav a:hover { color: var(--fg); text-decoration: none; } .nav a:hover::after { transform: scaleX(0.4); } .nav a.active { color: var(--accent); } .nav a.active::after { transform: scaleX(1); } .header-tools { display: flex; align-items: center; gap: 10px; position: relative; z-index: 60; } /* theme switcher */ .theme-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px; gap: 3px; background: var(--bg-elev); } .theme-switch button { width: 24px; height: 24px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; padding: 0; display: grid; place-items: center; transition: transform 0.12s; } .theme-switch button:hover { transform: scale(1.12); } .theme-switch button span { width: 14px; height: 14px; border-radius: 999px; display: block; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); } .theme-switch button[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; } .sw-corporate { background: linear-gradient(135deg, #2563eb, #0ea5e9); } .sw-terminal { background: #070a0e; box-shadow: inset 0 0 0 1px #3ee9b6 !important; } .sw-editorial { background: linear-gradient(135deg, #c2410c, #e9a23e); } .sw-brutalist { background: #cdf500; box-shadow: inset 0 0 0 1px #0a0a0a !important; } /* language switch */ .lang-switch { display: inline-flex; font-family: var(--font-mono); font-size: 0.76rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; } .lang-switch a { padding: 6px 10px; color: var(--fg-muted); letter-spacing: 0.04em; } .lang-switch a:hover { background: var(--accent-soft); text-decoration: none; } .lang-switch a.active { background: var(--accent); color: var(--accent-contrast); } .nav-toggle { display: none; align-items: center; gap: 8px; margin-left: 4px; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); height: 36px; padding: 0 15px; cursor: pointer; color: var(--fg); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; position: relative; z-index: 60; transition: background 0.15s, color 0.15s, border-color 0.15s; } .nav-toggle:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .nav-toggle .x { display: none; } .nav-toggle.is-open .m { display: none; } .nav-toggle.is-open .x { display: inline; } /* mobile (<=880px): the inline nav becomes a fullscreen overlay toggled by the Menu button */ @media (max-width: 880px) { .nav-toggle { display: inline-flex; } .nav { position: fixed; inset: 0; z-index: 40; margin: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: clamp(90px, 15vh, 160px) clamp(26px, 9vw, 60px); background: var(--bg); visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path 0.55s cubic-bezier(0.7,0,0.15,1), opacity 0.3s ease, visibility 0s linear 0.55s; } .nav.open { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path 0.6s cubic-bezier(0.7,0,0.15,1), opacity 0.3s ease; } .nav a { color: var(--fg); font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3.4rem); font-weight: var(--hero-weight); letter-spacing: var(--display-tight); line-height: 1.1; padding: 4px 0; opacity: 0; transform: translateY(22px); transition: color 0.2s, opacity 0.5s ease, transform 0.5s ease; } .nav a::after { display: none; } .nav.open a { opacity: 1; transform: none; } .nav.open a:nth-child(1){transition-delay:.10s}.nav.open a:nth-child(2){transition-delay:.15s}.nav.open a:nth-child(3){transition-delay:.20s}.nav.open a:nth-child(4){transition-delay:.25s}.nav.open a:nth-child(5){transition-delay:.30s}.nav.open a:nth-child(6){transition-delay:.35s}.nav.open a:nth-child(7){transition-delay:.40s}.nav.open a:nth-child(8){transition-delay:.45s} .nav a:hover, .nav a.active { color: var(--accent); } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-weight: 600; font-size: 0.96rem; padding: 13px 24px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s, border-color 0.2s; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn--primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent); } .btn--primary:hover { box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent); } .btn--ghost { background: var(--bg); color: var(--fg); border-color: var(--border-strong); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--bg); } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(48% 80% at 82% -8%, var(--hero-tint), transparent 60%), radial-gradient(40% 70% at 0% 110%, var(--hero-tint), transparent 55%); } .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.5; background-image: var(--texture); background-size: 46px 46px; -webkit-mask-image: radial-gradient(70% 70% at 75% 10%, black, transparent 75%); mask-image: radial-gradient(70% 70% at 75% 10%, black, transparent 75%); } .hero .container { position: relative; z-index: 1; padding-block: clamp(72px, 12vw, 148px); } .hero h1 { font-size: clamp(2.4rem, 5.8vw, 4.1rem); max-width: 17ch; margin-bottom: 0.45em; } .hero h1 .accent { color: var(--accent); } .hero .lead { max-width: 58ch; font-size: clamp(1.08rem, 1.5vw, 1.32rem); margin-bottom: 2em; } .hero .btn-row { margin-bottom: 2.6em; } .hero-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; padding-top: 30px; border-top: 1px solid var(--border); } .hero-stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-stat .lbl { font-size: 0.85rem; color: var(--fg-muted); margin-top: 8px; max-width: 22ch; } /* ---------- grids & cards ---------- */ .grid { display: grid; gap: 22px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .card { position: relative; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; overflow: hidden; transition: border-color 0.2s, transform 0.16s, box-shadow 0.25s; } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform 0.28s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; } .card:hover::before { transform: scaleX(1); } .card h3 { font-size: 1.2rem; margin-bottom: 0.45em; } .card p { color: var(--fg-muted); margin: 0; font-size: 0.97rem; } .card-index { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 4px 9px; margin-bottom: 18px; letter-spacing: 0.05em; } a.card-link { color: var(--accent); font-weight: 600; font-size: 0.93rem; display: inline-flex; align-items: center; gap: 6px; } a.card-link:hover { text-decoration: none; gap: 10px; transition: gap 0.18s; } /* case study card - editorial block with accent rule */ .case { position: relative; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 34px 32px 40px; transition: box-shadow 0.25s, transform 0.16s, border-color 0.2s; } .case::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--accent), var(--accent-2)); } .case:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; } .case + .case { margin-top: 20px; } .case .domain { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); } .case .domain::before { content: ""; width: 7px; height: 7px; background: var(--accent); border-radius: 2px; } .case h3 { font-size: 1.42rem; margin: 12px 0 14px; } .case .summary { color: var(--fg); font-size: 1.05rem; margin-bottom: 16px; } .case .prose { color: var(--fg-muted); } .outcome { display: inline-flex; gap: 9px; align-items: baseline; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; } .outcome b { font-family: var(--font-mono); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 11px; transition: color 0.15s, border-color 0.15s; } .case:hover .tag { border-color: var(--accent-soft); } /* ---------- work index (filterable, BIG-inspired) ---------- */ .work-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; } .chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 15px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--fg-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .chip:hover { color: var(--fg); border-color: var(--accent); } .chip.is-active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .chip .n { font-size: 0.7rem; opacity: 0.65; } .work-index { border-top: 1px solid var(--border); } .work-item { border-bottom: 1px solid var(--border); } .work-item[hidden] { display: none; } .work-row { display: grid; grid-template-columns: 46px 1fr minmax(150px, auto) 28px; gap: 26px; align-items: start; width: 100%; padding: 26px 6px; border: 0; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: background 0.2s ease, padding 0.2s ease; } .work-row:hover { background: var(--accent-soft); padding-left: 16px; padding-right: 16px; } .work-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-muted); padding-top: 7px; } .work-title { font-size: clamp(1.18rem, 2.1vw, 1.55rem); margin: 0 0 6px; line-height: 1.15; } .work-sum { color: var(--fg-muted); margin: 0; font-size: 0.95rem; max-width: 62ch; } .work-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; text-align: right; padding-top: 4px; } .work-meta .domain { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-muted); } .work-period { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-muted); } /* +/- expand indicator */ .work-go { position: relative; align-self: center; width: 18px; height: 18px; color: var(--accent); } .work-go::before, .work-go::after { content: ""; position: absolute; background: currentColor; transition: transform 0.28s ease; } .work-go::before { top: 8px; left: 0; width: 18px; height: 2px; } .work-go::after { left: 8px; top: 0; width: 2px; height: 18px; } .work-item.open .work-go::after { transform: scaleY(0); } /* inline expanding detail */ .work-detail { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .work-item.open .work-detail { max-height: 1600px; } .work-detail-inner { padding: 2px 6px 32px 72px; } .work-detail-inner .prose { color: var(--fg-muted); max-width: 70ch; } @media (max-width: 720px) { .work-row { grid-template-columns: 30px 1fr 22px; gap: 12px; padding: 22px 4px; } .work-main { grid-column: 2; } .work-meta { grid-column: 2; align-items: flex-start; text-align: left; } .work-detail-inner { padding-left: 18px; } } /* approach list */ .approach-list { display: grid; gap: 2px; counter-reset: ap; } .approach-item { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--border); } .approach-item:last-child { border-bottom: 1px solid var(--border); } .approach-item::before { counter-increment: ap; content: counter(ap, decimal-leading-zero); font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: 1rem; padding-top: 4px; } .approach-item h3 { font-size: 1.16rem; margin-bottom: 0.35em; } .approach-item p { color: var(--fg-muted); margin: 0; } /* ---------- prose (markdown) ---------- */ .prose { max-width: 72ch; } .prose > p:first-child { margin-top: 0; } .prose h2 { font-size: 1.5rem; margin-top: 1.7em; } .prose h3 { font-size: 1.2rem; margin-top: 1.4em; } .prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1em; } .prose li { margin-bottom: 0.45em; } .prose strong { color: var(--fg); } .prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--accent-soft); color: var(--accent); padding: 2px 6px; border-radius: 5px; } .prose pre { background: var(--code-bg); color: var(--code-fg); padding: 18px; border-radius: var(--radius-sm); overflow-x: auto; } .prose pre code { background: transparent; padding: 0; color: inherit; } .prose blockquote { border-left: 3px solid var(--accent); margin: 1.2em 0; padding-left: 1em; color: var(--fg-muted); font-style: italic; } /* ---------- article list ---------- */ .article-row { display: block; padding: 28px 0; border-top: 1px solid var(--border); transition: padding-left 0.2s ease; } .article-row:last-child { border-bottom: 1px solid var(--border); } .article-row:hover { text-decoration: none; padding-left: 8px; } .article-row:hover h3 { color: var(--accent); } .article-row .meta { font-family: var(--font-mono); font-size: 0.74rem; color: var(--fg-muted); letter-spacing: 0.04em; } .article-row h3 { font-size: 1.45rem; margin: 8px 0; color: var(--fg); transition: color 0.15s; } .article-row p { color: var(--fg-muted); margin: 0; } /* ---------- testimonials ---------- */ .quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .quote { position: relative; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 30px 26px; margin: 0; display: flex; flex-direction: column; transition: box-shadow 0.25s, transform 0.16s, border-color 0.2s; } .quote::before { content: "\201C"; position: absolute; top: 8px; left: 22px; font-family: var(--font-display); font-weight: 700; font-size: 4.6rem; line-height: 1; color: var(--accent); opacity: 0.16; } .quote:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; } .quote blockquote { margin: 16px 0 20px; padding: 0; border: 0; font-style: normal; font-size: 1.04rem; line-height: 1.62; color: var(--fg); position: relative; z-index: 1; } .quote figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--border); padding-top: 16px; } .q-name { font-weight: 700; color: var(--fg); font-size: 0.96rem; } .q-role { color: var(--fg-muted); font-size: 0.85rem; } .q-text { display: block; } .q-text[hidden] { display: none; } .q-translate { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--accent); cursor: pointer; } .q-translate:hover { text-decoration: underline; } /* ---------- about profile header (cover banner + avatar) ---------- */ .profile-cover { width: 100%; height: clamp(150px, 24vw, 260px); overflow: hidden; border-bottom: 1px solid var(--border); } .profile-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; } .avatar { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; display: block; border: 5px solid var(--bg); box-shadow: var(--shadow); margin-top: -64px; position: relative; background: var(--bg-elev); } /* ---------- header banner variants (switchable for testing, like themes) ---------- */ .banner-select { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-muted); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 6px; cursor: pointer; } .page-band { display: none; } :root[data-banner="band"] .page-band { display: block; height: 110px; background: url('/img/banner.jpg') center 42% / cover; border-bottom: 1px solid var(--border); } :root[data-banner="hero"] .hero::before { background: linear-gradient(color-mix(in srgb, var(--bg) 84%, transparent), color-mix(in srgb, var(--bg) 92%, transparent)), url('/img/banner.jpg') center / cover; opacity: 1; } :root[data-banner="hero"] .hero::after { opacity: 0; } :root[data-banner="nav"] .site-header { background-image: linear-gradient(color-mix(in srgb, var(--bg) 80%, transparent), color-mix(in srgb, var(--bg) 88%, transparent)), url('/img/banner.jpg'); background-size: cover; background-position: center 50%; } :root[data-banner="accent"] .site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } @media (max-width: 600px) { .banner-select { display: none; } } /* ---------- compact work list ---------- */ .case-list { display: grid; } .case-row { padding: 22px 0; border-top: 1px solid var(--border); } .case-row:last-child { border-bottom: 1px solid var(--border); } .case-row h3 { font-size: 1.18rem; margin: 8px 0 6px; } .case-row p { color: var(--fg-muted); margin: 0 0 8px; max-width: 72ch; } /* ---------- case meta (domain + period) ---------- */ .case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .case .period { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-muted); } .case .period::before { content: "//"; margin-right: 8px; color: var(--accent); opacity: 0.6; } /* ---------- screenshot gallery (placeholders until real captures) ---------- */ .shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .shot { margin: 0; } .shot-frame { aspect-ratio: 16 / 10; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: repeating-linear-gradient(45deg, var(--bg-elev), var(--bg-elev) 12px, transparent 12px, transparent 24px); display: grid; place-items: center; color: var(--fg-muted); font-family: var(--font-mono); font-size: 0.82rem; } /* ---------- illustrative dashboard preview ---------- */ .dash-demo { margin-top: 44px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-elev); } .dash-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); } .dash-dot { width: 10px; height: 10px; border-radius: 999px; } .dash-dot.r { background: #ef5f5f; } .dash-dot.y { background: #e9b94a; } .dash-dot.g { background: #4ac07a; } .dash-title { font-family: var(--font-display); font-weight: 700; margin-left: 8px; } .dash-tag { margin-left: auto; font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); border: 1px solid var(--border-strong); padding: 2px 9px; border-radius: 999px; } .dash-body { padding: 22px; display: grid; gap: 22px; } .dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .dash-kpi { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; background: var(--bg); } .k-label { display: block; font-size: 0.8rem; color: var(--fg-muted); margin-bottom: 10px; } .k-spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; } .k-spark i { flex: 1; background: linear-gradient(var(--accent), var(--accent-2)); border-radius: 2px 2px 0 0; opacity: 0.85; } .dash-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; border-top: 1px solid var(--border); } .dash-chart span { flex: 1; background: linear-gradient(var(--accent), var(--accent-2)); border-radius: 3px 3px 0 0; opacity: 0.9; } @media (max-width: 880px) { .shot-grid { grid-template-columns: 1fr; } .dash-kpis { grid-template-columns: repeat(2, 1fr); } } /* ---------- forms ---------- */ .form { max-width: 580px; display: grid; gap: 20px; } .field { display: grid; gap: 8px; } .field label { font-size: 0.84rem; font-weight: 600; color: var(--fg); } .field input, .field textarea { font-family: var(--font-body); font-size: 1rem; padding: 13px 15px; background: var(--bg); color: var(--fg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color 0.15s, box-shadow 0.15s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field textarea { min-height: 150px; resize: vertical; } .alert-success { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-sm); padding: 16px 20px; font-weight: 600; } .validation-message, .validation-errors { color: #d4351c; font-size: 0.85rem; } .validation-errors { list-style: none; padding: 0; margin: 0; } /* ---------- footer ---------- */ .site-footer { background: var(--bg-deep); border-top: 1px solid var(--border); padding-block: 56px; color: var(--on-deep); } .site-footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; } .site-footer .brand { color: #fff; } .site-footer .brand-name { color: #fff; } .site-footer .brand .dot { color: var(--accent); } .site-footer .muted { font-size: 0.92rem; max-width: 40ch; margin-top: 12px; color: var(--on-deep); } .site-footer nav { display: flex; flex-direction: column; gap: 10px; } .site-footer nav a { color: var(--on-deep); font-size: 0.93rem; } .site-footer nav a:hover { color: #fff; } .site-footer .legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; opacity: 0.85; } /* ---------- responsive ---------- */ @media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .quote-grid { grid-template-columns: 1fr; } .case { padding: 26px 22px 26px 30px; } } @media (max-width: 520px) { body { font-size: 16px; } .hero-stats { gap: 18px 28px; } /* keep the EN/RO language toggle visible on mobile; free space by dropping the brand subtitle */ .brand-sub { display: none; } .header-tools { gap: 7px; } } /* ---------- scroll reveal (uses the independent `translate` so it never fights hover transform) ---------- */ html.reveal-on .section-head, html.reveal-on .card, html.reveal-on .case, html.reveal-on .approach-item, html.reveal-on .article-row, html.reveal-on .quote-grid > * { opacity: 0; translate: 0 22px; transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.2,0.7,0.2,1), transform 0.16s ease, box-shadow 0.25s ease, border-color 0.2s ease; } html.reveal-on .section-head.in, html.reveal-on .card.in, html.reveal-on .case.in, html.reveal-on .approach-item.in, html.reveal-on .article-row.in, html.reveal-on .quote-grid > *.in { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { html.reveal-on :is(.section-head,.card,.case,.approach-item,.article-row,.quote-grid > *) { opacity: 1 !important; translate: 0 0 !important; } } /* ---------- custom cursor (additive accent ring; native cursor stays) ---------- */ #zb-cursor { position: fixed; top: 0; left: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1.5px solid var(--accent); border-radius: 999px; pointer-events: none; z-index: 9999; opacity: 0; transition: width 0.18s ease, height 0.18s ease, margin 0.18s ease, opacity 0.25s ease, background 0.18s ease; will-change: transform; } #zb-cursor.on { opacity: 0.9; } #zb-cursor.hot { width: 50px; height: 50px; margin: -25px 0 0 -25px; background: var(--accent-soft); } @media (pointer: coarse) { #zb-cursor { display: none !important; } } /* blazor error ui */ #blazor-error-ui { background: #ffefc2; color: #4a3a00; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2); display: none; left: 0; padding: 0.7rem 1.4rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.8rem; top: 0.6rem; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; }