/* ===================================================================
vt-theme-dark.css OPTIONAL. Load AFTER vt-main.css.
Brings the viaggindia.in look to the main site: near-black surfaces,
marigold and jade accents, geometric sans headings.
TO ENABLE
---------
In header_top-2.php, straight after the vt-main.css line, add:
and change the Google Fonts line to:
TO REVERT
---------
Delete that one line and put the old fonts line back.
Nothing else on the site changes. vt-main.css is untouched.
=================================================================== */
/* ---------- 1. tokens ------------------------------------------------- */
/* --vt-ink does double duty in vt-main.css: it is the colour of 106
text rules AND the background of 9. Flipping it to a light value
fixes all 106 headings in one move; the 9 backgrounds are put back
individually in section 1b. Overriding 106 rules by hand instead
would have left some dark-on-dark, which is exactly what happened
in the first version of this file. */
:root {
--vt-rust: #E9A13B; /* marigold replaces rust as the action colour */
--vt-rust-d: #f3b258;
--vt-teal: #3E9E82; /* jade */
--vt-gold: #E9A13B;
--vt-surface: #1B1A17; /* cards and boxes */
--vt-surface-2: #232019; /* tint inside cards */
--vt-cream: #171613; /* the "is-cream" bands */
--vt-paper: #12110F;
--vt-line: #2C2A26;
--vt-ink: #F2EFE9; /* now a TEXT colour, see 1b */
--vt-heading: #FFFFFF;
--vt-body: #C9C3B7;
--vt-muted: #9C9384;
--vt-brownd: #FFFFFF;
--vt-foot: #0C0B0A;
--vt-dark-bg: #12110F; /* what --vt-ink used to be, for backgrounds */
}
/* ---------- 1b. the nine places that used ink as a BACKGROUND -------- */
.vt-hero { background: var(--vt-dark-bg); }
.vt-trustbar { background: #0C0B0A; }
.vt-theme { background: var(--vt-dark-bg); }
.vt-fab-tel { background: #2C2A26; }
.vt-page-hero { background: var(--vt-dark-bg); }
.vt-sec.is-dark { background: linear-gradient(120deg, #17352C 0%, #12110F 62%); }
.vt-totop { background: var(--vt-surface); color: var(--vt-ink); border-color: var(--vt-line); }
.vt-totop:hover { background: var(--vt-rust); border-color: var(--vt-rust); color: #17150F; }
.vt-cta-ghost { color: #E9E5DC; border: 1px solid var(--vt-line); background: none; }
.vt-cta-ghost:hover { background: none; border-color: var(--vt-rust); color: var(--vt-rust); }
/* ---------- 2. page ---------------------------------------------------- */
body { background: #12110F; color: var(--vt-body); }
body, .vt-rich, .vt-prose, .vt-sec-lead, p, li, td {
font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, h4, h5,
.vt-sec-title h2, .vt-page-hero h1, .vt-hero h1, .vt-quote,
.vt-figures b, .vt-drop-head, .vt-fcol h3, .vt-fcard h4, .vt-festcard h3 {
font-family: 'Space Grotesk', 'Inter', sans-serif !important;
letter-spacing: -.02em;
font-style: normal;
}
/* ---------- 3. bands --------------------------------------------------- */
.vt-sec { background: #12110F; }
.vt-sec.is-cream { background: #171613; }
.vt-sec.is-paper { background: #12110F; }
.vt-sec.is-dark { background: linear-gradient(120deg, #17352C 0%, #12110F 62%); color: #c9d6d0; }
.vt-sec.is-dark .vt-sec-lead { color: #b7c9c1; }
.vt-sec-title h2,
.vt-sec.is-dark .vt-sec-title h2 { color: #fff; }
.vt-sec-title .vt-rule { background: var(--vt-teal); }
.vt-sec-lead { color: var(--vt-muted); }
/* ---------- 4. header, menu, footer ------------------------------------ */
.vt-topbar { background: #0C0B0A; color: #948C7E; }
.vt-topbar i { color: var(--vt-teal); }
.vt-mainbar { background: #12110F; border-bottom: 1px solid var(--vt-line); }
.vt-menu > li > a, .vt-menu > li > button { color: #E9E5DC; }
.vt-menu > li > a:hover, .vt-menu > li > button:hover { color: var(--vt-rust); }
.vt-menu .vt-cta { background: var(--vt-rust); color: #17150F; }
.vt-menu .vt-cta:hover { background: var(--vt-rust-d); color: #17150F; }
.vt-strap { background: #17352C; }
.vt-burger { color: #E9E5DC; border-color: var(--vt-line); }
.vt-drop { background: #1B1A17; border-top-color: var(--vt-rust); box-shadow: 0 22px 54px rgba(0,0,0,.55); }
.vt-drop:before { border-bottom-color: var(--vt-rust); }
.vt-drop-head { color: #fff; }
.vt-drop a { color: #C9C3B7; }
.vt-drop a:hover { background: rgba(233,161,59,.08); color: var(--vt-rust); border-left-color: var(--vt-rust); }
.vt-drop-foot { border-top-color: var(--vt-line); }
.vt-drawer { background: #12110F; }
.vt-drawer a, .vt-drawer button { color: #E9E5DC; }
.vt-drawer li { border-bottom-color: var(--vt-line); }
.vt-sub a { color: #948C7E; }
.vt-footer { background: #0C0B0A; border-top-color: var(--vt-rust); }
.vt-fcard { background: rgba(255,255,255,.03); border-color: var(--vt-line); border-top-color: var(--vt-rust); }
.vt-fgrid a { background: #1B1A17; border-color: var(--vt-line); color: #C9C3B7; }
.vt-fgrid a i { color: var(--vt-teal); }
.vt-fgrid a:hover { background: #232019; border-top-color: var(--vt-rust); color: var(--vt-rust); }
.vt-fgrid a:hover i { color: var(--vt-rust); }
.vt-fpop a, .vt-fcol li a { color: #C9C3B7; }
/* ---------- 5. cards and panels ---------------------------------------- */
.vt-card, .vt-tour, .vt-featcard, .vt-quotecard, .vt-tipcard,
.vt-festcard, .vt-catcard, .vt-album, .vt-partner, .vt-linkcard {
background: var(--vt-surface);
border-color: var(--vt-line);
}
.vt-card.is-quiet { background: var(--vt-surface-2); }
.vt-card h2, .vt-card h3 { color: #fff; border-bottom-color: var(--vt-teal); }
.vt-tour-body h3 a:hover, .vt-featcard h3 a:hover, .vt-quotecard h3 a:hover { color: var(--vt-rust); }
.vt-catcard { color: #E9E5DC; }
.vt-catcard i { background: rgba(62,158,130,.14); color: var(--vt-teal); }
.vt-catcard:hover { background: #232019; border-left-color: var(--vt-rust); color: var(--vt-rust); }
.vt-catcard:hover i { background: var(--vt-rust); color: #17150F; }
.vt-tipcard { border-left-color: var(--vt-teal); }
.vt-tipcard > i { background: rgba(62,158,130,.14); color: var(--vt-teal); }
.vt-festdate { background: rgba(62,158,130,.14); color: var(--vt-teal); }
.vt-figures li { border-left-color: var(--vt-line); }
.vt-figures b { color: var(--vt-rust); }
.vt-quote { color: #E9E5DC; }
.vt-quotecard blockquote { border-left-color: var(--vt-line); color: var(--vt-body); }
/* headings read better at full white than at the ink off-white */
.vt-sec-head h2, .vt-masthead h1, .vt-h2, .vt-prose h2, .vt-hub h2,
.vt-book h2, .vt-enq h2, .vt-day h3, .vt-rich h3, .vt-show-txt h3,
.vt-festcard h3, .vt-linkcard h3, .vt-tipcard h3, .vt-album span,
.blog-post-head h1, .blog-body h2, .blog-body h3, .blog-body h4,
.blog-comments h3, .vt-program h2, .vt-program h3, .vt-program h4 { color: #fff; }
.vt-tour-body h3 a, .vt-featcard h3 a, .vt-quotecard h3 a,
.blog-lead h2 a, .blog-card-body h2 a { color: #fff; }
.vt-tour-body h3 a:hover, .vt-featcard h3 a:hover,
.vt-quotecard h3 a:hover, .blog-lead h2 a:hover, .blog-card-body h2 a:hover { color: var(--vt-rust); }
/* small strong labels inside lists */
.vt-facts b, .vt-why strong, .vt-season b, .vt-stats b, .vt-trust strong,
.vt-contact strong, .vt-steps strong, .vt-rich strong, .vt-prose strong,
.vt-crumb strong, .vt-count strong, .vt-price b, .vt-factstrip strong,
.blog-rel-card strong, .blog-recent strong { color: #fff; }
/* ---------- 6. buttons -------------------------------------------------- */
.vt-btn, .vt-cta-lg { background: var(--vt-rust); color: #17150F; }
.vt-btn:hover, .vt-cta-lg:hover { background: var(--vt-rust-d); color: #17150F; }
.vt-go { color: var(--vt-rust); }
.vt-price.is-ask b { color: #fff; }
/* ---------- 7. forms ---------------------------------------------------- */
.vt-form input, .vt-form select, .vt-form textarea {
background: #12110F; border-color: var(--vt-line); color: #E9E5DC;
}
.vt-form input:focus, .vt-form select:focus, .vt-form textarea:focus {
border-color: var(--vt-rust); outline-color: rgba(233,161,59,.25);
}
.vt-form label { color: #E9E5DC; }
.vt-hint { color: var(--vt-muted); }
.vt-note.is-ok, .blog-note.is-ok { background: rgba(62,158,130,.12); border-color: var(--vt-teal); color: #cfe6dd; }
.vt-note.is-error, .blog-note.is-error { background: rgba(209,59,0,.14); border-color: #D13B00; color: #f3cdba; }
/* ---------- 8. FAQ, tables, pager --------------------------------------- */
.vt-faq details { background: var(--vt-surface); border-color: var(--vt-line); }
.vt-faq summary { color: #fff; }
.vt-faq-a { color: var(--vt-body); }
.vt-pager a { background: var(--vt-surface); border-color: var(--vt-line); color: #C9C3B7; }
.vt-pager a:hover { border-color: var(--vt-rust); color: var(--vt-rust); }
.vt-pager .is-current { background: var(--vt-rust); border-color: var(--vt-rust); color: #17150F; }
.vt-sitelist li { border-bottom-color: var(--vt-line); }
.vt-sitelist a { color: var(--vt-body); }
/* ---------- 9. hero ------------------------------------------------------ */
.vt-page-hero.is-plain {
background: linear-gradient(120deg, #17352C 0%, #12110F 62%);
border-bottom-color: var(--vt-teal);
}
.vt-page-hero.is-plain:before { display: none; }
.vt-hero-kicker { color: #F6E4BE; background: rgba(0,0,0,.5); border-color: rgba(246,228,190,.4); }
.vt-hero h1 em, .vt-page-hero h1 em { color: var(--vt-rust); }
.vt-hero-dots button.is-active { background: var(--vt-rust); }
.vt-trustbar { background: #0C0B0A; }
.vt-trustbar i { color: var(--vt-teal); }
/* ---------- 10. blog ----------------------------------------------------- */
.blog-card, .blog-lead, .blog-side, .blog-post { background: var(--vt-surface); border-color: var(--vt-line); }
.blog-card h2 a, .blog-lead h2 a, .blog-post h1 { color: #fff; }
.blog-card h2 a:hover, .blog-lead h2 a:hover { color: var(--vt-rust); }
.blog-tag { background: rgba(62,158,130,.14); color: var(--vt-teal); }
.blog-body { color: var(--vt-body); }
.blog-body h2, .blog-body h3 { color: #fff; }
.blog-meta, .blog-excerpt { color: var(--vt-muted); }
/* ---------- 11. gallery lightbox ------------------------------------------ */
.vt-photos a { background: var(--vt-surface); border-color: var(--vt-line); }
.vt-albums a { background: var(--vt-surface); border-color: var(--vt-line); }
/* ---------- 12. images sit better on dark --------------------------------- */
.vt-tour-media img, .vt-featcard-media img, .vt-show-grid img,
.blog-card-media img, .blog-lead-media img { opacity: .92; }
.vt-tour:hover .vt-tour-media img,
.vt-featcard:hover .vt-featcard-media img { opacity: 1; }