/* ════════════════════════════════════════════════════════════════ Flagships, scroll-triggered accent zones, portrait Loaded AFTER tokens.css + styles.css so zone rules win. ════════════════════════════════════════════════════════════════ */ /* ── Per-project accent zones (set on by IntersectionObserver) ── */ body[data-zone="hermes"] { --accent:#F43F5E; --accent-hi:#FB7185; --accent-lo:#E11D48; --accent-fill:rgba(244,63,94,0.12); --accent-soft:rgba(244,63,94,0.20); --accent-glow:rgba(244,63,94,0.45); --accent-bloom:rgba(244,63,94,0.30); --sh-accent:0 10px 36px rgba(244,63,94,0.35); } body[data-zone="planfolio"] { --accent:#4ECBA4; --accent-hi:#6FE3BE; --accent-lo:#2FA382; --accent-fill:rgba(78,203,164,0.12); --accent-soft:rgba(78,203,164,0.20); --accent-glow:rgba(78,203,164,0.42); --accent-bloom:rgba(78,203,164,0.28); --sh-accent:0 10px 36px rgba(78,203,164,0.30); } body[data-zone="flashhandy"] { --accent:#F97316; --accent-hi:#FB923C; --accent-lo:#EA580C; --accent-fill:rgba(249,115,22,0.12); --accent-soft:rgba(249,115,22,0.20); --accent-glow:rgba(249,115,22,0.45); --accent-bloom:rgba(249,115,22,0.30); --sh-accent:0 10px 36px rgba(249,115,22,0.32); } body[data-zone="hackathon"] { --accent:#22D3EE; --accent-hi:#67E8F9; --accent-lo:#06B6D4; --accent-fill:rgba(34,211,238,0.12); --accent-soft:rgba(34,211,238,0.20); --accent-glow:rgba(34,211,238,0.42); --accent-bloom:rgba(34,211,238,0.28); --sh-accent:0 10px 36px rgba(34,211,238,0.30); } /* ── Smooth crossfade of accent-tinted things (~0.6s) ── Buttons/pills keep their own fast hover transition; we only ease the things that change purely because the accent variable changed. */ .hero-h1 .accent, .hero-h1 .em, .hero-h1 .underline svg, .bento-head h2 .accent, .flag-head h2 .accent, .stack h2 .accent, .about-head h2 .accent, .contact h2 .accent, .contact h2 .em, .eye-num, .tile .big, .tile-now .live, .s-num, .fl-eye .eye-num, .fl-num, .topbar-id .dot, .marquee-item.accent, .also-num, .fl-layer .fl-layer-k, .fl-diagram .fl-dia-bar .dot-live { transition: color 0.6s var(--ease), text-shadow 0.6s var(--ease), background-color 0.6s var(--ease); } .graph-line { transition: stroke 0.6s var(--ease); } .glow-a, .about-bg, .contact-bg, .tile .bloom, .fl-glow { transition: background-color 0.6s var(--ease), opacity 0.6s var(--ease); } .about-prose, .modal::before, .work-row::before, .email-card, .contact-socials a, .stack-row .s-items span { transition: border-color 0.6s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease); } /* Convert the big radial glows to blurred solid fills so their COLOR can transition with the zone (radial-gradient color stops can't animate). */ .hero-bg .glow-a { background: var(--accent) !important; filter: blur(150px); opacity: 0.26; border-radius: 50%; } .about-bg { background: var(--accent) !important; filter: blur(150px); opacity: 0.22; } .contact-bg { background: var(--accent) !important; filter: blur(160px); opacity: 0.30; } .tile .bloom { background: var(--accent) !important; filter: blur(60px); opacity: 0.22; } /* ════════════════════════════════════════════════════════════════ FLAGSHIP CASE STUDIES ════════════════════════════════════════════════════════════════ */ .flagships { position: relative; padding: var(--sp-9) 0 var(--sp-8); } .flag-head { margin-bottom: 8px; } .flag-head h2 { font: var(--t-h1); letter-spacing: var(--tr-tight); color: var(--fg1); margin: 14px 0 0; max-width: 18ch; } .flag-head h2 .accent { color: var(--accent); } .flag-head p { font: var(--t-lead); color: var(--fg2); margin: 18px 0 0; max-width: 560px; } .flagship { position: relative; padding: var(--sp-8) 0; border-top: 1px solid var(--border); overflow: hidden; } .flagship .fl-glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; background: var(--accent); filter: blur(150px); opacity: 0.16; pointer-events: none; z-index: 0; } .flagship:nth-child(odd) .fl-glow { top: -160px; right: -160px; } .flagship:nth-child(even) .fl-glow { top: -160px; left: -160px; } .flagship-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .flagship.reverse .flagship-inner .flag-copy { order: 2; } .flagship.reverse .flagship-inner .flag-media { order: 1; } /* copy column */ .flag-eye { display: flex; align-items: center; gap: 14px; font: var(--t-eye); letter-spacing: var(--tr-eye); text-transform: uppercase; color: var(--fg3); margin-bottom: 22px; } .flag-eye .fl-num { font: 700 13px/1 var(--font-mono); color: var(--accent); } .flag-eye .dot-live { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); margin-left: auto; } .flag-eye .dot-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .flag-title { font: 800 clamp(40px, 5.4vw, 76px)/0.96 var(--font-display); letter-spacing: var(--tr-display); color: var(--fg1); margin: 0; } .flag-lede { font: 500 clamp(18px, 1.7vw, 22px)/1.45 var(--font-sans); letter-spacing: -0.01em; color: var(--fg1); margin: 18px 0 0; max-width: 30ch; } .flag-body { font: var(--t-body); color: var(--fg2); margin: 18px 0 0; max-width: 46ch; } .flag-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; } .flag-chips span { font: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--fg2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; } /* media column */ .flag-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; } /* phone frame */ .phone { position: relative; width: clamp(210px, 22vw, 260px); aspect-ratio: 686 / 1280; border-radius: 32px; padding: 7px; background: linear-gradient(150deg, #26262c, #131316); border: 1px solid var(--border-hi); box-shadow: var(--sh-lg); } .phone::before { content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 70px; height: 5px; background: rgba(255,255,255,0.18); border-radius: 99px; z-index: 2; } .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; display: block; } /* fanned trio of phones (Planfolio) */ .phone-fan { position: relative; width: 100%; height: clamp(420px, 46vw, 520px); } .phone-fan .phone { position: absolute; top: 50%; left: 50%; width: clamp(170px, 17vw, 210px); transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .phone-fan .phone:nth-child(1) { transform: translate(-50%, -50%) translateX(-58%) rotate(-9deg); z-index: 1; } .phone-fan .phone:nth-child(2) { transform: translate(-50%, -52%) scale(1.06); z-index: 3; } .phone-fan .phone:nth-child(3) { transform: translate(-50%, -50%) translateX(58%) rotate(9deg); z-index: 1; } .phone-fan:hover .phone:nth-child(1) { transform: translate(-50%, -50%) translateX(-78%) rotate(-12deg); } .phone-fan:hover .phone:nth-child(3) { transform: translate(-50%, -50%) translateX(78%) rotate(12deg); } /* browser frame (FlashHandy site) */ .browser { width: 100%; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--sh-lg); } .browser-bar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .browser-bar .dots { display: flex; gap: 6px; } .browser-bar .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); } .browser-bar .url { flex: 1; font: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--fg3); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 5px 12px; text-align: center; } .browser img { width: 100%; display: block; } /* FlashHandy 3-part breakdown */ .fl-parts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .fl-part { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; position: relative; } .fl-part .fl-part-num { font: 700 13px/1 var(--font-mono); color: var(--accent); margin-bottom: 16px; } .fl-part h4 { font: var(--t-h3); letter-spacing: var(--tr-tight); color: var(--fg1); margin: 0 0 8px; } .fl-part p { font: var(--t-small); color: var(--fg2); margin: 0; } .fl-part .fl-flow { margin-top: 14px; font: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--fg3); line-height: 1.7; } .fl-part .fl-flow b { color: var(--accent); font-weight: 600; } /* FlashHandy workflow image */ .fl-workflow { position: relative; z-index: 1; margin-top: 24px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: #0A0A0C; } .fl-workflow .fl-wf-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--border); font: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--fg3); } .fl-workflow .fl-wf-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .fl-workflow img { width: 100%; display: block; } /* ── Portrait in About ── */ .about-media { position: relative; } .portrait { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-hi); box-shadow: var(--sh-lg); aspect-ratio: 1086 / 1448; } .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .portrait::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); border-radius: var(--r-lg); pointer-events: none; } .portrait-cap { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(10,10,10,0.7); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 999px; font: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--fg1); } .portrait-cap .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); } /* About now: media | prose, then a full-width fact card */ .about-grid.about-grid-3 { grid-template-columns: 0.85fr 1.4fr; align-items: start; } .about-card.about-card-wide { margin-top: 28px; } .about-card.about-card-wide dl { grid-template-columns: repeat(5, 1fr); gap: 0; } .about-card.about-card-wide dl > div { grid-template-columns: 1fr; gap: 8px; padding: 0 20px; border-bottom: 0; border-right: 1px dashed var(--border); } .about-card.about-card-wide dl > div:first-child { padding-left: 0; } .about-card.about-card-wide dl > div:last-child { border-right: 0; padding-right: 0; } /* ── responsive ── */ @media (max-width: 920px) { .flagship-inner { grid-template-columns: 1fr; gap: 40px; } .flagship.reverse .flagship-inner .flag-copy { order: 1; } .flagship.reverse .flagship-inner .flag-media { order: 2; } .fl-parts { grid-template-columns: 1fr; } .about-grid.about-grid-3 { grid-template-columns: 1fr; gap: 32px; } .portrait { max-width: 360px; } .about-card.about-card-wide dl { grid-template-columns: 1fr 1fr; gap: 20px 0; } .about-card.about-card-wide dl > div { border-right: 0; padding: 0 16px 0 0; } } @media (max-width: 560px) { .about-card.about-card-wide dl { grid-template-columns: 1fr; } .phone-fan { height: 380px; } } /* ════════════════════════════════════════════════════════════════ HERMES — full-width architecture showcase ════════════════════════════════════════════════════════════════ */ .flagship.flagship-wide .flagship-inner { display: block; } .fl-wide-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: 36px; } .fl-wide-head .flag-copy { max-width: 540px; } .fl-wide-head .fl-layers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fl-layer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; } .fl-layer .fl-layer-k { font: var(--t-eye); letter-spacing: var(--tr-eye); text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 5px; } .fl-layer .fl-layer-v { font: var(--t-small); color: var(--fg2); } /* the diagram, framed like a terminal/blueprint surface */ .fl-diagram { position: relative; z-index: 1; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: #0A0A0A; box-shadow: var(--sh-lg); } .fl-diagram .fl-dia-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); font: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--fg3); } .fl-diagram .fl-dia-bar .dots { display: flex; gap: 6px; } .fl-diagram .fl-dia-bar .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); } .fl-diagram .fl-dia-bar .dot-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--accent); } .fl-diagram .fl-dia-bar .dot-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .fl-diagram img { width: 100%; display: block; } @media (max-width: 920px) { .fl-wide-head { grid-template-columns: 1fr; gap: 28px; } .fl-wide-head .fl-layers { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .fl-wide-head .fl-layers { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════ ALSO BUILT — minimal editorial list, no screenshots ════════════════════════════════════════════════════════════════ */ .also { position: relative; padding: var(--sp-8) 0 var(--sp-9); } .also-head { margin-bottom: 12px; } .also-head h2 { font: var(--t-h2); letter-spacing: var(--tr-tight); color: var(--fg1); margin: 14px 0 0; } .also-head h2 .accent { color: var(--accent); } .also-list { display: flex; flex-direction: column; } .also-row { display: grid; grid-template-columns: 56px 1.1fr 2fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--border); } .also-row:first-child { border-top: 1px solid var(--border); } .also-num { font: 600 13px/1 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--accent); } .also-name { font: 700 clamp(18px, 1.9vw, 23px)/1.1 var(--font-display); letter-spacing: var(--tr-tight); color: var(--fg1); } .also-desc { font: var(--t-body); color: var(--fg2); } .also-meta { font: var(--t-mono); letter-spacing: var(--tr-mono); color: var(--fg3); white-space: nowrap; text-align: right; } @media (max-width: 760px) { .also-row { grid-template-columns: auto 1fr; row-gap: 8px; } .also-row > :nth-child(1) { grid-row: 1 / span 3; } .also-meta { text-align: left; } } /* flagship inline CTA link */ .flag-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 13px 20px; border-radius: 999px; background: var(--accent); color: #0A0A0A; font: 600 14px/1 var(--font-sans); letter-spacing: -0.005em; border: 1px solid transparent; box-shadow: var(--sh-accent); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .flag-cta:hover { background: var(--accent-hi); } .flag-cta:active { transform: scale(0.98); } .flag-cta svg { width: 16px; height: 16px; } /* ── Brand mascot (lemon cat) ── */ .mascot { display: inline-block; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 225, 120, 0.35)); flex: 0 0 auto; } .topbar-id .mascot { width: 26px; height: 26px; margin-right: 2px; } .topbar-id .dot { display: none; } .social-mascot { width: 22px; height: 22px; filter: drop-shadow(0 0 7px rgba(255, 225, 120, 0.45)); } /* ── Contact placeholder (non-link) cards ── */ .social-soon { display: flex; align-items: center; padding: 20px 22px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-md); opacity: 0.7; } .social-soon .col { display: flex; flex-direction: column; gap: 6px; } .social-soon .label { font: var(--t-eye); letter-spacing: var(--tr-eye); text-transform: uppercase; color: var(--fg3); } .social-soon .handle { font: 500 14px/1.2 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--fg3); } /* ── Tweaks hint line ── */ .tweaks .tw-hint { display: block; margin-top: 8px; font: 500 11px/1.5 var(--font-mono); letter-spacing: var(--tr-mono); color: var(--fg3); text-transform: none; } .tweaks .swatch .chip { width: 16px; height: 16px; }