/* renAIssance v1.2 (2026-09-27), formerly Mission Neon. v1.2: renamed, rn tokens and classes, mn tokens and classes kept as aliases. v1.1: red, yellow and green removed; states rebuilt from neon, white and grey. Source: Joel Harrison Resume 2026 Dark v4.
True black, sharp type, precise grid. Neon cyan and magenta (sampled from
Joel's neon portrait) are the ONLY accents.
Fonts (Google Fonts, OFL). Put this in before this file:
*/
:root{
/* Color: canvas (contrast ratios are text on --rn-bg) */
--rn-bg:#07070A; /* page. Dark v4 background */
--rn-surface:#0E0E13; /* cards, inputs, menus */
--rn-surface-2:#15151C; /* hover rows, raised panels */
--rn-line:#24242E; /* hairlines, dividers, card borders */
--rn-line-strong:#3A3A46; /* input and secondary button borders */
/* Color: text */
--rn-text-1:#F2F2F5; /* 18.0:1 headings, primary text */
--rn-text-2:#B8B8C2; /* 10.2:1 body copy */
--rn-text-3:#8E8E9A; /* 6.2:1 labels, meta, placeholders */
--rn-text-4:#5C5C68; /* 3.1:1 disabled only, never essential text */
/* Color: neon (sampled from source/joel-neon-portrait-full.jpg) */
--rn-cyan:#54CDF2; /* 10.9:1 interactive: primary, focus, links, selection */
--rn-magenta:#A63BFB; /* 4.45:1 highlight only: active marker, badge dot, hero glow. NEVER text */
--rn-cyan-rgb:84,205,242;
--rn-magenta-rgb:166,59,251;
--rn-on-neon:#07070A; /* text on a cyan fill, 10.9:1 */
/* Color: states. NO red, yellow or green, by design. Meaning is carried by
glyph + label + border style + fill vs outline; color is only a 4th cue.
Removed in v1.1: --rn-success, --rn-warning, --rn-error (replaced by --rn-state-*) */
--rn-state-success:var(--rn-cyan); /* cyan, check glyph, 1px solid outline */
--rn-state-warning:var(--rn-text-1); /* white, ! glyph, 1px DASHED border */
--rn-state-error:var(--rn-magenta); /* violet, x glyph on a FILLED square, 2px solid border, bold label */
--rn-state-info:var(--rn-text-3); /* grey, i glyph, 1px solid line strong */
--rn-state-text:var(--rn-text-1); /* label text for warning and error (violet never carries text) */
/* State glyphs: 16px squares, colors baked in from the tokens above */
--rn-icon-success:url("data:image/svg+xml;utf8,");
--rn-icon-warning:url("data:image/svg+xml;utf8,");
--rn-icon-error:url("data:image/svg+xml;utf8,");
--rn-icon-info:url("data:image/svg+xml;utf8,");
/* Glow: the only three recipes */
--rn-glow-cyan:0 0 0 1px rgba(var(--rn-cyan-rgb),.9),0 0 12px rgba(var(--rn-cyan-rgb),.45),0 0 32px rgba(var(--rn-cyan-rgb),.18);
--rn-glow-dot:0 0 8px currentColor;
--rn-hero-glow:radial-gradient(52% 44% at 100% 0%,rgba(var(--rn-magenta-rgb),.26),rgba(var(--rn-magenta-rgb),.08) 45%,transparent 75%),
radial-gradient(48% 32% at 0% 100%,rgba(var(--rn-cyan-rgb),.20),rgba(var(--rn-cyan-rgb),.06) 42%,transparent 72%);
/* Type */
--rn-font-display:"Barlow Condensed","Arial Narrow",sans-serif;
--rn-font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
--rn-t-display:700 72px/.88 var(--rn-font-display); /* resume name 78px/.86 */
--rn-t-h1:700 40px/1 var(--rn-font-display); /* resume proof 25px */
--rn-t-h2:600 24px/1.1 var(--rn-font-display);
--rn-t-h3:600 18px/1.15 var(--rn-font-display); /* resume app/role 15 to 16px */
--rn-t-lead:500 17px/1.6 var(--rn-font-mono); /* resume lead 14.5px */
--rn-t-body:400 14px/1.65 var(--rn-font-mono); /* resume body 11 to 11.5px */
--rn-t-small:400 12.5px/1.5 var(--rn-font-mono);
--rn-t-label:500 11px/1.4 var(--rn-font-mono); /* resume label 10px, .22em */
/* Space (4px base) and grid */
--rn-s1:4px;--rn-s2:8px;--rn-s3:12px;--rn-s4:16px;--rn-s5:24px;--rn-s6:32px;--rn-s7:48px;--rn-s8:72px;--rn-s9:96px;
--rn-max:1200px;--rn-cols:12;--rn-gutter:24px;--rn-margin:24px;
--rn-radius:0; /* sharp corners everywhere; pills and circles only for dots */
--rn-ease:cubic-bezier(.2,.7,.2,1);--rn-dur:160ms;
}
@media (min-width:640px){:root{--rn-margin:48px}}
@media (min-width:1280px){:root{--rn-margin:72px}}
:root{
/* Backward compatible aliases (Mission Neon era). Read only: override the --rn-* token, not the --mn-* one. */
--mn-bg:var(--rn-bg);
--mn-surface:var(--rn-surface);
--mn-surface-2:var(--rn-surface-2);
--mn-line:var(--rn-line);
--mn-line-strong:var(--rn-line-strong);
--mn-text-1:var(--rn-text-1);
--mn-text-2:var(--rn-text-2);
--mn-text-3:var(--rn-text-3);
--mn-text-4:var(--rn-text-4);
--mn-cyan:var(--rn-cyan);
--mn-magenta:var(--rn-magenta);
--mn-cyan-rgb:var(--rn-cyan-rgb);
--mn-magenta-rgb:var(--rn-magenta-rgb);
--mn-on-neon:var(--rn-on-neon);
--mn-state-success:var(--rn-state-success);
--mn-state-warning:var(--rn-state-warning);
--mn-state-error:var(--rn-state-error);
--mn-state-info:var(--rn-state-info);
--mn-state-text:var(--rn-state-text);
--mn-icon-success:var(--rn-icon-success);
--mn-icon-warning:var(--rn-icon-warning);
--mn-icon-error:var(--rn-icon-error);
--mn-icon-info:var(--rn-icon-info);
--mn-glow-cyan:var(--rn-glow-cyan);
--mn-glow-dot:var(--rn-glow-dot);
--mn-hero-glow:var(--rn-hero-glow);
--mn-font-display:var(--rn-font-display);
--mn-font-mono:var(--rn-font-mono);
--mn-t-display:var(--rn-t-display);
--mn-t-h1:var(--rn-t-h1);
--mn-t-h2:var(--rn-t-h2);
--mn-t-h3:var(--rn-t-h3);
--mn-t-lead:var(--rn-t-lead);
--mn-t-body:var(--rn-t-body);
--mn-t-small:var(--rn-t-small);
--mn-t-label:var(--rn-t-label);
--mn-s1:var(--rn-s1);
--mn-s2:var(--rn-s2);
--mn-s3:var(--rn-s3);
--mn-s4:var(--rn-s4);
--mn-s5:var(--rn-s5);
--mn-s6:var(--rn-s6);
--mn-s7:var(--rn-s7);
--mn-s8:var(--rn-s8);
--mn-s9:var(--rn-s9);
--mn-max:var(--rn-max);
--mn-cols:var(--rn-cols);
--mn-gutter:var(--rn-gutter);
--mn-margin:var(--rn-margin);
--mn-radius:var(--rn-radius);
--mn-ease:var(--rn-ease);
--mn-dur:var(--rn-dur);
}
/* Base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--rn-bg);color-scheme:dark}
body{margin:0;background:var(--rn-bg);color:var(--rn-text-2);font:var(--rn-t-body);-webkit-font-smoothing:antialiased}
::selection{background:rgba(var(--rn-cyan-rgb),.28);color:var(--rn-text-1)}
:focus-visible{outline:2px solid var(--rn-cyan);outline-offset:2px}
.rn-hero,.mn-hero{background:var(--rn-hero-glow),var(--rn-bg)} /* ONE per app, on the top screen/hero only */
/* Layout */
.rn-container,/* ONE per app, on the top screen/hero only */
/* Layout */
.mn-container{max-width:calc(var(--rn-max) + 2*var(--rn-margin));margin:0 auto;padding:0 var(--rn-margin)}
.rn-grid,.mn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rn-gutter)}
@media (min-width:640px){.rn-grid,.mn-grid{grid-template-columns:repeat(8,1fr)}}
@media (min-width:960px){.rn-grid,.mn-grid{grid-template-columns:repeat(var(--rn-cols),1fr)}}
/* Type */
.rn-display,.rn-h1,.rn-h2,.rn-h3,/* Type */
.mn-display,.mn-h1,.mn-h2,.mn-h3{margin:0;color:var(--rn-text-1);text-transform:uppercase}
.rn-display,.mn-display{font:var(--rn-t-display);letter-spacing:-.005em}
.rn-h1,.mn-h1{font:var(--rn-t-h1);letter-spacing:.005em}
.rn-h2,.mn-h2{font:var(--rn-t-h2);letter-spacing:.02em}
.rn-h3,.mn-h3{font:var(--rn-t-h3);letter-spacing:.03em}
.rn-lead,.mn-lead{font:var(--rn-t-lead);color:var(--rn-text-1);max-width:62ch;margin:0}
.rn-body,.mn-body{font:var(--rn-t-body);color:var(--rn-text-2);max-width:68ch;margin:0}
.rn-small,.mn-small{font:var(--rn-t-small);color:var(--rn-text-3)}
.rn-label,.mn-label{font:var(--rn-t-label);letter-spacing:.22em;text-transform:uppercase;color:var(--rn-text-3)}
.rn-section,.mn-section{padding-bottom:var(--rn-s2);border-bottom:1px solid var(--rn-line)}
.rn-link,.mn-link{color:var(--rn-text-1);text-decoration:underline;text-decoration-color:var(--rn-line-strong);text-underline-offset:3px;transition:color var(--rn-dur),text-decoration-color var(--rn-dur)}
.rn-link:hover,.mn-link:hover{color:var(--rn-cyan);text-decoration-color:var(--rn-cyan)}
/* Buttons: uppercase mono labels, sharp corners, 40px tall */
.rn-btn,/* Buttons: uppercase mono labels, sharp corners, 40px tall */
.mn-btn{display:inline-flex;align-items:center;gap:var(--rn-s2);height:40px;padding:0 var(--rn-s5);border:1px solid transparent;border-radius:var(--rn-radius);background:none;font:var(--rn-t-label);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:box-shadow var(--rn-dur) var(--rn-ease),background var(--rn-dur),border-color var(--rn-dur),color var(--rn-dur)}
.rn-btn--primary,.mn-btn--primary{background:var(--rn-cyan);color:var(--rn-on-neon)}
.rn-btn--primary:hover,.mn-btn--primary:hover{box-shadow:var(--rn-glow-cyan)}
.rn-btn--primary:active,.mn-btn--primary:active{background:#3FB6DB;box-shadow:none}
.rn-btn--secondary,.mn-btn--secondary{border-color:var(--rn-line-strong);color:var(--rn-text-1)}
.rn-btn--secondary:hover,.mn-btn--secondary:hover{border-color:var(--rn-cyan);color:var(--rn-cyan)}
.rn-btn--secondary:active,.mn-btn--secondary:active{background:rgba(var(--rn-cyan-rgb),.08)}
.rn-btn--ghost,.mn-btn--ghost{padding:0 var(--rn-s3);color:var(--rn-text-2)}
.rn-btn--ghost:hover,.mn-btn--ghost:hover{color:var(--rn-text-1);background:var(--rn-surface-2)}
.rn-btn--ghost:active,.mn-btn--ghost:active{color:var(--rn-cyan)}
.rn-btn:focus-visible,.mn-btn:focus-visible{outline:2px solid var(--rn-cyan);outline-offset:3px}
.rn-btn:disabled,.rn-btn[aria-disabled=true],.mn-btn:disabled,.mn-btn[aria-disabled=true]{background:none;border-color:var(--rn-line);color:var(--rn-text-4);box-shadow:none;cursor:not-allowed}
/* Cards: surface + hairline, no shadows, no glow at rest */
.rn-card,/* Cards: surface + hairline, no shadows, no glow at rest */
.mn-card{background:var(--rn-surface);border:1px solid var(--rn-line);border-radius:var(--rn-radius);padding:var(--rn-s5)}
.rn-card--interactive,.mn-card--interactive{cursor:pointer;transition:border-color var(--rn-dur)}
.rn-card--interactive:hover,.mn-card--interactive:hover{border-color:var(--rn-line-strong)}
.rn-card--selected,.mn-card--selected{border-color:var(--rn-cyan)}
/* Inputs */
.rn-field,/* Inputs */
.mn-field{display:grid;gap:var(--rn-s2)}
.rn-input,.mn-input{height:40px;width:100%;padding:0 var(--rn-s3);background:var(--rn-surface);border:1px solid var(--rn-line-strong);border-radius:var(--rn-radius);color:var(--rn-text-1);font:var(--rn-t-body);transition:border-color var(--rn-dur),box-shadow var(--rn-dur)}
.rn-input::placeholder,.mn-input::placeholder{color:var(--rn-text-3)}
.rn-input:hover,.mn-input:hover{border-color:var(--rn-text-4)}
.rn-input:focus,.mn-input:focus{outline:none;border-color:var(--rn-cyan);box-shadow:0 0 0 1px var(--rn-cyan),0 0 16px rgba(var(--rn-cyan-rgb),.22)}
.rn-input--success,.mn-input--success{border-color:var(--rn-state-success);padding-right:40px;background:var(--rn-icon-success) right 12px center/16px no-repeat,var(--rn-surface)}
.rn-input--warning,.mn-input--warning{border-style:dashed;border-color:var(--rn-state-warning);padding-right:40px;background:var(--rn-icon-warning) right 12px center/16px no-repeat,var(--rn-surface)}
.rn-input[aria-invalid=true],.rn-input--error,.mn-input[aria-invalid=true],.mn-input--error{border-color:var(--rn-state-error);box-shadow:inset 0 0 0 1px var(--rn-state-error);padding-right:40px;background:var(--rn-icon-error) right 12px center/16px no-repeat,var(--rn-surface)}
.rn-input:disabled,.mn-input:disabled{color:var(--rn-text-4);border-color:var(--rn-line);cursor:not-allowed}
.rn-help,.mn-help{font:var(--rn-t-small);color:var(--rn-text-3)}
.rn-help--success,.rn-help--warning,.rn-help--error,.mn-help--success,.mn-help--warning,.mn-help--error{display:flex;align-items:center;gap:8px;color:var(--rn-text-2)}
.rn-help--success::before,.rn-help--warning::before,.rn-help--error::before,.mn-help--success::before,.mn-help--warning::before,.mn-help--error::before{content:"";width:14px;height:14px;flex:none;background:center/14px no-repeat}
.rn-help--success::before,.mn-help--success::before{background-image:var(--rn-icon-success)}
.rn-help--warning::before,.mn-help--warning::before{background-image:var(--rn-icon-warning)}
.rn-help--error,.mn-help--error{color:var(--rn-state-text);font-weight:500}
.rn-help--error::before,.mn-help--error::before{background-image:var(--rn-icon-error)}
.rn-help b,.mn-help b{font-weight:600;letter-spacing:.08em;text-transform:uppercase}
/* Nav: labels at rest, text-1 on hover, magenta tick under the active item */
.rn-nav,/* Nav: labels at rest, text-1 on hover, magenta tick under the active item */
.mn-nav{display:flex;align-items:center;gap:var(--rn-s6);height:64px;border-bottom:1px solid var(--rn-line)}
.rn-nav a,.mn-nav a{position:relative;font:var(--rn-t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--rn-text-3);text-decoration:none;padding:var(--rn-s2) 0;transition:color var(--rn-dur)}
.rn-nav a:hover,.mn-nav a:hover{color:var(--rn-text-1)}
.rn-nav a[aria-current=page],.mn-nav a[aria-current=page]{color:var(--rn-text-1)}
.rn-nav a[aria-current=page]::after,.mn-nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:.2em;bottom:-1px;height:2px;background:var(--rn-magenta);box-shadow:0 0 10px rgba(var(--rn-magenta-rgb),.7)}
/* Status: small square dot + label (the resume "live" pattern) */
.rn-status,/* Status: small square dot + label (the resume "live" pattern) */
.mn-status{display:inline-flex;align-items:center;gap:7px;font:var(--rn-t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--rn-text-2)}
.rn-status::before,.mn-status::before{content:"";width:6px;height:6px;background:currentColor;box-shadow:var(--rn-glow-dot)}
.rn-status--live,.mn-status--live{color:var(--rn-cyan)}
.rn-status--success,.rn-status--warning,.rn-status--error,.rn-status--info,.mn-status--success,.mn-status--warning,.mn-status--error,.mn-status--info{gap:8px}
.rn-status--success::before,.rn-status--warning::before,.rn-status--error::before,.rn-status--info::before,.mn-status--success::before,.mn-status--warning::before,.mn-status--error::before,.mn-status--info::before{width:14px;height:14px;box-shadow:none;background:center/14px no-repeat}
.rn-status--success,.mn-status--success{color:var(--rn-state-success)}
.rn-status--success::before,.mn-status--success::before{background-image:var(--rn-icon-success)}
.rn-status--warning,.mn-status--warning{color:var(--rn-state-warning)}
.rn-status--warning::before,.mn-status--warning::before{background-image:var(--rn-icon-warning)}
.rn-status--error,.mn-status--error{color:var(--rn-state-text);font-weight:600}
.rn-status--error::before,.mn-status--error::before{background-image:var(--rn-icon-error);box-shadow:0 0 8px rgba(var(--rn-magenta-rgb),.6)}
.rn-status--info,.mn-status--info{color:var(--rn-state-info)}
.rn-status--info::before,.mn-status--info::before{background-image:var(--rn-icon-info)}
/* Alerts and toasts: surface panel, icon, bold label, message. Border style encodes the state */
.rn-alert,/* Alerts and toasts: surface panel, icon, bold label, message. Border style encodes the state */
.mn-alert{display:grid;grid-template-columns:16px 1fr auto;gap:4px 12px;align-items:start;padding:14px 16px;background:var(--rn-surface);border:1px solid var(--rn-line-strong);border-radius:var(--rn-radius);max-width:560px}
.rn-alert::before,.mn-alert::before{content:"";width:16px;height:16px;margin-top:1px;grid-row:span 2;background:var(--rn-icon-info) center/16px no-repeat}
.rn-alert__title,.mn-alert__title{font:var(--rn-t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--rn-text-1)}
.rn-alert__msg,.mn-alert__msg{grid-column:2;font:var(--rn-t-small);color:var(--rn-text-2)}
.rn-alert__close,.mn-alert__close{grid-row:1/span 2;grid-column:3;align-self:center}
.rn-alert--info .rn-alert__title,.mn-alert--info .mn-alert__title{color:var(--rn-state-info)}
.rn-alert--success,.mn-alert--success{border-color:var(--rn-state-success)}
.rn-alert--success::before,.mn-alert--success::before{background-image:var(--rn-icon-success)}
.rn-alert--success .rn-alert__title,.mn-alert--success .mn-alert__title{color:var(--rn-state-success)}
.rn-alert--warning,.mn-alert--warning{border-style:dashed;border-color:var(--rn-state-warning)}
.rn-alert--warning::before,.mn-alert--warning::before{background-image:var(--rn-icon-warning)}
.rn-alert--error,.mn-alert--error{border:2px solid var(--rn-state-error);padding:13px 15px;box-shadow:0 0 24px rgba(var(--rn-magenta-rgb),.18)}
.rn-alert--error::before,.mn-alert--error::before{background-image:var(--rn-icon-error)}
.rn-alert--error .rn-alert__title,.mn-alert--error .mn-alert__title{font-weight:600}
.rn-toast,.mn-toast{box-shadow:0 0 0 1px var(--rn-bg),0 12px 32px rgba(0,0,0,.6)} /* add to .rn-alert; bottom right, 24px inset, max 3 stacked */
/* Badges: 22px, label type. Info outline grey, success cyan outline + check,
warning dashed white + !, error = double hairline violet + filled x + bold white label */
.rn-badge,/* add to .rn-alert; bottom right, 24px inset, max 3 stacked */
/* Badges: 22px, label type. Info outline grey, success cyan outline + check,
warning dashed white + !, error = double hairline violet + filled x + bold white label */
.mn-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid var(--rn-line-strong);font:500 10px/1 var(--rn-font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--rn-state-info);white-space:nowrap}
.rn-badge--success,.rn-badge--warning,.rn-badge--error,.mn-badge--success,.mn-badge--warning,.mn-badge--error{padding-left:5px}
.rn-badge--success::before,.rn-badge--warning::before,.rn-badge--error::before,.mn-badge--success::before,.mn-badge--warning::before,.mn-badge--error::before{content:"";width:12px;height:12px;background:center/12px no-repeat}
.rn-badge--success,.mn-badge--success{border-color:var(--rn-state-success);color:var(--rn-state-success)}
.rn-badge--success::before,.mn-badge--success::before{background-image:var(--rn-icon-success)}
.rn-badge--warning,.mn-badge--warning{border-style:dashed;border-color:var(--rn-state-warning);color:var(--rn-state-text)}
.rn-badge--warning::before,.mn-badge--warning::before{background-image:var(--rn-icon-warning)}
.rn-badge--error,.mn-badge--error{border:3px double var(--rn-state-error);padding-left:4px;color:var(--rn-state-text);font-weight:600}
.rn-badge--error::before,.mn-badge--error::before{background-image:var(--rn-icon-error)}
.rn-badge-dot,.mn-badge-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rn-magenta);box-shadow:0 0 8px rgba(var(--rn-magenta-rgb),.8)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.rn-btn--ghost:disabled,.rn-btn--ghost[aria-disabled=true],.mn-btn--ghost:disabled,.mn-btn--ghost[aria-disabled=true]{border-color:transparent}
/* Wordmark as live text: RENAISSANCE. Prefer renaissance-wordmark.svg for logos */
.rn-wordmark{font:700 1em/1 var(--rn-font-display);letter-spacing:.02em;text-transform:uppercase;color:var(--rn-text-1)}
.rn-wordmark b{font-weight:inherit;color:var(--rn-cyan)}