:is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-text.disabled { opacity: .4; pointer-events: none; } /* Import web fonts */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap'); /* Local font faces */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('./fonts/PlusJakartaSans[wght].woff2') format('woff2'), url('./fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('./fonts/PlusJakartaSans-Italic[wght].woff2') format('woff2'), url('./fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype'); font-style: italic; font-weight: 100 900; font-display: swap; } @font-face { font-family: 'Cooper Light BT'; src: url('./fonts/Cooper Light BT V2.woff2') format('woff2'); font-style: normal; font-weight: 300; font-display: swap; } @font-face { font-family: 'Cooper Light BT'; src: url('./fonts/Cooper Light Italic BT V2.woff2') format('woff2'); font-style: italic; font-weight: 300; font-display: swap; } /* CSS Variables */ :root { --Logo-MileIQ-Cheddar: #FFA800; --System-White: #FFFFFF; --System-Black: #36454F; } /* Global header inversion (mix-blend-mode: difference) */ .header-bar.invert { mix-blend-mode: difference; color: var(--System-White, #FFFFFF); } .header-bar.invert .nav-link { color: inherit; } .header-bar.invert .download-resume-btn { color: inherit; border-color: currentColor; background: transparent; } .header-bar.invert .menu-icon, .header-bar.invert .logo { filter: none; } /* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; /* Disable text selection */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* Disable drag */ -webkit-user-drag: none; -moz-user-drag: none; } body { font-family: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; min-height: 100vh; width: 100vw; height: 100vh; position: relative; background-image: linear-gradient(0deg, rgba(54, 69, 79, 0.75) 0%, rgba(54, 69, 79, 0.38) 50%, rgba(54, 69, 79, 0.75) 100%), url('./index/images/background/background-1.png'); background-size: cover, cover; background-position: center, 85% 10%; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; will-change: transform; overflow-x: hidden; transition: opacity 750ms ease, background-image 0.5s ease-in-out; } #small-screen-overlay { position: fixed; inset: 0; z-index: 2147483600; display: none; background: #0D1321; overflow: hidden; height: 100vh; height: 100dvh; } #small-screen-overlay.visible { display: flex; } #small-screen-overlay iframe { border: 0; width: 100%; height: 100%; flex: 1 1 auto; background: #0D1321; } body.small-screen-lock { overflow: hidden !important; } /* Pre-paint fade-in: when set on , hide body until JS removes it */ html.page-fade-preload body { opacity: 0; } /* Fun page background state */ body.fun-page { background-image: linear-gradient(0deg, rgba(54, 69, 79, 0.75) 0%, rgba(54, 69, 79, 0.38) 50%, rgba(54, 69, 79, 0.75) 100%), url('./images/background-about-splash.png'); } /* Projects page background state - same as home page */ body.projects-page { background-image: linear-gradient(0deg, rgba(54, 69, 79, 0.75) 0%, rgba(54, 69, 79, 0.38) 50%, rgba(54, 69, 79, 0.75) 100%), url('./index/images/background/background-1.png'); } .background-slider { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: block; --start: 0%; } .background-slider__layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background-size: cover, cover; background-position: 85% 10%, 85% 10%; background-repeat: no-repeat, no-repeat; } .background-slider__top { clip-path: inset(0 calc(100% - var(--start, 0%)) 0 0); transition: clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1); will-change: clip-path; z-index: 2; } .background-slider__bottom { z-index: 1; } /* MileIQ page background state */ body.mileiq-page { background: var(--Logo-MileIQ-Cheddar, #FFA800); background-image: none; background-attachment: fixed; min-height: 100vh; height: auto; overflow-x: hidden; } body.mileiq-page .container { position: relative; min-height: 100vh; overflow: visible; } /* MileIQ page header styling */ body.mileiq-page .header-bar { color: var(--System-Black, #36454F); } body.mileiq-page .header-bar .nav-link { color: var(--System-Black, #36454F); } body.mileiq-page .header-bar .download-resume-btn { color: var(--System-Black, #36454F); border-color: var(--System-Black, #36454F); } body.mileiq-page .header-bar .logo { filter: none; } body.mileiq-page .header-bar .mobile-menu-btn { filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(1234%) hue-rotate(180deg) brightness(94%) contrast(89%); padding: 8px 15px; } /* MileIQ hero section */ .hero-section { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; } /* MileIQ hero main container */ .mileiq-hero-main { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* First sub-container - Logo */ .mileiq-hero-logo-container { margin-bottom: 4px; } .mileiq-hero-logo { width: auto; height: auto; filter: brightness(0) saturate(100%) invert(22%) sepia(8%) saturate(1234%) hue-rotate(180deg) brightness(94%) contrast(89%); } /* Second sub-container - Text */ .mileiq-hero-text-container { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px; } .mileiq-hero-text { color: var(--System-Black, #36454F); text-align: center; font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 34px; } .mileiq-hero-text-highlight { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 30px; font-style: italic; font-weight: 400; line-height: 34px; } /* iPhone placeholder image */ .mileiq-iphone-placeholder { width: 320px; height: 658px; position: absolute; left: 50%; top: -346px; z-index: 1; transition: transform 0.1s ease-out; transform: translate(calc(-50% + var(--scroll-x, 0px)), var(--scroll-y, 0px)) rotate(var(--scroll-rotation, 0deg)); } /* Scroll-linked animation for iPhone */ .mileiq-iphone-placeholder.scrolling { transform: translate(calc(-50% + var(--scroll-x, 0px)), var(--scroll-y, 0px)) rotate(var(--scroll-rotation, 0deg)); } /* Next section that appears after hero */ .mileiq-next-section { width: 100vw; min-height: 100vh; background: var(--Logo-MileIQ-Cheddar, #FFA800); display: flex; align-items: center; justify-content: center; position: relative; z-index: 0; } .mileiq-next-section-content { text-align: center; color: var(--System-Black, #36454F); font-family: Manrope; font-size: 24px; font-weight: 300; line-height: 32px; padding: 0 20px; } /* MileIQ header styling */ .mileiq-header { color: var(--System-Black, #36454F); } .mileiq-header .nav-link { color: var(--System-Black, #36454F); } .mileiq-header .download-resume-btn { color: var(--System-Black, #36454F); border-color: var(--System-Black, #36454F); } .mileiq-header .download-resume-btn:hover { background-color: var(--System-Black, #36454F); color: white; } /* MileIQ hero section */ .mileiq-hero { width: 100vw; height: 100vh; background: var(--Logo-MileIQ-Cheddar, #FFA800); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Hide main content on projects page and show content rectangle */ body.projects-page .main-content { opacity: 0; transform: translateY(-100px) scale(0.95); pointer-events: none; } body.projects-page .content-rectangle { opacity: 1; visibility: visible; } body.projects-page .logo-ticker { opacity: 1; visibility: visible; } /* Hide project frame contents on fun page but keep the rectangle */ body.fun-page .project-frame > * { display: none; } /* Exception: Show stamps on fun page */ body.fun-page .project-frame .pbf-stamp, body.fun-page .project-frame .pwif-stamp, body.fun-page .project-frame .wdo-stamp, body.fun-page .project-frame .dpr-stamp, body.fun-page .project-frame .lag-stamp, body.fun-page .project-frame .wid-stamp, body.fun-page .project-frame .psc-stamp, body.fun-page .project-frame .jsc-stamp, body.fun-page .project-frame .bg-stamp, body.fun-page .project-frame .lfp-stamp, body.fun-page .project-frame .ta-stamp, body.fun-page .project-frame .scg-stamp, body.fun-page .project-frame .stamp-close-button { display: block; } /* Hide main content on fun page and show content rectangle */ body.fun-page .main-content { opacity: 0; transform: translateY(-100px) scale(0.95); pointer-events: none; } body.fun-page .content-rectangle { opacity: 1; visibility: visible; } body.fun-page .logo-ticker { opacity: 1; visibility: visible; } /* PBF Stamp for Fun page */ .pbf-stamp { position: absolute; left: 68.04px; top: 59.85px; width: 203px; height: 203px; background-image: url('./stamps/PBF-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .pbf-stamp { animation: fun-stamp-press 1.5s ease-out 0.2s both; -webkit-animation: fun-stamp-press 1.5s ease-out 0.2s both; pointer-events: auto; } .pbf-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ -webkit-transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; } .pbf-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; -webkit-transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); -webkit-filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .pbf-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; -webkit-transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* PWIF Stamp for Fun page */ .pwif-stamp { position: absolute; left: 68.04px; top: 281.01px; /* 59.85px + 203px + 18.16px */ width: 203px; height: 203px; background-image: url('./stamps/PWIF-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .pwif-stamp { animation: fun-stamp-press 1.5s ease-out 0.4s both; pointer-events: auto; } .pwif-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .pwif-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .pwif-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* WDO Stamp for Fun page */ .wdo-stamp { position: absolute; left: 316.2px; /* 68.04px + 203px + 45.16px */ top: 281.01px; /* Same as PWIF stamp */ width: 203px; height: 203px; background-image: url('./stamps/WDO-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .wdo-stamp { animation: fun-stamp-press 1.5s ease-out 0.6s both; pointer-events: auto; } .wdo-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .wdo-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .wdo-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* DPR Stamp for Fun page */ .dpr-stamp { position: absolute; left: 564.36px; /* 316.2px + 203px + 45.16px */ top: 281.01px; /* Same as PWIF stamp */ width: 203px; height: 203px; background-image: url('./stamps/DPR-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .dpr-stamp { animation: fun-stamp-press 1.5s ease-out 0.8s both; pointer-events: auto; } .dpr-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .dpr-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .dpr-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* LAG Stamp for Fun page */ .lag-stamp { position: absolute; left: 812.52px; /* 564.36px + 203px + 45.16px */ top: 281.01px; /* Same as PWIF stamp */ width: 203px; height: 203px; background-image: url('./stamps/LAG-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .lag-stamp { animation: fun-stamp-press 1.5s ease-out 1.0s both; pointer-events: auto; } .lag-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .lag-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .lag-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* WID Stamp for Fun page */ .wid-stamp { position: absolute; left: 68.04px; top: 502.17px; /* 59.85px + 203px + 18.16px + 18.16px */ width: 203px; height: 203px; background-image: url('./stamps/WID-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .wid-stamp { animation: fun-stamp-press 1.5s ease-out 1.2s both; pointer-events: auto; } .wid-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .wid-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .wid-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* PSC Stamp for Fun page */ .psc-stamp { position: absolute; left: 316.2px; /* 68.04px + 203px + 45.16px */ top: 502.17px; /* Same as WID stamp */ width: 203px; height: 203px; background-image: url('./stamps/PSC-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .psc-stamp { animation: fun-stamp-press 1.5s ease-out 1.4s both; pointer-events: auto; } .psc-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .psc-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .psc-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* JSC Stamp for Fun page */ .jsc-stamp { position: absolute; left: 564.36px; /* 316.2px + 203px + 45.16px */ top: 502.17px; /* Same as WID stamp */ width: 203px; height: 203px; background-image: url('./stamps/JSC-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .jsc-stamp { animation: fun-stamp-press 1.5s ease-out 1.6s both; pointer-events: auto; } .jsc-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .jsc-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .jsc-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* BG Stamp for Fun page */ .bg-stamp { position: absolute; left: 812.52px; /* 564.36px + 203px + 45.16px */ top: 502.17px; /* Same as WID stamp */ width: 203px; height: 203px; background-image: url('./stamps/BG-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .bg-stamp { animation: fun-stamp-press 1.5s ease-out 1.8s both; pointer-events: auto; } .bg-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .bg-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .bg-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* Dimmed state for stamps when another is clicked */ .stamp-dimmed { opacity: 0.3 !important; transition: opacity 0.3s ease; } /* Column interaction states for stamps */ .stamp-hidden-columns { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.5s ease !important; } .stamp-shift-left { transition: all 0.5s ease !important; -webkit-transition: all 0.5s ease !important; } /* Column 3 stamps shifting to column 1 position */ .stamp-shift-left.ta-stamp { left: 68.04px !important; /* Column 3 to Column 1 */ } .stamp-shift-left.dpr-stamp { left: 68.04px !important; /* Column 3 to Column 1 */ } .stamp-shift-left.jsc-stamp { left: 68.04px !important; /* Column 3 to Column 1 */ } /* Column 4 stamps shifting to column 2 position */ .stamp-shift-left.scg-stamp { left: 316.2px !important; /* Column 4 to Column 2 */ } .stamp-shift-left.lag-stamp { left: 316.2px !important; /* Column 4 to Column 2 */ } .stamp-shift-left.bg-stamp { left: 316.2px !important; /* Column 4 to Column 2 */ } /* Fun page stamp animations - realistic stamping motion */ @keyframes fun-stamp-press { 0% { transform: translateY(-15px) scale(1) rotate(0.8deg); -webkit-transform: translateY(-15px) scale(1) rotate(0.8deg); opacity: 0; } 10% { opacity: 1; } 40% { transform: translateY(-3px) scale(0.95) rotate(-0.2deg); -webkit-transform: translateY(-3px) scale(0.95) rotate(-0.2deg); opacity: 1; } 60% { transform: translateY(0px) scale(0.92) rotate(-1.2deg); -webkit-transform: translateY(0px) scale(0.92) rotate(-1.2deg); opacity: 1; } 80% { transform: translateY(0px) scale(0.92) rotate(-1.2deg); -webkit-transform: translateY(0px) scale(0.92) rotate(-1.2deg); opacity: 1; } 100% { transform: translateY(0px) scale(0.92) rotate(-1.2deg); -webkit-transform: translateY(0px) scale(0.92) rotate(-1.2deg); opacity: 1; } } @-webkit-keyframes fun-stamp-press { 0% { -webkit-transform: translateY(-15px) scale(1) rotate(0.8deg); opacity: 0; } 10% { opacity: 1; } 40% { -webkit-transform: translateY(-3px) scale(0.95) rotate(-0.2deg); opacity: 1; } 60% { -webkit-transform: translateY(0px) scale(0.92) rotate(-1.2deg); opacity: 1; } 80% { -webkit-transform: translateY(0px) scale(0.92) rotate(-1.2deg); opacity: 1; } 100% { -webkit-transform: translateY(0px) scale(0.92) rotate(-1.2deg); opacity: 1; } } /* LFP Stamp for Fun page */ .lfp-stamp { position: absolute; left: 316.2px; /* 68.04px + 203px + 45.16px */ top: 59.85px; /* Same as PBF stamp */ width: 203px; height: 203px; background-image: url('./stamps/LFP-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .lfp-stamp { animation: fun-stamp-press 1.5s ease-out 2.0s both; pointer-events: auto; } .lfp-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .lfp-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .lfp-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* TA Stamp for Fun page */ .ta-stamp { position: absolute; left: 564.36px; /* 316.2px + 203px + 45.16px */ top: 59.85px; /* Same as PBF and LFP stamps */ width: 203px; height: 203px; background-image: url('./stamps/TA-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .ta-stamp { animation: fun-stamp-press 1.5s ease-out 2.2s both; pointer-events: auto; } .ta-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .ta-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .ta-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* SCG Stamp for Fun page */ .scg-stamp { position: absolute; left: 812.52px; /* 564.36px + 203px + 45.16px */ top: 59.85px; /* Same as other stamps */ width: 203px; height: 203px; background-image: url('./stamps/SCG-Stamp@2x.png'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: rotate(0.8deg); transform-origin: center; z-index: 20; opacity: 0; transition: left 0.5s ease, opacity 0.3s ease, transform 0.4s ease, filter 0.4s ease; -webkit-transition: left 0.5s ease, opacity 0.3s ease, -webkit-transform 0.4s ease, -webkit-filter 0.4s ease; cursor: pointer; } body.fun-page .scg-stamp { animation: fun-stamp-press 1.5s ease-out 2.4s both; pointer-events: auto; } .scg-stamp:hover { transform: translateY(0px) scale(0.997) rotate(-1.2deg) !important; /* 220/203 * 0.92 = 0.997 */ } .scg-stamp.clicked { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; filter: drop-shadow(0px 0px 15px rgba(66, 133, 244, 0.3)); } .scg-stamp.clicked:hover { transform: translateY(0px) scale(0.997) rotate(-6.7deg) !important; } /* Close button for stamps */ .stamp-close-button { position: absolute; width: 55px; /* 44px * 1.25 = 55px */ height: 55px; /* 44px * 1.25 = 55px */ z-index: 50; cursor: pointer; display: none; opacity: 0; transition: opacity 0.15s ease, transform 0.2s ease, -webkit-transform 0.2s ease; -webkit-transition: opacity 0.15s ease, transform 0.2s ease, -webkit-transform 0.2s ease; transform-origin: center; -webkit-transform-origin: center; align-items: center; justify-content: center; pointer-events: auto; /* Ensure it's always on top of stamps */ transform: translateZ(0); -webkit-transform: translateZ(0); } .stamp-close-button.visible { display: flex !important; opacity: 1 !important; } .stamp-close-button:hover { transform: scale(1.1) translateZ(0); -webkit-transform: scale(1.1) translateZ(0); } .stamp-close-button:active { transform: scale(0.95) translateZ(0); -webkit-transform: scale(0.95) translateZ(0); } .close-button-icon { width: 30px; /* 24px * 1.25 = 30px */ height: 30px; /* 24px * 1.25 = 30px */ pointer-events: none; /* Ensure icon is visible */ display: block; } /* Additional protection for images and content */ img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Disable highlighting */ ::selection { background: transparent; } ::-moz-selection { background: transparent; } .header-bar { position: fixed; top: 0; left: 0; right: 0; width: 100vw; display: flex; align-items: center; justify-content: space-between; padding: 20px 35px; z-index: 9999; } .logo { width: 38.4px; height: 28.8px; cursor: pointer; pointer-events: auto; } .navigation-bar { display: flex; align-items: center; gap: 20px; } .nav-link { color: rgba(255, 255, 255, 0.80); text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-style: normal; font-weight: 500; line-height: 21.6px; /* 144% */ text-decoration: none; cursor: pointer; transition: all 0.3s ease; pointer-events: auto; padding: 10px 15px; border-radius: 25px; background-color: transparent; } .nav-link:hover { background-color: rgba(255, 255, 255, 0.1); } .nav-link.active { background-color: rgba(255, 255, 255, 0.1); } /* Work page: active tab should use black-tinted fill instead of white */ .home-page .header-bar.invert .nav-link.active { mix-blend-mode: normal; background-color: rgba(54, 69, 79, 0.10) !important; color: #36454F !important; } .home-page .header-bar:not(.invert) .nav-link.active { background-color: rgba(54, 69, 79, 0.10) !important; color: #36454F !important; } .mobile-menu-btn { display: none; background: transparent; border: none; cursor: pointer; padding: 8px 15px; align-items: center; border-radius: 25px; border: 1.25px solid #FFF; pointer-events: auto; } /* Header bar auto-hide functionality */ .header-bar { transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; } .header-bar.hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; } .header-bar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .menu-icon { width: 24px; height: 24px; filter: brightness(0) invert(1); /* Makes the icon white */ } .download-resume-btn { text-decoration: none; display: flex; padding: 10px 15px; justify-content: center; align-items: center; gap: 10px; border-radius: 25px; border: 1.25px solid #FFF; background: transparent; cursor: pointer; transition: all 0.3s ease; color: rgba(255, 255, 255, 0.80); text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px; font-style: normal; font-weight: 500; line-height: 21.6px; /* 144% */ pointer-events: auto; } .download-resume-btn:hover, .download-resume-btn:focus { text-decoration: none; background-color: rgba(255, 255, 255, 0.1); } .download-resume-btn:active { transform: scale(0.98); } /* Non-inverted headers (e.g., Work): solid black hover */ .header-bar:not(.invert) .download-resume-btn:hover { background-color: var(--System-Black, #36454F); border-color: var(--System-Black, #36454F); color: #FFFFFF; } /* Override Work page inline header rules (higher specificity + !important) */ .home-page .header-bar.force-black .download-resume-btn:hover { background-color: var(--System-Black, #36454F) !important; border-color: var(--System-Black, #36454F) !important; color: #FFFFFF !important; } /* Work page: ensure nav link hover is black-tinted even when header is inverted */ .home-page .header-bar.invert .nav-link:hover { mix-blend-mode: normal; /* avoid difference blending turning it white */ background-color: rgba(54, 69, 79, 0.10) !important; color: #FFFFFF !important; } /* Work page: when not inverted, keep the same black-tinted hover */ .home-page .header-bar:not(.invert) .nav-link:hover { background-color: rgba(54, 69, 79, 0.10) !important; color: #36454F !important; } /* Show pointer on clickable header items */ .header-bar .nav-link, .header-bar .download-resume-btn, .header-bar .mobile-menu-btn, .header-bar .logo-link { cursor: pointer; } /* Home page overrides use !important to defeat the custom-cursor auto rule */ .home-page .header-bar .nav-link, .home-page .header-bar .download-resume-btn, .home-page .header-bar .mobile-menu-btn, .home-page .header-bar .logo-link { cursor: pointer !important; } /* About page: Download Resume hover = white fill, dark text */ body.about-page .header-bar .download-resume-btn:hover { background-color: #FFFFFF !important; color: #36454F !important; border-color: #36454F !important; } body.about-page-v2 .citizenship-info, body.about-page-v2 .availability-info, body.about-page-v2 .copyright-info { color: #36454F; } body.about-page-v2 .citizenship-info .sf-location, body.about-page-v2 .citizenship-info .sf-meta, body.about-page-v2 .availability-info .rf-location, body.about-page-v2 .availability-info .rf-meta, body.about-page-v2 .copyright-info .copyright-text, body.about-page-v2 .copyright-info .copyright-name { color: #36454F; } body.about-page-v2 .citizenship-info .sf-meta, body.about-page-v2 .availability-info .rf-meta { color: rgba(54, 69, 79, 0.6); } .header-bar.header-bar--about-light { color: #36454F; } .header-bar.header-bar--about-light .nav-link { color: #36454F; } .header-bar.header-bar--about-light .nav-link::after { background: transparent; } .header-bar.header-bar--about-light .nav-link.nav-link-active::after { background: #36454F; } .header-bar.header-bar--about-light .download-resume-btn { border-color: #36454F; color: #36454F; } .header-bar.header-bar--about-light .download-resume-btn:hover { background-color: rgba(54, 69, 79, 0.10); color: #36454F; } .header-bar.header-bar--about-light .logo, .header-bar.header-bar--about-light .menu-icon { filter: brightness(0) saturate(100%) invert(22%) sepia(7%) saturate(1294%) hue-rotate(173deg) brightness(92%) contrast(87%); } .container { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; background-color: rgba(0, 0, 0, 0.3); /* Optional overlay for better text readability */ } header { text-align: center; margin-bottom: 2rem; } header h1 { font-size: 3rem; font-weight: 700; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); margin-bottom: 1rem; } main { max-width: 1200px; width: 100%; text-align: center; } .main-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; max-width: 1000px; margin: 0 auto; min-height: calc(100vh - 132px); padding-bottom: 132px; transform: translateY(-20px); transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); } .main-content.scrolled-away { opacity: 0; transform: translateY(-100px) scale(0.95); pointer-events: none; } .content-container-2 { text-align: center; margin-bottom: 15px; transition: all 0.7s cubic-bezier(0.4, 0.0, 0.2, 1); } /* New pre-rows block above the first hero row */ .content-container-0 { width: 100%; display: flex; align-items: center; justify-content: center; } .pre-rows { width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; /* center horizontally in container */ justify-content: center; /* center content vertically within space */ gap: clamp(4px, 0.8vw, 8px); } .pre-row { width: 100%; height: fit-content; display: flex; align-items: center; justify-content: center; padding: clamp(3px, 0.6vw, 6px) 0; } .pre-row-1 { display: grid; grid-template-columns: repeat(6, min-content); gap: clamp(2px, 0.5vw, 5px); padding: 0; /* override .pre-row padding */ } .pre-col { display: flex; align-items: center; justify-content: center; min-height: clamp(24px, 4vw, 40px); border-radius: 0; border: none; padding: 0; /* ensure no internal padding */ width: fit-content; color: var(--System-White, #FFF); text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(14px, 2vw, 20px); font-style: normal; font-weight: 500; line-height: 1.08; /* keep proportional to font-size */ } /* Prevent wrapping for Row 1 columns */ .pre-row-1 .pre-col { white-space: nowrap; } .pre-row-label { color: var(--System-White, #FFF); text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 21.6px; opacity: 0.8; } /* Row 2 wordmark sizing and instant hover swap */ .pre-row-2 { position: relative; cursor: pointer; } .pre-row-2 .pre-wordmark { pointer-events: none; } .pre-row-2 .pre-wordmark { height: clamp(40px, 7.6325vw, 76.325px); width: auto; display: block; } .pre-row-2 .wordmark-hover { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .pre-row-2:hover .wordmark-default { opacity: 0; } .pre-row-2:hover .wordmark-hover { opacity: 1; } /* Row 3 tagline typography */ .pre-row-3 { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.5vw, 18px); width: 100%; max-width: min(96vw, 1200px); margin: 0 auto; text-align: center; } .pre-row-3 .pre-line { display: block; white-space: nowrap; text-align: center; max-width: 96vw; overflow-wrap: anywhere; } .pre-row-3 .pre-regular, .pre-row-3 .pre-highlight { color: var(--System-White, #FFF); font-size: clamp(16px, min(3.6vw, 3.4rem), 56px); line-height: 0.5; display: inline; } @media (max-width: 960px) { .pre-row-3 .pre-regular, .pre-row-3 .pre-highlight { font-size: clamp(15px, 4vw, 44px); } } @media (max-width: 640px) { .pre-row-3 .pre-regular, .pre-row-3 .pre-highlight { font-size: clamp(15px, 5.4vw, 32px); } } @media (max-width: 768px) { .pre-row-3 { display: block; gap: 0; } .pre-row-3 .pre-line { display: inline; white-space: normal; max-width: 100%; overflow-wrap: normal; word-break: normal; } .pre-row-3 .pre-line + .pre-line::before { content: " "; } } .pre-row-3 .pre-regular { font-family: 'Cooper Light BT', "Plus Jakarta Sans", sans-serif; font-style: normal; font-weight: 300; } .pre-row-3 .pre-highlight { font-family: 'Cooper Light BT', "Plus Jakarta Sans", sans-serif; font-style: italic; font-weight: 300; } /* Row 4 chevron styles and gentle loop animation */ /* Row 4: 4x chevron size (height up to 100px), width fits content */ .pre-row-4 { width: fit-content; height: fit-content; padding: 0; /* override generic .pre-row padding */ } .pre-row-4 .pre-chevron { width: auto; height: clamp(25px, 10vw, 100px); /* responsive scaling */ display: block; } .pre-row-4 .pre-chevron path { stroke: var(--System-White, #FFF); stroke-width: 5px; vector-effect: non-scaling-stroke; /* keep stroke width constant when scaling */ } .pre-row-4 .pre-chevron { animation: pre-float 1.5s ease-in-out infinite; } @keyframes pre-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .content-container-2.scrolled-away { opacity: 0; transform: translateY(-90px) scale(0.9); } .carlos-wordmark { height: 80px; width: auto; max-width: 100%; margin: 0 auto; display: block; cursor: pointer; transition: opacity 0.2s ease-in-out; filter: brightness(0) invert(1); /* Makes SVG white (#FFFFFF) */ -webkit-filter: brightness(0) invert(1); /* Safari compatibility */ -moz-filter: brightness(0) invert(1); /* Firefox compatibility */ -ms-filter: brightness(0) invert(1); /* IE/Edge compatibility */ /* Re-enable pointer events for hover functionality */ pointer-events: auto; } /* Mobile responsiveness for carlos-wordmark */ /* (Removed breakpoint adjustments per request) */ .content-container-3 { text-align: center; margin-bottom: 25px; transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); } .content-container-3.scrolled-away { opacity: 0; transform: translateY(-100px) scale(0.9); } .content-container-4 { display: flex; justify-content: center; align-items: center; transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1); } .content-container-4.scrolled-away { opacity: 0; transform: translateY(-60px) scale(0.85); } .content-rectangle { position: fixed; left: -292px; bottom: 97.8px; width: 1359.039px; height: 765.626px; transform: rotate(0.903deg); flex-shrink: 0; border-radius: 20px; background: #FFF; box-shadow: 2px 2px 20px 10px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); z-index: 5; } .content-rectangle.visible { opacity: 1; visibility: visible; } /* Un-rotate the rectangle on About page only */ body.about-page .content-rectangle { transform: rotate(0deg); } /* About: iPhone-like message bubble centered in the rectangle */ body.about-page .project-frame { /* Override default sizing/offset for About */ width: 100%; height: 100%; margin: 0; transform: none; display: flex; align-items: center; justify-content: center; } /* Centered speech bubble (scoped to About) */ body.about-page .chat-section { max-width: 450px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } body.about-page .chat-section .clear { clear: both; } /* Base bubble styles */ /* New user message bubble (.from-me) */ :is(body.about-page, body.chatbot-enabled) .from-me { position: relative; align-self: flex-end; max-width: 70%; display: inline-block; padding: 15px 25px; background: #C9CEC9; /* full opacity per request */ border-radius: 20px; color: var(--System-Black, #36454F); font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 109.974%; letter-spacing: 0.28px; word-wrap: break-word; margin-right: 1px; /* shift bubble left by 1px */ } /* Tail for user bubble using provided SVG; size ~31.12 x 24 (original 32x24). Positioned bottom-right overlapping. */ :is(body.about-page, body.chatbot-enabled) .from-me:after { content: ""; position: absolute; width: 31.12px; height: 24px; bottom: 0; /* flush with bubble bottom */ right: -6.5px; /* moved 10px further left */ background: url('./chatbot/speech-tail.svg') no-repeat center / contain; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* ensure no extra shadow */ pointer-events: none; } /* Other party bubble placeholder (retain minimal style if needed) */ :is(body.about-page, body.chatbot-enabled) .from-them { display: inline-block; align-self: flex-start; background: rgba(255,255,255,0.15); padding: 10px 16px; border-radius: 16px; color: #fff; font-size: 13px; line-height: 1.2; } /* Bot reply tail (mirror of user tail on left side) */ :is(body.about-page, body.chatbot-enabled) .from-them { position: relative; max-width: 70%; width: -moz-fit-content; width: fit-content; background: #424949; /* updated fill */ padding: 12px 18px; border-radius: 18px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-weight: 400; color: #FFFFFF; } :is(body.about-page, body.chatbot-enabled) .from-them:after { content: ""; position: absolute; width: 31.12px; height: 24px; bottom: 0; left: -6px; /* moved 1px further left */ background: url('./chatbot/speech-tail-bot.svg') no-repeat center / contain; /* dark tail */ transform: scaleX(-1); /* mirror horizontally */ pointer-events: none; } /* About: Slope speech bubble */ /* Removed slope-bubble feature styles */ /* Removed message bubble overrides */ /* 1. Root container */ .project-frame { position: relative; box-sizing: border-box; width: 1077px; height: 767px; margin: 50px auto; transform: translate(140px, -45px); } /* 2. Background layer */ .background-layer { position: absolute; left: 0; top: 0; width: 1077px; height: 767px; } /* 3. Hero area */ .hero-headline { position: absolute; left: 50px; top: 121px; width: 635px; height: 72px; color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ transition: opacity 0.3s ease; } .hero-serif { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } /* Container for all pill sets */ .pill-container { position: relative; height: 42px; } .pill-filter-row { position: absolute; top: 0; left: 0; width: fit-content; height: 42px; display: flex; gap: 10px; opacity: 0; transition: opacity 0.3s ease; } /* All pill sets hidden by default */ .pill-set-1, .pill-set-2, .pill-set-3, .pill-set-4 { opacity: 0; } .pill-button { position: relative; display: flex; justify-content: center; align-items: center; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; font-size: 14px; line-height: 22px; height: 42px; border-radius: 25px; /* Text color - visible by default */ color: #4079ff; /* Animated gradient text overlay */ background: linear-gradient( 90deg, var(--gradient-colors) ); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: pill-gradient-animation var(--animation-duration) linear infinite; /* Gradient border animation properties */ --gradient-colors: #40ffaa, #4079ff, #ff4079, #40ffaa; --animation-duration: 3s; --border-width: 1.25px; --border-radius: 25px; } .pill-button::before { content: ""; position: absolute; top: calc(-1 * var(--border-width)); left: calc(-1 * var(--border-width)); right: calc(-1 * var(--border-width)); bottom: calc(-1 * var(--border-width)); background: linear-gradient( 90deg, var(--gradient-colors) ); background-size: 300% 300%; animation: pill-gradient-animation var(--animation-duration) linear infinite; border-radius: var(--border-radius); z-index: 0; } .pill-button::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; border-radius: calc(var(--border-radius) - var(--border-width)); z-index: 1; } .pill-button > * { position: relative; z-index: 2; } /* Row 1 pill widths: Product Design, Product Management, Web Dashboard */ .pill-1-1 { width: 133px; } .pill-1-2 { width: 175px; } .pill-1-3 { width: 135px; } /* Row 2 pill widths: Product Design, User Research, iOS */ .pill-2-1 { width: 133px; } .pill-2-2 { width: 125px; } .pill-2-3 { width: 54px; } /* Row 3 pill widths: Management Consulting, Design Strategy, User Research */ .pill-3-1 { width: 210px; } .pill-3-2 { width: 135px; } .pill-3-3 { width: 125px; } /* Row 4 pill widths: Product Management, Product Design, UI/UX */ .pill-4-1 { width: 175px; } .pill-4-2 { width: 133px; } .pill-4-3 { width: 70px; } .carlos-stamp { position: absolute; left: 795px; top: 6px; width: 240px; height: 210px; background-image: url('logos/stamps/carlos-stamp.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 40; animation: stamp-press 1.2s ease-out 0.5s both !important; } .dbc-stamp { position: absolute; left: 919px; top: 136px; width: 120px; height: 130px; background-image: url('logos/stamps/dbc-stamp.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 30; animation: stamp-press 1.2s ease-out 0.8s both !important; } .line-stamp { position: absolute; left: 804.83px; top: 155.66px; width: 139.07px; height: 75.93px; background-image: url('logos/stamps/line-stamp.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 20; animation: stamp-press-line 1.2s ease-out 1.1s both; } .stamp-outline { position: absolute; left: 912px; top: 35px; width: 125px; height: 160px; transform: rotate(0deg); background-image: url('logos/stamps/stamp-outline.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 10; } /* 4. Information block */ .project-subtitle { position: absolute; left: 50px; top: 208px; width: 600px; height: 72px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-size: 16px; line-height: 24px; color: #7C7C81; } .subtitle-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease; } .subtitle-content.default-content { opacity: 1; } .metadata-chip { position: relative; display: flex; flex-direction: column; gap: 4px; width: fit-content; } .chip-label { color: #7C7C81; font-family: Manrope; font-size: 14px; font-style: normal; font-weight: 500; line-height: 20px; /* 142.857% */ letter-spacing: 0.28px; white-space: nowrap; } .chip-content { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 14px; font-style: normal; font-weight: 600; line-height: 20px; letter-spacing: 0.28px; white-space: nowrap; position: relative; min-width: max-content; } .results-content, .shipped-content, .industry-content { display: none; white-space: nowrap; } .results-content.default-content, .shipped-content.default-content, .industry-content.default-content { display: block; } /* Metadata chips container */ .metadata-chips-container { position: absolute; left: 50px; top: 312px; display: flex; gap: 40px; align-items: flex-start; } /* 5. Section divider */ .blue-highlight-bar { position: absolute; left: 40px; top: 423px; width: 997px; height: 70px; background: rgba(66, 133, 244, 0.1); } /* Hover highlight bars for each row - properly aligned */ .project-frame .row-hover-1, .project-frame .row-hover-2, .project-frame .row-hover-3, .project-frame .row-hover-4 { position: absolute; left: 40px; width: 997px; height: 70px; background: transparent; z-index: 10; cursor: pointer; pointer-events: auto; } .row-hover-1 { top: 423px; } .row-hover-2 { top: 496px; } .row-hover-3 { top: 569px; } .row-hover-4 { top: 642px; } /* Blue highlight backgrounds */ .row-hover-1:hover { background: rgba(66, 133, 244, 0.1); } .row-hover-2:hover { background: rgba(66, 133, 244, 0.1); } .row-hover-3:hover { background: rgba(66, 133, 244, 0.1); } .row-hover-4:hover { background: rgba(66, 133, 244, 0.1); } /* Background image changes on project row hover */ body:has(.row-hover-1:hover) { background-image: linear-gradient(0deg, rgba(54, 69, 79, 0.75) 0%, rgba(54, 69, 79, 0.38) 50%, rgba(54, 69, 79, 0.75) 100%), url('images/background-home-mileiq-1.png'); } body:has(.row-hover-2:hover) { background-image: linear-gradient(0deg, rgba(54, 69, 79, 0.75) 0%, rgba(54, 69, 79, 0.38) 50%, rgba(54, 69, 79, 0.75) 100%), url('images/background-home-mileiq-2.png'); } body:has(.row-hover-3:hover) { background-image: linear-gradient(0deg, rgba(54, 69, 79, 0.75) 0%, rgba(54, 69, 79, 0.38) 50%, rgba(54, 69, 79, 0.75) 100%), url('images/background-home-bcg.png'); } body:has(.row-hover-4:hover) { background-image: linear-gradient(0deg, rgba(54, 69, 79, 0.75) 0%, rgba(54, 69, 79, 0.38) 50%, rgba(54, 69, 79, 0.75) 100%), url('images/background-home-pain.png'); } /* Hover stamps - independent positioning and sizing */ .san-fran-stamp { position: absolute; left: 795px; top: 6px; width: 240px; height: 210px; transform: rotate(0deg); background-image: url('logos/stamps/san-fran-stamp.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 40; opacity: 0; transition: opacity 0.3s ease; } .mile-iq-1-stamp { position: absolute; left: 890px; top: 136px; width: 160px; height: 160px; transform: rotate(0deg); background-image: url('logos/stamps/mile-iq-1-stamp.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 30; opacity: 0; transition: opacity 0.3s ease; border: none; outline: none; } .new-york-stamp { position: absolute; left: 825px; top: 25px; width: 175px; height: 160px; transform: rotate(0deg); background-image: url('logos/stamps/new-york-stamp.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 40; opacity: 0; transition: opacity 0.3s ease; } .hudson-yards-stamp { position: absolute; left: 910px; top: 115px; width: 160px; height: 150px; transform: rotate(0deg); background-image: url('logos/stamps/hudson-yards-stamp.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 30; opacity: 0; transition: opacity 0.3s ease; } .ualberta-stamp { position: absolute; left: 815px; top: 6px; width: 170px; height: 170px; transform: rotate(0deg); background-image: url('logos/stamps/ualberta-stamp.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 40; opacity: 0; transition: opacity 0.3s ease; } .yeg-stamp { position: absolute; left: 905px; top: 110px; width: 150px; height: 150px; transform: rotate(15deg); background-image: url('logos/stamps/yeg-stamp.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 30; opacity: 0; transition: opacity 0.3s ease; } /* Stamp hover effects - show/hide independent stamps */ /* Row 1 or 2 hover: show san-fran-stamp and mile-iq-1-stamp */ .row-hover-1:hover ~ .carlos-stamp, .row-hover-2:hover ~ .carlos-stamp { opacity: 0 !important; } .row-hover-1:hover ~ .dbc-stamp, .row-hover-2:hover ~ .dbc-stamp { opacity: 0 !important; } .row-hover-1:hover ~ .san-fran-stamp, .row-hover-2:hover ~ .san-fran-stamp { opacity: 1 !important; animation: stamp-press 1.2s ease-out 0s both; } .row-hover-1:hover ~ .mile-iq-1-stamp, .row-hover-2:hover ~ .mile-iq-1-stamp { opacity: 1 !important; animation: stamp-press 1.2s ease-out 0.3s both; } /* Row 3 hover: show new-york-stamp and hudson-yards-stamp */ .row-hover-3:hover ~ .carlos-stamp { opacity: 0 !important; } .row-hover-3:hover ~ .dbc-stamp { opacity: 0 !important; } .row-hover-3:hover ~ .new-york-stamp { opacity: 1 !important; animation: stamp-press 1.2s ease-out 0s both; } .row-hover-3:hover ~ .hudson-yards-stamp { opacity: 1 !important; animation: stamp-press 1.2s ease-out 0.3s both; } /* Row 4 hover: show ualberta-stamp and yeg-stamp */ .row-hover-4:hover ~ .carlos-stamp { opacity: 0 !important; } .row-hover-4:hover ~ .dbc-stamp { opacity: 0 !important; } .row-hover-4:hover ~ .ualberta-stamp { opacity: 1 !important; animation: stamp-press 1.2s ease-out 0s both; } .row-hover-4:hover ~ .yeg-stamp { opacity: 1 !important; animation: stamp-press 1.2s ease-out 0.3s both; } .top-dividing-line { position: absolute; left: 40px; top: 423px; width: 997px; height: 0; border-top: 1.25px solid #36454F; } .section-heading { position: absolute; left: 50px; top: 401px; font-family: "Instrument Serif", Georgia, 'Times New Roman', Times, serif; font-weight: 400; font-size: 16px; line-height: 22px; color: #36454F; } .column-heading { position: absolute; top: 401px; font-family: "Instrument Serif", Georgia, 'Times New Roman', Times, serif; font-weight: 400; font-size: 16px; line-height: 22px; color: #36454F; text-align: center; } .role-heading { left: 503px; } .client-heading { left: 846px; } /* 6. Project list */ .project-row { position: absolute; height: 40px; } .row-1 { top: 438px; } .row-2 { top: 511px; } .row-3 { top: 584px; } .row-4 { top: 657px; } .project-description { position: absolute; left: 50px; width: 353px; height: 40px; color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; /* 125% */ display: block; align-items: center; } .description-serif { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 18px; font-style: italic; font-weight: 400; line-height: 20px; display: inline; } .project-role { position: absolute; left: 503px; width: 232px; height: 40px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; display: flex; align-items: center; } .project-client-logo { position: absolute; left: 846px; background-size: contain; background-repeat: no-repeat; background-position: left center; } /* Individual client logo styling with unique sizes and vertical centering */ .mile-iq-logo { width: 160px; height: 27px; top: 6.5px; /* (40px row height - 27px logo height) / 2 */ background-image: url('logos/client/mile-iq-logo-client-grey.svg'); filter: brightness(0) saturate(100%) invert(18%) sepia(13%) saturate(1180%) hue-rotate(165deg) brightness(93%) contrast(95%); } .bcg-logo { width: 140px; height: 30px; top: 5px; /* (40px row height - 30px logo height) / 2 */ background-image: url('logos/client/bcg-bcgx-client-grey.svg'); filter: brightness(0) saturate(100%) invert(18%) sepia(13%) saturate(1180%) hue-rotate(165deg) brightness(93%) contrast(95%); } .dhril-logo { width: 140px; height: 25px; top: 7.5px; /* (40px row height - 25px logo height) / 2 */ background-image: url('logos/client/dhril-logo-client-grey.svg'); filter: brightness(0) saturate(100%) invert(18%) sepia(13%) saturate(1180%) hue-rotate(165deg) brightness(93%) contrast(95%); } /* Hover state - colored logos */ .row-hover-1:hover ~ .row-1 .mile-iq-logo, .row-hover-2:hover ~ .row-2 .mile-iq-logo { background-image: url('logos/client/mile-iq-logo-client-color.svg'); filter: none; } .row-hover-3:hover ~ .row-3 .bcg-logo { background-image: url('logos/client/bcg-bcgx-client-color.svg'); filter: none; } .row-hover-4:hover ~ .row-4 .dhril-logo { background-image: url('logos/client/dhril-logo-client-color.svg'); filter: none; } /* When any specific row is hovered, make all OTHER row logos light gray */ .row-hover-1:hover ~ .row-2 .mile-iq-logo, .row-hover-1:hover ~ .row-3 .bcg-logo, .row-hover-1:hover ~ .row-4 .dhril-logo, .row-hover-2:hover ~ .row-1 .mile-iq-logo, .row-hover-2:hover ~ .row-3 .bcg-logo, .row-hover-2:hover ~ .row-4 .dhril-logo, .row-hover-3:hover ~ .row-1 .mile-iq-logo, .row-hover-3:hover ~ .row-2 .mile-iq-logo, .row-hover-3:hover ~ .row-4 .dhril-logo, .row-hover-4:hover ~ .row-1 .mile-iq-logo, .row-hover-4:hover ~ .row-2 .mile-iq-logo, .row-hover-4:hover ~ .row-3 .bcg-logo { filter: brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(186%) hue-rotate(212deg) brightness(95%) contrast(85%); } /* Default state - all rows System-Black */ .project-description, .project-role { color: var(--System-Black, #36454F); } /* Hover states triggered by row-hover areas */ .row-hover-1:hover ~ .row-1 .project-description, .row-hover-1:hover ~ .row-1 .project-description .description-serif { color: var(--System-Blue, #4285F4); } .row-hover-1:hover ~ .row-1 .project-role { color: var(--System-Black, #36454F); } .row-hover-2:hover ~ .row-2 .project-description, .row-hover-2:hover ~ .row-2 .project-description .description-serif { color: var(--System-Blue, #4285F4); } .row-hover-2:hover ~ .row-2 .project-role { color: var(--System-Black, #36454F); } .row-hover-3:hover ~ .row-3 .project-description, .row-hover-3:hover ~ .row-3 .project-description .description-serif { color: var(--System-Blue, #4285F4); } .row-hover-3:hover ~ .row-3 .project-role { color: var(--System-Black, #36454F); } .row-hover-4:hover ~ .row-4 .project-description, .row-hover-4:hover ~ .row-4 .project-description .description-serif { color: var(--System-Blue, #4285F4); } .row-hover-4:hover ~ .row-4 .project-role { color: var(--System-Black, #36454F); } /* When any specific row is hovered, make all OTHER rows light gray */ .row-hover-1:hover ~ .row-2 .project-description, .row-hover-1:hover ~ .row-2 .project-description .description-serif, .row-hover-1:hover ~ .row-2 .project-role, .row-hover-1:hover ~ .row-3 .project-description, .row-hover-1:hover ~ .row-3 .project-description .description-serif, .row-hover-1:hover ~ .row-3 .project-role, .row-hover-1:hover ~ .row-4 .project-description, .row-hover-1:hover ~ .row-4 .project-description .description-serif, .row-hover-1:hover ~ .row-4 .project-role, .row-hover-2:hover ~ .row-1 .project-description, .row-hover-2:hover ~ .row-1 .project-description .description-serif, .row-hover-2:hover ~ .row-1 .project-role, .row-hover-2:hover ~ .row-3 .project-description, .row-hover-2:hover ~ .row-3 .project-description .description-serif, .row-hover-2:hover ~ .row-3 .project-role, .row-hover-2:hover ~ .row-4 .project-description, .row-hover-2:hover ~ .row-4 .project-description .description-serif, .row-hover-2:hover ~ .row-4 .project-role, .row-hover-3:hover ~ .row-1 .project-description, .row-hover-3:hover ~ .row-1 .project-description .description-serif, .row-hover-3:hover ~ .row-1 .project-role, .row-hover-3:hover ~ .row-2 .project-description, .row-hover-3:hover ~ .row-2 .project-description .description-serif, .row-hover-3:hover ~ .row-2 .project-role, .row-hover-3:hover ~ .row-4 .project-description, .row-hover-3:hover ~ .row-4 .project-description .description-serif, .row-hover-3:hover ~ .row-4 .project-role, .row-hover-4:hover ~ .row-1 .project-description, .row-hover-4:hover ~ .row-1 .project-description .description-serif, .row-hover-4:hover ~ .row-1 .project-role, .row-hover-4:hover ~ .row-2 .project-description, .row-hover-4:hover ~ .row-2 .project-description .description-serif, .row-hover-4:hover ~ .row-2 .project-role, .row-hover-4:hover ~ .row-3 .project-description, .row-hover-4:hover ~ .row-3 .project-description .description-serif, .row-hover-4:hover ~ .row-3 .project-role { color: var(--system-gray-light, #D9D9D9); } /* Row separators */ .row-separator { position: absolute; left: 40px; width: 997px; height: 0; border-top: 1.25px solid var(--System-Black, #36454F); transition: border-color 0.2s ease; } .sep-1 { top: 493px; } .sep-2 { top: 566px; } .sep-3 { top: 639px; } .sep-4 { top: 712px; } /* Row 1 hover: sep-1 blue, all others gray (except top-dividing-line stays black) */ .row-hover-1:hover ~ .sep-1 { border-color: var(--System-Blue, #4285F4); } .row-hover-1:hover ~ .line-7, .row-hover-1:hover ~ .sep-2, .row-hover-1:hover ~ .line-8, .row-hover-1:hover ~ .line-9, .row-hover-1:hover ~ .line-10, .row-hover-1:hover ~ .sep-3, .row-hover-1:hover ~ .sep-4, .row-hover-1:hover ~ .line-6 { border-color: var(--system-gray-light, #D9D9D9); } /* Row 2 hover: line-7 and sep-2 blue, all others gray (except top-dividing-line stays black) */ .row-hover-2:hover ~ .line-7, .row-hover-2:hover ~ .sep-2 { border-color: var(--System-Blue, #4285F4); } .row-hover-2:hover ~ .sep-1, .row-hover-2:hover ~ .line-8, .row-hover-2:hover ~ .line-9, .row-hover-2:hover ~ .line-10, .row-hover-2:hover ~ .sep-3, .row-hover-2:hover ~ .sep-4, .row-hover-2:hover ~ .line-6 { border-color: var(--system-gray-light, #D9D9D9); } /* Row 3 hover: line-8, line-9 blue, all others gray (except top-dividing-line stays black) */ .row-hover-3:hover ~ .line-8, .row-hover-3:hover ~ .line-9 { border-color: var(--System-Blue, #4285F4); } .row-hover-3:hover ~ .sep-1, .row-hover-3:hover ~ .line-7, .row-hover-3:hover ~ .sep-2, .row-hover-3:hover ~ .line-10, .row-hover-3:hover ~ .sep-3, .row-hover-3:hover ~ .sep-4, .row-hover-3:hover ~ .line-6 { border-color: var(--system-gray-light, #D9D9D9); } /* Row 4 hover: line-10, sep-4, line-6 blue, all others gray (except top-dividing-line stays black) */ .row-hover-4:hover ~ .line-10, .row-hover-4:hover ~ .sep-4, .row-hover-4:hover ~ .line-6 { border-color: var(--System-Blue, #4285F4); } .row-hover-4:hover ~ .sep-1, .row-hover-4:hover ~ .line-7, .row-hover-4:hover ~ .sep-2, .row-hover-4:hover ~ .line-8, .row-hover-4:hover ~ .line-9, .row-hover-4:hover ~ .sep-3 { border-color: var(--system-gray-light, #D9D9D9); } /* Exception: Top dividing line always stays black */ .top-dividing-line { border-color: #36454F !important; } /* Hero visual container with logo and pills */ .hero-visual-container { position: absolute; left: 50px; top: 60px; display: flex; align-items: center; gap: 20px; opacity: 0; z-index: 1; transition: opacity 0.3s ease; } /* Hero client logo that changes on hover */ .hero-client-logo { position: relative; height: 30px; display: flex; align-items: center; transition: width 0.3s ease; } .client-logo-content { position: absolute; left: 0; top: 0; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: left center; opacity: 0; transition: opacity 0.3s ease; } .client-logo-content.default-logo { opacity: 0; } /* Hero logos - using dedicated hero versions */ .mile-iq-hero-logo { background-image: url('logos/hero/mile-iq-logo-hero.svg'); width: 100%; } .bcg-hero-logo { background-image: url('logos/hero/bcg-x-logo-hero.svg'); width: 100%; } .dhril-hero-logo { background-image: url('logos/hero/dhril-logo-hero.svg'); width: 100%; } /* Colored versions for hover states use the same hero logos */ .mile-iq-hero-logo.colored { background-image: url('logos/hero/mile-iq-logo-hero.svg'); width: 100%; } .bcg-hero-logo.colored { background-image: url('logos/hero/bcg-x-logo-hero.svg'); width: 100%; } .dhril-hero-logo.colored { background-image: url('logos/hero/dhril-logo-hero.svg'); width: 100%; } /* Client logo hover states with dynamic container sizing */ .row-hover-1:hover ~ .hero-visual-container .hero-client-logo { width: 150px; /* MileIQ logo width - adjusted for hero version */ } .row-hover-1:hover ~ .hero-visual-container .hero-client-logo .default-logo { opacity: 0; } .row-hover-1:hover ~ .hero-visual-container .hero-client-logo .hover-logo-1 { opacity: 1; } .row-hover-2:hover ~ .hero-visual-container .hero-client-logo { width: 150px; /* MileIQ logo width - adjusted for hero version */ } .row-hover-2:hover ~ .hero-visual-container .hero-client-logo .default-logo { opacity: 0; } .row-hover-2:hover ~ .hero-visual-container .hero-client-logo .hover-logo-2 { opacity: 1; } .row-hover-3:hover ~ .hero-visual-container .hero-client-logo { width: 150px; /* BCG logo width */ } .row-hover-3:hover ~ .hero-visual-container .hero-client-logo .default-logo { opacity: 0; } .row-hover-3:hover ~ .hero-visual-container .hero-client-logo .hover-logo-3 { opacity: 1; } .row-hover-4:hover ~ .hero-visual-container .hero-client-logo { width: 150px; /* DHRIL logo width */ } .row-hover-4:hover ~ .hero-visual-container .hero-client-logo .default-logo { opacity: 0; } .row-hover-4:hover ~ .hero-visual-container .hero-client-logo .hover-logo-4 { opacity: 1; } /* Hero headline changes on row hover - proper typography approach */ .hero-headline { z-index: 1; } .hero-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; opacity: 0; transition: opacity 0.3s ease; } .hero-content.default-content { opacity: 1; } .hero-content .hero-serif { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } /* Show specific hover content and hide default */ .row-hover-1:hover ~ .hero-headline .default-content { opacity: 0; } .row-hover-1:hover ~ .hero-headline .hover-content-1 { opacity: 1; } .row-hover-2:hover ~ .hero-headline .default-content { opacity: 0; } .row-hover-2:hover ~ .hero-headline .hover-content-2 { opacity: 1; } .row-hover-3:hover ~ .hero-headline .default-content { opacity: 0; } .row-hover-3:hover ~ .hero-headline .hover-content-3 { opacity: 1; } .row-hover-4:hover ~ .hero-headline .default-content { opacity: 0; } .row-hover-4:hover ~ .hero-headline .hover-content-4 { opacity: 1; } /* Project subtitle hover states */ .row-hover-1:hover ~ .project-subtitle .default-content { opacity: 0; } .row-hover-1:hover ~ .project-subtitle .hover-content-1 { opacity: 1; } .row-hover-2:hover ~ .project-subtitle .default-content { opacity: 0; } .row-hover-2:hover ~ .project-subtitle .hover-content-2 { opacity: 1; } .row-hover-3:hover ~ .project-subtitle .default-content { opacity: 0; } .row-hover-3:hover ~ .project-subtitle .hover-content-3 { opacity: 1; } .row-hover-4:hover ~ .project-subtitle .default-content { opacity: 0; } .row-hover-4:hover ~ .project-subtitle .hover-content-4 { opacity: 1; } /* Results chip content hover states */ .row-hover-1:hover ~ .metadata-chips-container .results-chip .chip-content .default-content { display: none; } .row-hover-1:hover ~ .metadata-chips-container .results-chip .chip-content .hover-content-1 { display: block; } .row-hover-2:hover ~ .metadata-chips-container .results-chip .chip-content .default-content { display: none; } .row-hover-2:hover ~ .metadata-chips-container .results-chip .chip-content .hover-content-2 { display: block; } .row-hover-3:hover ~ .metadata-chips-container .results-chip .chip-content .default-content { display: none; } .row-hover-3:hover ~ .metadata-chips-container .results-chip .chip-content .hover-content-3 { display: block; } .row-hover-4:hover ~ .metadata-chips-container .results-chip .chip-content .default-content { display: none; } .row-hover-4:hover ~ .metadata-chips-container .results-chip .chip-content .hover-content-4 { display: block; } /* Shipped chip content hover states */ .row-hover-1:hover ~ .metadata-chips-container .shipped-chip .chip-content .default-content { display: none; } .row-hover-1:hover ~ .metadata-chips-container .shipped-chip .chip-content .hover-content-1 { display: block; } .row-hover-2:hover ~ .metadata-chips-container .shipped-chip .chip-content .default-content { display: none; } .row-hover-2:hover ~ .metadata-chips-container .shipped-chip .chip-content .hover-content-2 { display: block; } .row-hover-3:hover ~ .metadata-chips-container .shipped-chip .chip-content .default-content { display: none; } .row-hover-3:hover ~ .metadata-chips-container .shipped-chip .chip-content .hover-content-3 { display: block; } .row-hover-4:hover ~ .metadata-chips-container .shipped-chip .chip-content .default-content { display: none; } .row-hover-4:hover ~ .metadata-chips-container .shipped-chip .chip-content .hover-content-4 { display: block; } /* Industry chip content hover states */ .row-hover-1:hover ~ .metadata-chips-container .industry-chip .chip-content .default-content { display: none; } .row-hover-1:hover ~ .metadata-chips-container .industry-chip .chip-content .hover-content-1 { display: block; } .row-hover-2:hover ~ .metadata-chips-container .industry-chip .chip-content .default-content { display: none; } .row-hover-2:hover ~ .metadata-chips-container .industry-chip .chip-content .hover-content-2 { display: block; } .row-hover-3:hover ~ .metadata-chips-container .industry-chip .chip-content .default-content { display: none; } .row-hover-3:hover ~ .metadata-chips-container .industry-chip .chip-content .hover-content-3 { display: block; } .row-hover-4:hover ~ .metadata-chips-container .industry-chip .chip-content .default-content { display: none; } .row-hover-4:hover ~ .metadata-chips-container .industry-chip .chip-content .hover-content-4 { display: block; } /* Dynamic spacing now handled by flex container with 40px gap */ /* Additional design lines from specification */ .design-line { position: absolute; left: 40px; width: 997px; height: 0; transition: border-color 0.2s ease; } /* Line 7 - top: 496px with black border (becomes blue on row 2 hover) */ .line-7 { top: 496px; border-top: 1.25px solid #36454F; transition: border-color 0.2s ease; } /* Line 8 - top: 569px with blue border (becomes blue on row 3 hover) */ .line-8 { top: 569px; border-top: 1.25px solid #36454F; transition: border-color 0.2s ease; } /* Line 9 - top: 639px with blue border (becomes blue on row 3 hover) */ .line-9 { top: 639px; border-top: 1.25px solid #36454F; transition: border-color 0.2s ease; } /* Line 10 - top: 642px (3px below Row 3) */ .line-10 { top: 642px; border-top: 1.25px solid #36454F; transition: border-color 0.2s ease; } /* Line 6 - top: 712px with black border */ .line-6 { top: 712px; border-top: 1.25px solid #36454F; } /* 7. Footer */ .footer-text { position: absolute; left: 40px; top: 718px; width: 174px; height: 20px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; color: #36454F; display: flex; align-items: center; } /* 8. Decorative stamp cluster */ .logo-ticker { position: fixed; bottom: 90px; left: 0; width: 100vw; height: 38.546px; overflow: hidden; z-index: 2; opacity: 0; visibility: hidden; transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1); } .logo-ticker.visible { opacity: 1; visibility: visible; } .ticker-track { display: flex; align-items: center; gap: 62.5px; height: 100%; animation: scroll-left 60s linear infinite; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-2984.758px); } } .ticker-logo { height: 38.546px; width: auto; flex-shrink: 0; object-fit: contain; } .content-container-1 { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 25px; transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1); } .content-container-1.scrolled-away { opacity: 0; transform: translateY(-80px) scale(0.9); } .product-text, .prev-text, .comma-text { color: var(--System-White, #FFF); text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-style: normal; font-weight: 500; line-height: 21.6px; /* 108% */ } .comma-text { margin: 0; flex-shrink: 0; min-width: 12px; display: inline-block; text-align: center; /* Inherit typography from shared rule above for consistent sizing */ z-index: 10; position: relative; } .penn-logo-splash { height: clamp(14px, 2.0833vw, 20.833px); width: auto; } .bcg-logo-splash { height: clamp(14px, 2.0833vw, 20.833px); width: auto; } .mile-iq-logo-splash { height: clamp(14px, 2.0833vw, 20.833px); width: auto; margin-left: 0; } /* Row 1 specific override: Column 6 MileIQ logo height */ .pre-row-1 .mile-iq-logo-splash { height: clamp(18px, 2.75vw, 27.5px); width: auto; } .intro-text { color: #FFF; text-align: center; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 96px; font-style: normal; font-weight: 300; line-height: 125%; } .name-text { color: #FFF; font-family: "Instrument Serif", Georgia, 'Times New Roman', Times, serif; font-size: 96px; font-style: italic; font-weight: 400; line-height: 125%; } .regular-text { color: #FFF; text-align: center; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 56px; font-style: normal; font-weight: 300; line-height: 125%; } .highlight-text { color: #FFF; font-family: "Instrument Serif", Georgia, 'Times New Roman', Times, serif; font-size: 64px; font-style: normal; font-weight: 400; line-height: 125%; } /* Override tagline typography just on the home hero line */ .content-container-3 .regular-text { color: var(--System-White, #FFF); text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 56px; font-style: normal; font-weight: 300; line-height: 125%; } .content-container-3 .highlight-text { color: var(--System-White, #FFF); text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 56px; font-style: italic; font-weight: 500; line-height: 125%; } .chevron-icon { width: 100px; height: 100px; cursor: pointer; animation: float 3s ease-in-out infinite; pointer-events: auto; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes pill-gradient-animation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .chevron-icon:hover { animation-play-state: running; transform: translateY(10px); } .citizenship-info { position: fixed; left: 35px; bottom: 20px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; line-height: 21.6px; z-index: 10; text-align: left; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } /* SF footer styles */ .sf-location { color: var(--System-White, #FFF); font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 21.6px; /* 135% */ } .sf-meta { color: rgba(255, 255, 255, 0.60); font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-style: normal; font-weight: 300; line-height: 21.6px; } .copyright-info { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); font-size: 14px; line-height: 21.6px; /* 154.286% */ z-index: 10; text-align: center; } /* Home page chip group 10px above center footer */ body.home-page .center-chip-group { position: fixed; left: 50%; bottom: 50px; /* 20px footer baseline + 10px gap + ~20px chip height offset */ transform: translateX(-50%); display: inline-flex; align-items: center; gap: 15px; z-index: 11; /* above footer */ } body.home-page .center-chip { display: flex; padding: 10px 20px; justify-content: center; align-items: center; gap: 10px; border-radius: 10px; border: 2px dashed #FFF; color: var(--System-White, #FFF); text-align: center; font-family: "Plus Jakarta Sans"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; /* 142.857% */ letter-spacing: 0.28px; white-space: nowrap; } body.home-page .center-chip.active { border: 2px solid #FFF; background: #FFF; color: #36454F; } .copyright-text { color: var(--System-White, #FFF); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 300; font-style: normal; } .copyright-name { color: var(--System-White, #FFF); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 300; font-style: italic; } .availability-info { position: fixed; right: 35px; bottom: 20px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; line-height: 21.6px; z-index: 10; text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; } /* Chatbot avatar above right footer */ :is(body.about-page, body.chatbot-enabled) .chatbot-avatar { position: fixed; right: 35px; /* align with footer right edge */ bottom: 90px; /* 90px from bottom edge */ transform: none; /* no vertical offset */ width: 72px; height: auto; z-index: 100050; /* above site UI */ pointer-events: auto; /* allow hover */ user-select: none; transition: filter 0.25s ease; cursor: pointer; } :is(body.about-page, body.chatbot-enabled) .chatbot-avatar:hover { animation: chatbot-avatar-pulse 1.6s ease-in-out infinite; } @keyframes chatbot-avatar-pulse { 0% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); } 50% { filter: drop-shadow(0 0 12px rgba(255,255,255,0.4)); } 100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); } } /* Minimal Apple-like liquid glass rectangle */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel { position: fixed; right: 35px; /* Place panel 10px above the avatar (avatar bottom:90px, avatar height:72px) => 90 + 72 + 10 = 172px */ bottom: 172px; width: 30vw; min-width: 440px; max-width: 560px; height: 60vh; min-height: 340px; border-radius: 24px; background: /* Frosted texture overlay */ radial-gradient(circle at 15% 15%, rgba(255,255,255,0.15), rgba(255,255,255,0) 40%), radial-gradient(circle at 85% 20%, rgba(255,255,255,0.12), rgba(255,255,255,0) 35%), radial-gradient(circle at 25% 80%, rgba(255,255,255,0.18), rgba(255,255,255,0) 45%), radial-gradient(circle at 75% 85%, rgba(255,255,255,0.14), rgba(255,255,255,0) 38%), /* Original gradients enhanced */ linear-gradient(145deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0.22) 68%, rgba(255,255,255,0.08) 100%), radial-gradient(at 20% 5%, rgba(255,255,255,0.45), rgba(255,255,255,0) 62%), radial-gradient(at 78% 92%, rgba(255,255,255,0.28), rgba(255,255,255,0) 66%), rgba(255,255,255,0.09); backdrop-filter: blur(22px) saturate(1.6) contrast(1.25) brightness(1.08); -webkit-backdrop-filter: blur(22px) saturate(1.6) contrast(1.25) brightness(1.08); border: 1px solid rgba(255,255,255,0.28); /* Enhanced frost grain texture */ mask-image: radial-gradient(circle at 25% 25%, rgba(0,0,0,0.88), rgba(0,0,0,0.96) 50%, rgba(0,0,0,0.98) 80%), radial-gradient(circle at 75% 75%, rgba(0,0,0,0.90), rgba(0,0,0,0.97) 60%); box-shadow: 0 4px 18px -4px rgba(0,0,0,0.55), 0 2px 4px -2px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.18) inset; opacity: 0; transform: translateY(14px) scale(.94); filter: blur(6px) saturate(1.6); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1), filter .65s cubic-bezier(.22,.61,.36,1), bottom .55s cubic-bezier(.4,0,.2,1); will-change: opacity, transform, filter, bottom; pointer-events: none; z-index: 100060; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel.open { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) saturate(1.8); pointer-events: auto; } /* Maintain 10px gap relative to scaled avatar (original gap computed for full size) */ :is(body.about-page, body.chatbot-enabled).ai-panel-open .liquid-glass-panel { bottom: 136px; /* 90px baseline + (72px * .5 scale) + 10px gap */ } /* Panel internal layout */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-rows { position: relative; display: flex; flex-direction: column; height: 100%; padding: 0 22px 22px 22px; /* restore side padding for rows except Row 1 */ --panel-xpad: 22px; /* use variable so Row 1 can bleed edge-to-edge mathematically */ font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; line-height: 1.3; color: rgba(255,255,255,0.88); } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row { backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 10px; border-radius: 12px; font-weight: 500; letter-spacing: .25px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row + .panel-row { margin-top: 10px; } /* Row 1: full-width, 140px tall, top-aligned with 25% tint */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top { width: 100%; align-self: stretch; height: auto; min-height: 140px; /* keep consistent header height */ padding: 0 var(--panel-xpad); /* inner content padding */ margin: 0; position: relative; left: calc(-1 * var(--panel-xpad)); width: calc(100% + (var(--panel-xpad) * 2)); /* bleed to both edges exactly */ background: linear-gradient(180deg, rgba(32,33,40,0.60) 0%, rgba(32,33,40,0) 100%); border: none; box-shadow: none; border-top-left-radius: 24px; border-top-right-radius: 24px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; /* Ensure the gradient doesn't interfere with glass effects */ overflow: hidden; } /* Layout for Row 1 internals */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top { display: flex; flex-direction: column; justify-content: center; gap: 8px; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .r1 { display: flex; justify-content: space-between; align-items: center; gap: 20px; } /* Top-right CTA square inside Row 1 */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top { position: relative; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .row1-cta { position: absolute; top: 10px; right: 10px; width: 42.88px; height: 42.88px; border-radius: 14px; background: transparent; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .row1-cta .x-close-icon { width: 24px; height: 24px; filter: brightness(0) invert(1); } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .r1 .c1, :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .r1 .c2, :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .r2 { color: rgba(255,255,255,0.88); font-weight: 600; font-family: "Plus Jakarta Sans", sans-serif; } /* C1: avatar head sizing and centering */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .r1 .c1 { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: -moz-fit-content; width: fit-content; padding: 20px 0; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .r1 .c1 .carlos-ai-head { height: 94px; width: auto; display: block; } /* C2: fills remaining space, with 40px right padding, two rows A/B */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .r1 .c2 { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 20px 40px 10px 0; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .r1 .c2 .c2-row-a { color: var(--System-Black, #36454F); font-family: 'Cooper Light BT', "Plus Jakarta Sans", sans-serif; font-size: clamp(18px, 22px, 24px); font-style: normal; font-weight: 500; line-height: 115%; letter-spacing: 0.48px; overflow-wrap: anywhere; word-break: break-word; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-top .r1 .c2 .c2-row-b { color: var(--System-Black, #36454F); font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(12px, 14px, 14px); font-style: normal; font-weight: 400; line-height: 135%; letter-spacing: 0.28px; opacity: .9; overflow-wrap: anywhere; word-break: break-word; } html.compact-mode .liquid-glass-panel .panel-row.panel-row-top .r1 .c2 .c2-row-a, html.compact-mode .liquid-glass-panel .panel-row.panel-row-top .r1 .c2 .c2-row-b { color: #FFFFFF !important; } html.compact-mode .pre-row-3 .compact-content .pre-highlight { font-style: normal; } /* Second row (panel-row-bottom-1) custom neutral style */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-1 { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 4px 10px; display: flex; justify-content: center; align-items: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 10px; font-style: normal; font-weight: 500; line-height: normal; color: var(--System-White, #FFF); text-align: center; letter-spacing: 0; } /* Spacer row (mid) grows to push bottom rows down */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row[data-spacer] { flex: 1 1 auto; padding: 0; background: transparent; border: 0; box-shadow: none; } /* Row 3 special formatting */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 { background: rgba(255, 255, 255, 0.50); border: 2px solid #DFDFDF; border-radius: 14px; display: flex; gap: 10px; width: 100%; padding: 10px 10px 10px 15px; /* adjusted per latest request */ box-shadow: none; align-items: flex-start; /* prevent stretching children vertically */ } /* Single line state centers Column 2 vertically; multi-line defaults to bottom alignment */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2.single-line > .row3-col-2 { align-self: center; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2:not(.single-line) > .row3-col-2 { align-self: flex-end; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2.single-line { align-items: center; } /* Panel message list styling */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages { display: block; /* wrapper handles flex */ overflow-y: auto; max-height: 100%; padding: 0 2px 0 0; /* right padding (scrollbar now left) */ direction: rtl; /* move native scrollbar to left */ scrollbar-width: thin; /* Firefox */ overflow-x: visible; /* allow horizontal overflow (thinking dots raise) */ } /* Remove fill and stroke for bubble container */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-messages#panel-messages { background: none !important; border: none !important; box-shadow: none !important; } /* WebKit scrollbar still shows; mirror on left via direction:rtl */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages::-webkit-scrollbar { width: 6px; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages::-webkit-scrollbar-track { background: transparent; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; } /* Inner wrapper restores normal LTR content layout */ :is(body.about-page, body.chatbot-enabled) #panel-messages .messages-inner { direction: ltr; display: flex; flex-direction: column; gap: 8px; padding-left: 24px; padding-right: 10px; overflow: visible; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .from-me, :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .from-them { font-size: 14px; line-height: 19px; padding: 8px 14px; max-width: 75%; } /* Actions row under most recent bubble */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-actions-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; padding: 0; max-width: 100%; margin-right: -6.5px; /* align row with tail tip */ } body.about-page .panel-row-messages#panel-messages .message-actions-row + .message-actions-row { margin-top: 4px; } body.about-page .panel-row-messages#panel-messages .message-action { border-radius: 50px; border: 1px solid #FFF; display: flex; padding: 8px 14px; justify-content: center; align-items: center; gap: 4px; width: auto; max-width: 100%; color: #FFF; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: 0.3px; background: none; box-shadow: none; cursor: pointer; transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:hover { background: rgba(54,69,79,0.10); } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:active { background: rgba(54,69,79,0.18); } /* Timestamp stamps */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-timestamp { width: 100%; text-align: center; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; line-height: 1.2; display: flex; justify-content: center; gap: 4px; color: #36454F; font-weight: 500; opacity: 1; margin-top: 10px; /* 10px above first user bubble */ transform: none; /* center exactly */ } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-timestamp .ts-time { font-weight: 400; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-timestamp .ts-day { font-weight: 500; } /* Delivery / Read status under user messages */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-status { font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; line-height: normal; font-weight: 600; color: #36454F; padding: 0; display: inline-flex; gap: 5px; opacity: 1; pointer-events: none; position: relative; clear: both; margin-top: -2px; align-self: flex-end; max-width: none; text-align: center; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .from-me + .message-status { float: right; margin-right: -6.5px; /* tail tip alignment */ transform: none; text-align: right; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-status .status-time { opacity: 1; color: #36454F; font-weight: 400; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-status .status-label { font-weight: 600; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-status.fade-in { animation: statusFadeIn .25s ease; } @keyframes statusFadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 0.9; transform: translateY(0); } } /* Thinking placeholder */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; /* match single-line AI bubble exactly */ background: #424949; /* ensure same color as AI bubble */ border-radius: 18px; max-width: fit-content; font-size: 0; line-height: 0; /* prevent extra height from line box */ margin-top: 4px; min-height: 0; /* let content define height to match text bubble */ overflow: visible; /* ensure upward translating dots not clipped */ } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder .thinking-bubble-shell { position: absolute; inset: auto auto 0 6px; /* small trailing bubble positioning */ width: 23px; height: 21px; opacity: 1; pointer-events: none; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder .thinking-dots-svg { width: auto; height: 14px; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder .thinking-dots-svg circle { transition: fill .4s ease; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder.tail:after { content:""; position:absolute; width:23px; height:21px; bottom:0; left:-5px; background: url('./chatbot/thinking-bubble.svg') no-repeat center/contain; pointer-events:none; } /* Increase gap above Row 2 to 25px when preceded by messages row */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages + .panel-row-bottom-1 { margin-top: 25px !important; } /* Key press highlight */ :is(body.about-page, body.chatbot-enabled) .panel-row-bottom-2 .row3-col-2 .subcol.key-pressed { background: rgba(255,255,255,0.35) !important; border-color: rgba(255,255,255,0.60) !important; filter: brightness(1.3); box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.4); transition: background .15s ease, filter .15s ease, box-shadow .2s ease; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col { flex: 1 1 0; display: flex; align-items: center; justify-content: center; font-weight: 600; border-radius: 10px; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(4px) saturate(1.4); -webkit-backdrop-filter: blur(4px) saturate(1.4); padding: 8px 10px; } /* Second column special formatting */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-2 { background: #202128; border: none; border-radius: 9px; padding: 5px 5px 5px 10px; /* left = 10px, others 5px */ display: flex; gap: 10px; /* gap between A (Send) and B (⌘) */ justify-content: flex-start; align-items: stretch; flex: 0 0 auto; /* hug content */ width: -moz-fit-content; width: fit-content; align-self: flex-end; /* stick to bottom of growing container */ } /* Ensure the first column (Column 1) fills remaining space */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 > .row3-col:first-child { flex: 1 1 auto; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-text { background: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: block; /* let height expand purely by content */ padding: 0; margin: 0; color: var(--System-Black, #36454F); font-family: "Plus Jakarta Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 109.974%; /* 15.396px */ letter-spacing: 0.28px; white-space: pre-wrap; word-break: break-word; min-height: 1.2em; cursor: text; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-text:focus { outline: none; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-2 .subcol { flex: 1 1 0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; letter-spacing: .5px; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); padding: 4px 0; } /* A -> Send button style (no fill/stroke, new typography) */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-2 .subcol.subcol-send { flex: 0 0 auto; /* hug content */ background: none; border: none; font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-style: normal; font-weight: 400; line-height: 109.974%; /* 13.197px */ letter-spacing: 0.24px; color: #FFF; justify-content: flex-start; padding: 0; /* no extra padding */ } /* B (⌘) and C (return) shrink to fit content */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-2 .subcol.key-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 4px 6px; /* same vertical padding as return key */ height: auto; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-2 .subcol.key-return { flex: 0 0 auto; padding: 4px 6px; /* keep compact */ } /* Override typography for key symbol and return label */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-2 .subcol.key-icon, :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-2 .subcol.key-return { font-family: "Plus Jakarta Sans", sans-serif; font-size: 8px; font-style: normal; font-weight: 400; line-height: 109.974%; /* 8.798px */ letter-spacing: 0.16px; color: #FFF; letter-spacing: 0.16px; } /* Placeholder + selection styles for editable Column 1 */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-text.is-empty { opacity: .5; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-text, :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-text * { user-select: text !important; -webkit-user-select: text !important; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-text[contenteditable="true"] { -webkit-user-modify: read-write-plaintext-only; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-text::selection { background: rgba(0,0,0,0.18); color: #000; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-2 .row3-col-text *::selection { background: rgba(0,0,0,0.18); color: #000; } /* Avatar scaling when panel open */ :is(body.about-page, body.chatbot-enabled) .chatbot-avatar { transition: filter 0.25s ease, transform 0.45s cubic-bezier(.4,0,.2,1); transform-origin: bottom right; } :is(body.about-page, body.chatbot-enabled).ai-avatar-scaling .chatbot-avatar, :is(body.about-page, body.chatbot-enabled).ai-panel-open .chatbot-avatar { transform: scale(.5); } @media (max-width: 720px) { :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel { width: min(92vw,560px); right: 50%; transform: translate(50%,12px) scale(.965); min-width: min(92vw, 440px); } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel.open { transform: translate(50%,0) scale(1); } } /* Right footer styles */ .rf-location { color: var(--System-White, #FFF); font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-style: normal; font-weight: 500; line-height: 21.6px; /* 135% */ } .rf-meta { color: rgba(255, 255, 255, 0.60); font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-style: normal; font-weight: 300; line-height: 21.6px; /* 135% */ } /* Responsive footer overlap handling */ @media (max-width: 1000px) { /* Hide center copyright first to prevent overlap with left/right */ .copyright-info { display: none; } } @media (max-width: 640px) { /* If left/right could overlap, prioritize availability (right) */ .citizenship-info { display: none; } .availability-info { right: auto; left: 50%; transform: translateX(-50%); text-align: center; align-items: center; } } /* (Removed all responsive @media breakpoint rules per request) */ /* Show hero visual container (logo + pills) on hover */ .row-hover-1:hover ~ .hero-visual-container, .row-hover-2:hover ~ .hero-visual-container, .row-hover-3:hover ~ .hero-visual-container, .row-hover-4:hover ~ .hero-visual-container { opacity: 1; } /* Show specific pill sets based on row hover */ .row-hover-1:hover ~ .hero-visual-container .pill-container .pill-set-1 { opacity: 1; } .row-hover-2:hover ~ .hero-visual-container .pill-container .pill-set-2 { opacity: 1; } .row-hover-3:hover ~ .hero-visual-container .pill-container .pill-set-3 { opacity: 1; } .row-hover-4:hover ~ .hero-visual-container .pill-container .pill-set-4 { opacity: 1; } /* (Removed custom cursor styles) */ /* Stamp Animation - Realistic stamping motion */ @keyframes stamp-press { 0% { transform: translateY(-15px) scale(1) rotate(0deg); opacity: 1; } 30% { transform: translateY(-3px) scale(0.95) rotate(-1deg); opacity: 1; } 50% { transform: translateY(0px) scale(0.92) rotate(-2deg); opacity: 1; } 70% { transform: translateY(0px) scale(0.92) rotate(-2deg); opacity: 1; } 85% { transform: translateY(0px) scale(0.92) rotate(-2deg); opacity: 1; } 100% { transform: translateY(0px) scale(0.92) rotate(-2deg); opacity: 1; } } @keyframes stamp-press-line { 0% { transform: translateY(-15px) scale(1) rotate(-21.59deg); opacity: 1; } 30% { transform: translateY(-3px) scale(0.95) rotate(-22.59deg); opacity: 1; } 50% { transform: translateY(0px) scale(0.92) rotate(-23.59deg); opacity: 1; } 70% { transform: translateY(0px) scale(0.92) rotate(-23.59deg); opacity: 1; } 85% { transform: translateY(0px) scale(0.92) rotate(-23.59deg); opacity: 1; } 100% { transform: translateY(0px) scale(0.92) rotate(-23.59deg); opacity: 1; } } /* Page transition bars removed */ /* TA stamp text container */ .ta-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 60px 25px; box-sizing: border-box; } .ta-text-container.visible { display: flex; opacity: 1; } .ta-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .ta-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .ta-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .ta-main-text { margin-bottom: 20px; } .ta-description-text { display: flex; flex-direction: column; gap: 16px; } .ta-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .ta-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .ta-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 17px; font-style: italic; font-weight: 400; line-height: 24px; } .ta-course-list { display: flex; flex-direction: column; gap: 4px; margin-left: 16px; } .ta-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .ta-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* PBF stamp text container */ .pbf-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .pbf-text-container.visible { display: flex; opacity: 1; } .pbf-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .pbf-main-text { margin-bottom: 20px; } .pbf-description-text { display: flex; flex-direction: column; gap: 16px; } .pbf-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .pbf-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .pbf-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .pbf-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .pbf-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .pbf-course-list { display: flex; flex-direction: column; gap: 8px; } .pbf-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .pbf-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* PWIF stamp text container */ .pwif-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .pwif-text-container.visible { display: flex; opacity: 1; } .pwif-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .pwif-main-text { margin-bottom: 20px; } .pwif-description-text { display: flex; flex-direction: column; gap: 16px; } .pwif-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .pwif-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .pwif-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .pwif-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .pwif-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .pwif-course-list { display: flex; flex-direction: column; gap: 8px; } .pwif-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .pwif-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* WDO stamp text container */ .wdo-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .wdo-text-container.visible { display: flex; opacity: 1; } .wdo-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .wdo-main-text { margin-bottom: 20px; } .wdo-description-text { display: flex; flex-direction: column; gap: 16px; } .wdo-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .wdo-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .wdo-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .wdo-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .wdo-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .wdo-course-list { display: flex; flex-direction: column; gap: 8px; } .wdo-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .wdo-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* DPR stamp text container */ .dpr-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .dpr-text-container.visible { display: flex; opacity: 1; } .dpr-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .dpr-main-text { margin-bottom: 20px; } .dpr-description-text { display: flex; flex-direction: column; gap: 16px; } .dpr-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .dpr-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .dpr-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .dpr-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .dpr-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .dpr-course-list { display: flex; flex-direction: column; gap: 8px; } .dpr-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .dpr-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* LAG stamp text container */ .lag-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .lag-text-container.visible { display: flex; opacity: 1; } .lag-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .lag-main-text { margin-bottom: 20px; } .lag-description-text { display: flex; flex-direction: column; gap: 16px; } .lag-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .lag-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .lag-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .lag-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .lag-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .lag-course-list { display: flex; flex-direction: column; gap: 8px; } .lag-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .lag-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* WID stamp text container */ .wid-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .wid-text-container.visible { display: flex; opacity: 1; } .wid-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .wid-main-text { margin-bottom: 20px; } .wid-description-text { display: flex; flex-direction: column; gap: 16px; } .wid-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .wid-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .wid-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .wid-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .wid-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .wid-course-list { display: flex; flex-direction: column; gap: 8px; } .wid-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .wid-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* PSC stamp text container */ .psc-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .psc-text-container.visible { display: flex; opacity: 1; } .psc-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .psc-main-text { margin-bottom: 20px; } .psc-description-text { display: flex; flex-direction: column; gap: 16px; } .psc-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .psc-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .psc-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .psc-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .psc-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .psc-course-list { display: flex; flex-direction: column; gap: 8px; } .psc-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .psc-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* JSC stamp text container */ .jsc-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .jsc-text-container.visible { display: flex; opacity: 1; } .jsc-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .jsc-main-text { margin-bottom: 20px; } .jsc-description-text { display: flex; flex-direction: column; gap: 16px; } .jsc-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .jsc-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .jsc-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .jsc-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .jsc-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .jsc-course-list { display: flex; flex-direction: column; gap: 8px; } .jsc-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .jsc-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* BG stamp text container */ .bg-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .bg-text-container.visible { display: flex; opacity: 1; } .bg-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .bg-main-text { margin-bottom: 20px; } .bg-description-text { display: flex; flex-direction: column; gap: 16px; } .bg-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .bg-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .bg-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .bg-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .bg-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .bg-course-list { display: flex; flex-direction: column; gap: 8px; } .bg-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .bg-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* LFP stamp text container */ .lfp-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .lfp-text-container.visible { display: flex; opacity: 1; } .lfp-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .lfp-main-text { margin-bottom: 20px; } .lfp-description-text { display: flex; flex-direction: column; gap: 16px; } .lfp-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .lfp-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .lfp-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .lfp-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .lfp-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .lfp-course-list { display: flex; flex-direction: column; gap: 8px; } .lfp-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } .lfp-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* SCG stamp text container */ .scg-text-container { position: absolute; width: 515px; height: 706px; top: 33.52px; right: 23.36px; z-index: 40; display: none; opacity: 0; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; padding: 50px 25px; box-sizing: border-box; } .scg-text-container.visible { display: flex; opacity: 1; } .scg-text-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100%; } .scg-main-text { margin-bottom: 20px; } .scg-description-text { display: flex; flex-direction: column; gap: 16px; } .scg-text-regular { color: var(--System-Blue, #4285F4); font-family: Manrope; font-size: 28px; font-style: normal; font-weight: 300; line-height: 36px; /* 128.571% */ } .scg-text-highlight { color: var(--System-Blue, #4285F4); font-family: "Instrument Serif"; font-size: 32px; font-style: italic; font-weight: 400; line-height: 36px; } .scg-date { color: var(--system-gray-dark, #7C7C81); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; /* 150% */ } .scg-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .scg-knowledge-sharing { color: var(--System-Black, #36454F); font-family: "Instrument Serif"; font-size: 16px; font-style: italic; font-weight: 400; line-height: 24px; } .scg-course-list { display: flex; flex-direction: column; gap: 8px; } .scg-course { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; padding-left: 10px; } /* MileIQ for Teams Page Styles */ .mileiq-content { max-width: 1200px; margin: 0 auto; padding: 60px 40px; color: #fff; } .mileiq-header { text-align: center; margin-bottom: 60px; } .mileiq-logo-large { width: 120px; height: auto; margin-bottom: 30px; } .mileiq-title { font-family: 'Instrument Serif', serif; font-size: 48px; font-weight: 400; margin-bottom: 20px; color: #fff; } .mileiq-subtitle { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.6; max-width: 600px; margin: 0 auto; color: rgba(255, 255, 255, 0.9); } .mileiq-details { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; } .project-info-section h2 { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 600; margin-bottom: 20px; color: #fff; } .project-info-section p { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.7; color: rgba(255, 255, 255, 0.9); } .project-metadata { display: flex; flex-direction: column; gap: 30px; } .metadata-item h3 { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; color: rgba(255, 255, 255, 0.7); } .metadata-item p { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 500; color: #fff; } .project-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; } .tag { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 8px 16px; font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 500; color: #fff; backdrop-filter: blur(10px); } .scg-award-paragraph { color: var(--System-Black, #36454F); font-family: Manrope; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; text-indent: -16px; padding-left: 16px; } /* High-contrast variant for chatbot over light backgrounds */ :is(body.about-page, body.chatbot-enabled).chatbot-contrast .liquid-glass-panel .panel-row.panel-row-top .r1 .c2 .c2-row-a, :is(body.about-page, body.chatbot-enabled).chatbot-contrast .liquid-glass-panel .panel-row.panel-row-top .r1 .c2 .c2-row-b { color: rgba(0,0,0,0.92) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-them { color: #0A0A0A !important; background: rgba(255,255,255,0.85) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-me { color: #0A0A0A !important; background: rgba(255,255,255,0.95) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .liquid-glass-panel .panel-row.panel-row-bottom-1 { color: #0A0A0A !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .liquid-glass-panel .panel-row.panel-row-bottom-2 { background: rgba(255,255,255,0.75) !important; border-color: rgba(0,0,0,0.25) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-timestamp { color: rgba(0,0,0,0.6) !important; } /* Ensure timestamp color defaults to #36454F and flips in contrast mode */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-timestamp { color: #36454F; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-timestamp { color: rgba(10,10,10,0.65) !important; } /* Contrast-mode bubbles and tails */ :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-me { background: #E7EBE7 !important; color: #0A0A0A !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-me:after { filter: hue-rotate(0deg) saturate(0) brightness(1.15); } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-them { background: #E0E4E0 !important; color: #0A0A0A !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-them:after { filter: hue-rotate(0deg) saturate(0) brightness(1.15); } /* Contrast-mode bubbles and tails */ :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-me { background: #E8F2EA !important; color: #0A0A0A !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-me:after { filter: hue-rotate(85deg) saturate(1.25) brightness(1.06); } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-them { background: #E7EEF8 !important; color: #0A0A0A !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-them:after { filter: hue-rotate(210deg) saturate(1.3) brightness(1.1); } /* Thinking placeholder bubble matches AI styling */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder { background: #424949; color: #FFFFFF; border-radius: 18px; padding: 12px 14px; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder.tail:after { filter: none; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .thinking-placeholder { background: #E7EEF8 !important; color: #0A0A0A !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .thinking-placeholder.tail:after { filter: hue-rotate(210deg) saturate(1.3) brightness(1.1); } /* Chatbot bubble color variables */ :is(body.about-page, body.chatbot-enabled) { --bubble-me-bg:#C9CEC9; --bubble-me-fg:#36454F; --bubble-them-bg:#424949; --bubble-them-fg:#FFFFFF; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast { --bubble-me-bg:#E8F2EA; --bubble-me-fg:#0A0A0A; --bubble-them-bg:#E7EEF8; --bubble-them-fg:#0A0A0A; } /* Apply variables to bubbles */ :is(body.about-page, body.chatbot-enabled) .from-me { background: var(--bubble-me-bg); color: var(--bubble-me-fg); } :is(body.about-page, body.chatbot-enabled) .from-them { background: var(--bubble-them-bg); color: var(--bubble-them-fg); } /* Tail masks so tails match bubble colors exactly */ :is(body.about-page, body.chatbot-enabled) .from-me:after { background: var(--bubble-me-bg); -webkit-mask: url('./chatbot/speech-tail.svg') no-repeat center / contain; mask: url('./chatbot/speech-tail.svg') no-repeat center / contain; } :is(body.about-page, body.chatbot-enabled) .from-them:after { background: var(--bubble-them-bg); -webkit-mask: url('./chatbot/speech-tail-bot.svg') no-repeat center / contain; mask: url('./chatbot/speech-tail-bot.svg') no-repeat center / contain; } /* Thinking placeholder uses AI bubble colors and matching tail */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder { background: var(--bubble-them-bg); color: var(--bubble-them-fg); } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder.tail:after { background: var(--bubble-them-bg); -webkit-mask: url('./chatbot/thinking-bubble.svg') no-repeat center/contain; mask: url('./chatbot/thinking-bubble.svg') no-repeat center/contain; } /* Remove legacy contrast tail filters to ensure exact color match */ :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-me:after { filter: none; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .from-them:after { filter: none; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .thinking-placeholder.tail:after { filter: none; } /* Contrast-mode readability for timestamps, statuses, and actions */ :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-timestamp { color: rgba(10,10,10,0.7) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-status { color: rgba(10,10,10,0.85) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-status .status-time { color: rgba(10,10,10,0.7) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action { border-color: rgba(10,10,10,0.55) !important; color: rgba(10,10,10,0.85) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:hover { background: rgba(0,0,0,0.06) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:active { background: rgba(0,0,0,0.12) !important; } /* Ensure thinking dots above bubble shell */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder .thinking-bubble-shell { z-index: 1; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .thinking-placeholder .thinking-dots-svg { position: relative; z-index: 2; } /* Action buttons: outline and text adapt to contrast */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action { color: #36454F; border-color: #36454F; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:hover { border-color: #36454F; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:focus-visible { outline: 2px solid rgba(255,255,255,0.95); outline-offset: 2px; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action { color: rgba(10,10,10,0.9) !important; border-color: rgba(10,10,10,0.6) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:hover { border-color: rgba(10,10,10,0.8) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:focus-visible { outline: 2px solid rgba(10,10,10,0.85); outline-offset: 2px; } /* Stronger focus outline in contrast mode */ :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:focus, :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:focus-visible { outline: 2px solid rgba(10,10,10,0.9) !important; outline-offset: 2px !important; } /* Ensure no global outline: none hides it */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action { outline: none; } /* Timestamp weight tweaks */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-timestamp .ts-day { font-weight: 500; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-timestamp .ts-at { font-weight: 400; opacity: 0.9; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-timestamp .ts-time { font-weight: 400; } /* Extra-visible focus for action buttons (box-shadow fallback) */ :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:focus, :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:focus-visible { outline: 2px solid rgba(10,10,10,0.9) !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px rgba(255,255,255,0), 0 0 0 2px rgba(10,10,10,0.35) inset !important; } /* Chatbot disclaimer row */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-1b { background: none; border: none; box-shadow: none; padding: 0 10px; margin-top: 2.5px; /* 2.5px under Powered by line */ color: rgba(255,255,255,0.75); font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; /* match powered-by */ line-height: 1.2; text-align: center; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .liquid-glass-panel .panel-row.panel-row-bottom-1b { color: rgba(10,10,10,0.7) !important; } /* Match disclaimer style to powered-by */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-1b, :is(body.about-page, body.chatbot-enabled).chatbot-contrast .liquid-glass-panel .panel-row.panel-row-bottom-1b { font-size: 10px !important; /* match powered-by row */ font-weight: 500; } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel .panel-row.panel-row-bottom-1b { color: var(--System-White, #FFF) !important; margin-top: 0 !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .liquid-glass-panel .panel-row.panel-row-bottom-1b { color: rgba(10,10,10,0.88) !important; margin-top: 0 !important; } /* Always-visible action button border (stroke) */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action { background: transparent; border-style: solid; border-width: 1.5px; border-color: #36454F; color: #36454F; box-shadow: inset 0 0 0 0 currentColor; /* noop for consistency */ } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action { border-color: rgba(10,10,10,0.85) !important; color: rgba(10,10,10,0.92) !important; } /* Chatbot action buttons styled as pill bubbles matching speech bubble size */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-actions-row { gap: 12px 16px; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action { background: var(--bubble-them-bg); color: var(--bubble-them-fg); border: none; border-radius: 18px; /* match .from-them */ padding: 8px 14px; /* match bubble padding */ line-height: 19px; /* match bubble line height */ font-size: 14px; /* match bubble font size */ } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action { background: var(--bubble-them-bg) !important; color: var(--bubble-them-fg) !important; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:hover { filter: brightness(1.03); } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:active { filter: brightness(0.97); } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 2px; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:focus-visible { outline: 2px solid rgba(10,10,10,0.85) !important; outline-offset: 2px !important; } /* Chatbot action buttons as outlined pills (transparent background) */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action { background: transparent !important; border: 1.5px solid #36454F !important; color: #36454F !important; border-radius: 18px; /* match bubble curve */ padding: 8px 14px; /* match bubble vertical rhythm */ line-height: 19px; /* match bubble line height */ font-size: 14px; /* match bubble font size */ } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action { border-color: rgba(10,10,10,0.85) !important; color: rgba(10,10,10,0.92) !important; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:hover { background: rgba(54,69,79,0.06) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:hover { background: rgba(0,0,0,0.06) !important; } /* Increase frosted glass intensity and blur ~25% */ :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel { backdrop-filter: blur(18px) saturate(1.6) contrast(1.2) brightness(1.06); -webkit-backdrop-filter: blur(18px) saturate(1.6) contrast(1.2) brightness(1.06); } :is(body.about-page, body.chatbot-enabled) .liquid-glass-panel.open { filter: blur(0) saturate(2.0); } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-status { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Outlined action buttons with light hover fill */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action { background: transparent !important; border: 1.5px solid #36454F !important; color: #36454F !important; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:hover { background: rgba(54,69,79,0.06) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action { background: transparent !important; border-color: rgba(10,10,10,0.85) !important; color: rgba(10,10,10,0.92) !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:hover { background: rgba(0,0,0,0.06) !important; } /* Outlined action buttons with no default fill and no hover fill */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action { background: transparent !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action { background: transparent !important; } :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:hover { background: transparent !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:hover { background: transparent !important; } /* remove earlier hover tint rule to avoid conflicts */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-action:hover { background: transparent !important; } :is(body.about-page, body.chatbot-enabled).chatbot-contrast .panel-row-messages#panel-messages .message-action:hover { background: transparent !important; } /* Remove blur/frosted fill behind Delivered/Read timestamp */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-status { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; filter: none !important; } /* Belt-and-suspenders: clear any descendant or pseudo backgrounds */ :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-status *, :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-status::before, :is(body.about-page, body.chatbot-enabled) .panel-row-messages#panel-messages .message-status::after { background: transparent !important; box-shadow: none !important; border: 0 !important; filter: none !important; } /* ================================================ PAGE-SPECIFIC CHATBOT COLOR OVERRIDES ================================================ Usage: Add a class to your tag like "chatbot-theme-[name]" Example: Available themes: You can create any theme by following the pattern below ================================================ */ /* Theme: Ocean Blue - Example override for MileIQ page */ body.chatbot-theme-ocean.chatbot-enabled .liquid-glass-panel { background: linear-gradient(145deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.10) 42%, rgba(59, 130, 246, 0.18) 68%, rgba(59, 130, 246, 0.08) 100%), radial-gradient(at 20% 5%, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0) 62%), radial-gradient(at 78% 92%, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0) 66%), rgba(59, 130, 246, 0.12) !important; border-color: rgba(59, 130, 246, 0.3) !important; } body.chatbot-theme-ocean.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top { background: linear-gradient(180deg, rgba(30, 58, 138, 0.65) 0%, rgba(30, 58, 138, 0) 100%) !important; } body.chatbot-theme-ocean.chatbot-enabled .panel-row-messages#panel-messages .from-them { background: rgba(59, 130, 246, 0.2) !important; color: #E0F2FE !important; } /* Theme: Forest Green - Example for projects page */ body.chatbot-theme-forest.chatbot-enabled .liquid-glass-panel { background: linear-gradient(145deg, rgba(34, 197, 94, 0.25) 0%, rgba(34, 197, 94, 0.10) 42%, rgba(34, 197, 94, 0.18) 68%, rgba(34, 197, 94, 0.08) 100%), radial-gradient(at 20% 5%, rgba(34, 197, 94, 0.35), rgba(34, 197, 94, 0) 62%), radial-gradient(at 78% 92%, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0) 66%), rgba(34, 197, 94, 0.12) !important; border-color: rgba(34, 197, 94, 0.3) !important; } body.chatbot-theme-forest.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top { background: linear-gradient(180deg, rgba(20, 83, 45, 0.65) 0%, rgba(20, 83, 45, 0) 100%) !important; } body.chatbot-theme-forest.chatbot-enabled .panel-row-messages#panel-messages .from-them { background: rgba(34, 197, 94, 0.2) !important; color: #F0FDF4 !important; } /* Theme: Sunset Orange - Example for fun page */ body.chatbot-theme-sunset.chatbot-enabled .liquid-glass-panel { background: linear-gradient(145deg, rgba(251, 146, 60, 0.25) 0%, rgba(251, 146, 60, 0.10) 42%, rgba(251, 146, 60, 0.18) 68%, rgba(251, 146, 60, 0.08) 100%), radial-gradient(at 20% 5%, rgba(251, 146, 60, 0.35), rgba(251, 146, 60, 0) 62%), radial-gradient(at 78% 92%, rgba(251, 146, 60, 0.25), rgba(251, 146, 60, 0) 66%), rgba(251, 146, 60, 0.12) !important; border-color: rgba(251, 146, 60, 0.3) !important; } body.chatbot-theme-sunset.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top { background: linear-gradient(180deg, rgba(154, 52, 18, 0.65) 0%, rgba(154, 52, 18, 0) 100%) !important; } body.chatbot-theme-sunset.chatbot-enabled .panel-row-messages#panel-messages .from-them { background: rgba(251, 146, 60, 0.2) !important; color: #FFF7ED !important; } /* Theme: Purple Dusk - Example for work page */ body.chatbot-theme-purple.chatbot-enabled .liquid-glass-panel { background: linear-gradient(145deg, rgba(168, 85, 247, 0.25) 0%, rgba(168, 85, 247, 0.10) 42%, rgba(168, 85, 247, 0.18) 68%, rgba(168, 85, 247, 0.08) 100%), radial-gradient(at 20% 5%, rgba(168, 85, 247, 0.35), rgba(168, 85, 247, 0) 62%), radial-gradient(at 78% 92%, rgba(168, 85, 247, 0.25), rgba(168, 85, 247, 0) 66%), rgba(168, 85, 247, 0.12) !important; border-color: rgba(168, 85, 247, 0.3) !important; } body.chatbot-theme-purple.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top { background: linear-gradient(180deg, rgba(88, 28, 135, 0.65) 0%, rgba(88, 28, 135, 0) 100%) !important; } body.chatbot-theme-purple.chatbot-enabled .panel-row-messages#panel-messages .from-them { background: rgba(168, 85, 247, 0.2) !important; color: #FAF5FF !important; } /* Template for creating new themes: body.chatbot-theme-[YOUR_NAME].chatbot-enabled .liquid-glass-panel { background: [your gradients] !important; border-color: [your border color] !important; } body.chatbot-theme-[YOUR_NAME].chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top { background: linear-gradient(180deg, [darker color] 0%, transparent 100%) !important; } body.chatbot-theme-[YOUR_NAME].chatbot-enabled .panel-row-messages#panel-messages .from-them { background: [bubble background] !important; color: [text color] !important; } */ /* ================================================ MILEIQ-AUTOMATION PAGE CHATBOT THEME ================================================ Current colors: Teal theme (RGB: 20, 184, 166) To customize colors, change the RGB values below: DEFAULT CHATBOT WINDOW VALUES FOR REFERENCE: • Main glass panel background (DEFAULT): - Frosted texture layers: rgba(255,255,255,0.15), rgba(255,255,255,0.12), rgba(255,255,255,0.18), rgba(255,255,255,0.14) - Main gradient: rgba(255,255,255,0.28) → rgba(255,255,255,0.12) → rgba(255,255,255,0.22) → rgba(255,255,255,0.08) - Radial gradients: rgba(255,255,255,0.45) and rgba(255,255,255,0.28) - Base layer: rgba(255,255,255,0.09) • Border: rgba(255,255,255,0.28) • Header gradient: rgba(32,33,40,0.60) to transparent • AI bubble: rgba(255,255,255,0.15) background, #fff text • USER bubble (default): #C9CEC9 background, var(--System-Black, #36454F) text • USER bubble tail (default): Uses same #C9CEC9 background with speech-tail.svg mask • "I'm Carlos.ai!" text: var(--System-White,#FFF) - defaults to white (#FFF) • Description text: var(--System-White,#FFF) with 0.95 opacity • High contrast: rgba(0,0,0,0.92) for text, #E0E4E0/#E7EBE7 for bubbles ================================================ */ /* MAIN CHATBOT PANEL - Change rgba(20, 184, 166, X) if you want the glass panel to be a different color */ body.chatbot-theme-mileiq.chatbot-enabled .liquid-glass-panel { background: /* Glass effect layers - all use the same RGB values with different opacity */ linear-gradient(145deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.10) 42%, rgba(255, 255, 255, 0.18) 68%, rgba(255, 255, 255, 0.08) 100%), radial-gradient(at 20% 5%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 62%), radial-gradient(at 78% 92%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 66%), rgba(20, 184, 166, 0.12) !important; /* Panel border - Change rgba(20, 184, 166, 0.3) if you want the border to be a different color */ border-color: rgba(255, 255, 255, 0.22) !important; } /* HEADER BACKGROUND - Change rgba(13, 116, 104, X) if you want the header gradient to be a different color */ /* Note: Use a DARKER version of your main color for the header */ body.chatbot-theme-mileiq.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top { background: linear-gradient(180deg, rgba(197, 228, 250, 1.00) 0%, rgba(197, 228, 250, 0) 100%) !important; } /* MileIQ Automation page - different gradient color */ body.mileiq-page.chatbot-theme-mileiq.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top { background: linear-gradient(180deg, rgba(197, 228, 250, 1.00) 0%, rgba(197, 228, 250, 0) 100%) !important; } /* X close icon color override for MileIQ theme - keep #36454F */ body.chatbot-theme-mileiq.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top .row1-cta .x-close-icon { filter: none !important; } /* AI CHAT BUBBLES - Change these values if you want AI responses to be a different color */ body.chatbot-theme-mileiq.chatbot-enabled .panel-row-messages#panel-messages .from-them { /* Bubble background - Change rgba(20, 184, 166, 0.2) for bubble color */ background: rgba(32, 109, 208, 1) !important; /* Text color - Change #F0FDFA if you want the AI text to be a different color */ color: #F0FDFA !important; } /* AI CHAT BUBBLE TAILS - Change rgba(20, 184, 166, 0.2) if you want AI bubble tails to be a different color */ body.chatbot-theme-mileiq.chatbot-enabled .panel-row-messages#panel-messages .from-them:after { background: rgba(32, 109, 208, 1) !important; } /* USER CHAT BUBBLES - Change these values if you want user message bubbles to be a different color */ body.chatbot-theme-mileiq.chatbot-enabled .panel-row-messages#panel-messages .from-me { /* User bubble background - Change rgba(20, 184, 166, 0.3) for user bubble color */ background: rgba(201, 206, 201, 1) !important; /* User text color - Change #F0FDFA if you want user text to be a different color */ color: #36454F !important; } /* USER CHAT BUBBLE TAILS - Change rgba(20, 184, 166, 0.25) if you want user bubble tails to be a different color */ body.chatbot-theme-mileiq.chatbot-enabled .panel-row-messages#panel-messages .from-me:after { background: rgba(201, 206, 201, 1) !important; } /* HEADER TEXT "I'm Carlos.ai!" - Change #F0FDFA if you want the main header text to be a different color */ body.chatbot-theme-mileiq.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top .r1 .c2 .c2-row-a { color: #36454F !important; font-family: 'Cooper Light BT', "Plus Jakarta Sans", sans-serif !important; } /* HEADER DESCRIPTION TEXT - Change #F0FDFA if you want the description text to be a different color */ body.chatbot-theme-mileiq.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-top .r1 .c2 .c2-row-b { color: #36454F !important; } body.chatbot-theme-mileiq.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-bottom-1, body.chatbot-theme-mileiq.chatbot-enabled .liquid-glass-panel .panel-row.panel-row-bottom-1b { color: #36454F !important; }