.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);
.shire-grid::-webkit-scrollbar-track background: #f0e7d4; border-radius: 8px; shires of britain
// 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" ]; </div>
/* two column layout: map sidebar + info panel */ .shire-explorer display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1rem; .shire-btn background: #f3ecd8
.shire-info-panel flex: 1.2; min-width: 260px; background: #fffdf5; border-radius: 36px; box-shadow: 0 20px 30px -12px rgba(0,0,0,0.12); padding: 1.6rem 1.8rem; backdrop-filter: blur(2px); transition: all 0.2s; border: 1px solid #e9dfc7;
</style> </head> <body> <div class="feature-container"> <div class="shires-header"> <h1>🏴 Shires of Britain 🏴</h1> <p>Historic counties & ancient shires — land of lore, legacy & landscape</p> </div> <div class="intro-text"> 🌿 From the chalk cliffs of Kent to the wild moors of Yorkshire, explore the traditional shires that shaped Britain's identity. Click any shire to uncover its character, county town, and timeless charm. </div>