/* fcc-dna — site-specific Field Bulletin layer. * * Per-site accent: chromosome violet (the iconic Giemsa-stain banding). * dna-canvas.js's base colors (A=red, T=amber, G=emerald, C=blue) are * domain encoding — left untouched. */ /* !important required because /shared/fcc-theme-boot.js writes --accent as inline-style on , beating stylesheet specificity. */ :root, html[data-mode="dark"] { --accent: #b78dd9 !important; --accent-2: #d0b0e8 !important; --accent-wash: color-mix(in srgb, #b78dd9 12%, transparent) !important; --accent-ink: #0a0b0d !important; } html[data-mode="light"] { --accent: #7a4ea0 !important; --accent-2: #936fb3 !important; --accent-wash: color-mix(in srgb, #7a4ea0 8%, transparent) !important; --accent-ink: #ffffff !important; } /* ── Hero — double helix ────────────────────────────────────── */ .hero-card { padding: 1.75rem 1.5rem 1.5rem; } .hero-lab { display: grid; gap: 1.25rem; grid-template-columns: minmax(260px, 480px) 1fr; align-items: start; } @media (max-width: 720px) { .hero-lab { grid-template-columns: 1fr; } } .hero-canvas { width: 100%; height: 480px; display: block; background: var(--bg); border-top: 1px solid var(--border); border-radius: 0; } .hero-controls { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.25rem; } .hero-hint { margin: 0; font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--ink-2, var(--dim)); line-height: 1.6; } .hero-readouts { display: grid; gap: 0.55rem; grid-template-columns: repeat(2, 1fr); } .readout { padding: 0.6rem 0.85rem; background: var(--panel-2); border-top: 1px solid var(--border); } .readout-label { display: block; font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.35rem; } .readout-value { display: block; font-family: var(--mono); font-size: 0.95rem; font-weight: 500; color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -0.01em; } .legend { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.25rem; font: 500 0.74rem var(--mono); color: var(--ink-3, var(--dim)); } .legend-item { display: inline-flex; align-items: center; gap: 0.4rem; } .legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* ── Codon Translator ───────────────────────────────────────── */ .codon-layout { display: flex; flex-direction: column; gap: 0.85rem; } .tab-intro { margin: 0; font-family: var(--serif); font-style: italic; font-size: 0.88rem; color: var(--ink-2, var(--dim)); line-height: 1.6; max-width: 640px; } .codon-controls { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: end; } .codon-controls .control-group { flex: 1; min-width: 240px; } .frame-buttons { display: flex; gap: 0.3rem; } .frame-btn { padding: 0.4rem 0.75rem !important; font-size: 0.78rem !important; } .frame-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .codon-output { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .codon-cell { display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0.6rem; background: var(--panel-2); border-top: 1px solid var(--border); min-width: 64px; } .codon-bases { font: 500 0.85rem 'JetBrains Mono', ui-monospace, monospace; color: var(--text); letter-spacing: 0.06em; } .codon-aa { font: 600 1.2rem var(--serif); color: var(--accent); margin-top: 0.25rem; } .codon-aa-name { font: 500 0.66rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .codon-cell.aa-start { border-top-color: #7dd3a4; } .codon-cell.aa-start .codon-aa { color: #7dd3a4; } .codon-cell.aa-stop { border-top-color: #fb7185; } .codon-cell.aa-stop .codon-aa { color: #fb7185; } .protein-output { margin-top: 0.85rem; padding: 0.75rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); } .protein-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-bottom: 0.4rem; } .protein-sequence { font: 500 1rem 'JetBrains Mono', ui-monospace, monospace; color: var(--text); letter-spacing: 0.06em; word-break: break-all; } .protein-stats { margin-top: 0.4rem; font: 500 0.78rem var(--mono); color: var(--ink-3, var(--dim)); font-feature-settings: "tnum" 1; } /* ── Base Pairing ───────────────────────────────────────────── */ .pairing-layout { display: flex; flex-direction: column; gap: 0.85rem; } .pairing-output { margin-top: 0.5rem; padding: 0.85rem 1rem; background: var(--panel-2); border-top: 1px solid var(--border); overflow-x: auto; } .pairing-row { display: flex; gap: 0.1rem; align-items: center; font-family: var(--mono); margin-bottom: 0.3rem; } .pairing-row-label { flex: 0 0 110px; font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); padding-right: 0.5rem; } .pairing-base { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.7em; font-size: 0.95rem; font-weight: 500; } .pairing-base.A { color: #ef4444; } .pairing-base.T { color: #fbbf24; } .pairing-base.G { color: #10b981; } .pairing-base.C { color: #3b82f6; } .pairing-bond { font-family: var(--mono); color: var(--ink-3, var(--dim)); font-size: 0.85rem; } .pairing-stats { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .pairing-stat { padding: 0.6rem 0.8rem; background: var(--panel-2); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.25rem; } .pairing-stat-label { font: 500 0.66rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .pairing-stat-value { font: 500 0.95rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1, "zero" 1; } /* ── Genetic Diseases ───────────────────────────────────────── */ .disease-layout { display: flex; flex-direction: column; gap: 0.85rem; } .disease-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .disease-tile { text-align: left; padding: 0.7rem 0.85rem; background: var(--panel-2); border: 0; border-top: 1px solid var(--border); color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; transition: border-top-color var(--dur-1) var(--ease-in-out); } .disease-tile:hover { border-top-color: var(--accent); } .disease-tile.active { border-top-color: var(--accent); background: var(--accent-wash); } .disease-tile-name { font: 600 0.95rem var(--serif); color: var(--text); line-height: 1.25; } .disease-tile-gene { font: 500 0.78rem var(--mono); color: var(--accent); font-feature-settings: "tnum" 1; } .disease-tile-inh { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3, var(--dim)); } .disease-detail { margin-top: 0.5rem; padding: 1rem 1.1rem; background: var(--bg); border-top: 1px solid var(--border); } .disease-detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .disease-detail-name { margin: 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--text); } .disease-detail-inh { font: 500 0.7rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .disease-detail p { margin: 0.35rem 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink-2, var(--text)); } .disease-detail strong { font: 500 0.66rem var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3, var(--dim)); margin-right: 0.4rem; } @media (max-width: 720px) { .hero-canvas { height: 380px; } .hero-readouts { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .hero-canvas { height: 320px; } .codon-cell { min-width: 56px; padding: 0.4rem 0.45rem; } }