unigrid.css 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +101 -0
- package/dist/dropdown.js +36 -0
- package/dist/index.js +5 -0
- package/dist/scrollspy.js +57 -0
- package/dist/tabs.js +30 -0
- package/dist/unigrid.css +4501 -0
- package/dist/unigrid.js +124 -0
- package/dist/unigrid.min.css +1 -0
- package/dist/unigrid.min.js +1 -0
- package/package.json +41 -0
- package/src/js/dropdown.js +49 -0
- package/src/js/index.js +19 -0
- package/src/js/scrollspy.js +87 -0
- package/src/js/tabs.js +58 -0
- package/src/scss/_accordion.scss +123 -0
- package/src/scss/_broadside.scss +125 -0
- package/src/scss/_buttons.scss +241 -0
- package/src/scss/_card.scss +168 -0
- package/src/scss/_components.scss +140 -0
- package/src/scss/_container.scss +54 -0
- package/src/scss/_dropdown.scss +178 -0
- package/src/scss/_footer.scss +147 -0
- package/src/scss/_formats.scss +64 -0
- package/src/scss/_forms.scss +192 -0
- package/src/scss/_grid.scss +114 -0
- package/src/scss/_header.scss +169 -0
- package/src/scss/_hero.scss +262 -0
- package/src/scss/_mixins.scss +120 -0
- package/src/scss/_modules.scss +238 -0
- package/src/scss/_navbar.scss +341 -0
- package/src/scss/_pagination.scss +160 -0
- package/src/scss/_prose.scss +393 -0
- package/src/scss/_reset.scss +82 -0
- package/src/scss/_scrollspy.scss +62 -0
- package/src/scss/_section.scss +91 -0
- package/src/scss/_sidebar.scss +147 -0
- package/src/scss/_table.scss +122 -0
- package/src/scss/_tabs.scss +178 -0
- package/src/scss/_typography.scss +105 -0
- package/src/scss/_utilities.scss +79 -0
- package/src/scss/_variables.scss +183 -0
- package/src/scss/unigrid.scss +49 -0
package/dist/unigrid.js
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
(() => {
|
|
2
|
+
// src/js/dropdown.js
|
|
3
|
+
(function() {
|
|
4
|
+
function init() {
|
|
5
|
+
document.addEventListener("click", function(e) {
|
|
6
|
+
var trigger = e.target.closest(".ug-dropdown__trigger");
|
|
7
|
+
if (trigger) {
|
|
8
|
+
e.preventDefault();
|
|
9
|
+
}
|
|
10
|
+
document.querySelectorAll(".ug-dropdown--open").forEach(function(dd) {
|
|
11
|
+
if (dd.closest(".docs-example__preview")) return;
|
|
12
|
+
if (!trigger || dd !== trigger.closest(".ug-dropdown")) {
|
|
13
|
+
dd.classList.remove("ug-dropdown--open");
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
if (trigger) {
|
|
17
|
+
var dropdown = trigger.closest(".ug-dropdown");
|
|
18
|
+
if (dropdown) {
|
|
19
|
+
dropdown.classList.toggle("ug-dropdown--open");
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
document.addEventListener("keydown", function(e) {
|
|
24
|
+
if (e.key === "Escape") {
|
|
25
|
+
document.querySelectorAll(".ug-dropdown--open").forEach(function(dd) {
|
|
26
|
+
dd.classList.remove("ug-dropdown--open");
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
if (document.readyState === "loading") {
|
|
32
|
+
document.addEventListener("DOMContentLoaded", init);
|
|
33
|
+
} else {
|
|
34
|
+
init();
|
|
35
|
+
}
|
|
36
|
+
})();
|
|
37
|
+
|
|
38
|
+
// src/js/tabs.js
|
|
39
|
+
(function() {
|
|
40
|
+
function init() {
|
|
41
|
+
document.addEventListener("click", function(e) {
|
|
42
|
+
var link = e.target.closest("[data-ug-tab]");
|
|
43
|
+
if (!link) return;
|
|
44
|
+
e.preventDefault();
|
|
45
|
+
var tabs = link.closest(".ug-tabs");
|
|
46
|
+
if (!tabs) return;
|
|
47
|
+
var target = link.getAttribute("data-ug-tab");
|
|
48
|
+
tabs.querySelectorAll(".ug-tabs__link").forEach(function(l) {
|
|
49
|
+
l.classList.remove("ug-tabs__link--active");
|
|
50
|
+
});
|
|
51
|
+
tabs.querySelectorAll(".ug-tabs__panel").forEach(function(p) {
|
|
52
|
+
p.classList.remove("ug-tabs__panel--active");
|
|
53
|
+
});
|
|
54
|
+
link.classList.add("ug-tabs__link--active");
|
|
55
|
+
var panel = tabs.querySelector('[data-ug-panel="' + target + '"]');
|
|
56
|
+
if (panel) {
|
|
57
|
+
panel.classList.add("ug-tabs__panel--active");
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
if (document.readyState === "loading") {
|
|
62
|
+
document.addEventListener("DOMContentLoaded", init);
|
|
63
|
+
} else {
|
|
64
|
+
init();
|
|
65
|
+
}
|
|
66
|
+
})();
|
|
67
|
+
|
|
68
|
+
// src/js/scrollspy.js
|
|
69
|
+
(function() {
|
|
70
|
+
function init() {
|
|
71
|
+
document.querySelectorAll("[data-ug-scrollspy]").forEach(function(nav) {
|
|
72
|
+
var links = nav.querySelectorAll(".ug-scrollspy__link, [data-ug-spy]");
|
|
73
|
+
if (!links.length) return;
|
|
74
|
+
var offset = parseInt(nav.getAttribute("data-ug-scrollspy-offset") || "100", 10);
|
|
75
|
+
var activeClass = nav.getAttribute("data-ug-scrollspy-class") || "ug-scrollspy__link--active";
|
|
76
|
+
var targets = [];
|
|
77
|
+
links.forEach(function(link) {
|
|
78
|
+
var href = link.getAttribute("href");
|
|
79
|
+
if (!href || href.charAt(0) !== "#") return;
|
|
80
|
+
var target = document.querySelector(href);
|
|
81
|
+
if (target) {
|
|
82
|
+
targets.push({ link, target });
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
if (!targets.length) return;
|
|
86
|
+
var visibleSections = /* @__PURE__ */ new Set();
|
|
87
|
+
var observer = new IntersectionObserver(function(entries) {
|
|
88
|
+
entries.forEach(function(entry) {
|
|
89
|
+
if (entry.isIntersecting) {
|
|
90
|
+
visibleSections.add(entry.target.id);
|
|
91
|
+
} else {
|
|
92
|
+
visibleSections.delete(entry.target.id);
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
var activeId = null;
|
|
96
|
+
for (var i = 0; i < targets.length; i++) {
|
|
97
|
+
if (visibleSections.has(targets[i].target.id)) {
|
|
98
|
+
activeId = targets[i].target.id;
|
|
99
|
+
break;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
targets.forEach(function(item) {
|
|
103
|
+
if (item.target.id === activeId) {
|
|
104
|
+
item.link.classList.add(activeClass);
|
|
105
|
+
} else {
|
|
106
|
+
item.link.classList.remove(activeClass);
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
}, {
|
|
110
|
+
rootMargin: "-" + offset + "px 0px -50% 0px",
|
|
111
|
+
threshold: 0
|
|
112
|
+
});
|
|
113
|
+
targets.forEach(function(item) {
|
|
114
|
+
observer.observe(item.target);
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
if (document.readyState === "loading") {
|
|
119
|
+
document.addEventListener("DOMContentLoaded", init);
|
|
120
|
+
} else {
|
|
121
|
+
init();
|
|
122
|
+
}
|
|
123
|
+
})();
|
|
124
|
+
})();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{font-family:Inter,sans-serif;font-feature-settings:"liga" 1,"calt" 1,"ss07" 1}@supports(font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}html{font-size:16px;font-size:100%;-webkit-text-size-adjust:100%;--ug-leading: 26px;line-height:var(--ug-leading)}@media screen and (min-width: 35rem){html{font-size:18px;font-size:112.5%;--ug-leading: 31px}}body{font-family:Inter,sans-serif;font-feature-settings:"liga" 1,"calt" 1,"ss07" 1;font-size:1rem;font-weight:400;color:#1a1a1a;background-color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@supports(font-variation-settings: normal){body{font-family:InterVariable,sans-serif}}img,svg,video{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:underline}table{border-collapse:collapse;border-spacing:0}button,input,select,textarea{font:inherit;color:inherit}.ug-container{width:100%;padding-left:calc(var(--ug-leading)*1.5);padding-right:calc(var(--ug-leading)*1.5)}.ug-container--narrow{max-width:1280px;margin-left:auto;margin-right:auto}.ug-container--wide{max-width:1600px;margin-left:auto;margin-right:auto}.ug-container--fluid{max-width:none}.ug-container--flush{padding-left:0;padding-right:0}@media(max-width: 767px){.ug-container{padding-left:var(--ug-leading);padding-right:var(--ug-leading)}.ug-container--flush{padding-left:0;padding-right:0}}.ug-grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:var(--ug-leading);width:100%}.ug-grid--no-gap{gap:0}.ug-grid--dense{grid-auto-flow:dense}.ug-grid--rows{grid-template-rows:repeat(20, 1fr)}.ug-col--1{grid-column:span 1}.ug-col--2{grid-column:span 2}.ug-col--3{grid-column:span 3}.ug-col--4{grid-column:span 4}.ug-col--5{grid-column:span 5}.ug-col--6{grid-column:span 6}.ug-col--7{grid-column:span 7}.ug-col--8{grid-column:span 8}.ug-col--9{grid-column:span 9}.ug-col--10{grid-column:span 10}.ug-col--11{grid-column:span 11}.ug-col--12{grid-column:span 12}.ug-col--start-1{grid-column-start:1}.ug-col--start-2{grid-column-start:2}.ug-col--start-3{grid-column-start:3}.ug-col--start-4{grid-column-start:4}.ug-col--start-5{grid-column-start:5}.ug-col--start-6{grid-column-start:6}.ug-col--start-7{grid-column-start:7}.ug-col--start-8{grid-column-start:8}.ug-col--start-9{grid-column-start:9}.ug-col--start-10{grid-column-start:10}.ug-col--start-11{grid-column-start:11}.ug-col--start-12{grid-column-start:12}.ug-row--1{grid-row:span 1}.ug-row--2{grid-row:span 2}.ug-row--3{grid-row:span 3}.ug-row--4{grid-row:span 4}.ug-row--5{grid-row:span 5}.ug-row--6{grid-row:span 6}.ug-row--7{grid-row:span 7}.ug-row--8{grid-row:span 8}.ug-row--9{grid-row:span 9}.ug-row--10{grid-row:span 10}.ug-row--start-1{grid-row-start:1}.ug-row--start-2{grid-row-start:2}.ug-row--start-3{grid-row-start:3}.ug-row--start-4{grid-row-start:4}.ug-row--start-5{grid-row-start:5}.ug-row--start-6{grid-row-start:6}.ug-row--start-7{grid-row-start:7}.ug-row--start-8{grid-row-start:8}.ug-row--start-9{grid-row-start:9}.ug-row--start-10{grid-row-start:10}.ug-subgrid{display:grid;grid-template-columns:subgrid}.ug-subgrid--rows{grid-template-rows:subgrid}@media(min-width: 480px){.ug-col--sm-1{grid-column:span 1}.ug-col--sm-2{grid-column:span 2}.ug-col--sm-3{grid-column:span 3}.ug-col--sm-4{grid-column:span 4}.ug-col--sm-5{grid-column:span 5}.ug-col--sm-6{grid-column:span 6}.ug-col--sm-7{grid-column:span 7}.ug-col--sm-8{grid-column:span 8}.ug-col--sm-9{grid-column:span 9}.ug-col--sm-10{grid-column:span 10}.ug-col--sm-11{grid-column:span 11}.ug-col--sm-12{grid-column:span 12}}@media(min-width: 768px){.ug-col--md-1{grid-column:span 1}.ug-col--md-2{grid-column:span 2}.ug-col--md-3{grid-column:span 3}.ug-col--md-4{grid-column:span 4}.ug-col--md-5{grid-column:span 5}.ug-col--md-6{grid-column:span 6}.ug-col--md-7{grid-column:span 7}.ug-col--md-8{grid-column:span 8}.ug-col--md-9{grid-column:span 9}.ug-col--md-10{grid-column:span 10}.ug-col--md-11{grid-column:span 11}.ug-col--md-12{grid-column:span 12}}@media(min-width: 1024px){.ug-col--lg-1{grid-column:span 1}.ug-col--lg-2{grid-column:span 2}.ug-col--lg-3{grid-column:span 3}.ug-col--lg-4{grid-column:span 4}.ug-col--lg-5{grid-column:span 5}.ug-col--lg-6{grid-column:span 6}.ug-col--lg-7{grid-column:span 7}.ug-col--lg-8{grid-column:span 8}.ug-col--lg-9{grid-column:span 9}.ug-col--lg-10{grid-column:span 10}.ug-col--lg-11{grid-column:span 11}.ug-col--lg-12{grid-column:span 12}}@media(min-width: 1280px){.ug-col--xl-1{grid-column:span 1}.ug-col--xl-2{grid-column:span 2}.ug-col--xl-3{grid-column:span 3}.ug-col--xl-4{grid-column:span 4}.ug-col--xl-5{grid-column:span 5}.ug-col--xl-6{grid-column:span 6}.ug-col--xl-7{grid-column:span 7}.ug-col--xl-8{grid-column:span 8}.ug-col--xl-9{grid-column:span 9}.ug-col--xl-10{grid-column:span 10}.ug-col--xl-11{grid-column:span 11}.ug-col--xl-12{grid-column:span 12}}.ug-align--start{align-self:start}.ug-align--center{align-self:center}.ug-align--end{align-self:end}.ug-align--stretch{align-self:stretch}.ug-justify--start{justify-self:start}.ug-justify--center{justify-self:center}.ug-justify--end{justify-self:end}.ug-justify--stretch{justify-self:stretch}.ug-place--center{align-self:center;justify-self:center}.ug-format{width:100%;max-width:100%;margin-inline:auto;position:relative}.ug-format--a1{--ug-panels-wide: 1;--ug-panels-long: 1;--ug-format-cols: 1}.ug-format--a2{--ug-panels-wide: 1;--ug-panels-long: 2;--ug-format-cols: 2}.ug-format--a3{--ug-panels-wide: 1;--ug-panels-long: 3;--ug-format-cols: 3}.ug-format--a4{--ug-panels-wide: 1;--ug-panels-long: 4;--ug-format-cols: 4}.ug-format--a6{--ug-panels-wide: 1;--ug-panels-long: 6;--ug-format-cols: 6}.ug-format--b1{--ug-panels-wide: 2;--ug-panels-long: 1;--ug-format-cols: 1}.ug-format--b2{--ug-panels-wide: 2;--ug-panels-long: 2;--ug-format-cols: 2}.ug-format--b3{--ug-panels-wide: 2;--ug-panels-long: 3;--ug-format-cols: 3}.ug-format--b4{--ug-panels-wide: 2;--ug-panels-long: 4;--ug-format-cols: 4}.ug-format--b6{--ug-panels-wide: 2;--ug-panels-long: 6;--ug-format-cols: 6}.ug-format--a1>.ug-broadside,.ug-format--a1>.ug-grid{grid-template-columns:repeat(1, 1fr)}.ug-format--a2>.ug-broadside,.ug-format--a2>.ug-grid{grid-template-columns:repeat(2, 1fr)}.ug-format--a3>.ug-broadside,.ug-format--a3>.ug-grid{grid-template-columns:repeat(3, 1fr)}.ug-format--a4>.ug-broadside,.ug-format--a4>.ug-grid{grid-template-columns:repeat(4, 1fr)}.ug-format--a6>.ug-broadside,.ug-format--a6>.ug-grid{grid-template-columns:repeat(6, 1fr)}.ug-format--b1>.ug-broadside,.ug-format--b1>.ug-grid{grid-template-columns:repeat(1, 1fr)}.ug-format--b2>.ug-broadside,.ug-format--b2>.ug-grid{grid-template-columns:repeat(2, 1fr)}.ug-format--b3>.ug-broadside,.ug-format--b3>.ug-grid{grid-template-columns:repeat(3, 1fr)}.ug-format--b4>.ug-broadside,.ug-format--b4>.ug-grid{grid-template-columns:repeat(4, 1fr)}.ug-format--b6>.ug-broadside,.ug-format--b6>.ug-grid{grid-template-columns:repeat(6, 1fr)}.ug-ratio--din{aspect-ratio:1 / 1.4142135}.ug-ratio--din-landscape{aspect-ratio:1.4142135 / 1}.ug-broadside{display:grid;grid-template-columns:repeat(var(--ug-format-cols, 12), 1fr);gap:var(--ug-leading);width:100%;min-height:0}.ug-broadside--full-height{min-height:100vh}.ug-broadside--din{aspect-ratio:1.4142135 / 1}@media(max-width: 767px){.ug-broadside--stack{grid-template-columns:1fr}.ug-broadside--stack>.ug-panel{grid-column:span 1;display:block}.ug-broadside--stack>.ug-fold{display:none}}.ug-panel{grid-column:span 1;display:grid;grid-template-columns:subgrid;grid-template-rows:auto 1fr auto;padding:var(--ug-leading);min-height:0}.ug-panel__header{grid-row:1;grid-column:1/-1}.ug-panel__body{grid-row:2;grid-column:1/-1}.ug-panel__footer{grid-row:3;grid-column:1/-1}.ug-panel--flush{padding:0}.ug-panel--dark{background-color:#1a1a1a;color:#fff}.ug-panel--gray{background-color:#f5f2ed}.ug-panel--accent{background-color:#c1272d;color:#fff}.ug-panel--span-2{grid-column:span 2}.ug-panel--span-3{grid-column:span 3}.ug-panel--span-4{grid-column:span 4}.ug-panel--span-5{grid-column:span 5}.ug-panel--span-6{grid-column:span 6}.ug-fold{grid-row:1/-1;width:1px;background-color:#e8e5e0;justify-self:end;pointer-events:none}.ug-fold--dashed{background:repeating-linear-gradient(to bottom, #e8e5e0 0, #e8e5e0 6px, transparent 6px, transparent 12px)}.ug-header{display:flex;align-items:flex-start;gap:var(--ug-leading);background-color:#1a1a1a;color:#fff;padding:var(--ug-leading) calc(var(--ug-leading)*1.5);width:100%;grid-column:1/-1;flex-wrap:wrap}.ug-header__logo{height:calc(var(--ug-leading)*3);flex-shrink:0}.ug-header__logo img,.ug-header__logo svg{height:100%;width:auto}.ug-header__title{display:flex;flex-direction:column;gap:0;flex-shrink:0}.ug-header__title h1,.ug-header__title a{font-size:3rem;font-weight:700;line-height:calc(var(--ug-leading)*2);letter-spacing:-0.02em;text-transform:none;margin:0}.ug-header__title a{text-decoration:none}.ug-header__name{font-size:3rem;font-weight:700;line-height:calc(var(--ug-leading)*2);letter-spacing:-0.02em;margin:0;flex-shrink:0}.ug-header__subtitle{font-size:1.25rem;font-weight:300;line-height:calc(var(--ug-leading)*1);opacity:.85;margin:0}.ug-header .ug-navbar{flex:1;background:rgba(0,0,0,0);border:none;min-height:0}.ug-header .ug-navbar__inner{padding:0;max-width:none;min-height:0;justify-content:flex-end;align-items:flex-start}.ug-header .ug-navbar__brand{display:none}.ug-header .ug-navbar__link{color:hsla(0,0%,100%,.7)}.ug-header .ug-navbar__link:hover{color:#fff;background-color:hsla(0,0%,100%,.1)}.ug-header .ug-navbar__link--active{color:#fff}.ug-header .ug-navbar__toggle{color:#fff}.ug-header .ug-navbar__divider{background-color:hsla(0,0%,100%,.15)}@media(max-width: 767px){.ug-header .ug-navbar__menu{background-color:#1a1a1a}}.ug-header--compact{padding:calc(var(--ug-leading)*.5) calc(var(--ug-leading)*1.5)}.ug-header--compact .ug-header__logo{width:auto;height:calc(var(--ug-leading)*2)}.ug-header--compact .ug-header__title h1,.ug-header--compact .ug-header__title a,.ug-header--compact .ug-header__name{font-size:2rem;line-height:calc(var(--ug-leading)*1)}.ug-header--compact .ug-header__subtitle{font-size:.875rem;line-height:calc(var(--ug-leading)*1)}.ug-header--brown{background-color:#4a3728}.ug-header--full{grid-column:1/-1}@media(max-width: 767px){.ug-header__title h1,.ug-header__title a,.ug-header__name{font-size:2rem}.ug-header__subtitle{font-size:1rem}.ug-header__logo{width:2.5rem}}.ug-navbar{width:100%;background-color:#fff;border-bottom:1px solid #e8e5e0;position:relative;z-index:50}.ug-navbar__inner{display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:0 auto;padding:0 var(--ug-leading);height:calc(var(--ug-leading)*2 - 1px)}.ug-navbar__brand{display:flex;align-items:center;gap:calc(var(--ug-leading)*.5);font-size:.875rem;font-weight:700;text-decoration:none;color:inherit;flex-shrink:0}.ug-navbar__toggle{display:none;align-items:center;justify-content:center;cursor:pointer;background:none;border:1px solid currentColor;padding:0 calc(var(--ug-leading)*.75);height:calc(var(--ug-leading)*1.5);margin-top:calc(var(--ug-leading)*.5);color:inherit;font-size:.875rem;font-weight:700;letter-spacing:.05em;font-family:inherit;transition:background-color .15s,color .15s;z-index:1000}.ug-navbar__toggle:hover{background-color:hsla(0,0%,100%,.1)}.ug-navbar__toggle__close{display:none}.ug-navbar__toggle__label{display:inline}@media(max-width: 767px){.ug-navbar__toggle{display:inline-flex}}.ug-navbar__toggle--active .ug-navbar__toggle__label{display:none}.ug-navbar__toggle--active .ug-navbar__toggle__close{display:inline}.ug-navbar__toggle--hamburger{border:1px solid currentColor;padding:0;margin-top:calc(var(--ug-leading)*.5);margin-right:0;flex-direction:column;gap:0;width:calc(var(--ug-leading)*1.5);height:calc(var(--ug-leading)*1.5)}.ug-navbar__toggle--hamburger:hover{background-color:hsla(0,0%,100%,.1)}.ug-navbar__toggle--hamburger span{display:block;width:1.125rem;height:2px;background-color:currentColor;transition:transform .3s,opacity .3s}.ug-navbar__toggle--hamburger span:nth-child(2){margin-top:5px}.ug-navbar__toggle--hamburger span:nth-child(3){margin-top:5px}.ug-navbar__toggle--hamburger.ug-navbar__toggle--active span:nth-child(1){transform:translateY(7px) rotate(45deg)}.ug-navbar__toggle--hamburger.ug-navbar__toggle--active span:nth-child(2){opacity:0}.ug-navbar__toggle--hamburger.ug-navbar__toggle--active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.ug-navbar__menu{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}@media(max-width: 767px){.ug-navbar__menu{display:none;flex-direction:column;align-items:stretch;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#1a1a1a;color:#fff;padding:calc(var(--ug-leading)*4) 0 var(--ug-leading) 0;overflow-y:auto;z-index:99}.ug-navbar__menu--open{display:flex}}.ug-navbar__item{display:flex;align-items:center}.ug-navbar__link{display:inline-flex;align-items:center;height:100%;padding:0 calc(var(--ug-leading)*.5);font-size:1rem;font-weight:300;color:#333;text-decoration:none;white-space:nowrap;transition:color .15s,background-color .15s}.ug-navbar__link:hover{color:#1a1a1a;background-color:#f5f2ed}.ug-navbar__link--active{color:#1a1a1a}@media(max-width: 767px){.ug-navbar__link{display:flex;align-items:center;height:calc(var(--ug-leading)*2);padding:0 calc(var(--ug-leading)*1.5);font-size:1.25rem;color:hsla(0,0%,100%,.7)}.ug-navbar__link:hover{color:#fff;background-color:hsla(0,0%,100%,.05)}.ug-navbar__link--active{color:#fff}}.ug-navbar__divider{width:1px;height:var(--ug-leading);background-color:#e8e5e0;margin:0 calc(var(--ug-leading)*.25)}@media(max-width: 767px){.ug-navbar__divider{width:auto;height:1px;margin:calc(var(--ug-leading)*.25) calc(var(--ug-leading)*1.5);background-color:hsla(0,0%,100%,.15)}}@media(max-width: 767px){.ug-navbar .ug-dropdown{flex-direction:column;align-items:stretch}.ug-navbar .ug-dropdown__menu{position:static;display:flex;flex-direction:column;background:none;border:none;box-shadow:none;padding:0;min-width:0}.ug-navbar .ug-dropdown__link{display:flex;align-items:center;height:calc(var(--ug-leading)*2);padding:0 calc(var(--ug-leading)*2.5);font-size:1rem;color:hsla(0,0%,100%,.5);text-decoration:none}.ug-navbar .ug-dropdown__link:hover{color:#fff;background-color:hsla(0,0%,100%,.05)}.ug-navbar .ug-dropdown__caret{display:none}.ug-navbar .ug-dropdown__divider{height:1px;background-color:hsla(0,0%,100%,.1);margin:calc(var(--ug-leading)*.25) calc(var(--ug-leading)*2.5)}.ug-navbar .ug-dropdown__header{padding:0 calc(var(--ug-leading)*2.5);color:hsla(0,0%,100%,.3)}}.ug-navbar--dark{background-color:#1a1a1a;border-bottom-color:hsla(0,0%,100%,.1)}.ug-navbar--dark .ug-navbar__link{color:hsla(0,0%,100%,.7)}.ug-navbar--dark .ug-navbar__link:hover{color:#fff;background-color:hsla(0,0%,100%,.1)}.ug-navbar--dark .ug-navbar__link--active{color:#fff}.ug-navbar--dark .ug-navbar__brand{color:#fff}.ug-navbar--dark .ug-navbar__toggle{color:#fff}.ug-navbar--dark .ug-navbar__divider{background-color:hsla(0,0%,100%,.15)}@media(max-width: 767px){.ug-navbar--dark .ug-navbar__menu{background-color:#1a1a1a;border-bottom-color:hsla(0,0%,100%,.1)}}.ug-navbar--fixed{position:fixed;top:0;left:0;right:0}.ug-navbar--transparent{background-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0)}.ug-navbar--transparent .ug-navbar__link{color:hsla(0,0%,100%,.8)}.ug-navbar--transparent .ug-navbar__link:hover{color:#fff;background-color:hsla(0,0%,100%,.1)}.ug-navbar--transparent .ug-navbar__link--active{color:#fff}.ug-navbar--transparent .ug-navbar__brand{color:#fff}.ug-navbar--transparent .ug-navbar__toggle{color:#fff}@media(max-width: 767px){.ug-navbar--transparent .ug-navbar__menu{background-color:#1a1a1a}}html,body{min-height:100vh}body{display:flex;flex-direction:column}body>*:not(.ug-footer){flex-shrink:0}body>.ug-footer{margin-top:auto}.ug-footer{width:100%;background-color:#1a1a1a;color:#fff;padding:calc(var(--ug-leading)*3) calc(var(--ug-leading)*1.5)}.ug-footer__inner{max-width:1280px;margin:0 auto}.ug-footer__brand{font-size:1.25rem;font-weight:700;line-height:calc(var(--ug-leading)*1);margin-bottom:calc(var(--ug-leading)*1);color:#fff;text-decoration:none;display:block}.ug-footer__text{font-size:.875rem;line-height:calc(var(--ug-leading)*1);color:hsla(0,0%,100%,.5);margin:0}.ug-footer__nav{display:flex;flex-wrap:wrap;gap:var(--ug-leading);list-style:none;margin:0;padding:0}.ug-footer__link{font-size:.875rem;line-height:calc(var(--ug-leading)*1);color:hsla(0,0%,100%,.7);text-decoration:none;transition:color .15s}.ug-footer__link:hover{color:#fff}.ug-footer__divider{border:none;border-top:1px solid hsla(0,0%,100%,.1);padding-top:calc(var(--ug-leading) - 1px);margin:0}.ug-footer--compact{padding:var(--ug-leading) calc(var(--ug-leading)*1.5)}.ug-footer--compact .ug-footer__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--ug-leading)}.ug-footer--compact .ug-footer__brand{margin-bottom:0;font-size:.875rem}.ug-footer--compact .ug-footer__nav{margin-bottom:0}.ug-footer--light{background-color:#f5f2ed;color:#1a1a1a}.ug-footer--light .ug-footer__brand{color:#1a1a1a}.ug-footer--light .ug-footer__text{color:#666}.ug-footer--light .ug-footer__link{color:#333}.ug-footer--light .ug-footer__link:hover{color:#1a1a1a}.ug-footer--light .ug-footer__divider{border-top-color:#e8e5e0}@media(max-width: 767px){.ug-footer{padding:calc(var(--ug-leading)*2) var(--ug-leading)}.ug-footer--compact{padding:var(--ug-leading)}}.ug-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-height:round(down,50vh,var(--ug-leading));padding:calc(var(--ug-leading)*3) calc(var(--ug-leading)*1.5);color:#fff;overflow:hidden}.ug-hero__background{position:absolute;inset:0;z-index:0}.ug-hero__background img,.ug-hero__background video{width:100%;height:100%;object-fit:cover}.ug-hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%)}.ug-hero__content{position:relative;z-index:2;max-width:1280px;width:100%}.ug-hero__title{font-size:2.5rem;line-height:calc(var(--ug-leading)*2);font-weight:900;letter-spacing:-0.02em;margin-bottom:calc(var(--ug-leading)*1);margin-top:0}@media(max-width: 767px){.ug-hero__title{font-size:2rem}}.ug-hero__subtitle{font-size:1.25rem;font-weight:300;line-height:calc(var(--ug-leading)*1);opacity:.85;margin-bottom:0;margin-top:0}.ug-hero__lead{font-size:1rem;font-weight:400;line-height:calc(var(--ug-leading)*1);max-width:35rem;opacity:.8;margin-bottom:calc(var(--ug-leading)*1);margin-top:0}.ug-hero__actions{display:flex;gap:var(--ug-leading);flex-wrap:wrap;margin-top:calc(var(--ug-leading)*1)}.ug-hero--full{min-height:round(down,100vh,var(--ug-leading))}.ug-hero--half{min-height:round(down,50vh,var(--ug-leading))}.ug-hero--third{min-height:round(down,33vh,var(--ug-leading))}.ug-hero--auto{min-height:0}.ug-hero--center{justify-content:center;align-items:center;text-align:center}.ug-hero--center .ug-hero__content{display:flex;flex-direction:column;align-items:center}.ug-hero--center .ug-hero__lead{margin-left:auto;margin-right:auto}.ug-hero--center .ug-hero__actions{justify-content:center}.ug-hero--bottom{justify-content:flex-end}.ug-hero--top{justify-content:flex-start}.ug-hero--dark{background-color:#1a1a1a;color:#fff}.ug-hero--light{background-color:#f5f2ed;color:#1a1a1a}.ug-hero--light .ug-hero__overlay{background:linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 60%, transparent 100%)}.ug-hero--brown{background-color:#4a3728}.ug-hero--green{background-color:#2d5a27}.ug-hero--blue{background-color:#274a5a}.ug-hero--red{background-color:#c1272d}.ug-hero--din{aspect-ratio:1.4142135 / 1;min-height:0;margin-bottom:calc(var(--ug-leading) - mod(100vw/1.4142135,var(--ug-leading)))}@media(max-width: 767px){.ug-hero{padding:calc(var(--ug-leading)*2) var(--ug-leading);min-height:round(down,40vh,var(--ug-leading))}.ug-hero--full{min-height:round(down,100vh,var(--ug-leading))}}.ug-hero__btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--ug-leading)*.5);height:calc(var(--ug-leading)*1.5);padding:0 var(--ug-leading);font-size:.875rem;font-weight:700;text-decoration:none;border:2px solid currentColor;background:rgba(0,0,0,0);color:inherit;cursor:pointer;transition:background-color .15s,color .15s}.ug-hero__btn:hover{background-color:#fff;color:#1a1a1a}.ug-hero__btn--filled{background-color:#fff;color:#1a1a1a;border-color:#fff}.ug-hero__btn--filled:hover{background-color:rgba(0,0,0,0);color:#fff}.ug-section{width:100%;background-color:#1a1a1a;color:#fff;padding:var(--ug-leading) calc(var(--ug-leading)*1.5)}.ug-section__title{font-size:1.6875rem;line-height:calc(var(--ug-leading)*1.5);font-weight:900;letter-spacing:-0.01em;margin:0}.ug-section__subtitle{font-size:.875rem;font-weight:300;line-height:calc(var(--ug-leading)*1);opacity:.7;margin:0}.ug-section--compact{padding:calc(var(--ug-leading)*.5) calc(var(--ug-leading)*1.5)}.ug-section--compact .ug-section__title{font-size:1.2rem;line-height:calc(var(--ug-leading)*1)}.ug-section--large{padding:calc(var(--ug-leading)*2) calc(var(--ug-leading)*1.5)}.ug-section--large .ug-section__title{font-size:2.5rem;line-height:calc(var(--ug-leading)*2)}.ug-section--brown{background-color:#4a3728}.ug-section--red{background-color:#c1272d}.ug-section--green{background-color:#2d5a27}.ug-section--blue{background-color:#274a5a}.ug-section--light{background-color:#f5f2ed;color:#1a1a1a}@media(max-width: 767px){.ug-section{padding:var(--ug-leading) var(--ug-leading)}.ug-section--large{padding:calc(var(--ug-leading)*1.5) var(--ug-leading)}.ug-section--compact{padding:calc(var(--ug-leading)*.5) var(--ug-leading)}}h1,.ug-h1{font-size:2.5rem;line-height:calc(var(--ug-leading)*2);font-weight:700;margin-bottom:calc(var(--ug-leading)*0.5);margin-top:0;font-weight:800;letter-spacing:-0.02em}h2,.ug-h2{font-size:1.6875rem;line-height:calc(var(--ug-leading)*2);font-weight:700;margin-bottom:calc(var(--ug-leading)*0.5);margin-top:0}h3,.ug-h3{font-size:1.375rem;line-height:calc(var(--ug-leading)*1);font-weight:700;margin-bottom:calc(var(--ug-leading)*0.5);margin-top:0}h4,.ug-h4{font-size:1.2rem;line-height:calc(var(--ug-leading)*1);font-weight:700;margin-bottom:calc(var(--ug-leading)*0.5);margin-top:0}h5,.ug-h5{font-size:1rem;line-height:calc(var(--ug-leading)*1);font-weight:700;margin-bottom:calc(var(--ug-leading)*0.5);margin-top:0}h6,.ug-h6{font-size:1rem;line-height:calc(var(--ug-leading)*1);font-weight:700;margin-bottom:calc(var(--ug-leading)*0.5);margin-top:0}.ug-body{font-size:1rem;font-weight:400;line-height:calc(var(--ug-leading)*1)}.ug-body--sm{font-size:.875rem}.ug-body--lg{font-size:1.25rem}.ug-lead{font-size:1.2rem;font-weight:300;line-height:calc(var(--ug-leading)*1);margin-bottom:calc(var(--ug-leading)*0.5);margin-top:0}.ug-caption{font-size:.75rem;font-weight:400;line-height:calc(var(--ug-leading)*1);color:#666}.ug-label{font-size:.75rem;font-weight:700;line-height:calc(var(--ug-leading)*1);text-transform:uppercase;letter-spacing:.08em}.ug-text--left{text-align:left}.ug-text--center{text-align:center}.ug-text--right{text-align:right}.ug-text--black{color:#1a1a1a}.ug-text--white{color:#fff}.ug-text--warm-gray{color:#f5f2ed}.ug-text--dark-gray{color:#333}.ug-text--medium-gray{color:#666}.ug-text--light-gray{color:#e8e5e0}.ug-text--red{color:#c1272d}.ug-text--brown{color:#4a3728}.ug-text--green{color:#2d5a27}.ug-text--blue{color:#274a5a}.ug-text--cols-2{columns:2;column-gap:calc(var(--ug-leading)*1.5)}@media(max-width: 767px){.ug-text--cols-2{columns:1}}.ug-text--cols-3{columns:3;column-gap:calc(var(--ug-leading)*1.5)}@media(max-width: 767px){.ug-text--cols-3{columns:1}}.ug-text--cols-4{columns:4;column-gap:calc(var(--ug-leading)*1.5)}@media(max-width: 767px){.ug-text--cols-4{columns:1}}.ug-prose{font-family:Inter,sans-serif;color:#1a1a1a;font-size:16px;font-size:100%;line-height:calc(var(--ug-leading)*1)}@media screen and (min-width: 35rem){.ug-prose{font-size:18px;font-size:112.5%}}@supports(font-variation-settings: normal){.ug-prose{font-family:InterVariable,sans-serif}}.ug-prose *{line-height:calc(var(--ug-leading)*1);margin-bottom:calc(var(--ug-leading)*1);margin-top:0}.ug-prose>*{max-width:35rem}@media screen and (min-width: 35rem){.ug-prose>*{margin-left:auto;margin-right:auto}}.ug-prose h1{font-size:2.5rem;line-height:calc(var(--ug-leading)*2);margin-top:calc(var(--ug-leading)*4);margin-bottom:calc(var(--ug-leading)*1);font-weight:700;font-weight:900;letter-spacing:-0.02em}.ug-prose h2{font-size:1.6875rem;line-height:calc(var(--ug-leading)*2);margin-top:calc(var(--ug-leading)*3);margin-bottom:calc(var(--ug-leading)*1);font-weight:700}.ug-prose h3{font-size:1.375rem;line-height:calc(var(--ug-leading)*1);margin-top:calc(var(--ug-leading)*2);margin-bottom:calc(var(--ug-leading)*1);font-weight:700}.ug-prose h4{font-size:1.2rem;line-height:calc(var(--ug-leading)*1);margin-top:calc(var(--ug-leading)*2);margin-bottom:calc(var(--ug-leading)*1);font-weight:700}.ug-prose h5{font-size:1rem;line-height:calc(var(--ug-leading)*1);margin-top:calc(var(--ug-leading)*2);margin-bottom:calc(var(--ug-leading)*1);font-weight:700}.ug-prose h6{font-size:1rem;line-height:calc(var(--ug-leading)*1);margin-top:calc(var(--ug-leading)*2);margin-bottom:calc(var(--ug-leading)*1);font-weight:700}.ug-prose h1+h2{margin-top:calc(var(--ug-leading)*1)}.ug-prose h2+h3,.ug-prose h3+h4,.ug-prose h4+h5{margin-top:calc(var(--ug-leading)*0.5)}.ug-prose h5+h6{margin-top:calc(var(--ug-leading)*-0.5)}.ug-prose h6{font-style:italic;font-weight:normal}.ug-prose p{margin-bottom:calc(var(--ug-leading)*1)}.ug-prose .ug-prose__lead,.ug-prose .attention-grabber{font-size:1.2rem}.ug-prose a{color:#1a1a1a;transition:color .2s}.ug-prose a:hover{color:#1a1a1a}.ug-prose a:visited{color:#666}.ug-prose a:visited:hover{color:#1a1a1a}.ug-prose br{margin-bottom:0}.ug-prose abbr{letter-spacing:.1em}.ug-prose abbr[title]{border-bottom:1px dotted;text-decoration:none}.ug-prose b,.ug-prose strong{font-weight:700}.ug-prose dfn{font-style:italic}.ug-prose em,.ug-prose i{line-height:0;vertical-align:baseline}.ug-prose mark{background:#ff0;color:#000;padding:0 .2em}.ug-prose small{font-size:70%;line-height:calc(var(--ug-leading)*0.5)}.ug-prose sub,.ug-prose sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.ug-prose sup{top:-0.5em}.ug-prose sub{bottom:-0.25em}.ug-prose blockquote{font-style:italic;padding-left:1.4375rem;margin-top:calc(var(--ug-leading)*1);margin-bottom:calc(var(--ug-leading)*1)}@media screen and (min-width: 35rem){.ug-prose blockquote{padding-left:2rem}}.ug-prose blockquote cite{display:block;font-style:normal;font-size:.875rem;color:#888}.ug-prose figure blockquote{padding:calc(var(--ug-leading)*1) calc(var(--ug-leading)*0);text-align:center}.ug-prose figure blockquote p{font-size:1.6875rem;line-height:calc(var(--ug-leading)*1.5)}.ug-prose ul,.ug-prose ol{padding-left:1.5rem}.ug-prose ul li,.ug-prose ol li{margin-bottom:0}.ug-prose pre{overflow:auto;padding:calc(var(--ug-leading)*1) calc(var(--ug-leading)*1);background-color:#f5f2ed;border:1px solid #e8e5e0}.ug-prose code,.ug-prose kbd,.ug-prose samp{font-family:"SF Mono","Fira Code",Consolas,monospace;font-size:.875rem}.ug-prose :not(pre)>code{background-color:#f5f2ed;padding:.15em .4em;border-radius:2px}.ug-prose table{border-collapse:collapse;border-spacing:0;width:100%;margin-bottom:calc(var(--ug-leading)*1)}.ug-prose table th,.ug-prose table td{padding:.5em .75em;text-align:left;border-bottom:1px solid #e8e5e0}.ug-prose table th{font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.ug-prose hr{border:none;border-bottom:1px solid #e8e5e0;padding-top:calc(var(--ug-leading) - 1px);margin-top:calc(var(--ug-leading)*1);margin-bottom:calc(var(--ug-leading)*1)}.ug-prose hr.ug-divider--bold{border-bottom:3px solid #1a1a1a;padding-top:calc(var(--ug-leading) - 3px)}.ug-prose figure{display:block;margin-bottom:calc(var(--ug-leading)*1);max-width:100%}.ug-prose figcaption{display:block;font-size:.75rem;line-height:calc(var(--ug-leading)*1);color:#666;font-style:italic;text-align:center;margin-bottom:0;margin-top:.5rem}.ug-prose img{border:0;max-width:100%;display:block;height:auto}.ug-prose input,.ug-prose textarea,.ug-prose select{font:inherit;color:inherit;margin-bottom:calc(var(--ug-leading)*1)}.ug-prose--indent p+p{margin-top:calc(var(--ug-leading)*-1);text-indent:var(--ug-leading);text-indent:var(--ug-leading)}.ug-prose--grid{background-image:linear-gradient(to bottom, hsla(200, 100%, 50%, 0.3) 1px, transparent 1px);background-position:left top;background-repeat:repeat;background-size:100% var(--ug-leading);background-size:100% var(--ug-leading)}.ug-prose--grid-double{background-image:linear-gradient(to bottom, hsla(200, 100%, 50%, 0.3) 1px, transparent 1px, transparent calc(var(--ug-leading) * 0.5), hsla(200, 100%, 50%, 0.15) calc(var(--ug-leading) * 0.5), transparent calc(var(--ug-leading) * 0.5 + 1px), transparent var(--ug-leading));background-position:left top;background-repeat:repeat;background-size:100% var(--ug-leading);background-size:100% var(--ug-leading)}.ug-prose--debug>*{outline:1px solid hsla(210,80%,60%,.5);position:relative;box-shadow:0 calc(-1*var(--debug-mt, 0px)) 0 0 rgba(255,153,51,.15),0 calc(var(--debug-mb, 0px)) 0 0 rgba(255,153,51,.15)}.ug-prose--debug>*::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 var(--debug-pt, 0px) 0 0 hsla(140,70%,50%,.1),inset 0 calc(-1*var(--debug-pb, 0px)) 0 0 hsla(140,70%,50%,.1),inset var(--debug-pl, 0px) 0 0 0 hsla(140,70%,50%,.1),inset calc(-1*var(--debug-pr, 0px)) 0 0 0 hsla(140,70%,50%,.1)}.ug-prose--debug h1{--debug-mt: calc(var(--ug-leading) * 4);--debug-mb: calc(var(--ug-leading) * 1)}.ug-prose--debug h2{--debug-mt: calc(var(--ug-leading) * 3);--debug-mb: calc(var(--ug-leading) * 1)}.ug-prose--debug h3{--debug-mt: calc(var(--ug-leading) * 2);--debug-mb: calc(var(--ug-leading) * 1)}.ug-prose--debug h4{--debug-mt: calc(var(--ug-leading) * 2);--debug-mb: calc(var(--ug-leading) * 1)}.ug-prose--debug p,.ug-prose--debug ul,.ug-prose--debug ol,.ug-prose--debug table,.ug-prose--debug figure,.ug-prose--debug hr{--debug-mt: 0px;--debug-mb: var(--ug-leading)}.ug-prose--debug blockquote{--debug-pl: 1.4375rem;--debug-pt: 0px;--debug-pb: 0px;--debug-pr: 0px;--debug-mt: var(--ug-leading);--debug-mb: var(--ug-leading)}.ug-prose--debug pre{--debug-pt: var(--ug-leading);--debug-pr: var(--ug-leading);--debug-pb: var(--ug-leading);--debug-pl: var(--ug-leading);--debug-mt: 0px;--debug-mb: var(--ug-leading)}.ug-prose--debug ul,.ug-prose--debug ol{--debug-pl: 1.5rem}.ug-prose--grid.ug-prose--debug>*,.ug-prose--grid-double.ug-prose--debug>*{outline:1px solid hsla(210,80%,60%,.5)}.ug-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--ug-leading)*.5);height:calc(var(--ug-leading)*1.5);padding:0 var(--ug-leading);font-size:1rem;font-weight:700;font-family:inherit;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;border:2px solid #1a1a1a;background-color:#1a1a1a;color:#fff;transition:background-color .15s,border-color .15s,color .15s}.ug-btn:hover{background-color:#333;border-color:#333;color:#fff;text-decoration:none}.ug-btn:active{background-color:rgb(13.25,13.25,13.25);border-color:rgb(13.25,13.25,13.25)}.ug-btn--brown{background-color:#4a3728;border-color:#4a3728}.ug-btn--brown:hover{background-color:rgb(100.4842105263,74.6842105263,54.3157894737);border-color:rgb(100.4842105263,74.6842105263,54.3157894737)}.ug-btn--red{background-color:#c1272d;border-color:#c1272d}.ug-btn--red:hover{background-color:rgb(215.125862069,57.674137931,63.8086206897);border-color:rgb(215.125862069,57.674137931,63.8086206897)}.ug-btn--green{background-color:#2d5a27;border-color:#2d5a27}.ug-btn--green:hover{background-color:rgb(59.2325581395,118.4651162791,51.3348837209);border-color:rgb(59.2325581395,118.4651162791,51.3348837209)}.ug-btn--blue{background-color:#274a5a;border-color:#274a5a}.ug-btn--blue:hover{background-color:rgb(51.3348837209,97.4046511628,118.4651162791);border-color:rgb(51.3348837209,97.4046511628,118.4651162791)}.ug-btn--light{background-color:#f5f2ed;border-color:#f5f2ed;color:#1a1a1a}.ug-btn--light:hover{background-color:hsl(37.5,28.5714285714%,89.5098039216%);border-color:hsl(37.5,28.5714285714%,89.5098039216%);color:#1a1a1a}.ug-btn--outline{background-color:rgba(0,0,0,0);color:#1a1a1a}.ug-btn--outline:hover{background-color:#1a1a1a;color:#fff}.ug-btn--outline.ug-btn--brown{border-color:#4a3728;color:#4a3728;background-color:rgba(0,0,0,0)}.ug-btn--outline.ug-btn--brown:hover{background-color:#4a3728;color:#fff}.ug-btn--outline.ug-btn--red{border-color:#c1272d;color:#c1272d;background-color:rgba(0,0,0,0)}.ug-btn--outline.ug-btn--red:hover{background-color:#c1272d;color:#fff}.ug-btn--outline.ug-btn--green{border-color:#2d5a27;color:#2d5a27;background-color:rgba(0,0,0,0)}.ug-btn--outline.ug-btn--green:hover{background-color:#2d5a27;color:#fff}.ug-btn--outline.ug-btn--blue{border-color:#274a5a;color:#274a5a;background-color:rgba(0,0,0,0)}.ug-btn--outline.ug-btn--blue:hover{background-color:#274a5a;color:#fff}.ug-btn--outline.ug-btn--light{border-color:#e8e5e0;color:#333;background-color:rgba(0,0,0,0)}.ug-btn--outline.ug-btn--light:hover{background-color:#f5f2ed;color:#1a1a1a}.ug-btn--ghost{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:#1a1a1a}.ug-btn--ghost:hover{background-color:#f5f2ed;border-color:#f5f2ed;color:#1a1a1a}.ug-btn--sm{font-size:.875rem;height:var(--ug-leading);padding:0 calc(var(--ug-leading)*.5)}.ug-btn--lg{font-size:1.25rem;height:calc(var(--ug-leading)*2);padding:0 calc(var(--ug-leading)*1.5)}.ug-btn--block{display:flex;width:100%}.ug-btn--disabled,.ug-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.ug-btn__icon{display:inline-flex;width:1em;height:1em;flex-shrink:0}.ug-btn__icon svg{width:100%;height:100%}.ug-btn-group{display:inline-flex;gap:0}.ug-btn-group .ug-btn{border-radius:0}.ug-btn-group .ug-btn:not(:last-child){border-right-width:1px}.ug-btn-group .ug-btn:not(:first-child){border-left-width:1px}.ug-dropdown{position:relative;display:inline-flex}.ug-dropdown__trigger{display:inline-flex;align-items:center;gap:calc(var(--ug-leading)*.25);cursor:pointer;user-select:none}.ug-dropdown__trigger:is(button):not(.ug-btn){background:none;border:none;padding:0;font:inherit;font-weight:300}.ug-dropdown__caret{display:inline-block;width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-top:-0.15em;flex-shrink:0}.ug-dropdown__menu{position:absolute;top:100%;left:0;z-index:100;display:none;min-width:12rem;padding:calc(var(--ug-leading)*.25) 0;background-color:#fff;border:1px solid #e8e5e0;box-shadow:0 4px 12px rgba(0,0,0,.1);list-style:none;margin:0}.ug-dropdown--open>.ug-dropdown__menu{display:block}.ug-dropdown--open>.ug-dropdown__trigger .ug-dropdown__caret{transform:rotate(-135deg);margin-top:.15em}.ug-dropdown__item{display:block}.ug-dropdown__link{display:block;padding:calc(var(--ug-leading)*.25) calc(var(--ug-leading)*.5);font-size:.875rem;line-height:calc(var(--ug-leading)*1);color:#333;text-decoration:none;white-space:nowrap;transition:background-color .1s,color .1s}.ug-dropdown__link:hover{background-color:#f5f2ed;color:#1a1a1a}.ug-dropdown__link--active{font-weight:700;color:#1a1a1a}.ug-dropdown__divider{height:1px;background-color:#e8e5e0;margin:calc(var(--ug-leading)*.25) 0}.ug-dropdown__header{display:block;padding:calc(var(--ug-leading)*.25) calc(var(--ug-leading)*.5);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#666}.ug-dropdown--active>.ug-navbar__link{color:#fff !important}.ug-dropdown--active>.ug-dropdown__trigger{color:#1a1a1a}.ug-navbar .ug-dropdown{align-items:stretch}.ug-navbar .ug-dropdown__trigger:is(button){padding:0 calc(var(--ug-leading)*.5)}.ug-dropdown--right>.ug-dropdown__menu{left:auto;right:0}.ug-dropdown--up>.ug-dropdown__menu{top:auto;bottom:100%;box-shadow:0 -4px 12px rgba(0,0,0,.1)}.ug-dropdown--up>.ug-dropdown__trigger .ug-dropdown__caret{transform:rotate(-135deg);margin-top:.15em}.ug-dropdown--up.ug-dropdown--open>.ug-dropdown__trigger .ug-dropdown__caret{transform:rotate(45deg);margin-top:-0.15em}.ug-tabs__nav{display:flex;list-style:none;margin:0;padding:0;border-bottom:2px solid #e8e5e0}.ug-tabs__item{display:flex}.ug-tabs__link{display:inline-flex;align-items:center;padding:calc(var(--ug-leading)*.5) var(--ug-leading);font-size:.875rem;font-weight:700;line-height:calc(var(--ug-leading)*1);color:#666;text-decoration:none;border:none;background:none;cursor:pointer;font-family:inherit;position:relative;transition:color .15s;margin-bottom:-2px;border-bottom:2px solid rgba(0,0,0,0)}.ug-tabs__link:hover{color:#1a1a1a}.ug-tabs__link--active{color:#1a1a1a;border-bottom-color:#1a1a1a}.ug-tabs__content{padding:var(--ug-leading) 0}.ug-tabs__panel{display:none}.ug-tabs__panel--active{display:block}.ug-tabs--bordered .ug-tabs__nav{border-bottom:1px solid #e8e5e0}.ug-tabs--bordered .ug-tabs__link{border:1px solid rgba(0,0,0,0);border-bottom:none;margin-bottom:-1px;padding:calc(var(--ug-leading)*.5) var(--ug-leading)}.ug-tabs--bordered .ug-tabs__link--active{border-color:#e8e5e0;background-color:#fff;box-shadow:0 1px 0 0 #fff}.ug-tabs--pills .ug-tabs__nav{border-bottom:none;gap:calc(var(--ug-leading)*.25)}.ug-tabs--pills .ug-tabs__link{border-bottom:none;margin-bottom:0;border-radius:2px}.ug-tabs--pills .ug-tabs__link:hover{background-color:#f5f2ed}.ug-tabs--pills .ug-tabs__link--active{background-color:#1a1a1a;color:#fff}.ug-tabs--pills .ug-tabs__link--active:hover{background-color:#333}.ug-tabs--vertical{display:flex;gap:var(--ug-leading)}.ug-tabs--vertical .ug-tabs__nav{flex-direction:column;border-bottom:none;border-right:2px solid #e8e5e0;flex-shrink:0;min-width:calc(var(--ug-leading)*8)}.ug-tabs--vertical .ug-tabs__link{margin-bottom:0;margin-right:-2px;border-bottom:none;border-right:2px solid rgba(0,0,0,0)}.ug-tabs--vertical .ug-tabs__link--active{border-right-color:#1a1a1a;border-bottom-color:rgba(0,0,0,0)}.ug-tabs--vertical .ug-tabs__content{flex:1;padding:0}@media(max-width: 767px){.ug-tabs--vertical{flex-direction:column}.ug-tabs--vertical .ug-tabs__nav{flex-direction:row;border-right:none;border-bottom:2px solid #e8e5e0;min-width:0;overflow-x:auto}.ug-tabs--vertical .ug-tabs__link{margin-right:0;margin-bottom:-2px;border-right:none;border-bottom:2px solid rgba(0,0,0,0);white-space:nowrap}.ug-tabs--vertical .ug-tabs__link--active{border-right-color:rgba(0,0,0,0);border-bottom-color:#1a1a1a}}.ug-accordion__item{border-bottom:1px solid #e8e5e0}.ug-accordion__item[open]>.ug-accordion__header .ug-accordion__caret{transform:rotate(-135deg)}.ug-accordion__header{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--ug-leading)*.5) 0;font-size:1rem;font-weight:700;line-height:calc(var(--ug-leading)*1);cursor:pointer;list-style:none;user-select:none;transition:color .15s}.ug-accordion__header::-webkit-details-marker{display:none}.ug-accordion__header::marker{content:""}.ug-accordion__header:hover{color:#666}.ug-accordion__caret{display:inline-block;width:.6em;height:.6em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;flex-shrink:0;margin-left:var(--ug-leading)}.ug-accordion__body{padding:0 0 var(--ug-leading) 0;font-size:.875rem;line-height:calc(var(--ug-leading)*1);color:#333}.ug-accordion--bordered{border:1px solid #e8e5e0}.ug-accordion--bordered .ug-accordion__item{border-bottom:1px solid #e8e5e0}.ug-accordion--bordered .ug-accordion__item:last-child{border-bottom:none}.ug-accordion--bordered .ug-accordion__header{padding:calc(var(--ug-leading)*.5) var(--ug-leading)}.ug-accordion--bordered .ug-accordion__body{padding:0 var(--ug-leading) var(--ug-leading)}.ug-accordion--flush .ug-accordion__item{border-bottom:none}.ug-accordion--dark{background-color:#1a1a1a;color:#fff}.ug-accordion--dark .ug-accordion__item{border-bottom-color:hsla(0,0%,100%,.1)}.ug-accordion--dark .ug-accordion__header:hover{color:hsla(0,0%,100%,.6)}.ug-accordion--dark .ug-accordion__body{color:hsla(0,0%,100%,.7)}.ug-pagination{display:flex;align-items:center;justify-content:center;gap:0;margin-top:calc(var(--ug-leading)*1);margin-bottom:calc(var(--ug-leading)*1)}.ug-pagination__list{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}.ug-pagination__item{display:flex}.ug-pagination__link{display:inline-flex;align-items:center;justify-content:center;min-width:calc(var(--ug-leading)*1.5);height:calc(var(--ug-leading)*1.5);padding:0 calc(var(--ug-leading)*.25);font-size:1rem;font-weight:400;color:#1a1a1a;text-decoration:none;border-bottom:2px solid rgba(0,0,0,0);transition:border-color .15s,color .15s}.ug-pagination__link:hover{border-bottom-color:#1a1a1a}.ug-pagination__item--current .ug-pagination__link{font-weight:700;border-bottom-color:#1a1a1a}.ug-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:calc(var(--ug-leading)*1.5);height:calc(var(--ug-leading)*1.5);font-size:1rem;color:#666}.ug-pagination__arrow{display:inline-flex;align-items:center;justify-content:center;min-width:calc(var(--ug-leading)*1.5);height:calc(var(--ug-leading)*1.5);font-size:1rem;color:#1a1a1a;text-decoration:none;transition:color .15s}.ug-pagination__arrow:hover{color:#666}.ug-pagination__arrow--disabled{color:#e8e5e0;pointer-events:none}.ug-pagination__arrow svg{width:.75em;height:.75em}.ug-pagination--block{flex-direction:column;gap:var(--ug-leading);align-items:stretch}@media(min-width: 768px){.ug-pagination--block{flex-direction:row;justify-content:space-between}}.ug-pagination__prev,.ug-pagination__next{display:flex;flex-direction:column;padding:var(--ug-leading);text-decoration:none;color:#1a1a1a;border:1px solid #e8e5e0;transition:border-color .15s,background-color .15s;flex:1}.ug-pagination__prev:hover,.ug-pagination__next:hover{border-color:#1a1a1a;background-color:#f5f2ed}.ug-pagination__next{text-align:right;align-items:flex-end}.ug-pagination__label{display:flex;align-items:center;gap:calc(var(--ug-leading)*.25);font-size:.875rem;line-height:calc(var(--ug-leading)*1);font-weight:400;color:#666;margin-bottom:calc(var(--ug-leading)*0.5)}.ug-pagination__title{font-size:1.25rem;line-height:calc(var(--ug-leading)*1);font-weight:700}.ug-scrollspy{position:sticky;top:var(--ug-leading);align-self:flex-start}.ug-scrollspy__nav{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;border-left:2px solid #e8e5e0}.ug-scrollspy__link{display:block;padding:calc(var(--ug-leading)*.25) var(--ug-leading);font-size:.875rem;line-height:calc(var(--ug-leading)*1);color:#666;text-decoration:none;border-left:2px solid rgba(0,0,0,0);margin-left:-2px;transition:color .15s,border-color .15s}.ug-scrollspy__link:hover{color:#1a1a1a}.ug-scrollspy__link--active{color:#1a1a1a;font-weight:700;border-left-color:#1a1a1a}.ug-scrollspy__link--nested{padding-left:calc(var(--ug-leading)*1.5);font-size:.75rem}.ug-table{width:100%;border-collapse:collapse;border-spacing:0;margin-bottom:calc(var(--ug-leading)*1);font-feature-settings:"tnum" 1}.ug-table th{font-size:.875rem;font-weight:700;line-height:calc(var(--ug-leading)*1);text-align:left;text-transform:uppercase;letter-spacing:.05em;color:#666;padding:calc(var(--ug-leading)*.5) calc(var(--ug-leading)*.5);border-bottom:2px solid #1a1a1a;vertical-align:bottom}.ug-table td{font-size:1rem;line-height:calc(var(--ug-leading)*1);text-align:left;padding:calc(var(--ug-leading)*.5) calc(var(--ug-leading)*.5);border-bottom:1px solid #e8e5e0;vertical-align:top}.ug-table caption{font-size:.875rem;line-height:calc(var(--ug-leading)*1);margin-bottom:calc(var(--ug-leading)*0.5);color:#666;text-align:left;caption-side:top}.ug-table--striped tbody tr:nth-child(even){background-color:#f5f2ed}.ug-table--bordered th,.ug-table--bordered td{border:1px solid #e8e5e0}.ug-table--bordered th{border-bottom-width:2px;border-bottom-color:#1a1a1a}.ug-table--compact th,.ug-table--compact td{font-size:.875rem;padding:calc(var(--ug-leading)*.25) calc(var(--ug-leading)*.5)}.ug-table--dark th{background-color:#1a1a1a;color:#fff;border-bottom-color:#1a1a1a}.ug-table--hover tbody tr{transition:background-color .1s}.ug-table--hover tbody tr:hover{background-color:#f5f2ed}.ug-table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:calc(var(--ug-leading)*1)}.ug-table-responsive .ug-table{margin-bottom:0}.ug-card{display:flex;flex-direction:column;background-color:#fff;border:1px solid #e8e5e0;overflow:hidden}.ug-card__image{display:block;width:100%;overflow:hidden}.ug-card__image img{width:100%;height:100%;object-fit:cover;display:block}.ug-card__image--square{aspect-ratio:1}.ug-card__image--landscape{aspect-ratio:16/9}.ug-card__image--din{aspect-ratio:1.4142/1}.ug-card__body{display:flex;flex-direction:column;flex:1;padding:var(--ug-leading) calc(var(--ug-leading)*1.5)}.ug-card__title{font-size:1.2rem;line-height:calc(var(--ug-leading)*1);font-weight:700;margin-bottom:calc(var(--ug-leading)*0.5);margin-top:0}.ug-card__subtitle{font-size:.875rem;line-height:calc(var(--ug-leading)*1);color:#666;margin-top:0;margin-bottom:calc(var(--ug-leading)*0.5)}.ug-card__text{font-size:.875rem;line-height:calc(var(--ug-leading)*1);color:#333;flex:1}.ug-card__footer{padding:calc(var(--ug-leading)*.5) calc(var(--ug-leading)*1.5);border-top:1px solid #e8e5e0;font-size:.75rem;line-height:calc(var(--ug-leading)*1);color:#666}.ug-card__actions{display:flex;gap:calc(var(--ug-leading)*.5);padding:var(--ug-leading) calc(var(--ug-leading)*1.5);padding-top:0}.ug-card--dark{background-color:#1a1a1a;border-color:#1a1a1a;color:#fff}.ug-card--dark .ug-card__text{color:hsla(0,0%,100%,.7)}.ug-card--dark .ug-card__subtitle{color:hsla(0,0%,100%,.5)}.ug-card--dark .ug-card__footer{border-top-color:hsla(0,0%,100%,.1);color:hsla(0,0%,100%,.5)}.ug-card--bordered{border-width:2px;border-color:#1a1a1a}.ug-card--flat{border:none;box-shadow:0 1px 4px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04)}.ug-card--horizontal{flex-direction:row}.ug-card--horizontal .ug-card__image{width:40%;flex-shrink:0}.ug-card--horizontal .ug-card__image img{height:100%}.ug-card--horizontal .ug-card__body{flex:1}@media(max-width: 767px){.ug-card--horizontal{flex-direction:column}.ug-card--horizontal .ug-card__image{width:100%}}.ug-card--accent-red{border-top:3px solid #c1272d}.ug-card--accent-brown{border-top:3px solid #4a3728}.ug-card--accent-green{border-top:3px solid #2d5a27}.ug-card--accent-blue{border-top:3px solid #274a5a}.ug-card-grid{display:grid;gap:var(--ug-leading)}.ug-card-grid--2{grid-template-columns:repeat(2, 1fr)}.ug-card-grid--3{grid-template-columns:repeat(3, 1fr)}.ug-card-grid--4{grid-template-columns:repeat(4, 1fr)}@media(max-width: 1023px){.ug-card-grid--4{grid-template-columns:repeat(2, 1fr)}.ug-card-grid--3{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 767px){.ug-card-grid--2,.ug-card-grid--3,.ug-card-grid--4{grid-template-columns:1fr}}.ug-sidebar-layout{--ug-sidebar-width: calc(var(--ug-leading) * 12);display:flex;width:100%;min-height:0}.ug-sidebar-layout__sidebar{width:var(--ug-sidebar-width);flex-shrink:0;padding:var(--ug-leading) calc(var(--ug-leading)*1.5)}@media(max-width: 767px){.ug-sidebar-layout__sidebar{display:none}}.ug-sidebar-layout__main{flex:1;min-width:0;padding:var(--ug-leading) calc(var(--ug-leading)*1.5)}.ug-sidebar-layout--right{flex-direction:row-reverse}.ug-sidebar-layout--sticky .ug-sidebar-layout__sidebar{position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto}.ug-sidebar-layout--bordered .ug-sidebar-layout__sidebar{border-right:1px solid #e8e5e0}.ug-sidebar-layout--bordered.ug-sidebar-layout--right .ug-sidebar-layout__sidebar{border-right:none;border-left:1px solid #e8e5e0}@media(max-width: 767px){.ug-sidebar-layout__sidebar--visible{display:block}}.ug-sidebar-layout__nav{list-style:none;margin:0;padding:0}.ug-sidebar-layout__nav-item{display:block}.ug-sidebar-layout__nav-link{display:flex;align-items:center;padding:calc(var(--ug-leading)*.5) 0;font-size:.875rem;line-height:calc(var(--ug-leading)*1);color:#333;text-decoration:none;border-bottom:1px solid #e8e5e0;transition:color .15s}.ug-sidebar-layout__nav-link:hover{color:#1a1a1a}.ug-sidebar-layout__nav-link--active{font-weight:700;color:#1a1a1a}@media(max-width: 767px){.ug-sidebar-layout{flex-direction:column}.ug-sidebar-layout__main{padding:var(--ug-leading)}.ug-sidebar-layout--right{flex-direction:column}.ug-sidebar-layout--bordered .ug-sidebar-layout__sidebar{border-right:none;border-left:none;border-bottom:1px solid #e8e5e0}}.ug-form__group{margin-bottom:calc(var(--ug-leading)*0.5)}.ug-form__label{display:block;font-size:.875rem;font-weight:700;line-height:calc(var(--ug-leading)*1);margin-top:calc(var(--ug-leading)*0.5);margin-bottom:0;color:#1a1a1a}.ug-form__input{display:block;width:100%;height:calc(var(--ug-leading)*1.5);padding:0 calc(var(--ug-leading)*.5);font-size:1rem;font-family:inherit;color:#1a1a1a;background-color:#fff;border:1px solid #e8e5e0;transition:border-color .15s}.ug-form__input::placeholder{color:#666}.ug-form__input:focus{outline:none;border-color:#1a1a1a}.ug-form__input--sm{height:calc(var(--ug-leading)*1);font-size:.875rem}.ug-form__input--lg{height:calc(var(--ug-leading)*2);font-size:1.25rem}.ug-form__select{display:block;width:100%;height:calc(var(--ug-leading)*1.5);padding:0 calc(var(--ug-leading)*1) 0 calc(var(--ug-leading)*.5);font-size:1rem;font-family:inherit;color:#1a1a1a;background-color:#fff;border:1px solid #e8e5e0;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right calc(var(--ug-leading)*.5) center;background-size:12px;transition:border-color .15s}.ug-form__select:focus{outline:none;border-color:#1a1a1a}.ug-form__textarea{display:block;width:100%;min-height:calc(var(--ug-leading)*4);padding:calc(var(--ug-leading)*.5);font-size:1rem;line-height:calc(var(--ug-leading)*1);font-family:inherit;color:#1a1a1a;background-color:#fff;border:1px solid #e8e5e0;resize:vertical;transition:border-color .15s}.ug-form__textarea::placeholder{color:#666}.ug-form__textarea:focus{outline:none;border-color:#1a1a1a}.ug-form__checkbox,.ug-form__radio{display:flex;align-items:center;gap:calc(var(--ug-leading)*.5);line-height:calc(var(--ug-leading)*1);margin-bottom:calc(var(--ug-leading)*0.5);cursor:pointer}.ug-form__checkbox input,.ug-form__radio input{width:1em;height:1em;margin:0;accent-color:#1a1a1a;cursor:pointer}.ug-form__checkbox span,.ug-form__radio span{font-size:1rem;color:#1a1a1a}.ug-form__help{font-size:.75rem;line-height:calc(var(--ug-leading)*1);color:#666;margin-top:calc(var(--ug-leading)*.25)}.ug-form__error{font-size:.75rem;line-height:calc(var(--ug-leading)*1);color:#c1272d;margin-top:calc(var(--ug-leading)*.25)}.ug-form__input:invalid,.ug-form__textarea:invalid,.ug-form__select:invalid{border-color:#c1272d}.ug-form--inline{display:flex;align-items:flex-end;gap:calc(var(--ug-leading)*.5);flex-wrap:wrap}.ug-form--inline .ug-form__group{margin-bottom:0}.ug-form--inline .ug-form__input,.ug-form--inline .ug-form__select{width:auto}.ug-form--disabled,.ug-form__input:disabled,.ug-form__select:disabled,.ug-form__textarea:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ug-block{padding:calc(var(--ug-leading)*1) calc(var(--ug-leading)*1)}.ug-block--flush{padding:0}.ug-block+.ug-block{margin-top:calc(var(--ug-leading)*1)}.ug-map{width:100%;min-height:calc(var(--ug-leading)*12 - 2px);background-color:#f5f2ed;border:1px solid #e8e5e0;overflow:hidden;position:relative}.ug-map img{width:100%;height:100%;object-fit:cover}.ug-map--full{grid-column:1/-1;min-height:50vh}.ug-infobox{background-color:#f5f2ed;padding:calc(var(--ug-leading)*1) calc(var(--ug-leading)*1);border-left:3px solid #1a1a1a}.ug-infobox--dark{background-color:#1a1a1a;color:#fff;border-left-color:#fff}.ug-infobox__title{font-size:.875rem;font-weight:700;line-height:calc(var(--ug-leading)*1);text-transform:uppercase;letter-spacing:.08em;margin-bottom:0}.ug-image{width:100%;overflow:hidden}.ug-image img{width:100%;height:100%;object-fit:cover}.ug-image--contain img{object-fit:contain}.ug-image--din{aspect-ratio:1 / 1.4142135}.ug-image--din-landscape{aspect-ratio:1.4142135 / 1}.ug-divider{border:none;border-top:1px solid #e8e5e0;padding-top:calc(var(--ug-leading)*.5 - 1px);padding-bottom:calc(var(--ug-leading)*.5);grid-column:1/-1}.ug-divider--bold{border-top:3px solid #1a1a1a;padding-top:calc(var(--ug-leading)*.5 - 3px)}.ug-label-divider{font-size:.875rem;font-weight:700;line-height:calc(var(--ug-leading) - 2px);margin-bottom:calc(var(--ug-leading)*.5 - 2px);text-transform:uppercase;letter-spacing:.1em;color:#666;border-bottom:2px solid #1a1a1a;margin-top:calc(var(--ug-leading)*0.5)}.ug-label-divider--bold{line-height:calc(var(--ug-leading) - 3px);border-bottom-width:3px;margin-bottom:calc(var(--ug-leading)*.5 - 3px)}.ug-label-divider--light{border-bottom-color:#e8e5e0}.ug-modules{position:relative;display:flex;flex-wrap:wrap;box-sizing:border-box;width:100%}.ug-modules--flush{padding:0}.ug-module{position:relative;box-sizing:border-box;overflow:hidden;flex-shrink:0}.ug-modules{padding:2.381vw 0 0 4.7619vw;gap:2.381vw}.ug-module{margin:0}.ug-module--1x1{height:28.5714vw;width:28.5714vw;height:28.5714vw;width:28.5714vw}.ug-module--2x1{height:calc(28.5714vw*2 + 2.381vw*1);width:calc(28.5714vw*1 + 2.381vw*0);width:28.5714vw}.ug-module--3x1{height:calc(28.5714vw*3 + 2.381vw*2);width:calc(28.5714vw*1 + 2.381vw*0);width:28.5714vw}.ug-module--4x1{height:calc(28.5714vw*4 + 2.381vw*3);width:calc(28.5714vw*1 + 2.381vw*0);width:28.5714vw}.ug-module--5x1{height:calc(28.5714vw*5 + 2.381vw*4);width:calc(28.5714vw*1 + 2.381vw*0);width:28.5714vw}.ug-module--6x1{height:calc(28.5714vw*6 + 2.381vw*5);width:calc(28.5714vw*1 + 2.381vw*0);width:28.5714vw}.ug-module--1x2{height:calc(28.5714vw*1 + 2.381vw*0);width:calc(28.5714vw*2 + 2.381vw*1);height:28.5714vw}.ug-module--2x2{height:calc(28.5714vw*2 + 2.381vw*1);width:calc(28.5714vw*2 + 2.381vw*1)}.ug-module--3x2{height:calc(28.5714vw*3 + 2.381vw*2);width:calc(28.5714vw*2 + 2.381vw*1)}.ug-module--4x2{height:calc(28.5714vw*4 + 2.381vw*3);width:calc(28.5714vw*2 + 2.381vw*1)}.ug-module--5x2{height:calc(28.5714vw*5 + 2.381vw*4);width:calc(28.5714vw*2 + 2.381vw*1)}.ug-module--6x2{height:calc(28.5714vw*6 + 2.381vw*5);width:calc(28.5714vw*2 + 2.381vw*1)}.ug-module--1x3{height:calc(28.5714vw*1 + 2.381vw*0);width:calc(28.5714vw*3 + 2.381vw*2);height:28.5714vw}.ug-module--2x3{height:calc(28.5714vw*2 + 2.381vw*1);width:calc(28.5714vw*3 + 2.381vw*2)}.ug-module--3x3{height:calc(28.5714vw*3 + 2.381vw*2);width:calc(28.5714vw*3 + 2.381vw*2)}.ug-module--4x3{height:calc(28.5714vw*4 + 2.381vw*3);width:calc(28.5714vw*3 + 2.381vw*2)}.ug-module--5x3{height:calc(28.5714vw*5 + 2.381vw*4);width:calc(28.5714vw*3 + 2.381vw*2)}.ug-module--6x3{height:calc(28.5714vw*6 + 2.381vw*5);width:calc(28.5714vw*3 + 2.381vw*2)}.ug-module--auto-height{height:auto}.ug-module--no-margin{margin-right:0}@media screen and (min-width: 640px){.ug-modules{padding:2.1277vw 0 0 4.2553vw;gap:2.1277vw}.ug-module{margin:0}.ug-module--1x1,.ug-module--sm-1x1{height:calc(21.2766vw*1 + 2.1277vw*0);width:21.2766vw}.ug-module--2x1,.ug-module--sm-2x1{height:calc(21.2766vw*2 + 2.1277vw*1);width:21.2766vw}.ug-module--3x1,.ug-module--sm-3x1{height:calc(21.2766vw*3 + 2.1277vw*2);width:21.2766vw}.ug-module--4x1,.ug-module--sm-4x1{height:calc(21.2766vw*4 + 2.1277vw*3);width:21.2766vw}.ug-module--5x1,.ug-module--sm-5x1{height:calc(21.2766vw*5 + 2.1277vw*4);width:21.2766vw}.ug-module--6x1,.ug-module--sm-6x1{height:calc(21.2766vw*6 + 2.1277vw*5);width:21.2766vw}.ug-module--1x2,.ug-module--sm-1x2{height:21.2766vw;width:calc(21.2766vw*2 + 2.1277vw*1)}.ug-module--2x2,.ug-module--sm-2x2{height:calc(21.2766vw*2 + 2.1277vw*1);width:calc(21.2766vw*2 + 2.1277vw*1)}.ug-module--3x2,.ug-module--sm-3x2{height:calc(21.2766vw*3 + 2.1277vw*2);width:calc(21.2766vw*2 + 2.1277vw*1)}.ug-module--4x2,.ug-module--sm-4x2{height:calc(21.2766vw*4 + 2.1277vw*3);width:calc(21.2766vw*2 + 2.1277vw*1)}.ug-module--5x2,.ug-module--sm-5x2{height:calc(21.2766vw*5 + 2.1277vw*4);width:calc(21.2766vw*2 + 2.1277vw*1)}.ug-module--6x2,.ug-module--sm-6x2{height:calc(21.2766vw*6 + 2.1277vw*5);width:calc(21.2766vw*2 + 2.1277vw*1)}.ug-module--1x3,.ug-module--sm-1x3{height:21.2766vw;width:calc(21.2766vw*3 + 2.1277vw*2)}.ug-module--2x3,.ug-module--sm-2x3{height:calc(21.2766vw*2 + 2.1277vw*1);width:calc(21.2766vw*3 + 2.1277vw*2)}.ug-module--3x3,.ug-module--sm-3x3{height:calc(21.2766vw*3 + 2.1277vw*2);width:calc(21.2766vw*3 + 2.1277vw*2)}.ug-module--4x3,.ug-module--sm-4x3{height:calc(21.2766vw*4 + 2.1277vw*3);width:calc(21.2766vw*3 + 2.1277vw*2)}.ug-module--5x3,.ug-module--sm-5x3{height:calc(21.2766vw*5 + 2.1277vw*4);width:calc(21.2766vw*3 + 2.1277vw*2)}.ug-module--6x3,.ug-module--sm-6x3{height:calc(21.2766vw*6 + 2.1277vw*5);width:calc(21.2766vw*3 + 2.1277vw*2)}.ug-module--1x4,.ug-module--sm-1x4{height:21.2766vw;width:calc(21.2766vw*4 + 2.1277vw*3)}.ug-module--2x4,.ug-module--sm-2x4{height:calc(21.2766vw*2 + 2.1277vw*1);width:calc(21.2766vw*4 + 2.1277vw*3)}.ug-module--3x4,.ug-module--sm-3x4{height:calc(21.2766vw*3 + 2.1277vw*2);width:calc(21.2766vw*4 + 2.1277vw*3)}.ug-module--4x4,.ug-module--sm-4x4{height:calc(21.2766vw*4 + 2.1277vw*3);width:calc(21.2766vw*4 + 2.1277vw*3)}.ug-module--5x4,.ug-module--sm-5x4{height:calc(21.2766vw*5 + 2.1277vw*4);width:calc(21.2766vw*4 + 2.1277vw*3)}.ug-module--6x4,.ug-module--sm-6x4{height:calc(21.2766vw*6 + 2.1277vw*5);width:calc(21.2766vw*4 + 2.1277vw*3)}.ug-module--sm-auto-height{height:auto}.ug-module--sm-no-margin{margin-right:0}}@media screen and (min-width: 1024px){.ug-modules{padding:1.7544vw 0 0 3.5088vw;gap:1.7544vw}.ug-module{margin:0}.ug-module--1x1,.ug-module--md-1x1{height:calc(14.0351vw*1 + 1.7544vw*0);width:14.0351vw}.ug-module--2x1,.ug-module--md-2x1{height:calc(14.0351vw*2 + 1.7544vw*1);width:14.0351vw}.ug-module--3x1,.ug-module--md-3x1{height:calc(14.0351vw*3 + 1.7544vw*2);width:14.0351vw}.ug-module--4x1,.ug-module--md-4x1{height:calc(14.0351vw*4 + 1.7544vw*3);width:14.0351vw}.ug-module--5x1,.ug-module--md-5x1{height:calc(14.0351vw*5 + 1.7544vw*4);width:14.0351vw}.ug-module--6x1,.ug-module--md-6x1{height:calc(14.0351vw*6 + 1.7544vw*5);width:14.0351vw}.ug-module--1x2,.ug-module--md-1x2{height:14.0351vw;width:calc(14.0351vw*2 + 1.7544vw*1)}.ug-module--2x2,.ug-module--md-2x2{height:calc(14.0351vw*2 + 1.7544vw*1);width:calc(14.0351vw*2 + 1.7544vw*1)}.ug-module--3x2,.ug-module--md-3x2{height:calc(14.0351vw*3 + 1.7544vw*2);width:calc(14.0351vw*2 + 1.7544vw*1)}.ug-module--4x2,.ug-module--md-4x2{height:calc(14.0351vw*4 + 1.7544vw*3);width:calc(14.0351vw*2 + 1.7544vw*1)}.ug-module--5x2,.ug-module--md-5x2{height:calc(14.0351vw*5 + 1.7544vw*4);width:calc(14.0351vw*2 + 1.7544vw*1)}.ug-module--6x2,.ug-module--md-6x2{height:calc(14.0351vw*6 + 1.7544vw*5);width:calc(14.0351vw*2 + 1.7544vw*1)}.ug-module--1x3,.ug-module--md-1x3{height:14.0351vw;width:calc(14.0351vw*3 + 1.7544vw*2)}.ug-module--2x3,.ug-module--md-2x3{height:calc(14.0351vw*2 + 1.7544vw*1);width:calc(14.0351vw*3 + 1.7544vw*2)}.ug-module--3x3,.ug-module--md-3x3{height:calc(14.0351vw*3 + 1.7544vw*2);width:calc(14.0351vw*3 + 1.7544vw*2)}.ug-module--4x3,.ug-module--md-4x3{height:calc(14.0351vw*4 + 1.7544vw*3);width:calc(14.0351vw*3 + 1.7544vw*2)}.ug-module--5x3,.ug-module--md-5x3{height:calc(14.0351vw*5 + 1.7544vw*4);width:calc(14.0351vw*3 + 1.7544vw*2)}.ug-module--6x3,.ug-module--md-6x3{height:calc(14.0351vw*6 + 1.7544vw*5);width:calc(14.0351vw*3 + 1.7544vw*2)}.ug-module--1x4,.ug-module--md-1x4{height:14.0351vw;width:calc(14.0351vw*4 + 1.7544vw*3)}.ug-module--2x4,.ug-module--md-2x4{height:calc(14.0351vw*2 + 1.7544vw*1);width:calc(14.0351vw*4 + 1.7544vw*3)}.ug-module--3x4,.ug-module--md-3x4{height:calc(14.0351vw*3 + 1.7544vw*2);width:calc(14.0351vw*4 + 1.7544vw*3)}.ug-module--4x4,.ug-module--md-4x4{height:calc(14.0351vw*4 + 1.7544vw*3);width:calc(14.0351vw*4 + 1.7544vw*3)}.ug-module--5x4,.ug-module--md-5x4{height:calc(14.0351vw*5 + 1.7544vw*4);width:calc(14.0351vw*4 + 1.7544vw*3)}.ug-module--6x4,.ug-module--md-6x4{height:calc(14.0351vw*6 + 1.7544vw*5);width:calc(14.0351vw*4 + 1.7544vw*3)}.ug-module--1x6,.ug-module--md-1x6{height:14.0351vw;width:calc(14.0351vw*6 + 1.7544vw*5)}.ug-module--2x6,.ug-module--md-2x6{height:calc(14.0351vw*2 + 1.7544vw*1);width:calc(14.0351vw*6 + 1.7544vw*5)}.ug-module--3x6,.ug-module--md-3x6{height:calc(14.0351vw*3 + 1.7544vw*2);width:calc(14.0351vw*6 + 1.7544vw*5)}.ug-module--4x6,.ug-module--md-4x6{height:calc(14.0351vw*4 + 1.7544vw*3);width:calc(14.0351vw*6 + 1.7544vw*5)}.ug-module--5x6,.ug-module--md-5x6{height:calc(14.0351vw*5 + 1.7544vw*4);width:calc(14.0351vw*6 + 1.7544vw*5)}.ug-module--6x6,.ug-module--md-6x6{height:calc(14.0351vw*6 + 1.7544vw*5);width:calc(14.0351vw*6 + 1.7544vw*5)}.ug-module--md-auto-height{height:auto}.ug-module--md-no-margin{margin-right:0}}@media screen and (min-width: 1300px){.ug-modules{padding:1.4925vw 0 0 2.9851vw;gap:1.4925vw}.ug-module{margin:0}.ug-module--1x1,.ug-module--lg-1x1{height:calc(10.4478vw*1 + 1.4925vw*0);width:10.4478vw}.ug-module--2x1,.ug-module--lg-2x1{height:calc(10.4478vw*2 + 1.4925vw*1);width:10.4478vw}.ug-module--3x1,.ug-module--lg-3x1{height:calc(10.4478vw*3 + 1.4925vw*2);width:10.4478vw}.ug-module--4x1,.ug-module--lg-4x1{height:calc(10.4478vw*4 + 1.4925vw*3);width:10.4478vw}.ug-module--5x1,.ug-module--lg-5x1{height:calc(10.4478vw*5 + 1.4925vw*4);width:10.4478vw}.ug-module--6x1,.ug-module--lg-6x1{height:calc(10.4478vw*6 + 1.4925vw*5);width:10.4478vw}.ug-module--1x2,.ug-module--lg-1x2{height:10.4478vw;width:calc(10.4478vw*2 + 1.4925vw*1)}.ug-module--2x2,.ug-module--lg-2x2{height:calc(10.4478vw*2 + 1.4925vw*1);width:calc(10.4478vw*2 + 1.4925vw*1)}.ug-module--3x2,.ug-module--lg-3x2{height:calc(10.4478vw*3 + 1.4925vw*2);width:calc(10.4478vw*2 + 1.4925vw*1)}.ug-module--4x2,.ug-module--lg-4x2{height:calc(10.4478vw*4 + 1.4925vw*3);width:calc(10.4478vw*2 + 1.4925vw*1)}.ug-module--5x2,.ug-module--lg-5x2{height:calc(10.4478vw*5 + 1.4925vw*4);width:calc(10.4478vw*2 + 1.4925vw*1)}.ug-module--6x2,.ug-module--lg-6x2{height:calc(10.4478vw*6 + 1.4925vw*5);width:calc(10.4478vw*2 + 1.4925vw*1)}.ug-module--1x3,.ug-module--lg-1x3{height:10.4478vw;width:calc(10.4478vw*3 + 1.4925vw*2)}.ug-module--2x3,.ug-module--lg-2x3{height:calc(10.4478vw*2 + 1.4925vw*1);width:calc(10.4478vw*3 + 1.4925vw*2)}.ug-module--3x3,.ug-module--lg-3x3{height:calc(10.4478vw*3 + 1.4925vw*2);width:calc(10.4478vw*3 + 1.4925vw*2)}.ug-module--4x3,.ug-module--lg-4x3{height:calc(10.4478vw*4 + 1.4925vw*3);width:calc(10.4478vw*3 + 1.4925vw*2)}.ug-module--5x3,.ug-module--lg-5x3{height:calc(10.4478vw*5 + 1.4925vw*4);width:calc(10.4478vw*3 + 1.4925vw*2)}.ug-module--6x3,.ug-module--lg-6x3{height:calc(10.4478vw*6 + 1.4925vw*5);width:calc(10.4478vw*3 + 1.4925vw*2)}.ug-module--1x4,.ug-module--lg-1x4{height:10.4478vw;width:calc(10.4478vw*4 + 1.4925vw*3)}.ug-module--2x4,.ug-module--lg-2x4{height:calc(10.4478vw*2 + 1.4925vw*1);width:calc(10.4478vw*4 + 1.4925vw*3)}.ug-module--3x4,.ug-module--lg-3x4{height:calc(10.4478vw*3 + 1.4925vw*2);width:calc(10.4478vw*4 + 1.4925vw*3)}.ug-module--4x4,.ug-module--lg-4x4{height:calc(10.4478vw*4 + 1.4925vw*3);width:calc(10.4478vw*4 + 1.4925vw*3)}.ug-module--5x4,.ug-module--lg-5x4{height:calc(10.4478vw*5 + 1.4925vw*4);width:calc(10.4478vw*4 + 1.4925vw*3)}.ug-module--6x4,.ug-module--lg-6x4{height:calc(10.4478vw*6 + 1.4925vw*5);width:calc(10.4478vw*4 + 1.4925vw*3)}.ug-module--1x6,.ug-module--lg-1x6{height:10.4478vw;width:calc(10.4478vw*6 + 1.4925vw*5)}.ug-module--2x6,.ug-module--lg-2x6{height:calc(10.4478vw*2 + 1.4925vw*1);width:calc(10.4478vw*6 + 1.4925vw*5)}.ug-module--3x6,.ug-module--lg-3x6{height:calc(10.4478vw*3 + 1.4925vw*2);width:calc(10.4478vw*6 + 1.4925vw*5)}.ug-module--4x6,.ug-module--lg-4x6{height:calc(10.4478vw*4 + 1.4925vw*3);width:calc(10.4478vw*6 + 1.4925vw*5)}.ug-module--5x6,.ug-module--lg-5x6{height:calc(10.4478vw*5 + 1.4925vw*4);width:calc(10.4478vw*6 + 1.4925vw*5)}.ug-module--6x6,.ug-module--lg-6x6{height:calc(10.4478vw*6 + 1.4925vw*5);width:calc(10.4478vw*6 + 1.4925vw*5)}.ug-module--1x8,.ug-module--lg-1x8{height:10.4478vw;width:calc(10.4478vw*8 + 1.4925vw*7)}.ug-module--2x8,.ug-module--lg-2x8{height:calc(10.4478vw*2 + 1.4925vw*1);width:calc(10.4478vw*8 + 1.4925vw*7)}.ug-module--3x8,.ug-module--lg-3x8{height:calc(10.4478vw*3 + 1.4925vw*2);width:calc(10.4478vw*8 + 1.4925vw*7)}.ug-module--4x8,.ug-module--lg-4x8{height:calc(10.4478vw*4 + 1.4925vw*3);width:calc(10.4478vw*8 + 1.4925vw*7)}.ug-module--5x8,.ug-module--lg-5x8{height:calc(10.4478vw*5 + 1.4925vw*4);width:calc(10.4478vw*8 + 1.4925vw*7)}.ug-module--6x8,.ug-module--lg-6x8{height:calc(10.4478vw*6 + 1.4925vw*5);width:calc(10.4478vw*8 + 1.4925vw*7)}.ug-module--lg-auto-height{height:auto}.ug-module--lg-no-margin{margin-right:0}}@media screen and (min-width: 1600px){.ug-modules{padding:1.1494vw 0 0 2.2989vw;gap:1.1494vw}.ug-module{margin:0}.ug-module--1x1,.ug-module--xl-1x1{height:calc(6.8966vw*1 + 1.1494vw*0);width:6.8966vw}.ug-module--2x1,.ug-module--xl-2x1{height:calc(6.8966vw*2 + 1.1494vw*1);width:6.8966vw}.ug-module--3x1,.ug-module--xl-3x1{height:calc(6.8966vw*3 + 1.1494vw*2);width:6.8966vw}.ug-module--4x1,.ug-module--xl-4x1{height:calc(6.8966vw*4 + 1.1494vw*3);width:6.8966vw}.ug-module--5x1,.ug-module--xl-5x1{height:calc(6.8966vw*5 + 1.1494vw*4);width:6.8966vw}.ug-module--6x1,.ug-module--xl-6x1{height:calc(6.8966vw*6 + 1.1494vw*5);width:6.8966vw}.ug-module--1x2,.ug-module--xl-1x2{height:6.8966vw;width:calc(6.8966vw*2 + 1.1494vw*1)}.ug-module--2x2,.ug-module--xl-2x2{height:calc(6.8966vw*2 + 1.1494vw*1);width:calc(6.8966vw*2 + 1.1494vw*1)}.ug-module--3x2,.ug-module--xl-3x2{height:calc(6.8966vw*3 + 1.1494vw*2);width:calc(6.8966vw*2 + 1.1494vw*1)}.ug-module--4x2,.ug-module--xl-4x2{height:calc(6.8966vw*4 + 1.1494vw*3);width:calc(6.8966vw*2 + 1.1494vw*1)}.ug-module--5x2,.ug-module--xl-5x2{height:calc(6.8966vw*5 + 1.1494vw*4);width:calc(6.8966vw*2 + 1.1494vw*1)}.ug-module--6x2,.ug-module--xl-6x2{height:calc(6.8966vw*6 + 1.1494vw*5);width:calc(6.8966vw*2 + 1.1494vw*1)}.ug-module--1x3,.ug-module--xl-1x3{height:6.8966vw;width:calc(6.8966vw*3 + 1.1494vw*2)}.ug-module--2x3,.ug-module--xl-2x3{height:calc(6.8966vw*2 + 1.1494vw*1);width:calc(6.8966vw*3 + 1.1494vw*2)}.ug-module--3x3,.ug-module--xl-3x3{height:calc(6.8966vw*3 + 1.1494vw*2);width:calc(6.8966vw*3 + 1.1494vw*2)}.ug-module--4x3,.ug-module--xl-4x3{height:calc(6.8966vw*4 + 1.1494vw*3);width:calc(6.8966vw*3 + 1.1494vw*2)}.ug-module--5x3,.ug-module--xl-5x3{height:calc(6.8966vw*5 + 1.1494vw*4);width:calc(6.8966vw*3 + 1.1494vw*2)}.ug-module--6x3,.ug-module--xl-6x3{height:calc(6.8966vw*6 + 1.1494vw*5);width:calc(6.8966vw*3 + 1.1494vw*2)}.ug-module--1x4,.ug-module--xl-1x4{height:6.8966vw;width:calc(6.8966vw*4 + 1.1494vw*3)}.ug-module--2x4,.ug-module--xl-2x4{height:calc(6.8966vw*2 + 1.1494vw*1);width:calc(6.8966vw*4 + 1.1494vw*3)}.ug-module--3x4,.ug-module--xl-3x4{height:calc(6.8966vw*3 + 1.1494vw*2);width:calc(6.8966vw*4 + 1.1494vw*3)}.ug-module--4x4,.ug-module--xl-4x4{height:calc(6.8966vw*4 + 1.1494vw*3);width:calc(6.8966vw*4 + 1.1494vw*3)}.ug-module--5x4,.ug-module--xl-5x4{height:calc(6.8966vw*5 + 1.1494vw*4);width:calc(6.8966vw*4 + 1.1494vw*3)}.ug-module--6x4,.ug-module--xl-6x4{height:calc(6.8966vw*6 + 1.1494vw*5);width:calc(6.8966vw*4 + 1.1494vw*3)}.ug-module--1x6,.ug-module--xl-1x6{height:6.8966vw;width:calc(6.8966vw*6 + 1.1494vw*5)}.ug-module--2x6,.ug-module--xl-2x6{height:calc(6.8966vw*2 + 1.1494vw*1);width:calc(6.8966vw*6 + 1.1494vw*5)}.ug-module--3x6,.ug-module--xl-3x6{height:calc(6.8966vw*3 + 1.1494vw*2);width:calc(6.8966vw*6 + 1.1494vw*5)}.ug-module--4x6,.ug-module--xl-4x6{height:calc(6.8966vw*4 + 1.1494vw*3);width:calc(6.8966vw*6 + 1.1494vw*5)}.ug-module--5x6,.ug-module--xl-5x6{height:calc(6.8966vw*5 + 1.1494vw*4);width:calc(6.8966vw*6 + 1.1494vw*5)}.ug-module--6x6,.ug-module--xl-6x6{height:calc(6.8966vw*6 + 1.1494vw*5);width:calc(6.8966vw*6 + 1.1494vw*5)}.ug-module--1x8,.ug-module--xl-1x8{height:6.8966vw;width:calc(6.8966vw*8 + 1.1494vw*7)}.ug-module--2x8,.ug-module--xl-2x8{height:calc(6.8966vw*2 + 1.1494vw*1);width:calc(6.8966vw*8 + 1.1494vw*7)}.ug-module--3x8,.ug-module--xl-3x8{height:calc(6.8966vw*3 + 1.1494vw*2);width:calc(6.8966vw*8 + 1.1494vw*7)}.ug-module--4x8,.ug-module--xl-4x8{height:calc(6.8966vw*4 + 1.1494vw*3);width:calc(6.8966vw*8 + 1.1494vw*7)}.ug-module--5x8,.ug-module--xl-5x8{height:calc(6.8966vw*5 + 1.1494vw*4);width:calc(6.8966vw*8 + 1.1494vw*7)}.ug-module--6x8,.ug-module--xl-6x8{height:calc(6.8966vw*6 + 1.1494vw*5);width:calc(6.8966vw*8 + 1.1494vw*7)}.ug-module--1x12,.ug-module--xl-1x12{height:6.8966vw;width:calc(6.8966vw*12 + 1.1494vw*11)}.ug-module--2x12,.ug-module--xl-2x12{height:calc(6.8966vw*2 + 1.1494vw*1);width:calc(6.8966vw*12 + 1.1494vw*11)}.ug-module--3x12,.ug-module--xl-3x12{height:calc(6.8966vw*3 + 1.1494vw*2);width:calc(6.8966vw*12 + 1.1494vw*11)}.ug-module--4x12,.ug-module--xl-4x12{height:calc(6.8966vw*4 + 1.1494vw*3);width:calc(6.8966vw*12 + 1.1494vw*11)}.ug-module--5x12,.ug-module--xl-5x12{height:calc(6.8966vw*5 + 1.1494vw*4);width:calc(6.8966vw*12 + 1.1494vw*11)}.ug-module--6x12,.ug-module--xl-6x12{height:calc(6.8966vw*6 + 1.1494vw*5);width:calc(6.8966vw*12 + 1.1494vw*11)}.ug-module--xl-auto-height{height:auto}.ug-module--xl-no-margin{margin-right:0}}@media screen and (min-width: 1600px){.ug-module--hidden-xl{display:none}}@media screen and (min-width: 1300px)and (max-width: 1599px){.ug-module--hidden-lg{display:none}}@media screen and (min-width: 1024px)and (max-width: 1299px){.ug-module--hidden-md{display:none}}@media screen and (min-width: 640px)and (max-width: 1023px){.ug-module--hidden-sm{display:none}}@media screen and (max-width: 639px){.ug-module--hidden-xs{display:none}}.ug-full-width{grid-column:1/-1}.ug-bg--black{background-color:#1a1a1a;color:#fff}.ug-bg--white{background-color:#fff}.ug-bg--warm-gray{background-color:#f5f2ed}.ug-bg--dark-gray{background-color:#333;color:#fff}.ug-bg--medium-gray{background-color:#666}.ug-bg--light-gray{background-color:#e8e5e0}.ug-bg--red{background-color:#c1272d;color:#fff}.ug-bg--brown{background-color:#4a3728;color:#fff}.ug-bg--green{background-color:#2d5a27;color:#fff}.ug-bg--blue{background-color:#274a5a;color:#fff}.ug-p--0{padding:0}.ug-m--0{margin:0}.ug-mt--0{margin-top:0}.ug-mb--0{margin-bottom:0}.ug-ml--0{margin-left:0}.ug-mr--0{margin-right:0}.ug-pt--0{padding-top:0}.ug-pb--0{padding-bottom:0}.ug-pl--0{padding-left:0}.ug-pr--0{padding-right:0}.ug-p--1{padding:calc(var(--ug-leading)*0.25)}.ug-m--1{margin:calc(var(--ug-leading)*0.25)}.ug-mt--1{margin-top:calc(var(--ug-leading)*0.25)}.ug-mb--1{margin-bottom:calc(var(--ug-leading)*0.25)}.ug-ml--1{margin-left:calc(var(--ug-leading)*0.25)}.ug-mr--1{margin-right:calc(var(--ug-leading)*0.25)}.ug-pt--1{padding-top:calc(var(--ug-leading)*0.25)}.ug-pb--1{padding-bottom:calc(var(--ug-leading)*0.25)}.ug-pl--1{padding-left:calc(var(--ug-leading)*0.25)}.ug-pr--1{padding-right:calc(var(--ug-leading)*0.25)}.ug-p--2{padding:calc(var(--ug-leading)*0.5)}.ug-m--2{margin:calc(var(--ug-leading)*0.5)}.ug-mt--2{margin-top:calc(var(--ug-leading)*0.5)}.ug-mb--2{margin-bottom:calc(var(--ug-leading)*0.5)}.ug-ml--2{margin-left:calc(var(--ug-leading)*0.5)}.ug-mr--2{margin-right:calc(var(--ug-leading)*0.5)}.ug-pt--2{padding-top:calc(var(--ug-leading)*0.5)}.ug-pb--2{padding-bottom:calc(var(--ug-leading)*0.5)}.ug-pl--2{padding-left:calc(var(--ug-leading)*0.5)}.ug-pr--2{padding-right:calc(var(--ug-leading)*0.5)}.ug-p--3{padding:calc(var(--ug-leading)*1)}.ug-m--3{margin:calc(var(--ug-leading)*1)}.ug-mt--3{margin-top:calc(var(--ug-leading)*1)}.ug-mb--3{margin-bottom:calc(var(--ug-leading)*1)}.ug-ml--3{margin-left:calc(var(--ug-leading)*1)}.ug-mr--3{margin-right:calc(var(--ug-leading)*1)}.ug-pt--3{padding-top:calc(var(--ug-leading)*1)}.ug-pb--3{padding-bottom:calc(var(--ug-leading)*1)}.ug-pl--3{padding-left:calc(var(--ug-leading)*1)}.ug-pr--3{padding-right:calc(var(--ug-leading)*1)}.ug-p--4{padding:calc(var(--ug-leading)*1.5)}.ug-m--4{margin:calc(var(--ug-leading)*1.5)}.ug-mt--4{margin-top:calc(var(--ug-leading)*1.5)}.ug-mb--4{margin-bottom:calc(var(--ug-leading)*1.5)}.ug-ml--4{margin-left:calc(var(--ug-leading)*1.5)}.ug-mr--4{margin-right:calc(var(--ug-leading)*1.5)}.ug-pt--4{padding-top:calc(var(--ug-leading)*1.5)}.ug-pb--4{padding-bottom:calc(var(--ug-leading)*1.5)}.ug-pl--4{padding-left:calc(var(--ug-leading)*1.5)}.ug-pr--4{padding-right:calc(var(--ug-leading)*1.5)}.ug-p--5{padding:calc(var(--ug-leading)*2)}.ug-m--5{margin:calc(var(--ug-leading)*2)}.ug-mt--5{margin-top:calc(var(--ug-leading)*2)}.ug-mb--5{margin-bottom:calc(var(--ug-leading)*2)}.ug-ml--5{margin-left:calc(var(--ug-leading)*2)}.ug-mr--5{margin-right:calc(var(--ug-leading)*2)}.ug-pt--5{padding-top:calc(var(--ug-leading)*2)}.ug-pb--5{padding-bottom:calc(var(--ug-leading)*2)}.ug-pl--5{padding-left:calc(var(--ug-leading)*2)}.ug-pr--5{padding-right:calc(var(--ug-leading)*2)}.ug-p--6{padding:calc(var(--ug-leading)*3)}.ug-m--6{margin:calc(var(--ug-leading)*3)}.ug-mt--6{margin-top:calc(var(--ug-leading)*3)}.ug-mb--6{margin-bottom:calc(var(--ug-leading)*3)}.ug-ml--6{margin-left:calc(var(--ug-leading)*3)}.ug-mr--6{margin-right:calc(var(--ug-leading)*3)}.ug-pt--6{padding-top:calc(var(--ug-leading)*3)}.ug-pb--6{padding-bottom:calc(var(--ug-leading)*3)}.ug-pl--6{padding-left:calc(var(--ug-leading)*3)}.ug-pr--6{padding-right:calc(var(--ug-leading)*3)}.ug-p--7{padding:calc(var(--ug-leading)*4)}.ug-m--7{margin:calc(var(--ug-leading)*4)}.ug-mt--7{margin-top:calc(var(--ug-leading)*4)}.ug-mb--7{margin-bottom:calc(var(--ug-leading)*4)}.ug-ml--7{margin-left:calc(var(--ug-leading)*4)}.ug-mr--7{margin-right:calc(var(--ug-leading)*4)}.ug-pt--7{padding-top:calc(var(--ug-leading)*4)}.ug-pb--7{padding-bottom:calc(var(--ug-leading)*4)}.ug-pl--7{padding-left:calc(var(--ug-leading)*4)}.ug-pr--7{padding-right:calc(var(--ug-leading)*4)}.ug-p--8{padding:calc(var(--ug-leading)*6)}.ug-m--8{margin:calc(var(--ug-leading)*6)}.ug-mt--8{margin-top:calc(var(--ug-leading)*6)}.ug-mb--8{margin-bottom:calc(var(--ug-leading)*6)}.ug-ml--8{margin-left:calc(var(--ug-leading)*6)}.ug-mr--8{margin-right:calc(var(--ug-leading)*6)}.ug-pt--8{padding-top:calc(var(--ug-leading)*6)}.ug-pb--8{padding-bottom:calc(var(--ug-leading)*6)}.ug-pl--8{padding-left:calc(var(--ug-leading)*6)}.ug-pr--8{padding-right:calc(var(--ug-leading)*6)}.ug-hidden{display:none}.ug-block{display:block}@media(min-width: 480px){.ug-hidden--sm-up{display:none}}@media(max-width: 479px){.ug-hidden--sm-down{display:none}}@media(min-width: 768px){.ug-hidden--md-up{display:none}}@media(max-width: 767px){.ug-hidden--md-down{display:none}}@media(min-width: 1024px){.ug-hidden--lg-up{display:none}}@media(max-width: 1023px){.ug-hidden--lg-down{display:none}}@media(min-width: 1280px){.ug-hidden--xl-up{display:none}}@media(max-width: 1279px){.ug-hidden--xl-down{display:none}}/*# sourceMappingURL=unigrid.min.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{(function(){function a(){document.addEventListener("click",function(t){var e=t.target.closest(".ug-dropdown__trigger");if(e&&t.preventDefault(),document.querySelectorAll(".ug-dropdown--open").forEach(function(o){o.closest(".docs-example__preview")||(!e||o!==e.closest(".ug-dropdown"))&&o.classList.remove("ug-dropdown--open")}),e){var r=e.closest(".ug-dropdown");r&&r.classList.toggle("ug-dropdown--open")}}),document.addEventListener("keydown",function(t){t.key==="Escape"&&document.querySelectorAll(".ug-dropdown--open").forEach(function(e){e.classList.remove("ug-dropdown--open")})})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a):a()})();(function(){function a(){document.addEventListener("click",function(t){var e=t.target.closest("[data-ug-tab]");if(e){t.preventDefault();var r=e.closest(".ug-tabs");if(r){var o=e.getAttribute("data-ug-tab");r.querySelectorAll(".ug-tabs__link").forEach(function(i){i.classList.remove("ug-tabs__link--active")}),r.querySelectorAll(".ug-tabs__panel").forEach(function(i){i.classList.remove("ug-tabs__panel--active")}),e.classList.add("ug-tabs__link--active");var n=r.querySelector('[data-ug-panel="'+o+'"]');n&&n.classList.add("ug-tabs__panel--active")}}})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a):a()})();(function(){function a(){document.querySelectorAll("[data-ug-scrollspy]").forEach(function(t){var e=t.querySelectorAll(".ug-scrollspy__link, [data-ug-spy]");if(e.length){var r=parseInt(t.getAttribute("data-ug-scrollspy-offset")||"100",10),o=t.getAttribute("data-ug-scrollspy-class")||"ug-scrollspy__link--active",n=[];if(e.forEach(function(l){var u=l.getAttribute("href");if(!(!u||u.charAt(0)!=="#")){var s=document.querySelector(u);s&&n.push({link:l,target:s})}}),!!n.length){var i=new Set,d=new IntersectionObserver(function(l){l.forEach(function(c){c.isIntersecting?i.add(c.target.id):i.delete(c.target.id)});for(var u=null,s=0;s<n.length;s++)if(i.has(n[s].target.id)){u=n[s].target.id;break}n.forEach(function(c){c.target.id===u?c.link.classList.add(o):c.link.classList.remove(o)})},{rootMargin:"-"+r+"px 0px -50% 0px",threshold:0});n.forEach(function(l){d.observe(l.target)})}}})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a):a()})();})();
|
package/package.json
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "unigrid.css",
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "A CSS grid framework inspired by Massimo Vignelli's Unigrid system for the National Park Service",
|
|
5
|
+
"main": "dist/unigrid.css",
|
|
6
|
+
"style": "dist/unigrid.css",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist/",
|
|
9
|
+
"src/"
|
|
10
|
+
],
|
|
11
|
+
"scripts": {
|
|
12
|
+
"dev": "vite",
|
|
13
|
+
"build": "npm run build:css && npm run build:js",
|
|
14
|
+
"build:css": "sass src/scss/unigrid.scss dist/unigrid.css --style=expanded && sass src/scss/unigrid.scss dist/unigrid.min.css --style=compressed",
|
|
15
|
+
"build:js": "node scripts/build-js.mjs",
|
|
16
|
+
"watch": "npm run watch:css & npm run watch:js",
|
|
17
|
+
"watch:css": "sass src/scss/unigrid.scss dist/unigrid.css --style=expanded --watch",
|
|
18
|
+
"watch:js": "node scripts/build-js.mjs --watch",
|
|
19
|
+
"preview": "vite preview"
|
|
20
|
+
},
|
|
21
|
+
"keywords": [
|
|
22
|
+
"css",
|
|
23
|
+
"scss",
|
|
24
|
+
"grid",
|
|
25
|
+
"unigrid",
|
|
26
|
+
"vignelli",
|
|
27
|
+
"design-system",
|
|
28
|
+
"nps",
|
|
29
|
+
"bem"
|
|
30
|
+
],
|
|
31
|
+
"license": "MIT",
|
|
32
|
+
"repository": {
|
|
33
|
+
"type": "git",
|
|
34
|
+
"url": "https://github.com/tdascoli/unigrid.css.git"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"esbuild": "^0.24.0",
|
|
38
|
+
"sass": "^1.80.0",
|
|
39
|
+
"vite": "^6.0.0"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Unigrid Dropdown
|
|
3
|
+
*
|
|
4
|
+
* Toggles .ug-dropdown--open on click.
|
|
5
|
+
* Closes all dropdowns when clicking outside.
|
|
6
|
+
* Auto-initializes on DOMContentLoaded.
|
|
7
|
+
*/
|
|
8
|
+
(function () {
|
|
9
|
+
function init() {
|
|
10
|
+
document.addEventListener('click', function (e) {
|
|
11
|
+
var trigger = e.target.closest('.ug-dropdown__trigger');
|
|
12
|
+
|
|
13
|
+
if (trigger) {
|
|
14
|
+
e.preventDefault();
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Close all other dropdowns (skip those inside .docs-example__preview)
|
|
18
|
+
document.querySelectorAll('.ug-dropdown--open').forEach(function (dd) {
|
|
19
|
+
if (dd.closest('.docs-example__preview')) return;
|
|
20
|
+
if (!trigger || dd !== trigger.closest('.ug-dropdown')) {
|
|
21
|
+
dd.classList.remove('ug-dropdown--open');
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
// Toggle clicked dropdown
|
|
26
|
+
if (trigger) {
|
|
27
|
+
var dropdown = trigger.closest('.ug-dropdown');
|
|
28
|
+
if (dropdown) {
|
|
29
|
+
dropdown.classList.toggle('ug-dropdown--open');
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
// Close on Escape key
|
|
35
|
+
document.addEventListener('keydown', function (e) {
|
|
36
|
+
if (e.key === 'Escape') {
|
|
37
|
+
document.querySelectorAll('.ug-dropdown--open').forEach(function (dd) {
|
|
38
|
+
dd.classList.remove('ug-dropdown--open');
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (document.readyState === 'loading') {
|
|
45
|
+
document.addEventListener('DOMContentLoaded', init);
|
|
46
|
+
} else {
|
|
47
|
+
init();
|
|
48
|
+
}
|
|
49
|
+
})();
|
package/src/js/index.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Unigrid.js — All interactive components bundled.
|
|
3
|
+
*
|
|
4
|
+
* Includes: dropdown, tabs, scrollspy
|
|
5
|
+
*
|
|
6
|
+
* Usage:
|
|
7
|
+
* <script src="dist/unigrid.js"></script>
|
|
8
|
+
* or
|
|
9
|
+
* <script src="dist/unigrid.min.js"></script>
|
|
10
|
+
*
|
|
11
|
+
* Individual files also available:
|
|
12
|
+
* <script src="dist/dropdown.js"></script>
|
|
13
|
+
* <script src="dist/tabs.js"></script>
|
|
14
|
+
* <script src="dist/scrollspy.js"></script>
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
import './dropdown.js';
|
|
18
|
+
import './tabs.js';
|
|
19
|
+
import './scrollspy.js';
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Unigrid Scrollspy
|
|
3
|
+
*
|
|
4
|
+
* Highlights navigation links based on which section is currently
|
|
5
|
+
* visible in the viewport using IntersectionObserver.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* <nav data-ug-scrollspy>
|
|
9
|
+
* <a class="ug-scrollspy__link" href="#intro">Intro</a>
|
|
10
|
+
* <a class="ug-scrollspy__link" href="#features">Features</a>
|
|
11
|
+
* </nav>
|
|
12
|
+
*
|
|
13
|
+
* <section id="intro">...</section>
|
|
14
|
+
* <section id="features">...</section>
|
|
15
|
+
*
|
|
16
|
+
* Options (via data attributes on [data-ug-scrollspy]):
|
|
17
|
+
* data-ug-scrollspy-offset="100" — top offset in px (default: 100)
|
|
18
|
+
* data-ug-scrollspy-class="custom" — active class (default: ug-scrollspy__link--active)
|
|
19
|
+
*/
|
|
20
|
+
(function () {
|
|
21
|
+
function init() {
|
|
22
|
+
document.querySelectorAll('[data-ug-scrollspy]').forEach(function (nav) {
|
|
23
|
+
var links = nav.querySelectorAll('.ug-scrollspy__link, [data-ug-spy]');
|
|
24
|
+
if (!links.length) return;
|
|
25
|
+
|
|
26
|
+
var offset = parseInt(nav.getAttribute('data-ug-scrollspy-offset') || '100', 10);
|
|
27
|
+
var activeClass = nav.getAttribute('data-ug-scrollspy-class') || 'ug-scrollspy__link--active';
|
|
28
|
+
|
|
29
|
+
// Collect target sections
|
|
30
|
+
var targets = [];
|
|
31
|
+
links.forEach(function (link) {
|
|
32
|
+
var href = link.getAttribute('href');
|
|
33
|
+
if (!href || href.charAt(0) !== '#') return;
|
|
34
|
+
var target = document.querySelector(href);
|
|
35
|
+
if (target) {
|
|
36
|
+
targets.push({ link: link, target: target });
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
if (!targets.length) return;
|
|
41
|
+
|
|
42
|
+
// Track which sections are visible
|
|
43
|
+
var visibleSections = new Set();
|
|
44
|
+
|
|
45
|
+
var observer = new IntersectionObserver(function (entries) {
|
|
46
|
+
entries.forEach(function (entry) {
|
|
47
|
+
if (entry.isIntersecting) {
|
|
48
|
+
visibleSections.add(entry.target.id);
|
|
49
|
+
} else {
|
|
50
|
+
visibleSections.delete(entry.target.id);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
// Find the first visible section (in DOM order)
|
|
55
|
+
var activeId = null;
|
|
56
|
+
for (var i = 0; i < targets.length; i++) {
|
|
57
|
+
if (visibleSections.has(targets[i].target.id)) {
|
|
58
|
+
activeId = targets[i].target.id;
|
|
59
|
+
break;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Update active states
|
|
64
|
+
targets.forEach(function (item) {
|
|
65
|
+
if (item.target.id === activeId) {
|
|
66
|
+
item.link.classList.add(activeClass);
|
|
67
|
+
} else {
|
|
68
|
+
item.link.classList.remove(activeClass);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}, {
|
|
72
|
+
rootMargin: '-' + offset + 'px 0px -50% 0px',
|
|
73
|
+
threshold: 0
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
targets.forEach(function (item) {
|
|
77
|
+
observer.observe(item.target);
|
|
78
|
+
});
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
if (document.readyState === 'loading') {
|
|
83
|
+
document.addEventListener('DOMContentLoaded', init);
|
|
84
|
+
} else {
|
|
85
|
+
init();
|
|
86
|
+
}
|
|
87
|
+
})();
|
package/src/js/tabs.js
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Unigrid Tabs
|
|
3
|
+
*
|
|
4
|
+
* Switches active tab link and panel on click.
|
|
5
|
+
* Auto-initializes on DOMContentLoaded.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* <div class="ug-tabs" data-ug-tabs>
|
|
9
|
+
* <ul class="ug-tabs__nav">
|
|
10
|
+
* <li class="ug-tabs__item">
|
|
11
|
+
* <button class="ug-tabs__link ug-tabs__link--active" data-ug-tab="tab1">Tab 1</button>
|
|
12
|
+
* </li>
|
|
13
|
+
* </ul>
|
|
14
|
+
* <div class="ug-tabs__content">
|
|
15
|
+
* <div class="ug-tabs__panel ug-tabs__panel--active" data-ug-panel="tab1">...</div>
|
|
16
|
+
* </div>
|
|
17
|
+
* </div>
|
|
18
|
+
*/
|
|
19
|
+
(function () {
|
|
20
|
+
function init() {
|
|
21
|
+
document.addEventListener('click', function (e) {
|
|
22
|
+
var link = e.target.closest('[data-ug-tab]');
|
|
23
|
+
if (!link) return;
|
|
24
|
+
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
|
|
27
|
+
var tabs = link.closest('.ug-tabs');
|
|
28
|
+
if (!tabs) return;
|
|
29
|
+
|
|
30
|
+
var target = link.getAttribute('data-ug-tab');
|
|
31
|
+
|
|
32
|
+
// Deactivate all links
|
|
33
|
+
tabs.querySelectorAll('.ug-tabs__link').forEach(function (l) {
|
|
34
|
+
l.classList.remove('ug-tabs__link--active');
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
// Deactivate all panels
|
|
38
|
+
tabs.querySelectorAll('.ug-tabs__panel').forEach(function (p) {
|
|
39
|
+
p.classList.remove('ug-tabs__panel--active');
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
// Activate clicked link
|
|
43
|
+
link.classList.add('ug-tabs__link--active');
|
|
44
|
+
|
|
45
|
+
// Activate matching panel
|
|
46
|
+
var panel = tabs.querySelector('[data-ug-panel="' + target + '"]');
|
|
47
|
+
if (panel) {
|
|
48
|
+
panel.classList.add('ug-tabs__panel--active');
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
if (document.readyState === 'loading') {
|
|
54
|
+
document.addEventListener('DOMContentLoaded', init);
|
|
55
|
+
} else {
|
|
56
|
+
init();
|
|
57
|
+
}
|
|
58
|
+
})();
|