/* ========================================================================= LiQuiBit fancy layer — oscilloscope dividers + subtle motion Stacks on top of site.css; opt-in via data-attrs on . ========================================================================= */ /* ── Palette overrides — retint away from warm-cream (Claude/paper) feel ── */ html[data-palette="cool"] { --bg: oklch(0.985 0.004 240); --surface: #ffffff; --warm: oklch(0.962 0.008 240); --ink: oklch(0.20 0.022 245); --ink-2: oklch(0.36 0.016 245); --muted: oklch(0.52 0.014 245); --faint: oklch(0.72 0.010 245); --border: oklch(0.89 0.012 245); --border-2: oklch(0.82 0.014 245); --ink-dark: oklch(0.18 0.020 245); } html[data-palette="neutral"] { --bg: oklch(0.985 0 0); --surface: #ffffff; --warm: oklch(0.962 0 0); --ink: oklch(0.20 0 0); --ink-2: oklch(0.36 0 0); --muted: oklch(0.52 0 0); --faint: oklch(0.72 0 0); --border: oklch(0.89 0 0); --border-2: oklch(0.82 0 0); --ink-dark: oklch(0.16 0 0); } html[data-palette="slate"] { --bg: oklch(0.975 0.006 245); --surface: oklch(0.995 0.004 245); --warm: oklch(0.945 0.012 245); --ink: oklch(0.18 0.032 250); --ink-2: oklch(0.34 0.024 250); --muted: oklch(0.50 0.018 250); --faint: oklch(0.70 0.012 250); --border: oklch(0.86 0.016 245); --border-2: oklch(0.78 0.018 245); --ink-dark: oklch(0.16 0.034 250); } /* Override hardcoded warm strings from site.css */ .nav-wrap { background: color-mix(in oklch, var(--bg) 90%, transparent) !important; } .ticker { color: oklch(0.86 0.008 245) !important; } .ticker .left { color: #fff !important; } .ticker .right { color: oklch(0.58 0.010 245) !important; } .cta { color: oklch(0.93 0.006 245) !important; } .cta p { color: oklch(0.74 0.010 245) !important; } .cta-actions .info { color: oklch(0.58 0.012 245) !important; border-top-color: oklch(0.32 0.018 245) !important; } .cta-actions .info b { color: oklch(0.93 0.006 245) !important; } .cta::before { background-image: linear-gradient(to right, oklch(0.28 0.018 245) 1px, transparent 1px), linear-gradient(to bottom, oklch(0.28 0.018 245) 1px, transparent 1px) !important; } .cta .btn-ghost { color: oklch(0.93 0.006 245) !important; border-color: oklch(0.32 0.018 245) !important; } .cta .btn-ghost:hover { border-color: oklch(0.93 0.006 245) !important; color: #fff !important; } /* Hero dot-grid → use palette border instead of hardcoded warm */ .hero::before { background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px) !important; } /* Work card light backgrounds (hardcoded warm beige) */ .work-img:not(.dark) { background: var(--warm) !important; } /* ── Scroll reveal (subtle fades, never blocking content) ───────────── */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.65,.2,1), transform .7s cubic-bezier(.2,.65,.2,1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } [data-motion="off"] .reveal { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Stagger children when a reveal container becomes visible */ .reveal-children > * { opacity: 0; transform: translateY(10px); transition: opacity .55s cubic-bezier(.2,.65,.2,1), transform .55s cubic-bezier(.2,.65,.2,1); } .reveal-children.in > * { opacity: 1; transform: none; } .reveal-children.in > *:nth-child(2) { transition-delay: .06s; } .reveal-children.in > *:nth-child(3) { transition-delay: .12s; } .reveal-children.in > *:nth-child(4) { transition-delay: .18s; } .reveal-children.in > *:nth-child(5) { transition-delay: .24s; } .reveal-children.in > *:nth-child(6) { transition-delay: .30s; } [data-motion="off"] .reveal-children > * { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .reveal-children > * { opacity: 1; transform: none; transition: none; } } /* ── Waveform divider ──────────────────────────────────────────────── */ .wave-divider { position: relative; width: 100%; height: 96px; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; } .wave-divider .wv-readout { position: absolute; top: 10px; left: var(--pad); right: var(--pad); display: flex; gap: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); pointer-events: none; z-index: 2; } .wave-divider .wv-readout .ch { color: var(--accent-ink); font-weight: 600; } .wave-divider .wv-readout .lbl { color: var(--ink); font-weight: 500; } .wave-divider .wv-readout .spacer { flex: 1; } .wave-divider .wv-readout .live { color: var(--accent-ink); } .wave-divider .wv-readout .live::before { content: "●"; margin-right: 5px; animation: wv-blink 1.6s infinite step-end; } @keyframes wv-blink { 50% { opacity: 0.18; } } .wave-divider .wv-stage { position: absolute; inset: 0; display: flex; align-items: center; } .wave-divider svg.wv-svg { display: block; width: 100%; height: 100%; } .wave-divider .wv-grid line { stroke: var(--border); stroke-width: 0.5; } .wave-divider .wv-grid line.major { stroke: var(--border-2); } .wave-divider .wv-trace { fill: none; stroke-linecap: round; stroke-linejoin: round; } .wave-divider .wv-trace.ch1 { stroke: var(--accent); stroke-width: 1.5; } .wave-divider .wv-trace.ch2 { stroke: var(--ink); stroke-width: 1; opacity: 0.4; stroke-dasharray: 2 3; } /* draw-in (subtle + confident) */ [data-motion="subtle"] .wv-trace, [data-motion="confident"] .wv-trace { stroke-dasharray: 3000; stroke-dashoffset: 3000; transition: stroke-dashoffset 1.5s cubic-bezier(.4,.1,.2,1); } .wave-divider.in .wv-trace { stroke-dashoffset: 0; } /* confident multi-trace: continuous drift on the dashed channel */ [data-motion="confident"][data-divider="multi"] .wv-trace.ch2 { stroke-dasharray: 2 3; stroke-dashoffset: 0; animation: wv-scroll 12s linear infinite; } @keyframes wv-scroll { to { stroke-dashoffset: -200; } } @media (prefers-reduced-motion: reduce) { [data-motion="confident"][data-divider="multi"] .wv-trace.ch2 { animation: none; } } /* trailing cursor dot (scope variant) */ [data-divider="scope"] .wv-divider-cursor, [data-divider="multi"] .wv-divider-cursor { position: absolute; right: var(--pad); top: 28px; bottom: 12px; width: 1px; background: linear-gradient(to bottom, transparent, var(--accent) 30%, var(--accent) 70%, transparent); opacity: 0; transition: opacity .8s ease .8s; pointer-events: none; } .wave-divider.in .wv-divider-cursor { opacity: 0.65; } .wave-divider .wv-divider-cursor::after { content: ""; position: absolute; top: 50%; right: -3px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; transform: translateY(-50%); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); } /* Hide readout/cursor on sine (minimalist) */ [data-divider="sine"] .wv-readout, [data-divider="sine"] .wv-divider-cursor { display: none; } [data-divider="sine"] .wave-divider { height: 72px; } [data-divider="sine"] .wave-divider .wv-grid { display: none; } /* ── Hover micro-interactions ──────────────────────────────────────── */ [data-hover="on"] .cap-col, [data-hover="on"] .service, [data-hover="on"] .approach .step, [data-hover="on"] .member, [data-hover="on"] .work-item { transition: background .3s ease, transform .3s ease, border-color .3s ease; } [data-hover="on"] .cap-col { position: relative; } [data-hover="on"] .cap-col::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.65,.2,1); } [data-hover="on"] .cap-col:hover::after { transform: scaleX(1); } [data-hover="on"] .cap-col:hover .head .num { color: var(--accent-ink); } [data-hover="on"] .member:hover { transform: translateY(-2px); } [data-hover="on"] .member { transition: transform .3s ease, box-shadow .3s ease; } [data-hover="on"] .approach .step { position: relative; } [data-hover="on"] .approach .step::before { content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); transition: width .45s cubic-bezier(.2,.65,.2,1); } [data-hover="on"] .approach .step:hover::before { width: 100%; } [data-hover="on"] .approach .step:hover .num { color: var(--ink); } /* nav link underline draw */ [data-hover="on"] .nav-links a:not(.contact-btn) { position: relative; transition: color .15s ease; } [data-hover="on"] .nav-links a:not(.contact-btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.65,.2,1); } [data-hover="on"] .nav-links a:not(.contact-btn):hover { background: transparent; color: var(--ink); } [data-hover="on"] .nav-links a:not(.contact-btn):hover::after { transform: scaleX(1); } /* link arrow nudge on work cards */ [data-hover="on"] .work-body .actions .link { transition: color .15s ease, border-color .15s ease, letter-spacing .25s ease; } [data-hover="on"] .work-body .actions .link:hover { border-color: var(--ink); letter-spacing: 0.005em; } /* button arrow already animates; bump it slightly more on confident */ [data-motion="confident"] .btn .arr { transition: transform .25s cubic-bezier(.2,.65,.2,1); } [data-motion="confident"] .btn:hover .arr { transform: translateX(5px); } /* ── Hero waveform trace (light, behind the right edge of the visual) ─ */ .hero { position: relative; } .hero-wave { position: absolute; inset: auto 0 0 0; height: 56px; opacity: 0; pointer-events: none; transition: opacity 1.2s ease .3s; z-index: 0; } .hero.in .hero-wave { opacity: 0.55; } .hero-wave svg { width: 100%; height: 100%; display: block; } .hero-wave path { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4000; stroke-dashoffset: 4000; transition: stroke-dashoffset 2s cubic-bezier(.4,.1,.2,1) .4s; } .hero.in .hero-wave path { stroke-dashoffset: 0; } [data-motion="off"] .hero-wave { display: none; } @media (prefers-reduced-motion: reduce) { .hero-wave path { stroke-dashoffset: 0; transition: none; } } /* ── Tweaks panel — re-tint to LiQuiBit palette (override starter) ──── */ .twk-panel { background: rgba(255, 255, 255, 0.82) !important; color: var(--ink) !important; border: 0.5px solid var(--border) !important; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 40px rgba(20,24,30,.14) !important; font-family: var(--sans) !important; } .twk-hd b { font-family: var(--sans); letter-spacing: 0.005em; color: var(--ink); } .twk-x { color: var(--muted) !important; } .twk-x:hover { background: var(--warm) !important; color: var(--ink) !important; } .twk-sect { font-family: var(--mono) !important; color: var(--muted) !important; letter-spacing: 0.08em !important; } .twk-lbl > span:first-child { color: var(--ink-2); } .twk-val { color: var(--muted); } /* Segmented control — selected thumb gets the blue accent */ .twk-seg { background: var(--warm) !important; border: 0.5px solid var(--border) !important; } .twk-seg-thumb { background: var(--surface) !important; border: 0.5px solid var(--border-2) !important; box-shadow: 0 1px 2px rgba(20,24,30,.06) !important; } .twk-seg button[aria-checked="true"] { color: var(--accent-ink) !important; font-weight: 600 !important; } .twk-seg button { color: var(--muted) !important; } /* Toggle — accent blue when on */ .twk-toggle[data-on="1"] { background: var(--accent) !important; } /* Form fields */ .twk-field { background: var(--surface) !important; border: 0.5px solid var(--border) !important; color: var(--ink) !important; } .twk-field:focus { border-color: var(--accent) !important; } /* Color swatch ring when selected */ .twk-swatch[data-on="1"], .twk-swatch[aria-checked="true"] { outline-color: var(--accent) !important; } /* Slim divider/border lines inside the panel */ .twk-panel hr, .twk-body hr { border-color: var(--border) !important; } /* ── Fancy tag (the collapsed pill) ───────────────────────────────── */ .fancy-tag { position: fixed; right: 16px; bottom: 16px; z-index: 2147483645; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: rgba(252,251,248,.85); border: 1px solid var(--border); backdrop-filter: blur(8px); padding: 8px 12px; border-radius: 100px; cursor: pointer; display: none; } .fancy-tag .d { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 1px; animation: wv-blink 1.6s infinite step-end; } .fancy-tag:hover { color: var(--ink); border-color: var(--ink); }