/** * modern.css * The Modern toggle experience for The UX Yeti portfolio. * Applied via [data-theme="modern"] on . * Space styles are untouched — all rules here are scoped to [data-theme="modern"]. * * References: * SpaceX (cinematic hero confidence) * Tesla (restraint, direct CTAs) * Dave Holloway (editorial portfolio rhythm, alternating panels) * Wanted for Nothing (minimal sharp grid) * Ohzi Interactive (scroll reveals, hover craft) * 50 Jahre Hitparade (timeline storytelling) * Bahama Buck's (accent pops, branded personality) */ /* ============================================================ FONTS — Inter + DM Serif Display Loaded via in each page's for parallel fetch. ============================================================ */ /* ============================================================ DESIGN TOKENS ============================================================ */ [data-theme="modern"] { --m-bg: #080808; --m-surface: #101010; --m-surface-2: #181818; --m-surface-3: #222222; --m-border: rgba(255, 255, 255, 0.07); --m-border-mid: rgba(255, 255, 255, 0.12); --m-fg: #f0f0f0; --m-muted: rgba(240, 240, 240, 0.42); --m-muted-2: rgba(240, 240, 240, 0.22); --m-accent: #c8ff00; --m-accent-dim: rgba(200, 255, 0, 0.12); --m-accent-glow: rgba(200, 255, 0, 0.18); --m-serif: 'DM Serif Display', Georgia, serif; --m-sans: 'Inter', system-ui, -apple-system, sans-serif; --m-mono: ui-monospace, 'SF Mono', 'Menlo', monospace; --m-radius: 4px; --m-radius-lg: 8px; --m-section-pad: clamp(80px, 12vw, 160px); --m-container: clamp(20px, 5vw, 80px); } /* ============================================================ SPACE-ONLY SECTIONS — hidden when Modern is active ============================================================ */ [data-theme="modern"] .space-only { display: none !important; } /* ============================================================ BASE RESETS ============================================================ */ [data-theme="modern"] *, [data-theme="modern"] *::before, [data-theme="modern"] *::after { box-sizing: border-box; } [data-theme="modern"] body { background-color: var(--m-bg); color: var(--m-fg); font-family: var(--m-sans); font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; } [data-theme="modern"] a { color: inherit; text-decoration: none; } [data-theme="modern"] img { display: block; max-width: 100%; } [data-theme="modern"] :focus-visible { outline: 2px solid var(--m-accent); outline-offset: 3px; } /* ============================================================ HEADER ============================================================ */ [data-theme="modern"] .site-header--arcane { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; border-bottom: 1px solid transparent; transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease; } [data-theme="modern"] .site-header--arcane.m-header-scrolled { background: rgba(8, 8, 8, 0.82); border-bottom-color: var(--m-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } [data-theme="modern"] .header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; padding: 0 var(--m-container); height: 64px; } /* Logo */ [data-theme="modern"] .header-logo img, [data-theme="modern"] .nav-logo img { filter: brightness(0) invert(1); height: 28px; width: auto; } /* Hide Space nav pills — keep .header-nav visible so the toggle inside it works. Uses .site-header--arcane to beat the inline-style rule with the same selector. */ [data-theme="modern"] .header-site-nav { display: none !important; } [data-theme="modern"] .site-header--arcane .header-nav { display: inline-flex !important; align-items: center; gap: 8px; background: transparent !important; border: none !important; padding: 0 !important; } [data-theme="modern"] .site-header--arcane .header-nav .nav-links { display: none !important; } /* Modern text nav */ [data-theme="modern"] .m-nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 36px); list-style: none; margin: 0; padding: 0; } [data-theme="modern"] .m-nav a { font-family: var(--m-sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-muted); position: relative; transition: color 0.2s ease; } [data-theme="modern"] .m-nav a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--m-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } [data-theme="modern"] .m-nav a:hover { color: var(--m-fg); } [data-theme="modern"] .m-nav a:hover::after { transform: scaleX(1); } /* Toggle label states in Modern mode */ [data-theme="modern"] .theme-mode__label--on { color: var(--m-muted); } [data-theme="modern"] .theme-mode__label--off { color: var(--m-accent); font-weight: 600; } [data-theme="modern"] .theme-mode__track { background: rgba(200, 255, 0, 0.2); box-shadow: 0 0 0 1px rgba(200, 255, 0, 0.4); } [data-theme="modern"] .theme-mode__thumb { background: var(--m-accent); transform: translateX(18px); } [data-theme="modern"] .theme-mode__switch { cursor: pointer !important; } /* Show Modern nav in Modern mode */ [data-theme="modern"] .m-nav { display: flex !important; } /* Mobile burger */ [data-theme="modern"] .nav-burger__bar { background: var(--m-fg); } /* Mobile drawer */ [data-theme="modern"] .nav-mobile-drawer { background: var(--m-surface); border-left: 1px solid var(--m-border); } [data-theme="modern"] .nav-mobile-drawer .nav-pill { color: var(--m-fg); } [data-theme="modern"] .nav-mobile-drawer .nav-pill:hover { background: var(--m-surface-2); } [data-theme="modern"] .nav-mobile-scrim { background: rgba(0, 0, 0, 0.75); } /* ============================================================ MODERN EXPERIENCE WRAPPER (index.html only) ============================================================ */ #modern-experience { display: none; background: var(--m-bg); font-family: var(--m-sans); color: var(--m-fg); overflow-x: hidden; } [data-theme="modern"] #modern-experience { display: block; } /* Container utility */ .m-container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--m-container); padding-right: var(--m-container); } /* Section label (eyebrow) */ .m-eyebrow { font-family: var(--m-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-muted); display: block; margin-bottom: 24px; } /* ============================================================ HERO SECTION ============================================================ */ .m-hero { position: relative; min-height: 100dvh; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: linear-gradient(165deg, #0a0a0a 0%, #080808 60%, #0c0c0a 100%); padding-top: 80px; padding-bottom: 80px; } /* Grain overlay */ .m-hero::before { content: ''; position: absolute; inset: 0; background-image: url('./assets/textures/noise.svg'); background-size: 200px 200px; opacity: 0.55; pointer-events: none; z-index: 0; } /* Accent gradient line at top */ .m-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--m-accent) 40%, transparent 100%); opacity: 0.5; pointer-events: none; } .m-hero__inner { position: relative; z-index: 1; } .m-hero__tag { font-family: var(--m-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-accent); margin-bottom: clamp(32px, 6vh, 64px); opacity: 0; transform: translateY(12px); animation: m-fade-up 0.5s ease forwards 0.1s; } .m-hero__statements { list-style: none; margin: 0 0 clamp(32px, 6vh, 56px); padding: 0; } .m-hero__statement { font-family: var(--m-serif); font-size: clamp(2.2rem, 5.5vw, 6rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--m-fg); margin-bottom: 0.08em; opacity: 0; transform: translateY(24px); } .m-hero__statement.m-hero__statement--italic { font-style: italic; color: rgba(240, 240, 240, 0.7); font-size: clamp(1.6rem, 4vw, 4.5rem); } /* ── Rotating hero phrase ──────────────────────────────────────────────────── */ /* The phrase element holds the full text directly as textContent. display:inline-block lets filter:blur() render correctly in all browsers without disrupting the surrounding italic line height. */ .m-hero__rotating-phrase { display: inline-block; vertical-align: baseline; font-style: normal; } .m-hero__statement.m-revealed { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s ease; } .m-hero__meta { font-family: var(--m-mono); font-size: clamp(0.65rem, 1vw, 0.78rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-accent); opacity: 0; animation: m-fade-up 0.5s ease forwards 1.2s; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .m-hero__meta-sep { width: 32px; height: 1px; background: var(--m-accent); opacity: 0.5; flex-shrink: 0; } .m-hero__scroll { position: absolute; bottom: clamp(24px, 5vh, 48px); right: var(--m-container); font-family: var(--m-sans); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--m-muted); display: flex; align-items: center; gap: 8px; text-transform: uppercase; text-decoration: none; opacity: 0; animation: m-fade-up 0.5s ease forwards 1.5s; transition: color 0.2s ease; } .m-hero__scroll:hover { color: var(--m-fg); } .m-hero__scroll-arrow { display: inline-block; animation: m-bounce 2s ease-in-out infinite; } /* ============================================================ SELECTED WORK PANELS ============================================================ */ .m-work { padding: var(--m-section-pad) 0; background: var(--m-bg); } .m-work__header { margin-bottom: clamp(48px, 8vw, 80px); } .m-work__title { font-family: var(--m-serif); font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--m-fg); margin: 0; } .m-work-panels { display: flex; flex-direction: column; gap: 0; } .m-work-panel { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(360px, 52vw, 560px); border-top: 1px solid var(--m-border); overflow: hidden; } .m-work-panel:last-child { border-bottom: 1px solid var(--m-border); } .m-work-panel--alt { direction: rtl; } .m-work-panel--alt > * { direction: ltr; } .m-work-panel__media { position: relative; overflow: hidden; background: var(--m-surface); } .m-work-panel__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .m-work-panel:hover .m-work-panel__img { transform: scale(1.04); } .m-work-panel__badge { position: absolute; top: 20px; left: 20px; font-family: var(--m-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-fg); background: rgba(8, 8, 8, 0.72); border: 1px solid rgba(255, 255, 255, 0.25); padding: 4px 10px; border-radius: 2px; z-index: 2; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .m-work-panel__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 64px); background: var(--m-surface); border-left: 1px solid var(--m-border); } .m-work-panel--alt .m-work-panel__content { border-left: none; border-right: 1px solid var(--m-border); } .m-work-panel__num { font-family: var(--m-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-muted-2); margin-bottom: 12px; } .m-work-panel__project { font-family: var(--m-serif); font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--m-fg); margin: 0 0 12px; } .m-work-panel__sector { font-family: var(--m-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-accent); margin-bottom: 16px; } .m-work-panel__desc { font-size: 0.9rem; color: var(--m-muted); line-height: 1.6; margin-bottom: 28px; max-width: 38ch; } .m-work-panel__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--m-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-fg); border-bottom: 1px solid var(--m-border-mid); padding-bottom: 4px; align-self: flex-start; transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease; } .m-work-panel__cta:hover { color: var(--m-accent); border-color: var(--m-accent); gap: 14px; } /* View all work link */ .m-work__footer { margin-top: clamp(40px, 6vw, 64px); text-align: center; } .m-work__all-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--m-sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-muted); border: 1px solid var(--m-border); padding: 14px 28px; border-radius: var(--m-radius); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .m-work__all-link:hover { color: var(--m-accent); border-color: var(--m-accent); background: var(--m-accent-dim); } /* ============================================================ PAST WORK GRID ============================================================ */ .m-pastwork { padding: var(--m-section-pad) 0; background: var(--m-surface); border-top: 1px solid var(--m-border); } .m-pastwork__header { margin-bottom: clamp(40px, 6vw, 64px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .m-pastwork__title { font-family: var(--m-serif); font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--m-fg); margin: 0; } .m-pastwork__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--m-border); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); overflow: hidden; } .m-pastwork-card { display: flex; flex-direction: column; padding: clamp(20px, 3vw, 32px); background: var(--m-surface); text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; position: relative; min-height: 160px; } .m-pastwork-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--m-accent); transform: scaleY(0); transform-origin: bottom; transition: transform 0.25s ease; } .m-pastwork-card:hover { background: var(--m-surface-2); transform: translateY(-2px); } .m-pastwork-card:hover::before { transform: scaleY(1); } .m-pastwork-card__company { font-family: var(--m-sans); font-size: clamp(0.95rem, 1.4vw, 1.05rem); font-weight: 600; color: var(--m-fg); margin-bottom: 6px; line-height: 1.3; } .m-pastwork-card__sector { font-family: var(--m-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-muted); margin-bottom: auto; padding-bottom: 16px; } .m-pastwork-card__role { font-family: var(--m-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-fg); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--m-border-mid); padding: 3px 8px; border-radius: 2px; align-self: flex-start; margin-top: 12px; } .m-pastwork__footer { margin-top: 36px; display: flex; justify-content: center; } /* ============================================================ CAREER TIMELINE ============================================================ */ .m-timeline { padding: var(--m-section-pad) 0; background: var(--m-bg); border-top: 1px solid var(--m-border); } .m-timeline__header { margin-bottom: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; } .m-timeline__title { font-family: var(--m-serif); font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--m-fg); margin: 0; } .m-timeline__stat { text-align: right; flex-shrink: 0; } .m-timeline__stat-num { font-family: var(--m-serif); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; color: var(--m-accent); letter-spacing: -0.03em; display: block; } .m-timeline__stat-label { font-family: var(--m-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-muted); } .m-timeline__eras { display: flex; flex-direction: column; gap: 0; } .m-timeline__era { border-top: 1px solid var(--m-border); padding-top: 32px; padding-bottom: 32px; } .m-timeline__era-label { font-family: var(--m-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-accent); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .m-timeline__era-label::after { content: ''; flex: 1; height: 1px; background: var(--m-border); } .m-timeline__entries { display: flex; flex-direction: column; gap: 0; } .m-timeline__entry { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--m-border); opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .m-timeline__entry.m-revealed { opacity: 1; transform: translateY(0); } .m-timeline__entry:last-child { border-bottom: none; } .m-timeline__entry-company { font-family: var(--m-sans); font-size: clamp(0.88rem, 1.2vw, 1rem); font-weight: 600; color: var(--m-fg); line-height: 1.4; } .m-timeline__entry-role { font-family: var(--m-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--m-muted); line-height: 1.5; } .m-timeline__more-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--m-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-muted); background: none; border: 1px solid var(--m-border); padding: 10px 20px; border-radius: var(--m-radius); cursor: pointer; margin-top: 20px; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .m-timeline__more-btn:hover { color: var(--m-accent); border-color: var(--m-accent); background: var(--m-accent-dim); } /* ============================================================ PHILOSOPHY SECTION ============================================================ */ .m-philosophy { padding: var(--m-section-pad) 0; background: var(--m-surface); border-top: 1px solid var(--m-border); } .m-philosophy__header { margin-bottom: clamp(40px, 6vw, 64px); } .m-philosophy__title { font-family: var(--m-serif); font-size: clamp(1.8rem, 3.5vw, 3rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--m-fg); margin: 0; } .m-philosophy__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--m-border); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); overflow: hidden; } .m-principle-card { padding: clamp(24px, 4vw, 40px); background: var(--m-surface); opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s ease; } .m-principle-card.m-revealed { opacity: 1; transform: translateY(0); } .m-principle-card:hover { background: var(--m-surface-2); } .m-principle-card__num { font-family: var(--m-serif); font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1; color: var(--m-accent); opacity: 0.35; letter-spacing: -0.04em; margin-bottom: 16px; display: block; } .m-principle-card__title { font-family: var(--m-sans); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 700; color: var(--m-fg); margin-bottom: 10px; line-height: 1.3; } .m-principle-card__body { font-size: 0.88rem; color: var(--m-muted); line-height: 1.6; } /* ============================================================ AI / TOOLING SECTION ============================================================ */ .m-ai { padding: var(--m-section-pad) 0; background: var(--m-bg); border-top: 1px solid var(--m-border); } .m-ai__header { margin-bottom: clamp(32px, 5vw, 56px); } .m-ai__statement { font-family: var(--m-serif); font-size: clamp(1.5rem, 3vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.2; color: var(--m-fg); max-width: 24ch; margin: 12px 0 0; } .m-ai__statement em { font-style: italic; color: var(--m-accent); } .m-ai__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--m-border); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); overflow: hidden; margin-top: clamp(32px, 5vw, 56px); } .m-ai-card { padding: clamp(24px, 3.5vw, 36px); background: var(--m-surface); border-left: 3px solid transparent; transition: border-color 0.25s ease, background 0.2s ease; } .m-ai-card:hover { border-left-color: var(--m-accent); background: var(--m-surface-2); } .m-ai-card__tool { font-family: var(--m-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-accent); margin-bottom: 12px; } .m-ai-card__title { font-family: var(--m-sans); font-size: 1rem; font-weight: 600; color: var(--m-fg); margin-bottom: 8px; line-height: 1.3; } .m-ai-card__desc { font-size: 0.85rem; color: var(--m-muted); line-height: 1.6; } /* ============================================================ CTA FOOTER ============================================================ */ .m-cta { padding: clamp(80px, 14vw, 160px) 0 clamp(60px, 10vw, 100px); background: var(--m-surface); border-top: 1px solid transparent; position: relative; overflow: hidden; } .m-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--m-accent) 50%, transparent 100%); } .m-cta__inner { text-align: center; max-width: 720px; margin: 0 auto; padding: 0 var(--m-container); } .m-cta__headline { font-family: var(--m-serif); font-size: clamp(2.2rem, 5vw, 4.5rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--m-fg); margin: 0 0 16px; } .m-cta__sub { font-size: clamp(0.95rem, 1.5vw, 1.05rem); color: var(--m-muted); margin-bottom: clamp(36px, 5vw, 56px); line-height: 1.65; } .m-cta__actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .m-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--m-sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 28px; border-radius: var(--m-radius); border: 1px solid transparent; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; min-height: 48px; text-decoration: none; } .m-btn:hover { transform: translateY(-1px); } .m-btn--primary { background: var(--m-accent); color: #000000; border-color: var(--m-accent); } .m-btn--primary:hover { background: #d4ff1a; border-color: #d4ff1a; color: #000000; } .m-btn--outline { background: transparent; color: var(--m-fg); border-color: var(--m-border-mid); } .m-btn--outline:hover { color: var(--m-accent); border-color: var(--m-accent); background: var(--m-accent-dim); } .m-cta__copyright { font-family: var(--m-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-muted-2); margin-top: clamp(48px, 8vw, 80px); } /* ============================================================ SCROLL REVEAL UTILITY ============================================================ */ .m-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .m-reveal.m-revealed { opacity: 1; transform: translateY(0); } /* ============================================================ KEYFRAME ANIMATIONS ============================================================ */ @keyframes m-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes m-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { [data-theme="modern"] *, [data-theme="modern"] *::before, [data-theme="modern"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.15s !important; } .m-hero__tag, .m-hero__meta, .m-hero__scroll { opacity: 1; transform: none; animation: none; } .m-hero__statement { opacity: 1; transform: none; transition: none; } .m-reveal, .m-timeline__entry, .m-principle-card { opacity: 1; transform: none; transition: none; } } /* ============================================================ OTHER PAGES — CSS OVERRIDES Bio, SuperIC, Toybox, Selected Work, Past Work Work case studies, Past work case studies ============================================================ */ /* Body + background */ [data-theme="modern"] body { background-color: var(--m-bg) !important; color: var(--m-fg) !important; } /* All text */ [data-theme="modern"] h1, [data-theme="modern"] h2, [data-theme="modern"] h3, [data-theme="modern"] h4, [data-theme="modern"] h5, [data-theme="modern"] h6 { color: var(--m-fg); font-family: var(--m-sans); } [data-theme="modern"] p, [data-theme="modern"] li, [data-theme="modern"] span:not(.theme-mode__label--on):not(.theme-mode__label--off) { color: inherit; } /* Page wrapper backgrounds */ [data-theme="modern"] .page-root, [data-theme="modern"] .site-root, [data-theme="modern"] main, [data-theme="modern"] .container { background: transparent; } /* Work + case study sections */ [data-theme="modern"] .case-hero, [data-theme="modern"] .case-hero__bg { background-color: var(--m-surface) !important; } [data-theme="modern"] .case-figure, [data-theme="modern"] .case-figure__zoom { background: var(--m-surface) !important; border-color: var(--m-border) !important; } [data-theme="modern"] .case-narrative, [data-theme="modern"] .case-section { background: transparent; color: var(--m-fg); } [data-theme="modern"] .case-label, [data-theme="modern"] .case-eyebrow, [data-theme="modern"] .section-treatment-eyebrow { color: var(--m-accent) !important; } [data-theme="modern"] .case-hero__title, [data-theme="modern"] .case-title, [data-theme="modern"] .work-hero__title { color: var(--m-fg) !important; font-family: var(--m-serif) !important; } [data-theme="modern"] .case-hero__meta, [data-theme="modern"] .case-meta { color: var(--m-muted) !important; } /* Cards and surfaces on other pages */ [data-theme="modern"] .xp-card, [data-theme="modern"] .skill-card, [data-theme="modern"] .edu-card { background: var(--m-surface) !important; border-color: var(--m-border) !important; color: var(--m-fg) !important; } [data-theme="modern"] .xp-card__company, [data-theme="modern"] .xp-card__title { color: var(--m-fg) !important; } [data-theme="modern"] .xp-card__role, [data-theme="modern"] .xp-card__meta { color: var(--m-muted) !important; } /* Bio page */ [data-theme="modern"] .bio-hero, [data-theme="modern"] .bio-section { background: var(--m-bg) !important; color: var(--m-fg); } [data-theme="modern"] .bio-title, [data-theme="modern"] .bio__name { color: var(--m-fg) !important; font-family: var(--m-serif) !important; } /* Super IC page */ [data-theme="modern"] .super-ic-section { background: var(--m-bg) !important; color: var(--m-fg); } [data-theme="modern"] .super-ic-hero, [data-theme="modern"] .super-ic-hero__title { color: var(--m-fg) !important; background: transparent !important; } [data-theme="modern"] .super-ic-expand-btn, [data-theme="modern"] .super-ic-nav-link { color: var(--m-muted) !important; border-color: var(--m-border) !important; } [data-theme="modern"] .super-ic-expand-btn:hover, [data-theme="modern"] .super-ic-nav-link:hover { color: var(--m-accent) !important; border-color: var(--m-accent) !important; } /* Toybox page */ [data-theme="modern"] .toybox-section, [data-theme="modern"] .toybox-hero { background: var(--m-bg) !important; color: var(--m-fg); } /* Selected Work landing */ [data-theme="modern"] .work-landing-section { background: var(--m-bg) !important; } [data-theme="modern"] .work-tile { background: var(--m-surface) !important; border-color: var(--m-border) !important; } [data-theme="modern"] .work-tile:hover { border-color: var(--m-accent) !important; } [data-theme="modern"] .work-tile__title { color: var(--m-fg) !important; font-family: var(--m-serif) !important; text-shadow: none !important; } [data-theme="modern"] .work-tile__sector { color: var(--m-accent) !important; text-shadow: none !important; } [data-theme="modern"] .work-tile__explore { background: var(--m-accent) !important; color: var(--m-bg) !important; border-color: var(--m-accent) !important; } /* Past work landing */ [data-theme="modern"] .past-work-landing, [data-theme="modern"] .past-work-runway { background: var(--m-bg) !important; color: var(--m-fg); } /* Section titles and eyebrows */ [data-theme="modern"] .work-landing-section .section-treatment-eyebrow, [data-theme="modern"] .skills-rain-eyebrow, [data-theme="modern"] .career-timeline-eyebrow { color: var(--m-accent) !important; } [data-theme="modern"] .work-landing-section h2, [data-theme="modern"] .section-title { color: var(--m-fg) !important; font-family: var(--m-serif) !important; } /* Carousel */ [data-theme="modern"] .past-work-carousel { background: transparent !important; } [data-theme="modern"] .past-work-carousel__step-btn { background: var(--m-surface) !important; border-color: var(--m-border) !important; color: var(--m-fg) !important; } [data-theme="modern"] .past-work-carousel__step-btn:hover { border-color: var(--m-accent) !important; color: var(--m-accent) !important; } /* Footer */ [data-theme="modern"] .site-footer--arcane { background: var(--m-surface) !important; border-top: 1px solid var(--m-border) !important; color: var(--m-muted); } [data-theme="modern"] .site-footer--arcane a { color: var(--m-muted); transition: color 0.2s ease; } [data-theme="modern"] .site-footer--arcane a:hover { color: var(--m-accent); } /* Links on content pages */ [data-theme="modern"] a.m-text-link, [data-theme="modern"] .case-section a { color: var(--m-accent); text-decoration: underline; text-decoration-color: rgba(200, 255, 0, 0.3); transition: text-decoration-color 0.2s ease; } [data-theme="modern"] a.m-text-link:hover, [data-theme="modern"] .case-section a:hover { text-decoration-color: var(--m-accent); } /* ============================================================ SPACE CHROME REMOVAL Hide Space-specific decorative elements on all pages ============================================================ */ /* Floating "Career Insights" anchor pill — Space only */ [data-theme="modern"] .scroll-anchor-pill { display: none !important; } [data-theme="modern"] [class*="case-space-bg"], [data-theme="modern"] .super-ic-hud-corner, [data-theme="modern"] .super-ic-hud-corner--tl, [data-theme="modern"] .super-ic-hud-corner--tr, [data-theme="modern"] .super-ic-hud-corner--bl, [data-theme="modern"] .super-ic-hud-corner--br, [data-theme="modern"] .super-ic-hud-tag, [data-theme="modern"] .super-ic-toolbar, [data-theme="modern"] .past-work-runway__ticker, [data-theme="modern"] .past-work-view-toggle, [data-theme="modern"] .work-parent-gallery__progress { display: none !important; } /* ============================================================ BIO PAGE — editorial Modern treatment ============================================================ */ [data-theme="modern"] .bio-page-section { background: var(--m-bg) !important; } [data-theme="modern"] .bio-page-heading { padding-top: clamp(48px, 8vw, 80px) !important; padding-bottom: clamp(24px, 4vw, 40px) !important; border-bottom: 1px solid var(--m-border) !important; margin-bottom: clamp(32px, 5vw, 56px) !important; } /* Large editorial name block */ [data-theme="modern"] .bio-yeti-blurb__title { font-family: var(--m-serif) !important; font-size: clamp(2.5rem, 6vw, 5rem) !important; letter-spacing: -0.03em !important; line-height: 1.05 !important; color: var(--m-fg) !important; } [data-theme="modern"] .bio-yeti-blurb, [data-theme="modern"] .bio-yeti-blurb__text { background: transparent !important; color: var(--m-muted) !important; } /* Reading prose */ [data-theme="modern"] .bio-prose { font-family: var(--m-sans) !important; font-size: clamp(1rem, 1.4vw, 1.1rem) !important; line-height: 1.75 !important; color: var(--m-muted) !important; max-width: 68ch; } [data-theme="modern"] .bio-prose strong, [data-theme="modern"] .bio-prose b { color: var(--m-fg) !important; font-weight: 600 !important; } /* Accent-left-border panels */ [data-theme="modern"] .bio-panel { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-left: 3px solid var(--m-accent) !important; border-radius: 0 var(--m-radius-lg) var(--m-radius-lg) 0 !important; color: var(--m-fg) !important; padding: clamp(20px, 3vw, 36px) !important; } /* 2-col editorial split */ [data-theme="modern"] .bio-split { gap: clamp(32px, 5vw, 64px) !important; } [data-theme="modern"] .bio-split__img, [data-theme="modern"] .bio-split__media { border-radius: var(--m-radius-lg) !important; overflow: hidden !important; } /* Section block titles */ [data-theme="modern"] .bio-block__title { font-family: var(--m-serif) !important; font-size: clamp(1.4rem, 2.5vw, 2rem) !important; letter-spacing: -0.02em !important; color: var(--m-fg) !important; margin-bottom: 12px !important; } /* Back bar */ [data-theme="modern"] .bio-page-back-bar { background: transparent !important; border-bottom: 1px solid var(--m-border) !important; } [data-theme="modern"] .page-back-link__text { font-family: var(--m-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--m-muted) !important; } [data-theme="modern"] .page-back-link:hover .page-back-link__text, [data-theme="modern"] .page-back-link:hover .page-back-link__arrow { color: var(--m-accent) !important; } /* ============================================================ SUPER IC PAGE — Ohzi manifesto style, no HUD ============================================================ */ [data-theme="modern"] .super-ic-section { background: var(--m-bg) !important; } [data-theme="modern"] .super-ic-layout { background: transparent !important; } /* Hero — large editorial, no Space chrome */ [data-theme="modern"] .super-ic-hero { background: transparent !important; border: none !important; box-shadow: none !important; padding-top: clamp(64px, 10vw, 120px) !important; padding-bottom: clamp(40px, 6vw, 80px) !important; } /* Quality cards — accent left border */ [data-theme="modern"] .super-ic-quality-card { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-left: 3px solid var(--m-accent) !important; border-radius: var(--m-radius-lg) !important; transition: background 0.2s ease, transform 0.2s ease !important; } [data-theme="modern"] .super-ic-quality-card:hover { background: var(--m-surface-2) !important; transform: translateY(-2px) !important; } [data-theme="modern"] .super-ic-quality-card__top { background: transparent !important; border: none !important; } [data-theme="modern"] .super-ic-quality-card__title { font-family: var(--m-serif) !important; font-size: 1.1rem !important; letter-spacing: -0.01em !important; color: var(--m-fg) !important; } [data-theme="modern"] .super-ic-quality-card__subtitle { font-family: var(--m-sans) !important; font-size: 0.88rem !important; line-height: 1.6 !important; color: var(--m-muted) !important; } [data-theme="modern"] .super-ic-quality-card__icon { opacity: 0.65 !important; filter: brightness(0) invert(1) !important; } /* Panels */ [data-theme="modern"] .super-ic-panel { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; color: var(--m-fg) !important; } [data-theme="modern"] .super-ic-panel--hud { background: var(--m-surface-2) !important; border-color: var(--m-border) !important; box-shadow: none !important; } /* Body prose */ [data-theme="modern"] .super-ic-prose { font-family: var(--m-sans) !important; font-size: clamp(0.95rem, 1.4vw, 1.05rem) !important; line-height: 1.7 !important; color: var(--m-muted) !important; } /* Block titles */ [data-theme="modern"] .super-ic-block__title { font-family: var(--m-serif) !important; font-size: clamp(1.4rem, 2.5vw, 2rem) !important; letter-spacing: -0.02em !important; color: var(--m-fg) !important; } /* TOC sidebar */ [data-theme="modern"] .super-ic-toc { background: transparent !important; border-right: 1px solid var(--m-border) !important; border-top: none !important; border-left: none !important; border-bottom: none !important; } [data-theme="modern"] .super-ic-toc__label { font-family: var(--m-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--m-muted) !important; } [data-theme="modern"] .super-ic-toc__link { font-family: var(--m-sans) !important; font-size: 0.84rem !important; color: var(--m-muted) !important; transition: color 0.2s ease !important; } [data-theme="modern"] .super-ic-toc__link:hover, [data-theme="modern"] .super-ic-toc__link.is-active { color: var(--m-accent) !important; } /* Accordion summary */ [data-theme="modern"] .super-ic-details { background: var(--m-surface) !important; border-color: var(--m-border) !important; border-radius: var(--m-radius) !important; } [data-theme="modern"] .super-ic-details__summary { font-family: var(--m-sans) !important; font-weight: 600 !important; color: var(--m-fg) !important; cursor: pointer !important; list-style: none !important; } [data-theme="modern"] .super-ic-details__body { font-family: var(--m-sans) !important; font-size: 0.9rem !important; line-height: 1.7 !important; color: var(--m-muted) !important; } /* Archetype bullet list — accent dots */ [data-theme="modern"] .super-ic-archetype-list { list-style: none !important; padding-left: 0 !important; } [data-theme="modern"] .super-ic-archetype-list li { position: relative !important; padding-left: 18px !important; font-family: var(--m-sans) !important; color: var(--m-muted) !important; margin-bottom: 6px !important; } [data-theme="modern"] .super-ic-archetype-list li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0.55em !important; width: 5px !important; height: 5px !important; background: var(--m-accent) !important; border-radius: 50% !important; } /* Closing section */ [data-theme="modern"] .super-ic-closing { background: var(--m-surface) !important; border-top: 1px solid var(--m-border) !important; color: var(--m-fg) !important; } /* ============================================================ SECONDARY PAGE — universal eyebrow / heading ============================================================ */ [data-theme="modern"] .experience-section-title { font-family: var(--m-serif) !important; font-size: clamp(2rem, 4vw, 3.5rem) !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; color: var(--m-fg) !important; } [data-theme="modern"] .experience-section-eyebrow { font-family: var(--m-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--m-accent) !important; } [data-theme="modern"] .experience-section-lede { font-family: var(--m-sans) !important; font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important; line-height: 1.65 !important; color: var(--m-muted) !important; } /* ============================================================ MOBILE — max-width: 768px ============================================================ */ @media (max-width: 768px) { /* Hero */ .m-hero { padding-top: 100px; padding-bottom: 60px; justify-content: flex-end; } .m-hero__statement { font-size: clamp(1.8rem, 8vw, 2.8rem); } .m-hero__statement.m-hero__statement--italic { font-size: clamp(1.3rem, 5.5vw, 2rem); } .m-hero__scroll { position: static; margin-top: 32px; } .m-hero__tag { margin-bottom: 24px; } /* Work panels → stacked */ .m-work-panel { grid-template-columns: 1fr; min-height: auto; } .m-work-panel--alt { direction: ltr; } .m-work-panel__media { aspect-ratio: 16 / 9; min-height: 220px; } .m-work-panel__content { border-left: none !important; border-right: none !important; border-top: 1px solid var(--m-border); padding: 24px 20px 28px; } .m-work-panel__project { font-size: clamp(1.4rem, 5vw, 2rem); } /* Past work → 1 column */ .m-pastwork__grid { grid-template-columns: 1fr; } /* Timeline */ .m-timeline__header { grid-template-columns: 1fr; gap: 16px; } .m-timeline__stat { text-align: left; display: flex; align-items: baseline; gap: 12px; } .m-timeline__stat-num { font-size: clamp(2rem, 8vw, 3rem); display: inline; } .m-timeline__entry { grid-template-columns: 1fr; gap: 4px; } /* Philosophy → 1 column */ .m-philosophy__grid { grid-template-columns: 1fr; } /* AI → 1 column */ .m-ai__grid { grid-template-columns: 1fr; } .m-ai__statement { font-size: clamp(1.3rem, 5.5vw, 2rem); } /* CTA */ .m-cta__headline { font-size: clamp(1.8rem, 7vw, 2.8rem); } .m-cta__actions { flex-direction: column; } .m-btn { width: 100%; justify-content: center; } /* Modern nav hidden on mobile (existing burger handles it) */ [data-theme="modern"] .m-nav { display: none; } } /* Tablet */ @media (max-width: 960px) and (min-width: 769px) { .m-pastwork__grid { grid-template-columns: repeat(2, 1fr); } .m-ai__grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ ═══════════════════════════════════════════════════════════ FULL SECONDARY PAGE REDESIGN — v2 Inspired by: SpaceX (cinematic confidence), Tesla (restraint), Dave Holloway (editorial rhythm), Wanted for Nothing (sharp grid), Ohzi Interactive (scroll craft), 50 Jahre (timeline density) ═══════════════════════════════════════════════════════════ ============================================================ */ /* ── Hard reset: kill all Space palette on every page ── */ [data-theme="modern"] body, [data-theme="modern"] .page, [data-theme="modern"] .site-root, [data-theme="modern"] .page-root, [data-theme="modern"] main { background: var(--m-bg) !important; color: var(--m-fg) !important; } /* All headings → DM Serif, white */ [data-theme="modern"] h1, [data-theme="modern"] h2, [data-theme="modern"] h3, [data-theme="modern"] h4 { font-family: var(--m-serif) !important; color: var(--m-fg) !important; letter-spacing: -0.02em !important; } /* All body text → Inter, muted */ [data-theme="modern"] p, [data-theme="modern"] li { font-family: var(--m-sans) !important; color: var(--m-muted) !important; } /* Kill Space-colored borders and glows everywhere */ [data-theme="modern"] *:not(.m-btn):not(.m-work-panel__cta):not(.m-text-nav__link) { border-color: var(--m-border) !important; text-shadow: none !important; box-shadow: none !important; } /* Re-allow accent box-shadows on cards */ [data-theme="modern"] .super-ic-quality-card:hover, [data-theme="modern"] .work-tile:hover, [data-theme="modern"] .m-pastwork-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important; } /* ============================================================ SELECTED WORK LANDING (selectedwork.html) Reference: Wanted for Nothing — sharp editorial tile grid ============================================================ */ [data-theme="modern"] .work-landing-section--parent-gallery { background: var(--m-bg) !important; padding-top: 96px !important; } [data-theme="modern"] .work-parent-gallery-root { background: var(--m-bg) !important; } [data-theme="modern"] .work-parent-gallery__live { background: transparent !important; } [data-theme="modern"] .work-parent-gallery__track { background: transparent !important; } /* Work tiles — full editorial card treatment */ [data-theme="modern"] .work-tile { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; overflow: hidden !important; transition: border-color 0.25s ease, transform 0.25s ease !important; } [data-theme="modern"] .work-tile:hover { border-color: rgba(200,255,0,0.3) !important; transform: translateY(-3px) !important; } [data-theme="modern"] .work-tile__media, [data-theme="modern"] .work-tile__img-wrap { overflow: hidden !important; background: var(--m-surface-2) !important; } [data-theme="modern"] .work-tile__img { transition: transform 0.55s cubic-bezier(0.22,1,0.36,1) !important; } [data-theme="modern"] .work-tile:hover .work-tile__img { transform: scale(1.04) !important; } [data-theme="modern"] .work-tile__title { font-family: var(--m-serif) !important; font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important; letter-spacing: -0.02em !important; color: var(--m-fg) !important; text-shadow: none !important; line-height: 1.2 !important; } [data-theme="modern"] .work-tile__sector { font-family: var(--m-mono) !important; font-size: 0.65rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--m-accent) !important; text-shadow: none !important; } [data-theme="modern"] .work-tile__label { font-family: var(--m-sans) !important; font-size: 0.82rem !important; color: var(--m-muted) !important; } [data-theme="modern"] .work-tile__body { background: var(--m-surface) !important; padding: 20px 24px 24px !important; } [data-theme="modern"] .work-tile__content { background: var(--m-surface) !important; } /* Explore / View button */ [data-theme="modern"] .work-tile__explore { background: transparent !important; color: var(--m-fg) !important; border: 1px solid var(--m-border-mid) !important; font-family: var(--m-sans) !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: var(--m-radius) !important; padding: 10px 18px !important; min-height: 44px !important; cursor: pointer !important; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; } [data-theme="modern"] .work-tile__explore:hover { background: var(--m-accent) !important; color: var(--m-bg) !important; border-color: var(--m-accent) !important; } /* Carousel step buttons */ [data-theme="modern"] .past-work-carousel__step-btn { background: var(--m-surface-2) !important; border: 1px solid var(--m-border) !important; color: var(--m-fg) !important; border-radius: var(--m-radius) !important; } [data-theme="modern"] .past-work-carousel__step-btn:hover { border-color: var(--m-accent) !important; color: var(--m-accent) !important; background: var(--m-accent-dim) !important; } [data-theme="modern"] .past-work-carousel__step-svg { fill: currentColor !important; stroke: currentColor !important; } /* Carousel header */ [data-theme="modern"] .past-work-carousel__header { background: transparent !important; border-bottom: 1px solid var(--m-border) !important; } /* Progress indicator */ [data-theme="modern"] .work-parent-gallery__progress { display: none !important; } /* Pager dots */ [data-theme="modern"] .past-work-carousel-pager [aria-current="true"], [data-theme="modern"] .past-work-carousel-pager .is-active, [data-theme="modern"] .past-work-carousel-pager button[aria-current="true"] { background: var(--m-accent) !important; } /* ============================================================ PAST WORK LANDING (past-work.html) Reference: 50 Jahre Hitparade — era-dense, typographic ============================================================ */ [data-theme="modern"] .work-landing-section--past-runway { background: var(--m-bg) !important; padding-top: 96px !important; } [data-theme="modern"] .past-work-runway { background: transparent !important; } [data-theme="modern"] .past-work-runway__toolbar { background: transparent !important; border-bottom: 1px solid var(--m-border) !important; padding-bottom: 16px !important; margin-bottom: 32px !important; } [data-theme="modern"] .past-work-view-toggle__btn { background: transparent !important; color: var(--m-muted) !important; border: 1px solid var(--m-border) !important; font-family: var(--m-mono) !important; font-size: 0.65rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } [data-theme="modern"] .past-work-view-toggle__btn.is-active, [data-theme="modern"] .past-work-view-toggle__btn[aria-pressed="true"] { color: var(--m-accent) !important; border-color: var(--m-accent) !important; background: var(--m-accent-dim) !important; } /* ============================================================ TOYBOX (mytoybox.html) Reference: Bahama Buck's — confident, contained energy ============================================================ */ [data-theme="modern"] .fun-toybox-page { background: var(--m-bg) !important; } [data-theme="modern"] .work-landing-section--fun-toybox { background: var(--m-bg) !important; padding-top: 96px !important; } [data-theme="modern"] .toybox-lab { /* Keep the stage layout intact — only reset Space-specific backgrounds */ background: #000 !important; } [data-theme="modern"] .toybox-lab::before { /* Green accent line at top of the stage */ content: '' !important; display: block !important; height: 2px !important; background: linear-gradient(90deg, transparent, var(--m-accent) 50%, transparent) !important; position: relative !important; z-index: 10 !important; } [data-theme="modern"] .toybox-lab--bleed { border-radius: 0 !important; } /* The .toybox-cta elements are absolutely-positioned transparent overlays — do NOT add background/border/padding or it breaks the image-map interaction */ [data-theme="modern"] .toybox-cta { background: transparent !important; border: none !important; padding: 0 !important; } /* Swap cyan hover glow → lime-green accent glow */ [data-theme="modern"] .toybox-cta:hover img, [data-theme="modern"] .toybox-cta:focus-visible img { filter: drop-shadow(0 0 6px rgba(200, 255, 0, 1)) drop-shadow(0 0 14px rgba(180, 255, 0, 0.8)) drop-shadow(0 0 28px rgba(160, 240, 0, 0.5)) !important; } [data-theme="modern"] .toybox-caption { font-family: var(--m-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.1em !important; color: rgba(255,255,255,0.7) !important; } /* ============================================================ CASE STUDIES — work/* and past-work/* Reference: SpaceX (cinematic hero) + Tesla (reading clarity) ============================================================ */ /* Reading progress bar */ [data-theme="modern"] .case-reading-progress { background: var(--m-surface) !important; } [data-theme="modern"] .case-reading-progress__bar { background: var(--m-accent) !important; } /* Hero */ [data-theme="modern"] .case-hero { background: var(--m-surface) !important; min-height: 56vh !important; position: relative !important; } [data-theme="modern"] .case-hero__media, [data-theme="modern"] .case-hero__bg { filter: brightness(0.75) !important; } [data-theme="modern"] .case-hero__scrim { background: linear-gradient( to bottom, rgba(8,8,8,0.15) 0%, rgba(8,8,8,0.55) 55%, rgba(8,8,8,0.92) 100% ) !important; } [data-theme="modern"] .case-hero__title { font-family: var(--m-serif) !important; font-size: clamp(2.4rem, 6vw, 5rem) !important; letter-spacing: -0.03em !important; line-height: 1.05 !important; color: #fff !important; text-shadow: 0 2px 20px rgba(0,0,0,0.4) !important; } [data-theme="modern"] .case-hero__eyebrow { font-family: var(--m-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--m-accent) !important; } [data-theme="modern"] .case-hero__tagline { font-family: var(--m-sans) !important; font-size: clamp(1rem, 1.6vw, 1.15rem) !important; color: rgba(240,240,240,0.8) !important; max-width: 56ch !important; line-height: 1.6 !important; text-shadow: none !important; } [data-theme="modern"] .case-hero__meta { font-family: var(--m-mono) !important; font-size: 0.7rem !important; letter-spacing: 0.12em !important; color: rgba(240,240,240,0.6) !important; } /* Intro panel */ [data-theme="modern"] .case-intro-panel { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; color: var(--m-fg) !important; } [data-theme="modern"] .case-intro-panel__lede { font-family: var(--m-sans) !important; color: var(--m-fg) !important; line-height: 1.7 !important; } [data-theme="modern"] .case-intro-panel__drawer-summary { font-family: var(--m-sans) !important; font-weight: 600 !important; color: var(--m-fg) !important; } /* Narrative body */ [data-theme="modern"] .case-narrative, [data-theme="modern"] .case-narrative__inner { background: transparent !important; color: var(--m-fg) !important; } [data-theme="modern"] .case-chapter, [data-theme="modern"] .case-section { background: transparent !important; } [data-theme="modern"] .case-section__title { font-family: var(--m-serif) !important; font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important; letter-spacing: -0.02em !important; color: var(--m-fg) !important; } [data-theme="modern"] .case-section__kicker { font-family: var(--m-mono) !important; font-size: 0.65rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--m-accent) !important; } /* Prose reading column */ [data-theme="modern"] .case-prose, [data-theme="modern"] .case-section__body { font-family: var(--m-sans) !important; font-size: clamp(0.95rem, 1.35vw, 1.05rem) !important; line-height: 1.75 !important; color: var(--m-muted) !important; max-width: 70ch !important; } [data-theme="modern"] .case-prose p, [data-theme="modern"] .case-section__body p { color: var(--m-muted) !important; font-family: var(--m-sans) !important; } [data-theme="modern"] .case-prose strong { color: var(--m-fg) !important; font-weight: 600 !important; } /* Callout blocks */ [data-theme="modern"] .case-callout-list { border-left: 3px solid var(--m-accent) !important; background: var(--m-surface) !important; border-radius: 0 var(--m-radius-lg) var(--m-radius-lg) 0 !important; padding: 20px 24px !important; color: var(--m-fg) !important; } [data-theme="modern"] .case-callout-list li { color: var(--m-muted) !important; } /* Figures */ [data-theme="modern"] .case-figure { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; overflow: hidden !important; } [data-theme="modern"] .case-figure--borderless { background: transparent !important; border: none !important; } [data-theme="modern"] .case-figure__zoom { background: var(--m-surface-2) !important; } [data-theme="modern"] .case-figure__caption { font-family: var(--m-mono) !important; font-size: 0.65rem !important; letter-spacing: 0.1em !important; color: var(--m-muted) !important; padding: 12px 16px !important; background: var(--m-surface) !important; } /* Figure slider */ [data-theme="modern"] .case-figure-slider { background: var(--m-surface) !important; border-radius: var(--m-radius-lg) !important; overflow: hidden !important; } [data-theme="modern"] .case-figure-slider__btn { background: rgba(8,8,8,0.72) !important; border: 1px solid var(--m-border) !important; color: var(--m-fg) !important; border-radius: var(--m-radius) !important; transition: background 0.2s ease, border-color 0.2s ease !important; } [data-theme="modern"] .case-figure-slider__btn:hover { background: var(--m-accent-dim) !important; border-color: var(--m-accent) !important; } [data-theme="modern"] .case-figure-slider__dot { background: var(--m-border-mid) !important; border-radius: 50% !important; } [data-theme="modern"] .case-figure-slider__dot.is-active, [data-theme="modern"] .case-figure-slider__dot[aria-current="true"] { background: var(--m-accent) !important; } [data-theme="modern"] .case-figure-slider__slide-caption, [data-theme="modern"] .case-figure-slider__status { font-family: var(--m-mono) !important; font-size: 0.65rem !important; color: var(--m-muted) !important; letter-spacing: 0.08em !important; } [data-theme="modern"] .case-figure-slider__chrome { background: var(--m-surface-2) !important; border-top: 1px solid var(--m-border) !important; } /* Meta row */ [data-theme="modern"] .case-meta-row { background: var(--m-surface) !important; border-top: 1px solid var(--m-border) !important; border-bottom: 1px solid var(--m-border) !important; } [data-theme="modern"] .case-meta-item dt { font-family: var(--m-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--m-accent) !important; } [data-theme="modern"] .case-meta-item dd { font-family: var(--m-sans) !important; color: var(--m-muted) !important; font-size: 0.9rem !important; } /* Back link */ [data-theme="modern"] .case-back { background: transparent !important; } [data-theme="modern"] .case-back a, [data-theme="modern"] .case-back__link { font-family: var(--m-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--m-muted) !important; transition: color 0.2s ease !important; } [data-theme="modern"] .case-back a:hover, [data-theme="modern"] .case-back__link:hover { color: var(--m-accent) !important; } /* Pager */ [data-theme="modern"] .case-pager { background: var(--m-surface) !important; border-top: 1px solid var(--m-border) !important; } [data-theme="modern"] .case-pager__link, [data-theme="modern"] .case-pager a { font-family: var(--m-sans) !important; font-size: 0.82rem !important; font-weight: 500 !important; color: var(--m-muted) !important; transition: color 0.2s ease, background 0.2s ease !important; padding: 20px 24px !important; } [data-theme="modern"] .case-pager__link:hover, [data-theme="modern"] .case-pager a:hover { color: var(--m-accent) !important; background: var(--m-accent-dim) !important; } /* Lightbox */ [data-theme="modern"] .case-lightbox { background: rgba(8,8,8,0.96) !important; } [data-theme="modern"] .case-lightbox__close { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; color: var(--m-fg) !important; } /* ============================================================ MOBILE — secondary pages ============================================================ */ @media (max-width: 768px) { [data-theme="modern"] .work-tile__title { font-size: clamp(1.1rem, 5vw, 1.4rem) !important; } [data-theme="modern"] .case-hero__title { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; } [data-theme="modern"] .case-section__title { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; } [data-theme="modern"] .toybox-lab::before { display: none !important; } /* Modern text nav hides on mobile — burger handles it */ .m-nav { display: none !important; } } /* ============================================================ STANDALONE MODERN TOGGLE BUTTON (.m-toggle-btn) Injected directly into .header-inner — never inside .header-nav so no Space CSS can affect it. ============================================================ */ .m-toggle-btn { display: none; /* shown by JS when Modern is active */ align-items: center; gap: 8px; margin-left: 16px; flex-shrink: 0; } .m-toggle-btn__label { font-family: var(--m-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,240,240,0.35); user-select: none; } .m-toggle-btn__label--active { color: var(--m-accent); font-weight: 700; } .m-toggle-btn__switch { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .m-toggle-btn__track { position: relative; display: block; width: 36px; height: 20px; border-radius: 999px; background: rgba(200,255,0,0.18); box-shadow: 0 0 0 1px rgba(200,255,0,0.4); transition: background 0.2s ease; } .m-toggle-btn__thumb { position: absolute; top: 50%; left: 2px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--m-accent); transform: translateX(16px); /* Modern = right position */ transition: transform 0.2s ease, background 0.2s ease; } /* ============================================================ HERO STATEMENT TEXT — pure white (not muted) ============================================================ */ .m-hero__statement { color: #ffffff !important; } .m-hero__statement.m-hero__statement--italic { color: rgba(255,255,255,0.72) !important; } /* ============================================================ HERO METRICS BAR (SpaceX stat rail) ============================================================ */ .m-hero__metrics { position: absolute; bottom: 0; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,0.1); background: rgba(8,8,8,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 20px 0; } .m-hero__metrics-row { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } .m-hero__metric { flex: 1; text-align: center; padding: 0 16px; } .m-hero__metric-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.12); flex-shrink: 0; } .m-hero__metric-num { font-family: var(--m-serif); font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -0.03em; color: var(--m-accent); display: block; margin-bottom: 4px; } .m-hero__metric-label { font-family: var(--m-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,240,240,0.5); line-height: 1.4; } /* Push hero content up to not be covered by metrics bar */ .m-hero__inner { padding-bottom: 140px; } /* ============================================================ PAST WORK ROW LIST (editorial numbered rows) ============================================================ */ .m-pastwork-list { display: flex; flex-direction: column; border-top: 1px solid var(--m-border); } .m-pastwork-row { display: grid; grid-template-columns: 32px 1fr 1fr auto 24px; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--m-border); text-decoration: none; color: var(--m-fg); transition: background 0.18s ease, padding-left 0.18s ease; } .m-pastwork-row:hover { background: var(--m-surface); padding-left: 12px; padding-right: 12px; border-radius: var(--m-radius); margin: 0 -12px; } .m-pastwork-row:hover .m-pastwork-row__arrow { color: var(--m-accent); transform: translateX(4px); } .m-pastwork-row__num { font-family: var(--m-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--m-muted-2); } .m-pastwork-row__company { font-family: var(--m-sans); font-size: clamp(0.95rem, 1.3vw, 1.05rem); font-weight: 600; color: var(--m-fg); line-height: 1.3; } .m-pastwork-row__sector { font-family: var(--m-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-muted); } .m-pastwork-row__role { font-family: var(--m-sans); font-size: 0.82rem; color: var(--m-muted); text-align: right; white-space: nowrap; } .m-pastwork-row__arrow { font-family: var(--m-sans); color: var(--m-muted-2); font-size: 0.9rem; transition: color 0.18s ease, transform 0.18s ease; } /* ============================================================ TURQUOISE / CYAN OVERRIDES Kill all Space-cyan text across every page in Modern mode ============================================================ */ [data-theme="modern"] [style*="color: rgb(125"] , [data-theme="modern"] [style*="color:#7dfd"], [data-theme="modern"] [style*="color: #7dfd"] { color: var(--m-accent) !important; } /* Target common Space cyan text classes */ [data-theme="modern"] .section-treatment-eyebrow, [data-theme="modern"] .career-timeline-eyebrow, [data-theme="modern"] .skills-rain-eyebrow, [data-theme="modern"] .xp-card__company, [data-theme="modern"] .edu-cred-card__callout, [data-theme="modern"] .hero-stat-line { color: var(--m-accent) !important; font-family: var(--m-mono) !important; text-shadow: none !important; } /* Any element still rendering Space blue/purple BG */ [data-theme="modern"] .career-insights-headband, [data-theme="modern"] .hero-grid, [data-theme="modern"] .hero-stats { background: transparent !important; } /* ============================================================ "ON THIS PAGE" / TOC NAVIGATION COMPONENT ============================================================ */ [data-theme="modern"] .case-toc, [data-theme="modern"] .on-this-page, [data-theme="modern"] [class*="toc"] { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; } [data-theme="modern"] .case-toc__label, [data-theme="modern"] .on-this-page__label { font-family: var(--m-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--m-muted) !important; } [data-theme="modern"] .case-toc__link, [data-theme="modern"] .on-this-page a { font-family: var(--m-sans) !important; font-size: 0.84rem !important; color: var(--m-muted) !important; transition: color 0.2s ease !important; } [data-theme="modern"] .case-toc__link:hover, [data-theme="modern"] .on-this-page a:hover, [data-theme="modern"] .case-toc__link[aria-current], [data-theme="modern"] .case-toc__link.is-active { color: var(--m-accent) !important; } /* ============================================================ BIO PAGE — deeper polish ============================================================ */ [data-theme="modern"] .bio-page-section *:not(img) { text-shadow: none !important; box-shadow: none !important; } [data-theme="modern"] .bio-page-section h1, [data-theme="modern"] .bio-page-section h2, [data-theme="modern"] .bio-page-section h3 { font-family: var(--m-serif) !important; color: var(--m-fg) !important; letter-spacing: -0.02em !important; } /* Experience / skills cards on bio */ [data-theme="modern"] .xp-card { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; color: var(--m-fg) !important; box-shadow: none !important; } [data-theme="modern"] .xp-card__company { font-family: var(--m-sans) !important; font-weight: 700 !important; color: var(--m-fg) !important; font-size: clamp(0.95rem, 1.2vw, 1.05rem) !important; } [data-theme="modern"] .xp-card__title { font-family: var(--m-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--m-accent) !important; } [data-theme="modern"] .xp-card__role, [data-theme="modern"] .xp-card__meta, [data-theme="modern"] .xp-card__desc { font-family: var(--m-sans) !important; color: var(--m-muted) !important; font-size: 0.88rem !important; } [data-theme="modern"] .skill-card, [data-theme="modern"] .edu-card, [data-theme="modern"] .edu-cred-card { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; color: var(--m-fg) !important; box-shadow: none !important; } [data-theme="modern"] .edu-cred-card__callout { font-family: var(--m-mono) !important; font-size: 0.65rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--m-accent) !important; font-weight: 700 !important; } /* Experience section on bio — timeline list */ [data-theme="modern"] .career-timeline-section, [data-theme="modern"] .career-timeline { background: transparent !important; } /* ============================================================ SUPER IC — deeper polish ============================================================ */ [data-theme="modern"] .super-ic-section *:not(img):not(.toybox-lab__stage) { text-shadow: none !important; } /* Numbered cards — editorial accent */ [data-theme="modern"] .super-ic-quality-card { counter-increment: quality-counter; } /* Layout container */ [data-theme="modern"] .super-ic-container { background: transparent !important; } [data-theme="modern"] .super-ic-layout { background: transparent !important; } /* Hero subheading */ [data-theme="modern"] .super-ic-hero .experience-section-lede { font-size: clamp(1rem, 1.6vw, 1.2rem) !important; max-width: 60ch !important; line-height: 1.7 !important; } /* Section heading */ [data-theme="modern"] .super-ic-block { background: transparent !important; } [data-theme="modern"] .super-ic-block__title { font-size: clamp(1.4rem, 2.5vw, 2.2rem) !important; border-bottom: 1px solid var(--m-border) !important; padding-bottom: 12px !important; margin-bottom: 24px !important; } /* Qualities heading */ [data-theme="modern"] .super-ic-qualities-grid { gap: clamp(12px, 2vw, 20px) !important; } /* ============================================================ MOBILE — new components ============================================================ */ @media (max-width: 768px) { /* Metrics bar — 2-col */ .m-hero__metrics-row { flex-wrap: wrap; } .m-hero__metric { flex: 0 0 calc(50% - 1px); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 12px 8px; } .m-hero__metric-divider { display: none; } .m-hero__metric-num { font-size: clamp(1.6rem, 6vw, 2rem); } /* Past work rows — compact */ .m-pastwork-row { grid-template-columns: 28px 1fr 24px; gap: 8px; } .m-pastwork-row__sector, .m-pastwork-row__role { display: none; } /* Toggle label — hide on mobile */ .m-toggle-btn__label { display: none; } .m-hero__inner { padding-bottom: 200px; } } @media (min-width: 769px) and (max-width: 1040px) { .m-pastwork-row { grid-template-columns: 32px 1fr auto 24px; } .m-pastwork-row__role { display: none; } } /* ============================================================ MODERN v3 — COMPREHENSIVE OVERRIDES ============================================================ */ /* ── GLOBAL: body + shell ──────────────────────────────────── */ [data-theme="modern"] body { background: var(--m-bg) !important; font-family: var(--m-sans) !important; } /* header glass — no Space gold border */ [data-theme="modern"] .site-header--arcane { background: rgba(10,10,10,0.92) !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } /* kill logo cyan glow */ [data-theme="modern"] .logo-wordmark { filter: none !important; } /* footer */ [data-theme="modern"] .site-footer--arcane { background: var(--m-bg) !important; border-top: 1px solid var(--m-border) !important; box-shadow: none !important; } [data-theme="modern"] .footer-inner, [data-theme="modern"] .footer-copyright { font-family: var(--m-mono) !important; font-size: 0.66rem !important; letter-spacing: 0.1em !important; color: var(--m-muted) !important; text-shadow: none !important; } /* back link — Modern neutral style */ [data-theme="modern"] .page-back-link { font-family: var(--m-mono) !important; font-size: 0.64rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--m-muted) !important; border: 1px solid var(--m-border) !important; background: var(--m-surface) !important; box-shadow: none !important; border-radius: var(--m-radius) !important; } [data-theme="modern"] .page-back-link:hover { color: var(--m-fg) !important; border-color: rgba(200,255,0,0.35) !important; background: var(--m-surface) !important; box-shadow: none !important; } [data-theme="modern"] .page-back-link__arrow { color: var(--m-accent) !important; } /* shared heading classes — Cinzel → DM Serif */ [data-theme="modern"] .experience-section-eyebrow { font-family: var(--m-mono) !important; font-size: 0.64rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--m-accent) !important; text-shadow: none !important; } [data-theme="modern"] .experience-section-title { font-family: var(--m-serif) !important; font-size: clamp(2rem, 5vw, 3.8rem) !important; font-weight: 400 !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; color: var(--m-fg) !important; text-shadow: none !important; } [data-theme="modern"] .experience-section-lede { font-family: var(--m-sans) !important; font-size: clamp(0.9rem, 1.4vw, 1.05rem) !important; color: var(--m-muted) !important; line-height: 1.7 !important; text-shadow: none !important; } /* ── BIO PAGE ──────────────────────────────────────────────── */ /* Kill Space scan-line grid overlay */ [data-theme="modern"] .bio-page-section::after { opacity: 0 !important; pointer-events: none !important; } [data-theme="modern"] .bio-page-section { background: var(--m-bg) !important; border-top: none !important; color: var(--m-fg) !important; isolation: isolate; } [data-theme="modern"] .bio-page-heading { text-align: left !important; margin-inline: 0 !important; } /* Split layout images */ [data-theme="modern"] .bio-split__img { border-radius: var(--m-radius-lg) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important; } /* Yeti blurb card */ [data-theme="modern"] .bio-yeti-blurb { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; box-shadow: none !important; padding: 20px 22px !important; } [data-theme="modern"] .bio-yeti-blurb__title { font-family: var(--m-serif) !important; font-size: 1.1rem !important; font-weight: 400 !important; color: var(--m-fg) !important; text-shadow: none !important; } [data-theme="modern"] .bio-yeti-blurb__text { font-family: var(--m-sans) !important; font-size: 0.88rem !important; color: var(--m-muted) !important; line-height: 1.7 !important; } /* Prose panel */ [data-theme="modern"] .bio-panel, [data-theme="modern"] .bio-prose { background: transparent !important; color: var(--m-fg) !important; } [data-theme="modern"] .bio-prose p, [data-theme="modern"] .bio-prose ul, [data-theme="modern"] .bio-prose li { font-family: var(--m-sans) !important; font-size: clamp(0.88rem, 1.3vw, 1rem) !important; color: var(--m-muted) !important; line-height: 1.8 !important; text-shadow: none !important; } [data-theme="modern"] .bio-block__title { font-family: var(--m-serif) !important; font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important; font-weight: 400 !important; color: var(--m-fg) !important; letter-spacing: -0.02em !important; text-shadow: none !important; border-bottom: 1px solid var(--m-border) !important; padding-bottom: 10px !important; margin-bottom: 18px !important; } /* ── SUPER IC PAGE ─────────────────────────────────────────── */ /* Kill all HUD / scan-line aesthetics */ [data-theme="modern"] .super-ic-hud-corner, [data-theme="modern"] .super-ic-hud-tag { display: none !important; } [data-theme="modern"] .super-ic-section::before, [data-theme="modern"] .super-ic-section::after, [data-theme="modern"] .super-ic-hero::before, [data-theme="modern"] .super-ic-hero::after, [data-theme="modern"] .super-ic-panel::before, [data-theme="modern"] .super-ic-panel::after { opacity: 0 !important; } [data-theme="modern"] .super-ic-section, [data-theme="modern"] .super-ic-container { background: var(--m-bg) !important; color: var(--m-fg) !important; } /* Hero heading area */ [data-theme="modern"] .super-ic-hero { background: transparent !important; padding-bottom: clamp(20px, 4vw, 36px) !important; border-bottom: 1px solid var(--m-border) !important; margin-bottom: clamp(24px, 4vw, 40px) !important; } /* HUD panel → clean card */ [data-theme="modern"] .super-ic-panel--hud, [data-theme="modern"] .super-ic-panel { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; box-shadow: none !important; color: var(--m-fg) !important; } /* TOC sidebar */ [data-theme="modern"] .super-ic-toc { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; padding: 20px !important; box-shadow: none !important; position: sticky !important; top: 88px !important; } [data-theme="modern"] .super-ic-toc__label { font-family: var(--m-mono) !important; font-size: 0.58rem !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--m-muted) !important; margin-bottom: 14px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--m-border) !important; } [data-theme="modern"] .super-ic-toc__link { display: block !important; font-family: var(--m-sans) !important; font-size: 0.8rem !important; color: var(--m-muted) !important; text-decoration: none !important; padding: 5px 0 5px 10px !important; border-left: 2px solid transparent !important; transition: color 0.18s ease, border-color 0.18s ease !important; line-height: 1.4 !important; } [data-theme="modern"] .super-ic-toc__link:hover, [data-theme="modern"] .super-ic-toc__link.is-active, [data-theme="modern"] .super-ic-toc__link[aria-current="true"] { color: var(--m-fg) !important; border-left-color: var(--m-accent) !important; } /* Section blocks */ [data-theme="modern"] .super-ic-block { background: transparent !important; color: var(--m-fg) !important; } [data-theme="modern"] .super-ic-block__title { font-family: var(--m-serif) !important; font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important; font-weight: 400 !important; color: var(--m-fg) !important; text-shadow: none !important; letter-spacing: -0.02em !important; border-bottom: 1px solid var(--m-border) !important; padding-bottom: 10px !important; margin-bottom: 24px !important; } [data-theme="modern"] .super-ic-prose { background: transparent !important; } [data-theme="modern"] .super-ic-prose p, [data-theme="modern"] .super-ic-prose li { font-family: var(--m-sans) !important; font-size: clamp(0.88rem, 1.3vw, 1rem) !important; color: var(--m-muted) !important; line-height: 1.8 !important; text-shadow: none !important; } /* Quality cards */ [data-theme="modern"] .super-ic-quality-card { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; box-shadow: none !important; transition: border-color 0.2s ease, transform 0.2s ease !important; color: var(--m-fg) !important; } [data-theme="modern"] .super-ic-quality-card:hover { border-color: rgba(200,255,0,0.3) !important; transform: translateY(-2px) !important; } [data-theme="modern"] .super-ic-quality-card__icon { color: var(--m-accent) !important; filter: none !important; text-shadow: none !important; } [data-theme="modern"] .super-ic-quality-card__title { font-family: var(--m-sans) !important; font-size: 0.95rem !important; font-weight: 700 !important; color: var(--m-fg) !important; text-shadow: none !important; } [data-theme="modern"] .super-ic-quality-card__subtitle { font-family: var(--m-mono) !important; font-size: 0.6rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--m-accent) !important; } /* Expand/collapse details */ [data-theme="modern"] .super-ic-details { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius) !important; margin-bottom: 6px !important; box-shadow: none !important; } [data-theme="modern"] .super-ic-details__summary { font-family: var(--m-sans) !important; font-size: 0.9rem !important; font-weight: 600 !important; color: var(--m-fg) !important; padding: 14px 18px !important; cursor: pointer !important; list-style: none !important; } [data-theme="modern"] .super-ic-details__body { font-family: var(--m-sans) !important; font-size: 0.88rem !important; color: var(--m-muted) !important; line-height: 1.75 !important; padding: 0 18px 14px !important; } [data-theme="modern"] .super-ic-expand-btn { font-family: var(--m-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--m-fg) !important; border: 1px solid var(--m-border) !important; background: var(--m-surface) !important; border-radius: var(--m-radius) !important; padding: 8px 16px !important; cursor: pointer !important; } [data-theme="modern"] .super-ic-expand-btn:hover { border-color: rgba(200,255,0,0.4) !important; } /* Archetype list */ [data-theme="modern"] .super-ic-archetype-list { color: var(--m-muted) !important; } [data-theme="modern"] .super-ic-archetype-list li { font-family: var(--m-sans) !important; color: var(--m-muted) !important; } [data-theme="modern"] .super-ic-closing { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; box-shadow: none !important; color: var(--m-fg) !important; } [data-theme="modern"] .super-ic-closing h3, [data-theme="modern"] .super-ic-closing p { font-family: var(--m-sans) !important; color: var(--m-fg) !important; text-shadow: none !important; } /* ── TOYBOX PAGE — green glow swap ─────────────────────────── */ /* Stage bg: near-black not deep-space blue */ [data-theme="modern"] .toybox-lab__stage { background: #0a0a0a !important; } /* Accent glow: Modern green instead of Space cyan */ [data-theme="modern"] .toybox-cta:hover img, [data-theme="modern"] .toybox-cta:focus-visible img { filter: drop-shadow(0 0 6px rgba(200, 255, 0, 1)) drop-shadow(0 0 14px rgba(180, 230, 0, 0.75)) drop-shadow(0 0 32px rgba(160, 200, 0, 0.4)) !important; } /* Caption: green border, dark Modern bg */ [data-theme="modern"] .toybox-caption { background: linear-gradient(135deg, rgba(8,8,8,0.82) 0%, rgba(8,8,8,0.5) 100%) !important; border-left-color: rgba(200,255,0,0.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } [data-theme="modern"] .toybox-caption .experience-section-eyebrow { color: var(--m-accent) !important; } [data-theme="modern"] .toybox-caption .experience-section-lede { color: rgba(240,240,240,0.6) !important; } /* ── SELECTED WORK & PAST WORK secondary page headings ─────── */ [data-theme="modern"] .work-landing-section { background: var(--m-bg) !important; color: var(--m-fg) !important; } [data-theme="modern"] .work-landing-section::before, [data-theme="modern"] .work-landing-section::after { opacity: 0 !important; } /* ── GLOBAL SPACE ELEMENT KILL ─────────────────────────────── */ /* Scan lines / grid overlays on any page */ [data-theme="modern"] [class*="headband"], [data-theme="modern"] [class*="warp"], [data-theme="modern"] [class*="star-field"], [data-theme="modern"] .career-insights-headband { display: none !important; } /* All explicit Space-blue backgrounds set inline */ [data-theme="modern"] [style*="#020510"] { background: var(--m-bg) !important; } [data-theme="modern"] [style*="#04141e"] { background: var(--m-surface) !important; } /* Mobile drawer — no Space dark blue bg */ [data-theme="modern"] .nav-mobile-drawer { background: #111111 !important; border-left: 1px solid rgba(255,255,255,0.08) !important; } [data-theme="modern"] .nav-mobile-drawer .theme-mode__track { background: rgba(200,255,0,0.2) !important; box-shadow: 0 0 0 1px rgba(200,255,0,0.4) !important; } /* Any remaining cyan text that isn't explicitly handled */ [data-theme="modern"] [style*="rgba(125, 253"] { color: var(--m-accent) !important; } /* ── MODERN POLISH — hover states, spacing, accent details ─── */ /* Work tile hover ring on secondary pages */ [data-theme="modern"] .work-tile:hover, [data-theme="modern"] .past-work-card:hover { box-shadow: 0 0 0 1px rgba(200,255,0,0.25) !important; } /* Selected Work & Past Work page cards */ [data-theme="modern"] .work-tile { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; color: var(--m-fg) !important; box-shadow: none !important; transition: border-color 0.2s ease, transform 0.18s ease !important; } [data-theme="modern"] .work-tile:hover { border-color: rgba(200,255,0,0.3) !important; transform: translateY(-2px) !important; } [data-theme="modern"] .work-tile h3, [data-theme="modern"] .work-tile__title { font-family: var(--m-sans) !important; color: var(--m-fg) !important; text-shadow: none !important; } [data-theme="modern"] .work-tile p, [data-theme="modern"] .work-tile__desc { font-family: var(--m-sans) !important; color: var(--m-muted) !important; text-shadow: none !important; } /* Mobile adjustments for new bio/IC overrides */ @media (max-width: 768px) { [data-theme="modern"] .super-ic-toc { position: static !important; margin-bottom: 24px !important; } [data-theme="modern"] .bio-split { grid-template-columns: 1fr !important; } } /* Kill Space-specific entry animations on Super IC cards in Modern mode */ [data-theme="modern"] .super-ic-quality-card { animation: none !important; } [data-theme="modern"] .super-ic-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } /* Kill any remaining cyan box-shadow glows */ [data-theme="modern"] [class*="super-ic-"]:not(.super-ic-toc__link) { box-shadow: none !important; text-shadow: none !important; } /* ============================================================ 2026 DESIGN OVERHAUL — Awwwards / Tesla / SpaceX reference Premium editorial. Confident hiring-manager-grade typography. ============================================================ */ /* ── ROOT UPGRADES ──────────────────────────────────────────── */ :root { --m-section-pad: clamp(72px, 10vw, 120px); --m-section-gap: clamp(48px, 7vw, 80px); } /* ── HERO — max drama ───────────────────────────────────────── */ /* Push headline to full editorial scale */ .m-hero__statement { font-size: clamp(2.8rem, 7.5vw, 8rem) !important; line-height: 1.04 !important; letter-spacing: -0.04em !important; } .m-hero__statement.m-hero__statement--italic { font-size: clamp(2rem, 5.5vw, 6rem) !important; } .m-hero__tag { font-size: 0.72rem !important; letter-spacing: 0.24em !important; margin-bottom: clamp(40px, 8vh, 80px) !important; } /* ── SECTION EYEBROW — universal upgrade ────────────────────── */ .m-eyebrow { display: inline-block; font-family: var(--m-mono); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--m-accent); margin-bottom: 20px; } /* ── WORK PANELS — more editorial, bigger type ──────────────── */ .m-work-panel__project { font-size: clamp(1.5rem, 3vw, 2.8rem) !important; letter-spacing: -0.025em !important; line-height: 1.08 !important; } .m-work-panel__sector { font-size: 0.7rem !important; letter-spacing: 0.2em !important; } .m-work-panel__desc { font-size: clamp(0.9rem, 1.4vw, 1.05rem) !important; line-height: 1.75 !important; } .m-work-panel__cta { font-size: 0.72rem !important; letter-spacing: 0.18em !important; padding: 12px 24px !important; } /* Work section heading */ .m-work__header { margin-bottom: clamp(40px, 6vw, 64px); } .m-work__title, [id="m-work-heading"] { font-size: clamp(2rem, 4.5vw, 4.5rem) !important; letter-spacing: -0.03em !important; line-height: 1.08 !important; } /* ── PAST WORK — section title bigger ──────────────────────── */ .m-pastwork__title { font-size: clamp(1.8rem, 4vw, 4rem) !important; letter-spacing: -0.03em !important; line-height: 1.08 !important; } .m-pastwork-row__company { font-size: clamp(1rem, 1.6vw, 1.15rem) !important; font-weight: 700 !important; } /* ── TIMELINE — bigger title + entry treatment ──────────────── */ .m-timeline__title { font-size: clamp(2rem, 4.5vw, 4.5rem) !important; letter-spacing: -0.03em !important; } .m-timeline__stat-num { font-size: clamp(3.5rem, 7vw, 6.5rem) !important; letter-spacing: -0.04em !important; } .m-timeline__entry-company { font-size: clamp(1rem, 1.5vw, 1.1rem) !important; font-weight: 700 !important; } /* ── PHILOSOPHY — principle number BIG ──────────────────────── */ .m-principle-card__num { font-family: var(--m-serif) !important; font-size: clamp(3rem, 6vw, 5.5rem) !important; line-height: 1 !important; letter-spacing: -0.04em !important; color: rgba(240,240,240,0.06) !important; display: block; margin-bottom: 16px; } .m-principle-card__title { font-family: var(--m-sans) !important; font-size: clamp(1rem, 1.8vw, 1.25rem) !important; font-weight: 800 !important; color: var(--m-fg) !important; letter-spacing: -0.01em !important; margin-bottom: 10px !important; } .m-principle-card__body { font-size: clamp(0.86rem, 1.2vw, 0.96rem) !important; line-height: 1.75 !important; color: var(--m-muted) !important; } .m-principle-card { background: var(--m-surface) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; padding: 28px 24px 24px !important; transition: border-color 0.2s ease, transform 0.2s ease !important; position: relative; overflow: hidden; } .m-principle-card:hover { border-color: rgba(200,255,0,0.25) !important; transform: translateY(-2px) !important; } /* Philosophy section header */ .m-philosophy__title, [id="m-philosophy-heading"] { font-size: clamp(2rem, 4.5vw, 4.5rem) !important; letter-spacing: -0.03em !important; line-height: 1.08 !important; } /* ── AI SECTION ──────────────────────────────────────────────── */ .m-ai-card { border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; background: var(--m-surface) !important; padding: 28px 28px 24px !important; transition: border-color 0.2s ease !important; } .m-ai-card:hover { border-color: rgba(200,255,0,0.3) !important; } .m-ai-card__tool { font-family: var(--m-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--m-accent) !important; margin-bottom: 10px !important; } .m-ai-card__title { font-family: var(--m-sans) !important; font-size: clamp(1rem, 1.6vw, 1.2rem) !important; font-weight: 700 !important; color: var(--m-fg) !important; margin-bottom: 10px !important; letter-spacing: -0.01em !important; } .m-ai-card__desc { font-size: clamp(0.86rem, 1.2vw, 0.95rem) !important; line-height: 1.75 !important; color: var(--m-muted) !important; } /* AI section heading */ [id="m-ai-heading"] { font-size: clamp(2rem, 4.5vw, 4.5rem) !important; letter-spacing: -0.03em !important; } /* ── CTA SECTION — MAXIMUM DRAMA ────────────────────────────── */ .m-cta { background: #000000 !important; border-top: 1px solid rgba(255,255,255,0.06) !important; } .m-cta__headline { font-size: clamp(3rem, 9vw, 10rem) !important; letter-spacing: -0.04em !important; line-height: 1.0 !important; font-weight: 400 !important; } .m-cta__sub { font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important; color: rgba(240,240,240,0.5) !important; letter-spacing: 0.02em !important; max-width: 44ch !important; } .m-btn--primary { padding: 14px 32px !important; font-size: 0.8rem !important; letter-spacing: 0.16em !important; color: #000000 !important; } .m-btn--outline { padding: 14px 32px !important; font-size: 0.8rem !important; letter-spacing: 0.16em !important; } /* ── TOYBOX MODERN GRID ──────────────────────────────────────── */ .m-toybox-grid { padding: var(--m-section-pad) 0; background: var(--m-bg); } .m-toybox-grid__header { max-width: 720px; margin-bottom: clamp(48px, 8vw, 80px); } .m-toybox-grid__title { font-family: var(--m-serif); font-size: clamp(2.8rem, 7vw, 7.5rem); line-height: 1.04; letter-spacing: -0.04em; color: var(--m-fg); font-weight: 400; margin: 0 0 clamp(16px, 2.5vw, 24px); } .m-toybox-grid__lede { font-family: var(--m-sans); font-size: clamp(0.9rem, 1.4vw, 1.05rem); line-height: 1.7; color: var(--m-muted); max-width: 54ch; margin: 0; } .m-toybox-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--m-border); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); overflow: hidden; } .m-toybox-tile { display: flex; flex-direction: column; padding: 28px 24px 24px; background: var(--m-bg); text-decoration: none; color: var(--m-fg); position: relative; overflow: hidden; min-height: 200px; transition: background 0.2s ease; } .m-toybox-tile:hover { background: var(--m-surface); } .m-toybox-tile:hover .m-toybox-tile__arrow { opacity: 1; transform: translateX(0); } .m-toybox-tile:hover .m-toybox-tile__num { color: rgba(200,255,0,0.15); } .m-toybox-tile__num { font-family: var(--m-serif); font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; color: rgba(255,255,255,0.04); display: block; margin-bottom: 12px; transition: color 0.2s ease; user-select: none; } .m-toybox-tile__title { font-family: var(--m-sans); font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 700; color: var(--m-fg); line-height: 1.3; margin: 0 0 8px; letter-spacing: -0.01em; } .m-toybox-tile__desc { font-family: var(--m-sans); font-size: 0.82rem; line-height: 1.6; color: var(--m-muted); margin: 0; flex: 1; } .m-toybox-tile__cat { display: inline-block; font-family: var(--m-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--m-accent); margin-top: 16px; } .m-toybox-tile__arrow { position: absolute; bottom: 20px; right: 20px; font-size: 0.9rem; color: var(--m-accent); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; } /* Toybox grid header eyebrow */ .m-toybox-grid__header .m-eyebrow { display: block; margin-bottom: 16px; } /* ── SECTION SEPARATORS — add grain line between major sections ─ */ .m-work, .m-pastwork, .m-timeline, .m-philosophy, .m-ai { border-top: 1px solid var(--m-border); } /* ── MOBILE ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .m-hero__statement { font-size: clamp(2.4rem, 11vw, 4rem) !important; } .m-hero__statement.m-hero__statement--italic { font-size: clamp(1.8rem, 8.5vw, 3rem) !important; } .m-cta__headline { font-size: clamp(2.4rem, 12vw, 5rem) !important; } .m-work-panel__project { font-size: clamp(1.4rem, 7vw, 2.2rem) !important; } .m-toybox-tiles { grid-template-columns: repeat(2, 1fr); } .m-toybox-tile { min-height: 160px; padding: 20px 16px 16px; } .m-toybox-grid__title { font-size: clamp(2.2rem, 11vw, 3.5rem); } .m-principle-card__num { font-size: clamp(2.5rem, 10vw, 4rem) !important; } } @media (max-width: 480px) { .m-toybox-tiles { grid-template-columns: 1fr; } } @media (min-width: 769px) and (max-width: 1100px) { .m-toybox-tiles { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ FINAL 2026 POLISH — scroll reveal, section rhythm, details ============================================================ */ /* ── Scroll-reveal animation for new elements ── */ .m-toybox-tile { opacity: 0; transform: translateY(16px); animation: m-tile-in 0.5s ease forwards; } .m-toybox-tile:nth-child(1) { animation-delay: 0.05s; } .m-toybox-tile:nth-child(2) { animation-delay: 0.10s; } .m-toybox-tile:nth-child(3) { animation-delay: 0.15s; } .m-toybox-tile:nth-child(4) { animation-delay: 0.20s; } .m-toybox-tile:nth-child(5) { animation-delay: 0.25s; } .m-toybox-tile:nth-child(6) { animation-delay: 0.30s; } .m-toybox-tile:nth-child(7) { animation-delay: 0.35s; } .m-toybox-tile:nth-child(8) { animation-delay: 0.40s; } .m-toybox-tile:nth-child(9) { animation-delay: 0.45s; } .m-toybox-tile:nth-child(10){ animation-delay: 0.50s; } .m-toybox-tile:nth-child(11){ animation-delay: 0.55s; } @keyframes m-tile-in { to { opacity: 1; transform: translateY(0); } } /* ── Hero background — subtle accent gradient pulse ── */ .m-hero { background: radial-gradient( ellipse 100% 80% at 80% 120%, rgba(200,255,0,0.04) 0%, transparent 60% ), linear-gradient(165deg, #080808 0%, #0a0a0a 60%, #080808 100%) !important; } /* ── Work panel hover border ── */ .m-work-panel { transition: border-color 0.25s ease !important; } .m-work-panel:hover { border-color: rgba(200,255,0,0.18) !important; } /* ── Work section — hero panel (first) gets full-height accent ── */ .m-work-panel:first-child { border-left: 2px solid var(--m-accent) !important; } /* ── Past work section header separator line ── */ .m-pastwork__header { padding-bottom: clamp(24px, 4vw, 36px); border-bottom: 1px solid var(--m-border); margin-bottom: clamp(24px, 4vw, 36px); } /* ── Timeline era entries — accent dot ── */ .m-timeline__entry-company::before { content: '·'; color: var(--m-accent); margin-right: 8px; font-size: 1rem; } /* ── CTA inner — generous top padding, centered ── */ .m-cta__inner { padding-top: clamp(64px, 10vw, 120px) !important; padding-bottom: clamp(64px, 10vw, 120px) !important; } /* ── AI section grid ── */ .m-ai__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } @media (max-width: 900px) { .m-ai__grid { grid-template-columns: 1fr !important; } } /* ── m-container max-width upgrade for wider content ── */ .m-container { max-width: 1280px !important; padding-left: clamp(20px, 5vw, 64px) !important; padding-right: clamp(20px, 5vw, 64px) !important; } /* ── Surface-2 variable fallback ── */ :root { --m-surface-2: rgba(255,255,255,0.06); --m-muted-2: rgba(240,240,240,0.22); } /* ── Accent line decoration on section titles ── */ .m-pastwork__title::after, .m-timeline__title::after, .m-philosophy__title::after { content: '.'; color: var(--m-accent); } /* ── Modern nav active page indicator ── */ .m-nav a[href*="selectedwork"] { } /* Active state based on current URL */ .m-nav a.m-nav--active { color: var(--m-fg) !important; } .m-nav a.m-nav--active::after { transform: scaleX(1) !important; } /* ── Ensure no Space pseudo-elements bleed through anywhere ── */ [data-theme="modern"] main::before, [data-theme="modern"] main::after, [data-theme="modern"] body::before, [data-theme="modern"] body::after, [data-theme="modern"] .page::before, [data-theme="modern"] .page::after { display: none !important; opacity: 0 !important; } /* ── Remove cursor:not-allowed from Space toggle in Modern mode ── */ [data-theme="modern"] .site-header--arcane .theme-mode__switch { cursor: pointer !important; } /* ── Consistent section padding ── */ .m-work, .m-pastwork, .m-timeline, .m-philosophy, .m-ai, .m-cta { padding-top: var(--m-section-pad); padding-bottom: var(--m-section-pad); } @media (prefers-reduced-motion: reduce) { .m-toybox-tile { animation: none; opacity: 1; transform: none; } } /* ============================================================ TOYBOX BENTO MOSAIC GRID Awwwards-level image mosaic — mix of 1×1, 2×1, 2×2 tiles. ============================================================ */ .m-toybox-bento { padding: var(--m-section-pad) 0 calc(var(--m-section-pad) * 1.5); background: var(--m-bg); } /* ── Header ── */ .m-bento-header { max-width: 720px; margin-bottom: clamp(40px, 7vw, 72px); } .m-bento-header__title { font-family: var(--m-serif); font-size: clamp(2.8rem, 7vw, 7.5rem); line-height: 1.03; letter-spacing: -0.04em; font-weight: 400; color: var(--m-fg); margin: 0 0 clamp(14px, 2vw, 22px); } .m-bento-header__lede { font-family: var(--m-sans); font-size: clamp(0.9rem, 1.4vw, 1.05rem); line-height: 1.7; color: var(--m-muted); max-width: 54ch; margin: 0; } /* ── Grid container ── */ .m-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(180px, 24vw, 320px); gap: 10px; } /* ── Individual tile ── */ .m-bento-tile { position: relative; display: block; text-decoration: none; overflow: hidden; border-radius: 12px; background: var(--m-surface); cursor: pointer; /* Entrance animation */ opacity: 0; transform: scale(0.96); animation: m-bento-in 0.55s cubic-bezier(0.22,1,0.36,1) forwards; } /* Stagger each tile */ .m-bento-tile:nth-child(1) { animation-delay: 0.05s; } .m-bento-tile:nth-child(2) { animation-delay: 0.10s; } .m-bento-tile:nth-child(3) { animation-delay: 0.15s; } .m-bento-tile:nth-child(4) { animation-delay: 0.20s; } .m-bento-tile:nth-child(5) { animation-delay: 0.25s; } .m-bento-tile:nth-child(6) { animation-delay: 0.30s; } .m-bento-tile:nth-child(7) { animation-delay: 0.35s; } .m-bento-tile:nth-child(8) { animation-delay: 0.40s; } .m-bento-tile:nth-child(9) { animation-delay: 0.45s; } .m-bento-tile:nth-child(10) { animation-delay: 0.50s; } .m-bento-tile:nth-child(11) { animation-delay: 0.55s; } @keyframes m-bento-in { to { opacity: 1; transform: scale(1); } } /* Image fill */ .m-bento-tile__img { position: absolute; inset: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); will-change: transform; } .m-bento-tile:hover .m-bento-tile__img { transform: scale(1.06); } /* Accent colour tint (top-left diagonal) */ .m-bento-tile__tint { position: absolute; inset: 0; pointer-events: none; z-index: 1; transition: opacity 0.3s ease; } .m-bento-tile:hover .m-bento-tile__tint { opacity: 0.7; } /* Dark gradient overlay — bottom-up for text legibility */ .m-bento-tile__overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( to top, rgba(6,6,6,0.92) 0%, rgba(6,6,6,0.55) 35%, rgba(6,6,6,0.1) 65%, rgba(6,6,6,0.0) 100% ); } /* Content (sits above overlays) */ .m-bento-tile__content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 4px; } .m-bento-tile__cat { font-family: var(--m-mono); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200,255,0,0.85); display: block; margin-bottom: 4px; } .m-bento-tile__title { font-family: var(--m-sans); font-size: clamp(0.92rem, 1.6vw, 1.1rem); font-weight: 700; color: #ffffff; letter-spacing: -0.01em; line-height: 1.25; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,0.6); } /* Description — hidden, revealed on hover */ .m-bento-tile__desc { font-family: var(--m-sans); font-size: 0.78rem; color: rgba(240,240,240,0.72); line-height: 1.5; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease; } .m-bento-tile:hover .m-bento-tile__desc { max-height: 80px; opacity: 1; transform: translateY(0); } /* Live prototype badge */ .m-bento-tile__proto { display: inline-flex; align-items: center; gap: 5px; font-family: var(--m-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: #000; background: rgba(200,255,0,0.9); border-radius: 4px; padding: 4px 8px; text-decoration: none; margin-top: 8px; width: fit-content; z-index: 10; pointer-events: auto; transition: background 0.2s ease; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(4px); transition: max-height 0.35s ease 0.05s, opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s, background 0.2s ease; } .m-bento-tile:hover .m-bento-tile__proto { max-height: 40px; opacity: 1; transform: translateY(0); } .m-bento-tile__proto:hover { background: rgba(220,255,60,1) !important; } /* Arrow indicator */ .m-bento-tile__arrow { position: absolute; top: 16px; right: 18px; z-index: 4; font-size: 0.9rem; color: rgba(255,255,255,0.4); opacity: 0; transform: translate(-6px, 6px); transition: opacity 0.25s ease, transform 0.25s ease; } .m-bento-tile:hover .m-bento-tile__arrow { opacity: 1; transform: translate(0, 0); } /* ── RESPONSIVE ─── */ @media (max-width: 900px) { .m-bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(160px, 28vw, 260px); } /* Reset all spans to 1×1 on tablet */ .m-bento-tile { grid-column: span 1 !important; grid-row: span 1 !important; } /* First tile gets 2-wide on tablet */ .m-bento-tile:first-child { grid-column: span 2 !important; } } @media (max-width: 540px) { .m-bento-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(180px, 55vw, 260px); } .m-bento-tile, .m-bento-tile:first-child { grid-column: span 1 !important; grid-row: span 1 !important; } .m-bento-tile__desc { max-height: 72px !important; opacity: 1 !important; transform: none !important; } .m-bento-tile__proto { max-height: 40px !important; opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-motion: reduce) { .m-bento-tile { animation: none; opacity: 1; transform: none; } .m-bento-tile__img { transition: none; } } /* ============================================================ TOYBOX CHILD PAGES — kill Space background, apply Modern ============================================================ */ [data-theme="modern"] .case-space-bg, [data-theme="modern"] .case-space-bg * { display: none !important; } [data-theme="modern"] .case-study-page, [data-theme="modern"] .case-study-page--space-theme { background: var(--m-bg) !important; } [data-theme="modern"] .work-landing-section, [data-theme="modern"] .work-landing-section.toybox-experience { background: var(--m-bg) !important; color: var(--m-fg) !important; } [data-theme="modern"] .work-landing-section::before { opacity: 0 !important; } /* Toybox child page title area */ [data-theme="modern"] .toybox-experience__copy h1, [data-theme="modern"] .toybox-experience__copy .experience-section-title { font-family: var(--m-serif) !important; color: var(--m-fg) !important; text-shadow: none !important; } /* Back to toybox link on child pages */ [data-theme="modern"] .toybox-experience__back a, [data-theme="modern"] .page-back-link { color: var(--m-muted) !important; border-color: var(--m-border) !important; background: var(--m-surface) !important; box-shadow: none !important; } /* Iframe embed container */ [data-theme="modern"] .toybox-experience__media-col, [data-theme="modern"] .case-video-block { border-radius: var(--m-radius-lg) !important; overflow: hidden !important; border: 1px solid var(--m-border) !important; } /* Timeline sub-heading line */ .m-timeline__sub { font-family: var(--m-sans); font-size: clamp(0.9rem, 1.4vw, 1.1rem); color: var(--m-muted); margin: 8px 0 0; letter-spacing: 0; font-style: italic; } /* ============================================================ CLIENT ROSTER — allcompanies.png (sections/clients.js) Single pre-composed image; inverted + dimmed for dark bg. ============================================================ */ .m-clients { padding: clamp(40px, 6vw, 80px) 0; background: var(--m-bg); border-top: 1px solid var(--m-border); border-bottom: 1px solid var(--m-border); } .m-clients__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3.5vw, 36px); } .m-clients__label { text-align: center; } .m-clients__img-wrap { width: 100%; max-width: 960px; } .m-clients__img { display: block; width: 100%; height: auto; /* Image is white logos on black — already matches the dark bg. Slight opacity reduction so it reads as a trust signal, not a hero element. */ opacity: 0.72; transition: opacity 0.4s ease; } .m-clients:hover .m-clients__img { opacity: 0.9; } /* ============================================================ CREDENTIALS SECTION (sections/credentials.js) Three-column compact layout — tools, skills, education. ============================================================ */ .m-credentials { padding: var(--m-section-pad) 0; background: var(--m-bg); border-top: 1px solid var(--m-border); } .m-creds__header { margin-bottom: clamp(40px, 6vw, 64px); } .m-creds__title { font-family: var(--m-serif); font-size: clamp(2rem, 4.5vw, 4rem); letter-spacing: -0.03em; line-height: 1.08; color: var(--m-fg); font-weight: 400; margin: 0; } .m-creds__title::after { content: '.'; color: var(--m-accent); } .m-creds__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; } .m-creds__col-label { font-family: var(--m-mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-muted); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--m-border); } /* Tools pills */ .m-creds__pills { display: flex; flex-wrap: wrap; gap: 8px; } .m-creds__pill { font-family: var(--m-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--m-fg); border: 1px solid var(--m-border); border-radius: 999px; padding: 5px 12px; transition: border-color 0.2s ease, color 0.2s ease; cursor: default; } .m-creds__pill:hover { border-color: rgba(200,255,0,0.4); color: var(--m-accent); } /* Skills list */ .m-creds__skills-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .m-creds__skill { font-family: var(--m-sans); font-size: 0.88rem; color: var(--m-muted); display: flex; align-items: baseline; gap: 8px; line-height: 1.5; } .m-creds__skill-dot { color: var(--m-accent); font-size: 0.72rem; flex-shrink: 0; font-family: var(--m-mono); } /* Education / credential badges */ .m-creds__badges { display: flex; flex-direction: column; gap: 14px; } .m-creds__badge { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius); } .m-creds__badge-type { font-family: var(--m-mono); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-accent); } .m-creds__badge-value { font-family: var(--m-sans); font-size: 0.88rem; font-weight: 600; color: var(--m-fg); } .m-creds__badge-detail { font-family: var(--m-sans); font-size: 0.76rem; color: var(--m-muted); } @media (max-width: 900px) { .m-creds__grid { grid-template-columns: 1fr 1fr; } .m-creds__col:last-child { grid-column: span 2; } } @media (max-width: 600px) { .m-creds__grid { grid-template-columns: 1fr; } .m-creds__col:last-child { grid-column: span 1; } } /* Inline accent highlight — lime-green on hero statements */ .m-accent-text, .m-hero__statement .m-accent-text, .m-hero__statement--italic .m-accent-text { color: var(--m-accent) !important; font-style: inherit; } /* ============================================================ ACCENT POLISH PASS — targeted lime-green lifts ============================================================ */ /* --- Nav: text turns accent on hover (not just underline) --- */ [data-theme="modern"] .m-nav a:hover { color: var(--m-accent) !important; } /* --- Work panels: CTA arrow always accent; title goes accent on hover --- */ .m-work-panel__cta { color: var(--m-accent) !important; } .m-work-panel:hover .m-work-panel__title { color: var(--m-accent) !important; transition: color 0.25s ease; } /* --- Past Work rows: index number always accent --- */ .m-pastwork-row__num { color: var(--m-accent) !important; } /* Company name turns accent on row hover */ .m-pastwork-row:hover .m-pastwork-row__company { color: var(--m-accent) !important; transition: color 0.2s ease; } /* --- Timeline: company name turns accent on hover --- */ .m-timeline__entry:hover .m-timeline__entry-company { color: var(--m-accent) !important; transition: color 0.2s ease; } /* "Show N more" button always accent */ .m-timeline__more-btn { color: var(--m-accent) !important; } /* --- Section titles: accent period pseudo-element on all major headings --- */ .m-work__title::after, .m-timeline__title::after, .m-cta__headline::after { content: '.'; color: var(--m-accent); } /* --- Credentials: section heading number accent already set; pill borders flash accent on hover (already set); strengthen hover --- */ .m-creds__pill:hover { background: rgba(200, 255, 0, 0.06) !important; } /* --- Hero scroll arrow: full accent --- */ .m-hero__scroll { color: var(--m-accent) !important; border-color: rgba(200, 255, 0, 0.25) !important; } .m-hero__scroll:hover { background: rgba(200, 255, 0, 0.08) !important; border-color: var(--m-accent) !important; } /* --- Active nav indicator dot: accent --- */ .m-nav a.m-nav--active { color: var(--m-accent) !important; } /* --- Bento tile categories already accent; arrow on hover strengthens --- */ .m-bento-tile:hover .m-bento-tile__arrow { color: var(--m-accent) !important; transform: translate(3px, -3px) !important; } /* --- "View all work" link in selected work section --- */ .m-work__all-link { color: var(--m-muted) !important; border-color: var(--m-border) !important; transition: color 0.2s ease, border-color 0.2s ease !important; } .m-work__all-link:hover { color: var(--m-accent) !important; border-color: var(--m-accent) !important; } /* --- Philosophy principle numbers: accent always (already set), brighten --- */ .m-principle-card__num { opacity: 1 !important; } /* --- AI section: statement emphasis already accent; card tool tags strengthen --- */ .m-ai-card__tool { border-color: rgba(200, 255, 0, 0.2) !important; } /* ============================================================ BULK UPDATE PASS — May 2026 ============================================================ */ /* 1. TOYBOX CAPTION — move to right side so it doesn't cover hotspots */ [data-theme="modern"] .toybox-caption { left: auto !important; right: 2.5% !important; bottom: 4% !important; text-align: right !important; border-left: none !important; border-right: 2px solid rgba(200,255,0,0.45) !important; } /* 2. TEAL/CYAN → LIME GREEN everywhere in Modern mode Covers: case-pull borders, case-prose strong, case-section kickers, case-ami cards, any inline rgba(0,255,255,...) or #7dfdfe */ [data-theme="modern"] .case-pull { border-left-color: rgba(200,255,0,0.45) !important; } [data-theme="modern"] .case-pull strong, [data-theme="modern"] .case-prose strong { color: var(--m-accent) !important; } [data-theme="modern"] .case-section__kicker { color: var(--m-accent) !important; text-shadow: none !important; } /* Applied Minds ami cards — swap cyan to accent */ [data-theme="modern"] .case-ami-brief-card { border-color: rgba(200,255,0,0.22) !important; background: linear-gradient(160deg, rgba(8,8,8,0.85) 0%, rgba(14,14,14,0.7) 100%) !important; } [data-theme="modern"] .case-ami-brief-card:hover, [data-theme="modern"] .case-narrative--applied-minds .case-ami-brief-card:focus-within { border-color: rgba(200,255,0,0.48) !important; box-shadow: 0 0 28px rgba(200,255,0,0.10), 0 12px 32px rgba(0,0,0,0.3) !important; } [data-theme="modern"] .case-ami-brief-card::before { color: rgba(200,255,0,0.35) !important; } [data-theme="modern"] .case-ami-brief-card__icon { color: var(--m-accent) !important; filter: drop-shadow(0 0 8px rgba(200,255,0,0.25)) !important; } [data-theme="modern"] .case-ami-brief-card__title { text-shadow: none !important; } [data-theme="modern"] .case-ami-delivery-auto__eyebrow { color: var(--m-accent) !important; text-shadow: none !important; } [data-theme="modern"] .case-ami-brief-details__summary { color: rgba(200,255,0,0.72) !important; } [data-theme="modern"] .case-ami-outcome-dl dt { color: var(--m-accent) !important; } /* Carrot icons (::before arrows in lists, personal notes) */ [data-theme="modern"] .case-callout-list li::before, [data-theme="modern"] .case-callout-list li:before { color: var(--m-accent) !important; } [data-theme="modern"] [class*="personal-note"] { border-left-color: rgba(200,255,0,0.35) !important; } /* 3. BLACK BOX around hero images — remove deep-space blue bg */ [data-theme="modern"] .case-hero__media { background: var(--m-bg) !important; } [data-theme="modern"] .case-hero { background: var(--m-bg) !important; } /* 4. WORK PANEL CTA — look like a real button */ .m-work-panel__cta { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--m-mono) !important; font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--m-accent) !important; border: 1px solid rgba(200,255,0,0.35) !important; border-radius: 4px !important; padding: 9px 16px !important; background: transparent !important; transition: background 0.2s ease, border-color 0.2s ease !important; text-decoration: none !important; margin-top: 12px !important; } .m-work-panel__cta:hover { background: rgba(200,255,0,0.08) !important; border-color: var(--m-accent) !important; } /* 5. CASE STUDY / TOYBOX external CTA links — real button style */ [data-theme="modern"] .case-view-case-study, [data-theme="modern"] .case-back.case-view-case-study, [data-theme="modern"] .toybox-experience__ctas a, [data-theme="modern"] .toybox-experience__ctas button { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--m-mono) !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #000000 !important; background: var(--m-accent) !important; border: 1px solid var(--m-accent) !important; border-radius: 4px !important; padding: 10px 20px !important; cursor: pointer !important; text-decoration: none !important; transition: background 0.2s ease, color 0.2s ease !important; margin-top: 0 !important; } [data-theme="modern"] .case-view-case-study:hover, [data-theme="modern"] .case-back.case-view-case-study:hover, [data-theme="modern"] .toybox-experience__ctas a:hover, [data-theme="modern"] .toybox-experience__ctas button:hover { background: #d4ff1a !important; border-color: #d4ff1a !important; } /* 6. AI INFLUENCER — WIP image is now in the HTML below the gen-grid */ .toybox-experience__wip-footer { margin-top: 16px; width: 100%; } /* Swap all remaining cyan/teal hex references in Modern mode */ [data-theme="modern"] [style*="color: #7dfd"], [data-theme="modern"] [style*="color:#7dfd"], [data-theme="modern"] [style*="color: rgba(125, 253"] { color: var(--m-accent) !important; } /* Super IC — highlighted emphasis words */ [data-theme="modern"] .super-ic-em { color: var(--m-accent) !important; font-weight: 600 !important; font-style: normal !important; } /* Toybox child page — Back to Toybox link: minimal arrow + text, no Space button chrome */ [data-theme="modern"] .toybox-experience__back, [data-theme="modern"] a.case-back.toybox-experience__back { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: var(--m-mono) !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--m-accent) !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 clamp(1rem, 2.5vw, 1.75rem) !important; text-decoration: none !important; opacity: 0.75 !important; transition: opacity 0.2s ease, color 0.2s ease !important; } [data-theme="modern"] a.case-back.toybox-experience__back:hover { opacity: 1 !important; color: var(--m-accent) !important; } /* Personal Note toggle — remove stroke border, chevron → lime-green */ [data-theme="modern"] .case-intro-panel__drawer-summary { border: none !important; box-shadow: none !important; background: transparent !important; padding-left: 0 !important; color: var(--m-fg) !important; } [data-theme="modern"] .case-intro-panel__drawer-summary:hover { border: none !important; background: transparent !important; color: var(--m-accent) !important; } [data-theme="modern"] .case-intro-panel__drawer-summary::after { border-top-color: var(--m-accent) !important; } [data-theme="modern"] .case-intro-panel__drawer-summary:focus-visible { outline-color: var(--m-accent) !important; } /* ============================================================ MODERN MOOD MUSIC — nav button + panel ============================================================ */ /* MOOD nav button */ .m-mood-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--m-mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-muted); background: none; border: 1px solid var(--m-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; white-space: nowrap; } .m-mood-btn:hover { color: var(--m-fg); border-color: var(--m-border-mid); } .m-mood-btn--on, .m-mood-btn--on:hover { color: var(--m-accent); border-color: rgba(200,255,0,0.5); background: rgba(200,255,0,0.06); } .m-mood-icon { font-size: 0.9rem; line-height: 1; color: inherit; } .m-mood-btn--on .m-mood-icon { animation: m-note-pulse 1.8s ease-in-out infinite; } @keyframes m-note-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .m-mood-label { color: inherit; } /* Panel removed — MOOD button toggles music directly */ /* Hidden YouTube player host */ #modern-music-player-host { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; bottom: 0; right: 0; } /* Modern nav — icon-only link (LinkedIn) — always full colour, 22px */ .m-nav__icon-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 3px !important; opacity: 1 !important; transition: transform 0.2s ease, opacity 0.2s ease !important; } .m-nav__icon-link:hover { transform: scale(1.1) !important; } .m-nav__icon-link img { display: block; width: 22px !important; height: 22px !important; object-fit: contain; filter: none !important; border-radius: 4px; } /* Tighten nav spacing so everything fits one line */ [data-theme="modern"] .m-nav { gap: clamp(10px, 1.6vw, 20px) !important; flex-wrap: nowrap !important; } [data-theme="modern"] .m-nav a { font-size: clamp(0.58rem, 0.75vw, 0.68rem) !important; white-space: nowrap !important; } /* Tighten MOOD button for nav fit */ .m-mood-btn { padding: 5px 11px !important; font-size: clamp(0.58rem, 0.75vw, 0.65rem) !important; letter-spacing: 0.14em !important; } /* ========================================================================== BATCH FIX — May 14 2026 ========================================================================== */ /* ── 1. BLACK BOXES on case-figure--borderless images ────────────────────── Strengthen the transparent override so no dark surface bleeds through. For specific PNGs with dark/black backgrounds baked in, use mix-blend-mode so black pixels become invisible against the site's dark background. */ [data-theme="modern"] .case-figure--borderless, [data-theme="modern"] .case-figure.case-figure--borderless { background: transparent !important; border: none !important; box-shadow: none !important; } /* Syro lead dashboard, Deloitte COIN mark, Disney penguin art, Deep Intent pre-01, Glorifi mortgage checklist — PNGs with dark BG. mix-blend-mode: screen makes black pixels invisible on a dark canvas. */ [data-theme="modern"] .case-figure--syro-dashboard-solo img, [data-theme="modern"] .case-figure--deloitte-coin-mark img, [data-theme="modern"] .case-figure--disney-penguin-half img, [data-theme="modern"] .case-figure--di-pre01 img, [data-theme="modern"] .case-figure--gf-mortgage-checklist-narrow img { mix-blend-mode: screen; background: transparent !important; } /* ── 2. ON THIS PAGE (case-toc) — lighter, smaller, more discreet ────────── Reduce from heavy ALL-CAPS pills to compact small-caps with minimal chrome. */ [data-theme="modern"] .case-toc { padding: 8px 14px !important; background: rgba(10,10,10,0.7) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: 6px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } [data-theme="modern"] .case-toc__label { font-size: 7px !important; letter-spacing: 0.22em !important; color: rgba(255,255,255,0.3) !important; margin: 0 0 5px !important; } [data-theme="modern"] .case-toc__list { gap: 4px !important; flex-wrap: wrap !important; } [data-theme="modern"] .case-toc__link { font-size: 8px !important; letter-spacing: 0.06em !important; font-weight: 500 !important; padding: 4px 8px !important; border-radius: 3px !important; color: rgba(255,255,255,0.45) !important; border: 1px solid rgba(255,255,255,0.08) !important; background: transparent !important; box-shadow: none !important; text-transform: lowercase !important; font-variant-numeric: tabular-nums !important; } [data-theme="modern"] .case-toc__link::first-letter { text-transform: uppercase !important; } [data-theme="modern"] .case-toc__link:hover { color: rgba(255,255,255,0.75) !important; border-color: rgba(255,255,255,0.2) !important; box-shadow: none !important; } [data-theme="modern"] .case-toc__link[aria-current="true"] { color: var(--m-accent) !important; border-color: rgba(200,255,0,0.35) !important; background: rgba(200,255,0,0.06) !important; box-shadow: none !important; font-weight: 600 !important; } /* Mobile: keep it from taking 1/3 of screen */ @media (max-width: 768px) { [data-theme="modern"] .case-toc { padding: 6px 10px !important; } [data-theme="modern"] .case-toc__list { gap: 3px !important; } [data-theme="modern"] .case-toc__link { font-size: 7.5px !important; padding: 3px 6px !important; } } /* ── 3. DISNEY figcaptions (Child navigating / Parent creating / etc.) ────── Change blue figcaption text to lime-green in Modern mode. */ [data-theme="modern"] .case-narrative--disney figcaption, [data-theme="modern"] .case-narrative--disney .case-figure figcaption, [data-theme="modern"] .case-narrative--disney-iw figcaption { color: var(--m-accent) !important; } /* ── 4. OFFICE DEPOT & ZOIC — meta row stays on one line (like Applied Minds) Apply the same inline-grid layout used by .case-meta-row--ami-one-line. */ [data-theme="modern"] .case-narrative--office-depot .case-meta-row, [data-theme="modern"] .case-narrative--zoic .case-meta-row { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 0 clamp(14px, 2.5vw, 28px) !important; } [data-theme="modern"] .case-narrative--office-depot .case-meta-row .case-meta-item, [data-theme="modern"] .case-narrative--zoic .case-meta-row .case-meta-item { flex: 1 1 0 !important; min-width: 0 !important; display: grid !important; grid-template-columns: auto 1fr !important; column-gap: 8px !important; align-items: baseline !important; } [data-theme="modern"] .case-narrative--office-depot .case-meta-row .case-meta-item:not(:last-child), [data-theme="modern"] .case-narrative--zoic .case-meta-row .case-meta-item:not(:last-child) { border-right: 1px solid rgba(200,255,0,0.15) !important; padding-right: clamp(14px, 2vw, 22px) !important; } @media (max-width: 600px) { [data-theme="modern"] .case-narrative--office-depot .case-meta-row, [data-theme="modern"] .case-narrative--zoic .case-meta-row { flex-wrap: wrap !important; } [data-theme="modern"] .case-narrative--office-depot .case-meta-row .case-meta-item, [data-theme="modern"] .case-narrative--zoic .case-meta-row .case-meta-item { flex: 1 1 40% !important; } } /* ── 5. YOUTUBE KIDS — blue text → lime green in Modern mode ─────────────── Targets section kickers, strong-highlights, and pull-quote accents. */ [data-theme="modern"] .case-narrative--ytk .case-section__kicker, [data-theme="modern"] .case-narrative--ytk .case-pull strong, [data-theme="modern"] .case-narrative--ytk .case-pull border, [data-theme="modern"] .case-narrative--ytk [style*="color:#"] { color: var(--m-accent) !important; } /* ── 6. WORK PANEL TILES — scrim behind overlay text on mobile/hover ──────── On mobile, panels stack (image top, text below). The scrim covers the bottom of the image so project number/title reads cleanly against any image. */ [data-theme="modern"] .m-work-panel__media { position: relative !important; } [data-theme="modern"] .m-work-panel__media::after { content: '' !important; position: absolute !important; inset: auto 0 0 0 !important; height: 40% !important; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%) !important; pointer-events: none !important; border-radius: 0 0 var(--m-radius-lg, 8px) var(--m-radius-lg, 8px) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } [data-theme="modern"] .m-work-panel:hover .m-work-panel__media::after { opacity: 1 !important; } @media (max-width: 900px) { [data-theme="modern"] .m-work-panel__media::after { opacity: 1 !important; } } /* ── MOBILE BURGER MENU — Modern mode ─────────────────────────────────────── */ /* Burger button — hidden on desktop, visible on mobile */ .m-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; background: none; border: none; cursor: pointer; flex-shrink: 0; z-index: 1001; } .m-burger__bar { display: block; width: 20px; height: 2px; background: #ffffff; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; transform-origin: center; } .m-burger.is-open .m-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .m-burger.is-open .m-burger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .m-burger.is-open .m-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Only show burger on mobile */ @media (max-width: 768px) { [data-theme="modern"] .m-burger { display: flex !important; } /* Hide desktop nav links on mobile — burger takes over */ [data-theme="modern"] .m-nav { display: none !important; } } /* Full-screen drawer */ .m-drawer { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; } .m-drawer.is-open { pointer-events: auto; opacity: 1; } .m-drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .m-drawer__nav { position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 85vw); background: #0a0a0a; border-left: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; padding: 72px 24px 32px; gap: 4px; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); } .m-drawer.is-open .m-drawer__nav { transform: translateX(0); } /* Links */ .m-drawer__link { display: flex; align-items: center; gap: 10px; padding: 13px 12px; font-family: var(--m-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65); text-decoration: none; border-radius: 4px; border: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .m-drawer__link:hover, .m-drawer__link.m-nav--active { color: var(--m-accent); border-color: rgba(200,255,0,0.2); background: rgba(200,255,0,0.04); } /* Mood row */ .m-drawer__mood-row { display: flex; align-items: center; justify-content: space-between; padding: 12px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.07); border-radius: 4px; } .m-drawer__mood-label { font-family: var(--m-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); text-transform: uppercase; } .m-drawer__mood-btn { font-family: var(--m-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-accent); background: rgba(200,255,0,0.06); border: 1px solid rgba(200,255,0,0.25); border-radius: 3px; padding: 5px 10px; cursor: pointer; transition: background 0.2s ease; } .m-drawer__mood-btn:hover { background: rgba(200,255,0,0.12); } /* Theme toggle row inside drawer */ .m-drawer__theme-row { display: flex; align-items: center; gap: 10px; padding: 14px 12px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.07); cursor: pointer; border-radius: 4px; transition: background 0.2s ease; } .m-drawer__theme-row:hover { background: rgba(255,255,255,0.04); } .m-drawer__theme-label { font-family: var(--m-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.35); } .m-drawer__theme-label--active { color: var(--m-accent); } .m-drawer__toggle-track { width: 36px; height: 20px; border-radius: 10px; background: rgba(200,255,0,0.2); border: 1px solid rgba(200,255,0,0.4); position: relative; } .m-drawer__toggle-thumb { position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--m-accent); } /* ── CREDENTIALS — updated layout (tools+sectors / skills / edu+certs+awards) */ /* Stacked column: two sub-sections separated by a hairline */ .m-creds__col--stacked { display: flex; flex-direction: column; gap: 0; } .m-creds__sub { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--m-border); } .m-creds__sub:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* Tool groups — small category label + pill row */ .m-creds__tool-group { margin-bottom: 14px; } .m-creds__tool-group:last-child { margin-bottom: 0; } .m-creds__tool-group-label { font-family: var(--m-mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin: 0 0 6px; } .m-creds__sub .m-creds__pills { gap: 5px; } /* Sectors list */ .m-creds__sectors-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .m-creds__sector { display: flex; align-items: center; gap: 8px; font-family: var(--m-sans); font-size: 0.82rem; color: rgba(255,255,255,0.75); line-height: 1.4; } .m-creds__sector-dot { color: var(--m-accent); font-size: 0.45rem; flex-shrink: 0; opacity: 0.7; } /* Education */ .m-creds__edu-list { display: flex; flex-direction: column; gap: 12px; } .m-creds__edu { display: flex; flex-direction: column; gap: 3px; } .m-creds__edu-school { font-family: var(--m-sans); font-size: 0.88rem; font-weight: 600; color: var(--m-fg); margin: 0; } .m-creds__edu-detail { font-family: var(--m-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--m-accent); margin: 0; opacity: 0.85; } /* Certifications */ .m-creds__certs-list { display: flex; flex-direction: column; gap: 12px; } .m-creds__cert { display: flex; flex-direction: column; gap: 2px; } .m-creds__cert-name { font-family: var(--m-sans); font-size: 0.85rem; font-weight: 600; color: var(--m-fg); margin: 0; line-height: 1.35; } .m-creds__cert-org { font-family: var(--m-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-accent); margin: 0; opacity: 0.85; } /* Awards */ .m-creds__awards-list { display: flex; flex-direction: column; gap: 16px; } .m-creds__award { padding: 14px; border: 1px solid var(--m-border-mid); border-radius: var(--m-radius); background: var(--m-surface); } .m-creds__award-title { font-family: var(--m-sans); font-size: 0.88rem; font-weight: 700; color: var(--m-fg); margin: 0 0 4px; line-height: 1.3; } .m-creds__award-org { font-family: var(--m-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-accent); margin: 0 0 8px; } .m-creds__award-desc { font-family: var(--m-sans); font-size: 0.78rem; color: var(--m-muted); margin: 0; line-height: 1.55; } /* Responsive: single column on mobile */ @media (max-width: 768px) { .m-creds__col--stacked .m-creds__sub { padding-bottom: 20px; margin-bottom: 20px; } } /* ── CREDENTIALS — font/case consistency pass ────────────────────────────── Align col-label, skills, sectors, edu, certs, awards to same scale. */ /* Unified col-label — all section headings same style */ [data-theme="modern"] .m-creds__col-label { font-family: var(--m-mono) !important; font-size: 0.62rem !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.35) !important; margin: 0 0 12px !important; } /* Skills + Sectors — same size/weight */ [data-theme="modern"] .m-creds__skill, [data-theme="modern"] .m-creds__sector { font-family: var(--m-sans) !important; font-size: 0.82rem !important; font-weight: 400 !important; color: rgba(255,255,255,0.75) !important; line-height: 1.45 !important; } [data-theme="modern"] .m-creds__skill-dot, [data-theme="modern"] .m-creds__sector-dot { color: var(--m-accent) !important; opacity: 0.6 !important; } /* Pills — match body scale */ [data-theme="modern"] .m-creds__pill { font-size: 0.72rem !important; } /* Edu/Cert/Award labels and body — unified */ [data-theme="modern"] .m-creds__edu-school, [data-theme="modern"] .m-creds__cert-name, [data-theme="modern"] .m-creds__award-title { font-family: var(--m-sans) !important; font-size: 0.88rem !important; font-weight: 600 !important; color: var(--m-fg) !important; line-height: 1.3 !important; } [data-theme="modern"] .m-creds__edu-detail, [data-theme="modern"] .m-creds__cert-org, [data-theme="modern"] .m-creds__award-org { font-family: var(--m-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--m-accent) !important; opacity: 0.85 !important; } [data-theme="modern"] .m-creds__award-desc { font-family: var(--m-sans) !important; font-size: 0.78rem !important; color: var(--m-muted) !important; line-height: 1.55 !important; margin-top: 6px !important; } /* ── YOUTUBE KIDS — callout-list strong → lime green ─────────────────────── Covers both "What we heard" (§02) and "How we built" / Results (§03/04). */ [data-theme="modern"] .case-callout-list li strong { color: var(--m-accent) !important; } /* ── ON THIS PAGE (case-toc) — increase font 2 sizes ────────────────────── User found 8px too small; bumping to 10px links + 8px label. */ [data-theme="modern"] .case-toc__link { font-size: 10px !important; padding: 5px 10px !important; } [data-theme="modern"] .case-toc__label { font-size: 8px !important; } @media (max-width: 768px) { [data-theme="modern"] .case-toc__link { font-size: 9.5px !important; padding: 4px 8px !important; } } /* ── MOBILE: Hide Space burger + hide duplicate header toggle ────────────── Space mode has its own .nav-burger + .nav-mobile-drawer. In Modern mode these must be hidden — .m-burger / .m-drawer handle nav. The standalone .m-toggle-btn in the header is also redundant on mobile since the Modern drawer already contains the Space↔Modern switch. */ @media (max-width: 768px) { /* Hide Space mobile burger and its drawer/scrim when Modern is active */ [data-theme="modern"] .nav-burger, [data-theme="modern"] .nav-mobile-scrim, [data-theme="modern"] .nav-mobile-drawer { display: none !important; } /* Hide the standalone header toggle on mobile — drawer has it */ [data-theme="modern"] .m-toggle-btn { display: none !important; } } /* ── TOYBOX caption — display below image on Modern mobile ───────────────── On desktop the caption overlays the bottom-left corner of the image. On portrait mobile: overflow the stage so the caption can sit below. On landscape mobile: hide it so the image fills the viewport cleanly. */ @media (max-width: 768px) and (orientation: portrait) { [data-theme="modern"] .toybox-lab__stage { overflow: visible !important; } [data-theme="modern"] .toybox-lab { padding-bottom: 130px !important; overflow: visible !important; } [data-theme="modern"] .toybox-caption { display: block !important; position: absolute !important; top: 100% !important; bottom: auto !important; left: 0 !important; right: 0 !important; max-width: 100% !important; width: auto !important; margin: 10px 0 0 !important; border-left: none !important; border-top: 2px solid var(--m-accent) !important; border-radius: 0 !important; padding: 12px 16px !important; background: rgba(8,8,8,0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-align: left !important; } [data-theme="modern"] .toybox-caption .experience-section-title { font-size: 1rem !important; } } @media (max-width: 900px) and (orientation: landscape) { [data-theme="modern"] .toybox-caption { display: none !important; } } /* ── MOBILE: push Modern burger to the far right ─────────────────────────── header-inner uses flex; margin-left:auto forces the burger to the edge. */ @media (max-width: 768px) { [data-theme="modern"] .m-burger { margin-left: auto !important; order: 999 !important; } /* Belt-and-suspenders CSS hide (JS handles it too) */ [data-theme="modern"] .nav-burger { display: none !important; } [data-theme="modern"] .nav-mobile-scrim, [data-theme="modern"] .nav-mobile-drawer { display: none !important; } }