/* ========================================================================== JANET TRAVEL — DESIGN SYSTEM Cream / warm beige / coral · Frank Ruhl Libre · Hebrew RTL · editorial travel HOW THIS WORKS This sheet is injected last in on every page, so for equal specificity it wins on order alone. That is the whole reason it can be almost free of !important: the previous version accumulated 147 of them fighting rules it already outranked, and they ended up fighting each other instead. !important is used ONLY against `style=""` attributes, which no selector can outrank, and against build-injected markup this repo does not author. Every such use is marked [inline] or [injected]. The site's own pages define tokens like --night/--mist for a dark theme. Re-pointing those tokens converts the dark sections for free. 01 tokens · 02 base · 03 typography · 04 layout · 05 navigation · 06 hero 07 buttons · 08 cards · 09 destinations · 10 comparison · 11 injected UI 12 Janet · 13 footer · 14 responsive · 15 compatibility ========================================================================== */ /* == 01 · TOKENS ========================================================== */ :root { /* Surfaces. --night/--night-soft/--coal were near-black; re-pointing them turns every .sec-dark into a cream section without touching its markup. */ --night: #FBF8F4; --night-soft: #F5EFE7; --coal: #EFE5D8; --paper: #FBF8F4; --paper-soft: #F5EFE7; --surface: #FFFFFF; /* Ink. --mist/--mist-soft were the light text on dark sections; they follow the surfaces and become the dark text on cream ones. */ --ink: #1A1614; --ink-soft: #4A423C; --ink-faint: #6E645C; --mist: #1A1614; --mist-soft: #6E645C; /* Coral replaces the retired blue everywhere. --sky is 4.5:1 on white. */ --sky: #C2553B; --sky-deep: #A8442A; --sky-ice: #FBEAE3; --sand: #A8442A; --sand-deep: #6E5124; --line: rgba(26, 22, 20, .10); --line-strong:rgba(26, 22, 20, .22); --line-dark: rgba(26, 22, 20, .10); --line-light: rgba(26, 22, 20, .10); /* A dark surface for artwork labels that must stay white. */ --scrim: #241A14; --font: "Assistant", "Heebo", system-ui, -apple-system, Arial, sans-serif; --font-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif; --r: 22px; --ease: cubic-bezier(.22, .61, .36, 1); } /* == 02 · BASE ============================================================ */ body { background: var(--paper); color: var(--ink); font-family: var(--font); } :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms; transition-duration: .01ms; } } /* == 03 · TYPOGRAPHY ====================================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); } h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); } h2 { font-size: clamp(1.9rem, 4vw, 3rem); } .lead, .sec-sub, .lead-q { color: var(--ink-soft); } .eyebrow { color: var(--sky-deep); font-weight: 700; letter-spacing: .14em; } .jt-num, .jt-price, .ldc-price, .jce-price { font-variant-numeric: tabular-nums; } /* == 04 · LAYOUT ========================================================== */ .sec { padding-block: clamp(3.5rem, 8vw, 7rem); } .wrap { max-width: 1240px; } /* The dark sections inherit their new surface from the tokens; these only restate the pairing so a future token change cannot silently invert them. */ .sec-dark, .janet, .how { background: var(--night); color: var(--ink); } .sec-tint { background: var(--paper-soft); } .sec-light { background: var(--paper); } .sec-dark h2, .sec-dark h3, .janet h2, .janet h3, .how h2, .how h3 { color: var(--ink); } .sec-dark p, .sec-dark li, .janet p, .how p, .how li { color: var(--ink-soft); } .sec-dark .sec-sub, .janet .sec-sub, .how .sec-sub { color: var(--ink-soft); } .step h3, .fact b { color: var(--ink); } /* == 05 · NAVIGATION ====================================================== */ .hd, .bar { background: rgba(251, 248, 244, .92); color: var(--ink); border-bottom: 1px solid var(--line); backdrop-filter: saturate(140%) blur(12px); } /* Scoped to text-bearing children only, so it never reaches a badge or CTA that owns its own colour. The old `.bar a, .bar div, .bar span` was the rule that kept outranking .bar-cta and .logo-badge. */ .hd a, .hd-nav a, .logo, .bar > a, .bar > div, .bar > span, .bar b { color: var(--ink); } /* The wordmark is a link on every interior page, so it owes the same 44px touch floor as any other control. It measured 38px. */ .logo, .bar .logo { font-family: var(--font-display); display: inline-flex; align-items: center; min-height: 44px; } .hd-nav a:hover { color: var(--sky-deep); background: var(--paper-soft); } .burger span { background: var(--ink); } /* Brand chips sit on a coral gradient and keep white type. */ .logo-badge, .brand-mark { color: #fff; } .sticky-search { background: rgba(251, 248, 244, .96); color: var(--ink); border-bottom: 1px solid var(--line); backdrop-filter: saturate(140%) blur(12px); } .sticky-search select, .sticky-search input { background: #fff; color: var(--ink); border: 1px solid var(--line); } .mnav { background: var(--paper); } .mnav a { color: var(--ink); } .bottom-nav { background: rgba(251, 248, 244, .97); border-top: 1px solid var(--line); } .bottom-nav a, .bnav-item { color: var(--ink-soft); } .bnav-item:hover, .bnav-item:focus-visible { color: var(--sky-deep); } /* == 06 · HERO ============================================================ */ .jt-hero { background: linear-gradient(168deg, var(--paper) 0%, var(--paper-soft) 58%, var(--coal) 100%); color: var(--ink); padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); min-height: 0; } .jt-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .jt-hero__copy { position: relative; z-index: 2; } .jt-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1.08; margin-block-end: 1.25rem; } .jt-hero h1 em { font-style: normal; color: var(--sky); } .jt-hero .hero-badge { display: inline-block; background: var(--sky-ice); color: var(--sky-deep); border: none; border-radius: 999px; padding: .5rem 1.1rem; font-size: .82rem; font-weight: 600; margin-block-end: 1.5rem; } .jt-hero .hero-sub { font-size: clamp(1.02rem, 1.1vw, 1.18rem); color: var(--ink-soft); max-width: 46ch; margin-block-end: 1.75rem; } .jt-hero .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .jt-trust { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .92rem; color: var(--ink-faint); } .jt-trust li { display: flex; align-items: center; gap: .5rem; } .jt-trust li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); flex: none; } .jt-hero__figure { position: relative; margin: 0; justify-self: center; max-width: 460px; width: 100%; } .jt-hero__figure::before { content: ''; position: absolute; inset-block-end: 6%; inset-inline: 4%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--sky-ice), transparent 72%); z-index: 0; } .jt-hero__figure img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 24px 56px rgba(58, 42, 32, .16); } .jt-hero__figure figcaption { position: absolute; z-index: 2; inset-block-end: 8%; inset-inline-start: -6%; max-width: 15rem; background: #fff; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; padding: .75rem 1rem; font-size: .9rem; line-height: 1.5; box-shadow: 0 6px 20px rgba(58, 42, 32, .1); } /* == 07 · BUTTONS ========================================================= */ .btn, .cmp-btn, .af-btn, .ldc-link, .bar-cta, .jce-btn, .jce-btn-best { border-radius: 999px; font-family: var(--font); font-weight: 600; min-height: 44px; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } /* Filled: coral surface, white label. Listed by name — an earlier version used `.cmp-btn { color:#fff }` and also whitened .info-btn, which sits on a light surface, producing white-on-white. A shared class is not a shared surface. */ .btn-sky, .bar-cta, .ldc-link, .jce-btn, .jce-btn-best, .cmp-btn:not(.info-btn):not(.link-unavailable), .af-btn:not(.link-unavailable) { background: var(--sky); color: #fff; border: none; } .btn-sky:hover, .bar-cta:hover, .ldc-link:hover, .jce-btn:hover, .cmp-btn:not(.info-btn):not(.link-unavailable):hover { background: var(--sky-deep); color: #fff; } /* The plain `.btn` also carries `background:var(--sky)` from the page's own sheet, with a near-black label from the old blue theme. */ .btn:not(.btn-line):not(.btn-ghost):not(.info-btn):not(.link-unavailable) { color: #fff; } /* Outline / quiet */ .btn-line, .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); } .btn-line:hover, .btn-ghost:hover { background: var(--paper-soft); color: var(--ink); } /* Light-surface variants of the same component */ .cmp-btn.info-btn, .info-btn { background: var(--sky-ice); color: var(--sky-deep); border: none; } /* Unavailable is a state, not a button: readable, obviously inert. */ .link-unavailable, .cmp-btn.link-unavailable, .af-btn.link-unavailable, .jce-btn.jce-btn-disabled, .jce-btn-disabled { background: var(--paper-soft); color: var(--ink-faint); border: 1px dashed var(--line-strong); cursor: not-allowed; } .rec-btn { background: var(--sky-ice); color: var(--sky-deep); border: 1px solid transparent; } .rec-btn:hover { background: var(--sky); color: #fff; } /* Janet's state switcher sits on the light panel now. */ .janet-state-btn { background: rgba(26, 22, 20, .06); border: 1px solid var(--line); color: var(--ink-soft); } .janet-state-btn:hover { background: var(--sky-ice); color: var(--sky-deep); } /* == 08 · CARDS =========================================================== */ .card, .ldc, .guide, .fact, .step, .hotel-provider, .rec-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 1px 2px rgba(58, 42, 32, .04); color: var(--ink); } .card:hover, .ldc:hover, .guide:hover { box-shadow: 0 14px 34px rgba(58, 42, 32, .09); border-color: var(--line-strong); } .ldc-dest { font-family: var(--font-display); font-weight: 700; color: var(--ink); } .ldc-price { font-family: var(--font-display); font-weight: 800; color: var(--sky-deep); } .ldc-dest .code { background: var(--paper-soft); color: var(--ink-soft); } .ldc-flag { background: var(--sky-ice); color: var(--sky-deep); } .ldc-disc { color: var(--ink-faint); } .ldc-badge, .best-badge, .jce-badge-best { background: var(--sky-ice); color: var(--sky-deep); border: none; border-radius: 999px; font-weight: 700; } /* janet_engine_v2.css writes `var(--ink, #e8f0f8)` — its fallback is near-white, because it was authored for a dark card. The card is light now. */ .rec-dest { color: var(--ink); } .rec-reason { color: var(--ink-soft); } /* == 09 · DESTINATIONS ==================================================== */ /* .ed-feature still paints white labels straight onto artwork, so it keeps the dark surface it needs to stay readable. */ .ed-feature { position: relative; background-color: var(--scrim); color: #fff; } .ed-feature b, .ed-feature span, .ed-feature h3 { color: #fff; } .ed-feature p, .ed-meta span { color: rgba(255, 255, 255, .86); } /* The destination card is a label over a photograph, so its text stays white and it keeps a dark base behind the picture. What it does not need is the cold blue-black it inherited — rgba(4,9,15) over a warm cream page read as a different site's component. The scrim is warmed to match the photography. */ .dest { position: relative; background-color: #241811; color: #fff; } .dest b, .dest span, .dest p, .dest h3 { color: #fff; } .dest::after { background: linear-gradient(to top, rgba(26, 14, 6, .9) 0%, rgba(26, 14, 6, .42) 32%, rgba(26, 14, 6, 0) 60%) !important; /* [inline] index.html sets the cold one */ } .ed-tag { background: var(--sky-ice); color: var(--sky-deep); } .show-flag { color: #F7D9CD; } /* == 10 · COMPARISON WIDGET =============================================== */ /* The widget body is a white card; its header is a dark navy gradient. They need opposite foregrounds, and conflating them is what produced first white-on-white and then dark-on-dark. Body first, header second. */ .jce-widget, .cmp-section { color: var(--ink); } .jce-card, .jce-row, .jce-best, .jce-col, .jce-col-provider, .jce-col-price, .jce-col-cta { color: var(--ink); } .jce-provider-meta, .jce-disclosure, .jce-diff, .jce-fallback-txt, .info-label, .cmp-section p { color: var(--ink-muted, var(--ink-faint)); } .jce-header, .jce-header-left, .jce-header-right, .jce-header b, .jce-header span, .jce-header div, .jce-title, .jce-subtitle, .jce-updated { color: #F5EFE7; } .jce-subtitle, .jce-updated { color: rgba(245, 239, 231, .82); } /* Sits inside the dark header, so its chip must be light-on-dark too. */ .jce-live-badge { background: rgba(245, 239, 231, .18); color: #F5EFE7; } .warn strong, .warn b { color: var(--sand-deep); } /* == 11 · INJECTED UI ===================================================== */ /* [injected] .tp-btn is written into every page by scripts/build_dist.js from the Travelpayouts snippet, with its own inline colour. Nothing in this repo authors that markup, so it cannot be fixed at the source. */ .tp-btn { color: #fff !important; } /* [inline] The WhatsApp block sets `background:#25D366` on the element. White on that green is 1.98:1; a darker green keeps the brand read and clears AA. */ [style*="#25D366"], [style*="#25d366"] { background: #147A45 !important; } /* [inline] Article pages carry `style="color:rgba(233,238,245,…)"` — the old light-on-dark body colour, now sitting on cream. */ [style*="rgba(233,238,245"], [style*="rgba(233, 238, 245"], [style*="color:#E9EEF5"], [style*="color:#9DB0C4"] { color: var(--ink-soft) !important; } /* == 12 · JANET =========================================================== */ .janet-art-surface { background: transparent; padding: 0; position: relative; overflow: hidden; } .janet-art { background: transparent; border: none; box-shadow: none; } .janet-char-img { border-radius: var(--r); box-shadow: 0 20px 48px rgba(58, 42, 32, .14); } .janet-bubble { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(58, 42, 32, .08); } .janet-ai { color: var(--ink-faint); } /* == 13 · FOOTER ========================================================== */ .ft, footer { background: var(--paper-soft); color: var(--ink-soft); border-top: 1px solid var(--line); } .ft a, footer a { color: var(--ink-soft); } .ft a:hover, footer a:hover { color: var(--sky-deep); } /* == 14 · FORMS =========================================================== */ input, select, textarea { font-family: var(--font); background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; min-height: 44px; } input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-ice); } /* == 15 · LATE-SHEET OVERRIDES ============================================ Pages carry a SECOND