/* KinkCodex — Design System v1.0 Approved design: dark editorial, Playfair Display + DM Sans ================================================= */ /* fonts.css now linked directly in of each page (no @import chain) */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg0: #0a0a0a; --bg1: #111111; --bg2: #161616; --bg3: #1e1e1e; --border: #2a2a2a; --border-s: #242424; --text: #f5f0eb; --muted: #a0a0a0; --dim: #555555; --red: #c0392b; --red-d: #96281b; --red-text: #d64d3e; /* accessible variant of --red for text on --bg0 (4.5:1+) */ --gold: #c9a84c; --gold-d: rgba(201,168,76,0.45); --sans: 'DM Sans', system-ui, sans-serif; --serif: 'Playfair Display', Georgia, serif; --mono: 'DM Mono', ui-monospace, monospace; --topbar-h: 73px; --progbar-h: 3px; --sticky-top: calc(var(--topbar-h) + var(--progbar-h)); } html { scroll-padding-top: calc(var(--sticky-top) + 16px); } body { background: var(--bg0); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.6; min-height: 100vh; } a { color: var(--red-text); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--red-d); } /* ─── HEADER ─────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg1); border-bottom: 1px solid var(--border); } .topbar { padding: 18px 32px; display: flex; align-items: center; } .logo { font-family: var(--serif); font-size: 19px; font-weight: 900; color: var(--text); letter-spacing: -0.5px; text-decoration: none; flex: 1; } .logo em { color: var(--red-text); font-style: italic; } .tb-icons { display: flex; align-items: center; gap: 2px; } .tb-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; border: none; background: none; border-radius: 3px; transition: color 0.15s; } .tb-icon:hover, .tb-icon.active { color: var(--text); } /* Search bar (hidden by default) */ .search-bar { display: none; padding: 10px 32px; background: var(--bg0); border-bottom: 1px solid var(--border); justify-content: center; } @keyframes searchSlideIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } .search-bar.open { display: flex; animation: searchSlideIn 0.15s ease-out; } /* Positioning wrapper injected by JS — mirrors heroSearchWrap */ .header-search-wrap { position: relative; width: 100%; max-width: 960px; } /* Constrained to content width, matches hero input style */ .search-inner { display: flex; align-items: center; gap: 12px; background: var(--bg1); border: 1px solid var(--border); border-radius: 3px; padding: 13px 18px; max-width: 960px; width: 100%; position: relative; transition: border-color 0.15s, box-shadow 0.15s; } .search-inner:focus-within { border-color: var(--red); box-shadow: 0 0 0 2px rgba(192,57,43,0.12); } .search-inner svg { flex-shrink: 0; color: var(--dim); transition: color 0.15s; } .search-inner:focus-within svg { color: var(--red); } .search-inner input { background: none; border: none; color: var(--text); font-family: var(--sans); font-size: 15px; flex: 1; outline: none; } .search-inner input::placeholder { color: var(--dim); } /* Red X on search clear button — override browser default blue */ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center; background-size: 12px; } /* Hero search needs relative positioning for panel */ .hero-search { position: relative; } /* ── Fullscreen nav overlay ──────────────────────── */ .nav-drawer { position: fixed; inset: 0; z-index: 300; background: #050505; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; overflow-y: auto; padding: 60px 24px 40px; } .nav-drawer.open { opacity: 1; pointer-events: all; } /* Close button inside overlay */ .nav-drawer .dr-close { position: fixed; top: 12px; right: 16px; background: none; border: 1px solid transparent; border-radius: 3px; color: var(--muted); cursor: pointer; padding: 8px; line-height: 1; transition: color 0.15s, border-color 0.15s, background 0.15s; z-index: 301; display: flex; align-items: center; gap: 6px; } .nav-drawer .dr-close:hover { color: var(--text); border-color: var(--border); background: var(--bg2); } .nav-drawer .dr-close-lbl { font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; font-family: var(--sans); } /* Inner container — centered column */ .dr-inner { width: 100%; max-width: 680px; display: flex; flex-direction: column; align-items: center; gap: 48px; } /* Section label */ .dr-section-lbl { font-size: 10px; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; text-align: center; } /* Top nav links — 3 on row 1, 2 on row 2, both centered */ .dr-pages { display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: center; align-items: flex-start; max-width: 560px; margin: 0 auto; text-align: center; } .dr-item { font-size: 13px; letter-spacing: 0.5px; color: var(--muted); text-decoration: none; transition: color 0.15s; white-space: nowrap; } .dr-item:hover { color: var(--text); } .dr-item.primary { font-family: var(--sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: normal; text-align: center; } .dr-item.primary:hover { color: var(--text); } .dr-item.primary:hover .dr-sub { color: var(--muted); } .dr-item.active { color: var(--gold); } .dr-item.active .dr-sub { color: var(--gold-d); } /* Nav item label + description */ .dr-label { display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; } .dr-sub { display: block; font-size: 10px; letter-spacing: 0.5px; text-transform: none; color: var(--dim); font-family: var(--sans); font-weight: 400; } /* Divider */ .dr-divider { display: none; } /* Category grid — 2 columns, centered */ .dr-cats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .dr-item.cat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 16px; border: 1px solid var(--border-s); border-radius: 2px; color: var(--text); font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: normal; text-transform: none; line-height: 1.2; transition: background 0.15s, color 0.15s; gap: 6px; } .dr-item.cat:hover { background: var(--bg2); color: var(--text); } .dr-item.cat.active { color: var(--gold); border-color: var(--border); } .dr-count { font-family: var(--sans); font-size: 9px; font-weight: 400; font-style: normal; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); } .dr-item.cat.active .dr-count { color: var(--gold-d); } /* Glossary A–Z featured link above category grid */ .dr-glossary { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--bg1); border: 1px solid rgba(201,168,76,0.4); border-radius: 3px; padding: 10px 14px; text-decoration: none; color: var(--gold); font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 1px; margin-bottom: 8px; transition: background 0.15s, border-color 0.15s; } .dr-glossary:hover { background: var(--bg2); border-color: var(--gold); } .dr-glossary .dr-count { color: var(--dim); } /* Quiz CTA at bottom */ .dr-cta { width: 100%; background: linear-gradient(135deg, #100808, #0a0a0a); border: 1px solid rgba(201,168,76,0.3); border-radius: 3px; padding: 20px 24px; text-decoration: none; display: flex; align-items: center; justify-content: space-between; transition: border-color 0.15s; position: relative; overflow: hidden; } .dr-cta::before { content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 400px; height: 200px; background: radial-gradient(ellipse, rgba(192,57,43,0.10) 0%, transparent 70%); pointer-events: none; } .dr-cta:hover { border-color: var(--gold); } .dr-cta-lbl { font-size: 10px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); opacity: 0.6; margin-bottom: 5px; position: relative; } .dr-cta-text { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--gold); line-height: 1.3; position: relative; } .dr-cta-arr { font-size: 16px; color: var(--gold); opacity: 0.5; position: relative; } /* ─── PROGRESS BAR ───────────────────────────────── */ .prog-bar { position: sticky; top: var(--topbar-h); z-index: 99; height: 3px; background: var(--bg3); } .prog-fill { height: 3px; background: linear-gradient(90deg, var(--red), var(--gold)); width: 0%; transition: width 0.08s linear; } /* ─── PAGE HERO ──────────────────────────────────── */ .page-hero { padding: 52px 32px 0; max-width: 960px; margin: 0 auto; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 700px; height: 400px; background: radial-gradient(ellipse, rgba(192,57,43,0.10) 0%, transparent 70%); pointer-events: none; } .hero-rule { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--gold), transparent); margin: 28px 0; } /* ─── PAGE BODY ──────────────────────────────────── */ .page-body { padding: 32px 32px 64px; max-width: 960px; margin: 0 auto; } /* Pillar page: page-hero sits above, so body needs less top breathing room */ .page-hero + main > .page-body { padding-top: 24px; } /* ─── TYPOGRAPHY ─────────────────────────────────── */ .eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } h1.page-title { font-family: var(--serif); font-size: clamp(32px, 5vw, 48px); font-weight: 900; color: var(--text); line-height: 1.1; margin-bottom: 12px; letter-spacing: -0.5px; } h1.page-title em { color: var(--red-text); font-style: italic; } .page-desc { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 12px; font-style: italic; font-family: var(--serif); max-width: 560px; } .page-date { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 28px; opacity: 0.65; } .h2 { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .h3 { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 14px 0 6px; } /* ─── COMPONENTS ─────────────────────────────────── */ .div { height: 1px; background: var(--border); margin: 22px 0; } /* Badges */ .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .badge { font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; } .b-tier { background: #1a1000; color: var(--gold); border: 1px solid var(--gold-d); } .b-cat { background: var(--bg3); color: var(--muted); border: 1px solid var(--border); } .b-safe { background: #3a0808; color: #e57373; border: 1px solid #5a1a1a; } /* Share button injected on term pages */ .term-share-btn { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 20px; padding: 7px 14px; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 11px; font-family: var(--mono); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .term-share-btn:hover { border-color: var(--gold); color: var(--gold); } .term-share-btn svg { flex-shrink: 0; } /* TOC */ /* Glossary A–Z CTA on KinkCodex homepage */ .glossary-cta { display: flex; align-items: center; justify-content: space-between; background: var(--bg1); border: 1px solid rgba(201,168,76,0.4); border-radius: 3px; padding: 12px 16px; text-decoration: none; color: var(--gold); font-size: 13px; font-weight: 500; margin-bottom: 14px; transition: background 0.15s, border-color 0.15s; } .glossary-cta:hover { background: var(--bg2); border-color: var(--gold); } .glossary-cta-arr { font-size: 16px; opacity: 0.6; flex-shrink: 0; } .toc { border: 1px solid var(--border); border-top: 2px solid var(--red); border-radius: 3px; padding: 18px 20px; margin-bottom: 28px; background: var(--bg1); } .toc-lbl { font-size: 10px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .toc ul { list-style: none; } .toc ul.two { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; } .toc li { font-size: 12px; color: var(--muted); padding: 4px 0; border-bottom: 1px solid var(--border-s); } .toc a { color: var(--muted); text-decoration: none; } .toc a:hover { color: var(--text); } /* SSC / RACK box */ .ssc { border: 1px solid var(--border); border-top: 2px solid var(--red); border-radius: 3px; padding: 16px 18px; margin: 22px 0; background: var(--bg1); } .ssc-lbl { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--red-text); margin-bottom: 12px; } .ssc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ssc-item { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px; } .ssc-tag { font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .ssc-txt { font-size: 11px; color: var(--muted); line-height: 1.5; } /* See also */ .sa { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 6px; } .sa-lbl { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } .sa-links { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 25px; } .sa-link { font-size: 11px; color: var(--muted); background: var(--bg2); border: 1px solid var(--border); border-radius: 2px; padding: 5px 12px; text-decoration: none; transition: color 0.1s; } .sa-link:hover { color: var(--text); } /* ─── CALLOUT / PRINCIPLES / PAGE CTA ───────────── */ .callout { border-left: 3px solid var(--gold); background: var(--bg1); border-radius: 0 3px 3px 0; padding: 16px 18px; margin: 22px 0; } .callout p { font-size: 14px; color: var(--muted); line-height: 1.75; margin-bottom: 0; } .callout p + p { margin-top: 10px; } .callout strong { color: var(--text); font-weight: 500; } .principles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 28px; } .principle { background: var(--bg1); border: 1px solid var(--border); border-radius: 3px; padding: 14px 16px; } .principle-label { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .principle-text { font-size: 12px; color: var(--muted); line-height: 1.65; } .page-cta { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #100808, #0a0a0a); border: 1px solid rgba(201,168,76,0.3); border-radius: 3px; padding: 20px 24px; text-decoration: none; margin-top: 28px; position: relative; overflow: hidden; transition: border-color 0.15s; } .page-cta::before { content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 400px; height: 200px; background: radial-gradient(ellipse, rgba(192,57,43,0.10) 0%, transparent 70%); pointer-events: none; } .page-cta:hover { border-color: var(--gold); } .page-cta-label { font-size: 10px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); opacity: 0.6; margin-bottom: 5px; position: relative; } .page-cta-sub { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--gold); line-height: 1.3; position: relative; } .page-cta-arr { font-size: 20px; color: var(--gold); opacity: 0.5; flex-shrink: 0; } /* ─── FAQ SECTION ────────────────────────────────── */ /* Matches .ssc/.sa design language. Uses high-specificity selectors to override .prose h2/h3/p for faq-sections injected inside .prose. */ .faq-section, .prose .faq-section { border: 1px solid var(--border); border-radius: 3px; padding: 16px 18px; margin: 24px 0; background: var(--bg1); } .faq-section h2, .prose .faq-section h2 { font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0 0 14px; padding: 0; border: none; background: none; line-height: 1.3; } .faq-section h3, .prose .faq-section h3 { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text); margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--border); line-height: 1.4; } .faq-section h3:first-of-type, .prose .faq-section h3:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .faq-section p, .prose .faq-section p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; } /* ─── PILLAR PAGE ────────────────────────────────── */ /* Enhanced hero search */ .search-section { margin-bottom: 28px; } .search-section-lbl { font-size: 10px; font-weight: 500; letter-spacing: 6px; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } .hero-search-wrap { position: relative; } .hero-search-input-row { display: flex; align-items: center; gap: 12px; background: var(--bg1); border: 1px solid var(--border); border-radius: 3px; padding: 13px 18px; transition: border-color 0.15s, box-shadow 0.15s; cursor: text; } .hero-search-input-row.focused { border-color: var(--red); box-shadow: 0 0 0 2px rgba(192,57,43,0.12); } .hero-search-input-row svg { flex-shrink: 0; color: var(--dim); transition: color 0.15s; } .hero-search-input-row.focused svg { color: var(--red); } .hero-search-input-row input { -webkit-appearance: none; appearance: none; background: none; border: none; outline: none; color: var(--text); font-family: var(--sans); font-size: 15px; flex: 1; } .hero-search-input-row input::placeholder { color: var(--dim); } .hero-search-input-row input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center; background-size: 12px; } .search-hint-key { font-size: 10px; letter-spacing: 1px; color: var(--dim); flex-shrink: 0; border: 1px solid var(--border-s); border-radius: 2px; padding: 2px 6px; font-family: var(--sans); } .sr-panel-new { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg1); border: 1px solid var(--border); border-top: 2px solid var(--red); border-radius: 0 0 3px 3px; box-shadow: 0 12px 32px rgba(0,0,0,0.7); z-index: 200; display: none; } /* Header panel variant: appended to , JS supplies top/left/width via inline style */ .sr-panel-fixed { position: fixed; top: auto; left: auto; right: auto; } .sr-panel-new.open { display: block; } .sr-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--border-s); } .sr-count { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); } .sr-esc { font-size: 9px; color: var(--dim); border: 1px solid var(--border-s); border-radius: 2px; padding: 1px 5px; font-family: var(--sans); cursor: pointer; } .sr-item-new { display: block; padding: 11px 14px; text-decoration: none; border-bottom: 1px solid var(--border-s); transition: background 0.1s; } .sr-item-new:last-of-type { border-bottom: none; } .sr-item-new:hover, .sr-item-new.active { background: var(--bg2); } .sr-item-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; } .sr-term { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--text); flex: 1; } .sr-cat-badge { font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); white-space: nowrap; flex-shrink: 0; } .sr-arrow { font-size: 12px; color: var(--dim); flex-shrink: 0; } .sr-def { font-size: 11px; color: var(--dim); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sr-panel-footer { padding: 7px 14px; border-top: 1px solid var(--border-s); display: flex; gap: 14px; align-items: center; justify-content: center; } .sr-kbd { font-size: 9px; color: var(--dim); letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px; } .sr-kbd kbd { font-family: var(--sans); font-size: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 2px; padding: 1px 4px; color: var(--muted); } .cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; margin: 18px 0; } .cat-card { background: var(--bg1); padding: 18px 16px; text-decoration: none; display: block; transition: background 0.1s; } .cat-card:hover { background: var(--bg2); } .cat-name { font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .cat-count { font-size: 10px; color: var(--dim); letter-spacing: 1px; } .cat-bar { height: 2px; background: var(--border); border-radius: 1px; margin-top: 8px; } .cat-fill { height: 2px; background: linear-gradient(90deg, var(--red), var(--gold)); border-radius: 1px; } /* ─── CATEGORY PAGE ──────────────────────────────── */ .term-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; margin: 12px 0; } .term-pill { background: var(--bg1); padding: 10px 14px; text-decoration: none; display: block; transition: background 0.1s; } .term-pill:hover { background: var(--bg2); } .term-name { font-size: 12px; color: var(--muted); margin-bottom: 2px; } .term-tier { font-size: 9px; color: var(--dim); letter-spacing: 1px; text-transform: uppercase; } /* ─── CLUSTER PAGE (T1 / T2 / T3) ───────────────── */ .cluster-layout { display: grid; grid-template-columns: 1fr 188px; gap: 28px; } /* Sidebar */ .sb-sticky { position: sticky; top: var(--sticky-top); align-self: start; } .sb-box { border: 1px solid var(--border); border-radius: 3px; padding: 14px 16px; background: var(--bg1); margin-bottom: 12px; } .sb-lbl { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .sb-link { font-size: 12px; color: var(--muted); display: block; padding: 5px 0; border-bottom: 1px solid var(--border-s); text-decoration: none; transition: color 0.1s; } .sb-link:last-child { border-bottom: none; } .sb-link:hover { color: var(--text); } /* Quick safety box */ .qs { background: var(--bg0); border: 1px solid var(--red); border-radius: 3px; padding: 12px 14px; margin-bottom: 12px; } .qs-lbl { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--red-text); margin-bottom: 8px; } .qs-item { font-size: 11px; color: var(--muted); padding: 4px 0; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; gap: 6px; } .qs-item:last-child { border-bottom: none; } .qs-dot { width: 4px; height: 4px; background: var(--red); border-radius: 50%; flex-shrink: 0; } /* ─── CRITICAL NOTE ────────────────────────────────── High-prominence legal / safety callout for pages where ambiguity carries real risk (age play, findom, breath play). Red OUTLINE, not fill: outline means caution, solid red fill is reserved for .qcta. */ .cnote { border: 1px solid var(--red); background: var(--red-dim); border-radius: 3px; padding: 15px 17px; margin: 0 0 22px; } .cnote-lbl { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--red-text); margin-bottom: 9px; } .cnote p { font-size: 13px; color: var(--text); line-height: 1.7; margin: 0 0 9px; } .cnote p:last-child { margin-bottom: 0; } .cnote a { color: var(--red-text); text-decoration: underline; } /* ─── QUIZ CTA ─────────────────────────────────────── The ONLY solid-red-filled block on a term page. Red outline elsewhere (.qs, .cnote) means caution; solid red fill means "this is the action". White on --red = 5.44:1, white@0.92 = 4.84:1. Both clear AA. */ .qcta { display: block; background: var(--red); border: 1px solid var(--red); border-radius: 3px; padding: 14px 15px 12px; margin-bottom: 12px; text-decoration: none; transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .qcta:hover { background: #d1432f; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(192, 57, 43, 0.28); } .qcta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .qcta-lbl { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); margin-bottom: 7px; } .qcta-h { font-family: var(--serif); font-size: 16px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 6px; } .qcta-sub { font-size: 11px; color: rgba(255, 255, 255, 0.92); line-height: 1.5; margin-bottom: 11px; } .qcta-go { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 500; color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: 9px; } .qcta-arr { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .qcta:hover .qcta-arr { transform: translateX(3px); } /* ─── IN-CONTENT QUIZ CTAs ─────────────────────────── .qbanner sits mid-article at a section break; .qend closes the page. Both use a dark editorial container with a SOLID RED BUTTON inside: in the narrow sidebar the whole block is the click target so the block is red, here the button is the click target so the button is red. The rule the reader learns is constant, red is the thing you click. */ .qbanner, .qend { display: flex; align-items: center; justify-content: space-between; gap: 22px; background: linear-gradient(135deg, #140a09, var(--bg1)); border: 1px solid var(--border); border-radius: 3px; padding: 22px 24px; position: relative; overflow: hidden; text-decoration: none; transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .qbanner { margin: 30px 0; } .qend { margin: 26px 0 0; } .qbanner::before, .qend::before { content: ''; position: absolute; top: -70px; left: 50%; width: 420px; height: 220px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(192,57,43,0.13) 0%, transparent 70%); pointer-events: none; } .qbanner:hover, .qend:hover { border-color: var(--red); } .qbanner-txt, .qend-txt { position: relative; min-width: 0; } .qbanner-lbl, .qend-lbl { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; } .qbanner-h, .qend-h { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 6px; } .qbanner-sub, .qend-sub { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; } /* The button. Solid red, white text = 5.44:1. */ .qbanner-btn, .qend-btn { flex-shrink: 0; position: relative; display: inline-flex; align-items: center; gap: 9px; background: var(--red); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 13px 20px; border-radius: 3px; white-space: nowrap; transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .qbanner:hover .qbanner-btn, .qend:hover .qend-btn { background: #d1432f; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(192,57,43,0.3); } .qbanner:focus-visible, .qend:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .qbanner-btn span:last-child, .qend-btn span:last-child { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .qbanner:hover .qbanner-btn span:last-child, .qend:hover .qend-btn span:last-child { transform: translateX(3px); } /* Scroll-driven reveal for the mid-article banner only. Progressive enhancement: browsers without view() timelines just show it. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @keyframes qbannerIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .qbanner { animation: qbannerIn linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; } } } @media (max-width: 640px) { .qbanner, .qend { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; } .qbanner-btn, .qend-btn { justify-content: center; } .qbanner-h, .qend-h { font-size: 17px; } } /* Content prose */ .prose p { font-size: 14px; color: var(--muted); line-height: 1.75; margin-bottom: 14px; } .prose strong { color: var(--text); font-weight: 500; } .prose em { font-style: italic; color: var(--text); } /* Links — red, never browser-default blue */ .prose a { color: var(--red-text); text-decoration: none; border-bottom: 1px solid rgba(192,57,43,0.3); transition: color 0.1s, border-color 0.1s; } .prose a:hover { color: var(--red-d); border-bottom-color: var(--red); } /* Headings inside prose */ .prose h2 { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--text); margin: 28px 0 10px; line-height: 1.3; } .prose h3 { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--text); margin: 20px 0 8px; } .prose h4 { font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin: 16px 0 6px; } /* Lists */ .prose ul, .prose ol { margin: 0 0 14px 20px; } .prose li { font-size: 14px; color: var(--muted); line-height: 1.75; margin-bottom: 4px; } .prose li strong { color: var(--text); } .prose li a { color: var(--red-text); text-decoration: none; border-bottom: 1px solid rgba(192,57,43,0.3); } .prose li a:hover { color: var(--red-d); } /* Blockquotes (quick definitions) */ .prose blockquote { border-left: 3px solid var(--red); background: var(--bg1); padding: 12px 16px; margin: 0 0 16px; border-radius: 0 3px 3px 0; } .prose blockquote p { color: var(--text); font-style: italic; margin-bottom: 0; } /* Horizontal rules */ .prose hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; } /* Comparison tables — always wrapped in .tbl-wrap so wide tables scroll inside their own box instead of forcing the page body sideways. */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; border: 1px solid var(--border); border-top: 2px solid var(--gold); border-radius: 3px; background: var(--bg1); } .prose .tbl { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 13px; } .prose .tbl th { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } .prose .tbl td { color: var(--muted); line-height: 1.55; padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .prose .tbl tbody tr:last-child td { border-bottom: none; } .prose .tbl tbody tr:hover td { background: var(--bg2); } .prose .tbl td:first-child { color: var(--text); font-weight: 500; } /* ─── HOME: SECTION HEAD ──────────────────────────── */ .home-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .home-sec-all { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); text-decoration: none; transition: color 0.1s; white-space: nowrap; } .home-sec-all:hover { color: var(--muted); } /* ─── HOME: RECENTLY ADDED ────────────────────────── */ .new-terms-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); } .new-term-item { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-s); text-decoration: none; color: inherit; transition: background 0.1s; } .new-term-item:hover .new-term-name { color: var(--red); } .new-term-dot { color: var(--gold); font-size: 9px; flex-shrink: 0; margin-top: 1px; } .new-term-name { font-size: 13px; color: var(--text); font-weight: 500; transition: color 0.1s; flex: 1; min-width: 0; } .new-term-cat { font-size: 10px; letter-spacing: 0.5px; color: var(--dim); text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .new-term-date { font-size: 10px; color: var(--dim); opacity: 0.6; white-space: nowrap; flex-shrink: 0; min-width: 40px; text-align: right; } /* ─── HOME: BLOG PREVIEW ──────────────────────────── */ .home-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--border); } .home-post-card { background: var(--bg0); padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 0; text-decoration: none; color: inherit; transition: background 0.15s; } .home-post-card:hover { background: var(--bg1); } .home-post-eyebrow { font-size: 9px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; } .home-post-title { font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 9px; transition: color 0.1s; } .home-post-card:hover .home-post-title { color: var(--red); } .home-post-excerpt { font-size: 12px; color: var(--muted); line-height: 1.65; flex: 1; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .home-post-meta { font-size: 10px; color: var(--dim); letter-spacing: 0.3px; display: flex; align-items: center; gap: 8px; } .home-post-meta .sep { color: var(--border); } /* ─── CODEX BLOG ROWS ────────────────────────────── */ .kc-blog-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); margin-top: 4px; } .kc-blog-row { padding: 20px 24px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; text-decoration: none; color: inherit; transition: background 0.15s; } .kc-blog-row:last-child { border-bottom: none; } .kc-blog-row:hover { background: var(--bg1); } .kc-blog-tag { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; } .kc-blog-title { font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 5px; transition: color 0.1s; } .kc-blog-row:hover .kc-blog-title { color: var(--red); } .kc-blog-excerpt { font-size: 12px; color: var(--muted); line-height: 1.6; } .kc-blog-meta { font-size: 10px; color: var(--dim); white-space: nowrap; padding-top: 3px; } /* ─── FOOTER ─────────────────────────────────────── */ .site-footer { background: var(--bg0); border-top: 1px solid var(--border); padding: 28px 0 0; } /* Footer content — full width, padded to match page-body */ .ft-top, .ft-cta, .ft-disclaimer, .ft-copy { max-width: 960px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; } .ft-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-s); } .ft-logo { font-family: var(--serif); font-size: 17px; font-weight: 900; color: var(--text); letter-spacing: -0.5px; text-decoration: none; } .ft-logo em { color: var(--red-text); font-style: italic; } .ft-tagline { font-size: 11px; color: var(--dim); margin-top: 4px; line-height: 1.5; max-width: 260px; } .ft-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; } .ft-link { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); text-decoration: none; transition: color 0.1s; } .ft-link:hover { color: var(--muted); } .ft-cta { background: linear-gradient(135deg, #100808, #0a0a0a); border: 1px solid rgba(201,168,76,0.3); border-radius: 3px; padding: 20px 22px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-decoration: none; transition: border-color 0.15s; position: relative; overflow: hidden; } .ft-cta::before { content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 400px; height: 200px; background: radial-gradient(ellipse, rgba(192,57,43,0.12) 0%, transparent 70%); pointer-events: none; } .ft-cta:hover { border-color: var(--gold); } .ft-cta-lbl { font-size: 10px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); opacity: 0.6; margin-bottom: 5px; position: relative; } .ft-cta-text { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--gold); line-height: 1.3; position: relative; } .ft-cta-arr { font-size: 20px; color: var(--gold); opacity: 0.5; flex-shrink: 0; } .ft-disclaimer { background: var(--bg1); border: 1px solid var(--border); border-top: 2px solid var(--border-s); border-radius: 3px; padding: 16px 20px; margin-bottom: 20px; } .ft-disclaimer-lbl { font-size: 10px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; } .ft-disclaimer p { font-size: 11px; color: var(--dim); line-height: 1.65; margin-bottom: 8px; } .ft-disclaimer p:last-child { margin-bottom: 0; } .ft-copy { font-size: 11px; color: var(--dim); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-bottom: 24px; } /* ─── GLOSSARY CARD GRID ─────────────────────────── */ .gloss-topbar { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; flex-wrap: wrap; } .gloss-search-wrap { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: var(--bg1); border: 1px solid var(--border); border-radius: 8px; padding: 9px 14px; transition: border-color 0.15s; } .gloss-search-wrap:focus-within { border-color: var(--red); } .gloss-search-wrap svg { flex-shrink: 0; color: var(--muted); } .gloss-search-input { background: transparent; border: none; outline: none; font-family: var(--sans); font-size: 13px; color: var(--text); width: 100%; } .gloss-search-input::placeholder { color: var(--muted); } .gloss-sort { font-family: var(--sans); font-size: 12px; color: var(--muted); background: var(--bg1); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; user-select: none; } .gloss-sort:hover { color: var(--text); border-color: var(--red); } .gloss-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .gloss-filter { font-family: var(--sans); font-size: 11px; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .gloss-filter:hover { color: var(--text); border-color: var(--dim); } .gloss-filter.active { background: var(--red); color: #fff; border-color: var(--red); } .gloss-filter.tier-active { background: var(--bg2); color: var(--gold); border-color: var(--gold-d); } .gloss-meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; } .gloss-count { font-family: var(--sans); font-size: 12px; color: var(--muted); } .gloss-count strong { color: var(--text); font-weight: 500; } .gloss-clear { font-family: var(--sans); font-size: 11px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; display: none; } .gloss-clear.visible { display: block; } .gloss-clear:hover { color: var(--text); } .gloss-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .gloss-card { display: block; padding: 14px 16px; background: var(--bg1); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; transition: border-color 0.15s, background 0.15s; position: relative; } .gloss-card:hover { border-color: var(--red); background: var(--bg2); } .gloss-card-name { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; line-height: 1.3; } .gloss-card-def { font-family: var(--sans); font-size: 11px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; min-height: 52px; } .gloss-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .gloss-card-cat { font-family: var(--sans); font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gloss-tier { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; } .gloss-tier.t1 { background: rgba(201,168,76,0.15); color: var(--gold); border: 1px solid rgba(201,168,76,0.25); } .gloss-tier.t2 { background: var(--bg2); color: var(--muted); border: 1px solid var(--border-s); } .gloss-tier.t3 { background: transparent; color: var(--dim); border: 1px solid var(--border-s); } .gloss-empty { grid-column: 1 / -1; text-align: center; padding: 48px 24px; color: var(--muted); font-family: var(--sans); font-size: 14px; } .gloss-empty strong { display: block; font-size: 16px; color: var(--text); font-weight: 500; margin-bottom: 6px; } /* ─── RESPONSIVE ─────────────────────────────────── */ @media (max-width: 640px) { :root { --topbar-h: 69px; } .topbar { padding: 16px 18px; } .search-bar { padding: 10px 16px; } .page-hero { padding: 32px 20px 0; } .page-body { padding: 20px 20px 48px; } .page-hero + main > .page-body { padding-top: 16px; } .cluster-layout { grid-template-columns: 1fr; } /* The