/* ============================================================ cross-lens-nav.css — Knowingly Cross-Lens Navigation v1 Drop into all three sites. Body class drives active state: really.html → safely.html → deeply.html → ============================================================ */ /* ── SHARED COLOR TOKENS ─────────────────────────────────────── */ :root { --kly-really: #f59e0b; --kly-really-text: #a06b00; --kly-really-dim: rgba(245,158,11,.13); --kly-really-border: rgba(245,158,11,.22); --kly-safely: #1177a3; --kly-safely-text: #0d6b9a; --kly-safely-dim: rgba(17,119,163,.10); --kly-safely-border: rgba(17,119,163,.18); --kly-deeply: #8b78d4; --kly-deeply-text: #6d4bb5; --kly-deeply-dim: rgba(139,120,212,.12); --kly-deeply-border: rgba(139,120,212,.22); } /* ── [01] NAV LENS SWITCHER ──────────────────────────────────── */ /* Hides original nav-links when the switcher is injected */ nav.kly-has-switcher .nav-links { display: none !important; } .kly-lens-switcher { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.55); border: 1px solid rgba(60,40,10,.10); border-radius: 40px; padding: 5px; } .kly-lens-pill { padding: 6px 18px; border-radius: 30px; border: 1px solid transparent; background: transparent; font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; white-space: nowrap; } /* Per-lens inactive styles */ .kly-lens-pill[data-lens="really"] { color: var(--kly-really-text); border-color: var(--kly-really-border); } .kly-lens-pill[data-lens="safely"] { color: var(--kly-safely-text); border-color: var(--kly-safely-border); } .kly-lens-pill[data-lens="deeply"] { color: var(--kly-deeply-text); border-color: var(--kly-deeply-border); } /* Hover on inactive */ .kly-lens-pill[data-lens="really"]:hover { background: var(--kly-really-dim); } .kly-lens-pill[data-lens="safely"]:hover { background: var(--kly-safely-dim); } .kly-lens-pill[data-lens="deeply"]:hover { background: var(--kly-deeply-dim); } /* Active pill — driven by body class */ body.lens-really .kly-lens-pill[data-lens="really"] { background: var(--kly-really); color: #09090f; border-color: var(--kly-really); box-shadow: 0 2px 10px rgba(245,158,11,.35); } body.lens-safely .kly-lens-pill[data-lens="safely"] { background: var(--kly-safely); color: #fff; border-color: var(--kly-safely); box-shadow: 0 2px 10px rgba(17,119,163,.35); } body.lens-deeply .kly-lens-pill[data-lens="deeply"] { background: var(--kly-deeply); color: #fff; border-color: var(--kly-deeply); box-shadow: 0 2px 10px rgba(139,120,212,.35); } /* Keep active pill non-interactive */ body.lens-really .kly-lens-pill[data-lens="really"]:hover, body.lens-safely .kly-lens-pill[data-lens="safely"]:hover, body.lens-deeply .kly-lens-pill[data-lens="deeply"]:hover { box-shadow: 0 2px 10px rgba(0,0,0,.2); } /* ── [02] HERO EYEBROW TABS ──────────────────────────────────── */ .kly-eyebrow-tabs { display: flex; align-items: center; gap: 0; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(60,40,10,.14); border-radius: 40px; padding: 4px; margin-bottom: 24px; } .kly-eyebrow-tab { padding: 7px 20px; border-radius: 30px; border: none; background: transparent; font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: all .2s; white-space: nowrap; color: rgba(8,4,0,.35); } .kly-eyebrow-sep { width: 1px; height: 14px; background: rgba(60,40,10,.15); flex-shrink: 0; } /* Hover on inactive */ .kly-eyebrow-tab[data-lens="really"]:hover { color: var(--kly-really-text); background: var(--kly-really-dim); } .kly-eyebrow-tab[data-lens="safely"]:hover { color: var(--kly-safely-text); background: var(--kly-safely-dim); } .kly-eyebrow-tab[data-lens="deeply"]:hover { color: var(--kly-deeply-text); background: var(--kly-deeply-dim); } /* Active tab */ body.lens-really .kly-eyebrow-tab[data-lens="really"] { background: var(--kly-really); color: #09090f; } body.lens-safely .kly-eyebrow-tab[data-lens="safely"] { background: var(--kly-safely); color: #fff; } body.lens-deeply .kly-eyebrow-tab[data-lens="deeply"] { background: var(--kly-deeply); color: #fff; } body.lens-really .kly-eyebrow-tab[data-lens="really"]:hover, body.lens-safely .kly-eyebrow-tab[data-lens="safely"]:hover, body.lens-deeply .kly-eyebrow-tab[data-lens="deeply"]:hover { opacity: .9; } /* ── [03] DEST LENS STRIP ────────────────────────────────────── */ .kly-dest-strip { display: flex; align-items: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; } .kly-dls-label { font-family: 'Syne', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(8,4,0,.45); margin-right: 2px; } .kly-dls-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px; border-radius: 30px; border: 1px solid transparent; background: transparent; font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: all .2s; white-space: nowrap; } /* Inactive pills */ .kly-dls-pill[data-lens="really"] { background: var(--kly-really-dim); color: var(--kly-really-text); border-color: var(--kly-really-border); } .kly-dls-pill[data-lens="safely"] { background: var(--kly-safely-dim); color: var(--kly-safely-text); border-color: var(--kly-safely-border); } .kly-dls-pill[data-lens="deeply"] { background: var(--kly-deeply-dim); color: var(--kly-deeply-text); border-color: var(--kly-deeply-border); } /* Hover on inactive */ .kly-dls-pill[data-lens="really"]:hover { background: rgba(245,158,11,.22); } .kly-dls-pill[data-lens="safely"]:hover { background: rgba(17,119,163,.18); } .kly-dls-pill[data-lens="deeply"]:hover { background: rgba(139,120,212,.20); } /* Active pill */ body.lens-really .kly-dls-pill[data-lens="really"] { background: var(--kly-really); color: #09090f; border-color: var(--kly-really); box-shadow: 0 2px 8px rgba(245,158,11,.3); cursor: default; } body.lens-safely .kly-dls-pill[data-lens="safely"] { background: var(--kly-safely); color: #fff; border-color: var(--kly-safely); box-shadow: 0 2px 8px rgba(17,119,163,.3); cursor: default; } body.lens-deeply .kly-dls-pill[data-lens="deeply"] { background: var(--kly-deeply); color: #fff; border-color: var(--kly-deeply); box-shadow: 0 2px 8px rgba(139,120,212,.3); cursor: default; } .kly-dls-sep { color: rgba(60,40,10,.2); font-size: 12px; user-select: none; } /* ── [04] FLOATING CROSS-LENS BAR ────────────────────────────── */ .kly-float-bar { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 400; background: rgba(10,8,4,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 10px 10px 10px 20px; display: flex; align-items: center; gap: 10px; max-width: 780px; width: calc(100vw - 100px); box-shadow: 0 8px 40px rgba(0,0,0,.40); transition: opacity .4s ease, transform .4s ease; opacity: 0; pointer-events: none; } .kly-float-bar.kly-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all; } .kly-float-bar.kly-gone { display: none !important; } .kly-cf-also { font-family: 'Syne', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.28); white-space: nowrap; flex-shrink: 0; line-height: 1.5; } .kly-cf-divider { width: 1px; height: 36px; background: rgba(255,255,255,.12); flex-shrink: 0; } .kly-cf-card { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: none; background: rgba(255,255,255,.06); cursor: pointer; transition: background .18s; text-align: left; min-width: 0; } .kly-cf-card:hover { background: rgba(255,255,255,.13); } .kly-cf-tag { font-family: 'Syne', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; padding: 3px 9px; border-radius: 20px; } .kly-cf-tag[data-lens="really"] { background: rgba(245,158,11,.20); color: #e8a520; border: 1px solid rgba(245,158,11,.30); } .kly-cf-tag[data-lens="safely"] { background: rgba(17,119,163,.20); color: #5bb8d8; border: 1px solid rgba(17,119,163,.30); } .kly-cf-tag[data-lens="deeply"] { background: rgba(139,120,212,.20); color: #b4acec; border: 1px solid rgba(139,120,212,.30); } .kly-cf-text { font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.72); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kly-cf-arrow { font-size: 11px; color: rgba(255,255,255,.28); flex-shrink: 0; margin-left: 2px; } .kly-cf-dismiss { width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.08); color: rgba(255,255,255,.40); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; flex-shrink: 0; cursor: pointer; transition: background .18s, color .18s; } .kly-cf-dismiss:hover { background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); } /* ── HOVER PREVIEW BACKGROUNDS ───────────────────────────────── */ /* Injected fixed layers that cross-fade on lens pill hover */ .kly-bg-preview { position: fixed; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .75s ease; pointer-events: none; /* z-index: set inline by JS to sit just above the site's own bg layers */ } .kly-bg-preview.kly-preview-on { opacity: 1; }