/* ===================================================================================================================== mapbow - THE DESIGN SYSTEM ("Spectrum Velocity") Precision cartography rather than soft software: a flat carbon-black (or paper-white) ground with an engineering grid that fades out below the fold, hairline rules, square corners and one cut angle used everywhere - the chamfer, a 45-degree cut on the top-left and bottom-right of buttons and badges. The hexagon is the one recurring shape (every icon tile). The bow - a five-colour spectrum (teal, blue, violet, pink, amber) - is used as a line of light: on an edge, a rule, an underline, a corner wedge, the primary button - never as a fog. Archivo, expanded and set in capitals, for headlines, buttons and small tracked labels; Inter for reading; JetBrains Mono for numbers and coordinates. Dark by default, light on request. --cut / --chamfer the cut corners (buttons are clipped to it, so their focus ring is drawn inside) --hex the hexagon (icon tiles, avatars, the auth mark) --rule the spectrum as a hairline Motion is transform and opacity only (cheap on phones) and stops for prefers-reduced-motion. Every page loads this file; the studio and the map viewer add studio.css on top. Coded By Darko G. ===================================================================================================================== */ :root { --bg: #05070B; --bg-2: #090C12; --surface: #0C1017; --surface-solid: #0C1017; --surface-2: #11161F; --surface-3: #18202B; --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16); --text: #F3F5F8; --text-2: #C3CAD5; --muted: #8A94A3; --dim: #5A6472; --c-teal: #19E3B1; --c-blue: #3BA7FF; --c-violet: #8B5CF6; --c-pink: #FF4D8D; --c-amber: #FFB547; --c-green: #22C55E; --c-red: #FF5470; --spectrum: linear-gradient(90deg, #19E3B1 0%, #3BA7FF 28%, #8B5CF6 52%, #FF4D8D 76%, #FFB547 100%); --rule: var(--spectrum); --primary: #3BA7FF; --primary-grad: linear-gradient(115deg, #19E3B1 0%, #3BA7FF 48%, #8B5CF6 100%); --glow: 0 0 0 1px rgba(59, 167, 255, .45); --radius: 3px; --radius-sm: 2px; --radius-lg: 4px; --shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 2px 6px rgba(0, 0, 0, .4); --font-display: "Archivo", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --nav-h: 68px; --ease: cubic-bezier(.2, .8, .2, 1); --cut: 10px; --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); --grid-line: rgba(255, 255, 255, .03); --input-bg: rgba(255, 255, 255, .025); --fl-focus: #5EEAD4; --wedge: #3BA7FF; color-scheme: dark; } [data-theme="light"] { --bg: #F2F3F6; --bg-2: #E8EAEF; --surface: #FFFFFF; --surface-solid: #FFFFFF; --surface-2: #F6F7F9; --surface-3: #ECEEF2; --line: rgba(10, 13, 18, .09); --line-strong: rgba(10, 13, 18, .2); --text: #0A0D12; --text-2: #2A3039; --muted: #5C6470; --dim: #8C949F; --primary: #2563EB; --glow: 0 0 0 1px rgba(37, 99, 235, .4); --shadow: 0 18px 40px -24px rgba(10, 13, 18, .28); --shadow-lg: 0 40px 90px -40px rgba(10, 13, 18, .35), 0 2px 6px rgba(10, 13, 18, .06); --grid-line: rgba(10, 13, 18, .045); --input-bg: #FFFFFF; --fl-focus: #0E7490; --wedge: #2563EB; color-scheme: light; } /* Flag emoji on Windows (which has none): Twemoji's flags only, fetched only when a flag is on the page (unicode-range). */ @font-face { font-family: "Twemoji Country Flags"; unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2"); font-display: swap; } /* ---- BASE ------------------------------------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 "Twemoji Country Flags", var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: var(--c-blue); text-decoration: none; transition: color .15s; } a:hover { color: var(--text); } [data-theme="light"] a { color: var(--primary); } [data-theme="light"] a:hover { color: #0A0D12; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 .5em; color: var(--text); } h1, h2, .display { font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; line-height: 1.02; } h1 { font-size: clamp(1.9rem, 4vw, 3.2rem); } h2 { font-size: clamp(1.45rem, 2.8vw, 2.25rem); } h3 { font-size: 1.18rem; font-stretch: 112%; font-weight: 700; letter-spacing: -.005em; } h4 { font-stretch: 108%; font-weight: 700; } p { margin: 0 0 1em; } hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; } ::selection { background: var(--c-blue); color: #fff; } :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; border-radius: 0; } .container { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 24px; } .container.narrow { max-width: 760px; } .center { text-align: center; } .muted { color: var(--muted); } .small { font-size: .875rem; } .mono { font-family: var(--font-mono); font-size: .92em; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.6rem; } .mb-2 { margin-bottom: 1rem; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .hide-mobile { } .skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--surface-solid); padding: 8px 14px; } .skip:focus { left: 8px; } .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .signed-in .show-signed-out, .signed-out .show-signed-in, .paid .hide-paid, html:not(.paid) .paid-only { display: none !important; } .flag { font-family: 'Twemoji Country Flags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-style: normal; } .flag.big { font-size: 2rem; line-height: 1; } .kbd, kbd { font: 500 .78em var(--font-mono); padding: 2px 6px; border-radius: 0; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); box-shadow: inset 0 -1px 0 var(--line-strong); } .spectrum-text { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; } * { scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); } ::-webkit-scrollbar-thumb:hover { background: var(--c-blue); } /* the ground: an engineering grid that fades out below the fold, and one hard beam of the spectrum across the top. Both are fixed and static - painted once, never animated. */ .ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .ground-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 72px 72px; background-position: -1px -1px; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 90%); } .ground-glow { position: absolute; width: 140vw; height: 150px; top: -46px; left: -20vw; transform: rotate(-7deg); background: var(--spectrum); opacity: .16; filter: blur(64px); } .ground::after { content: ""; position: absolute; top: 0; right: -10vw; width: 62vw; height: 1px; background: linear-gradient(90deg, transparent, #3BA7FF 40%, #8B5CF6 70%, #FF4D8D); opacity: .7; } [data-theme="light"] .ground-glow { opacity: .1; } /* ---- BRAND ----------------------------------------------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text) !important; font: 800 1.36rem/1 var(--font-display); font-stretch: 118%; letter-spacing: -.02em; } .brand-mark { width: 34px; height: 34px; flex: none; } .brand-word b { font-weight: 800; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-word { white-space: nowrap; } /* ---- NAV ------------------------------------------------------------------------------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); transition: background-color .25s; } .site-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: 0; transition: opacity .3s; } .site-nav.is-scrolled { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .site-nav.is-scrolled::after { opacity: .75; } .nav-inner { max-width: 1320px; margin: 0 auto; height: 100%; padding: 0 24px; display: flex; align-items: center; gap: 28px; } .nav-links { display: flex; gap: 2px; flex: 1; } .nav-links a { position: relative; color: var(--text-2); font: 600 .74rem/1 var(--font-display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; padding: 10px 12px; white-space: nowrap; } .nav-links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); } .nav-links a.is-active { color: var(--text); } .nav-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; } .theme-toggle { --cut: 7px; width: 38px; height: 38px; border: 0; clip-path: var(--chamfer); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-2); cursor: pointer; display: grid; place-items: center; transition: background-color .2s, color .2s; } .theme-toggle::before { font: 400 15px/1 "Font Awesome 6 Pro"; content: "\f186"; } [data-theme="light"] .theme-toggle::before { content: "\e28f"; } .theme-toggle:hover { background: var(--surface-2); color: var(--text); } .theme-toggle:focus-visible, .nav-burger:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--c-blue); } .nav-burger { --cut: 7px; display: none; width: 42px; height: 42px; border: 0; clip-path: var(--chamfer); box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 18px; cursor: pointer; } .mobile-menu { display: none; } @media (max-width: 1200px) { .nav-inner { gap: 14px; } .nav-links { gap: 0; } .nav-links a { padding: 10px 8px; letter-spacing: .08em; } .nav-links a::after { left: 8px; right: 8px; } } @media (max-width: 1080px) { .nav-cta .show-signed-out.btn-ghost, .nav-cta .show-signed-in.btn-ghost { display: none; } } @media (max-width: 980px) { .nav-links { display: none; } .nav-burger { display: grid; place-items: center; } .hide-mobile { display: none !important; } .mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; background: var(--bg); padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 0; transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s .28s; overflow-y: auto; border-top: 1px solid var(--line); } .menu-open .mobile-menu { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s; } .mobile-menu a:not(.btn) { color: var(--text); font: 700 1rem/1.2 var(--font-display); font-stretch: 118%; letter-spacing: .06em; text-transform: uppercase; padding: 15px 4px; border-bottom: 1px solid var(--line); } .mobile-menu .btn { margin-top: 12px; } .menu-open { overflow: hidden; } .menu-open .site-nav { background: var(--bg); } } /* ---- BUTTONS --------------------------------------------------------------------------------------------------- Capitals in the expanded face, cut on the chamfer. Primary is the spectrum, flat; hover runs a bar of light across it. Ghost is a hairline in the text colour that fills on hover. Focus is drawn inside (clip-path clips outlines). */ .btn { --cut: 9px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 22px; border: 0; border-radius: 0; clip-path: var(--chamfer); overflow: hidden; font: 700 .8rem/1 var(--font-display); font-stretch: 118%; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; color: var(--text) !important; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .2s, color .2s, box-shadow .2s, opacity .2s, transform .12s; user-select: none; text-decoration: none; } .btn:active { transform: scale(.985); } .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--text); } .btn i { font-size: 1.05em; } .btn-primary { color: #fff !important; background: var(--primary-grad); background-size: 200% 100%; background-position: 0 50%; box-shadow: none; transition: background-position .5s var(--ease), opacity .2s, transform .12s; } .btn-primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent); transform: translateX(-160%) skewX(-28deg); transition: transform .7s var(--ease); pointer-events: none; } .btn-primary:hover { background-position: 100% 50%; } .btn-primary:hover::before { transform: translateX(420%) skewX(-28deg); } .btn-primary:focus-visible { box-shadow: inset 0 0 0 2px #fff; } .btn-ghost { background: transparent; } .btn-ghost:hover { background: var(--text); color: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--text); } .btn-dark { background: #0A0D12; color: #fff !important; box-shadow: none; } .btn-sm { --cut: 6px; height: 36px; padding: 0 15px; font-size: .7rem; letter-spacing: .07em; gap: 7px; } .btn-lg { --cut: 11px; height: 52px; padding: 0 28px; font-size: .86rem; } .btn-xl { --cut: 13px; height: 60px; padding: 0 34px; font-size: .92rem; letter-spacing: .1em; } .btn-block { width: 100%; } .btn-icon { --cut: 6px; width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; clip-path: var(--chamfer); background: transparent; color: var(--text-2); cursor: pointer; font-size: 16px; transition: background-color .15s, color .15s; padding: 0; } .btn-icon:hover { background: var(--surface-2); color: var(--text); } .btn-icon.is-on { background: rgba(59, 167, 255, .16); color: var(--c-blue); box-shadow: inset 0 0 0 1px rgba(59, 167, 255, .45); } .btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; } .btn.is-loading { color: transparent !important; pointer-events: none; } .btn.is-loading > * { visibility: hidden; } .btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; } .btn-ghost.is-loading::after { border-color: var(--line-strong); border-top-color: var(--text); } .btn i.fa-arrow-right { transition: transform .35s var(--ease); } .btn:hover i.fa-arrow-right { transform: translateX(4px); } @keyframes spin { to { transform: rotate(360deg); } } /* ---- FORMS ----------------------------------------------------------------------------------------------------- Square fields with a hairline; focus draws one line of the brand blue round them. */ .field { margin-bottom: 16px; position: relative; } .label { display: block; font-size: .86rem; font-weight: 600; color: var(--text-2); margin-bottom: 7px; } .label .opt { color: var(--dim); font-weight: 400; } .input, .select, .textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: 0; border: 1px solid var(--line-strong); background-color: var(--input-bg); color: var(--text); font: 400 .98rem var(--font-body); transition: border-color .2s, box-shadow .2s; } .textarea { height: auto; min-height: 130px; padding: 12px 14px; resize: vertical; line-height: 1.5; } .select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .select option { background: var(--surface-solid); color: var(--text); } .input:hover, .select:hover, .textarea:hover { border-color: var(--muted); } .input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--c-blue); box-shadow: 0 0 0 1px var(--c-blue), 0 10px 30px -18px rgba(59, 167, 255, .9); } .input::placeholder, .textarea::placeholder { color: var(--dim); } .is-invalid { border-color: var(--c-red) !important; box-shadow: 0 0 0 1px var(--c-red) !important; } .help { display: block; font-size: .8rem; color: var(--dim); margin-top: 6px; } .check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--text-2); cursor: pointer; } .check input { margin-top: 4px; accent-color: var(--c-blue); width: 16px; height: 16px; } .pw-wrap { position: relative; } .pw-wrap .input { padding-right: 46px; } .pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 0; z-index: 3; } .pw-eye:hover { color: var(--text); background: var(--surface-2); } /* IN-FIELD LABELS. A .field whose label sits right before its control (.input, .textarea, .select, or a .pw-wrap around an .input) keeps the label inside the field: resting in the middle while the field is empty, and gliding up to a small caption in its top edge on focus or once there is a value (tinted while focused). The control is padded for the caption from the start, so the text never jumps. "Has a value" is :not(:placeholder-shown) - core.js gives every such control a placeholder (MB.floatLabels) - and a select always has one, so its label is always up. The label shrinks by transform, not font-size (no re-layout per frame). Browsers without :has() keep the plain label above. */ @supports selector(:has(*)) { .field:has(> .label + :is(.input, .textarea, .select, .pw-wrap)) { position: relative; } .field > .label + :is(.input, .select), .field > .label + .pw-wrap > .input { height: 56px; padding-top: 22px; padding-bottom: 6px; } .field > .label + .textarea { padding-top: 28px; } .field > .label:has(+ :is(.input, .textarea, .select, .pw-wrap)) { position: absolute; z-index: 2; left: 15px; top: 28px; margin: 0; transform: translateY(-50%); transform-origin: 0 50%; max-width: calc(100% - 50px); pointer-events: none; color: var(--muted); font-size: .95rem; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: top .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); } .field > .label:has(+ .textarea) { top: 26px; } .field > .label:has(+ :is(.input, .textarea):is(:focus, :not(:placeholder-shown))), .field > .label:has(+ .pw-wrap > .input:is(:focus, :not(:placeholder-shown))), .field > .label:has(+ .input:-webkit-autofill), .field > .label:has(+ .pw-wrap > .input:-webkit-autofill), .field > .label:has(+ .select) { top: 14px; transform: translateY(-50%) scale(.76); } .field > .label:has(+ :is(.input, .textarea, .select):focus), .field > .label:has(+ .pw-wrap > .input:focus) { color: var(--fl-focus); } .field > .label:has(+ .is-invalid) { color: var(--c-red); } .field > .label + :is(.input, .textarea)::placeholder, .field > .label + .pw-wrap > .input::placeholder { color: transparent; transition: color .2s .1s; } .field > .label + :is(.input, .textarea):focus::placeholder, .field > .label + .pw-wrap > .input:focus::placeholder { color: var(--dim); } } /* ---- FEEDBACK -------------------------------------------------------------------------------------------------- Alerts and toasts carry a coloured bar on their leading edge. Toasts set their own colours (they are also shown in the studio, over the map), slide up and fade (transform + opacity only). */ .alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 0; border: 1px solid var(--line); border-left: 3px solid var(--c-blue); background: var(--surface-2); color: var(--text); font-size: .93rem; margin-bottom: 16px; } .alert i { margin-top: 3px; } .alert-danger { border-color: rgba(255, 84, 112, .35); border-left-color: var(--c-red); background: rgba(255, 84, 112, .09); color: #FFC2CC; } [data-theme="light"] .alert-danger { color: #9F1239; } .alert-success { border-color: rgba(34, 197, 94, .35); border-left-color: var(--c-teal); background: rgba(34, 197, 94, .09); } .alert-warning { border-color: rgba(255, 181, 71, .35); border-left-color: var(--c-amber); background: rgba(255, 181, 71, .09); } .form-error, .form-ok { display: none; } .form-error.is-shown, .form-ok.is-shown { display: flex; animation: rise .3s var(--ease); } .toasts { position: fixed; z-index: 1000; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 520px); } .toast { display: flex; gap: 11px; align-items: center; min-height: 46px; padding: 12px 18px 12px 15px; border-radius: 0; background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-strong); border-left: 3px solid var(--c-blue); box-shadow: var(--shadow-lg); font: 500 .92rem/1.4 var(--font-body); pointer-events: auto; max-width: 100%; opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .toast.is-in { opacity: 1; transform: none; } .toast > i { color: var(--c-blue); font-size: 1.05em; flex: none; } .toast > span { color: var(--text); } .toast-success { border-left-color: var(--c-teal); } .toast-success > i { color: var(--c-teal); } .toast-error { border-left-color: var(--c-red); } .toast-error > i { color: var(--c-red); } .toast-progress { border-left-color: var(--c-violet); } .toast-progress .st-spinner, .toast .st-spinner { flex: none; width: 16px !important; height: 16px !important; border-width: 2px !important; border-radius: 50%; border-style: solid; border-color: var(--line-strong); border-top-color: var(--c-teal); border-right-color: var(--c-violet); animation: spin .8s linear infinite; } [data-theme="light"] .toast { box-shadow: 0 18px 40px -18px rgba(10, 13, 18, .35), 0 1px 3px rgba(10, 13, 18, .08); } [data-theme="light"] .toast > i { color: var(--primary); } [data-theme="light"] .toast-success > i { color: #059669; } [data-theme="light"] .toast-success { border-left-color: #10B981; } [data-theme="light"] .toast-error > i { color: #DC2626; } [data-theme="light"] .toast-error { border-left-color: #E11D48; } .tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 0; font: 700 .64rem/1 var(--font-display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; background: var(--surface-3); color: var(--text-2); font-style: normal; } .tag-ok { background: rgba(25, 227, 177, .14); color: var(--c-teal); } .tag-bad { background: rgba(255, 84, 112, .14); color: var(--c-red); } .tag-pro { background: rgba(139, 92, 246, .16); color: #C4B5FD; } [data-theme="light"] .tag-ok { color: #047857; } [data-theme="light"] .tag-bad { color: #BE123C; } [data-theme="light"] .tag-pro { color: #6D28D9; } /* ---- SURFACES -------------------------------------------------------------------------------------------------- Cards are sharp with a hairline and carry the cut as a mark: a small wedge of colour in the top-right corner. On hover they rise a few pixels (transform) and their top edge lights up. No glows, no blur. */ .panel, .country-card, .layer-card, .guide-card, .bento-card, .how-card, .price-card, .faq-item, .gallery-card, .kpi, .place-list li, .buy-item, .map-row, .receipt-mini { position: relative; } .panel::after, .country-card::after, .layer-card::after, .guide-card::after, .bento-card::after, .how-card::after, .price-card::after, .gallery-card::after, .kpi::after, .stat-row::after, .table-wrap::after, .buy-box::after, .empty-state::after { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; z-index: 1; pointer-events: none; background: linear-gradient(225deg, var(--wedge) 0 50%, transparent 50%); } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 26px; margin-bottom: 24px; box-shadow: var(--shadow); } .panel-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-stretch: 118%; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; } .panel-title i { color: var(--c-blue); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-2.tight { gap: 14px; } @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } } .table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 0; background: var(--surface); } .table { width: 100%; border-collapse: collapse; font-size: .93rem; } .table th { text-align: left; font: 700 .66rem var(--font-display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 13px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); } .table td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background-color .15s; } .table tbody tr:hover td { background: rgba(59, 167, 255, .045); } .table .num { text-align: right; } .table.compact td, .table.compact th { padding: 8px 12px; } .table.bars td[style*="--w"] { background-image: linear-gradient(90deg, rgba(59, 167, 255, .18), rgba(139, 92, 246, .18)); background-size: var(--w) 56%; background-repeat: no-repeat; background-position: right center; } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 .68rem/1.4 var(--font-display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--text); } .crumbs i { font-size: .8em; opacity: .55; } .crumbs span[aria-current] { color: var(--text-2); } /* ---- PAGE HEADERS ---------------------------------------------------------------------------------------------- */ /* EYEBROW: no pill - a spectrum hairline, then widely tracked capitals */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 .68rem/1.3 var(--font-display); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: var(--c-teal); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 34px; height: 2px; flex: none; background: var(--rule); } .eyebrow > i { font-size: .95rem; letter-spacing: 0; } .eyebrow .type-ico.sm { margin-right: -2px; } [data-theme="light"] .eyebrow { color: #0E7490; } .center > .eyebrow, .sec-head:not(.left) > .eyebrow, .cta-band > .eyebrow { margin-left: auto; margin-right: auto; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-2); max-width: 760px; line-height: 1.65; } .page-hero { padding: 54px 0 34px; } .page-hero h1 { max-width: 980px; } .h1-sub { display: block; font-size: .42em; color: var(--muted); font-weight: 600; font-stretch: 112%; letter-spacing: .14em; margin-top: .6em; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } .hero-cta.center { justify-content: center; } .stat-row { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 0; margin-top: 30px; } .stat-row > div { background: var(--surface-solid); padding: 22px 24px; } .stat-row b { display: block; font: 800 clamp(1.45rem, 3vw, 2.15rem)/1.05 var(--font-display); font-stretch: 125%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 4px; } .stat-row span { color: var(--muted); font-size: .86rem; } .stat-row.compact { max-width: 760px; } .stat-row.compact b { font-size: 1.35rem; } .stat-row.compact > div { padding: 16px 18px; } @media (max-width: 700px) { .stat-row { grid-template-columns: 1fr 1fr; } } .filter-box { position: relative; max-width: 440px; margin-top: 24px; } .filter-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); z-index: 1; } .filter-box .input { padding-left: 44px; } /* ---- CATALOGUE (the SEO pages) ------------------------------------------------------------------------------------ */ .catalog-sec { margin: 48px 0; } .catalog-sec > h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.2rem, 2.2vw, 1.5rem); } .catalog-sec > h2 i { color: var(--c-blue); font-size: .85em; } .catalog-sec > h2 .muted { font-size: .62em; font-weight: 600; letter-spacing: .08em; } .country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .country-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text) !important; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; --wedge: var(--c-teal); } .country-card .flag { grid-row: span 2; font-size: 1.8rem; line-height: 1; } .country-card b { font-weight: 600; font-size: .98rem; line-height: 1.25; } .country-card span:not(.flag) { color: var(--muted); font-size: .8rem; font-family: var(--font-mono); } .layer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .layer-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px; border-radius: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text) !important; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; --wedge: var(--c, var(--c-blue)); } .layer-card .type-ico { grid-row: span 2; } .layer-card b { font-weight: 600; line-height: 1.25; } .layer-card span:not(.type-ico) { color: var(--muted); font-size: .8rem; font-family: var(--font-mono); } .layer-card em { position: absolute; top: 10px; right: 14px; } .country-card:hover, .layer-card:hover, .guide-card:hover, .bento-card:hover, .how-card:hover, .gallery-card:hover, .price-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: inset 0 2px 0 var(--wedge), var(--shadow); } .type-ico { --c: var(--c-blue); width: 46px; height: 42px; clip-path: var(--hex); display: inline-grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); font-size: 17px; flex: none; } .type-ico.sm { width: 26px; height: 24px; font-size: 11px; vertical-align: middle; } .group-title { display: flex; align-items: center; gap: 10px; font: 700 .7rem var(--font-display); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 26px 0 12px; } .group-title i { color: var(--c-blue); font-size: .95rem; } .group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip-row.center { justify-content: center; } .chip { --c: var(--c-blue); display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text-2) !important; font-size: .86rem; font-weight: 500; transition: border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s; } .chip i { color: var(--c); } .chip:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); color: var(--text) !important; transform: translateY(-2px); box-shadow: inset 0 -2px 0 var(--c); } .chip.owned { border-color: rgba(25, 227, 177, .4); } .region-cloud { display: flex; flex-wrap: wrap; gap: 6px; } .region-cloud a { padding: 7px 12px; border-radius: 0; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: .86rem; transition: border-color .2s, color .2s; } .region-cloud a span { color: var(--dim); font-family: var(--font-mono); font-size: .8em; margin-left: 4px; } .region-cloud a:hover { color: var(--text); border-color: var(--c-blue); } .layer-hero-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; } @media (max-width: 980px) { .layer-hero-grid { grid-template-columns: 1fr; } } .buy-box { position: sticky; top: calc(var(--nav-h) + 16px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-lg); } .buy-box::before { content: ""; position: absolute; inset: -1px -1px auto; height: 2px; background: var(--spectrum); } .buy-box-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; } .buy-box-head b { display: block; font: 700 1.02rem/1.25 var(--font-display); font-stretch: 112%; } .buy-box-head span:not(.type-ico):not(.flag) { color: var(--muted); font-size: .84rem; font-family: var(--font-mono); } .buy-pass { font-size: .86rem; text-align: center; color: var(--c-amber) !important; padding: 4px; } [data-theme="light"] .buy-pass { color: #B45309 !important; } .buy-pass:hover { text-decoration: underline; } .ticks { list-style: none; padding: 0; margin: 6px 0 0; } .ticks li { position: relative; padding-left: 24px; margin: 7px 0; color: var(--text-2); } .ticks li::before { content: "\f00c"; font: 400 13px/1 "Font Awesome 6 Pro"; position: absolute; left: 0; top: 5px; color: var(--c-teal); } [data-theme="light"] .ticks li::before { color: #059669; } .ticks.small li { font-size: .85rem; margin: 4px 0; } .preview { margin: 0 0 10px; } .preview-map { position: relative; height: 440px; border-radius: 0; overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg-2); } .preview-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; } .preview-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: .9rem; } .preview-ph i { font-size: 34px; color: var(--c-blue); animation: pulse 1.6s ease-in-out infinite; } .preview-map.is-failed .preview-ph span::after { content: " (preview unavailable)"; } .preview figcaption { font-size: .86rem; color: var(--muted); margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } @keyframes pulse { 50% { transform: scale(1.12); opacity: .6; } } .place-list { list-style: none; counter-reset: p; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; } .place-list li { counter-increment: p; padding: 12px 14px 12px 54px; border-radius: 0; border: 1px solid var(--line); background: var(--surface); } .place-list li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 12px; top: 12px; width: 30px; height: 27px; clip-path: var(--hex); display: grid; place-items: center; font: 700 .7rem var(--font-mono); color: var(--text-2); background: var(--surface-3); } .place-list b { display: block; font-weight: 600; line-height: 1.3; } .place-list span { color: var(--muted); font-size: .82rem; } .split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin: 48px 0; } .split-2 .catalog-sec, .split-2 .faq { margin: 0; } .split-2 > .buy-box { position: static; } @media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; } } .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; } .related-grid h3 { font: 700 .72rem var(--font-display); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .link-list { list-style: none; padding: 0; margin: 0; } .link-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .92rem; } .link-list li > span { color: var(--dim); font-family: var(--font-mono); font-size: .82rem; } .faq h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); } .faq-item { border: 1px solid var(--line); border-radius: 0; background: var(--surface); margin-bottom: 8px; transition: border-color .2s, box-shadow .2s; } .faq-item[open] { border-color: var(--line-strong); box-shadow: inset 2px 0 0 var(--c-blue); } .faq-item summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 18px; font-weight: 600; position: relative; transition: color .2s; } .faq-item summary:hover { color: var(--c-blue); } [data-theme="light"] .faq-item summary:hover { color: var(--primary); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "\2b"; font: 400 15px/1 "Font Awesome 6 Pro"; position: absolute; right: 18px; top: 50%; margin-top: -8px; color: var(--muted); transition: transform .3s var(--ease); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item > div { padding: 0 18px 6px; color: var(--text-2); } .faq-item[open] > div { animation: rise .32s var(--ease); } .empty-state { position: relative; text-align: center; padding: 70px 20px; border: 1px dashed var(--line-strong); border-radius: 0; } .empty-state.small { padding: 34px 20px; } .empty-state i { font-size: 38px; color: var(--c-blue); margin-bottom: 14px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .gallery-card { display: flex; flex-direction: column; border-radius: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text) !important; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; --wedge: var(--c-pink); } .gallery-thumb { position: relative; height: 160px; display: grid; place-items: center; font-size: 34px; color: var(--c-blue); background: var(--bg-2); border-bottom: 1px solid var(--line); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(135deg, rgba(25, 227, 177, .1), rgba(59, 167, 255, .1), rgba(139, 92, 246, .12)); background-size: 24px 24px, 24px 24px, 100% 100%; } .gallery-card b { padding: 14px 16px 4px; font-family: var(--font-display); font-stretch: 112%; } .gallery-card span { padding: 0 16px; color: var(--muted); font-size: .88rem; } .gallery-card em { padding: 10px 16px 14px; color: var(--dim); font-size: .78rem; font-style: normal; margin-top: auto; font-family: var(--font-mono); } .pager { display: flex; justify-content: center; gap: 12px; margin: 30px 0; } /* ---- GUIDES, TOOLS AND PROSE -------------------------------------------------------------------------------------- */ .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .guide-card { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px; border-radius: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text) !important; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; } .guide-ico { width: 48px; height: 44px; clip-path: var(--hex); display: grid; place-items: center; font-size: 18px; color: #fff; background: var(--primary-grad); margin-bottom: 8px; } .guide-card-cat { font: 700 .64rem var(--font-display); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--c-teal); } [data-theme="light"] .guide-card-cat { color: #0E7490; } .guide-card b { font: 700 1.08rem/1.3 var(--font-display); font-stretch: 112%; letter-spacing: -.005em; } .guide-card > span:not(.guide-ico):not(.guide-card-cat):not(.guide-card-go) { color: var(--muted); font-size: .92rem; } .guide-card-go { margin-top: auto; padding-top: 8px; color: var(--c-blue); font: 700 .7rem var(--font-display); font-stretch: 118%; letter-spacing: .12em; text-transform: uppercase; } [data-theme="light"] .guide-card-go { color: var(--primary); } .guide-card-go i { transition: transform .35s var(--ease); } .guide-card:hover .guide-card-go i { transform: translateX(4px); } .guide-wrap { padding-top: 40px; } .guide { max-width: 780px; margin: 0 auto; } .guide-head { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); } .guide-head h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); } .guide-date { color: var(--dim); font: 500 .8rem var(--font-mono); } .prose-wrap { padding-bottom: 40px; } .prose { max-width: 780px; font-size: 1.04rem; color: var(--text-2); } .prose-wrap > .prose { margin: 0 auto; } .prose h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-stretch: 118%; margin: 2.2em 0 .7em; color: var(--text); } .prose h3 { font-size: 1.2rem; margin: 1.8em 0 .5em; color: var(--text); } .prose p, .prose li { line-height: 1.75; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: .35em 0; } .prose strong, .prose b { color: var(--text); } .prose a:not(.btn) { text-decoration: underline; text-decoration-color: rgba(59, 167, 255, .45); text-underline-offset: 3px; } .prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid; border-image: var(--spectrum) 1; color: var(--text); font-size: 1.1rem; } .prose code { font: .88em var(--font-mono); padding: 2px 6px; border-radius: 0; background: var(--surface-2); color: var(--text); } .prose .table-wrap, .prose table { margin: 1.5em 0; } .prose table.table { border: 1px solid var(--line); overflow: hidden; display: table; } .prose .faq { margin-top: 3em; } .prose .btn { margin: .5em 0; text-decoration: none; } .prose figure, .shot { margin: 1.6em 0; } .prose figure img, .shot img { width: 100%; height: auto; border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); } .prose figcaption, .shot figcaption { margin-top: 10px; font-size: .86rem; line-height: 1.5; color: var(--muted); } .prose figcaption > b:first-child, .shot figcaption > b:first-child { display: inline-block; margin-right: 10px; font: 700 .66rem var(--font-display); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--c-teal); } .callout { position: relative; display: flex; gap: 14px; padding: 16px 18px; border-radius: 0; border: 1px solid rgba(25, 227, 177, .28); border-left: 3px solid var(--c-teal); background: rgba(25, 227, 177, .06); margin: 1.6em 0; color: var(--text-2); } .callout > i { color: var(--c-teal); margin-top: 5px; font-size: 1.1rem; } .callout p:last-child, .callout ul:last-child { margin-bottom: 0; } .callout-warn { border-color: rgba(255, 181, 71, .32); border-left-color: var(--c-amber); background: rgba(255, 181, 71, .06); } .callout-warn > i { color: var(--c-amber); } [data-theme="light"] .callout > i { color: #059669; } [data-theme="light"] .callout-warn > i { color: #B45309; } .steps { list-style: none; counter-reset: s; padding: 0 !important; margin: 1.5em 0; } .steps li { counter-increment: s; position: relative; padding: 4px 0 16px 58px; margin: 0 !important; } .steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 40px; height: 36px; clip-path: var(--hex); display: grid; place-items: center; font: 800 .8rem var(--font-display); font-stretch: 118%; color: #fff; background: var(--primary-grad); } .steps li::after { content: ""; position: absolute; left: 19.5px; top: 42px; bottom: 4px; width: 1px; background: var(--line-strong); } .steps li:last-child::after { display: none; } .tool-hero { padding-bottom: 20px; } .tool-frame { position: relative; margin-top: 28px; height: min(72vh, 680px); min-height: 460px; border-radius: 0; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); background: var(--bg-2); } .tool-frame::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--spectrum); z-index: 2; pointer-events: none; } .tool-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .tool-open { position: absolute; right: 14px; top: 14px; bottom: auto; z-index: 3; } .support-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: start; padding-bottom: 50px; } @media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; } } /* ---- HOME -------------------------------------------------------------------------------------------------------- */ .hero { position: relative; padding: 46px 0 40px; overflow: clip visible; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px; align-items: center; } @media (max-width: 1060px) { .hero-grid { grid-template-columns: 1fr; } } /* the hero badge: a plate of frosted glass held in two gradient corner brackets */ .hero-badge { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 18px 8px 8px; border-radius: 0; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); color: var(--text-2) !important; margin-bottom: 26px; font: 600 .68rem/1.3 var(--font-display); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; background: linear-gradient(#19E3B1, #19E3B1) top left / 16px 2px no-repeat, linear-gradient(#19E3B1, #19E3B1) top left / 2px 16px no-repeat, linear-gradient(#8B5CF6, #8B5CF6) bottom right / 16px 2px no-repeat, linear-gradient(#8B5CF6, #8B5CF6) bottom right / 2px 16px no-repeat, linear-gradient(115deg, color-mix(in srgb, var(--surface) 80%, transparent), color-mix(in srgb, var(--surface) 35%, transparent)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: color .2s; } .hero-badge::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-110%); background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); animation: pass 7s ease-in-out 2.4s infinite; } @keyframes pass { 0%, 62% { transform: translateX(-110%); } 100% { transform: translateX(110%); } } .hero-badge:hover { color: var(--text) !important; } .hero-badge b { --cut: 5px; clip-path: var(--chamfer); background: var(--spectrum); color: #fff; text-shadow: 0 1px 2px rgba(5, 7, 11, .45), 0 0 1px rgba(5, 7, 11, .5); padding: 5px 9px; font-size: .95em; font-weight: 800; letter-spacing: .1em; } .hero-badge i { transition: transform .35s var(--ease); } .hero-badge:hover i { transform: translateX(4px); } [data-theme="light"] .hero-badge::after { background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); } .display { font-size: clamp(2.1rem, 3.9vw, 3.45rem); line-height: .98; letter-spacing: -.015em; margin-bottom: 24px; } .display .line { display: block; } .display .bow { position: relative; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin-bottom: 0; } .hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; color: var(--muted); font-size: .88rem; } .hero-trust i { color: var(--c-teal); margin-right: 7px; } [data-theme="light"] .hero-trust i { color: #059669; } .hero-search { position: relative; margin-top: 30px; display: flex; gap: 0; padding: 6px; border-radius: 0; background: var(--surface); border: 1px solid var(--line-strong); max-width: 600px; box-shadow: 0 0 0 1px rgba(59, 167, 255, .0), var(--shadow-lg); transition: box-shadow .3s, border-color .3s; } .hero-search:focus-within { border-color: var(--c-blue); box-shadow: 0 0 0 1px var(--c-blue), 0 18px 40px -22px rgba(59, 167, 255, .8); } .hero-search .input { border: 0; background: transparent; height: 48px; box-shadow: none !important; } .hero-search .select { border: 0; background-color: transparent; height: 48px; max-width: 210px; box-shadow: none !important; font-weight: 600; } .hero-search .select + .select { border-left: 1px solid var(--line); } .hero-search .btn { flex: none; margin-left: 6px; } @media (max-width: 560px) { .hero-search { flex-direction: column; } .hero-search .select { max-width: none; } .hero-search .select + .select { border-left: 0; border-top: 1px solid var(--line); } .hero-search .btn { margin: 6px 0 0; } } /* the hero's typeahead fields (core.js combo() over the hidden