/* =============================================================
SIMONÉ DEYZEL · CV SITE
Design system — deep navy + cream, red-team accent
============================================================= */
/* Google Fonts loaded via in each page for better performance */
:root {
/* Palette */
--bg: #07101C;
--bg-elevated: #0C1828;
--surface: #11223A;
--surface-2: #15294A;
--border: #1E3052;
--border-bright: #2C4874;
--text: #EDE4D0;
--text-muted: #8E9BB3;
--text-dim: #566584;
--accent: #FF5B3C;
--accent-soft: #FF8666;
--accent-glow: rgba(255, 91, 60, 0.18);
--ok: #7CE0A5;
--warn: #E8B85C;
/* Type */
--f-sans: 'Geist', system-ui, -apple-system, sans-serif;
--f-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
--f-serif: 'Newsreader', Georgia, serif;
/* Geometry */
--rail-w: 260px;
--status-h: 32px;
--maxw: 1240px;
/* Motion */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background-color: var(--bg);
color: var(--text);
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
min-height: 100vh;
background:
radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255, 91, 60, 0.06), transparent 60%),
radial-gradient(ellipse 60% 50% at 100% 100%, rgba(28, 60, 110, 0.18), transparent 60%),
var(--bg);
background-attachment: fixed;
}
/* Scanline + grid overlay (subtle, body::before) */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 2;
background-image:
repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
mix-blend-mode: overlay;
}
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background-image:
linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(0,0,0,0.6), transparent 90%);
}
a { color: inherit; text-decoration: none; }
::selection {
background-color: var(--accent);
color: var(--bg);
}
/* =============================================================
LAYOUT — left rail + main column + status bar
============================================================= */
.app {
display: grid;
grid-template-columns: var(--rail-w) 1fr;
min-height: 100vh;
position: relative;
z-index: 3;
}
.rail {
position: sticky;
top: 0;
height: 100vh;
border-right: 1px solid var(--border);
background: linear-gradient(180deg, rgba(7,16,28,0.4), rgba(7,16,28,0.95));
backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
padding: 24px 22px 56px;
z-index: 5;
}
.rail__brand {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 28px;
}
.rail__name {
font-family: var(--f-sans);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0;
}
.rail__handles {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 2px;
}
.rail__handle {
font-family: var(--f-mono);
font-size: 11px;
color: var(--accent);
letter-spacing: 0.02em;
text-transform: lowercase;
}
.rail__handle::before {
content: "@";
opacity: 0.7;
}
.rail__photo {
width: 100%;
margin: 4px 0 2px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border);
line-height: 0;
}
.rail__photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.rail__nav {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 8px;
}
.rail__nav a {
display: grid;
grid-template-columns: 24px 1fr auto;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 4px;
color: var(--text-muted);
font-family: var(--f-mono);
font-size: 12.5px;
letter-spacing: 0.02em;
text-transform: uppercase;
transition: background 160ms var(--ease), color 160ms var(--ease);
position: relative;
}
.rail__nav a:hover {
color: var(--text);
background: rgba(255,255,255,0.02);
}
.rail__nav a.is-active {
color: var(--text);
background: rgba(255, 91, 60, 0.06);
}
.rail__nav a.is-active::before {
content: "";
position: absolute;
left: -22px;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 16px;
background-color: var(--accent);
box-shadow: 0 0 8px var(--accent-glow);
}
.rail__nav .num {
color: var(--text-dim);
font-size: 10px;
letter-spacing: 0.05em;
}
.rail__nav .arrow {
opacity: 0;
transform: translateX(-4px);
transition: all 160ms var(--ease);
color: var(--accent);
}
.rail__nav a:hover .arrow,
.rail__nav a.is-active .arrow {
opacity: 1;
transform: translateX(0);
}
.rail__divider {
height: 1px;
background-color: var(--border);
margin: 22px 0 18px;
}
.rail__meta {
margin-top: auto;
font-family: var(--f-mono);
font-size: 10.5px;
color: var(--text-dim);
display: flex;
flex-direction: column;
gap: 6px;
line-height: 1.4;
}
.rail__meta a {
color: var(--text-muted);
transition: color 120ms;
}
.rail__meta a:hover { color: var(--accent); }
.rail__meta .label {
color: var(--text-dim);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 9.5px;
}
/* =============================================================
MAIN COLUMN
============================================================= */
.main {
min-height: 100vh;
padding-bottom: var(--status-h);
position: relative;
}
.main__inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 64px;
}
/* =============================================================
STATUS BAR (bottom)
============================================================= */
.status {
position: fixed;
bottom: 0;
left: var(--rail-w);
right: 0;
height: var(--status-h);
background-color: var(--bg-elevated);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0;
font-family: var(--f-mono);
font-size: 10.5px;
letter-spacing: 0.04em;
color: var(--text-dim);
text-transform: uppercase;
z-index: 10;
}
.status__cell {
padding: 0 16px;
height: 100%;
display: flex;
align-items: center;
gap: 8px;
border-right: 1px solid var(--border);
}
.status__cell:last-child { border-right: 0; margin-left: auto; }
.status__cell.is-ok { color: var(--ok); }
.status__cell .dot {
width: 6px; height: 6px; border-radius: 50%;
background-color: var(--ok);
box-shadow: 0 0 6px var(--ok);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* =============================================================
TYPOGRAPHY UTILITIES
============================================================= */
.eyebrow {
font-family: var(--f-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "";
width: 24px;
height: 1px;
background-color: var(--accent);
}
.section-num {
font-family: var(--f-mono);
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.1em;
}
.h-display {
font-family: var(--f-sans);
font-weight: 600;
font-size: clamp(40px, 6vw, 76px);
line-height: 0.98;
letter-spacing: -0.035em;
margin: 0;
}
.h-display em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent-soft);
}
.h-section {
font-family: var(--f-sans);
font-weight: 500;
font-size: clamp(28px, 3.5vw, 44px);
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0 0 18px;
}
.h-section em {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
color: var(--accent-soft);
}
.lede {
font-size: 19px;
line-height: 1.55;
color: var(--text);
max-width: 64ch;
}
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.mono { font-family: var(--f-mono); }
.accent { color: var(--accent); }
/*
* Body prose : same sans stack as paragraphs, upright — keeps accent-soft.
* Newsreader italic remains on title-level emphasis only (.hero__title / .h-display /
* .h-section / .phase-mark h2 / .timeline__role / .svc__head h2 / .cta h2 / .svc-cta h3, etc.).
*/
.hero__lede em,
.about-body p em,
.svc-intro em,
.svc__teaser em,
.avail__val em,
.cta p em,
.current-card .descr em,
.focus__cell p em,
.svc__offer div p em,
.timeline__points li em {
font-family: var(--f-sans);
font-style: normal;
font-weight: 500;
color: var(--accent-soft);
}
/* =============================================================
BUTTONS / LINKS
============================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 12px 18px;
border-radius: 2px;
cursor: pointer;
transition: border-color 160ms var(--ease), color 160ms var(--ease);
border: 1px solid var(--border-bright);
background: transparent;
color: var(--text);
}
.btn:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(255, 91, 60, 0.04);
}
.btn--primary {
background-color: var(--accent);
color: var(--bg);
border-color: var(--accent);
font-weight: 600;
}
.btn--primary:hover {
background-color: var(--accent-soft);
border-color: var(--accent-soft);
color: var(--bg);
}
.btn .arrow { transition: transform 160ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.link-mono {
font-family: var(--f-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text);
border-bottom: 1px solid var(--accent);
padding-bottom: 2px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 160ms;
}
.link-mono:hover { color: var(--accent); }
/* =============================================================
CARDS / PANELS
============================================================= */
.panel {
border: 1px solid var(--border);
background-color: var(--bg-elevated);
padding: 28px;
position: relative;
transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.panel:hover {
border-color: var(--border-bright);
}
.panel--accent::before {
content: "";
position: absolute;
top: -1px; left: -1px;
width: 14px;
height: 14px;
border-top: 1px solid var(--accent);
border-left: 1px solid var(--accent);
}
.panel--accent::after {
content: "";
position: absolute;
bottom: -1px; right: -1px;
width: 14px;
height: 14px;
border-bottom: 1px solid var(--accent);
border-right: 1px solid var(--accent);
}
/* =============================================================
GRID HELPERS
============================================================= */
.row { display: flex; gap: 16px; align-items: center; }
.stack { display: flex; flex-direction: column; }
/* =============================================================
GLITCH HOVER for nav-like text
============================================================= */
.glitch {
position: relative;
display: inline-block;
}
/* =============================================================
PAGE-ENTRY ANIMATIONS
============================================================= */
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
.fade-up {
/* No entry animation — opacity stays 1.
Some iframe environments pause CSS animations and strand opacity:0. */
opacity: 1;
}
.fade-up.d1, .fade-up.d2, .fade-up.d3, .fade-up.d4, .fade-up.d5 { opacity: 1; }
/* Section reveal */
[data-reveal] {
opacity: 1;
transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
/* Cursor blink */
.cursor {
display: inline-block;
width: 0.55em;
height: 1em;
background-color: var(--accent);
vertical-align: -0.1em;
margin-left: 2px;
animation: blink 1s steps(2) infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* =============================================================
FOOTER (shared, content-only)
============================================================= */
.foot {
border-top: 1px solid var(--border);
margin-top: 96px;
padding: 40px 0 56px;
font-family: var(--f-mono);
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.foot a:hover { color: var(--accent); }
/* =============================================================
TWEAKABLE PERSONALITIES — driven by body[data-*]
============================================================= */
/* --- ACCENT OPERATOR --------------------------------- */
body[data-accent="red"] {
--accent: #FF5B3C; --accent-soft: #FF8666; --accent-glow: rgba(255, 91, 60, 0.22);
}
body[data-accent="phosphor"] {
--accent: #6FE39A; --accent-soft: #A8F2C2; --accent-glow: rgba(111, 227, 154, 0.28);
--bg: #061812; --bg-elevated: #0A1F18; --surface: #0F2A20;
--border: #1B3A2C; --border-bright: #2C5742;
}
body[data-accent="signal"] {
--accent: #E8B85C; --accent-soft: #F4D38A; --accent-glow: rgba(232, 184, 92, 0.26);
--bg: #0F0C06; --bg-elevated: #161208; --surface: #1F1A10;
--border: #2E2614; --border-bright: #4A3E22;
}
body[data-accent="cobalt"] {
--accent: #5DAEFF; --accent-soft: #93C8FF; --accent-glow: rgba(93, 174, 255, 0.26);
}
/* --- INTENSITY -------------------------------------- */
/* Boardroom: clean executive, scanlines off, no pulses */
body[data-intensity="boardroom"]::before { display: none; }
body[data-intensity="boardroom"]::after { opacity: 0.35; }
body[data-intensity="boardroom"] .status { opacity: 0.55; }
body[data-intensity="boardroom"] .term__ascii { display: none; }
body[data-intensity="boardroom"] .cursor { display: none; }
body[data-intensity="boardroom"] .badge-status .dot,
body[data-intensity="boardroom"] .status .dot { animation: none; }
body[data-intensity="boardroom"] .hero__top > span:first-child { opacity: 0; }
body[data-intensity="boardroom"] .term__head .term__path { display: none; }
/* Ops room: stronger scanlines, accent glow on cards, terminal more prominent */
body[data-intensity="ops"]::before {
background-image: repeating-linear-gradient(0deg,
rgba(255,255,255,0.045) 0 1px, transparent 1px 3px);
}
body[data-intensity="ops"] .term {
box-shadow: 0 0 32px var(--accent-glow);
border-color: var(--border-bright);
}
body[data-intensity="ops"] .focus__cell:hover {
background-color: var(--surface);
box-shadow: inset 0 0 40px var(--accent-glow);
}
body[data-intensity="ops"] .badge-status {
border-color: var(--accent);
color: var(--accent);
background: rgba(255, 91, 60, 0.06);
}
body[data-intensity="ops"] .badge-status .dot {
background-color: var(--accent); box-shadow: 0 0 10px var(--accent);
}
body[data-intensity="ops"] .hero__title em {
text-shadow: 0 0 18px var(--accent-glow);
}
/* CRT: heavy scanlines + screen flicker + chromatic on italics */
body[data-intensity="crt"]::before {
background-image: repeating-linear-gradient(0deg,
rgba(255,255,255,0.07) 0 1px, transparent 1px 2px),
repeating-linear-gradient(0deg,
rgba(0,0,0,0.15) 0 2px, transparent 2px 4px);
animation: scanShift 8s linear infinite;
}
body[data-intensity="crt"]::after {
background-size: 50px 50px;
opacity: 1;
}
body[data-intensity="crt"] .term {
box-shadow: 0 0 50px var(--accent-glow), inset 0 0 20px rgba(0,0,0,0.4);
}
body[data-intensity="crt"] .hero__title em {
text-shadow:
0.7px 0 0 var(--accent),
-0.7px 0 0 var(--accent-soft),
0 0 24px var(--accent-glow);
}
body[data-intensity="crt"] .h-section em,
body[data-intensity="crt"] .h-display em {
text-shadow:
0.5px 0 0 var(--accent),
-0.5px 0 0 var(--accent-soft);
}
body[data-intensity="crt"] .main {
animation: crtFlicker 7s infinite;
}
body[data-intensity="crt"] .focus__cell:hover {
box-shadow: inset 0 0 60px var(--accent-glow);
}
body[data-intensity="crt"] .rail__photo,
body[data-intensity="crt"] .term {
border-color: var(--accent);
}
@keyframes scanShift {
from { background-position-y: 0; }
to { background-position-y: 80px; }
}
@keyframes crtFlicker {
0%, 92%, 100% { filter: none; }
93% { filter: brightness(1.06); }
94% { filter: brightness(0.93); }
95% { filter: brightness(1.04); }
96% { filter: brightness(0.97); }
}
/* --- VOICE ------------------------------------------ */
/* Brutalist: all-mono uppercase + bracketed accents */
body[data-voice="brutalist"] .hero__title,
body[data-voice="brutalist"] .h-display,
body[data-voice="brutalist"] .h-section,
body[data-voice="brutalist"] .timeline__role,
body[data-voice="brutalist"] .focus__cell h3,
body[data-voice="brutalist"] .current-card h3,
body[data-voice="brutalist"] .svc__head h2,
body[data-voice="brutalist"] .cta h2 {
font-family: var(--f-mono) !important;
text-transform: uppercase;
letter-spacing: -0.005em;
font-weight: 500;
}
body[data-voice="brutalist"] .hero__title { font-size: clamp(40px, 5.6vw, 72px); }
body[data-voice="brutalist"] em,
body[data-voice="brutalist"] .h-display em,
body[data-voice="brutalist"] .h-section em,
body[data-voice="brutalist"] .hero__title em {
font-family: var(--f-mono) !important;
font-style: normal !important;
font-weight: 500 !important;
color: var(--accent) !important;
text-transform: uppercase;
}
body[data-voice="brutalist"] .hero__title em::before,
body[data-voice="brutalist"] .h-section em::before,
body[data-voice="brutalist"] .h-display em::before,
body[data-voice="brutalist"] .svc__head h2 em::before,
body[data-voice="brutalist"] .cta h2 em::before {
content: "[";
opacity: 0.55;
margin-right: 0.05em;
}
body[data-voice="brutalist"] .hero__title em::after,
body[data-voice="brutalist"] .h-section em::after,
body[data-voice="brutalist"] .h-display em::after,
body[data-voice="brutalist"] .svc__head h2 em::after,
body[data-voice="brutalist"] .cta h2 em::after {
content: "]";
opacity: 0.55;
margin-left: 0.05em;
}
/* Sharp: all-sans, italic→highlight bar */
body[data-voice="sharp"] em,
body[data-voice="sharp"] .h-display em,
body[data-voice="sharp"] .h-section em,
body[data-voice="sharp"] .hero__title em,
body[data-voice="sharp"] .svc__head h2 em,
body[data-voice="sharp"] .cta h2 em {
font-family: var(--f-sans) !important;
font-style: normal !important;
font-weight: 600 !important;
color: var(--text) !important;
background:
linear-gradient(180deg, transparent 62%, var(--accent-glow) 62%, var(--accent-glow) 90%, transparent 90%);
padding: 0 0.06em;
}
/* =============================================================
RESPONSIVE
============================================================= */
@media (max-width: 1080px) {
.main__inner { padding: 0 40px; }
}
@media (max-width: 880px) {
.app { grid-template-columns: 1fr; }
.rail {
position: relative;
height: auto;
border-right: 0;
border-bottom: 1px solid var(--border);
padding: 20px 24px;
}
.status { left: 0; }
.main__inner { padding: 0 24px; }
.rail__nav {
flex-direction: row;
overflow-x: auto;
gap: 4px;
}
.rail__nav a {
grid-template-columns: auto;
white-space: nowrap;
}
.rail__nav .num, .rail__nav .arrow { display: none; }
.rail__meta { display: none; }
.rail__divider { display: none; }
.rail__brand { margin-bottom: 16px; }
.rail__photo {
width: 56px;
margin: 0 0 12px;
border-radius: 8px;
}
.rail__photo img { aspect-ratio: 1 / 1; }
}