/* ===================================================================== EXPLORE KASHMIR The twelve guide sections under Popular Destinations. No ground of its own so the page gradient runs through, quiet type, photo cards in rows of four and six with a navy "From" chip — a city guide rather than a product page. ===================================================================== */ .vs { --vs-ink: #2e4755; --vs-body: rgba(46, 71, 85, .8); --vs-line: #FAF8F3; /* Site accents, not the reference's red — gold for badges, navy for the price chips and outlines, so this reads as the same website. */ --vs-flag: #2e4755; --vs-badge: #BD830D; /* No slab of its own: the fixed page gradient on runs behind every section, so this band matches the ones above and below it. */ background: transparent; color: var(--vs-ink); } .vs__sec { padding: clamp(28px, 3.2vw, 46px) 0; } .vs__sec:first-child { padding-top: clamp(34px, 4vw, 58px); } .vs__h2 { margin: 0 0 8px; font-size: clamp(1.15rem, 1.55vw, 1.55rem); font-weight: 700; letter-spacing: -.01em; color: var(--vs-ink); } .vs__lead { margin: 0 0 clamp(14px, 1.6vw, 22px); max-width: 72ch; font-size: clamp(.82rem, .95vw, .95rem); line-height: 1.55; color: var(--vs-body); } .vs__h2 + .vs__tiles, .vs__h2 + .vs__row4, .vs__h2 + .vs__row6, .vs__h2 + .vs__row3, .vs__h2 + .vs__cats, .vs__h2 + .vs__faq { margin-top: clamp(14px, 1.6vw, 22px); } /* =================================================================== THE HERITAGE PANEL Built to the reference: one tinted, rounded panel, the heading standing alone down the left in large type, and a row of photographs across the right carrying nothing but the name of the place. The reference's panel is pale blue; this one is a wash of the site's own navy, which gives the same quiet tint without importing another brand's colour onto the page. =================================================================== */ .vs__sec--store { padding-block: clamp(24px, 2.8vw, 40px); } .vstore { display: grid; grid-template-columns: minmax(180px, 25%) minmax(0, 1fr); align-items: center; gap: clamp(18px, 2.4vw, 40px); padding: clamp(20px, 2.6vw, 42px); border-radius: clamp(14px, 1.6vw, 22px); background: rgba(46, 71, 85, .055); } .vstore__head { min-width: 0; } /* Large and stacked, as the reference sets it — the measure is deliberately narrow so the heading breaks over two or three lines rather than running the width of its column. */ .vstore__h2 { margin: 0; max-width: 11ch; font-size: clamp(1.35rem, 2.3vw, 2.05rem); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; color: var(--vs-ink); } /* Six sites in a row sized for four: the rest are a swipe away, which keeps every card the size the reference draws it rather than shrinking them all to fit. */ .vstore__rail { --vst-gap: clamp(10px, 1.1vw, 16px); display: flex; gap: var(--vst-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; } .vstore__rail::-webkit-scrollbar { display: none; } .vstore__card { position: relative; /* Exactly four across, as the reference shows, so the fourth card finishes flush with the panel instead of being sliced by its edge. The fifth and sixth are a swipe further on. */ flex: 0 0 calc((100% - 3 * var(--vst-gap)) / 4); aspect-ratio: 250 / 168; display: block; overflow: hidden; border-radius: 12px; background: rgba(46, 71, 85, .08); scroll-snap-align: start; text-decoration: none; } .vstore__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Only across the foot, so the photograph itself stays bright. */ .vstore__veil { position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .3) 46%, rgba(0, 0, 0, 0) 100%); } .vstore__name { position: absolute; left: 12px; right: 12px; bottom: 10px; color: #FFFFFF; font-size: clamp(.82rem, .95vw, .98rem); font-weight: 700; line-height: 1.25; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } .vstore__h2 a { color: inherit; text-decoration: none; } .vstore__h2 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .vstore__more { display: inline-block; margin-top: 12px; font-size: .86rem; font-weight: 700; color: var(--vs-badge); text-decoration: none; } .vstore__more:hover { text-decoration: underline; text-underline-offset: 3px; } .vstore__more:focus-visible { outline: 2px solid var(--vs-badge); outline-offset: 3px; } .vstore__card:hover .vstore__name { text-decoration: underline; text-underline-offset: 2px; } .vstore__card:focus-visible { outline: 2px solid var(--vs-badge); outline-offset: 3px; } :root[data-theme="dark"] .vstore { background: rgba(250, 248, 243, .06); } /* The heading takes a quarter of the panel, so on a narrower page four cards would each be barely wider than the name written across them. Fewer across instead, at the size the reference draws them â€” the rest stay a swipe away at every width. */ @media (max-width: 1400px) { .vstore__card { flex-basis: calc((100% - 2 * var(--vst-gap)) / 3); } } @media (max-width: 1150px) { .vstore__card { flex-basis: calc((100% - var(--vst-gap)) / 2); } } @media (max-width: 900px) { /* The heading goes above the row rather than beside it, which gives the cards the whole width back. */ .vstore { grid-template-columns: minmax(0, 1fr); gap: 16px; } .vstore__h2 { max-width: none; } .vstore__card { flex-basis: calc((100% - 2 * var(--vst-gap)) / 2.6); } } /* ------------------------------- rows ------------------------------- */ .vs__tiles, .vs__row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); } .vs__row6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(9px, 1vw, 15px); } .vs__row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); } /* --------------------- 1. big overlaid photo tiles --------------------- */ .vtile { position: relative; display: block; aspect-ratio: 300 / 250; border-radius: 8px; overflow: hidden; text-decoration: none; } .vtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vtile__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(46, 71, 85, .82) 4%, rgba(46, 71, 85, .25) 46%, rgba(46, 71, 85, 0) 74%); } .vtile__flag { position: absolute; left: 0; top: 12px; z-index: 2; background: var(--vs-badge); color: #2e4755; font-size: clamp(.6rem, .7vw, .72rem); font-weight: 600; padding: 5px 11px; border-radius: 0 4px 4px 0; } .vtile__name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #FAF8F3; font-size: clamp(.95rem, 1.2vw, 1.2rem); font-weight: 700; line-height: 1.25; } /* ------------------------ 2. photo + caption card ------------------------ */ .vcard, .vmini { display: block; text-decoration: none; color: inherit; } .vcard__media, .vmini__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: rgba(46, 71, 85, .06); } .vcard__media img, .vmini__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .vcard__name, .vmini__name { display: block; margin-top: 9px; font-size: clamp(.8rem, .92vw, .92rem); font-weight: 700; line-height: 1.3; color: var(--vs-ink); } .vcard:hover .vcard__name, .vmini:hover .vmini__name { text-decoration: underline; } .vcard__note, .vmini__note { display: block; margin-top: 4px; font-size: clamp(.72rem, .82vw, .82rem); line-height: 1.45; color: var(--vs-body); } /* ---------------- guide card: even description + "Read more" ---------------- The heritage row. Its cards carry a sentence rather than a line of figures, and left to themselves those sentences ran to two lines on one card and four on the next, so the row read as ragged and nothing lined up along the bottom. A column that fills its grid cell, a description pinned to exactly two lines, and the link pushed to the foot by `margin-top: auto`. Because every card reserves the same two lines, every "Read more" lands on the same line — the alignment is a consequence of the structure, not a number tuned by eye. */ .vmini--guide { display: flex; flex-direction: column; height: 100%; } /* The names run to two lines on some of these ("Shankaracharya Temple") and one on others, which pushed the description of the longer ones a line down and left the row's middle band ragged even once the descriptions matched. Reserving two lines here lines up the descriptions as well. */ .vmini--guide .vmini__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.3em); } .vmini--guide .vmini__note { /* Ceiling and floor both at two lines: clamped so a long sentence cannot grow the card, and floored so a short one still reserves the space and does not pull its "Read more" up above the others. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.45em); } .vmini__more { display: block; /* Takes whatever height the card has left, which is what puts it on the floor of the cell. */ margin-top: auto; padding-top: 8px; /* The corner the eye ends a card on. */ text-align: right; font-size: clamp(.7rem, .8vw, .79rem); font-weight: 700; color: var(--vs-badge); } .vmini--guide:hover .vmini__more { text-decoration: underline; text-underline-offset: 2px; } /* the reference's small price chip, in the site navy */ .vprice { display: inline-block; margin-top: 8px; background: var(--vs-flag); color: #FAF8F3; font-size: clamp(.66rem, .76vw, .76rem); font-weight: 700; padding: 3px 8px; border-radius: 3px; } .vmini__flag { position: absolute; left: 0; top: 10px; z-index: 2; background: var(--vs-badge); color: #2e4755; font-size: clamp(.58rem, .68vw, .7rem); font-weight: 600; padding: 4px 9px; border-radius: 0 4px 4px 0; } /* ------------------------- 4. category boxes ------------------------- */ .vs__cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(9px, 1vw, 15px); } .vcat { display: grid; place-items: center; gap: 12px; aspect-ratio: 1 / .84; border: 1px solid var(--vs-flag); border-radius: 6px; text-decoration: none; color: var(--vs-ink); text-align: center; padding: 12px; transition: background-color .18s ease; } .vcat:hover { background: rgba(46, 71, 85, .05); } .vcat svg { width: clamp(26px, 2.6vw, 38px); height: clamp(26px, 2.6vw, 38px); color: var(--vs-flag); } .vcat b { font-size: clamp(.72rem, .84vw, .86rem); font-weight: 700; line-height: 1.3; } /* ----------------- 8/9/10. wide card with a caption bar ----------------- */ .vwide { display: block; border: 1px solid var(--vs-line); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; } .vwide__media { display: block; aspect-ratio: 16 / 9; background: rgba(46, 71, 85, .06); } .vwide__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .vwide__bar { display: block; padding: 11px 14px; font-size: clamp(.78rem, .88vw, .9rem); font-weight: 600; text-align: center; color: var(--vs-ink); } .vwide:hover .vwide__bar { text-decoration: underline; } /* --------------------------- 11. season cards --------------------------- */ .vseason { border: 1px solid var(--vs-line); border-radius: 6px; overflow: hidden; padding-bottom: 14px; } .vseason__media { display: block; aspect-ratio: 16 / 9; background: rgba(46, 71, 85, .06); } .vseason__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .vseason__name { display: block; margin: 12px 14px 0; font-size: clamp(.9rem, 1.05vw, 1.05rem); font-weight: 700; } .vseason__when { display: block; margin: 2px 14px 0; font-size: clamp(.7rem, .8vw, .8rem); font-weight: 600; color: var(--vs-flag); } .vseason__note { margin: 7px 14px 0; font-size: clamp(.74rem, .84vw, .84rem); line-height: 1.5; color: var(--vs-body); } /* -------------------------------- 12. FAQ -------------------------------- */ .vs__sec--faq { padding-bottom: clamp(38px, 4.4vw, 64px); } .vs__faq { border-top: 1px solid var(--vs-line); } .vfaq { border-bottom: 1px solid var(--vs-line); } .vfaq__q { list-style: none; cursor: pointer; padding: 15px 34px 15px 0; position: relative; font-size: clamp(.85rem, .96vw, .98rem); font-weight: 700; color: var(--vs-ink); } .vfaq__q::-webkit-details-marker { display: none; } .vfaq__q::after { content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--vs-flag); border-bottom: 2px solid var(--vs-flag); transform: rotate(45deg); transition: transform .2s ease; } .vfaq[open] .vfaq__q::after { transform: rotate(-135deg); margin-top: -2px; } .vfaq__a { padding: 0 34px 16px 0; font-size: clamp(.8rem, .9vw, .92rem); line-height: 1.65; color: var(--vs-body); } .vfaq__a p { margin: 0 0 10px; } .vfaq__a p:last-child { margin-bottom: 0; } .vs__more { margin: 16px 0 0; font-size: clamp(.8rem, .9vw, .92rem); } .vs__more a { color: var(--vs-flag); font-weight: 700; text-decoration: none; } .vs__more a:hover { text-decoration: underline; } /* ------------------------------ responsive ------------------------------ */ @media (max-width: 1100px) { .vs__row6, .vs__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .vs__tiles, .vs__row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vs__row3 { grid-template-columns: 1fr; } } @media (max-width: 520px) { .vs__row6, .vs__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vs__tiles { grid-template-columns: 1fr; } }