/* ===================== Shivam Enterprises - Digital Profile ===================== */ html { scroll-behavior: smooth; scroll-padding-top: 80px; } .font-display { font-family: 'Playfair Display', serif; } /* Ornamental gold-crimson-black strip, echoes the logo roofline */ .brand-strip { height: 3px; background: linear-gradient(90deg, #c81e2c 0%, #e8b923 50%, #050506 100%); } /* Tap feedback */ .tap-effect:active { transform: scale(0.97); transition: transform .1s; } .card-lift { transition: transform .2s ease, box-shadow .2s ease; } @media (hover: hover) { .card-lift:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(0,0,0,.14); } } input[type=range] { accent-color: #c81e2c; } /* ===================== Entrance animations (scroll reveal) ===================== */ /* Safety-first design: sections are FULLY VISIBLE by default (opacity:1) no matter what — if JS never runs or throws an error, nothing on the page ever disappears. The animation only gets added on top when JS successfully opts a section in via the .pre-reveal class (see initSectionReveal in main.js). */ .section-reveal { opacity: 1; } .section-reveal.pre-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .section-reveal.pre-reveal.in-view { opacity: 1; transform: translateY(0); } @keyframes fadeScaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } .animate-fade-scale { animation: fadeScaleIn .22s ease-out; } @keyframes slideUpSheet { from { transform: translateY(100%); opacity: .4; } to { transform: translateY(0); opacity: 1; } } .animate-slide-up { animation: slideUpSheet .32s cubic-bezier(.16,1,.3,1); } @keyframes fadeBackdrop { from { opacity: 0; } to { opacity: 1; } } .animate-fade-backdrop { animation: fadeBackdrop .2s ease-out; } @keyframes pulseCrimson { 0% { box-shadow: 0 0 0 0 rgba(200,30,44,.6); } 70% { box-shadow: 0 0 0 12px rgba(200,30,44,0); } 100% { box-shadow: 0 0 0 0 rgba(200,30,44,0); } } .pulse-brand { animation: pulseCrimson 2s infinite; } /* Nav active link */ .nav-link.active { color: #a8121f; background: #fdf6e3; } /* Theme toggle buttons in reading-mode panel */ .theme-btn.active { background: #050506; color: #fff; border-color: #050506; } /* Slide-to-submit style success animation */ @keyframes checkPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .check-pop { animation: checkPop .4s ease-out; } /* ===================== READING MODE THEMES ===================== */ /* Day is default. Sepia and Night are toggled via a class on . */ html.theme-sepia body { background: #f4ecd8 !important; color: #3b2f22; } html.theme-sepia section#about, html.theme-sepia section#emi, html.theme-sepia section#cibil, html.theme-sepia section#reviews { background: #efe4c8 !important; } html.theme-sepia .bg-white { background-color: #faf3e3 !important; } html.theme-sepia #siteHeader { background: rgba(244,236,216,0.92) !important; } html.theme-night body { background: #0b0b0d !important; color: #e5e5e7; } html.theme-night section#about, html.theme-night section#emi, html.theme-night section#cibil, html.theme-night section#reviews { background: #131316 !important; border-color: #26262a !important; } html.theme-night .bg-white { background-color: #17171a !important; color: #e5e5e7; } html.theme-night .text-slate-900 { color: #f1f1f2 !important; } html.theme-night .text-slate-700, html.theme-night .text-slate-600, html.theme-night .text-slate-500 { color: #a1a1aa !important; } html.theme-night .border-slate-200, html.theme-night .border-slate-100 { border-color: #27272a !important; } html.theme-night #siteHeader { background: rgba(11,11,13,0.92) !important; border-color: #26262a !important; } html.theme-night #mainNav, html.theme-night #mobileNav { background: transparent !important; } /* ===================== APP CONTAINER (mobile-app frame) ===================== */ html, body { overflow-x: clip; } body { background-color: #cbd5e1; /* visible outside the app-container on wide screens */ } .app-container { max-width: 480px; margin: 0 auto; background-color: #ffffff; min-height: 100vh; position: relative; box-shadow: 0 0 40px rgba(0,0,0,0.15); } @media (min-width: 600px) and (max-width: 1023px) { .app-container { max-width: 100%; } } .pb-safe { padding-bottom: 84px; } /* Reserve space at the bottom of the actual scrollable content so the fixed bottom nav never overlaps the last bit of a section (e.g. the footer). Desktop hides the bottom nav entirely, so this is reset to 0 there. */ #pageContent { padding-bottom: 84px; } html.desktop-mode #pageContent { padding-bottom: 0; } /* ===================== BOTTOM NAVIGATION (mobile app bar) ===================== */ #bottomNav { left: 50%; transform: translateX(-50%); max-width: 480px; width: 100%; } @media (min-width: 600px) and (max-width: 1023px) { #bottomNav { max-width: 100%; } } /* ===================== AI CHAT WIDGET ===================== */ .ai-chat-fab { position: fixed; bottom: 84px; right: 16px; width: 54px; height: 54px; border-radius: 50%; z-index: 200; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ai-chat-fab::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, #c81e2c, #e8b923, #050506, #c81e2c); animation: aiRingSpin 3.5s linear infinite; z-index: 1; } .ai-chat-fab::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 16px 4px rgba(200,30,44,0.45); z-index: 1; pointer-events: none; } @keyframes aiRingSpin { to { transform: rotate(360deg); } } html.desktop-mode .ai-chat-fab { bottom: 22px; right: 22px; width: 64px; height: 64px; z-index: 350; } html.desktop-mode .ai-chat-panel { right: 22px; z-index: 350; } .ai-fab-core { position: relative; z-index: 3; width: 100%; height: 100%; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 9px; box-shadow: 0 10px 28px rgba(200,30,44,0.35); animation: aiCoreFloat 3s ease-in-out infinite; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); } .ai-fab-core img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .ai-chat-fab:hover .ai-fab-core { transform: scale(1.1); } @keyframes aiCoreFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(3deg); } } /* Header logo — gentle continuous float + glow pulse, same animation language as the AI chat orb */ .header-logo-tile { animation: headerLogoFloat 3.2s ease-in-out infinite, headerLogoGlow 3.2s ease-in-out infinite; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); } .header-logo-tile:hover { transform: scale(1.08) rotate(-3deg); } @keyframes headerLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes headerLogoGlow { 0%, 100% { box-shadow: 0 2px 8px rgba(200,30,44,0.25); } 50% { box-shadow: 0 4px 16px rgba(232,185,35,0.45); } } .ai-chat-panel { position: fixed; bottom: 22px; right: 22px; width: 370px; max-width: calc(100vw - 24px); height: 560px; max-height: calc(100vh - 100px); background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(10,10,12,0.28); z-index: 201; display: flex; flex-direction: column; overflow: hidden; animation: aiPanelIn 0.35s cubic-bezier(0.16,1,0.3,1); } #aiChatPanel.hidden { display: none; } @keyframes aiPanelIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 480px) { .ai-chat-panel { bottom: 0; right: 0; left: 0; top: 0; width: 100vw; max-width: 100vw; height: 100vh; height: -webkit-fill-available; height: 100dvh; max-height: 100vh; max-height: -webkit-fill-available; max-height: 100dvh; border-radius: 0; } } body.ai-chat-open { overflow: hidden; position: fixed; width: 100%; } .ai-chat-header { background: linear-gradient(135deg, #050506, #202024); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .ai-chat-header-info { display: flex; align-items: center; gap: 10px; } .ai-chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 4px; flex-shrink: 0; position: relative; box-shadow: 0 0 0 2px #fff, 0 0 12px 2px rgba(232,185,35,0.6); } .ai-chat-avatar::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 0deg, #c81e2c, #e8b923, #050506, #c81e2c); z-index: -1; animation: aiRingSpin 4s linear infinite; } .ai-chat-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .ai-chat-title { color: #fff; font-weight: 700; font-size: 13px; } .ai-chat-status { color: rgba(255,255,255,0.65); font-size: 10px; display: flex; align-items: center; gap: 5px; margin-top: 1px; } .ai-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: aiStatusPulse 1.8s ease-in-out infinite; } @keyframes aiStatusPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .ai-chat-header-actions { display: flex; align-items: center; gap: 8px; } .ai-chat-call-btn { background: rgba(74,222,128,0.2); border: none; color: #4ade80; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .ai-voice-toggle { display: flex; background: rgba(255,255,255,0.1); border-radius: 999px; padding: 2px; gap: 2px; } .ai-voice-toggle-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: transparent; color: rgba(255,255,255,0.5); font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .ai-voice-toggle-btn.active { background: #fff; color: #a8121f; } .ai-chat-call-btn:hover { background: rgba(74,222,128,0.32); } .ai-chat-close { background: rgba(255,255,255,0.12); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ai-chat-close:hover { background: rgba(255,255,255,0.22); } /* ----- Live voice-call overlay ----- */ .ai-call-overlay { position: absolute; inset: 0; z-index: 10; background: linear-gradient(160deg, #050506, #202024 60%, #050506); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; } #aiCallOverlay.hidden { display: none; } .ai-call-avatar-wrap { position: relative; width: 96px; height: 96px; margin-bottom: 18px; } .ai-call-avatar { position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 50%; background: #fff; padding: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 20px 4px rgba(200,30,44,0.4); } .ai-call-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .ai-call-avatar-wrap::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from 0deg, #c81e2c, #e8b923, #050506, #c81e2c); z-index: 1; animation: aiRingSpin 3.5s linear infinite; } .ai-call-ring { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); animation: aiCallRingPulse 1.8s ease-out infinite; z-index: 1; } @keyframes aiCallRingPulse { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.25); opacity: 0; } } .ai-call-name { color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 4px; } .ai-call-status { color: rgba(255,255,255,0.65); font-size: 12px; margin-bottom: 26px; } .ai-call-status.listening { color: #4ade80; } .ai-call-status.speaking { color: #e8b923; } .ai-call-caption { color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.6; max-width: 300px; min-height: 60px; margin-bottom: 30px; } .ai-call-retry-btn { display: flex; align-items: center; gap: 8px; padding: 12px 22px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 16px; } .ai-call-retry-btn:hover { background: rgba(255,255,255,0.22); } #aiCallRetryBtn.hidden { display: none; } .ai-call-end-btn { width: 58px; height: 58px; border-radius: 50%; background: #ef4444; color: #fff; border: none; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(239,68,68,0.45); transition: transform 0.15s ease; } .ai-call-end-btn:hover { transform: scale(1.08); } .ai-chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .ai-msg { max-width: 85%; } .ai-msg p { padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; } .ai-msg-bot { align-self: flex-start; } .ai-msg-bot p { background: #fff; border: 1px solid #e5e7eb; color: #1e293b; border-bottom-left-radius: 4px; } .ai-msg-user { align-self: flex-end; } .ai-msg-user p { background: #a8121f; color: #fff; border-bottom-right-radius: 4px; } .ai-btn-row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; } .ai-call-btn, .ai-whatsapp-btn, .ai-start-call-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; } .ai-call-btn { background: #202024; color: #fff; } .ai-whatsapp-btn { background: #22c55e; color: #fff; } .ai-start-call-btn { background: linear-gradient(135deg, #c81e2c, #e8b923); color: #fff; animation: startCallPulse 1.5s ease-in-out 3; } .ai-quick-reply { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 10px; font-size: 11.5px; font-weight: 700; background: #f4f4f5; color: #202024; border: 1px solid #e4e4e7; cursor: pointer; transition: background 0.15s ease; } .ai-quick-reply:hover { background: #e4e4e7; } @keyframes startCallPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } .ai-typing { padding: 0 16px 10px; display: flex; gap: 4px; } .ai-typing.hidden { display: none; } .ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; animation: aiTypingBounce 1.2s infinite ease-in-out; } .ai-typing span:nth-child(2) { animation-delay: 0.15s; } .ai-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes aiTypingBounce { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } .ai-chat-input-row { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid #e5e7eb; flex-shrink: 0; } .ai-chat-input { flex: 1; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 14px; font-size: 13px; outline: none; } .ai-chat-input:focus { border-color: #c81e2c; } .ai-chat-mic, .ai-chat-send { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ai-chat-mic { background: #f1f5f9; color: #64748b; } .ai-chat-mic.listening { background: #fdecec; color: #c81e2c; animation: aiStatusPulse 1s infinite; } .ai-chat-send { background: #c81e2c; color: #fff; } /* ============================================================ DESKTOP APP SHELL — activated only via .desktop-mode on , added by JS when the screen is >=1024px. Mobile is untouched. ============================================================ */ html.desktop-mode body { background: #eef1f4; } html.desktop-mode .app-container { max-width: 100%; width: 100%; box-shadow: none; background-color: transparent; } html.desktop-mode header.app-sticky-header, html.desktop-mode #bottomNav { display: none !important; } /* Desktop already has the right sidebar showing copyright/privacy links (see initDesktopShell in main.js) — the full multi-column footer is mobile-only to avoid showing the same information twice on desktop. */ html.desktop-mode #contact-footer { display: none !important; } html.desktop-mode #contact-footer .ds-contact-dup { display: none; } #desktopTitleBar { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: #ffffff; border-bottom: 1px solid #e5e8ee; display: flex; align-items: center; padding: 0 18px; gap: 16px; z-index: 300; box-shadow: 0 1px 3px rgba(0,0,0,0.03); } #desktopTitleBar .title-dots { display: flex; gap: 7px; } #desktopTitleBar .title-dot { width: 12px; height: 12px; border-radius: 50%; } #desktopTitleBar .title-dot.red { background: #ff5f57; } #desktopTitleBar .title-dot.yellow { background: #febc2e; } #desktopTitleBar .title-dot.green { background: #28c840; } #desktopTitleBar .title-app-name { font-weight: 800; font-size: 13px; color: #050506; display: flex; align-items: center; gap: 8px; } .title-search-wrap { position: relative; flex: 1; max-width: 440px; margin: 0 auto; } #desktopTitleBar .title-search { background: #f1f3f7; border-radius: 9px; padding: 8px 14px; font-size: 12.5px; color: #9aa0ab; display: flex; align-items: center; gap: 9px; border: 1.5px solid transparent; transition: all 0.18s ease; } #desktopTitleBar .title-search:focus-within { background: #fff; border-color: #c81e2c; box-shadow: 0 2px 10px rgba(200,30,44,0.14); } #desktopTitleBar .title-search i { color: #b0b5bf; font-size: 12px; } #desktopTitleBar .title-search:focus-within i { color: #c81e2c; } #desktopSearchInput { border: none; outline: none; background: transparent; width: 100%; font-size: 12.5px; color: #050506; } #desktopSearchInput::placeholder { color: #9aa0ab; } .title-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(10,10,12,0.16); border: 1px solid #eef0f5; max-height: 360px; overflow-y: auto; z-index: 320; padding: 6px; } .search-result-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; transition: background 0.12s ease; } .search-result-item:hover { background: #fdf6e3; } .search-result-item i { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #050506, #c81e2c); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .search-result-item > div { display: flex; flex-direction: column; gap: 1px; } .search-result-label { font-size: 12.5px; font-weight: 700; color: #050506; } .search-result-section { font-size: 10px; font-weight: 600; color: #9aa0ab; text-transform: uppercase; letter-spacing: 0.03em; } .search-no-results { padding: 14px; text-align: center; font-size: 12px; color: #9aa0ab; } #desktopTitleBar .title-cta { background: linear-gradient(135deg, #c81e2c, #8a0f19); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 18px; border-radius: 8px; cursor: pointer; border: none; white-space: nowrap; display: flex; align-items: center; gap: 7px; } #desktopIconRail { position: fixed; top: 52px; left: 0; bottom: 0; width: 76px; background: #0c0c0e; display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 4px; z-index: 290; overflow-y: auto; scrollbar-width: none; } #desktopIconRail::-webkit-scrollbar { display: none; } #desktopIconRail .rail-item { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); font-size: 17px; cursor: pointer; transition: all 0.2s ease; position: relative; } #desktopIconRail .rail-item:hover { background: rgba(255,255,255,0.08); color: #fff; } #desktopIconRail .rail-item.active { background: linear-gradient(135deg, #c81e2c, #e8b923); color: #fff; } #railTooltip { position: fixed; transform: translateY(-50%); background: #050506; color: #fff; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 400; } #railTooltip.visible { opacity: 1; } html.desktop-mode #pageContent { margin-left: 76px; margin-right: 300px; padding-top: 52px; display: block; } /* Let each section keep its own natural width (max-w-6xl/4xl/3xl, already set inline per section) and its own background (white, light-gray, or gradient) — this preserves the alternating section rhythm instead of forcing every section into one identical nested white card, which was creating an ugly "box inside a box" double-shadow look. */ html.desktop-mode #pageContent > section { padding-left: 3rem !important; padding-right: 3rem !important; } html.desktop-mode #pageContent > section:first-of-type { padding-top: 2.5rem !important; } html.desktop-mode #pageContent .grid.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.desktop-mode #pageContent .grid.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.desktop-mode button, html.desktop-mode a { transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } #desktopSidebar { position: fixed; top: 52px; right: 0; bottom: 0; width: 300px; background: #ffffff; border-left: 1px solid #eef0f5; padding: 22px 20px 20px; overflow-y: auto; z-index: 280; } #desktopSidebar .ds-card { background: #f7f8fb; border-radius: 14px; padding: 16px; margin-bottom: 16px; border: 1px solid #eef0f5; } #desktopSidebar .ds-title { font-size: 10px; font-weight: 800; color: #9aa0ab; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } #desktopSidebar .ds-stats-row { display: flex; justify-content: space-between; text-align: center; } #desktopSidebar .ds-stats-row div { flex: 1; } #desktopSidebar .ds-stats-row strong { display: block; font-size: 17px; font-weight: 800; color: #050506; } #desktopSidebar .ds-stats-row span { font-size: 9px; font-weight: 700; color: #9aa0ab; text-transform: uppercase; } #desktopSidebar .ds-list { list-style: none; padding: 0; margin: 0; } #desktopSidebar .ds-list li { font-size: 11.5px; color: #3a3f4b; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; line-height: 1.4; } #desktopSidebar .ds-list li i { color: #c81e2c; margin-top: 2px; font-size: 10px; } #desktopSidebar .ds-cta { background: linear-gradient(135deg, #050506, #202024); border-radius: 14px; padding: 18px 16px; text-align: center; margin-bottom: 16px; } #desktopSidebar .ds-cta p { color: rgba(255,255,255,0.75); font-size: 11px; font-weight: 600; margin-bottom: 10px; } #desktopSidebar .ds-cta button { background: linear-gradient(135deg, #c81e2c, #e8b923); color: #fff; border: none; font-size: 12px; font-weight: 700; padding: 10px 16px; border-radius: 9px; width: 100%; cursor: pointer; } #desktopSidebar .ds-contact a { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; color: #050506; padding: 8px 0; text-decoration: none; border-bottom: 1px solid #eef0f5; } #desktopSidebar .ds-contact a:last-child { border-bottom: none; } #desktopSidebar .ds-contact a i { width: 16px; color: #c81e2c; } #desktopSidebar .ds-footer-legal { text-align: center; padding: 14px 4px 4px; } #desktopSidebar .ds-footer-legal a { display: inline-block; font-size: 10.5px; font-weight: 600; color: #7c85a3; text-decoration: underline; text-underline-offset: 2px; margin: 0 7px 5px; transition: color 0.2s ease; } #desktopSidebar .ds-footer-legal a:hover { color: #c81e2c; } #desktopSidebar .ds-footer-legal p { font-size: 9.5px; color: #9aa2ba; letter-spacing: 0.02em; margin-top: 4px; } /* Theme rules for the new bottom nav + header (in addition to the existing ones above) */ html.theme-sepia #siteHeader, html.theme-sepia #bottomNav { background: rgba(244,236,216,0.95) !important; } html.theme-night #siteHeader, html.theme-night #bottomNav { background: rgba(11,11,13,0.95) !important; border-color: #26262a !important; } html.theme-night .ai-msg-bot p { background: #17171a; border-color: #26262a; color: #e5e5e7; } /* ===================== Blog post content (admin-authored HTML) ===================== */ .prose-blog h2 { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: #0c0c0e; margin-top: 1.75rem; margin-bottom: 0.75rem; } .prose-blog h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: #0c0c0e; margin-top: 1.5rem; margin-bottom: 0.5rem; } .prose-blog p { margin-bottom: 1rem; } .prose-blog ul, .prose-blog ol { margin: 0 0 1rem 1.25rem; } .prose-blog ul { list-style: disc; } .prose-blog ol { list-style: decimal; } .prose-blog li { margin-bottom: 0.4rem; } .prose-blog a { color: #a8121f; text-decoration: underline; } .prose-blog img { border-radius: 12px; margin: 1rem 0; max-width: 100%; height: auto; } .prose-blog blockquote { border-left: 3px solid #e8b923; padding-left: 1rem; color: #6b6b70; font-style: italic; margin: 1rem 0; } .prose-blog strong { color: #0c0c0e; }