/* ============================================================================ Nono Ban — the Brač layer. The copy on this site is already specific ("a cove no road reaches", "the octopus is ordered a day ahead"). The surface was not: a flat cream fill, uniform 28px corners and no ornament could belong to a hotel anywhere. The direction here is carved, not printed. Brač is limestone — the quarries at Pučišća cut the stone that built Diocletian's Palace — and the island's interior, where Gornji Humac sits, is a lattice of dry-stone walls (suhozid) stacked by hand over centuries. So: the ground gains grain, headings are cut rather than set, sections are separated by a course of hand-drawn stone, and the olive that grows between those walls marks each section. Every effect is deliberately quiet. Material honesty, not decoration. ========================================================================= */ :root { /* the green of Dalmatian window shutters (škure) — already in the palette as --color-accent-2, unused until now */ --brac-olive: #7a8a5e; --brac-stone-line: color-mix(in srgb, #201e1d 22%, transparent); } /* --------------------------------------------------------------------------- 1. Limestone grain A flat hex fill reads as a screen. Real stone has tooth, so the ground gets a fine, fixed grain that the page slides underneath. ------------------------------------------------------------------------ */ body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 220px 220px; } /* --------------------------------------------------------------------------- 2. Cut, not set Brač is a stonemason's island — Pučišća still runs the only stonemasonry school in the country. Display type picks up the faintest relief of an inscription: a sliver of shadow in the cut, a catch of light on the lower edge. Kept under a pixel so it reads as material, never as an effect. ------------------------------------------------------------------------ */ h2, h3, .brac-cut { text-shadow: 0 1px 0 color-mix(in srgb, #fffdf7 62%, transparent), 0 -1px 0 color-mix(in srgb, #6b5a44 9%, transparent); } /* --------------------------------------------------------------------------- 3. Suhozid — the dry-stone course Drawn by hand: every stone a different width and height, the joints never plumb. It is the single most Brač thing on the island's interior, and it does the work a hairline rule used to do. ------------------------------------------------------------------------ */ .brac-wall, main > section + section:not(:nth-of-type(2))::before { content: ""; display: block; height: 27px; margin: 0 auto 44px; width: min(1280px, 100% - 48px); background-repeat: repeat-x; background-position: center; background-size: auto 27px; opacity: 0.34; /* two courses, joints staggered the way a mason lays them, no stone the same size as its neighbour */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='27' fill='none' stroke='%238d7c62' stroke-width='1.25' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 26.3h300'/%3E%3Cpath d='M0 26.3V16.4l72.5-1.6 1.8 11.5'/%3E%3Cpath d='M74.3 26.3V15.1l71 1.9-1.6 9.3'/%3E%3Cpath d='M143.7 26.3l1.1-9.6 75.4-1.9 2.1 11.5'/%3E%3Cpath d='M222.3 26.3V15.5l77.7 1.1'/%3E%3Cpath d='M0 14.6V4.3l35.6-1.1'/%3E%3Cpath d='M35.6 3.2l.9 11.1'/%3E%3Cpath d='M36.5 14.3l-.6-10.8 67.2-1.2 2.2 11.6'/%3E%3Cpath d='M105.3 13.9l-1.4-11.4 70.9 1.4-1.1 10.6'/%3E%3Cpath d='M173.7 14.5l.8-10.9 74.6-1.3 1.5 11.4'/%3E%3Cpath d='M250.6 13.7l-1.2-11 50.6.9'/%3E%3C/svg%3E"); } /* the search bar sits tight under the hero — no wall between them */ main > section:nth-of-type(2)::before { content: none; } /* --------------------------------------------------------------------------- 4. The olive What grows between the walls. A hand-drawn sprig sets each section label, in the green of the shutters rather than the terracotta used everywhere else, so the palette finally carries its second Dalmatian note. ------------------------------------------------------------------------ */ [style*="letter-spacing: 0.16em"]::before, [style*="letter-spacing:0.16em"]::before, [style*="letter-spacing: 0.22em"]::before, [style*="letter-spacing:0.22em"]::before { content: ""; display: inline-block; width: 19px; height: 12px; margin-right: 8px; vertical-align: -2px; background-color: var(--brac-olive); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: var(--brac-sprig); mask-image: var(--brac-sprig); } :root { --brac-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1.5 21.5c9-1.5 19-6.5 34.5-19'/%3E%3Cpath d='M12 16.5c-2.6-.6-4-2.4-3.4-4.6 2.7-.5 4.6.6 4.4 3'/%3E%3Cpath d='M20.5 11.5c-2.4-1-3.4-3-2.4-5.1 2.7-.1 4.3 1.3 3.7 3.6'/%3E%3Cpath d='M28.5 6c-2.1-1.3-2.7-3.5-1.3-5.3 2.6.4 3.8 2.1 2.8 4.2'/%3E%3Cpath d='M16.5 20.5c-2.7.2-4.5-1.1-4.5-3.4 2.5-1.1 4.6-.4 5 1.9'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- 5. Hand-cut corners Uniform 28px on every corner is a CSS default, not a decision. Stone gets dressed by eye, so each corner is pulled a little off true. The difference is a few pixels; the effect is that nothing looks stamped out. ------------------------------------------------------------------------ */ [style*="var(--radius-lg)"], [style*="border-radius: 28px"], [style*="border-radius:28px"], .card { border-radius: 30px 26px 31px 27px !important; } [style*="border-radius: 20px"], [style*="border-radius:20px"] { border-radius: 21px 18px 22px 19px !important; } /* pills stay pills — a rounded end is a shape, not a radius */ [style*="border-radius: 999px"], [style*="border-radius:999px"], .btn, .nb-more, [data-header-book] { border-radius: 999px !important; } /* --------------------------------------------------------------------------- 6. Mobile The ornament thins out where the screen is narrow: a shorter wall, a tighter sprig, and no relief on type that is already small. ------------------------------------------------------------------------ */ @media (max-width: 820px) { .brac-wall, main > section + section:not(:nth-of-type(2))::before { height: 20px; background-size: auto 20px; margin-bottom: 28px; width: min(1280px, 100% - 28px); opacity: 0.3; } [style*="letter-spacing: 0.16em"]::before, [style*="letter-spacing:0.16em"]::before, [style*="letter-spacing: 0.22em"]::before, [style*="letter-spacing:0.22em"]::before { width: 15px; height: 10px; margin-right: 6px; } h3 { text-shadow: none; } body::after { opacity: 0.045; } }