/** * 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); background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none !important; -webkit-tap-highlight-color: transparent !important; } [data-theme="modern"] .nav-mobile-drawer .nav-pill:hover, [data-theme="modern"] .nav-mobile-drawer .nav-pill:focus, [data-theme="modern"] .nav-mobile-drawer .nav-pill:focus-visible { background: var(--m-surface-2) !important; outline: none !important; } [data-theme="modern"] .nav-mobile-drawer .nav-pill--music.is-active { color: var(--m-accent) !important; background: rgba(180, 255, 100, 0.07) !important; } /* Mood/music is desktop-only — hide in mobile drawer for both themes */ .nav-mobile-drawer .nav-pill--music, .nav-mobile-drawer .m-mood-btn, .m-drawer__mood-row { display: none !important; } [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; } /* Long scroll: defer render of deep Modern sections (hero, client strip, Selected Work excluded for LCP). */ [data-theme="modern"] #modern-experience > section:not(.m-hero):not(.m-clients):not(#m-work) { content-visibility: auto; contain-intrinsic-size: 1px 720px; } /* 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); } /* Shorter Selected Work strip than default panels — row height matched to Deloitte-style panels at their low end (~360–440px), not driven only by copy. */ .m-work-panel--compact { --m-work-compact-row: clamp(300px, 36vw, 440px); min-height: var(--m-work-compact-row); height: var(--m-work-compact-row); max-height: var(--m-work-compact-row); overflow: hidden; } .m-work-panel--compact .m-work-panel__content { justify-content: center; padding: clamp(18px, 3vw, 36px); min-height: 0; } .m-work-panel--compact .m-work-panel__num { margin-bottom: 8px; } .m-work-panel--compact .m-work-panel__project { font-size: clamp(1.35rem, 2.1vw, 2rem); margin: 0 0 8px; } .m-work-panel--compact .m-work-panel__sector { margin-bottom: 10px; } .m-work-panel--compact .m-work-panel__desc { font-size: 0.84rem; line-height: 1.52; margin-bottom: 14px; max-width: 36ch; } .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__media picture { display: block; width: 100%; height: 100%; } .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 1fr; gap: 16px; align-items: baseline; 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; text-align: left; justify-self: stretch; } .m-timeline__entry-year { font-family: var(--m-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--m-muted-2, rgba(255,255,255,0.35)); line-height: 1.5; text-align: right; white-space: nowrap; } .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; } .m-cta__lower { margin-top: clamp(48px, 8vw, 96px); } .m-cta__sub { font-size: clamp(0.95rem, 1.5vw, 1.05rem); color: var(--m-muted); max-width: 44ch; margin: 0 auto clamp(24px, 3.5vw, 36px); line-height: 1.65; text-align: center; } .m-cta__contact { font-size: clamp(0.8rem, 1.2vw, 0.9rem); font-family: var(--m-mono); letter-spacing: 0.04em; color: #ffffff; margin-bottom: clamp(20px, 3vw, 28px); } .m-cta__email { color: #ffffff !important; text-decoration: none; transition: opacity 0.2s ease; } .m-cta__email:hover { opacity: 0.75; } .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--compact { height: auto; max-height: none; min-height: 0; overflow: visible; } .m-work-panel--compact .m-work-panel__media { aspect-ratio: 21 / 9; min-height: 180px; max-height: 240px; } .m-work-panel--compact .m-work-panel__content { padding: 22px 20px 26px; } .m-work-panel--compact .m-work-panel__project { font-size: clamp(1.4rem, 5vw, 2rem); } .m-work-panel--compact .m-work-panel__sector { margin-bottom: 12px; } .m-work-panel--compact .m-work-panel__desc { font-size: 0.9rem; line-height: 1.6; margin-bottom: 20px; } .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; } .m-timeline__entry-year { text-align: left; color: var(--m-muted-2, rgba(255,255,255,0.35)); } /* 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 1fr 24px; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--m-border); text-decoration: none; color: var(--m-fg); transition: opacity 0.2s ease; } .m-pastwork-row:hover { /* hover effects removed */ } .m-pastwork-row:hover .m-pastwork-row__arrow { transform: none; } .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); text-align: left; } .m-pastwork-row__role { font-family: var(--m-sans); font-size: 0.82rem; color: var(--m-muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .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 — stacked: num + company + arrow on row 1; sector / role wrap full width below (no clipped columns). */ .m-pastwork-row { grid-template-columns: min-content 1fr min-content; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 6px; align-items: start; padding: 14px 0; } .m-pastwork-row__num { grid-column: 1; grid-row: 1; align-self: start; padding-top: 2px; } .m-pastwork-row__company { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.3; word-wrap: break-word; } .m-pastwork-row__arrow { grid-column: 3; grid-row: 1; justify-self: end; padding-top: 2px; } .m-pastwork-row__sector { grid-column: 1 / -1; grid-row: 2; display: block; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.35; max-width: 100%; text-align: left; font-size: 0.6rem; letter-spacing: 0.09em; } .m-pastwork-row__role { grid-column: 1 / -1; grid-row: 3; display: block; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.4; max-width: 100%; text-align: left; font-size: 0.78rem; } /* 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; } /* Closing quote overrides the prose p muted rule above — needs p.class specificity to win */ [data-theme="modern"] .super-ic-prose p.super-ic-closing { color: #ffffff !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__lower { margin-top: clamp(48px, 8vw, 96px) !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; margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; text-align: center !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; width: 100%; height: 100%; object-fit: cover; object-position: center top; 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; } /* Fixed header in Modern mode is 64px tall — toybox experience pages need enough top padding so the back button isn't hidden beneath it on mobile */ [data-theme="modern"] .work-landing-section.toybox-experience { padding-top: calc(64px + clamp(16px, 3vw, 24px)) !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: 100%; } .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.5rem; 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; project title goes accent on hover --- */ .m-work-panel__cta { color: var(--m-accent) !important; } /* Project title stays white on hover — line accent (::before scaleY) is the hover signal */ /* --- Past Work rows: index number always accent --- */ .m-pastwork-row__num { color: var(--m-accent) !important; } /* Company name turns accent on row hover — removed per design request */ /* --- Timeline: company name hover — removed per design request --- */ /* "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 { content: '.'; color: var(--m-accent); } .m-timeline__title::after, .m-cta__headline::after { content: none; } /* --- 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 — small info label in bottom-right corner */ [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; max-width: 200px !important; padding: 10px 14px 8px !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 { color: var(--m-accent) !important; } /* Prose emphasis only — not callout bullet labels (those stay white below). */ [data-theme="modern"] .case-prose > p 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: weight only, not lime */ [data-theme="modern"] .super-ic-em { color: var(--m-fg) !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; } /* Callout bullet labels: white bold text; lime stays on ::marker / ::before only. */ [data-theme="modern"] .case-callout-list li strong { color: #ffffff !important; font-weight: 700 !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; } } /* ============================================================ POLISH PASS — Consistency, legibility, and micro-interactions ============================================================ */ /* ── Lime period: philosophy + pastwork titles (consistency with other sections) */ .m-philosophy__title::after, .m-pastwork__title::after { content: '.'; color: var(--m-accent); } /* ── Body text legibility — gentle opacity bumps, not white */ .m-work-panel__desc { color: rgba(240, 240, 240, 0.58) !important; } .m-pastwork-row__role { text-align: left !important; color: rgba(240, 240, 240, 0.55) !important; } .m-principle-card__body { color: rgba(240, 240, 240, 0.62) !important; } .m-timeline__entry-role { color: rgba(240, 240, 240, 0.55) !important; text-align: left !important; justify-self: stretch !important; } /* ── Work panel — left accent bar draws up on hover */ .m-work-panel { position: relative; } .m-work-panel::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--m-accent); transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } .m-work-panel:hover::before { transform: scaleY(1); } /* superIC archetype list strong is white in both modes (set in super-ic-mindset.css) */ /* ── Timeline entry — hover accent bar removed per design request */ .m-timeline__entry { position: relative; padding-left: 12px; } .m-timeline__entry::before { content: none; } .m-timeline__entry:hover::before { content: none; } /* ============================================================ SUPER IC — MODERN MODE EDITORIAL REDESIGN Full layout transformation. Overrides all earlier super-ic rules. ============================================================ */ /* ── Re-enable toolbar (hidden by an earlier catch-all rule) ── */ [data-theme="modern"] .super-ic-toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 20px 0 !important; border-bottom: 1px solid var(--m-border) !important; margin-bottom: clamp(32px, 5vw, 48px) !important; background: transparent !important; } /* ── Layout: single column, no sidebar, no HUD chrome ──────── */ [data-theme="modern"] .super-ic-layout { display: block !important; grid-template-columns: unset !important; gap: 0 !important; } [data-theme="modern"] .super-ic-toc { display: none !important; } [data-theme="modern"] .super-ic-panel, [data-theme="modern"] .super-ic-panel--hud { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } [data-theme="modern"] .super-ic-prose { padding: 0 !important; background: transparent !important; } /* ── Hero: big serif editorial title ────────────────────────── */ [data-theme="modern"] .super-ic-hero { padding-top: clamp(60px, 10vh, 100px) !important; padding-bottom: clamp(40px, 6vw, 64px) !important; border-bottom: 1px solid var(--m-border) !important; margin-bottom: clamp(40px, 6vw, 64px) !important; background: transparent !important; } /* Scoped to super-ic-hero only — prevents bleed into toybox caption */ [data-theme="modern"] .super-ic-hero .experience-section-eyebrow { font-family: var(--m-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; color: var(--m-accent) !important; text-shadow: none !important; margin-bottom: 20px !important; display: block !important; } [data-theme="modern"] .super-ic-hero .experience-section-title { font-family: var(--m-serif) !important; font-size: clamp(3rem, 8vw, 8rem) !important; font-weight: 400 !important; letter-spacing: -0.04em !important; line-height: 0.95 !important; color: var(--m-fg) !important; text-shadow: none !important; margin: 0 0 32px !important; } [data-theme="modern"] .super-ic-hero .experience-section-title::after { content: '.'; color: var(--m-accent); } [data-theme="modern"] .super-ic-hero .experience-section-lede { font-family: var(--m-sans) !important; font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important; color: rgba(240, 240, 240, 0.55) !important; max-width: 52ch !important; line-height: 1.75 !important; text-shadow: none !important; margin-bottom: 0 !important; } [data-theme="modern"] .super-ic-hero .experience-section-lede::after { content: '10 signals · 5 archetypes'; display: block; font-family: var(--m-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-muted); margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--m-border); } /* Toybox caption — restore compact sizing, kill the stat bar bleed */ [data-theme="modern"] .toybox-caption .experience-section-title { font-size: clamp(0.9rem, 1.6vw, 1.2rem) !important; letter-spacing: normal !important; line-height: 1.2 !important; margin: 0 0 0 !important; } [data-theme="modern"] .toybox-caption .experience-section-title::after { content: none !important; } [data-theme="modern"] .toybox-caption .experience-section-lede { font-size: 11px !important; max-width: none !important; margin: 6px 0 0 !important; } [data-theme="modern"] .toybox-caption .experience-section-lede::after { content: none !important; display: none !important; } [data-theme="modern"] .toybox-caption .experience-section-eyebrow { font-size: 9px !important; margin-bottom: 5px !important; } /* ── Section block headings ─────────────────────────────────── */ [data-theme="modern"] .super-ic-block { padding: 0 !important; background: transparent !important; margin-bottom: clamp(40px, 6vw, 64px) !important; } [data-theme="modern"] .super-ic-block__title { font-family: var(--m-serif) !important; font-size: clamp(1.5rem, 3vw, 2.5rem) !important; font-weight: 400 !important; letter-spacing: -0.03em !important; color: var(--m-fg) !important; border-bottom: 1px solid var(--m-border) !important; padding-bottom: 16px !important; margin-bottom: 0 !important; text-shadow: none !important; } [data-theme="modern"] .super-ic-block__title::after { content: '.'; color: var(--m-accent); } /* The first block title ends with ?, not a sentence — suppress the extra dot */ [data-theme="modern"] #super-ic-definition .super-ic-block__title::after { content: none; } [data-theme="modern"] .super-ic-block > p { font-family: var(--m-sans) !important; font-size: clamp(0.88rem, 1.3vw, 1rem) !important; color: rgba(240, 240, 240, 0.55) !important; line-height: 1.8 !important; margin-top: 16px !important; margin-bottom: 0 !important; text-shadow: none !important; } /* ── Quality cards → numbered manifesto list ─────────────────── */ [data-theme="modern"] .super-ic-qualities-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; counter-reset: sig !important; margin-top: 0 !important; } [data-theme="modern"] .super-ic-quality-card { display: block !important; position: relative !important; padding: 28px 0 28px 80px !important; border: none !important; border-top: 1px solid var(--m-border) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; transition: box-shadow 0.3s ease, background 0.2s ease !important; counter-increment: sig !important; overflow: visible !important; transform: none !important; opacity: 1 !important; } [data-theme="modern"] .super-ic-quality-card.super-ic-reveal--on { opacity: 1 !important; transform: none !important; } [data-theme="modern"] .super-ic-quality-card:last-child { border-bottom: 1px solid var(--m-border) !important; } /* Counter number — large muted serif in the left gutter */ [data-theme="modern"] .super-ic-quality-card::before { content: counter(sig, decimal-leading-zero) !important; position: absolute !important; left: 0 !important; top: 28px !important; font-family: var(--m-serif) !important; font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important; line-height: 1 !important; letter-spacing: -0.04em !important; color: rgba(240, 240, 240, 0.09) !important; pointer-events: none !important; width: 64px !important; } /* Hover: inset left lime bar + subtle tint */ [data-theme="modern"] .super-ic-quality-card:hover { box-shadow: inset 3px 0 0 var(--m-accent) !important; background: rgba(200, 255, 0, 0.025) !important; transform: none !important; border-color: var(--m-border) !important; } /* Hide the Space-mode SVG icon */ [data-theme="modern"] .super-ic-quality-card__top { display: none !important; } /* Card title */ [data-theme="modern"] .super-ic-quality-card__title { font-family: var(--m-serif) !important; font-size: clamp(1rem, 1.8vw, 1.3rem) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: var(--m-fg) !important; margin: 0 0 6px !important; text-shadow: none !important; line-height: 1.3 !important; } /* Card subtitle — mono accent */ [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; margin: 0 0 16px !important; text-shadow: none !important; } /* Inline details — no card chrome */ [data-theme="modern"] .super-ic-quality-card .super-ic-details { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } [data-theme="modern"] .super-ic-quality-card .super-ic-details__summary { font-family: var(--m-mono) !important; font-size: 0.58rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--m-muted) !important; padding: 0 !important; cursor: pointer !important; list-style: none !important; } [data-theme="modern"] .super-ic-quality-card .super-ic-details__summary:hover { color: var(--m-fg) !important; } [data-theme="modern"] .super-ic-quality-card .super-ic-details[open] .super-ic-details__summary { margin-bottom: 12px !important; } [data-theme="modern"] .super-ic-quality-card .super-ic-details__body { font-family: var(--m-sans) !important; font-size: 0.88rem !important; color: rgba(240, 240, 240, 0.55) !important; line-height: 1.75 !important; padding: 12px 0 4px !important; border-top: 1px solid var(--m-border) !important; max-width: 56ch !important; } /* ── Archetypes: horizontal card grid ───────────────────────── */ [data-theme="modern"] .super-ic-archetype-list { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 1px !important; list-style: none !important; padding: 0 !important; margin: 24px 0 0 !important; background: var(--m-border) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius-lg) !important; overflow: hidden !important; } [data-theme="modern"] .super-ic-archetype-list li { background: var(--m-surface) !important; padding: 22px 18px !important; list-style: none !important; font-family: var(--m-sans) !important; font-size: 0.82rem !important; color: rgba(240, 240, 240, 0.55) !important; line-height: 1.5 !important; transition: background 0.18s ease !important; } [data-theme="modern"] .super-ic-archetype-list li::before { content: none !important; display: none !important; } [data-theme="modern"] .super-ic-archetype-list li:hover { background: var(--m-surface-2) !important; } [data-theme="modern"] .super-ic-archetype-list strong { display: block !important; font-family: var(--m-sans) !important; font-size: 0.88rem !important; font-weight: 700 !important; color: var(--m-accent) !important; margin-bottom: 6px !important; } /* ── Closing: editorial serif quote ─────────────────────────── */ [data-theme="modern"] .super-ic-closing { font-family: var(--m-serif) !important; font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important; line-height: 1.45 !important; letter-spacing: -0.01em !important; font-weight: 400 !important; color: #ffffff !important; background: transparent !important; border: none !important; border-top: 1px solid var(--m-border) !important; border-radius: 0 !important; box-shadow: none !important; padding: clamp(32px, 5vw, 48px) 0 clamp(40px, 6vw, 64px) !important; margin-top: clamp(32px, 5vw, 48px) !important; max-width: 44ch !important; position: relative !important; } [data-theme="modern"] .super-ic-closing::before { content: '\201C'; font-family: var(--m-serif); font-size: 5rem; line-height: 0.8; color: var(--m-accent); opacity: 0.35; display: block; margin-bottom: 16px; letter-spacing: -0.04em; } /* ── Hide the back-to-home link in the toolbar ──────────────── */ [data-theme="modern"] .page-back-link { display: none !important; } /* ── "Full brief" summary button — proper pill treatment ────── */ [data-theme="modern"] .super-ic-quality-card .super-ic-details__summary { display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 1px solid rgba(200, 255, 0, 0.3) !important; border-radius: 2px !important; padding: 5px 12px !important; color: var(--m-accent) !important; font-family: var(--m-mono) !important; font-size: 0.58rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; cursor: pointer !important; list-style: none !important; transition: border-color 0.2s ease, background 0.2s ease !important; margin-bottom: 0 !important; } [data-theme="modern"] .super-ic-quality-card .super-ic-details__summary::-webkit-details-marker { display: none !important; } [data-theme="modern"] .super-ic-quality-card .super-ic-details__summary::before { content: '+' !important; font-size: 0.75rem !important; line-height: 1 !important; color: var(--m-accent) !important; transition: transform 0.2s ease !important; } [data-theme="modern"] .super-ic-quality-card .super-ic-details[open] .super-ic-details__summary::before { content: '−' !important; } [data-theme="modern"] .super-ic-quality-card .super-ic-details__summary:hover { border-color: rgba(200, 255, 0, 0.65) !important; background: rgba(200, 255, 0, 0.06) !important; color: var(--m-accent) !important; } [data-theme="modern"] .super-ic-quality-card .super-ic-details[open] .super-ic-details__summary { margin-bottom: 14px !important; } /* ── Mobile adjustments for manifesto list ──────────────────── */ @media (max-width: 600px) { [data-theme="modern"] .super-ic-quality-card { padding-left: 52px !important; } [data-theme="modern"] .super-ic-quality-card::before { font-size: 1.4rem !important; width: 40px !important; } [data-theme="modern"] .super-ic-archetype-list { grid-template-columns: 1fr 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════════════ DEEP POLISH ADDITIONS — May 2026 ───────────────────────────────────────────────────────────────────────── 1. Noise / grain overlay (Modern + Space) 2. Custom circle cursor — Modern mode only 3. Mode-switch warp flash overlay 4. Modern grid stagger overrides 5. Scalzo-style past-work hover background reveal 6. Section marquee dividers ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Noise / grain overlay ─────────────────────────────────────────── */ /* CSS-only SVG turbulence grain — zero JS, zero network requests. Applied to both modes via a pseudo on . Space mode stays subtle; Modern mode gets a slightly stronger film-grain character. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; animation: grain-drift 7s steps(1) infinite; } @keyframes grain-drift { 0% { background-position: 0% 0%; } 10% { background-position: -5% -10%; } 20% { background-position: -15% 5%; } 30% { background-position: 7% -25%; } 40% { background-position: -5% 25%; } 50% { background-position: -15% 10%; } 60% { background-position: 15% 0%; } 70% { background-position: 0% 15%; } 80% { background-position: 3% 35%; } 90% { background-position: -10% 10%; } 100% { background-position: 9% 5%; } } [data-theme="modern"] body::after { opacity: 0.038; } @media (prefers-reduced-motion: reduce) { body::after { animation: none; } } /* ── 2. Custom cursor overlays — Space orb + Modern dot/ring ─────────── */ /* No cursor:none — native cursor stays visible as baseline. These elements are purely additive glow/accent layers on top. */ #m-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; border-radius: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s ease; will-change: transform; } #m-cursor-ring { width: 28px; height: 28px; border: 1.5px solid var(--m-accent, #c8ff00); mix-blend-mode: difference; transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1), height 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease; } #m-cursor-ring.is-hidden { opacity: 0; } [data-theme="modern"] #m-cursor-ring.is-hovering { width: 44px; height: 44px; border-color: rgba(200, 255, 0, 0.6); } @media (pointer: coarse) { #m-cursor-ring { display: none; } } /* ── 3. Mode-switch warp flash overlay ───────────────────────────────── */ #m-warp-flash { position: fixed; inset: 0; z-index: 99998; pointer-events: none; opacity: 0; background: radial-gradient( circle at var(--warp-ox, 50%) var(--warp-oy, 50%), rgba(200, 255, 0, 0.18) 0%, rgba(0, 0, 0, 0) 70% ); transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1); } #m-warp-flash.is-active { opacity: 1; } /* ── 4. Modern grid nth-child stagger ────────────────────────────────── */ /* Extra stagger for grid children beyond philosophy/past-work — work panels */ [data-theme="modern"] .m-work-panels .m-work-panel:nth-child(1) { transition-delay: 0ms; } [data-theme="modern"] .m-work-panels .m-work-panel:nth-child(2) { transition-delay: 80ms; } [data-theme="modern"] .m-work-panels .m-work-panel:nth-child(3) { transition-delay: 160ms; } [data-theme="modern"] .m-work-panels .m-work-panel:nth-child(4) { transition-delay: 240ms; } [data-theme="modern"] .m-work-panels .m-work-panel:nth-child(5) { transition-delay: 320ms; } [data-theme="modern"] .m-work-panels .m-work-panel:nth-child(6) { transition-delay: 400ms; } /* ── 5. Scalzo-style past-work hover background reveal ───────────────── */ /* On hover, a soft colour fill sweeps in behind the card text. The card must have position:relative and overflow:hidden (already set on .m-past-work__card via the section module). */ [data-theme="modern"] .m-past-work__card { overflow: hidden; } [data-theme="modern"] .m-past-work__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(200, 255, 0, 0.07) 0%, rgba(0, 0, 0, 0) 100% ); opacity: 0; transform: translateY(8px); transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 0; } [data-theme="modern"] .m-past-work__card:hover::before { opacity: 1; transform: translateY(0); } /* ── 6. Section marquee dividers ─────────────────────────────────────── */ .m-marquee-divider { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--m-border, rgba(255,255,255,0.07)); border-bottom: 1px solid var(--m-border, rgba(255,255,255,0.07)); padding: 14px 0; margin: clamp(40px, 8vw, 80px) 0; user-select: none; -webkit-user-select: none; } .m-marquee-divider__track { display: inline-flex; gap: 0; animation: marquee-scroll 24s linear infinite; will-change: transform; } .m-marquee-divider--reverse .m-marquee-divider__track { animation-direction: reverse; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .m-marquee-divider__item { font-family: "Inter", var(--m-font-sans, sans-serif); font-size: clamp(10px, 1.1vw, 13px); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.22); padding: 0 clamp(20px, 3vw, 40px); } .m-marquee-divider__dot { color: var(--m-accent, #c8ff00); opacity: 0.5; padding: 0 clamp(8px, 1.5vw, 16px); } @media (prefers-reduced-motion: reduce) { .m-marquee-divider__track { animation: none; } } /* ── Typewriter cursor blink ─────────────────────────────────────────── */ .m-hero__rotating-phrase::after { content: "|"; display: inline-block; margin-left: 2px; color: var(--m-accent, #c8ff00); font-weight: 300; opacity: 1; animation: tw-cursor-blink 1s step-end infinite; } .m-hero__rotating-phrase.is-typing::after { animation-play-state: paused; opacity: 1; } @keyframes tw-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ── Work panel: enhanced CTA emergence on hover ────────────────────── */ [data-theme="modern"] .m-work-panel__cta { opacity: 0.72; transform: translateX(0); transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease, opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="modern"] .m-work-panel:hover .m-work-panel__cta { opacity: 1; color: var(--m-accent); border-color: var(--m-accent); gap: 14px; transform: translateX(4px); } /* ── Past-work rows: accent underline on hover ───────────────── */ [data-theme="modern"] .m-pastwork-row { position: relative; } [data-theme="modern"] .m-pastwork-row::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--m-accent, #c8ff00); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="modern"] .m-pastwork-row:hover::after { transform: scaleX(1); } /* ── Split-word heading reveal ───────────────────────────────────────── */ /* .m-sw-outer = overflow:hidden mask; .m-sw-inner = the animating word. Words start at translateY(105%) and animate in when the parent is revealed by the IO observer (.m-revealed or direct class addition). */ .m-sw-outer { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: inherit; } .m-sw-inner { display: inline-block; transform: translateY(105%); transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .m-sw-inner.m-sw-in, .m-revealed .m-sw-inner { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .m-sw-inner { transform: translateY(0) !important; transition: none !important; } } /* ── Scalzo past-work atmosphere background ──────────────────────────── */ /* .m-pastwork-atmos is injected by initPastWorkBgReveal() */ .m-pastwork-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity; } .m-pastwork-atmos.is-visible { opacity: 1; } /* Ensure rows stack above the atmosphere */ [data-theme="modern"] .m-pastwork-list { position: relative; z-index: 1; } [data-theme="modern"] .m-pastwork__header, [data-theme="modern"] .m-pastwork__footer { position: relative; z-index: 1; } /* ── COLUMN-2 LEFT-ALIGN (tablet/desktop only — mobile stacks via media query above) Force left-alignment on middle columns in both 02 Past Work and 03 Career sections. Uses display:block + width:100% to guarantee the span fills its grid cell so text-align:left is unambiguous. Scoped min-width so mobile stacking is not flattened by display:block !important. */ @media (min-width: 769px) { [data-theme="modern"] .m-pastwork-row .m-pastwork-row__sector, [data-theme="modern"] .m-pastwork-row .m-pastwork-row__role { display: block !important; width: 100% !important; text-align: left !important; } } [data-theme="modern"] .m-timeline__eras .m-timeline__entry-role { display: block !important; width: 100% !important; text-align: left !important; justify-self: stretch !important; }