@charset "utf-8"; /* CSS Document */ /* ===== Page card with double frame ===== */ .amenities-card{ font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); background: var(--panel); line-height: 1.45; max-width: 950px; margin: 2.5rem auto; padding: 2.25rem; position: relative; margin-top: 150px; } /* Outer (dark) and inner (light) page frames sit under content */ .amenities-card::before, .amenities-card::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; } .amenities-card::before{ border: 3px solid var(--border-outer); } .amenities-card::after { inset: var(--inner-inset); border: 2px solid var(--border-inner); } .amenities-card > *{ position: relative; z-index: 1; } /* ===== Inner content frame (“slab”) ===== */ .amenities-slab{ position: relative; margin: 1.25rem; /* Room for the title row on top; content starts below the split rule */ padding: calc(var(--slab-pad) + var(--toprule-h)) var(--slab-pad) var(--slab-pad); border: none; /* we draw the edges with ::before */ } /* Left, right, bottom edges that BEGIN exactly at the H1 rule */ .amenities-slab::before{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; /* Start at the rule’s centerline; subtract half the border width for a perfect join */ top: calc(var(--toprule-h) / 2 - var(--slab-bw) / 2); border: var(--slab-bw) solid var(--border-inner); border-top: none; /* top is drawn by the split rule next */ pointer-events: none; } /* ===== Split top rule + title ===== */ /* Load the font in your : */ .amenities-toprule{ position: absolute; top: 0; left: 0; right: 0; height: var(--toprule-h); display: flex; align-items: center; /* centers the line vertically */ gap: 1rem; /* space around the title */ /* Lines must stop at the INSIDE edge of the slab’s vertical borders */ padding-inline: var(--slab-bw); margin: 0; } .amenities-toprule::before, .amenities-toprule::after{ content: ""; flex: 1 1 auto; border-top: var(--slab-bw) solid var(--border-inner); transform: translateZ(0); /* crisper joins on some GPUs */ } .amenities-toprule h1{ margin: 0; white-space: nowrap; font-family: "Dancing Script", cursive; font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--muted); } /* ===== Intro text ===== */ .amenities-card .intro{ text-align: center; max-width: 60ch; margin: 0 auto 1.5rem; } /* ===== Two flowing columns ===== */ .amenities-list{ column-gap: 2.25rem; } @media (min-width: 760px){ .amenities-list{ columns: 2; } } .amenity{ break-inside: avoid; margin: 0 0 1.15rem; } /* Section labels (small caps look) */ .amenity h2{ color: var(--muted); font-weight: 700; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; margin: .25rem 0 .4rem; } /* Preserve your manual line breaks; list-like look without bullets */ .amenity p{ white-space: pre-line; margin: 0;color:saddlebrown; }