Shires Of Britain ^hot^ [2026]

// Additional Scottish/other Shires? To enrich "Britain" we add a few iconic Scottish 'shires' (traditional counties) const scottishShires = [ id: "midlothian", name: "Midlothian", town: "Edinburgh", known: "Edinburgh Castle, Pentland Hills", since: "Medieval", region: "Scotland (Lothian)", motto: "🏴󠁧󠁢󠁳󠁣󠁴󠁿 'Scotland's historic heart' — royal mile & festivals" , id: "ayrshire", name: "Ayrshire", town: "Ayr", known: "Robert Burns country, Culzean Castle", since: "13th century", region: "South West Scotland", motto: "📝 'Burns' land' — rolling pastures & coastal golf" , id: "fife", name: "Fife", town: "Cupar", known: "St Andrews, fishing villages, Forth bridges", since: "Ancient", region: "Scotland", motto: "⛳ 'Ancient Kingdom of Fife' — home of golf" , id: "perthshire", name: "Perthshire", town: "Perth", known: "Highland boundary, Scone Palace, Loch Tay", since: "Medieval", region: "Central Scotland", motto: "🏴󠁧󠁢󠁳󠁣󠁴󠁿 'Heart of Scotland' — hills & glens" , id: "aberdeenshire", name: "Aberdeenshire", town: "Aberdeen", known: "Castles, Cairngorms, whisky trails", since: "Saxon / Pictish", region: "North East Scotland", motto: "🏰 'Castle country' — granite & royal deeside" , id: "inverness-shire", name: "Inverness-shire", town: "Inverness", known: "Loch Ness, Culloden, Great Glen", since: "Medieval", region: "Highlands", motto: "🦕 Nessie's home — wild majesty of the Highlands" ];

/* map card / interactive list + visual */ .shire-map-panel flex: 2; min-width: 260px; background: #fffef7; border-radius: 36px; box-shadow: 0 20px 30px -12px rgba(0,0,0,0.15); overflow: hidden; transition: all 0.2s;

// Function to highlight active button let activeButton = null; function setActiveButton(buttonElement) if (activeButton) activeButton.classList.remove('active'); shires of britain

@media (max-width: 750px) .feature-container padding: 1rem; .shire-grid grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); padding: 1rem; max-height: 400px; .shire-name-large font-size: 1.6rem; .shire-info-panel padding: 1.2rem;

const allShires = [...shiresData, ...scottishShires]; // Additional Scottish/other Shires

.shires-header h1 font-size: 2.6rem; letter-spacing: 1px; font-weight: 600; background: linear-gradient(135deg, #2c5e2e, #7a4c2c); background-clip: text; -webkit-background-clip: text; color: transparent; display: inline-block; margin-bottom: 0.25rem;

.intro-text background: #fef9e6; padding: 1rem 1.8rem; border-radius: 48px; margin-bottom: 2rem; box-shadow: 0 4px 8px rgba(0,0,0,0.05); border-left: 8px solid #b68b40; font-size: 1rem; text-align: center; max-width: 850px; margin-left: auto; margin-right: auto; known: "Edinburgh Castle

.shire-btn background: #f3ecd8; border: 1px solid #cfbc96; border-radius: 60px; padding: 0.7rem 0.3rem; font-size: 0.9rem; font-weight: 500; text-align: center; cursor: pointer; transition: 0.15s linear; color: #2c3e2b; font-family: inherit; box-shadow: 0 1px 2px rgba(0,0,0,0.05);