/* ============================================================ NOMAD BLUEPRINTS - SITE STYLES Three switchable moods via [data-theme] on ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); @font-face { font-family: 'Josefin Sans'; src: url('./fonts/JosefinSans-VariableFont_wght.ttf') format('truetype'); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Share Tech Mono'; src: url('./fonts/ShareTechMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { --f-body: 'DM Sans', sans-serif; --f-display: 'Josefin Sans', sans-serif; --f-mono: 'Share Tech Mono', monospace; } /* ── MIDNIGHT - dark, cinematic, glowing ── */ :root, [data-theme="midnight"] { --bg0: #061629; --bg1: #0A2138; --bg2: #0D2A45; --ink: #EAF4FF; --ink-sub: rgba(234,244,255,0.64); --ink-faint: rgba(234,244,255,0.36); --brand: #5CE1E6; --brand-soft: rgba(92,225,230,0.14); --green: #6CCB45; --line: rgba(92,225,230,0.22); --line-soft: rgba(92,225,230,0.10); --grid: rgba(92,225,230,0.045); --map-land: rgba(92,225,230,0.26); --map-coast: rgba(92,225,230,0.80); --map-grat: rgba(92,225,230,0.10); --pin: #5CE1E6; --cta-bg: #5CE1E6; --cta-fg: #062035; --cta2-line: rgba(234,244,255,0.4); --nav-bg: rgba(6,22,41,0.82); --card-shadow: 0 12px 48px rgba(0,0,0,0.45); --glow: 0 0 24px rgba(92,225,230,0.25); } /* ── DAYLIGHT - light, airy, modern travel brand ── */ [data-theme="daylight"] { --bg0: #FFFFFF; --bg1: #F3F7FA; --bg2: #FFFFFF; --ink: #11293F; --ink-sub: rgba(17,41,63,0.64); --ink-faint: rgba(17,41,63,0.38); --brand: #0C447C; --brand-soft: rgba(12,68,124,0.08); --green: #4CA626; --line: rgba(12,68,124,0.18); --line-soft: rgba(12,68,124,0.08); --grid: rgba(12,68,124,0.05); --map-land: rgba(12,68,124,0.10); --map-coast: rgba(12,68,124,0.45); --map-grat: rgba(12,68,124,0.08); --pin: #0C447C; --cta-bg: #0C447C; --cta-fg: #FFFFFF; --cta2-line: rgba(12,68,124,0.4); --nav-bg: rgba(255,255,255,0.86); --card-shadow: 0 12px 48px rgba(12,68,124,0.14); --glow: none; } /* ── BLUEPRINT - the brand blue, executed bolder ── */ [data-theme="blueprint"] { --bg0: #0C447C; --bg1: #0A3A6B; --bg2: #0E4C8A; --ink: #FFFFFF; --ink-sub: rgba(255,255,255,0.70); --ink-faint: rgba(255,255,255,0.42); --brand: #5CE1E6; --brand-soft: rgba(92,225,230,0.15); --green: #7BD957; --line: rgba(255,255,255,0.24); --line-soft: rgba(255,255,255,0.10); --grid: rgba(255,255,255,0.055); --map-land: rgba(92,225,230,0.30); --map-coast: rgba(92,225,230,0.84); --map-grat: rgba(255,255,255,0.10); --pin: #5CE1E6; --cta-bg: #5CE1E6; --cta-fg: #0C447C; --cta2-line: rgba(255,255,255,0.45); --nav-bg: rgba(10,52,96,0.85); --card-shadow: 0 12px 48px rgba(0,0,0,0.30); --glow: 0 0 24px rgba(92,225,230,0.20); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--f-body); background: var(--bg0); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; } a { color: inherit; } img { max-width: 100%; } /* blueprint grid overlay utility (dial: 4/10 - subtle) */ .v2-grid-bg { background-image: repeating-linear-gradient(var(--grid) 0px, var(--grid) 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, var(--grid) 0px, var(--grid) 1px, transparent 1px, transparent 40px); } /* mono annotation */ .v2-mono { font-family: var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; } /* scroll entrance — disabled: all content visible immediately, no transition */ @media (prefers-reduced-motion: no-preference) { .v2-reveal { opacity: 1; transform: none; transition: none; } .v2-reveal.v2-in { opacity: 1; transform: none; } .v2-reveal-d1 { transition-delay: 0s; } .v2-reveal-d2 { transition-delay: 0s; } .v2-reveal-d3 { transition-delay: 0s; } } @keyframes v2-pulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } } @keyframes v2-dash { to { stroke-dashoffset: -20; } } @keyframes v2-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } @keyframes v2-green-glow { 0%, 100% { box-shadow: 0 0 4px rgba(108,203,69,0.35); border-color: rgba(108,203,69,0.5); } 50% { box-shadow: 0 0 16px rgba(108,203,69,0.85), 0 0 28px rgba(108,203,69,0.5); border-color: rgba(108,203,69,1); } } @keyframes v2-teal-glow { 0%, 100% { box-shadow: 0 0 5px rgba(92,225,230,0.40); border-color: rgba(92,225,230,0.55); } 50% { box-shadow: 0 0 16px rgba(92,225,230,0.90), 0 0 30px rgba(92,225,230,0.45); border-color: rgba(92,225,230,1); } } .v2-teal-pulse { animation: v2-teal-glow 2.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .v2-teal-pulse { animation: none; } } @keyframes v2-conn-pulse { 0%, 100% { opacity: 0.4; box-shadow: 0 0 3px var(--brand); } 50% { opacity: 1; box-shadow: 0 0 10px var(--brand), 0 0 18px var(--brand); } } @keyframes v2-conn-shoot { from { background-position: 150% 0; } to { background-position: -50% 0; } } @keyframes v2-conn-shoot-v { from { background-position: 0 150%; } to { background-position: 0 -50%; } } /* pulsating teal ring around the checklist box */ .v2-checklist-pulse { border: 3px solid rgba(92,225,230,0.9); animation: v2-checklist-pulse 2s ease-in-out infinite; } @keyframes v2-checklist-pulse { 0%, 100% { box-shadow: 0 12px 34px rgba(12,68,124,0.28), 0 0 0 0 rgba(92,225,230,0.7); border-color: rgba(92,225,230,1); } 50% { box-shadow: 0 12px 34px rgba(12,68,124,0.28), 0 0 0 11px rgba(92,225,230,0); border-color: rgba(92,225,230,0.4); } } @media (prefers-reduced-motion: reduce) { .v2-checklist-pulse { animation: none; } } @keyframes v2-navy-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(12,68,124,0.35); border-color: rgba(12,68,124,0.45); } 50% { box-shadow: 0 0 0 2px rgba(12,68,124,0.95), 0 0 14px rgba(12,68,124,0.30); border-color: rgba(12,68,124,1); } } .v2-navy-pulse { animation: v2-navy-pulse 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .v2-navy-pulse { animation: none; } }