/* ========================================================================== TAMSI — /the-villa The page is native Elementor containers and free-tier widgets; everything that could be set through a widget's own controls was. What is left here is the handful of things Elementor has no control for: 1. the contact sheet's ratio lock 2. a shared minimum width across the act buttons 3. the dotted rule that marks an unresolved fact 4. the pathlist's arrow nudge and underline wipe 5. scroll-margin for the in-page anchors Kit specificity trap: carries .elementor-kit-17 and post-17.css ships .elementor-kit-17 a {…} at 0,0,1,1 before this sheet, so every contested rule is scoped through the .tamsi-villas body class to outrank it. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · The contact sheet Real frames only — the house, the pool, the water. Elementor's image widget has no aspect-ratio control, and the four photographs are 16:9 originals, so the 4:3 crop is held here. The grid gap is the design's uniform 3px, set on the container. -------------------------------------------------------------------------- */ .tamsi-villas .tamsi-shot, .tamsi-villas .tamsi-shot img { display: block; width: 100%; } .tamsi-villas .tamsi-shot img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; } /* -------------------------------------------------------------------------- 2 · The acts "Plan your stay" and "Enquire" are very different lengths, and the design sets both to one width so the pair reads as a unit. Elementor's button has padding but no min-width. -------------------------------------------------------------------------- */ .tamsi-villas .tamsi-act .elementor-button { min-width: 186px; } .tamsi-villas .tamsi-act--wide .elementor-button { min-width: 210px; white-space: nowrap; } /* Below the mobile breakpoint the acts stack and each fills the column, so the shared minimum stops applying — matching the design's 560px rule. */ @media (max-width: 767px) { .tamsi-villas .tamsi-act .elementor-button, .tamsi-villas .tamsi-act--wide .elementor-button { min-width: 0; width: 100%; } } /* -------------------------------------------------------------------------- 2b · The three rooms The rooms share three rows so the names align, the short descriptions align, and every spec list starts on the same line rather than being pinned to the foot of its column. That is subgrid, and Elementor's grid container has no control for it — but the room containers are real grid items, so the rule lands. Each room is built with exactly three children (name, description, specs) to match the three tracks. Desktop only: below 1025px the ladder is one column per room and each is an ordinary block again. -------------------------------------------------------------------------- */ @media (min-width: 1025px) { @supports (grid-template-rows: subgrid) { .tamsi-villas .tamsi-rooms { --e-con-grid-template-rows: auto auto 1fr; } .tamsi-villas .tamsi-room { --display: grid; grid-row: span 3; grid-template-rows: subgrid; } } } /* -------------------------------------------------------------------------- 3 · An unresolved fact Four of the policies and two of the room facts are genuinely unsettled. They are marked rather than invented: italic slate (set on the widget) over a dotted rule (no border control reaches the heading's inner text node). -------------------------------------------------------------------------- */ .tamsi-villas .tamsi-tbc .elementor-heading-title { display: inline; border-bottom: 1px dotted rgba(41, 39, 35, 0.45); } /* -------------------------------------------------------------------------- 4 · The pathlist Links out, not amenities. Colour is handled by the widget's own hover controls; the arrow nudge and the left-to-right underline wipe are not reachable from them. -------------------------------------------------------------------------- */ .tamsi-villas .tamsi-pathlist .elementor-icon-list-icon svg, .tamsi-villas .tamsi-pathlist .elementor-icon-list-icon i { transition: transform 0.4s var(--tamsi-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .tamsi-villas .tamsi-pathlist .elementor-icon-list-item:hover .elementor-icon-list-icon svg, .tamsi-villas .tamsi-pathlist .elementor-icon-list-item:hover .elementor-icon-list-icon i { transform: translateX(3px); } .tamsi-villas .tamsi-pathlist .elementor-icon-list-text { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.4s var(--tamsi-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .tamsi-villas .tamsi-pathlist .elementor-icon-list-item:hover .elementor-icon-list-text, .tamsi-villas .tamsi-pathlist .elementor-icon-list-item a:focus-visible .elementor-icon-list-text { background-size: 100% 1px; } @media (prefers-reduced-motion: reduce) { .tamsi-villas .tamsi-pathlist .elementor-icon-list-icon svg, .tamsi-villas .tamsi-pathlist .elementor-icon-list-icon i, .tamsi-villas .tamsi-pathlist .elementor-icon-list-text { transition: none; } } /* -------------------------------------------------------------------------- 5 · Anchors The header is fixed, so an anchored jump must clear it. Matches the design's clamp(72px, 9vh, 104px). -------------------------------------------------------------------------- */ .tamsi-villas #villas, .tamsi-villas #villa-tamsi, .tamsi-villas #inside, .tamsi-villas #policies, .tamsi-villas #comes-with, .tamsi-villas #key-bedrooms, .tamsi-villas #key-mezzanine, .tamsi-villas #key-bathrooms { scroll-margin-top: clamp(72px, 9vh, 104px); }