/* ========================================================================= KurtCode — Technical / Cinematic design system Light default + dark toggle via [data-theme="dark"] on ========================================================================= */ /* ---- Fonts ---- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---- Tokens ---- */ :root { --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Light theme (default) */ --bg: #f3f2ee; --bg-2: #eceae4; --surface: #ffffff; --surface-2: #faf9f6; --text: #131316; --text-2: #44443f; --text-3: #82817a; --line: rgba(19, 19, 22, 0.10); --line-2: rgba(19, 19, 22, 0.06); --accent: #ee5a26; --accent-2: #ff7a45; --accent-soft: rgba(238, 90, 38, 0.10); --accent-text: #ffffff; --shadow-sm: 0 1px 2px rgba(19,19,22,0.05), 0 4px 14px rgba(19,19,22,0.05); --shadow-lg: 0 14px 36px rgba(19,19,22,0.08), 0 1px 0 rgba(19,19,22,0.04); --grid-line: rgba(19,19,22,0.045); --hero-mode: 0; /* 0 light, 1 dark — read by JS */ --selection: rgba(238,90,38,0.16); --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --pad-x: clamp(20px, 5vw, 80px); --safe-bottom: env(safe-area-inset-bottom, 0px); --maxw: 1320px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-2: cubic-bezier(0.65, 0, 0.35, 1); } html[data-theme="dark"] { --bg: #0a0a0c; --bg-2: #101013; --surface: #121216; --surface-2: #16161b; --text: #f4f2ec; --text-2: #b6b4ad; --text-3: #76756e; --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.06); --accent: #ff6a34; --accent-2: #ff8a5c; --accent-soft: rgba(255, 106, 52, 0.12); --accent-text: #0a0a0c; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 6px 22px rgba(0,0,0,0.4); --shadow-lg: 0 16px 44px rgba(0,0,0,0.34), 0 1px 0 rgba(255,255,255,0.04); --grid-line: rgba(255,255,255,0.05); --hero-mode: 1; --selection: rgba(255,106,52,0.22); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-display); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color 0.6s var(--ease), color 0.6s var(--ease); } ::selection { background: var(--selection); color: var(--text); text-shadow: none; } ::-moz-selection { background: var(--selection); color: var(--text); text-shadow: none; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } /* ---- Layout primitives ---- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); } .section { position: relative; padding-block: clamp(72px, 11vw, 168px); } .section--tight { padding-block: clamp(56px, 8vw, 110px); } @media (max-width: 560px) { :root { --pad-x: 20px; } .section { padding-block: 58px; } .section--tight { padding-block: 42px; } .display { font-size: clamp(36px, 11vw, 48px); line-height: 1.05; } .h-xl { font-size: clamp(30px, 9.6vw, 40px); line-height: 1.1; } .h-lg { font-size: clamp(26px, 8vw, 34px); line-height: 1.12; } .h-md { font-size: clamp(21px, 6.4vw, 26px); line-height: 1.15; } .lead { font-size: 16px; line-height: 1.55; } body { padding-bottom: var(--safe-bottom); } } /* Faint engineered grid lines that sit behind content */ .grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: clamp(60px, 8vw, 120px) clamp(60px, 8vw, 120px); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%); } /* ---- Type ---- */ .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--accent-soft); flex: none; } .eyebrow--plain::before { display: none; } h1, h2, h3, h4 { font-weight: 500; line-height: 1.06; letter-spacing: -0.02em; } .display { font-size: clamp(44px, 8.4vw, 124px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; } .h-xl { font-size: clamp(34px, 5.2vw, 76px); letter-spacing: -0.03em; line-height: 1.06; } .h-lg { font-size: clamp(28px, 3.6vw, 50px); letter-spacing: -0.025em; } .h-md { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; } .lead { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: var(--text-2); font-weight: 400; } .muted { color: var(--text-2); } .muted-3 { color: var(--text-3); } .mono { font-family: var(--font-mono); } .accent { color: var(--accent); } .ital { font-style: italic; font-weight: 300; } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } .display.text-balance, .h-xl.text-balance, .h-lg.text-balance { line-height: 1.28; } /* ---- Buttons ---- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; border-radius: 100px; transition: transform 0.4s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.4s var(--ease); white-space: nowrap; will-change: transform; } .btn svg { width: 16px; height: 16px; transition: transform 0.4s var(--ease); } .btn-primary { background: var(--text); color: var(--bg); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(19,19,22,0.10); } .btn-primary:hover svg { transform: translate(3px, -3px); } .btn-accent { background: var(--accent); color: var(--accent-text); } .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--accent-soft); } .btn-accent:hover svg { transform: translate(3px, -3px); } .btn-ghost { border: 1px solid var(--line); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--text); background: var(--surface); transform: translateY(-2px); } .btn-sm { padding: 11px 18px; font-size: 14px; } /* Link with animated underline */ .link-ul { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; } .link-ul::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); } .link-ul:hover::after { transform: scaleX(1); transform-origin: left; } .link-ul svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease); } .link-ul:hover svg { transform: translate(3px, -3px); } /* ---- Reveal on scroll ---- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; } .reveal[data-delay="5"] { transition-delay: 0.40s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Fallback: if the browser never paints a frame (rAF frozen), reveal end-states so content is never permanently hidden. Toggled by a heartbeat check. */ html.no-anim * { transition: none !important; } html.no-anim .reveal { opacity: 1 !important; transform: none !important; } html.no-anim .word-reveal > span { transform: none !important; animation: none !important; } html.no-anim .process__line { transform: none !important; } /* Word-by-word reveal for headlines (keyframe-based — deterministic, won't stick) */ .word-reveal { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.06em; } .word-reveal > span { display: inline-block; transform: translateY(110%); } .is-in .word-reveal > span, .hero-ready .word-reveal > span { animation: wordrise 0.9s var(--ease) forwards; } .hero__title .ln:nth-child(2) .word-reveal > span { animation-delay: 0.06s; } .hero__title .ln:nth-child(3) .word-reveal > span { animation-delay: 0.12s; } .hero__title .ln:nth-child(4) .word-reveal > span { animation-delay: 0.18s; } @keyframes wordrise { from { transform: translateY(110%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .word-reveal > span { transform: none !important; animation: none !important; } } .hero-ready .hero__title .ln, .hero-ready .hero__title .word-reveal { overflow: visible; } /* ---- Cards ---- */ .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease), background-color 0.4s var(--ease); } .card:hover { z-index: 1; } @media (hover: none) { .btn:hover, .card:hover, .work:hover, .svc:hover, .why__cell:hover, .about__value:hover, .about__chip:hover { transform: none; box-shadow: none; } } /* Striped image placeholder */ .ph { position: relative; overflow: hidden; background-color: var(--surface-2); background-image: repeating-linear-gradient(135deg, var(--line-2) 0 1px, transparent 1px 11px); display: flex; align-items: flex-end; justify-content: flex-start; } .ph::after { content: attr(data-label); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 12px 14px; } .ph--center { align-items: center; justify-content: center; } .ph--center::after { padding: 0; } /* Divider with mono tick label */ .rule { height: 1px; background: var(--line); width: 100%; } /* Marquee */ .marquee { display: flex; overflow: hidden; gap: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; gap: 56px; padding-right: 56px; align-items: center; animation: marquee 26s linear infinite; flex: 0 0 auto; min-width: max-content; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* Floating ambient bits */ @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .floaty { animation: floaty 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .floaty { animation: none; } } /* Utility */ .flex { display: flex; } .col { flex-direction: column; } .center { align-items: center; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .gap-s { gap: 10px; } .gap-m { gap: 18px; } .gap-l { gap: 32px; } .grid { display: grid; } .full { width: 100%; } .rel { position: relative; } .z1 { position: relative; z-index: 1; } .tnum { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } /* Tweak: sharp corners (more technical) */ html.corners-sharp { --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 6px; } html.corners-sharp .btn, html.corners-sharp .chip, html.corners-sharp .work-filter__btn, html.corners-sharp .nav__inner, html.corners-sharp .nav__link, html.corners-sharp .hero__chip, html.corners-sharp .svc__tag, html.corners-sharp .work__type, html.corners-sharp .srv-row__tag, html.corners-sharp .about__chip, html.corners-sharp .work__flag, html.corners-sharp .work__hoverbtn { border-radius: 3px; } html.corners-sharp .svc__arrow, html.corners-sharp .faq__icon, html.corners-sharp .process__node, html.corners-sharp .proj__next-arrow, html.corners-sharp .contact__check, html.corners-sharp .theme-toggle__track, html.corners-sharp .theme-toggle__thumb, html.corners-sharp .srv-row__check, html.corners-sharp .contact__pulse, html.corners-sharp .eyebrow::before { border-radius: 2px; } /* Tweak: hide background grid */ html.no-grid .grid-bg { display: none; }