/* ---- Global Site Typography System (Plus Jakarta Sans + JetBrains Mono) ---- */ :root { --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } body, button, input, select, textarea { font-family: var(--font-sans); } .font-mono, .brief-eyebrow, .font-code, .hero-tools-label, .cross-pill { font-family: var(--font-mono); } .font-display, .project-header-title { font-family: var(--font-sans); } /* ========================================================================== Guillaume Goder portfolio — shared theme + language toggle styles Default site theme is dark (unchanged). All rules below only apply when is set by assets/site.js. ========================================================================== */ /* ---- Elements that used to carry inline background styles ---- */ .nav-surface { background-color: rgba(10, 10, 10, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .dropdown-surface { background: #111111; border-radius: 14px; overflow: hidden; } .mobile-surface { background: #0f0f0f; } /* ---- Expertise: tool-stack pill glyphs (theme-adaptive monochrome) ---- */ .tool-glyph { display:inline-flex; width:16px; height:16px; flex:0 0 auto; align-items:center; justify-content:center; color:inherit; } .tool-glyph svg { display:block; } /* Solid/heavy marks carry more ink than the line icons — dim them so the row reads evenly */ .tool-glyph.glyph-soft { opacity: .82; } /* Blender */ .tool-glyph.glyph-softer { opacity: .6; } /* Photoshop (solid tile) */ /* Home hero toolkit row: decorative, so it sits well back from the headline. Never wraps — the icons shrink instead, so it stays one horizontal line. Dimmed via colour rather than opacity, so the hover label stays crisp. */ .hero-tools { flex-wrap: nowrap; } /* Eyebrow over the toolkit row — deliberately fainter than the icons themselves */ .hero-tools-label { color: #6e6e75; transition: color .3s ease; } html.light .hero-tools-label { color: #7b7b83; } .hero-tools .tool-chip { position: relative; color: #555558; border-color: #2c2c2c; transition: color .3s ease, border-color .3s ease; } .hero-tools .tool-chip:hover { color: #cfcfd4; border-color: #434343; } .hero-tools .tool-glyph { width: 12px; height: 12px; } .hero-tools .tool-glyph svg { width: 100%; height: 100%; } @media (min-width: 640px) { .hero-tools .tool-glyph { width: 15px; height: 15px; } } html.light .hero-tools .tool-chip { color: #96969c; } html.light .hero-tools .tool-chip:hover { color: #52525b; border-color: #c4c4cb; } /* Hover label — a rounded pill above the icon. Hover-capable pointers only: a tap has no hover state, and a wide label could push past a phone's edge. */ @media (hover: hover) { .hero-tools .tool-chip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(3px); padding: 4px 10px; border-radius: 999px; border: 1px solid #262626; background: #131313; color: #e5e5e5; font-size: 10px; line-height: 1.4; letter-spacing: .06em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 30; } .hero-tools .tool-chip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* The row is right-aligned, so the last label would run past the edge. */ .hero-tools .tool-chip:last-child::after { left: auto; right: 0; transform: translateX(0) translateY(3px); } .hero-tools .tool-chip:last-child:hover::after { transform: translateX(0) translateY(0); } html.light .hero-tools .tool-chip::after { background: #ffffff; border-color: #e4e4e7; color: #27272a; } } .tool-mask { background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* ---- Rounded corners: contact form fields + submit button (about page) ---- */ #contact-form #name, #contact-form #email, #contact-form #subject, #contact-form #message { border-radius: 10px; } #contact-submit-btn { border-radius: 10px; } html.light .nav-surface { background-color: rgba(250, 250, 248, 0.88); } html.light .dropdown-surface { background: #ffffff; } html.light .mobile-surface { background: #fbfbf9; } /* ---- Scrollbar ---- */ html.light ::-webkit-scrollbar-track { background: #f2f2f0; } html.light ::-webkit-scrollbar-thumb { background: #d4d4d8; } /* ---- Lightbox overlay (illustrations / paintings / resume pages) ---- */ html.light #lightbox { background: rgba(255, 255, 255, 0.96); } /* ---- Base page ---- */ html.light body, html.light .bg-\[\#0a0a0a\] { background-color: #faf9f6 !important; color: #18181b; } /* ---- Text colors ---- */ html.light .text-neutral-100 { color: #18181b !important; } html.light .text-neutral-200 { color: #27272a !important; } html.light .text-neutral-300 { color: #3f3f46 !important; } html.light .text-neutral-400 { color: #52525b !important; } html.light .text-neutral-500 { color: #71717a !important; } html.light .text-neutral-600 { color: #7b7b83 !important; } html.light .text-neutral-700 { color: #a1a1aa !important; } html.light .text-neutral-950 { color: #18181b !important; } html.light .text-white { color: #18181b !important; } html.light .text-black { color: #18181b !important; } /* ---- Borders ---- */ html.light .border-neutral-500 { border-color: #a1a1aa !important; } html.light .border-neutral-600 { border-color: #b8b8be !important; } html.light .border-neutral-700 { border-color: #d4d4d8 !important; } html.light .border-neutral-800 { border-color: #e4e4e7 !important; } html.light .border-neutral-900 { border-color: #e4e4e7 !important; } /* ---- Backgrounds ---- */ html.light .bg-neutral-100 { background-color: #f4f4f5 !important; } html.light .bg-neutral-400 { background-color: #a1a1aa !important; } html.light .bg-neutral-800 { background-color: #e4e4e7 !important; } html.light .bg-neutral-900 { background-color: #f4f4f5 !important; } html.light .bg-neutral-950 { background-color: #f0f0ee !important; } /* CTA button that is already light-on-dark: give it a border so it reads on a light page */ html.light .bg-neutral-100.text-neutral-950 { border: 1px solid #d4d4d8; } /* ---- Card overlay gradient (project cards) stays legible in light mode ---- */ html.light .card-overlay { background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0.05) 100%) !important; } html.light .project-card:hover .card-overlay { background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.10) 100%) !important; } /* ========================================================================== Toggle controls (language + theme) — top-right of header, all breakpoints ========================================================================== */ .site-toggles { display: flex; align-items: center; gap: 8px; } .lang-toggle-btn, .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid #2a2a2a; color: #a3a3a3; border-radius: 999px; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; line-height: 1; } .lang-toggle-btn:hover, .theme-toggle-btn:hover { color: #fff; border-color: #737373; } .lang-toggle-btn { height: 28px; padding: 0 11px; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; font-family: inherit; } .theme-toggle-btn { height: 28px; width: 28px; } .theme-toggle-btn svg { width: 14px; height: 14px; } .theme-toggle-btn .icon-sun { display: none; } html.light .lang-toggle-btn, html.light .theme-toggle-btn { border-color: #d4d4d8; color: #52525b; } html.light .lang-toggle-btn:hover, html.light .theme-toggle-btn:hover { color: #18181b; border-color: #a1a1aa; } html.light .theme-toggle-btn .icon-moon { display: none; } html.light .theme-toggle-btn .icon-sun { display: block; } /* Cross-site navigation pill — arrow expands on hover */ .cross-pill .cross-arrow { display: inline-block; opacity: 0; max-width: 0; transform: translateX(-6px); transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1); margin-left: 0; white-space: nowrap; vertical-align: middle; overflow: hidden; } .cross-pill:hover .cross-arrow { opacity: 1; max-width: 16px; transform: translateX(0); margin-left: 6px; } /* ── Project cards (home grid) ──────────────────────────────────────────── Contained rounded cards. Hover matches the landing page and UX portfolio: lift + slight scale + gold border + contained shadow. */ .project-card { border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .project-card:hover { transform: translateY(-9px) scale(1.02); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.70), 0 4px 12px rgba(201, 168, 76, 0.18); border-color: rgba(201, 168, 76, 0.75); } /* The card now scales too — soften the image zoom so it reads as one motion */ .project-card:hover img { transform: scale(1.03); } .card-title { font-weight: 500; text-transform: none; letter-spacing: normal; color: #d4d4d8; transition: color 0.3s ease, font-weight 0.3s ease, letter-spacing 0.3s ease; } .project-card:hover .card-title { font-weight: 700; text-transform: none; letter-spacing: normal; color: #ffffff; } html.light .project-card { border-color: rgba(0, 0, 0, 0.10); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } html.light .project-card:hover { box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(160, 120, 48, 0.18); border-color: rgba(160, 120, 48, 0.65); } /* ── Light-mode readability ─────────────────────────────────────────────── amber-300 (#fcd34d) sits at ~1.3:1 on the light background — effectively invisible. Light mode uses a deep bronze (~5.9:1, clears WCAG AA). Card arrows are excluded: they sit on the dark scrim over artwork, where the light amber is correct in both themes. */ .cross-pill { color: #fcd34d; border-color: rgba(252, 211, 77, 0.5); } .cross-pill:hover { background-color: #fcd34d; border-color: #fcd34d; color: #171717; } html.light .cross-pill { color: #7a5c1e; border-color: rgba(122, 92, 30, 0.55); } html.light .cross-pill:hover { background-color: #7a5c1e; border-color: #7a5c1e; color: #ffffff; } /* Brand link hover in the nav */ html.light nav a.group:hover, html.light nav a.group:hover span { color: #7a5c1e; } /* The dodo logo is a light silhouette — invert it so it reads on light */ html.light nav img[alt*="dodo"] { filter: brightness(0); } /* Card text sits on a dark scrim over the artwork, so it must stay light in both themes. Undo the global light-mode text inversion inside the overlay (html.light .text-neutral-* would otherwise make it near-black on black). */ html.light .card-overlay .text-neutral-100, html.light .card-overlay .text-white { color: #fafafa !important; } html.light .card-overlay .text-neutral-300 { color: #e4e4e7 !important; } html.light .card-overlay .text-neutral-400 { color: #d8d8dd !important; } /* ── LinkedIn pill (nav) ────────────────────────────────────────────────── Replaces the faint "LI" text link. Neutral outline so it reads as a secondary action next to the gold portfolio pill. */ .li-pill { color: #d4d4d8; border-color: rgba(255, 255, 255, 0.22); } .li-pill:hover { background-color: #ffffff; border-color: #ffffff; color: #0a0a0a; } html.light .li-pill { color: #3f3f46; border-color: rgba(0, 0, 0, 0.25); } html.light .li-pill:hover { background-color: #18181b; border-color: #18181b; color: #ffffff; } /* LinkedIn mark: optically centred against the uppercase label, and dialled back so it reads as a quiet cue rather than competing with the text. */ .li-pill .li-icon { display: block; opacity: 0.55; margin-top: -1px; transition: opacity 0.22s ease; } .li-pill:hover .li-icon { opacity: 0.85; } /* ── Phone nav ──────────────────────────────────────────────────────────── The portfolio pill stays visible at every width, so it is compacted on phones to earn its space beside the toggles and the menu button. !important is required to beat the Tailwind utilities on the element. */ @media (max-width: 639px) { .cross-pill { font-size: 9px !important; letter-spacing: 0.04em !important; padding: 5px 9px !important; gap: 5px !important; } nav .site-toggles { gap: 0.75rem !important; } } /* ── Card entrance + touch feedback ─────────────────────────────────────── Every card state above is a :hover state, so a phone never sees a card move at all. Each card now rises as it scrolls into view, and presses in when tapped. The class is stripped once the animation ends, otherwise the animation's fill would sit on top of the hover transform and freeze it. */ @keyframes cardIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .project-card.pre-reveal { opacity: 0; } .project-card.revealing { animation: cardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } /* No hover to lean on, so a tap gets its own feedback. Driven by a class rather than :active inside a touch media query: iOS only applies :active to elements it treats as tappable, and some Android browsers report (hover: hover) on a phone, so the query never matches there. A touchstart is ground truth. Placed after the :hover rule so it wins on a tap. */ .project-card.is-pressed { transform: scale(0.985); } @media (prefers-reduced-motion: reduce) { .project-card.pre-reveal { opacity: 1; } .project-card.revealing { animation: none; } } /* ── Video embed with a custom central play button ──────────────────────── A poster reads as an image, not a video, so overlay a play button that pulses as the video scrolls into view. The button is injected by site.js; the rules below style it and drive the attention animation. */ .video-embed { position: relative; display: block; line-height: 0; } .video-embed > video { display: block; width: 100%; } .video-play-btn { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); cursor: pointer; transform: translate(-50%, -50%); transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; z-index: 2; } /* Centroid of "M8 5 L8 19 L20 12 Z" is ((8+8+20)/3, (5+19+12)/3) = (12,12), the exact viewBox centre — flex-centring the svg lands it on the circle centre with no margin nudge or sub-pixel offset. */ .video-play-btn svg { width: 34px; height: 34px; display: block; } .video-play-btn svg path { fill: #0d0d0f; } .video-play-btn:hover, .video-play-btn:focus-visible { background: rgba(255, 255, 255, 0.8); transform: translate(-50%, -50%) scale(1.06); outline: none; } /* Two concentric rings ripple outward to catch the eye. */ .video-play-btn::before, .video-play-btn::after, .video-play-btn-thumb::before, .video-play-btn-thumb::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.9); opacity: 0; pointer-events: none; } .video-embed.in-view .video-play-btn::before, .video-play-btn-thumb::before { animation: videoPulse 2.1s ease-out infinite; } .video-embed.in-view .video-play-btn::after, .video-play-btn-thumb::after { animation: videoPulse 2.1s ease-out infinite 1.05s; } @keyframes videoPulse { 0% { transform: scale(1); opacity: 0.7; } 70% { opacity: 0; } 100% { transform: scale(2); opacity: 0; } } /* Pop the button in the moment the video enters view. */ .video-embed.in-view .video-play-btn { animation: videoPlayPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes videoPlayPop { 0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.3; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } /* Once playing, the overlay gets out of the way. */ .video-embed.playing .video-play-btn { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); } .video-embed.playing .video-play-btn::before, .video-embed.playing .video-play-btn::after { animation: none; } @media (prefers-reduced-motion: reduce) { .video-play-btn, .video-play-btn::before, .video-play-btn::after { animation: none !important; transition: opacity 0.3s ease; } } /* ── Figma embed: click-to-activate façade + lock/unlock shield ──────────── The live Figma iframe pulls Figma's whole app and, on touch, traps scroll on its infinite canvas. So the iframe is not in the page at all until asked for: a static preview loads first (fast), the iframe is injected on "Load canvas", and even then it stays behind an inert shield so the page scrolls past it — only an explicit Unlock hands touch gestures to Figma. site.js wires it. */ .figma-embed { position: relative; height: 640px; overflow: hidden; background: #0a0a0a; border-radius: 2px; } .figma-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; } /* Static preview */ .figma-facade-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.46) saturate(0.92); } /* Onboarding overlay */ .figma-cta { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; cursor: pointer; background: radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0.25), rgba(0,0,0,0.74)); transition: background-color 0.25s ease; } .figma-cta:hover { background: radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0.18), rgba(0,0,0,0.66)); } .figma-gesture { color: #ff5500; width: 46px; height: 46px; margin-bottom: 4px; } .figma-gesture svg { width: 100%; height: 100%; display: block; animation: figmaPan 3.4s ease-in-out infinite; } @keyframes figmaPan { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(2px, 3px); } } .figma-cta-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 21px; color: #fff; margin: 0; letter-spacing: -0.01em; } .figma-cta-sub { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.72); margin: 0; max-width: 34ch; } .figma-load-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #0a0a0a; background: #ff5500; border: none; border-radius: 999px; padding: 11px 22px; cursor: pointer; transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), background-color 0.22s ease; } .figma-load-btn:hover { transform: translateY(-1px) scale(1.03); background: #ff6a24; } .figma-cta:focus-visible, .figma-load-btn:focus-visible { outline: 2px solid #ff5500; outline-offset: 3px; } /* Once loaded, hide the façade */ .figma-embed.loaded .figma-facade-img, .figma-embed.loaded .figma-cta { display: none; } /* Interaction shield — covers the iframe while LOCKED. A plain button, so a drag scrolls the page (default touch-action) and a tap unlocks. */ .figma-shield { position: absolute; inset: 0; z-index: 3; display: none; align-items: flex-end; justify-content: center; padding: 0 0 16px; margin: 0; border: none; background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 26%); cursor: pointer; font: inherit; } .figma-embed.loaded:not(.unlocked) .figma-shield { display: flex; } .figma-shield-hint { display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(12,12,12,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 9px 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } .figma-shield-hint svg { width: 15px; height: 15px; color: #ff5500; } .figma-shield:hover .figma-shield-hint { border-color: rgba(255,85,0,0.6); } /* Lock pill — floats above the iframe while UNLOCKED so it stays clickable. */ .figma-lock-pill { position: absolute; top: 12px; right: 12px; z-index: 4; display: none; align-items: center; gap: 7px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(12,12,12,0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 8px 14px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.4); transition: border-color 0.2s ease, background-color 0.2s ease; } .figma-embed.loaded.unlocked .figma-lock-pill { display: inline-flex; } .figma-lock-pill:hover { border-color: rgba(255,85,0,0.7); background: rgba(20,20,20,0.9); } .figma-lock-pill:focus-visible { outline: 2px solid #ff5500; outline-offset: 2px; } .figma-lock-pill svg { width: 13px; height: 13px; } html.light .figma-shield-hint, html.light .figma-lock-pill { color: #fff; } /* the embed area is always dark */ @media (max-width: 640px) { .figma-embed { height: 440px; } .figma-cta-title { font-size: 18px; } .figma-cta-sub { font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { .figma-gesture svg { animation: none; } } /* ── Animated dodo logo (nav) ────────────────────────────────────────────── Injected by site.js in place of the static nav logo. Same layered animation as the other sites; theme follows the html.light class. */ .dodo-logo { position: relative; display: inline-block; overflow: hidden; flex: 0 0 auto; width: 52px; height: 52px; --logo: url(dodo-body-dark.png); --pen: url(dodo-pen.png); --lid: #000000; --s: 0.08667; /* 52 / 600 */ } html.light .dodo-logo { --logo: url(dodo-body-light.png); --lid: #ffffff; } .dodo-logo .stg { position: absolute; top: 0; left: 0; width: 600px; height: 600px; transform-origin: top left; transform: scale(var(--s)); } .dodo-logo .dl { position: absolute; background-image: var(--logo); background-repeat: no-repeat; background-size: 600px 600px; } .dodo-logo .base { left: 0; top: 0; width: 600px; height: 600px; background-position: 0 0; } .dodo-logo .tail { left: 60px; top: 255px; width: 145px; height: 128px; background-position: -60px -255px; transform-origin: 125px 63px; animation: dodoTail 3.8s ease-in-out infinite; } .dodo-logo .pen { left: 0; top: 0; width: 600px; height: 600px; background-image: var(--pen); transform-origin: 483px 430px; animation: dodoPen 3.6s ease-in-out infinite; } .dodo-logo .head { left: 205px; top: 0; width: 300px; height: 215px; background-position: -205px 0; transform-origin: 95px 215px; animation: dodoHead 5s ease-in-out infinite; } .dodo-logo .lid { position: absolute; left: 92px; top: 89px; width: 48px; height: 48px; border-radius: 50%; background: var(--lid); transform-origin: 50% 0%; transform: scaleY(0); animation: dodoWink 3.4s ease-in-out infinite; } @keyframes dodoPen { 0%,100%{transform:rotate(0)} 25%{transform:rotate(3.2deg)} 50%{transform:rotate(0)} 75%{transform:rotate(-2.6deg)} } @keyframes dodoTail { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-5.2deg)} 50%{transform:rotate(0)} 75%{transform:rotate(4.6deg)} } @keyframes dodoHead { 0%,100%{transform:rotate(0)} 30%{transform:rotate(1.9deg)} 65%{transform:rotate(-1.6deg)} } @keyframes dodoWink { 0%,66%{transform:scaleY(0)} 77%{transform:scaleY(1)} 88%{transform:scaleY(0)} 100%{transform:scaleY(0)} } @media (prefers-reduced-motion: reduce) { .dodo-logo .tail, .dodo-logo .pen, .dodo-logo .head, .dodo-logo .lid { animation: none; } .dodo-logo .lid { transform: scaleY(0); } } /* ---- Service intake flow (shared across all service-*.html pages) ---- An Apple-buy-flow-style stepper: pick a scope, fill in a brief, leave contact details, review, then send as a plain mailto — there is no backend, so "send" is exactly what it looks like. */ .flow-progress { display: flex; align-items: center; margin-bottom: 48px; } .flow-progress-step { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #525252; white-space: nowrap; transition: all .25s ease; background: transparent; border: none; padding: 0; cursor: pointer; font-family: inherit; } .flow-progress-step:hover { color: #d4d4d4; } .flow-progress-step:hover .flow-progress-num { border-color: #737373; color: #e5e5e5; } .flow-progress-num { width: 24px; height: 24px; border-radius: 999px; border: 1px solid #404040; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #737373; transition: border-color .25s ease, color .25s ease, background-color .25s ease, transform .25s ease, box-shadow .25s ease; flex: 0 0 auto; } .flow-progress-step.is-active { color: #e5e5e5; cursor: default; } .flow-progress-step.is-active .flow-progress-num { border-color: #fcd34d; color: #fcd34d; } .flow-progress-step.is-done { color: #a3a3a3; cursor: pointer; } .flow-progress-step.is-done:hover { color: #fcd34d; } .flow-progress-step.is-done .flow-progress-num { background: #fcd34d; border-color: #fcd34d; color: #0a0a0a; } .flow-progress-step.is-done:hover .flow-progress-num { transform: scale(1.08); } .flow-progress-line { flex: 1 1 auto; height: 1px; background: #262626; margin: 0 14px; transition: background-color .25s ease; } .flow-progress-line.is-done { background: #fcd34d; } html.light .flow-progress-step { color: #a3a3a3; } html.light .flow-progress-step:hover { color: #52525b; } html.light .flow-progress-num { border-color: #d4d4d4; color: #737373; } html.light .flow-progress-step.is-active { color: #171717; } html.light .flow-progress-step.is-active .flow-progress-num { border-color: #a07830; color: #a07830; } html.light .flow-progress-step.is-done { color: #71717a; } html.light .flow-progress-step.is-done:hover { color: #a07830; } html.light .flow-progress-step.is-done .flow-progress-num { background: #a07830; border-color: #a07830; color: #fff; } html.light .flow-progress-line { background: #e5e5e5; } html.light .flow-progress-line.is-done { background: #a07830; } .flow-step { display: none; } .flow-step.is-current { display: block; animation: flowFadeIn .35s ease; } @keyframes flowFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .flow-step.is-current { animation: none; } } .option-card { display: block; border: 1px solid #262626; border-radius: 18px; padding: 22px 24px; cursor: pointer; background: #0a0a0a; transition: border-color .2s ease, background-color .2s ease; } .option-card + .option-card { margin-top: 14px; } .option-card:hover { border-color: #404040; } .option-card.is-selected { border-color: #fcd34d; background: rgba(252, 211, 77, 0.06); } .option-check { width: 22px; height: 22px; border-radius: 6px; border: 1px solid #404040; flex: 0 0 auto; position: relative; transition: all .2s ease; align-self: center; } .option-card.is-selected .option-check { border-color: #fcd34d; background-color: #fcd34d; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 13px 13px; } html.light .option-card { background: #fff; border-color: #e5e5e5; } html.light .option-card:hover { border-color: #a3a3a3; } html.light .option-card.is-selected { border-color: #a07830; background: rgba(160, 120, 48, 0.07); } html.light .option-check { border-color: #a3a3a3; } html.light .option-card.is-selected .option-check { border-color: #a07830; background-color: #a07830; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } .flow-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #737373; margin-bottom: 8px; } html.light .flow-label { color: #71717a; } .flow-input, .flow-textarea { width: 100%; background: transparent; border: 1px solid #262626; border-radius: 10px; padding: 12px 16px; font-size: 14px; line-height: 1.5; color: #e5e5e5; outline: none; transition: border-color .2s ease; font-family: inherit; } .flow-textarea { resize: vertical; min-height: 96px; } .flow-input::placeholder, .flow-textarea::placeholder { color: #525252; } .flow-input:focus, .flow-textarea:focus { border-color: #fcd34d; } html.light .flow-input, html.light .flow-textarea { border-color: #d4d4d4; color: #171717; } html.light .flow-input::placeholder, html.light .flow-textarea::placeholder { color: #a3a3a3; } html.light .flow-input:focus, html.light .flow-textarea:focus { border-color: #a07830; } .flow-summary { border: 1px solid #262626; border-radius: 18px; padding: 24px; background: #0d0d0d; } html.light .flow-summary { background: #f7f7f7; border-color: #e5e5e5; } .flow-summary-row { border-bottom: 1px solid rgba(115, 115, 115, 0.2); } .flow-summary-row:last-child { border-bottom: none; } .flow-select { width: 100%; background-color: #0a0a0a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fcd34d'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #262626; border-radius: 12px; padding: 12px 44px 12px 16px; font-size: 13.5px; color: #e5e5e5; color-scheme: dark; outline: none !important; transition: border-color .2s ease, box-shadow .2s ease; font-family: inherit; cursor: pointer; } .flow-select:focus, .flow-select:focus-visible { border-color: #fcd34d !important; box-shadow: 0 0 0 1px rgba(252, 211, 77, 0.3) !important; outline: none !important; } html.light .flow-select { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a07830'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); border-color: #d4d4d4; color: #171717; color-scheme: light; } html.light .flow-select:focus, html.light .flow-select:focus-visible { border-color: #a07830 !important; box-shadow: 0 0 0 1px rgba(160, 120, 48, 0.3) !important; } .chip-grid { display: flex; flex-wrap: wrap; gap: 8px; } .chip-option { display: inline-flex; align-items: center; gap: 6px; padding: 8.5px 16px; border-radius: 12px; border: 1px solid transparent; font-size: 12px; color: #a3a3a3; cursor: pointer; transition: all .2s ease; user-select: none; background: rgba(255, 255, 255, 0.05); } .chip-option:hover { background: rgba(255, 255, 255, 0.09); color: #e5e5e5; } .chip-option.is-selected { border: 1px solid transparent; background: rgba(252, 211, 77, 0.15); color: #fcd34d; font-weight: 600; } html.light .chip-option { border: 1px solid transparent; color: #52525b; background: #f4f4f5; } html.light .chip-option:hover { background: #e4e4e7; color: #18181b; } html.light .chip-option.is-selected { border: 1px solid transparent; background: rgba(160, 120, 48, 0.15); color: #a07830; } .file-preview-chip { display: inline-flex; align-items: center; gap: 8px; background: #141414; border: 1px solid #262626; border-radius: 999px; padding: 4px 12px 4px 6px; font-size: 11px; color: #e5e5e5; transition: border-color .2s ease; } .file-preview-chip img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; } .file-preview-chip .file-remove-btn { color: #737373; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: none; background: transparent; padding: 0; font-size: 13px; line-height: 1; transition: all .2s ease; } .file-preview-chip .file-remove-btn:hover { color: #f87171; background: rgba(248, 113, 113, 0.15); } html.light .file-preview-chip { background: #f4f4f5; border-color: #e4e4e7; color: #18181b; } html.light .file-preview-chip .file-remove-btn { color: #a1a1aa; } html.light .file-preview-chip .file-remove-btn:hover { color: #ef4444; background: rgba(239, 68, 68, 0.12); } /* Flow Buttons (Back buttons & Secondary actions) */ .flow-btn-secondary { display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px; border: 1px solid #262626; background: rgba(23, 23, 23, 0.85); color: #d4d4d4; transition: all 0.25s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; } .flow-btn-secondary:hover { border-color: #525252; background: #262626; color: #ffffff; } html.light .flow-btn-secondary, html.light [data-flow-back], html.light a[href="hire-me.html"].inline-flex, html.light [data-flow-link-toggle], html.light label:has([data-flow-file-input]) { border-color: #d4d4d8 !important; background-color: #ffffff !important; color: #18181b !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; } html.light .flow-btn-secondary:hover, html.light [data-flow-back]:hover, html.light a[href="hire-me.html"].inline-flex:hover, html.light [data-flow-link-toggle]:hover, html.light label:has([data-flow-file-input]):hover { border-color: #a1a1aa !important; background-color: #f4f4f5 !important; color: #000000 !important; } /* Primary buttons in light mode */ html.light [data-flow-next], html.light [data-flow-send] { background-color: #18181b !important; color: #ffffff !important; } html.light [data-flow-next]:hover, html.light [data-flow-send]:hover { background-color: #a07830 !important; color: #ffffff !important; } html.light [data-flow-next]:disabled, html.light [data-flow-next].opacity-40 { background-color: #e4e4e7 !important; color: #a1a1aa !important; } /* ── Datepicker calendar input styling ────────────────────────────────── */ input[type="date"].flow-input { color-scheme: dark; cursor: pointer; } html.light input[type="date"].flow-input { color-scheme: light; } input[type="date"].flow-input::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(0.8) sepia(1) saturate(5) hue-rotate(5deg); opacity: 0.85; transition: opacity 0.2s ease; } html.light input[type="date"].flow-input::-webkit-calendar-picker-indicator { filter: none; } input[type="date"].flow-input::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Custom Date Popover Calendar matching Dropdown Menu Style */ .custom-date-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 100; width: 290px; background: #0e0e0e; border: 1px solid #262626; border-radius: 18px; padding: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85); font-family: inherit; color: #e5e5e5; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html.light .custom-date-popover { background: #ffffff; border-color: #e5e5e5; color: #171717; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); } .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cal-title { font-weight: 700; font-size: 14px; color: #f4f4f5; } html.light .cal-title { color: #18181b; } .cal-nav { display: flex; align-items: center; gap: 6px; } .cal-btn { width: 26px; height: 26px; border-radius: 8px; border: 1px solid #262626; background: transparent; color: #e5e5e5; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } html.light .cal-btn { border-color: #e5e5e5; color: #171717; } .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; text-align: center; font-size: 11px; font-weight: 600; color: #737373; } .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; } .day-off { padding: 6px 0; font-size: 12px; color: #525252; opacity: 0.35; } .cal-day { padding: 6px 0; border-radius: 8px; border: none; background: transparent; color: #e5e5e5; font-size: 12px; cursor: pointer; transition: background-color .15s ease, color .15s ease; } html.light .cal-day { color: #171717; } .cal-day:hover { background: rgba(252, 211, 77, 0.15); color: #fcd34d; } .cal-day.is-today { color: #fcd34d; font-weight: 700; } .cal-day.is-selected { background: #fcd34d !important; color: #09090b !important; font-weight: 700 !important; } html.light .cal-day.is-selected { background: #a07830 !important; color: #ffffff !important; } .cal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid #262626; } html.light .cal-footer { border-top-color: #e5e5e5; } .cal-action { background: transparent; border: none; font-size: 11px; font-weight: 600; cursor: pointer; } .cal-clear { color: #737373; } .cal-today { color: #fcd34d; font-weight: 700; } html.light .cal-today { color: #a07830; } /* ---- Standardized Expanding CTA Buttons (Matches Hero Services & Rates Button) ---- */ .site-cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; box-shadow: none !important; cursor: pointer; overflow: hidden; white-space: nowrap; } .site-cta-btn.cta-yellow { background-color: #fcd34d; color: #0a0a0a !important; box-shadow: none !important; } .site-cta-btn.cta-yellow:hover { background-color: #fbbf24; transform: scale(1.02); box-shadow: none !important; } .site-cta-btn.cta-white { background-color: #ffffff; color: #0a0a0a !important; box-shadow: none !important; } .site-cta-btn.cta-white:hover { background-color: #e5e5e5; transform: scale(1.02); box-shadow: none !important; } /* Hero Explore Services & Rates Expanding Button */ .hero-explore-btn { display: inline-flex; align-items: center; gap: 0; padding: 10px 24px; border-radius: 12px; background-color: #fcd34d; color: #0a0a0a !important; font-family: inherit; font-weight: 700; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; box-shadow: none !important; cursor: pointer; overflow: hidden; } .hero-explore-btn:hover { background-color: #fbbf24; transform: scale(1.02); box-shadow: none !important; } /* Expanding Arrow Button Animations — Rock-Solid, No Shaking, Smooth Reveal */ .btn-arrow, .cross-link-arrow, .cross-arrow { display: inline-block; opacity: 0; max-width: 0; transform: translateX(-6px); transition: max-width 0.3s ease, opacity 0.3s ease, transform 0.3s ease, margin-left 0.3s ease; margin-left: 0; white-space: nowrap; vertical-align: middle; overflow: hidden; } .site-cta-btn:hover .btn-arrow, .hero-explore-btn:hover .btn-arrow, :hover > .btn-arrow, :hover > .cross-link-arrow, :hover > .cross-arrow, .group:hover .btn-arrow, .group:hover .cross-link-arrow, .group:hover .cross-arrow, .cross-link-card:hover .cross-link-arrow, .cross-link-card:hover .btn-arrow { opacity: 1; max-width: 20px; transform: translateX(0); margin-left: 8px; } .cross-pill { overflow: hidden; will-change: transform, background-color, border-color; transition: all 0.3s ease; } .cross-pill:hover > .cross-arrow, .cross-pill:hover .cross-arrow { opacity: 1; max-width: 16px; transform: translateX(0); margin-left: 6px; } /* Get Started Card Buttons Expanding Animation */ .get-started-btn { display: inline-flex; align-items: center; gap: 0 !important; padding: 8px 16px !important; border-radius: 12px !important; transition: all 0.3s cubic-bezier(0.34, 1.25, 0.64, 1) !important; overflow: hidden; cursor: pointer; } .get-started-btn .btn-arrow, .get-started-btn .cross-arrow { display: inline-block; opacity: 0; max-width: 0; transform: translateX(-6px); transition: max-width 0.3s ease, opacity 0.3s ease, transform 0.3s ease, margin-left 0.3s ease !important; margin-left: 0; vertical-align: middle; } .get-started-btn:hover, .work-card:hover .get-started-btn { padding-right: 22px !important; background-color: #fcd34d !important; border-color: #fcd34d !important; color: #0a0a0a !important; transform: scale(1.02); } .get-started-btn:hover .btn-arrow, .get-started-btn:hover .cross-arrow, .work-card:hover .btn-arrow, .work-card:hover .cross-arrow { opacity: 1; max-width: 18px; transform: translateX(0); margin-left: 6px; color: #0a0a0a !important; } /* Option Card & Intake Flow Mobile Responsiveness Overrides */ @media (max-width: 639px) { .option-card { position: relative !important; padding: 16px 16px !important; } .option-card .option-check { position: absolute !important; right: 16px !important; top: 50% !important; transform: translateY(-50%) !important; } .option-card > div > div { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; padding-right: 32px !important; } .option-card > div > div > div:last-child { width: 100% !important; margin-top: 2px !important; } .option-card p.option-title { margin-bottom: 2px !important; font-size: 15px !important; line-height: 1.35 !important; } .flow-progress { overflow-x: auto !important; padding-bottom: 6px !important; margin-bottom: 28px !important; -webkit-overflow-scrolling: touch; } .flow-progress-step { font-size: 10px !important; letter-spacing: 0.1em !important; } .flow-summary { padding: 18px 16px !important; border-radius: 16px !important; } } /* Sleek Circular Hamburger Button & Floating Fixed Mobile Dropdown */ .game-more-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #404040; background: transparent; color: #e5e5e5; cursor: pointer; flex-shrink: 0; transition: all 0.2s ease; } .game-more-menu-btn:hover { border-color: #fcd34d; color: #fcd34d; } html.light .game-more-menu-btn { border-color: #d4d4d4; color: #171717; } html.light .game-more-menu-btn:hover { border-color: #a07830; color: #a07830; } @media (min-width: 1280px) { .game-more-menu-btn { display: none !important; } } .game-mobile-menu { position: fixed !important; top: 64px !important; right: 16px !important; left: auto !important; width: 250px !important; max-width: calc(100vw - 32px) !important; z-index: 9999 !important; background: #0d0d0d !important; border: 1px solid #262626 !important; border-radius: 16px !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7) !important; padding: 12px !important; } html.light .game-mobile-menu { background: #ffffff !important; border-color: #e5e5e5 !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15) !important; } /* ========================================================================== Modern Gallery Preview Thumbnails & Fullscreen Lightbox Viewer ========================================================================== */ /* ---- Gallery Thumbnail Containers ---- */ .gallery-zoom-target { position: relative; cursor: zoom-in; transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .gallery-zoom-target img { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .gallery-zoom-target:hover { border-color: rgba(249, 115, 22, 0.45) !important; box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.6), 0 0 24px -2px rgba(249, 115, 22, 0.18) !important; } .gallery-zoom-target:hover img { transform: scale(1.02); } .gallery-zoom-target:focus-visible { outline: 2px solid #f97316; outline-offset: 3px; } /* Floating Zoom Indicator Badge */ .gallery-zoom-badge { position: absolute; bottom: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(12, 12, 14, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); color: #e4e4e7; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; opacity: 0; transform: translateY(6px) scale(0.95); transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease; pointer-events: none; z-index: 10; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .gallery-zoom-badge svg { width: 14px; height: 14px; stroke: currentColor; } .gallery-zoom-target:hover .gallery-zoom-badge, .gallery-zoom-target:focus-visible .gallery-zoom-badge { opacity: 1; transform: translateY(0) scale(1); } html.light .gallery-zoom-target:hover { border-color: rgba(249, 115, 22, 0.6) !important; box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.12), 0 0 20px -2px rgba(249, 115, 22, 0.15) !important; } html.light .gallery-zoom-badge { background: rgba(255, 255, 255, 0.88); border-color: rgba(0, 0, 0, 0.12); color: #18181b; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } /* ---- Fullscreen Lightbox Overlay ---- */ .glb-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; background: rgba(6, 6, 8, 0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); user-select: none; overflow: hidden; } .glb-overlay.is-active { opacity: 1; pointer-events: auto; } html.light .glb-overlay { background: rgba(246, 246, 248, 0.95); } /* Header Toolbar */ .glb-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%); z-index: 20; gap: 16px; } html.light .glb-header { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 100%); } .glb-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .glb-counter { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: #f97316; white-space: nowrap; } html.light .glb-counter { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.1); color: #ea580c; } .glb-title { font-size: 13px; font-weight: 500; color: #e4e4e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; } html.light .glb-title { color: #27272a; } .glb-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .glb-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: #e4e4e7; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); outline: none; } .glb-btn svg { width: 18px; height: 18px; stroke: currentColor; } .glb-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); color: #ffffff; transform: scale(1.06); } .glb-btn:active { transform: scale(0.94); } .glb-btn:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; } html.light .glb-btn { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); color: #27272a; } html.light .glb-btn:hover { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.25); color: #000000; } .glb-zoom-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: #e4e4e7; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: all 0.2s ease; min-width: 58px; } .glb-zoom-pill:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); color: #ffffff; } html.light .glb-zoom-pill { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); color: #27272a; } html.light .glb-zoom-pill:hover { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.25); color: #000000; } /* Main Viewport Stage */ .glb-stage { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; } /* Image Wrap & Zoom/Pan */ .glb-image-wrap { position: relative; display: flex; align-items: center; justify-content: center; max-width: 94vw; max-height: 82vh; cursor: zoom-in; touch-action: none; } .glb-image-wrap.is-zoomed { cursor: grab; } .glb-image-wrap.is-dragging { cursor: grabbing !important; } .glb-image-container { display: flex; align-items: center; justify-content: center; transform-origin: center center; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .glb-image-wrap.is-dragging .glb-image-container { transition: none !important; } .glb-image { max-width: 92vw; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); transform: scale(0.92); opacity: 0; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; will-change: transform, opacity; pointer-events: auto; } .glb-overlay.is-active .glb-image { transform: scale(1); opacity: 1; } /* Directional slide transition classes */ .glb-image.slide-next-out { transform: translateX(-40px) scale(0.96) !important; opacity: 0 !important; transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s ease !important; } .glb-image.slide-prev-out { transform: translateX(40px) scale(0.96) !important; opacity: 0 !important; transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s ease !important; } .glb-image.slide-next-in { animation: glbSlideInRight 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .glb-image.slide-prev-in { animation: glbSlideInLeft 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes glbSlideInRight { from { transform: translateX(50px) scale(0.96); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } @keyframes glbSlideInLeft { from { transform: translateX(-50px) scale(0.96); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } } /* Floating Navigation Arrows */ .glb-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(18, 18, 22, 0.68); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.16); color: #f4f4f5; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 30; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .glb-nav-btn svg { width: 22px; height: 22px; stroke: currentColor; } .glb-nav-btn:hover { background: #f97316; border-color: #f97316; color: #ffffff; transform: translateY(-50%) scale(1.1); box-shadow: 0 12px 30px rgba(249, 115, 22, 0.35); } .glb-nav-btn:active { transform: translateY(-50%) scale(0.96); } .glb-nav-prev { left: 20px; } .glb-nav-next { right: 20px; } @media (max-width: 640px) { .glb-nav-btn { width: 42px; height: 42px; } .glb-nav-prev { left: 10px; } .glb-nav-next { right: 10px; } } html.light .glb-nav-btn { background: rgba(255, 255, 255, 0.88); border-color: rgba(0, 0, 0, 0.12); color: #18181b; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } html.light .glb-nav-btn:hover { background: #ea580c; border-color: #ea580c; color: #ffffff; box-shadow: 0 10px 24px rgba(234, 88, 12, 0.3); } /* Footer Hint Bar */ .glb-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%); z-index: 20; font-size: 12px; color: #a1a1aa; } html.light .glb-footer { background: linear-gradient(to top, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 100%); color: #52525b; } .glb-hint { display: flex; align-items: center; gap: 16px; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: #71717a; } .glb-hint kbd { padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #d4d4d8; font-size: 10px; } html.light .glb-hint kbd { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.1); color: #27272a; } @media (max-width: 768px) { .glb-hint { display: none; } } @media (prefers-reduced-motion: reduce) { .gallery-zoom-target img, .glb-overlay, .glb-image, .glb-image-container, .glb-btn, .glb-nav-btn { transition-duration: 0.05s !important; animation: none !important; } } /* ---- Project Navigation Buttons (Rich Filled Color Backgrounds) ---- */ .project-nav-btn { background-color: #1c202b; background-image: linear-gradient(135deg, #222634 0%, #1a1d26 100%); border: 1px solid #32384a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .project-nav-btn:hover { background-color: #272d3e; background-image: linear-gradient(135deg, #2b3245 0%, #202534 100%); border-color: rgba(252, 211, 77, 0.55); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(252, 211, 77, 0.12); } /* Light Mode */ html.light .project-nav-btn { background-color: #f4f4f6; background-image: linear-gradient(135deg, #ffffff 0%, #f0f0f4 100%); border-color: #e4e4e7; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } html.light .project-nav-btn:hover { background-color: #ffffff; background-image: linear-gradient(135deg, #ffffff 0%, #e8e8ed 100%); border-color: rgba(217, 119, 6, 0.5); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } /* ---- UI/UX Cross-Link CTA (Option C: Minimalist Monochrome Pill) ---- */ .cross-link-cta { box-shadow: none !important; background-color: #f4f4f5 !important; color: #09090b !important; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important; } .cross-link-cta:hover, .cross-link-card:hover .cross-link-cta { background-color: #fcd34d !important; color: #09090b !important; transform: scale(1.02); box-shadow: none !important; } /* Light Mode */ html.light .cross-link-cta { background-color: #18181b !important; color: #ffffff !important; } html.light .cross-link-cta:hover, html.light .cross-link-card:hover .cross-link-cta { background-color: #d97706 !important; color: #ffffff !important; }