/* * WayUno — public landing page. * * One stylesheet, no framework, no build step. It is inlined into at ship time, so the * page paints in a single request: the brief asks for good Core Web Vitals from a partner * reviewer who may be on hotel wifi, and the cheapest way to earn that is to have nothing to * fetch before first paint. * * The palette is the PRODUCT's own — the indigo the chat and the results surface already use — * so a partner who is later shown a demo recognises the thing they saw on this page. */ :root { --ink: #23233f; --muted: #5b6070; --soft: #7a7f92; --line: rgba(35, 35, 63, .10); --line-2: rgba(35, 35, 63, .06); --surface: #fff; --surface-2: #f7f7fb; --accent: #5b5b9c; --accent-deep: #3f3a68; --accent-soft: rgba(91, 91, 156, .10); --mint: #9ee7d5; --green: #2e7d4f; --radius: 20px; --radius-lg: 28px; --shadow: 0 1px 2px rgba(20, 20, 43, .04), 0 12px 32px rgba(20, 20, 43, .07); --shadow-lift: 0 2px 4px rgba(20, 20, 43, .05), 0 24px 60px rgba(20, 20, 43, .12); --max: 1180px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* The sticky header must not cover the heading of whatever was jumped to. */ scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; /* Nothing on this page may produce a sideways scrollbar on a phone. */ overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; } /* ------------------------------------------------------------------ type */ h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.15; font-weight: 700; } h1 { font-size: clamp(2.35rem, 5.2vw, 3.9rem); letter-spacing: -.03em; } h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); } h3 { font-size: 1.06rem; letter-spacing: -.01em; } p { margin: 0; } .lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); line-height: 1.65; max-width: 40ch; } .eyebrow { display: inline-block; margin-bottom: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; color: var(--accent); } .section-head { max-width: 46rem; margin-bottom: 44px; } .section-head p { margin-top: 14px; color: var(--muted); font-size: 1.06rem; } /* ------------------------------------------------------------------ chrome */ .bar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-2); } .bar-in { display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; } /* * SIZED BY HEIGHT, NOT WIDTH. The mark is 132x96, so a 104px width makes it 76px tall inside a * 68px bar — and the bar simply cropped the top off the logo. Height is the constrained dimension * here, so height is what gets set. */ .brand img { height: 46px; width: auto; } .nav { display: flex; gap: 4px; margin-inline-start: auto; } .nav a { padding: 8px 14px; border-radius: 999px; font-size: .93rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: background .15s ease, color .15s ease; } .nav a:hover { background: var(--surface-2); color: var(--ink); } .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .bar .pill { flex: none; } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: .97rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(91, 91, 156, .28); } .btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); } .btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); } .btn-ghost:hover { background: var(--surface-2); transform: translateY(-1px); } /* ------------------------------------------------------------------ hero */ .hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 88px); overflow: hidden; } /* A single soft wash rather than a photograph: nothing to download, nothing to mislead. */ .hero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 640px; background: radial-gradient(48% 55% at 22% 30%, rgba(91, 91, 156, .13), transparent 70%), radial-gradient(42% 50% at 82% 18%, rgba(158, 231, 213, .30), transparent 70%); pointer-events: none; z-index: -1; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); align-items: center; } @media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } } .hero h1 { margin-bottom: 20px; } .hero .lede { max-width: 44ch; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero-note { margin-top: 18px; font-size: .87rem; color: var(--soft); } /* ------------------------------------------------- the product illustration */ /* * The concept in one picture: a conversation on one side, structured travel results on the other. * It is built from the product's own vocabulary — the same indigo, the same rounded surfaces, the * same compact flight row — rather than a screenshot, so it stays honest about what it is: an * illustration of the idea, not a claim about a live search. */ .demo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(160deg, #fdfdff, #f4f4fa); box-shadow: var(--shadow-lift); } @media (min-width: 720px) { /* Side by side is the whole point of the picture — but only where both fit. */ .demo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } .pane { min-width: 0; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); } .pane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); } .pane-head::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .5; } .msg { max-width: 92%; margin-bottom: 10px; padding: 11px 14px; border-radius: 16px; font-size: .87rem; line-height: 1.5; } .msg-user { margin-inline-start: auto; background: var(--accent); color: #fff; border-end-end-radius: 5px; } .msg-bot { background: var(--surface-2); color: var(--ink); border-end-start-radius: 5px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .chip { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: .76rem; color: var(--muted); background: var(--surface); } /* one result row, the shape the product actually uses */ .row { padding: 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); margin-bottom: 9px; } .row + .row { margin-top: 0; } .row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; } .row-airline { font-size: .82rem; font-weight: 600; } .row-tag { font-size: .68rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; text-transform: uppercase; } .leg { display: flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; font-size: .92rem; font-weight: 600; } .leg-mid { flex: 1 1 auto; display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .7rem; font-weight: 500; color: var(--soft); white-space: nowrap; } .leg-mid::before, .leg-mid::after { content: ""; flex: 1 1 auto; min-width: 6px; border-top: 1px solid var(--line); } .row-places { display: flex; justify-content: space-between; margin-top: 2px; font-size: .72rem; color: var(--soft); } .row-cost { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-2); flex-wrap: wrap; } .row-total { font-size: 1rem; font-weight: 700; } .row-each { font-size: .74rem; color: var(--soft); } .stay { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); } .stay-thumb { width: 40px; height: 40px; flex: none; border-radius: 10px; background: linear-gradient(145deg, var(--mint), var(--accent-soft)); } .stay-name { font-size: .84rem; font-weight: 600; } .stay-meta { font-size: .73rem; color: var(--soft); } /* ------------------------------------------------------------------ sections */ section { padding: clamp(64px, 8vw, 108px) 0; } .tint { background: var(--surface-2); border-block: 1px solid var(--line-2); } .grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); } .card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .card h3 { margin-bottom: 9px; } .card p { color: var(--muted); font-size: .95rem; } .icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); } .icon svg { width: 21px; height: 21px; } /* numbered steps */ .step-n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .88rem; font-weight: 700; } /* ------------------------------------------------- structured-data section */ .split { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .translate { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .said { padding: 14px 16px; border-radius: 14px; background: var(--accent); color: #fff; font-size: .93rem; line-height: 1.5; } .arrow-down { display: grid; place-items: center; height: 34px; color: var(--soft); } .fields { display: grid; gap: 8px; } .field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface-2); font-size: .87rem; } .field-k { color: var(--soft); font-size: .78rem; letter-spacing: .02em; } .field-v { font-weight: 600; font-variant-numeric: tabular-nums; } .field-hard .field-v { color: var(--accent-deep); } .field-hard::after { content: "required"; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 7px; border-radius: 999px; } /* ------------------------------------------------------------------ partners */ .labels { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; } .label { padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .87rem; font-weight: 500; color: var(--muted); } /* ------------------------------------------------------------------ contact */ .form { display: grid; gap: 14px; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); } .two { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } } label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; } input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: .95rem; color: var(--ink); background: var(--surface); } textarea { resize: vertical; min-height: 116px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .form-note { font-size: .82rem; color: var(--soft); } /* ------------------------------------------------------------------ footer */ footer { padding: 48px 0 40px; border-top: 1px solid var(--line-2); background: var(--surface-2); } .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; } .foot-links { display: flex; flex-wrap: wrap; gap: 20px; margin-inline-start: auto; } .foot a { font-size: .89rem; color: var(--muted); text-decoration: none; } .foot a:hover { color: var(--ink); text-decoration: underline; } .copy { width: 100%; margin-top: 22px; font-size: .82rem; color: var(--soft); } /* ------------------------------------------------------------------ misc */ .skip { position: absolute; left: -9999px; top: 0; padding: 12px 18px; background: var(--accent); color: #fff; border-radius: 0 0 10px 0; z-index: 100; } .skip:focus { left: 0; } /* A caption, so the drawing is never mistaken for a screenshot of a live search. */ .demo-note { grid-column: 1 / -1; margin: 2px 4px 0; font-size: .72rem; color: var(--soft); text-align: center; } @media (max-width: 780px) { /* The nav collapses to the two links a partner needs; the rest are reachable by scrolling. */ .nav a[data-secondary] { display: none; } .bar-in { height: 62px; gap: 12px; } .brand img { height: 40px; } } @media (max-width: 480px) { .nav { display: none; } /* * ONE BETA BADGE AT A TIME. With the nav gone the header badge sits directly above the hero's, * so the first thing on a phone is the same words twice. The header keeps it, because on this * width it is the only thing in the header besides the logo. */ .hero > .wrap > div > .pill:first-child { display: none; } }