/* ========================================================================== World Imaging — main stylesheet - Vibrant blue palette - Light + Dark themes (auto via prefers-color-scheme, manual override by setting data-theme on ) - Theme tokens drive everything; no hard-coded colors that fail contrast - Scales gracefully from 360px to 4K ========================================================================== */ /* -------------------------------------------------------------------------- Theme tokens -------------------------------------------------------------------------- */ :root { /* Light theme */ --c-bg: #FFFFFF; --c-bg-soft: #EAF2FB; --c-bg-soft-2: #DCE9F7; --c-surface: #F4F7FB; --c-fg: #0B1E5C; --c-fg-muted: rgba(11, 30, 92, 0.72); --c-fg-subtle: rgba(11, 30, 92, 0.55); --c-border: rgba(11, 30, 92, 0.14); --c-accent: #1A6FE0; --c-accent-2: #0D4FB8; --c-accent-3: #3B9CFF; --c-deep: #0B1E5C; --c-deep-fg: #FFFFFF; --c-deep-fg-muted: rgba(255, 255, 255, 0.78); --c-deep-fg-subtle: rgba(255, 255, 255, 0.55); --c-gold: #E0B341; --c-stone: #6B7C99; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-bg: #06122E; --c-bg-soft: #0E2552; --c-bg-soft-2: #112B5E; --c-surface: #0E2350; --c-fg: #DCE9F7; --c-fg-muted: rgba(220, 233, 247, 0.78); --c-fg-subtle: rgba(220, 233, 247, 0.55); --c-border: rgba(220, 233, 247, 0.16); --c-accent: #5BAEFF; --c-accent-2: #3B9CFF; --c-accent-3: #8CC8FF; --c-deep: #04091F; --c-deep-fg: #FFFFFF; --c-deep-fg-muted: rgba(255, 255, 255, 0.82); --c-deep-fg-subtle: rgba(255, 255, 255, 0.55); --c-gold: #F0C661; --c-stone: #8FA3C2; } } :root[data-theme="dark"] { --c-bg: #06122E; --c-bg-soft: #0E2552; --c-bg-soft-2: #112B5E; --c-surface: #0E2350; --c-fg: #DCE9F7; --c-fg-muted: rgba(220, 233, 247, 0.78); --c-fg-subtle: rgba(220, 233, 247, 0.55); --c-border: rgba(220, 233, 247, 0.16); --c-accent: #5BAEFF; --c-accent-2: #3B9CFF; --c-accent-3: #8CC8FF; --c-deep: #04091F; --c-deep-fg: #FFFFFF; --c-deep-fg-muted: rgba(255, 255, 255, 0.82); --c-deep-fg-subtle: rgba(255, 255, 255, 0.55); --c-gold: #F0C661; --c-stone: #8FA3C2; } html { scroll-behavior: smooth; } body { background-color: var(--c-bg); color: var(--c-fg); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.25s, color 0.25s; } /* -------------------------------------------------------------------------- 4K & ultra-wide scaling -------------------------------------------------------------------------- */ @media (min-width: 1920px) { html { font-size: 17px; } .container-x { max-width: 1600px !important; } } @media (min-width: 2560px) { html { font-size: 19px; } .container-x { max-width: 1920px !important; } } @media (min-width: 3200px) { html { font-size: 22px; } .container-x { max-width: 2400px !important; } } /* -------------------------------------------------------------------------- Typography helpers -------------------------------------------------------------------------- */ .eyebrow { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-accent); } .eyebrow-on-deep { color: var(--c-accent-3); } .display-h { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; color: var(--c-fg); } .text-fg { color: var(--c-fg) !important; } .text-fg-muted { color: var(--c-fg-muted) !important; } .text-fg-subtle { color: var(--c-fg-subtle) !important; } .text-on-deep { color: var(--c-deep-fg) !important; } .text-on-deep-muted { color: var(--c-deep-fg-muted) !important; } .text-on-deep-subtle{ color: var(--c-deep-fg-subtle) !important; } .text-accent { color: var(--c-accent) !important; } .text-accent-2 { color: var(--c-accent-2) !important; } .text-gold { color: var(--c-gold) !important; } /* -------------------------------------------------------------------------- Themed surfaces -------------------------------------------------------------------------- */ .bg-surface { background-color: var(--c-surface); } .bg-soft { background-color: var(--c-bg-soft); } .bg-soft-2 { background-color: var(--c-bg-soft-2); } .bg-deep { background-color: var(--c-deep); } .border-themed { border-color: var(--c-border) !important; } /* -------------------------------------------------------------------------- Decorative dot rule -------------------------------------------------------------------------- */ .dot-rule { display: inline-flex; align-items: center; gap: 0.5rem; } .dot-rule::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); } .dot-rule.on-deep::before { background: var(--c-accent-3); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn-primary { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--c-deep); color: var(--c-deep-fg); padding: 0.95rem 1.6rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; transition: background 0.25s, transform 0.25s; } .btn-primary:hover { background: var(--c-accent); transform: translateY(-1px); } .btn-outline { display: inline-flex; align-items: center; gap: 0.6rem; border: 1.5px solid var(--c-fg); color: var(--c-fg); padding: 0.85rem 1.5rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; transition: all 0.25s; } .btn-outline:hover { background: var(--c-fg); color: var(--c-bg); } .btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c-accent); font-size: 0.875rem; font-weight: 500; transition: gap 0.25s, color 0.25s; } .btn-ghost:hover { gap: 0.85rem; color: var(--c-accent-2); } .btn-gold { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--c-gold); color: #0B1E5C; padding: 0.95rem 1.6rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; transition: background 0.25s, transform 0.25s; } .btn-gold:hover { background: #FFFFFF; transform: translateY(-1px); } /* -------------------------------------------------------------------------- Animations -------------------------------------------------------------------------- */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .float { animation: float 8s ease-in-out infinite; } @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .rise { animation: rise 0.9s ease-out both; } .rise-1 { animation-delay: 0.1s; } .rise-2 { animation-delay: 0.25s; } .rise-3 { animation-delay: 0.4s; } .rise-4 { animation-delay: 0.55s; } /* -------------------------------------------------------------------------- Cards & tiles -------------------------------------------------------------------------- */ .card-hover { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s; } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(11, 30, 92, 0.4); } .tile { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 1 / 1; } .tile-tall { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; } /* -------------------------------------------------------------------------- Underline link -------------------------------------------------------------------------- */ .link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.4s; } .link-underline:hover { background-size: 0% 1px; background-position: 100% 100%; } /* -------------------------------------------------------------------------- Form fields — themed -------------------------------------------------------------------------- */ .field { background: transparent; border: none; border-bottom: 1.5px solid var(--c-border); padding: 0.75rem 0; width: 100%; font-family: 'Inter', sans-serif; color: var(--c-fg); transition: border-color 0.3s; font-size: 0.95rem; } .field:focus { outline: none; border-bottom-color: var(--c-accent); } .field::placeholder { color: var(--c-fg-subtle); } /* Form fields on the always-deep contact section */ .field-on-deep { background: transparent; border: none; border-bottom: 1.5px solid rgba(255, 255, 255, 0.32); padding: 0.75rem 0; width: 100%; font-family: 'Inter', sans-serif; color: #FFFFFF; transition: border-color 0.3s; font-size: 0.95rem; } .field-on-deep:focus { outline: none; border-bottom-color: var(--c-accent-3); } .field-on-deep::placeholder { color: rgba(255, 255, 255, 0.55); } .field-on-deep option { background: #0B1E5C; color: #FFFFFF; } /* -------------------------------------------------------------------------- Coordinate marquee -------------------------------------------------------------------------- */ .marquee { display: flex; gap: 4rem; animation: marquee 50s linear infinite; white-space: nowrap; color: var(--c-fg-subtle); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- Toggles (language + theme) -------------------------------------------------------------------------- */ .toggle-pill { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-bg); } .lang-btn, .theme-btn { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.12em; padding: 0.35rem 0.6rem; border-radius: 999px; transition: background 0.25s, color 0.25s; cursor: pointer; border: none; background: transparent; color: var(--c-fg-subtle); display: inline-flex; align-items: center; justify-content: center; } .theme-btn { padding: 0.35rem 0.5rem; } .lang-btn[aria-pressed="true"], .theme-btn[aria-pressed="true"] { background: var(--c-deep); color: var(--c-deep-fg); } .lang-btn:hover, .theme-btn:hover { color: var(--c-fg); } .lang-btn[aria-pressed="true"]:hover, .theme-btn[aria-pressed="true"]:hover { color: var(--c-deep-fg); } .theme-btn svg { width: 16px; height: 16px; display: block; } /* -------------------------------------------------------------------------- Hero globe image -------------------------------------------------------------------------- */ .hero-globe-wrap { position: relative; width: 100%; border-radius: 4px; overflow: hidden; } .hero-globe { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 40px rgba(11, 30, 92, 0.25)); } :root[data-theme="dark"] .hero-globe, :root:not([data-theme="light"]) .hero-globe { filter: drop-shadow(0 12px 40px rgba(91, 174, 255, 0.18)); } .hero-globe-pin { position: absolute; background: rgba(255, 255, 255, 0.92); color: #0B1E5C; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.75rem; line-height: 1.2; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); } .hero-globe-pin .label { font-family: 'DM Mono', monospace; font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(11, 30, 92, 0.6); } .hero-globe-pin .name { font-family: 'Fraunces', serif; font-size: 0.875rem; margin-top: 2px; color: #0B1E5C; } /* -------------------------------------------------------------------------- Service tile with photographic background (UAV / LiDAR / Topographic) -------------------------------------------------------------------------- */ .tile-photo { position: relative; border-radius: 4px; overflow: hidden; display: block; isolation: isolate; /* Create a new stacking context for the caption layer */ } .tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } /* Bottom-anchored gradient so caption text stays readable */ .tile-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(11, 30, 92, 0) 0%, rgba(11, 30, 92, 0) 40%, rgba(11, 30, 92, 0.65) 78%, rgba(11, 30, 92, 0.92) 100% ); pointer-events: none; z-index: 1; } .tile-photo .tile-caption { position: absolute; left: 1.25rem; bottom: 1.25rem; right: 1.25rem; z-index: 2; color: #FFFFFF; pointer-events: none; } .tile-photo .tile-caption .num { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.18em; color: var(--c-gold); text-transform: uppercase; display: block; margin-bottom: 0.25rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .tile-photo .tile-caption .label { font-family: 'Fraunces', serif; font-size: 1.5rem; line-height: 1.1; color: #FFFFFF; display: block; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } /* -------------------------------------------------------------------------- AI Chat widget -------------------------------------------------------------------------- */ .chat-window { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; height: 480px; max-height: 70vh; } .chat-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 0.75rem; background: var(--c-bg-soft); } .chat-header .dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); animation: chatPulse 2.5s ease-in-out infinite; flex-shrink: 0; } @keyframes chatPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.08); } } .chat-header .who { font-family: 'Fraunces', serif; font-size: 1rem; color: var(--c-fg); line-height: 1.1; } .chat-header .role { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-fg-subtle); margin-top: 2px; } .chat-log { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; } .chat-msg { max-width: 85%; padding: 0.7rem 1rem; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; } .chat-msg.bot { background: var(--c-bg-soft); color: var(--c-fg); align-self: flex-start; border-bottom-left-radius: 4px; } .chat-msg.user { background: var(--c-accent); color: #FFFFFF; align-self: flex-end; border-bottom-right-radius: 4px; } .chat-msg.typing { background: var(--c-bg-soft); color: var(--c-fg-subtle); align-self: flex-start; border-bottom-left-radius: 4px; font-style: italic; display: inline-flex; gap: 4px; align-items: center; } .chat-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--c-fg-subtle); animation: chatDot 1.2s infinite; } .chat-msg.typing span:nth-child(2) { animation-delay: 0.15s; } .chat-msg.typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes chatDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .chat-suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.25rem 0.75rem; } .chat-chip { font-size: 0.78rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--c-border); color: var(--c-fg-muted); background: transparent; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; } .chat-chip:hover { border-color: var(--c-accent); color: var(--c-accent); } .chat-form { display: flex; gap: 0.5rem; padding: 0.85rem 1rem; border-top: 1px solid var(--c-border); background: var(--c-bg); } .chat-input { flex: 1; padding: 0.65rem 0.9rem; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-fg); font-family: 'Inter', sans-serif; font-size: 0.92rem; transition: border-color 0.2s; } .chat-input:focus { outline: none; border-color: var(--c-accent); } .chat-input::placeholder { color: var(--c-fg-subtle); } .chat-send { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--c-deep); color: var(--c-deep-fg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; flex-shrink: 0; } .chat-send:hover { background: var(--c-accent); transform: scale(1.05); } .chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .chat-disclaimer { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-align: center; color: var(--c-fg-subtle); padding: 0.5rem 1rem 0.85rem; text-transform: uppercase; background: var(--c-bg); } /* -------------------------------------------------------------------------- Compact contact form (sits beside the chat) -------------------------------------------------------------------------- */ .contact-card { padding: 1.5rem; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); } /* -------------------------------------------------------------------------- Footer (replaces the dark contact section) -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--c-border); padding: 4rem 0 2rem; color: var(--c-fg); } .site-footer a { color: var(--c-fg); } .site-footer .hq-card { border-left: 2px solid var(--c-accent); padding-left: 1rem; } .site-footer .hq-card .label { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-fg-subtle); margin-bottom: 0.4rem; } .site-footer .hq-card .city { font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--c-fg); } .site-footer .hq-card .coords { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--c-fg-subtle); margin: 0.3rem 0 0.6rem; } /* -------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .float, .marquee { animation: none; } .rise { animation: none; opacity: 1; transform: none; } .chat-header .dot, .chat-msg.typing span { animation: none; } html { scroll-behavior: auto; } body, .lang-btn, .theme-btn, .btn-primary, .btn-outline, .btn-ghost { transition: none; } }