/* code.domainless.fun — editor + portal styles. Brand voice: pastel mint green, mirroring the way games reads as purple and music as pastel blue. Surfaces carry a subtle green undertone so the site feels coherent before any color is even painted on. The user's chosen theme cookie still overrides --accent for interactive surfaces; --brand stays locked to pastel mint so code's identity stripes survive any theme. Functional editor zones (.pane-body / .preview / .console) are tagged .dl-no-theme upstream, so they snap back to neutral defaults regardless of theme — the editor stays readable. The --neon / --neon-2 / --code-bg vars are kept available for those zones (caret, selection, console severity colors) but no longer carry the site's brand voice. */ :root { --brand: #a4d4b6; --brand-dim: rgba(164, 212, 182, 0.18); --brand-glow: rgba(164, 212, 182, 0.1); --bg: #1a1820; --panel: #0e1a14; --panel-2: #15241c; --line: #1f3329; --line-2: #2a4536; /* Functional palette retained for editor zones — caret, selection, console severity. Not used for site-level branding any more. */ --neon: #c8a86e; --neon-2: #5cf2ff; --gold: #ffe24a; --green: #5fc89a; --red: #ff5c5c; --text: #d8e6dc; --dim: #88a297; --code-bg: #0a1410; /* Theme-following aliases — chrome theme propagation overrides these via inline style on (higher specificity than :root). Defaults below are the pastel-green local brand. */ --accent: var(--brand); --bright: #eaf3ee; --border: var(--line); --danger: var(--red); --card: var(--panel); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 14px/1.5 "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--neon-2); text-decoration: none; } a:hover { color: var(--text); } button { font: inherit; background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 6px 12px; cursor: pointer; transition: border-color 0.14s, background 0.14s; letter-spacing: 0.02em; } button:hover:not(:disabled) { border-color: var(--neon); } button:disabled { opacity: 0.4; cursor: not-allowed; } input[type="text"], textarea, select { font: inherit; background: var(--code-bg); color: var(--text); border: 1px solid var(--line); padding: 6px 10px; outline: none; } input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--neon); } /* ── Top bar ── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; letter-spacing: 0.04em; font-size: 14px; } .brand .pix { width: 18px; height: 18px; background: linear-gradient(45deg, var(--neon) 25%, transparent 25%) 0 0/6px 6px, linear-gradient(-45deg, var(--neon-2) 25%, transparent 25%) 0 0/6px 6px, var(--bg); box-shadow: 0 0 8px rgba(255, 92, 243, 0.45); } .brand .b1 { color: var(--neon); text-shadow: 0 0 8px rgba(255, 92, 243, 0.5); } .brand .b2 { color: var(--text); } .topbar nav { display: flex; gap: 14px; font-size: 13px; flex-wrap: wrap; } .topbar nav a { color: var(--dim); } .topbar nav a.active, .topbar nav a:hover { color: var(--text); } .btn-primary { background: linear-gradient(180deg, #2a1652, #1a0c34); border-color: var(--neon); color: var(--text); text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; box-shadow: 0 0 12px rgba(255, 92, 243, 0.2); } .btn-primary:hover:not(:disabled) { box-shadow: 0 0 18px rgba(255, 92, 243, 0.45); } .btn-primary.alt { border-color: var(--neon-2); box-shadow: 0 0 12px rgba(92, 242, 255, 0.2); } .btn-primary.alt:hover:not(:disabled) { box-shadow: 0 0 18px rgba(92, 242, 255, 0.45); } .btn-export { background: linear-gradient(180deg, #0a2030, #061620); border-color: var(--neon-2); color: var(--neon-2); text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; box-shadow: 0 0 10px rgba(92, 242, 255, 0.18); } .btn-export:hover:not(:disabled) { background: linear-gradient(180deg, #0d2c40, #08202d); box-shadow: 0 0 16px rgba(92, 242, 255, 0.4); color: var(--text); } .btn-export::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(92, 255, 140, 0.6); margin-right: 6px; vertical-align: middle; } .user-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); } .user-pill.guest { color: var(--dim); } /* ── Editor layout ── */ .editor-shell { display: grid; grid-template-rows: auto 1fr; height: 100vh; } .editor-meta { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .editor-meta .title-input { font-size: 14px; font-weight: 600; background: transparent; border: 1px solid transparent; padding: 4px 6px; color: var(--text); width: 240px; } .editor-meta .title-input:focus, .editor-meta .title-input:hover { border-color: var(--line); background: var(--code-bg); } .editor-meta .stat { font-size: 11px; color: var(--dim); font-family: "JetBrains Mono", ui-monospace, monospace; } .editor-meta select { font-size: 12px; padding: 4px 8px; } .editor-meta .status { font-size: 11px; padding: 3px 8px; border: 1px solid var(--line); color: var(--dim); font-family: "JetBrains Mono", ui-monospace, monospace; } .editor-meta .status.ok { color: var(--green); border-color: var(--green); } .editor-meta .status.dirty { color: var(--gold); border-color: var(--gold); } .editor-meta .status.err { color: var(--red); border-color: var(--red); } .editor-meta .spacer { flex: 1; } .workspace { display: grid; height: 100%; min-height: 0; } .workspace.layout-right { grid-template-columns: 1fr 1fr; } .workspace.layout-left { grid-template-columns: 1fr 1fr; } .workspace.layout-top { grid-template-rows: 1fr 1fr; } .workspace.layout-bottom { grid-template-rows: 1fr 1fr; } .workspace.layout-full { grid-template-rows: 1fr; } .panes { display: grid; grid-template-rows: 1fr 1fr 1fr; background: var(--code-bg); min-height: 0; } .workspace.layout-full .panes { display: none; } .pane { display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--line); } .pane:last-child { border-bottom: 0; } .pane-head { display: flex; align-items: center; justify-content: space-between; background: var(--panel); border-bottom: 1px solid var(--line); padding: 4px 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; } .pane-head .pane-tag.html { color: var(--neon); } .pane-head .pane-tag.css { color: var(--neon-2); } .pane-head .pane-tag.js { color: var(--gold); } .pane-head .pane-tools button { background: transparent; border: 0; color: var(--dim); padding: 2px 6px; font-size: 11px; font-family: inherit; } .pane-head .pane-tools button:hover { color: var(--text); } .pane-body { flex: 1; min-height: 0; width: 100%; display: block; background: var(--code-bg); color: var(--text); border: 0; outline: none; resize: none; padding: 12px 14px; font-family: "JetBrains Mono", ui-monospace, "Menlo", "Consolas", monospace; font-size: 13px; line-height: 1.6; white-space: pre; overflow: auto; tab-size: 2; -moz-tab-size: 2; caret-color: var(--neon); } .pane-body:focus { background: #07090f; box-shadow: inset 0 0 0 1px var(--line-2); } .pane-body::selection { background: rgba(255, 92, 243, 0.3); } /* ── Preview ── */ .preview { background: #fff; position: relative; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); } .workspace.layout-left .preview { border-left: 0; border-right: 1px solid var(--line); } .workspace.layout-top .preview, .workspace.layout-bottom .preview { border-left: 0; border-top: 1px solid var(--line); } .preview .preview-bar { display: flex; justify-content: space-between; align-items: center; background: var(--panel-2); border-bottom: 1px solid var(--line); padding: 4px 10px; font-size: 11px; color: var(--dim); font-family: "JetBrains Mono", ui-monospace, monospace; } .preview .preview-bar .right { display: flex; gap: 6px; } .preview .preview-bar button { padding: 2px 8px; font-size: 11px; } .preview iframe { flex: 1; width: 100%; border: 0; background: #fff; } .console { background: #08090f; color: var(--text); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; border-top: 1px solid var(--line); height: 140px; overflow: auto; } .console .row { padding: 3px 10px; border-bottom: 1px solid #14162c; white-space: pre-wrap; word-break: break-word; } .console .row.error { color: #ff8a8a; } .console .row.warn { color: #ffd06b; } .console .row.info { color: #6fd8ff; } .console .clear-btn { float: right; } /* ── Browse / homepage ── */ .shell { max-width: 1180px; margin: 0 auto; padding: 16px 20px 60px; } .hero { margin: 18px 0 28px; padding: 26px 24px; background: linear-gradient(180deg, rgba(40, 12, 80, 0.4), rgba(8, 4, 20, 0.3)), repeating-linear-gradient( 45deg, rgba(255, 92, 243, 0.04) 0 6px, transparent 6px 18px ); border: 1px solid var(--line); } .hero h1 { margin: 0 0 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: 0.02em; text-shadow: 0 0 8px rgba(255, 92, 243, 0.45), 0 0 18px rgba(255, 92, 243, 0.18); } .hero h1 .blink { animation: blink 1.1s steps(2, jump-none) infinite; color: var(--neon-2); } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } } .hero p { color: var(--dim); margin: 4px 0 16px; max-width: 640px; } .hero .cta { display: flex; gap: 8px; flex-wrap: wrap; } .section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 10px; font-family: "JetBrains Mono", ui-monospace, monospace; } .section-h h2 { margin: 0; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon-2); text-shadow: 0 0 8px rgba(92, 242, 255, 0.35); } .section-h .sub { color: var(--dim); font-size: 11px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .pen-card { display: block; background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: inherit; overflow: hidden; transition: border-color 0.14s, transform 0.14s, box-shadow 0.14s; } .pen-card:hover { border-color: var(--neon); transform: translateY(-2px); box-shadow: 0 0 18px rgba(255, 92, 243, 0.18); } .pen-card .preview-thumb { aspect-ratio: 4 / 3; background: #fff; position: relative; overflow: hidden; } .pen-card .preview-thumb iframe { position: absolute; inset: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; border: 0; pointer-events: none; } .pen-card .meta { padding: 10px 12px 12px; } .pen-card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; } .pen-card .desc { color: var(--dim); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pen-card .row { display: flex; gap: 10px; justify-content: space-between; margin-top: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--dim); } .empty { padding: 36px 16px; text-align: center; border: 1px dashed var(--line); color: var(--dim); font-family: "JetBrains Mono", ui-monospace, monospace; } /* ── Modals ── */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); display: none; align-items: center; justify-content: center; z-index: 1000; } .overlay.open { display: flex; } .modal { background: var(--panel); border: 1px solid var(--line); width: min(440px, 92vw); padding: 22px 24px; } .modal h2 { margin: 0 0 4px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 18px; color: var(--neon); text-shadow: 0 0 6px rgba(255, 92, 243, 0.4); } .modal p { color: var(--dim); margin: 0 0 14px; } .modal label { display: block; margin: 10px 0 4px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-family: "JetBrains Mono", ui-monospace, monospace; } .modal input, .modal select, .modal textarea { width: 100%; } .modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; } /* ── Utility ── */ .flash { margin: 6px 0; padding: 8px 12px; border: 1px solid; font-size: 13px; font-family: "JetBrains Mono", ui-monospace, monospace; } .flash.ok { color: var(--green); border-color: var(--green); } .flash.err { color: var(--red); border-color: var(--red); } .flash.info { color: var(--neon-2); border-color: var(--neon-2); } footer { margin-top: 40px; padding: 14px 14px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* The shared chrome bar (top, cross-site) + bottom-nav (intra-site) now handle navigation. The legacy in-app topbar is redundant — hide by default. Show again by clicking the chrome menu toggle (which sets html.dl-chrome-collapsed; flip the inverse in that state). */ .topbar { display: none !important; } /* ── Romp security scan button + results panel ───────────────────── The scan button sits in the editor toolbar between Run and Fork. Results render in a stack of severity-coded cards just below the workspace; users can dismiss with the close button. */ .btn-scan { background: linear-gradient(180deg, #2a1a0a, #1a0e04); border-color: var(--neon-3, #c8a86e); color: var(--neon-3, #c8a86e); text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; box-shadow: 0 0 10px rgba(200, 168, 110, 0.18); } .btn-scan:hover:not(:disabled) { background: linear-gradient(180deg, #4a3018, #2a1a0a); box-shadow: 0 0 14px rgba(200, 168, 110, 0.4); } .btn-scan:disabled { opacity: 0.6; cursor: wait; } .scan-results { margin: 12px 16px 24px; padding: 14px 16px; border-radius: 10px; background: var(--card, #16161e); border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: var(--text, #c0c0cc); } .scan-head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06)); padding-bottom: 8px; margin-bottom: 10px; } .scan-head strong { color: var(--accent, #c8a86e); font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; } .scan-meta { flex: 1; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 10px; color: var(--dim, #7a7a88); } .scan-close { background: transparent; border: 1px solid var(--border, rgba(255, 255, 255, 0.1)); color: var(--dim, #7a7a88); width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 12px; } .scan-close:hover { color: var(--text, #c0c0cc); } .scan-empty { padding: 8px 4px; color: var(--dim, #7a7a88); font-style: italic; } .scan-card { border-left: 3px solid var(--border, rgba(255, 255, 255, 0.1)); padding: 8px 12px; margin: 8px 0; background: rgba(255, 255, 255, 0.02); border-radius: 0 6px 6px 0; } .scan-card.sev-critical { border-left-color: #ff3b58; background: rgba(255, 59, 88, 0.06); } .scan-card.sev-high { border-left-color: #ff7a3b; background: rgba(255, 122, 59, 0.05); } .scan-card.sev-medium { border-left-color: #ffc83b; background: rgba(255, 200, 59, 0.04); } .scan-card.sev-low { border-left-color: #5cf2ff; background: rgba(92, 242, 255, 0.03); } .scan-card.sev-info { border-left-color: #888; } .scan-sev { display: inline-block; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; padding: 2px 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); margin-right: 8px; } .scan-card.sev-critical .scan-sev { color: #ff3b58; background: rgba(255, 59, 88, 0.12); } .scan-card.sev-high .scan-sev { color: #ff7a3b; background: rgba(255, 122, 59, 0.12); } .scan-card.sev-medium .scan-sev { color: #ffc83b; background: rgba(255, 200, 59, 0.12); } .scan-card.sev-low .scan-sev { color: #5cf2ff; background: rgba(92, 242, 255, 0.1); } .scan-where { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 11px; color: var(--dim, #7a7a88); } .scan-issue { margin-top: 6px; color: var(--bright, #f0f0f6); font-weight: 600; line-height: 1.4; } .scan-fix { margin-top: 4px; color: var(--text, #c0c0cc); font-size: 12px; line-height: 1.5; opacity: 0.9; } .scan-fix span { color: var(--accent, #c8a86e); } /* ──────────────────────────────────────────────────────────── THEME COHESION (2026-07-03) — follow the platform dl_theme. /code historically pinned a dark editor regardless of the shared theme (its own --panel-2/--code-bg tokens + chrome's .dl-no-theme subtree are NOT managed by base.v1.css). This block makes /code track the platform: LIGHT is unconditional (matches the bare-:root default → no FOUC), DARK is restored only under html[data-theme="dark"]. base.v1.css already themes --bg/--panel/--text/--line/--accent/etc.; here we theme only the tokens + literal-dark surfaces it can't reach. ──────────────────────────────────────────────────────────── */ :root { --panel-2: #eceaf4; --code-bg: #f7f6fb; --line-2: rgba(60, 56, 84, 0.18); --neon-2: #0e7490; --gold: #9a7d12; --red: #c0392b; } html[data-theme="dark"] { --panel-2: #15241c; --code-bg: #0a1410; --line-2: #2a4536; --neon-2: #5cf2ff; --gold: #ffe24a; --red: #ff5c5c; } /* Editor subtree: chrome.v1.css .dl-no-theme pins dark vars (--text:#c0c0cc, etc.). Retheme it light in light mode so code reads dark-on-light; the html prefix out-specifies chrome's bare .dl-no-theme. Dark keeps chrome default. */ html:not([data-theme="dark"]) .dl-no-theme { --text: #3a3848; --bright: #1c1a26; --dim: #6e6c7e; --bg: #f4f2fa; --card: #ffffff; --border: rgba(60, 56, 84, 0.14); } /* Literal-dark surfaces — light default, dark restored under [data-theme=dark] */ .console { background: #f4f3f9; } .console .row { border-bottom-color: rgba(60, 56, 84, 0.1); } .pane-body:focus { background: #eef0f4; } .hero { background: linear-gradient(180deg, rgba(184, 145, 30, 0.06), rgba(18, 153, 106, 0.05)), #ffffff; } html:not([data-theme="dark"]) .console .row.error { color: #c0392b; } html:not([data-theme="dark"]) .console .row.warn { color: #9a7d12; } html:not([data-theme="dark"]) .console .row.info { color: #0e7490; } html:not([data-theme="dark"]) .hero h1, html:not([data-theme="dark"]) .section-h h2, html:not([data-theme="dark"]) .modal h2, html:not([data-theme="dark"]) .brand .b1 { text-shadow: none; } html[data-theme="dark"] .console { background: #08090f; } html[data-theme="dark"] .console .row { border-bottom-color: #14162c; } html[data-theme="dark"] .pane-body:focus { background: #07090f; } html[data-theme="dark"] .hero { background: linear-gradient(180deg, rgba(40, 12, 80, 0.4), rgba(8, 4, 20, 0.3)), repeating-linear-gradient(45deg, rgba(255, 92, 243, 0.04) 0 6px, transparent 6px 18px); } /* ──────────────────────────────────────────────────────────── ACCENT BUTTONS (2026-07-03) — tone the editor's neon CTAs into the platform palette in LIGHT mode (they read as leftover dark-theme on the light UI). Save -> solid gold (platform primary CTA: gold + dark text); Scan -> gold outline; Export -> green outline. The original neon gradients are restored under html[data-theme="dark"] so dark mode keeps its identity. These are