/* ============================================ Stafflab — Minimal Scandinavian design system ============================================ */ :root { /* Colors — bold redesign: warm cream base, forest-black anchor, tangerine pop */ --bg: oklch(0.965 0.012 80); /* warm cream */ --bg-sunk: oklch(0.99 0.005 80); /* lifted white cards */ --bg-deep: oklch(0.91 0.012 80); /* divider/border */ --ink: oklch(0.16 0.025 165); /* near-black forest */ --ink-mid: oklch(0.40 0.018 160); --ink-soft: oklch(0.52 0.010 160); /* darkened 0.55→0.52 for WCAG AA 4.5:1 on --bg */ --ink-faint: oklch(0.70 0.006 160); --line: oklch(0.88 0.012 80); --line-soft: oklch(0.92 0.010 80); --forest: oklch(0.18 0.025 165); /* dark hero/CTA background */ --forest-deep: oklch(0.12 0.020 165); /* darkest sections */ --forest-ink: oklch(0.92 0.012 80); /* light text on forest */ --forest-mid: oklch(0.68 0.012 165); /* muted on forest */ --accent: oklch(0.70 0.20 45); /* tangerine — dominant; backgrounds + text on dark only */ --accent-text: oklch(0.53 0.17 45); /* darkened tangerine for TEXT on light bg — 5.1:1 on --bg (WCAG AA) */ --accent-deep: oklch(0.62 0.20 40); /* hover/pressed */ --accent-soft: oklch(0.94 0.06 60); /* tinted bg */ --accent-ink: oklch(0.22 0.10 40); /* text on tangerine */ /* Typography — defaults, overridden by Tweaks */ --font-display: "Fraunces", "Georgia", serif; --font-body: "Inter Tight", "Inter", -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --tracking-display: -0.02em; --tracking-body: -0.005em; --tracking-label: 0.08em; --weight-display: 400; --weight-body: 400; /* Spacing */ --gutter: clamp(20px, 4vw, 56px); --page-max: 1320px; /* Radii */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; } /* ========== Typography themes (set on ) ========== */ html[data-type="editorial"] { --font-display: "Fraunces", "Georgia", serif; --font-body: "Inter Tight", sans-serif; --tracking-display: -0.03em; --weight-display: 400; } html[data-type="grotesk"] { --font-display: "Inter Tight", sans-serif; --font-body: "Inter Tight", sans-serif; --tracking-display: -0.035em; --weight-display: 500; } html[data-type="modern-serif"] { --font-display: "Instrument Serif", "Georgia", serif; --font-body: "Instrument Sans", sans-serif; --tracking-display: -0.015em; --weight-display: 400; } html[data-type="contrast"] { --font-display: "Fraunces", serif; --font-body: "JetBrains Mono", monospace; --tracking-display: -0.02em; --tracking-body: -0.01em; --weight-display: 300; } /* ========== Base ========== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } img, svg { display: block; max-width: 100%; } .display { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: 0.98; text-wrap: balance; } .eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mid); font-weight: 500; } .mono { font-family: var(--font-mono); } /* ========== Layout ========== */ .page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: clamp(64px, 9vw, 140px) 0; border-top: 1px solid var(--line); } .section:first-of-type { border-top: 0; } /* ========== Nav ========== */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter); max-width: var(--page-max); margin: 0 auto; gap: 40px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; letter-spacing: var(--tracking-display); font-weight: var(--weight-display); } .brand-mark { width: 40px; height: 40px; flex-shrink: 0; display: block; } .brand-wordmark { font-family: "Inter Tight", sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: 24px; } .brand-wordmark em { font-style: normal; color: var(--accent); } .nav-links { display: flex; gap: 32px; font-size: 14.5px; color: var(--ink-mid); } .nav-links a { transition: color .15s; position: relative; } .nav-links a:hover { color: var(--ink); } .nav-links a::before { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.16,1,.3,1); } .nav-links a:hover::before { transform: scaleX(1); } .nav-links a.active { color: var(--ink); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 1px; background: var(--ink); } .nav-right { display: flex; align-items: center; gap: 20px; } .lang { font-size: 12px; color: var(--ink-soft); letter-spacing: var(--tracking-label); text-transform: uppercase; } /* Inline language row (SV / EN / PL on one line) */ .lang-inline { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--ink-soft); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; } .lang-inline-item { color: var(--ink-soft); text-decoration: none; /* 44px tap target (WCAG 2.5.5) without growing the visual pill: generous padding pulled back by negative margins. */ display: inline-block; padding: 15px 8px; margin: -13px -6px; position: relative; z-index: 1; transition: color .15s; } .lang-inline-item:hover { color: var(--ink); } .lang-inline-item.active { color: var(--ink); font-weight: 500; } .lang-inline-sep { color: var(--ink-faint); } /* Language switcher (legacy dropdown, kept in case) */ .lang-switcher { position: relative; } .lang-trigger { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: var(--tracking-label); color: var(--ink-mid); padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; transition: all .15s; cursor: pointer; } .lang-trigger:hover { border-color: var(--ink); color: var(--ink); } .lang-switcher.open .lang-trigger svg { transform: rotate(180deg); } .lang-trigger svg { transition: transform .2s; } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; display: none; min-width: 60px; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.1); } .lang-switcher.open .lang-menu { display: block; } .lang-menu a { display: block; padding: 8px 12px; font-size: 12px; letter-spacing: var(--tracking-label); color: var(--ink-mid); border-radius: 3px; } .lang-menu a:hover { background: var(--bg-sunk); color: var(--ink); } /* ========== Buttons ========== */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; transition: all .2s ease; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--ink); color: var(--bg); } .btn-primary:hover { background: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 6px 20px -6px rgba(0,0,0,0.22); } .btn-primary:active { transform: translateY(0); box-shadow: none; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); background: var(--bg-deep); } .btn-link { padding: 0; border-radius: 0; background: none; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; } .btn-sm { padding: 9px 16px; font-size: 13.5px; } .arrow-icon { width: 14px; height: 14px; flex-shrink: 0; } /* ========== Footer ========== */ .footer { border-top: 1px solid var(--line); padding: 80px var(--gutter) 40px; max-width: var(--page-max); margin: 0 auto; color: var(--ink-mid); font-size: 14px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 40px 24px; margin-bottom: 60px; } .footer-col h5 { font-family: var(--font-body); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin: 0 0 18px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-col a:hover { color: var(--ink); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); } /* ========== Utility ========== */ .divider { height: 1px; background: var(--line); border: 0; margin: 0; } .rule-label { display: flex; align-items: center; gap: 14px; color: var(--ink-mid); font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: 40px; } .rule-label::before { content: ""; width: 28px; height: 1px; background: var(--ink-mid); } .counter { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em; } /* ========== Grid helpers ========== */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media (max-width: 1180px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } } @media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px 24px; } } @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .nav-links { display: none; } .nav-cta-desktop { display: none; } } @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer-grid > .footer-col:first-child { grid-column: 1 / -1; margin-bottom: 8px; } } /* ========== Mobile menu (hamburger) ========== */ .nav-burger { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; padding: 0; position: relative; transition: background 0.2s; } .nav-burger:hover { background: var(--bg-sunk); } .nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); position: absolute; left: 50%; margin-left: -8px; transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease; } .nav-burger span:nth-child(1) { top: 16px; } .nav-burger span:nth-child(2) { top: 21px; } .nav-burger span:nth-child(3) { top: 26px; } body.menu-open .nav-burger span:nth-child(1) { top: 21px; transform: rotate(45deg); } body.menu-open .nav-burger span:nth-child(2) { opacity: 0; } body.menu-open .nav-burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); } .mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 90; display: flex; flex-direction: column; padding: 88px var(--gutter) 40px; transform: translateY(-100%); transition: transform 0.3s ease; visibility: hidden; overflow-y: auto; } body.menu-open .mobile-menu { transform: translateY(0); visibility: visible; } .mobile-menu-inner { display: flex; flex-direction: column; gap: 28px; max-width: 480px; margin: 0 auto; width: 100%; } .mobile-menu-links { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); } .mobile-menu-links a { font-family: var(--font-display); font-size: 28px; font-weight: var(--weight-display); letter-spacing: var(--tracking-display); color: var(--ink); padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; display: block; } .mobile-menu-links a.active { color: var(--accent-text); } .mobile-menu-cta { width: 100%; justify-content: center; padding: 18px 24px; font-size: 15px; margin-top: 12px; } .mobile-menu-lang { display: flex; justify-content: center; padding-top: 8px; color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; } .mobile-menu-lang .lang-inline { gap: 14px; } @media (max-width: 900px) { .nav-burger { display: inline-flex; align-items: center; justify-content: center; } } @media (min-width: 901px) { .mobile-menu { display: none; } } /* ========== Tweaks Panel ========== */ .tweaks-panel { position: fixed; bottom: 24px; right: 24px; z-index: 100; background: var(--bg); border: 1px solid var(--ink); border-radius: var(--r-lg); padding: 20px; width: 300px; font-family: var(--font-body); box-shadow: 0 12px 40px -12px rgba(0,0,0,0.15); display: none; } .tweaks-panel.active { display: block; } .tweaks-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .tweaks-title { font-family: var(--font-display); font-size: 18px; font-weight: var(--weight-display); letter-spacing: var(--tracking-display); } .tweaks-group { margin-bottom: 18px; } .tweaks-group:last-child { margin-bottom: 0; } .tweaks-label { font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; display: block; } .tweak-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tweak-opt { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink-mid); text-align: left; cursor: pointer; transition: all .15s; } .tweak-opt:hover { border-color: var(--ink-mid); color: var(--ink); } .tweak-opt.active { border-color: var(--ink); background: var(--ink); color: var(--bg); } .tweak-opt small { display: block; font-size: 10px; opacity: 0.65; margin-top: 2px; } /* ========== Placeholder image ========== */ .ph { background: repeating-linear-gradient( 135deg, var(--bg-sunk) 0 14px, var(--bg-deep) 14px 15px ); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: lowercase; position: relative; overflow: hidden; } .ph::after { content: attr(data-label); padding: 5px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; } /* ========== Mobile extras ========== */ @media (max-width: 900px) { /* Hide dev tweaks panel on mobile — it blocks content */ .tweaks-panel { display: none !important; } /* Bigger tap targets for all buttons & links */ .btn { padding: 14px 20px; font-size: 14px; } .btn-sm { padding: 10px 16px; } /* Wrap long headlines without breaking */ .display { hyphens: auto; -webkit-hyphens: auto; word-break: break-word; } /* Cookie banner fits small screens */ #cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; } } @media (max-width: 640px) { /* Nav bar compresses further */ .nav-inner { padding: 10px 16px; } .brand-wordmark { font-size: 16px; } .lang-inline { font-size: 11px; } /* Pricing tables — horizontal scroll if needed */ .legal-tbl, .prices-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Mobile menu tighter padding */ .mobile-menu { padding: 76px 20px 32px; } .mobile-menu-links a { font-size: 24px; padding: 16px 0; } } /* ============================================ Redesign 2026-05-13 — Bold sections ============================================ */ .section-dark { background: var(--forest); color: var(--forest-ink); position: relative; overflow: hidden; } .section-dark .rule-label, .section-dark .eyebrow { color: var(--accent); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark .display { color: var(--forest-ink); } .section-dark p, .section-dark .hero-lede, .section-dark .hero-stat-label { color: var(--forest-mid); } .section-dark em { color: var(--accent); font-style: italic; font-weight: 300; } .section-dark .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .section-dark .btn-primary:hover { background: var(--accent-deep); } .section-dark .btn-ghost { background: transparent; color: var(--forest-ink); border: 1px solid rgba(255, 255, 255, 0.18); } .section-dark .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.40); background: rgba(255, 255, 255, 0.06); } .section-tangerine { background: var(--accent); color: var(--accent-ink); } .section-tangerine .display, .section-tangerine h2, .section-tangerine h3 { color: var(--accent-ink); } .section-tangerine em { color: var(--forest); /* was --bg-sunk (2.8:1 on tangerine); forest = 6.5:1 */ font-style: italic; font-weight: 300; } .section-tangerine p { color: var(--accent-ink); opacity: 0.9; /* was 0.78 → 4.28:1 on tangerine; 0.9 keeps WCAG AA */ } .section-tangerine .btn-primary { background: var(--forest); color: var(--accent); border-color: var(--forest); } .section-tangerine .btn-primary:hover { background: var(--forest-deep); } .section-tangerine .btn-ghost { border-color: var(--accent-ink); color: var(--accent-ink); } /* Hero blob — soft orange glow in dark hero corner */ .hero-blob { position: absolute; width: clamp(220px, 28vw, 380px); height: clamp(220px, 28vw, 380px); border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: 0.35; pointer-events: none; filter: blur(60px); } .hero-blob.top-right { top: -8%; right: -6%; } .hero-blob.bottom-left { bottom: -10%; left: -8%; } /* New hero-stat treatment — alternating cards with orange numbers */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 28px var(--gutter); background: var(--bg-sunk); border-bottom: 1px solid var(--line); } .stat-card { background: var(--bg); padding: 24px 22px; border-radius: 14px; border: 1px solid var(--line); } .stat-card.dark { background: var(--forest); border-color: var(--forest); } .stat-card.dark .stat-num { color: var(--accent); } .stat-card.dark .stat-label { color: var(--forest-mid); } .stat-num { font-family: var(--font-display); font-size: clamp(36px, 4vw, 48px); font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -0.02em; } .stat-num .pop { color: var(--accent-text); } .stat-label { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 10px; } @media (max-width: 800px) { .stats-row { grid-template-columns: 1fr; } } /* Audience cards — orange/dark category tags, hover lift */ .audience-grid.bold { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 var(--gutter); margin: 32px auto 48px; max-width: var(--page-max); } .audience-grid.bold .audience-card { background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px; text-decoration: none; color: inherit; transition: transform 0.18s ease, border-color 0.18s ease; display: flex; flex-direction: column; gap: 10px; } .audience-grid.bold .audience-card:hover { transform: translateY(-2px); border-color: var(--accent); } .audience-tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; align-self: flex-start; margin-bottom: 8px; } .audience-tag.t-orange { background: var(--accent); color: var(--accent-ink); } .audience-tag.t-dark { background: var(--forest); color: var(--accent); } .audience-grid.bold .audience-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } .audience-grid.bold .audience-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; flex: 1; } .audience-grid.bold .audience-card-link { font-size: 13px; font-weight: 500; color: var(--accent-text); margin-top: 4px; } @media (max-width: 800px) { .audience-grid.bold { grid-template-columns: 1fr; } } /* ============================================ Global hero override — все hero на dark ============================================ */ .hero, .blog-hero, .hero-about, .article-hero, .pricing-hero, .services-hero, .contact-hero { background: var(--forest) !important; color: var(--forest-ink); position: relative; overflow: hidden; border-top: 0 !important; margin-top: 0 !important; /* Full-bleed: break out of .page container (max-width 1320px) using negative margins + width:100vw, then pad inner content back to the page's content area so text/buttons stay aligned with the rest of the page layout. !important is required because several pages have inline