/**
* ============================================================================
* JAWNLAM.CLOUD STYLE GUIDE v1.0
* ============================================================================
* A retro terminal-inspired design system with three theme variants.
*
* Usage:
* 1. Link this stylesheet:
* 2. Add Google Fonts:
*
* 3. Set initial theme on : data-theme="green|amber|obsidian"
* 4. Use provided component classes in your HTML
*
* Design Philosophy: "The Lab Bench"
* - Retro terminal aesthetics (command prompts, monospace fonts)
* - Laboratory notebook organization (categories, color coding)
* - Consistent experience across desktop and mobile
* ============================================================================
*/
/* ============================================================================
THEME VARIABLES
============================================================================ */
:root[data-theme="green"] {
--terminal-bg: #000000;
--terminal-fg: #00ff41;
--terminal-accent: #00cc33;
--terminal-dim: #008822;
--status-live: #00ff41;
--status-wip: #ffff00;
--status-soon: #666666;
--border-color: #00ff41;
--shadow-glow: rgba(0, 255, 65, 0.3);
--hover-bg-light: #000000;
--hover-bg-dark: rgba(0, 255, 65, 0.2);
--input-bg: rgba(0, 255, 65, 0.05);
}
:root[data-theme="amber"] {
--terminal-bg: #000000;
--terminal-fg: #ffb000;
--terminal-accent: #ff9500;
--terminal-dim: #cc7700;
--status-live: #ffb000;
--status-wip: #ffff00;
--status-soon: #666666;
--border-color: #ffb000;
--shadow-glow: rgba(255, 176, 0, 0.3);
--hover-bg-light: #000000;
--hover-bg-dark: rgba(255, 176, 0, 0.2);
--input-bg: rgba(255, 176, 0, 0.05);
}
:root[data-theme="obsidian"] {
--terminal-bg: #000000;
--terminal-bg-alt: #1f1f1f;
--terminal-fg: #FFFFFF;
--terminal-accent: #8a39e7;
--terminal-dim: #777777;
--status-live: #39ff14;
--status-wip: #ffb000;
--status-soon: #666666;
--border-color: #888888;
--border-hover: #8a39e7;
--shadow-glow: rgba(138, 57, 231, 0.3);
--hover-bg-light: #000000;
--hover-bg-dark: rgba(138, 57, 231, 0.2);
--input-bg: rgba(138, 57, 231, 0.05);
/* Category colors from Obsidian H1-H6 system */
--cat-all-bg: #ffffff;
--cat-all-fg: #000000;
--cat-all-bar: #dadada;
--cat-critical-bg: #e0e0e0;
--cat-critical-fg: #000000;
--cat-critical-bar: #A020F0;
--cat-decision-bg: #b8b8b8;
--cat-decision-fg: #000000;
--cat-decision-bar: #0053FF;
--cat-power-bg: #404040;
--cat-power-fg: #ffffff;
--cat-power-bar: #00FF00;
--cat-experiments-bg: #111111;
--cat-experiments-fg: #b3b3b3;
--cat-experiments-bar: #FFC72C;
--cat-utilities-bg: #0c0c0c;
--cat-utilities-fg: #666666;
--cat-utilities-bar: #FF1493;
}
:root[data-theme="classic"] {
--terminal-bg: #f9fafb;
--terminal-bg-alt: #ffffff;
--terminal-fg: #1f2937;
--terminal-accent: #3b82f6;
--terminal-dim: #6b7280;
--status-live: #10b981;
--status-wip: #f59e0b;
--status-soon: #9ca3af;
--border-color: #d1d5db;
--border-hover: #3b82f6;
--shadow-glow: rgba(59, 130, 246, 0.3);
--hover-bg-light: rgba(59, 130, 246, 0.1);
--hover-bg-dark: rgba(59, 130, 246, 0.2);
--input-bg: rgba(59, 130, 246, 0.05);
}
/* ============================================================================
BASE STYLES
============================================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
overflow-x: hidden;
}
body {
font-family: 'JetBrains Mono', 'Courier New', monospace;
background: var(--terminal-bg);
color: var(--terminal-fg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Obsidian theme: Use Ubuntu Sans Mono font and white text */
[data-theme="obsidian"] body {
font-family: 'Ubuntu Sans Mono', monospace;
color: #FFFFFF;
}
/* ============================================================================
TYPOGRAPHY
============================================================================ */
h1, h2, h3, h4, h5, h6 {
color: var(--terminal-accent);
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }
p {
margin-bottom: 1rem;
color: var(--terminal-dim);
}
/* Obsidian theme: All text white */
[data-theme="obsidian"] h1,
[data-theme="obsidian"] h2,
[data-theme="obsidian"] h3,
[data-theme="obsidian"] h4,
[data-theme="obsidian"] h5,
[data-theme="obsidian"] h6 {
color: #FFFFFF;
}
[data-theme="obsidian"] p {
color: #FFFFFF;
}
a {
color: var(--terminal-accent);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(--terminal-fg);
text-decoration: underline;
}
code {
background: var(--hover-bg-light);
padding: 0.2rem 0.4rem;
border-radius: 3px;
color: var(--terminal-accent);
font-size: 0.9em;
font-family: inherit;
}
pre {
background: var(--hover-bg-light);
padding: 1rem;
border-radius: 3px;
overflow-x: auto;
border: 1px solid var(--border-color);
margin-bottom: 1rem;
}
pre code {
background: none;
padding: 0;
}
/* ============================================================================
ANIMATIONS
============================================================================ */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes flicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.95; }
}
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
.fade-in {
animation: fadeIn 0.5s ease-in forwards;
}
.slide-up {
animation: slideUp 0.5s ease-out forwards;
}
.cursor-blink {
animation: blink 1.5s step-end infinite;
}
[data-theme="obsidian"] .cursor-blink {
color: #8a39e7;
}
[data-theme="classic"] .cursor-blink {
color: #3b82f6;
}
.theme-switching {
animation: flicker 0.3s ease-in-out;
}
/* ============================================================================
BUTTONS
============================================================================ */
.jl-btn {
background: transparent;
border: 1px solid var(--border-color);
color: var(--terminal-fg);
padding: 0.5rem 1rem;
cursor: pointer;
font-family: inherit;
font-size: 0.95rem;
transition: all 0.2s;
border-radius: 3px;
text-decoration: none;
display: inline-block;
}
.jl-btn:hover {
background: var(--terminal-accent);
color: var(--terminal-bg);
box-shadow: 0 0 10px var(--shadow-glow);
}
.jl-btn:active {
transform: scale(0.98);
}
.jl-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.jl-btn-primary {
background: var(--terminal-accent);
color: var(--terminal-bg);
}
.jl-btn-primary:hover {
background: var(--terminal-fg);
border-color: var(--terminal-fg);
}
.jl-btn-small {
padding: 0.3rem 0.6rem;
font-size: 0.85rem;
}
.jl-btn-large {
padding: 0.75rem 1.5rem;
font-size: 1.1rem;
}
/* ============================================================================
FORMS & INPUTS
============================================================================ */
.jl-input,
.jl-textarea,
.jl-select {
background: var(--input-bg);
border: 1px solid var(--border-color);
color: var(--terminal-fg);
padding: 0.5rem 0.75rem;
font-family: inherit;
font-size: 1rem;
border-radius: 3px;
transition: all 0.2s;
width: 100%;
}
.jl-input:focus,
.jl-textarea:focus,
.jl-select:focus {
outline: none;
border-color: var(--terminal-accent);
box-shadow: 0 0 0 2px var(--hover-bg-light);
}
.jl-textarea {
resize: vertical;
min-height: 100px;
}
.jl-label {
display: block;
color: var(--terminal-accent);
margin-bottom: 0.5rem;
font-weight: 500;
}
.jl-form-group {
margin-bottom: 1.5rem;
}
.jl-checkbox,
.jl-radio {
accent-color: var(--terminal-accent);
width: 1.2rem;
height: 1.2rem;
cursor: pointer;
}
/* ============================================================================
CARDS
============================================================================ */
.jl-card {
background: var(--terminal-bg);
border: 3px dashed var(--border-color);
border-radius: 8px;
padding: 1.5rem;
transition: border-color 0.2s ease-in-out, border-style 0.2s ease-in-out;
}
/* Hover effect only on devices with mouse */
@media (hover: hover) {
.jl-card:hover {
border-style: solid;
border-color: var(--terminal-accent);
}
[data-theme="green"] .jl-card:hover {
border-color: #ffb000; /* Amber */
}
[data-theme="amber"] .jl-card:hover {
border-color: #00ff41; /* Green */
}
[data-theme="obsidian"] .jl-card:hover {
border-color: var(--border-hover);
}
[data-theme="classic"] .jl-card:hover {
border-color: var(--border-hover);
}
}
.jl-card-solid {
border-style: solid;
border-width: 1px;
}
.jl-card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.jl-card-title {
font-size: 1.25rem;
color: var(--terminal-accent);
font-weight: 600;
margin: 0;
}
.jl-card-body {
color: var(--terminal-dim);
}
[data-theme="obsidian"] .jl-card-body {
color: #FFFFFF;
}
.jl-card-footer {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
/* ============================================================================
STATUS BADGES
============================================================================ */
.jl-badge {
font-size: 0.9rem;
padding: 0.3rem 0.8rem;
border-radius: 3px;
font-weight: 500;
display: inline-block;
}
.jl-badge-live {
color: var(--status-live);
border: 1px solid var(--status-live);
}
.jl-badge-live::before {
content: '✓ ';
}
.jl-badge-wip {
color: var(--status-wip);
border: 1px solid var(--status-wip);
}
.jl-badge-wip::before {
content: '⚠ ';
}
.jl-badge-soon {
color: var(--status-soon);
border: 1px solid var(--status-soon);
}
.jl-badge-soon::before {
content: '◌ ';
}
.jl-badge-info {
color: var(--terminal-accent);
border: 1px solid var(--terminal-accent);
}
/* ============================================================================
HEADERS & SECTIONS
============================================================================ */
.jl-header {
background: var(--terminal-bg);
border-bottom: 2px solid var(--border-color);
padding: 0.75rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px var(--shadow-glow);
}
[data-theme="obsidian"] .jl-header {
background: #000000;
box-shadow: none;
}
.jl-header-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.jl-prompt {
font-size: 1.1rem;
color: var(--terminal-accent);
font-weight: 500;
}
.jl-section {
padding: 2rem;
margin-bottom: 2rem;
}
.jl-section-title {
color: var(--terminal-accent);
font-size: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-color);
}
/* ============================================================================
GRIDS & LAYOUTS
============================================================================ */
.jl-grid {
display: grid;
gap: 1.5rem;
}
.jl-grid-2 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.jl-grid-3 {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.jl-grid-4 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.jl-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.jl-container-narrow {
max-width: 800px;
}
.jl-flex {
display: flex;
gap: 1rem;
}
.jl-flex-center {
justify-content: center;
align-items: center;
}
.jl-flex-between {
justify-content: space-between;
align-items: center;
}
.jl-flex-column {
flex-direction: column;
}
/* ============================================================================
TABS
============================================================================ */
.jl-tab-bar {
display: flex;
background: var(--terminal-bg);
border-bottom: 2px solid var(--border-color);
}
[data-theme="obsidian"] .jl-tab-bar {
background: var(--terminal-bg-alt);
}
.jl-tab {
padding: 1rem 1.5rem;
background: transparent;
border: none;
color: var(--terminal-dim);
cursor: pointer;
border-right: 1px solid var(--terminal-dim);
font-family: inherit;
font-size: 1rem;
transition: all 0.2s;
}
.jl-tab:hover {
color: var(--terminal-fg);
background: var(--hover-bg-light);
}
.jl-tab.active {
background: var(--hover-bg-light);
color: var(--terminal-accent);
border-bottom: 2px solid var(--terminal-accent);
margin-bottom: -2px;
font-weight: 500;
}
[data-theme="obsidian"] .jl-tab.active {
background: var(--terminal-bg);
color: var(--terminal-fg);
}
/* ============================================================================
LISTS
============================================================================ */
.jl-list {
list-style: none;
padding-left: 0;
}
.jl-list-item {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.5rem;
color: var(--terminal-dim);
}
.jl-list-item::before {
content: '>';
position: absolute;
left: 0;
color: var(--terminal-accent);
font-weight: 600;
}
[data-theme="obsidian"] .jl-list-item {
color: #FFFFFF;
}
/* ============================================================================
TABLES
============================================================================ */
.jl-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2rem;
}
.jl-table th,
.jl-table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.jl-table th {
color: var(--terminal-accent);
font-weight: 600;
background: var(--hover-bg-light);
}
.jl-table tr:hover {
background: var(--hover-bg-light);
}
/* ============================================================================
MODALS & OVERLAYS
============================================================================ */
.jl-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.jl-modal {
background: var(--terminal-bg);
border: 2px solid var(--border-color);
border-radius: 8px;
padding: 2rem;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 10px 40px var(--shadow-glow);
}
.jl-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
}
.jl-modal-title {
color: var(--terminal-accent);
font-size: 1.5rem;
margin: 0;
}
.jl-modal-close {
background: transparent;
border: none;
color: var(--terminal-fg);
font-size: 1.5rem;
cursor: pointer;
padding: 0;
line-height: 1;
}
.jl-modal-close:hover {
color: var(--terminal-accent);
}
/* ============================================================================
ALERTS & NOTIFICATIONS
============================================================================ */
.jl-alert {
padding: 1rem 1.5rem;
border-radius: 3px;
margin-bottom: 1rem;
border-left: 4px solid;
}
.jl-alert-info {
background: var(--hover-bg-light);
border-color: var(--terminal-accent);
color: var(--terminal-fg);
}
.jl-alert-success {
background: rgba(57, 255, 20, 0.1);
border-color: var(--status-live);
color: var(--status-live);
}
.jl-alert-warning {
background: rgba(255, 255, 0, 0.1);
border-color: var(--status-wip);
color: var(--status-wip);
}
.jl-alert-error {
background: rgba(255, 0, 0, 0.1);
border-color: #ff0000;
color: #ff6666;
}
/* ============================================================================
UTILITY CLASSES
============================================================================ */
/* Spacing */
.jl-mt-1 { margin-top: 0.5rem; }
.jl-mt-2 { margin-top: 1rem; }
.jl-mt-3 { margin-top: 1.5rem; }
.jl-mt-4 { margin-top: 2rem; }
.jl-mb-1 { margin-bottom: 0.5rem; }
.jl-mb-2 { margin-bottom: 1rem; }
.jl-mb-3 { margin-bottom: 1.5rem; }
.jl-mb-4 { margin-bottom: 2rem; }
.jl-p-1 { padding: 0.5rem; }
.jl-p-2 { padding: 1rem; }
.jl-p-3 { padding: 1.5rem; }
.jl-p-4 { padding: 2rem; }
/* Text alignment */
.jl-text-left { text-align: left; }
.jl-text-center { text-align: center; }
.jl-text-right { text-align: right; }
/* Text colors */
.jl-text-primary { color: var(--terminal-fg); }
.jl-text-accent { color: var(--terminal-accent); }
.jl-text-dim { color: var(--terminal-dim); }
/* Display */
.jl-block { display: block; }
.jl-inline { display: inline; }
.jl-inline-block { display: inline-block; }
.jl-hidden { display: none; }
/* Width */
.jl-w-full { width: 100%; }
.jl-w-auto { width: auto; }
/* ============================================================================
MOBILE RESPONSIVE
============================================================================ */
@media (max-width: 768px) {
html {
font-size: 14px;
}
.jl-section {
padding: 1rem;
}
.jl-header {
padding: 0.75rem 1rem;
}
.jl-grid-2,
.jl-grid-3,
.jl-grid-4 {
grid-template-columns: 1fr;
}
.jl-modal {
padding: 1.5rem;
}
.jl-btn {
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
}
.jl-tab {
padding: 1rem;
font-size: 0.85rem;
}
}
/* ============================================================================
THEME-SPECIFIC OVERRIDES
============================================================================ */
/* Obsidian theme: Alternate backgrounds */
[data-theme="obsidian"] .jl-section {
background: var(--terminal-bg);
}
[data-theme="obsidian"] .jl-card {
background: var(--terminal-bg);
}
/* ============================================================================
END OF JAWNLAM.CLOUD STYLE GUIDE
============================================================================ */