/* nico186.com — Stage 04 preview Direction 3 (Signal) structure + Direction 1 (Editorial) warmth. Dark-first · mineral-sage · Instrument Sans + Inter + DM Mono. All colors are approved-palette tokens; tune here only. */ :root { --nb: #10110F; /* near black — page */ --charcoal: #1A1B19; /* soft charcoal — surfaces */ --charcoal-lift: #20211D;/* lifted card surface */ --ivory: #F2F0EA; /* warm ivory — headlines */ --body: #C9C6BC; /* readable warm gray — body copy */ --meta: #99978F; /* muted stone — secondary / captions */ --sage: #6E7663; /* mineral sage — rules, dots, underlines (>=3:1) */ --sage-text: #808A73; /* lighter sage for small LABEL/INDEX text (AA 4.5+ on near-black) */ --sage-hi: #869077; /* sage hover/focus */ --hair: rgba(110,118,99,0.28); /* sage hairline */ --hair-soft: rgba(242,240,234,0.08); --nav-bg: rgba(16,17,15,0.72); /* translucent header */ --ph-bg: rgba(16,17,15,0.70); /* placeholder badge bg */ --sans: 'Instrument Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace; --maxw: 1160px; --gutter: clamp(20px, 5vw, 72px); --sec-pad: clamp(64px, 9vw, 132px); --radius: 10px; } /* Light theme — opt-in via [data-theme="light"] on . Dark remains the approved default. Warm paper, not stark white; sage deepened for contrast; used only as an accent. */ html[data-theme="light"] { --nb: #F4F1EA; --charcoal: #ECE9DF; --charcoal-lift: #E4E0D5; --ivory: #1A1B16; --body: #45463E; --meta: #6E6D62; --sage: #5B6349; --sage-text: #55603F; --sage-hi: #6E7657; --hair: rgba(91,99,73,0.34); --hair-soft: rgba(26,27,22,0.10); --nav-bg: rgba(244,241,234,0.78); --ph-bg: rgba(244,241,234,0.80); } html[data-theme="light"] ::selection { background: rgba(91,99,73,0.24); color: var(--ivory); } * , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--nb); color: var(--body); font-family: var(--font-body); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(110,118,99,0.35); color: var(--ivory); } :focus-visible { outline: 2px solid var(--sage-hi); outline-offset: 3px; border-radius: 2px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } /* ---------- Type ---------- */ h1, h2, h3 { font-family: var(--sans); color: var(--ivory); font-weight: 500; line-height: 1.06; letter-spacing: -0.015em; } .index { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-text); display: inline-flex; align-items: center; gap: 12px; } .index::before { content: ""; width: 26px; height: 1px; background: var(--sage); opacity: 0.8; } .lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--body); max-width: 60ch; } .meta { color: var(--meta); } em.soft { font-style: italic; color: var(--ivory); font-weight: 400; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair-soft); } .nav-actions { display: flex; align-items: center; gap: 18px; } .theme-toggle { background: none; border: 1px solid var(--hair-soft); color: var(--meta); cursor: pointer; width: 34px; height: 34px; border-radius: 40px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s, border-color 0.2s; } .theme-toggle:hover { color: var(--ivory); border-color: var(--sage); } .theme-toggle .moon { display: none; } .theme-toggle .sun { display: block; } html[data-theme="light"] .theme-toggle .sun { display: none; } html[data-theme="light"] .theme-toggle .moon { display: block; } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { font-family: var(--sans); color: var(--ivory); font-size: 1.02rem; letter-spacing: 0.01em; display: flex; align-items: center; gap: 9px; } .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); } .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; } .nav-links a { font-size: 0.82rem; color: var(--meta); letter-spacing: 0.02em; transition: color 0.2s; } .nav-links a:hover { color: var(--ivory); } .nav-resume { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory); border-bottom: 1px solid var(--sage); padding-bottom: 2px; } .nav-toggle { display: none; background: none; border: 0; color: var(--ivory); cursor: pointer; padding: 6px; } /* ---------- Buttons / CTAs ---------- */ .cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .cta-primary { font-family: var(--font-body); font-size: 0.98rem; color: var(--ivory); border-bottom: 1.5px solid var(--sage); padding: 4px 1px 5px; transition: border-color 0.2s, color 0.2s; } .cta-primary:hover { border-color: var(--sage-hi); color: #fff; } .cta-secondary { display: inline-flex; align-items: center; gap: 8px; font-size: 0.94rem; color: var(--meta); transition: color 0.2s; } .cta-secondary .arw { transition: transform 0.2s; } .cta-secondary:hover { color: var(--ivory); } .cta-secondary:hover .arw { transform: translateX(4px); } /* ---------- Sections ---------- */ section { padding-block: var(--sec-pad); border-top: 1px solid var(--hair-soft); } section:first-of-type { border-top: 0; } .sec-head { margin-bottom: clamp(28px, 4vw, 48px); } .sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-top: 16px; max-width: 20ch; } .prose p { margin-bottom: 1.1rem; max-width: 62ch; } .prose p:last-child { margin-bottom: 0; } .prose strong { color: var(--ivory); font-weight: 500; } .prose a { color: var(--ivory); border-bottom: 1px solid var(--sage); transition: border-color 0.2s; } .prose a:hover { border-color: var(--sage-hi); } /* ---------- Hero ---------- */ .hero { padding-top: clamp(52px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 104px); border-top: 0; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -0.025em; } .hero h1 .emph { font-style: italic; font-weight: 600; } .hero-sub { margin-top: 26px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--body); max-width: 44ch; } .hero-cta { margin-top: 34px; } .hero-loc { margin-top: 30px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--meta); } .hero-portrait { position: relative; } .hero-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--hair); } /* ---------- Figure / photography ---------- */ figure { margin: 0; } .fig img { width: 100%; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--hair-soft); } figcaption { margin-top: 12px; display: flex; align-items: baseline; gap: 10px; font-size: 0.86rem; color: var(--meta); } figcaption .mk { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); flex: none; transform: translateY(-1px); } figcaption .who { color: var(--ivory); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .split.narrow-img { grid-template-columns: 1.1fr 0.9fr; } /* ---------- Career arc ---------- */ .arc { display: grid; gap: 0; } .arc-item { display: grid; grid-template-columns: 132px 1fr; gap: 28px; padding: 22px 0; border-top: 1px solid var(--hair-soft); } .arc-item:first-child { border-top: 0; } .arc-when { font-family: var(--mono); font-size: 0.76rem; color: var(--sage-text); letter-spacing: 0.04em; padding-top: 4px; } .arc-what h3 { font-size: 1.22rem; margin-bottom: 4px; } .arc-what p { color: var(--body); font-size: 0.98rem; max-width: 58ch; } /* ---------- Proof ---------- */ .proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); border-radius: var(--radius); overflow: hidden; } .proof-card { background: var(--nb); padding: 30px 26px; } .proof-num { font-family: var(--sans); font-weight: 500; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--ivory); line-height: 1; } .proof-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-text); margin-top: 10px; } .proof-note { margin-top: 20px; font-size: 0.86rem; color: var(--meta); } /* ---------- In the room (visible sequence) ---------- */ .room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .room-grid figure img { aspect-ratio: 4/3; } .room-wide { grid-column: span 2; } .room-wide img { aspect-ratio: 16/9; } .people-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .people-row figure img { aspect-ratio: 4/5; } .subhead { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-text); margin: 4px 0 18px; } /* ---------- Callout / acre teaser ---------- */ .card { background: var(--charcoal); border: 1px solid var(--hair-soft); border-radius: 14px; padding: clamp(26px, 4vw, 44px); } .pill-list { list-style: none; display: grid; gap: 12px; margin-top: 20px; } .pill-list li { padding-left: 20px; position: relative; color: var(--body); font-size: 0.98rem; } .pill-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--sage); } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: start; } .contact h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); } .cta-stack { list-style: none; display: grid; gap: 2px; } .cta-stack li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; border-top: 1px solid var(--hair-soft); color: var(--ivory); font-size: 1.02rem; transition: padding-left 0.2s, color 0.2s; } .cta-stack li:last-child a { border-bottom: 1px solid var(--hair-soft); } .cta-stack li a:hover { padding-left: 10px; } .cta-stack .rank { font-family: var(--mono); font-size: 0.72rem; color: var(--sage-text); letter-spacing: 0.1em; min-width: 26px; } .cta-stack .lbl { flex: 1; } .cta-stack .arw { color: var(--meta); } .socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .socials a { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--meta); border: 1px solid var(--hair-soft); border-radius: 40px; padding: 8px 15px; transition: border-color 0.2s, color 0.2s; } .socials a:hover { color: var(--ivory); border-color: var(--sage); } /* ---------- Footer ---------- */ footer { border-top: 1px solid var(--hair-soft); padding-block: 30px; } .foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--meta); } /* ---------- Placeholder flag ---------- */ .ph { position: relative; } .ph::after { content: "PLACEHOLDER"; position: absolute; top: 12px; right: 12px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--meta); background: var(--ph-bg); border: 1px solid var(--hair-soft); padding: 3px 7px; border-radius: 4px; } .draft-note { font-family: var(--mono); font-size: 0.72rem; color: var(--sage-text); letter-spacing: 0.06em; } /* ---------- Reveal motion ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .nav-links, .nav-resume { display: none; } .nav-toggle { display: inline-flex; } .nav[data-open="true"] .nav-links { display: flex; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 4px; background: var(--charcoal); border-bottom: 1px solid var(--hair-soft); padding: 14px var(--gutter) 22px; } .nav[data-open="true"] .nav-links a { padding: 10px 0; font-size: 0.98rem; } .hero-grid { grid-template-columns: 1fr; } .hero-portrait { order: -1; max-width: 360px; } .split, .split.narrow-img, .contact-grid { grid-template-columns: 1fr; } .arc-item { grid-template-columns: 1fr; gap: 6px; } .arc-when { padding-top: 0; } .proof { grid-template-columns: 1fr 1fr; } .room-grid, .people-row { grid-template-columns: 1fr 1fr; } .room-wide { grid-column: span 2; } } @media (max-width: 540px) { body { font-size: 16px; } .proof { grid-template-columns: 1fr 1fr; } .room-grid { grid-template-columns: 1fr; } .room-wide { grid-column: auto; } .cta-row { gap: 18px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .cta-secondary:hover .arw { transform: none; } }