/* ===================================================================== Sergey Kaminov — Coherence Field Interface styles.css -------------------------------------------------------------------- Theme is driven by [data-theme="lab"|"paper"] on . Every colour is a CSS variable so the two modes cross-fade smoothly. ===================================================================== */ /* ---------- LAB (default) ---------- */ :root, [data-theme="lab"] { --bg: #03060A; --bg-2: #070C12; --glass: rgba(12, 18, 26, 0.62); --glass-2: rgba(18, 25, 34, 0.78); --border: rgba(201, 143, 74, 0.22); --border-hi: rgba(201, 143, 74, 0.5); --text: #F0E8D8; --text-2: #AFA89A; --muted: #746E64; --bronze: #C98F4A; --gold: #E6C27A; --teal: #2E7C78; --teal-lift: #4FB3AD; --amber: #FFB15C; --red: #FF6A3C; --field-pt: #6fae9c; /* coherence-field particle */ --field-ln: rgba(201,143,74,0.5); /* coherence-field link */ --shadow: 0 30px 80px -40px rgba(0,0,0,0.9); color-scheme: dark; } /* ---------- PAPER ---------- */ [data-theme="paper"] { --bg: #F3EBDD; --bg-2: #E8DDC9; --glass: rgba(255, 248, 235, 0.68); --glass-2: rgba(239, 228, 210, 0.84); --border: rgba(155, 106, 50, 0.22); --border-hi: rgba(155, 106, 50, 0.5); --text: #17130D; --text-2: #5F574B; --muted: #82776A; --bronze: #9B6A32; --gold: #B98B4A; --teal: #2E7C78; --teal-lift: #1f5e5a; --amber: #B87333; --red: #B94A35; --field-pt: #2E7C78; --field-ln: rgba(155,106,50,0.45); --shadow: 0 30px 70px -45px rgba(120,90,40,0.45); color-scheme: light; } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; overflow-x: hidden; transition: background 0.6s ease, color 0.6s ease; /* layered ambient gradients for cinematic depth */ background-image: radial-gradient(1200px 800px at 78% -8%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 60%), radial-gradient(900px 700px at 8% 110%, color-mix(in srgb, var(--bronze) 10%, transparent), transparent 60%); background-attachment: fixed; } a { color: inherit; text-decoration: none; } canvas { display: block; } ::selection { background: color-mix(in srgb, var(--bronze) 40%, transparent); color: var(--text); } /* utility */ .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 0.7em; } .eyebrow__tick { width: 26px; height: 1px; background: var(--bronze); display: inline-block; } .skip { position: fixed; left: 50%; top: -60px; transform: translateX(-50%); background: var(--glass-2); border: 1px solid var(--border); color: var(--text); padding: 10px 18px; border-radius: 999px; z-index: 200; transition: top 0.25s ease; font-size: 0.85rem; } .skip:focus { top: 14px; } /* ===================== cursor trail canvas ===================== */ #trail { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; } /* ===================== NAV ===================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(18px, 4vw, 46px); transition: padding 0.4s ease, background 0.4s ease, border-color 0.4s ease; border-bottom: 1px solid transparent; } .nav.is-stuck { padding-top: 12px; padding-bottom: 12px; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); } .nav__logo { display: flex; align-items: baseline; gap: 0.45em; } .nav__mark { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.18rem; letter-spacing: 0.04em; color: var(--text); } .nav__dot { color: var(--bronze); } .nav__name { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); } .nav__links { display: flex; gap: clamp(14px, 1.8vw, 30px); } .nav__links a { font-size: 0.82rem; color: var(--text-2); position: relative; padding: 4px 0; transition: color 0.25s ease; } .nav__links a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--bronze); transition: width 0.3s ease; } .nav__links a:hover { color: var(--text); } .nav__links a:hover::after { width: 100%; } .nav__right { display: flex; align-items: center; gap: 14px; } /* theme toggle pill */ .toggle { position: relative; display: inline-flex; align-items: center; background: var(--glass); border: 1px solid var(--border); border-radius: 999px; padding: 4px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; letter-spacing: 0.14em; backdrop-filter: blur(8px); transition: border-color 0.3s ease; } .toggle:hover { border-color: var(--border-hi); } .toggle__opt { position: relative; z-index: 2; padding: 5px 11px; border-radius: 999px; color: var(--muted); transition: color 0.3s ease; user-select: none; } .toggle__thumb { position: absolute; z-index: 1; top: 4px; left: 4px; bottom: 4px; width: 44px; background: color-mix(in srgb, var(--bronze) 26%, transparent); border: 1px solid var(--border-hi); border-radius: 999px; transition: transform 0.35s cubic-bezier(.6,.05,.1,1); } [data-theme="lab"] .toggle__opt[data-mode="lab"] { color: var(--gold); } [data-theme="paper"] .toggle__opt[data-mode="paper"] { color: var(--bronze); } [data-theme="paper"] .toggle__thumb { transform: translateX(46px); width: 58px; } /* burger (mobile) */ .nav__burger { display: none; flex-direction: column; gap: 5px; width: 34px; height: 30px; background: var(--glass); border: 1px solid var(--border); border-radius: 9px; align-items: center; justify-content: center; cursor: pointer; } .nav__burger span { width: 16px; height: 1.5px; background: var(--text); transition: transform .3s ease, opacity .3s ease; } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 95; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .mobile-menu.is-open { opacity: 1; pointer-events: auto; } .mobile-menu nav { display: flex; flex-direction: column; gap: 8px; text-align: center; } .mobile-menu a { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 400; color: var(--text-2); padding: 6px; transition: color 0.25s ease, transform 0.25s ease; } .mobile-menu a:hover { color: var(--text); transform: scale(1.04); } /* ===================== HERO ===================== */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 0 clamp(18px, 6vw, 110px); overflow: hidden; } .hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 42%, transparent 72%), linear-gradient(0deg, var(--bg) 2%, transparent 30%); } .hero__inner { position: relative; z-index: 2; max-width: 760px; padding: 120px 0 90px; } .hero__title { font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(3.4rem, 11vw, 9rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0.28em 0 0.34em; } .hero__title span { display: block; } /* hero title lines need extra room for descenders (g, y) above the surname */ .hero__title .mask { padding-bottom: 0.18em; } .hero__title .mask:first-of-type { margin-bottom: 0.04em; } .hero__title .mask:last-of-type .mask__i { color: var(--bronze); font-style: italic; font-weight: 400; } .hero__lede { font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--text-2); max-width: 56ch; margin-bottom: 1.6em; } .hero__brand { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--text); margin-bottom: 0.9em; } .signal-line { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 2.2em; } .signal-line i { color: var(--teal-lift); font-style: normal; margin: 0 0.3em; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } /* buttons */ .btn { position: relative; overflow: hidden; font-size: 0.86rem; letter-spacing: 0.02em; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); background: var(--glass); backdrop-filter: blur(8px); transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bronze) 18%, transparent); transform: translateY(101%); transition: transform 0.4s cubic-bezier(.5,.05,.1,1); } .btn:hover { border-color: var(--border-hi); transform: translateY(-2px); } .btn:hover::before { transform: translateY(0); } .btn--primary { background: color-mix(in srgb, var(--bronze) 22%, transparent); border-color: var(--border-hi); color: var(--text); } .btn--primary::before { background: color-mix(in srgb, var(--gold) 26%, transparent); } /* floating field card */ .field-card { position: absolute; z-index: 2; right: clamp(20px, 6vw, 90px); top: 30%; display: flex; flex-direction: column; gap: 3px; padding: 16px 20px; border-radius: 14px; background: var(--glass-2); border: 1px solid var(--border); backdrop-filter: blur(10px); box-shadow: var(--shadow); font-family: 'JetBrains Mono', monospace; } .field-card__label { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--gold); } .field-card__sub { font-size: 0.66rem; letter-spacing: 0.1em; color: var(--text-2); } .field-card__live { display: flex; align-items: center; gap: 6px; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--teal-lift); text-transform: uppercase; margin-top: 6px; } .field-card__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-lift); animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1; box-shadow:0 0 0 0 color-mix(in srgb,var(--teal-lift) 60%,transparent);} 50%{opacity:.5; box-shadow:0 0 0 5px transparent;} } .hero__scroll { position: absolute; bottom: 26px; left: clamp(18px, 6vw, 110px); z-index: 2; display: flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .hero__scroll-line { width: 60px; height: 1px; background: linear-gradient(90deg, var(--bronze), transparent); position: relative; overflow: hidden; } .hero__scroll-line::after { content:''; position:absolute; inset:0; width:20px; background: var(--gold); animation: scrollshine 2.4s infinite; } @keyframes scrollshine { from{transform:translateX(-20px);} to{transform:translateX(60px);} } /* ===================== SECTIONS ===================== */ .section { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: clamp(70px, 11vw, 150px) clamp(18px, 5vw, 40px); } .section--calm { padding-top: clamp(50px, 7vw, 90px); padding-bottom: clamp(50px, 7vw, 90px); } .section__head { display: flex; gap: clamp(16px, 3vw, 38px); margin-bottom: 42px; } .section__no { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--bronze); letter-spacing: 0.1em; padding-top: 0.7em; flex-shrink: 0; } .section__no::before { content: '/ '; color: var(--muted); } .section__title { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3.3rem); line-height: 1.04; letter-spacing: -0.015em; max-width: 18ch; } .section__intro { color: var(--text-2); max-width: 56ch; margin-top: 0.9em; font-size: 1.02rem; } .prose { max-width: 62ch; margin-left: clamp(0px, 8vw, 76px); } .prose--wide { max-width: 72ch; } .prose p { color: var(--text-2); margin-bottom: 1em; font-size: 1.04rem; } .prose .prose__muted { color: var(--muted); } /* focus card */ .focus-card { margin: 34px 0 12px; padding: 20px 24px; border-radius: 14px; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(8px); } .focus-card__k { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); } .focus-card__v { color: var(--text); margin-top: 6px; font-size: 1rem; } /* ===================== WORKED EXAMPLE BANNER ===================== */ .worked { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin: 30px 0 4px; padding: 26px 28px; border-radius: 16px; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(10px); transition: transform 0.4s cubic-bezier(.4,0,.1,1), border-color 0.4s ease, background 0.4s ease; } .worked::after { content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: radial-gradient(560px circle at 12% 0%, color-mix(in srgb,var(--bronze) 16%,transparent), transparent 45%); opacity: 0; transition: opacity 0.4s ease; } .worked:hover, .worked:focus-visible { transform: translateY(-4px); border-color: var(--border-hi); background: var(--glass-2); outline: none; } .worked:hover::after, .worked:focus-visible::after { opacity: 1; } .worked__txt { position: relative; z-index: 1; max-width: 62ch; } .worked__k { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); } .worked__t { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.5rem; line-height: 1.1; margin: 8px 0 8px; } .worked__d { color: var(--text-2); font-size: 0.94rem; } .worked__cta { position: relative; z-index: 1; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; letter-spacing: 0.04em; color: var(--gold); border: 1px solid var(--border-hi); border-radius: 999px; padding: 12px 20px; background: color-mix(in srgb,var(--bronze) 18%,transparent); transition: background 0.3s ease, color 0.3s ease; } .worked:hover .worked__cta { background: color-mix(in srgb,var(--gold) 24%,transparent); } .worked .card__reg { position: absolute; right: 16px; bottom: 16px; } .worked:hover .card__reg { opacity: 1; transform: rotate(90deg); } /* ===================== PUBLICATIONS / ESSAYS LISTS ===================== */ .pubs { margin-top: 34px; } .essays { margin-top: 30px; } .pubs__h { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); margin-bottom: 6px; } .pubs__list { list-style: none; display: flex; flex-direction: column; } .pub { padding: 15px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; } .pub__t { font-size: 1.04rem; line-height: 1.4; color: var(--text); transition: color 0.25s ease; display: inline-block; } .pub__t:hover, .pub__t:focus-visible { color: var(--gold); } .pub__m { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--text-2); } .pub__doi { color: var(--teal-lift); } .pubs__more { margin-top: 18px; font-size: 0.9rem; color: var(--text-2); line-height: 1.7; } .pubs__more a { color: var(--bronze); border-bottom: 1px solid var(--border); transition: color 0.25s ease, border-color 0.25s ease; } .pubs__more a:hover { color: var(--gold); border-color: var(--border-hi); } /* ===================== BENTO ===================== */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 44px 0; } .card { position: relative; overflow: hidden; padding: 26px 22px 28px; border-radius: 16px; min-height: 200px; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(10px); transition: transform 0.4s cubic-bezier(.4,0,.1,1), border-color 0.4s ease, background 0.4s ease; outline: none; } .card::after { content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--bronze) 16%,transparent), transparent 45%); opacity: 0; transition: opacity 0.4s ease; } .card:hover, .card:focus-visible { transform: translateY(-6px); border-color: var(--border-hi); background: var(--glass-2); } .card:hover::after, .card:focus-visible::after { opacity: 1; } .card__no { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; color: var(--bronze); letter-spacing: 0.12em; } .card__title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.28rem; margin: 14px 0 10px; line-height: 1.12; } .card__body { color: var(--text-2); font-size: 0.92rem; } /* crosshair register mark — instrument signature */ .card__reg { position: absolute; right: 16px; bottom: 16px; width: 14px; height: 14px; opacity: 0.5; transition: opacity .4s ease, transform .4s ease; } .card__reg::before, .card__reg::after { content:''; position:absolute; background: var(--bronze); } .card__reg::before { left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); } .card__reg::after { top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); } .card:hover .card__reg { opacity: 1; transform: rotate(90deg); } /* tags */ .tags, .themes { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; } .tags span, .themes span { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); background: color-mix(in srgb, var(--bg-2) 50%, transparent); transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; } .tags span:hover, .themes span:hover { color: var(--text); border-color: var(--border-hi); transform: translateY(-2px); background: color-mix(in srgb, var(--bronze) 14%, transparent); } .note { margin-top: 30px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--teal-lift); padding-left: 16px; border-left: 2px solid var(--teal); } /* ===================== RESEARCH ===================== */ .research__q { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--gold); margin-top: 0.7em; max-width: 30ch; } .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 38px 0; padding: 22px 24px; border-radius: 16px; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(8px); } .flow__step { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; letter-spacing: 0.06em; padding: 9px 16px; border-radius: 999px; color: var(--text-2); border: 1px solid var(--border); background: color-mix(in srgb,var(--bg-2) 50%,transparent); transition: all 0.3s ease; } .flow__step:hover { color: var(--text); border-color: var(--border-hi); } .flow__step.is-end { color: var(--gold); border-color: var(--border-hi); background: color-mix(in srgb,var(--bronze) 16%,transparent); } .flow__arrow { color: var(--bronze); font-size: 1rem; } .links-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* ===================== LABS ===================== */ .labs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 10px; } .lab { position: relative; overflow: hidden; border-radius: 18px; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(10px); min-height: 360px; display: flex; flex-direction: column; transition: transform 0.45s cubic-bezier(.4,0,.1,1), border-color 0.4s ease; } .lab:hover, .lab:focus-visible { transform: translateY(-7px); border-color: var(--border-hi); outline: none; } .lab__viz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; transition: opacity 0.5s ease; } .lab:hover .lab__viz { opacity: 0.9; } .lab__body { position: relative; z-index: 2; margin-top: auto; padding: 26px 26px 28px; background: linear-gradient(0deg, var(--glass-2) 60%, transparent); } .lab__label { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-lift); } .lab__title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.9rem; margin: 8px 0 10px; } .lab__desc { color: var(--text-2); font-size: 0.95rem; max-width: 48ch; } .lab__more { color: var(--muted); font-size: 0.86rem; margin-top: 10px; max-width: 50ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease; } .lab:hover .lab__more, .lab:focus-within .lab__more { max-height: 120px; opacity: 1; } .lab__cta { display: inline-block; margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--gold); border-bottom: 1px solid var(--border-hi); padding-bottom: 3px; transition: gap 0.3s ease, color 0.3s ease; } .lab__cta:hover { color: var(--amber); } /* ===================== BOOKS ===================== */ .books { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .book { position: relative; overflow: hidden; padding: 24px 22px 26px; border-radius: 16px; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(10px); display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(.4,0,.1,1), border-color 0.4s ease, background 0.4s ease; } .book::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--bronze), transparent); transform: scaleY(0); transform-origin: top; transition: transform 0.45s ease; } .book:hover, .book:focus-visible { transform: translateY(-5px); border-color: var(--border-hi); background: var(--glass-2); outline: none; } .book:hover::before, .book:focus-visible::before { transform: scaleY(1); } .book__label { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); } .book__title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.34rem; line-height: 1.12; margin: 12px 0 10px; } .book__desc { color: var(--text-2); font-size: 0.9rem; flex-grow: 1; } .book__links { display: flex; gap: 16px; margin-top: 16px; } .book__links a { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--gold); transition: color 0.25s ease; } .book__links a:hover { color: var(--amber); } /* ===================== FIELD NOTES ===================== */ .signals { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .signal { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; letter-spacing: 0.05em; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); background: var(--glass); backdrop-filter: blur(8px); transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .signal i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-lift); transition: transform 0.3s ease, background 0.3s ease; } .signal:hover { color: var(--text); border-color: var(--border-hi); transform: translateY(-3px); } .signal:hover i { transform: scale(1.5); background: var(--gold); } /* ===================== CONTACT ===================== */ .contact__statement { color: var(--text-2); max-width: 60ch; margin-bottom: 34px; font-size: 1.05rem; } .contact__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .contact__link { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; border-radius: 14px; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(8px); transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease; } .contact__link:hover { transform: translateY(-4px); border-color: var(--border-hi); background: var(--glass-2); } .contact__k { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); } .contact__v { font-size: 0.92rem; color: var(--text); word-break: break-word; } /* ===================== FOOTER ===================== */ .footer { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; max-width: 1180px; margin: 0 auto; padding: 50px clamp(18px, 5vw, 40px) 60px; border-top: 1px solid var(--border); } .footer__brand { display: flex; gap: 16px; align-items: center; } .footer__mark { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.6rem; color: var(--bronze); } .footer__brand p { font-size: 0.86rem; color: var(--text-2); } .footer__brand i { color: var(--muted); font-style: italic; } .footer__links { display: flex; flex-wrap: wrap; gap: 20px; } .footer__links a { font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; color: var(--text-2); transition: color 0.25s ease; } .footer__links a:hover { color: var(--gold); } /* ===================== boot sequence ===================== */ .boot { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity 0.8s ease, visibility 0.8s ease; } .boot.is-done { opacity: 0; visibility: hidden; } .boot__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } .boot__mark { font-family: 'Fraunces', serif; font-weight: 600; font-size: 2.4rem; letter-spacing: 0.06em; color: var(--text); opacity: 0; animation: bootMark 0.7s ease forwards; } @keyframes bootMark { from { opacity: 0; letter-spacing: 0.4em; filter: blur(6px); } to { opacity: 1; letter-spacing: 0.06em; filter: none; } } .boot__bar { width: 180px; height: 1px; background: var(--border); position: relative; overflow: hidden; } .boot__bar i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--bronze), var(--gold)); } .boot__status { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); } /* ===================== mask reveal (headings) ===================== */ .mask { display: block; overflow: hidden; padding-bottom: 0.1em; } .mask__i { display: block; transform: translateY(112%); transition: transform 1.05s cubic-bezier(.16,.84,.2,1); } .mask.in .mask__i { transform: translateY(0); } /* boot-reveal items (hero) */ .b-rv { opacity: 0; transform: translateY(22px); transition: opacity 0.85s cubic-bezier(.2,.6,.2,1), transform 0.85s cubic-bezier(.2,.6,.2,1); } .b-rv.in { opacity: 1; transform: none; } /* magnetic elements get a will-change hint; movement is applied via JS transform */ .magnetic { will-change: transform; } .magnetic > * { pointer-events: none; } /* ===================== reveal animation ===================== */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(.2,.6,.2,1), transform 0.8s cubic-bezier(.2,.6,.2,1); } [data-reveal].in { opacity: 1; transform: none; } [data-delay="1"] { transition-delay: 0.08s; } [data-delay="2"] { transition-delay: 0.16s; } [data-delay="3"] { transition-delay: 0.24s; } [data-delay="4"] { transition-delay: 0.32s; } [data-delay="5"] { transition-delay: 0.40s; } /* ===================== responsive ===================== */ @media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, 1fr); } .contact__grid { grid-template-columns: repeat(2, 1fr); } .books { grid-template-columns: repeat(2, 1fr); } .labs { grid-template-columns: 1fr; } } @media (max-width: 760px) { .nav__links { display: none; } .nav__burger { display: flex; } .hero__inner { padding: 130px 0 80px; } .field-card { display: none; } .labs { grid-template-columns: 1fr; } .books { grid-template-columns: 1fr; } .bento { grid-template-columns: 1fr 1fr; } .contact__grid { grid-template-columns: 1fr 1fr; } .prose { margin-left: 0; } .section__head { flex-direction: column; gap: 8px; } .section__no { padding-top: 0; } .footer { flex-direction: column; align-items: flex-start; } } @media (max-width: 460px) { .bento { grid-template-columns: 1fr; } .contact__grid { grid-template-columns: 1fr; } } /* ===================== reduced motion ===================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1; transform: none; } .b-rv { opacity: 1; transform: none; } .mask__i { transform: none; } .boot { display: none; } #trail { display: none; } .hero__scroll-line::after, .field-card__live i { animation: none; } } .worked__d em { color: var(--gold); font-style: normal; } /* ===================== CREDIBILITY STRIP ===================== */ .cred-strip { position: relative; z-index: 2; max-width: 1180px; margin: -34px auto 0; padding: 0 clamp(18px, 5vw, 40px) clamp(34px, 6vw, 70px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cred { min-height: 126px; padding: 18px 18px 20px; border-radius: 16px; background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(10px); box-shadow: var(--shadow); transition: transform .35s ease, border-color .35s ease, background .35s ease; } .cred:hover { transform: translateY(-4px); border-color: var(--border-hi); background: var(--glass-2); } .cred__k { display:block; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); margin-bottom:8px; } .cred strong { display:block; font-family:'Fraunces',serif; font-weight:500; font-size:1.12rem; line-height:1.15; color:var(--text); margin-bottom:8px; } .cred__v { display:block; color:var(--text-2); font-size:.84rem; line-height:1.45; } /* ===================== SELECTED WORK ===================== */ .work-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top: 18px; } .work-card { position:relative; overflow:hidden; min-height: 265px; padding:28px 24px; border-radius:18px; background:var(--glass); border:1px solid var(--border); backdrop-filter:blur(10px); transition:transform .4s cubic-bezier(.4,0,.1,1), border-color .35s ease, background .35s ease; } .work-card::after { content:''; position:absolute; inset:auto -30% -45% -30%; height:120%; background:radial-gradient(520px circle at 50% 100%, color-mix(in srgb,var(--teal) 16%,transparent), transparent 55%); opacity:.5; pointer-events:none; } .work-card:hover, .work-card:focus-visible { transform:translateY(-6px); border-color:var(--border-hi); background:var(--glass-2); outline:none; } .work-card__k { font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); } .work-card h3 { font-family:'Fraunces',serif; font-weight:500; font-size:1.45rem; line-height:1.1; margin:16px 0 12px; } .work-card p { color:var(--text-2); font-size:.94rem; position:relative; z-index:1; } .work-card__tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; position:relative; z-index:1; } .work-card__tags span { font-family:'JetBrains Mono',monospace; font-size:.64rem; color:var(--teal-lift); border:1px solid color-mix(in srgb,var(--teal) 38%,transparent); border-radius:999px; padding:6px 10px; background: color-mix(in srgb,var(--teal) 8%,transparent); } .case-grid { display:grid; grid-template-columns: 1.35fr .85fr; gap:16px; margin-top:22px; } .case-note { border:1px solid var(--border); border-radius:16px; background:var(--glass); padding:20px 22px; backdrop-filter:blur(10px); } .case-note--link { transition:transform .35s ease, border-color .35s ease, background .35s ease; } .case-note--link:hover { transform:translateY(-4px); border-color:var(--border-hi); background:var(--glass-2); } .case-note__k { display:block; font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); margin-bottom:8px; } .case-note p { color:var(--text-2); } /* ===================== RESEARCH START / LATEST ===================== */ .research-start { margin: 34px 0 24px; padding:22px; border:1px solid var(--border); border-radius:16px; background:var(--glass); backdrop-filter:blur(8px); } .research-start__k { font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); } .research-start__items { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; } .research-start__items a { display:flex; flex-direction:column; gap:5px; border:1px solid var(--border); border-radius:14px; padding:14px 16px; background: color-mix(in srgb,var(--bg-2) 48%,transparent); transition: transform .3s ease, border-color .3s ease, background .3s ease; } .research-start__items a:hover { transform:translateY(-3px); border-color:var(--border-hi); background:var(--glass-2); } .research-start__items strong { font-family:'Fraunces',serif; font-size:1.05rem; font-weight:500; color:var(--text); } .research-start__items span { color:var(--text-2); font-size:.82rem; } .section--compact { padding-top: clamp(50px, 8vw, 100px); padding-bottom: clamp(50px, 8vw, 100px); } .latest-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; } .latest-card { display:flex; flex-direction:column; min-height:185px; padding:22px 20px; border-radius:16px; background:var(--glass); border:1px solid var(--border); backdrop-filter:blur(10px); transition:transform .35s ease, border-color .35s ease, background .35s ease; } .latest-card:hover { transform:translateY(-5px); border-color:var(--border-hi); background:var(--glass-2); } .latest-card span { font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bronze); } .latest-card strong { font-family:'Fraunces',serif; font-weight:500; font-size:1.25rem; line-height:1.1; margin:14px 0 10px; color:var(--text); } .latest-card p { color:var(--text-2); font-size:.86rem; } @media (max-width: 1024px) { .cred-strip { grid-template-columns: repeat(2,1fr); margin-top: 0; } .work-grid { grid-template-columns: 1fr; } .case-grid { grid-template-columns: 1fr; } .research-start__items { grid-template-columns: 1fr; } .latest-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .cred-strip { grid-template-columns: 1fr; } .latest-grid { grid-template-columns: 1fr; } } /* ---- v29: outcome lines + collaboration block ---- */ .work-card__impact{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;font-size:.92rem;line-height:1.45;color:var(--text);font-weight:500} .work-card__impact i{flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px -1px var(--gold)} .validation{margin-top:30px;padding:24px 26px;border:1px solid var(--border);border-radius:18px;background:var(--glass)} .validation__k{display:block;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-bottom:14px} .validation__list{list-style:none;margin:0;padding:0;display:grid;gap:13px} .validation__list li{position:relative;padding-left:22px;color:var(--text-2);line-height:1.55;font-size:.96rem} .validation__list li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--teal-lift)} .validation__list strong{color:var(--text);font-weight:600} /* ---- v29: endorsements (inert until activated) ---- */ .quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:10px} .quote{margin:0;padding:24px 26px;border:1px solid var(--border);border-radius:18px;background:var(--glass)} .quote blockquote{margin:0 0 14px;font-family:'Fraunces',serif;font-size:1.15rem;line-height:1.45;color:var(--text)} .quote figcaption{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;color:var(--bronze)} /* ---- v30: featured interactive callout (CRepair) ---- */ .feature{display:block;position:relative;overflow:hidden;margin:8px 0 6px;padding:clamp(22px,3.6vw,34px);border:1px solid var(--border-hi);border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--bronze) 11%,var(--glass)),var(--glass));transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .3s ease,border-color .25s ease} .feature:hover{transform:translateY(-3px);border-color:var(--gold)} .feature__tag{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .feature__t{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.5rem,3.6vw,2.15rem);color:var(--text);margin:.3em 0 .35em;line-height:1.1} .feature__d{color:var(--text-2);max-width:60ch;line-height:1.62} .feature__d em{color:var(--gold);font-style:normal} .feature__cta{display:inline-block;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.04em;color:var(--bronze)} .feature:hover .feature__cta{color:var(--gold)} /* ---- v34: labs "see all" CTA ---- */ .labs-more{margin-top:26px;text-align:center} .labs-more__cta{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.08em;color:var(--bronze);border:1px solid var(--border);border-radius:999px;padding:11px 22px;transition:all .2s} .labs-more__cta:hover{border-color:var(--border-hi);color:var(--gold);background:var(--glass)}