/* ============================================================ components.css · nav, footer, buttons, chips, cards, quote ============================================================ */ /* ---------- NAV ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: var(--z-nav); display: flex; align-items: center; background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav.is-scrolled { border-bottom-color: var(--hairline); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; } /* ---- WORDMARK ---- Default (direction 1): a refined Fraunces lockup, "finding" lighter, "dshah" italic accent. Alternate (direction 2): set data-wm="alt" on to add a small coral mark. */ .wordmark { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; font-size: 1.46rem; letter-spacing: -0.035em; display: inline-flex; align-items: baseline; line-height: 1; } .wordmark .accent { font-style: italic; font-weight: 500; } .wordmark:hover .accent { color: var(--accent); } /* alternate direction · a small circuit-style mark before the name */ :root[data-wm="alt"] .wordmark::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); align-self: center; margin-right: 9px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } :root[data-wm="alt"] .wordmark { font-weight: 460; letter-spacing: -0.02em; } :root[data-wm="alt"] .wordmark .accent { font-style: normal; color: var(--accent); } .nav__links { display: flex; align-items: center; gap: 2px; } .nav__links a { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--muted); padding: 8px 13px; border-radius: 9px; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .nav__links a:hover { color: var(--ink); background: var(--surface-2); } .theme-toggle { margin-left: var(--s-2); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline); display: grid; place-items: center; color: var(--muted); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .theme-toggle:hover { color: var(--ink); border-color: var(--ink); transform: rotate(-12deg); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .moon { display: none; } :root[data-theme="dark"] .theme-toggle .sun { display: none; } :root[data-theme="dark"] .theme-toggle .moon { display: block; } .nav__burger { display: none; } @media (max-width: 860px) { .nav__links { display: none; } .nav__burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--hairline); } .nav__burger span { width: 18px; height: 1.5px; background: var(--ink); display: block; } .nav__burger span + span { margin-top: 4px; } } /* mobile menu overlay */ .menu { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); transform: translateY(-100%); transition: transform var(--dur) var(--ease); } .menu.is-open { transform: translateY(0); } .menu a { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.2rem); padding: 10px 0; color: var(--ink); } .menu a:hover { color: var(--accent); } .menu__close { position: absolute; top: 22px; right: var(--gutter); font-family: var(--font-mono); font-size: 0.9rem; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.02em; padding: 14px 22px; border-radius: 999px; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); will-change: transform; } .btn svg { width: 15px; height: 15px; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { box-shadow: 0 10px 30px -10px var(--accent); } .btn--ghost { border: 1px solid var(--hairline); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); background: var(--surface); } .btn .arrow { transition: transform var(--dur-fast) var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* ---------- CHIPS / TAGS ---------- */ .chip { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 14px; background: var(--surface); } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .chip--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); } .tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } /* ---------- CARDS ---------- */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -28px var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); } /* ---------- PULL QUOTE ---------- */ .pullquote { font-family: "Newsreader", var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 1rem + 3vw, 3rem); line-height: 1.18; letter-spacing: -0.01em; max-width: 22ch; } .pullquote cite { display: block; margin-top: var(--s-6); font: var(--t-small)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); font-style: normal; } /* ---------- FOOTER · a real closing moment, not a sitemap ---------- */ .footer { border-top: 1px solid var(--hairline); padding-block: clamp(72px, 11vw, 150px) var(--s-12); position: relative; z-index: 2; } .footer__cta { margin-bottom: clamp(48px, 8vw, 110px); } .footer__cta-eyebrow { display: block; margin-bottom: var(--s-4); } .footer__cta-line { font-family: var(--font-display); font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.98; letter-spacing: -0.03em; display: inline-block; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); } .footer__cta-line:hover { color: var(--accent); } .footer__grid { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-8); flex-wrap: wrap; padding-top: var(--s-8); border-top: 1px solid var(--hairline); } .footer__mark { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3.4rem); line-height: 0.9; letter-spacing: -0.03em; } .footer__mark .accent { font-style: italic; } .footer__signoff { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); max-width: 30ch; } .footer__links { display: flex; flex-direction: column; gap: var(--s-2); font-family: var(--font-mono); font-size: 0.82rem; text-align: right; } .footer__links a { color: var(--muted); transition: color var(--dur-fast) var(--ease); } .footer__links a:hover { color: var(--accent); } .footer__legal { margin-top: var(--s-12); font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); } @media (max-width: 560px) { .footer__links { text-align: left; } } /* ---------- CUSTOM CURSOR (fine pointers only, added by JS) ---------- */ .has-cursor, .has-cursor a, .has-cursor button, .has-cursor [data-magnetic], .has-cursor input, .has-cursor textarea, .has-cursor .circuit__corner, .has-cursor .ol__cat { cursor: none; } .cursor-ring, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; will-change: transform; } .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid var(--accent); transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s var(--ease); } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); } .cursor-ring.is-active { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: color-mix(in srgb, var(--accent) 12%, transparent); } .cursor-ring.is-down { width: 24px; height: 24px; margin: -12px 0 0 -12px; } /* ---------- SCROLL PROGRESS BAR ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); z-index: 9998; pointer-events: none; }