/* ========================================================= Elias Moreno · personal site Editorial / terminal, hand-written CSS. Sections: tokens, reset, type, layout, hero, timeline, skills, contact, footer, motion, responsive. ========================================================= */ :root { /* rhythm, layout, easing live on :root; palette + type come from theme classes on . Default theme is Graphite Jade. */ color-scheme: dark; /* rhythm */ --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.85rem); --step-0: clamp(0.93rem, 0.9rem + 0.15vw, 1rem); --step-1: clamp(1.05rem, 1rem + 0.3vw, 1.18rem); --step-2: clamp(1.3rem, 1.18rem + 0.6vw, 1.55rem); --step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem); --step-4: clamp(2.6rem, 2rem + 3vw, 4.4rem); --step-5: clamp(4rem, 2.8rem + 7vw, 9rem); /* layout */ --gutter: clamp(20px, 4vw, 56px); --max: 1120px; --nav-h: 64px; /* easing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ========================================================= THEMES. Graphite Jade in a dark and light variant. Toggle driven by the button in the topbar (see timeline.js). All color and font tokens live here so the rest of the CSS is theme-agnostic. ========================================================= */ html.theme-jade { color-scheme: dark; --bg: #0e0f10; --bg-raised: #161719; --ink: #e9e6dc; --ink-dim: #a09c8f; --ink-mute: #6c685c; --line: #1b1c1d; --line-strong: #282a2c; --accent: #6cc9a1; --accent-soft: #9fdcc1; --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --font-body: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } html.theme-jade-light { color-scheme: light; --bg: #f5f1e6; --bg-raised: #ece7d6; --ink: #18171a; --ink-dim: #57544a; --ink-mute: #8a8676; --line: #e4ded0; --line-strong: #c9c2ac; --accent: #2f8f68; --accent-soft: #52b189; --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --font-body: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* Light-theme grain: additive (multiply) reads as texture; the default overlay mode only works on dark. */ html.theme-jade-light .grain { mix-blend-mode: multiply; opacity: 0.05; } /* --------- reset --------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; font-weight: 400; letter-spacing: -0.005em; min-height: 100dvh; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; } em { font-style: italic; } ::selection { background: var(--accent); color: var(--bg); } /* --------- a11y --------- */ .skip { position: absolute; left: 12px; top: 12px; padding: 10px 14px; background: var(--accent); color: var(--bg); font-family: var(--font-body); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; transform: translateY(-140%); transition: transform 200ms var(--ease-out); z-index: 100; } .skip:focus { transform: translateY(0); outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* --------- atmosphere: grain --------- */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; } /* --------- topbar --------- */ .topbar { position: sticky; top: 0; z-index: 20; height: var(--nav-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid var(--line); } .mark { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 12px; color: var(--ink); letter-spacing: 0.02em; } .mark-letter { display: inline-grid; place-items: center; width: 28px; height: 28px; font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1; color: var(--accent); border: 1px solid var(--line-strong); border-radius: 2px; background: var(--bg-raised); transform: translateY(-1px); } .mark-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--ink-dim); } .nav-cluster { display: flex; align-items: center; gap: 16px; position: relative; } .primary-nav { display: flex; align-items: center; } .nav-list { display: flex; align-items: center; gap: 20px; font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-dim); } .nav-list li { display: flex; align-items: center; } .nav-list a { position: relative; padding-bottom: 4px; transition: color 160ms var(--ease-out); } .nav-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); } .nav-list a:hover { color: var(--ink); } .nav-list a:hover::after { transform: scaleX(1); } .nav-cv { color: var(--ink); border: 1px solid var(--line-strong); border-radius: 2px; height: 30px; min-width: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-family: var(--font-body); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out); } .nav-cv:hover { color: var(--bg); background: var(--accent); border-color: var(--accent); } .nav-toggle { display: none; background: transparent; border: 1px solid var(--line-strong); border-radius: 2px; width: 34px; height: 30px; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-dim); transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out); } .nav-toggle:hover { color: var(--accent); border-color: var(--accent); } .nav-toggle-bar { display: block; width: 14px; height: 1px; background: currentColor; transition: transform 220ms var(--ease-out), opacity 180ms var(--ease-out); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* --------- layout shell --------- */ main { position: relative; z-index: 2; } section { padding: clamp(80px, 12vw, 160px) var(--gutter); max-width: var(--max); margin: 0 auto; } /* --------- hero --------- */ .hero { padding-top: clamp(80px, 12vh, 180px); padding-bottom: clamp(60px, 10vw, 120px); position: relative; } .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-dim); margin: 0 0 clamp(24px, 4vw, 40px); } .kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent); } .display { font-family: var(--font-display); font-weight: 400; font-size: var(--step-5); line-height: 0.92; letter-spacing: -0.02em; margin: 0; text-wrap: balance; text-indent: -0.03em; } .display-line { display: block; } .display em { color: var(--accent); font-style: italic; } .lede { font-family: var(--font-body); font-size: var(--step-1); line-height: 1.55; color: var(--ink); max-width: 62ch; margin: clamp(32px, 5vw, 56px) 0 0; text-wrap: pretty; font-weight: 300; } .nowrap { white-space: nowrap; } .hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(40px, 6vw, 64px); font-family: var(--font-body); font-size: var(--step--1); } .hero-meta li { background: var(--bg); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; min-height: 96px; } .meta-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; color: var(--ink-mute); } .scroll-cue { position: absolute; right: var(--gutter); bottom: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); transition: color 160ms var(--ease-out); } .scroll-cue:hover { color: var(--accent); } .scroll-cue-line { width: 1px; height: 56px; background: linear-gradient( to bottom, var(--line-strong), var(--accent) 60%, var(--accent) ); position: relative; overflow: hidden; } .scroll-cue-line::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(to bottom, transparent, var(--ink)); animation: trickle 2.8s var(--ease-in-out) infinite; } @keyframes trickle { 0% { top: -30%; } 60%, 100% { top: 100%; } } /* --------- section header --------- */ .section-head { margin-bottom: clamp(48px, 8vw, 96px); max-width: 720px; } .section-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-mute); margin: 0 0 clamp(16px, 2vw, 24px); } .section-title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .section-title em { color: var(--accent); font-style: italic; } .section-sub { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; color: var(--ink-dim); margin: clamp(16px, 2vw, 24px) 0 0; max-width: 52ch; text-wrap: pretty; font-weight: 300; } /* --------- timeline --------- */ .timeline { position: relative; } .timeline-layout { position: relative; } .year-chip { position: sticky; top: calc(var(--nav-h) + 28px); float: right; margin: 0 0 -40px; padding: 10px 14px; font-family: var(--font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 2px; z-index: 5; display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-end; min-width: 112px; transition: transform 400ms var(--ease-out); } .year-chip-label { opacity: 0.7; } .year-chip-value { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1; color: var(--accent); letter-spacing: 0; font-feature-settings: "tnum" 1; } .rail { position: relative; clear: right; } .rail::before { content: ""; position: absolute; top: 64px; bottom: 24px; left: 168px; width: 1px; background: linear-gradient( to bottom, transparent 0%, var(--line-strong) 6%, var(--line-strong) 94%, transparent 100% ); } .entry { position: relative; display: grid; grid-template-columns: 168px 1fr; gap: 72px; padding: 64px 0; } .entry + .entry { border-top: 1px dashed var(--line); } .entry-rail { position: relative; padding-top: 14px; } .entry-time { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); text-align: right; padding-right: 24px; font-feature-settings: "tnum" 1; } .entry-node { position: absolute; top: 20px; left: 162px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink-mute); box-shadow: 0 0 0 5px var(--bg); transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out); } .entry.is-revealed .entry-node { background: var(--accent); border-color: var(--accent); } .entry-card { padding-left: 0; max-width: 64ch; } .entry-head { margin-bottom: clamp(20px, 3vw, 28px); } .entry-role { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); margin: 0 0 10px; } .entry-company { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.015em; color: var(--ink); margin: 0; text-wrap: balance; } .entry-tagline { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.4; color: var(--ink-dim); margin: 14px 0 0; text-wrap: pretty; } .entry-prose { font-size: var(--step-0); line-height: 1.7; color: var(--ink); font-weight: 300; margin: 0 0 clamp(22px, 3vw, 30px); max-width: 62ch; text-wrap: pretty; } .entry-prose strong { color: var(--ink); font-weight: 600; } .entry-points { display: flex; flex-direction: column; gap: 18px; font-size: var(--step-0); line-height: 1.7; color: var(--ink); font-weight: 300; text-wrap: pretty; } .entry-points li { position: relative; padding-left: 22px; } .entry-points li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-family: var(--font-body); font-weight: 400; } .entry-points strong { color: var(--ink); font-weight: 600; } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 3vw, 32px); } .tags li { font-family: var(--font-body); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--bg-raised); transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); } .entry.is-revealed .tags li { /* no-op; hover below */ } .tags li:hover { color: var(--accent); border-color: var(--accent); } /* --------- consulting --------- */ .consulting-cta { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding: clamp(28px, 4vw, 40px) 0; margin: 0; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.1; color: var(--ink); position: relative; transition: color 220ms var(--ease-out); } .consulting-cta em { color: var(--accent); } .consulting-cta-meta { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); margin-top: 10px; } .consulting-cta:hover { color: var(--accent); } .consulting-cta .arrow { display: inline-block; transition: transform 320ms var(--ease-out); margin-left: 8px; } .consulting-cta:hover .arrow { transform: translateX(6px); } /* --------- contact --------- */ .contact-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); } .contact-list li { display: grid; grid-template-columns: 200px 1fr; gap: 48px; padding: clamp(20px, 2.5vw, 28px) 0; border-bottom: 1px solid var(--line-strong); align-items: baseline; } .contact-label { font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-mute); } .contact-list a { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); position: relative; display: inline-block; transition: color 180ms var(--ease-out); word-break: break-word; } .contact-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out); } .contact-list a:hover { color: var(--accent); } .contact-list a:hover::after { transform: scaleX(1); } /* --------- footer --------- */ .footer { padding: 40px var(--gutter) 48px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-mute); position: relative; z-index: 2; } .footer p { margin: 0; } .blink { color: var(--accent); animation: blink 1.1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } /* --------- reveal animation --------- */ /* Hero: CSS-only staggered reveal via --d */ @keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } [data-reveal="hero"] { opacity: 0; animation: fadeUp 900ms var(--ease-out) both; animation-delay: var(--d, 0ms); will-change: opacity, transform; } /* Timeline entries are always visible. The "scroll reveal" is communicated through the rail node lighting up to the accent color and the sticky year chip updating, both driven by the IO in timeline.js. Keeps deep-linking and no-JS viewers readable. */ .entry[data-reveal] { opacity: 1; transform: none; } /* --------- light/dark toggle --------- */ .theme-toggle { background: transparent; border: 1px solid var(--line-strong); border-radius: 2px; width: 30px; height: 30px; padding: 0; cursor: pointer; display: inline-grid; place-items: center; color: var(--ink-dim); transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out); } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle svg { width: 14px; height: 14px; } .theme-toggle .icon-moon, .theme-toggle .icon-sun { display: none; } html.theme-jade .theme-toggle .icon-sun { display: block; } html.theme-jade-light .theme-toggle .icon-moon { display: block; } /* --------- responsive --------- */ @media (max-width: 820px) { .topbar { padding: 0 20px; } .nav-list { gap: 18px; } .hero-meta { grid-template-columns: 1fr; } .scroll-cue { display: none; } .year-chip { position: static; float: none; margin: 0 0 32px; align-self: flex-start; align-items: flex-start; } .rail::before { left: 8px; top: 32px; bottom: 16px; } .entry { grid-template-columns: 1fr; gap: 16px; padding: 48px 0 48px 36px; } .entry-rail { padding-top: 0; } .entry-time { text-align: left; padding-right: 0; } .entry-node { top: 6px; left: -30px; } .skill-row, .contact-list li { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; } } @media (max-width: 640px) { .nav-cluster { gap: 10px; } .nav-toggle { display: inline-flex; } .primary-nav { position: static; } .nav-list { position: absolute; top: calc(100% + 14px); right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0; min-width: 200px; background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 2px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms; } .nav-list.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); } .nav-list li { width: 100%; } .nav-list a { display: block; padding: 12px 20px; width: 100%; } .nav-list a::after { display: none; } .nav-list a:hover { color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); } } @media (max-width: 520px) { .mark-label { display: none; } .kicker { font-size: 10px; letter-spacing: 0.14em; gap: 8px; } .footer { justify-content: flex-start; } } /* --------- reduced motion --------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal="hero"], .entry[data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; } .scroll-cue-line::after, .blink { display: none; } }