/* ============================================================= Thomas Schiwiora — Site styles (DARK / cinematic) Electric-blue accent from the TS logo. Grotesque pairing: Archivo (display) + Hanken Grotesk (body/UI) + JetBrains Mono. Sharp corners, hairlines, full-bleed imagery, marquee signature. ============================================================= */ /* Fonts loaded via in for faster rendering */ :root { /* ---------- Color — cool near-black, one electric blue ---------- */ --bg: #08090C; /* page background */ --bg-2: #0C0E13; /* alternate band */ --panel: #111419; /* cards / insets */ --panel-2: #161A21; /* elevated card */ --ink: #F3F5F8; /* primary text */ --ink-2: #AEB6C2; /* secondary text */ --muted: #737B8A; /* meta, captions — 4.6:1 on --bg, passes WCAG AA */ --soft: #4A515C; /* disabled / faint */ --line: rgba(255,255,255,0.09); /* hairline */ --line-2: rgba(255,255,255,0.16); /* stronger hairline */ /* one accent — electric blue from the logo */ --accent: #3D7BFF; --accent-bright: #5E93FF; --accent-deep: #1E3A5F; /* logo navy — for gradients only */ --accent-glow: rgba(61,123,255,0.30); /* ---------- Type ---------- */ --f-display: "Archivo", system-ui, sans-serif; --f-sans: "Hanken Grotesk", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --t-display: clamp(52px, 9vw, 132px); --t-h1: clamp(38px, 5.4vw, 76px); --t-h2: clamp(28px, 3.4vw, 46px); --t-h3: clamp(20px, 1.6vw, 24px); --t-body-lg: clamp(18px, 1.5vw, 21px); --t-body: 17px; --t-meta: 13.5px; --t-eyebrow: 12px; /* ---------- Spacing (8-pt) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px; --section-y: clamp(56px, 7vw, 104px); --container: 1240px; --gutter: 28px; --pill: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Skip link (accessibility) ---------- */ .skip-link { position: absolute; top: -100%; left: var(--gutter); z-index: 200; padding: 10px 18px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; border-radius: 0 0 6px 6px; transition: top 160ms; } .skip-link:focus { top: 0; } /* ---------- Focus visible ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #20242c; } ::-webkit-scrollbar-track { background: var(--bg); } /* ---------- Layout ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section-y) 0; } .section--tight { padding: clamp(56px, 8vw, 104px) 0; } .band-2 { background: var(--bg-2); } .hairline { border-top: 1px solid var(--line); } /* ---------- Type helpers ---------- */ .display { font-family: var(--f-display); font-weight: 800; font-size: var(--t-display); line-height: 0.96; letter-spacing: -0.03em; overflow-wrap: break-word; hyphens: auto; margin: 0; } .h1 { font-family: var(--f-display); font-weight: 800; font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.025em; margin: 0; overflow-wrap: break-word; hyphens: auto; } .h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; hyphens: auto; } .h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; margin: 0; } .body-lg { font-size: var(--t-body-lg); line-height: 1.55; color: var(--ink-2); } .lede { font-size: var(--t-body-lg); line-height: 1.6; color: var(--ink-2); max-width: 60ch; } .meta { font-size: var(--t-meta); color: var(--muted); } .mono { font-family: var(--f-mono); letter-spacing: 0; font-size: var(--t-meta); } .eyebrow { font-family: var(--f-sans); font-size: var(--t-eyebrow); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--accent-bright); display: inline-flex; align-items: center; gap: var(--s-3); } .eyebrow--muted { color: var(--muted); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6; } .accent { color: var(--accent-bright); } .dim { color: var(--ink-2); } .text-pretty { text-wrap: pretty; } /* ---------- Header ---------- */ .header { position: sticky; top: 0; z-index: 50; background: rgba(8,9,12,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--ease) 300ms, background var(--ease) 300ms; } .header[data-scrolled="true"] { border-bottom-color: var(--line); background: rgba(8,9,12,0.9); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--s-5); } .brand { display: inline-flex; align-items: center; gap: var(--s-3); } .brand img { width: 34px; height: 34px; } .brand__name { font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .nav { display: flex; align-items: center; gap: var(--s-6); } .nav a { font-size: 14.5px; color: var(--ink-2); transition: color var(--ease) 200ms; } .nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); font-weight: 600; } .nav-cta { display: flex; align-items: center; gap: var(--s-4); } @media (max-width: 880px) { .nav { display: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-3); padding: 14px 22px; font-family: var(--f-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; border-radius: var(--pill); border: 1.5px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background var(--ease) 240ms, color var(--ease) 240ms, border-color var(--ease) 240ms, transform 120ms ease-out; } .btn .arrow { transition: transform var(--ease) 280ms; } .btn:hover { border-color: var(--ink); } .btn:hover .arrow { transform: translateX(5px); } .btn:active { transform: scale(0.98); } .btn--solid { background: var(--ink); color: #0A0B0E; border-color: var(--ink); } .btn--solid:hover { background: #fff; border-color: #fff; } .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 40px -8px var(--accent-glow); } .btn--accent:hover { background: var(--accent-bright); border-color: var(--accent-bright); } .btn--lg { padding: 17px 28px; font-size: 16px; } .btn--ghost { border-color: transparent; padding-left: 6px; padding-right: 6px; } .btn--ghost:hover { border-color: transparent; color: var(--accent-bright); } .arrow { width: 17px; height: 17px; flex: none; } /* ---------- Status pill / marquee ---------- */ .status { display: inline-flex; align-items: center; gap: var(--s-3); padding: 7px 14px 7px 12px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: var(--t-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); } .status .dot { width: 8px; height: 8px; border-radius: var(--pill); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px var(--accent-glow); } 50% { box-shadow: 0 0 0 7px rgba(61,123,255,0.08); } } .marquee { display: flex; overflow: hidden; white-space: nowrap; user-select: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .marquee--accent { background: var(--accent); border-color: var(--accent); color: #fff; } .marquee--panel { background: var(--bg-2); } .marquee__track { display: inline-flex; align-items: center; gap: var(--s-7); padding: 16px var(--s-7) 16px 0; animation: scroll var(--mq-dur, 46s) linear infinite; flex: none; } .marquee__track span { font-family: var(--f-display); font-weight: 800; font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.01em; text-transform: uppercase; } .marquee__track .sep { color: currentColor; opacity: 0.45; font-size: 14px; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ---------- Chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-3); } .chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 11px 18px; border: 1px solid var(--line-2); border-radius: var(--pill); font-size: 15px; font-weight: 500; color: var(--ink-2); transition: border-color var(--ease) 200ms, color var(--ease) 200ms, background var(--ease) 200ms; } .chip:hover { color: var(--ink); border-color: var(--line-2); } .chip--accent { border-color: var(--accent); color: #fff; background: rgba(61,123,255,0.12); } .chip--accent::before { content: ""; width: 7px; height: 7px; border-radius: var(--pill); background: var(--accent); } /* ---------- Result line ---------- */ .result { font-weight: 600; color: var(--ink); } .result::before { content: "Result — "; color: var(--accent-bright); font-weight: 700; } /* ---------- Image frame ---------- */ .frame { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); } .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease), filter 700ms var(--ease); } .frame:hover img { transform: scale(1.04); filter: brightness(1.06); } /* striped placeholder */ .ph { position: relative; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 12px, transparent 12px 24px), linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); display: flex; align-items: flex-end; padding: var(--s-5); } .ph__label { font-family: var(--f-mono); font-size: 12px; color: var(--soft); letter-spacing: 0.04em; } /* ---------- Entrance animation ---------- Base state is VISIBLE so content can never be trapped hidden (some capture/iframe contexts freeze the transition clock). The hidden-start + transition is opt-in via html.anim, which JS only sets when motion is safe; .in then animates it back in. */ .reveal { opacity: 1; transform: none; } html.anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); } html.anim .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- Hero child stagger ---- When the hero inner fires .in, its children cascade in sequence. Eyebrow already inherits parent opacity so we only stagger title → lede → cta. */ html.anim .hero-a__title, html.anim .svc-hero__title, html.anim .branding-hero__title, html.anim .cv-page-hero__title { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); transition-delay: 80ms; } html.anim .hero-a__lede, html.anim .svc-hero__lede, html.anim .branding-hero__lede, html.anim .cv-page-hero__lede { opacity: 0; transform: translateY(14px); transition: opacity 580ms var(--ease), transform 580ms var(--ease); transition-delay: 220ms; } html.anim .hero-a__cta, html.anim .svc-hero__cta, html.anim .branding-hero__cta { opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); transition-delay: 360ms; } html.anim .hero-a__inner.in .hero-a__title, html.anim .svc-hero__inner.in .svc-hero__title, html.anim .branding-hero__inner.in .branding-hero__title, html.anim .cv-page-hero__inner.in .cv-page-hero__title, html.anim .hero-a__inner.in .hero-a__lede, html.anim .svc-hero__inner.in .svc-hero__lede, html.anim .branding-hero__inner.in .branding-hero__lede, html.anim .cv-page-hero__inner.in .cv-page-hero__lede, html.anim .hero-a__inner.in .hero-a__cta, html.anim .svc-hero__inner.in .svc-hero__cta, html.anim .branding-hero__inner.in .branding-hero__cta { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.anim .hero-a__title, html.anim .svc-hero__title, html.anim .branding-hero__title, html.anim .cv-page-hero__title, html.anim .hero-a__lede, html.anim .svc-hero__lede, html.anim .branding-hero__lede, html.anim .cv-page-hero__lede, html.anim .hero-a__cta, html.anim .svc-hero__cta, html.anim .branding-hero__cta { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- Process step stagger ---- */ html.anim .process-steps.in .process-step { opacity: 1; transform: none; } html.anim .process-steps .process-step { opacity: 0; transform: translateY(20px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); } html.anim .process-steps.in .process-step:nth-child(1) { transition-delay: 0ms; } html.anim .process-steps.in .process-step:nth-child(2) { transition-delay: 110ms; } html.anim .process-steps.in .process-step:nth-child(3) { transition-delay: 220ms; } html.anim .process-steps.in .process-step:nth-child(4) { transition-delay: 330ms; } html.anim .process-steps.in .process-step:nth-child(5) { transition-delay: 440ms; } @media (prefers-reduced-motion: reduce) { html.anim .process-steps .process-step { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--line); padding: var(--s-9) 0 var(--s-7); } .footer__grid { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap; } .footer__links { display: flex; gap: 12px 28px; flex-wrap: wrap; min-width: 0; } .footer__links a { color: var(--ink-2); font-size: 14.5px; transition: color var(--ease) 200ms; white-space: nowrap; } .footer__links a:hover { color: var(--ink); } @media (max-width: 720px) { .footer__grid { flex-direction: column; align-items: flex-start; gap: var(--s-5); } .footer__links { width: 100%; gap: 12px 22px; } .footer__links a { font-size: 15px; padding: 4px 0; } } /* ---------- Variation switcher (preview-only control) ---------- */ .vary { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 10px; background: rgba(12,14,19,0.92); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(12px); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7); font-family: var(--f-sans); } .vary__row { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .vary__label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .vary__seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--pill); overflow: hidden; } .vary__seg button { border: none; background: transparent; color: var(--ink-2); font-family: var(--f-sans); font-size: 12px; font-weight: 600; padding: 5px 12px; cursor: pointer; transition: background 160ms, color 160ms; } .vary__seg button[aria-pressed="true"] { background: var(--accent); color: #fff; } .vary__title { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); font-weight: 700; padding-bottom: 2px; } /* ---------- Utility grids ---------- */ .grid { display: grid; gap: var(--s-6); } @media (min-width: 760px) { .cols-2 { grid-template-columns: 1fr 1fr; } .cols-3 { grid-template-columns: repeat(3,1fr); } } .stack-6 > * + * { margin-top: var(--s-6); } .stack-5 > * + * { margin-top: var(--s-5); } .stack-4 > * + * { margin-top: var(--s-4); } .stack-3 > * + * { margin-top: var(--s-3); }