8 files modified
2 files added
| | |
| | | .copy-hours-content h3 { |
| | | margin: 0 0 1rem 0; |
| | | color: var(--contrast); |
| | | font-size: var(--large); |
| | | font-size: var(--txt-large); |
| | | } |
| | | |
| | | .copy-hours-source { |
| | | background-color: var(--base-100); |
| | | padding: 1rem; |
| | | border-radius: var(--innerRadius); |
| | | border-radius: var(--radius); |
| | | margin-bottom: 1.5rem; |
| | | border: 1px solid var(--base-200); |
| | | } |
| | |
| | | margin: 0 0 0.5rem 0; |
| | | color: var(--contrast-100); |
| | | text-transform: uppercase; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | font-weight: 600; |
| | | } |
| | | |
| | |
| | | margin: 0 0 1rem 0; |
| | | color: var(--contrast-100); |
| | | text-transform: uppercase; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | font-weight: 600; |
| | | } |
| | | |
| | |
| | | background-color: var(--action-50); |
| | | color: var(--action-contrast); |
| | | padding: 1rem 1.5rem; |
| | | border-radius: var(--innerRadius); |
| | | box-shadow: var(--shadow); |
| | | border-radius: var(--radius); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | z-index: 10000; |
| | | opacity: 0; |
| | | transform: translateX(100px); |
| | | transition: all var(--transition-base); |
| | | transition: all var(--trans-base); |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 0.5rem; |
| | |
| | | justify-content: flex-end; |
| | | } |
| | | .dashboard > header img { |
| | | width: var(--height); |
| | | width: var(--btn); |
| | | } |
| | | .dashboard h1:first-of-type { |
| | | margin-top: 4rem!important; |
| | | } |
| | | nav.dashboard-nav, |
| | | nav.dashboard-nav ul { |
| | | --dir: row; |
| | | } |
| | | nav.dashboard-nav ul { |
| | | touch-action: pan-x; |
| | | overflow: auto hidden; |
| | | } |
| | | main > footer { |
| | | max-width: 100%!important; |
| | | position: fixed; |
| | | z-index: var(--z-top); |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | width: 100%; |
| | | margin: 4rem 0 0 0!important; |
| | | height: var(--height); |
| | | padding: 0!important; |
| | | background-color: var(--base); |
| | | box-shadow: var(--shadow); |
| | | /*max-width: 100%!important;*/ |
| | | /*position: fixed;*/ |
| | | /*z-index: var(--z-7);*/ |
| | | /*bottom: 0;*/ |
| | | /*left: 0;*/ |
| | | /*right: 0;*/ |
| | | /*width: 100%;*/ |
| | | /*margin: 4rem 0 0 0!important;*/ |
| | | /*height: var(--btn);*/ |
| | | /*padding: 0!important;*/ |
| | | /*background-color: var(--base);*/ |
| | | /*box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/ |
| | | padding: 0; |
| | | } |
| | | main>* { |
| | | max-width: min(768px, 90vw)!important; |
| | |
| | | } |
| | | main h1 { |
| | | margin: 0!important; |
| | | font-size: var(--large); |
| | | font-size: var(--txt-large); |
| | | } |
| | | |
| | | .item-grid .item { |
| | |
| | | } |
| | | |
| | | .replace { |
| | | margin-bottom: var(--offHeight)!important; |
| | | margin: 0 auto 0 var(--btn_) !important; |
| | | } |
| | | /******************************************** |
| | | GRID VIEW |
| | |
| | | } |
| | | |
| | | .grid-view .item .item-actions { |
| | | position: absolute; |
| | | bottom: 0; |
| | | right: 0; |
| | | } |
| | | .item-actions button { |
| | | min-height: 0; |
| | | width: var(--chipchip); |
| | | height: var(--chipchip); |
| | | background-color: rgba(var(--base-rgb), var(--op-45)); |
| | | } |
| | | .item-actions button:hover { |
| | | background-color: var(--base); |
| | | } |
| | | |
| | | .list-view h3, |
| | | .list-view p { |
| | |
| | | .grid-view { |
| | | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
| | | } |
| | | .grid-view .item .item-actions { |
| | | bottom: unset; |
| | | top: 0; |
| | | } |
| | | @media (max-width: 768px) { |
| | | .bulk-controls.bulk-controls.nowrap { |
| | | --wrap: wrap; |
| | | } |
| | | } |
| | | .bulk-controls { |
| | |
| | | } |
| | | .bulk-controls .selected-count { |
| | | font-weight: normal; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | text-transform: none; |
| | | font-style: italic; |
| | | display: flex; |
| | |
| | | opacity: .6; |
| | | filter: var(--filter); |
| | | border: 2px solid transparent; |
| | | transition: filter var(--transition-base), opacity var(--transition-base), border var(--transition-base), padding var(--transition-base); |
| | | transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base); |
| | | } |
| | | .selected label:has(:checked) { |
| | | border-color: var(--action-0); |
| | | padding: 0; |
| | | opacity: 1; |
| | | filter: none; |
| | | transition: filter var(--transition-base), opacity var(--transition-base), border var(--transition-base), padding var(--transition-base); |
| | | transition: filter var(--trans-base), opacity var(--trans-base), border var(--trans-base), padding var(--trans-base); |
| | | } |
| | | /****************************************************** |
| | | TABLE VIEW |
| | | ******************************************************/ |
| | | form.table label.select-item, |
| | | form.table img { |
| | | max-height: 4rem; |
| | | width: 6rem; |
| | | height: 6rem; |
| | | } |
| | | form.table .item-grid.preview { |
| | | margin: 0; |
| | | } |
| | | |
| | | td p { |
| | | width: max-content; |
| | | } |
| | | |
| | | /* Dragging state */ |
| | | .timeline-point.is-dragging { |
| | | opacity: 0.4; |
| | | position: relative; |
| | | } |
| | | |
| | | /* Drop indicators with gap */ |
| | | .timeline-point.drop-above { |
| | | position: relative; |
| | | } |
| | | |
| | | .timeline-point.drop-above::before { |
| | | content: ''; |
| | | position: absolute; |
| | | top: -4px; |
| | | left: 0; |
| | | right: 0; |
| | | height: 8px; |
| | | background: var(--action-0); |
| | | border-radius: 4px; |
| | | z-index: 10; |
| | | animation: pulse 0.6s ease-in-out infinite; |
| | | } |
| | | |
| | | .timeline-point.drop-below { |
| | | position: relative; |
| | | } |
| | | |
| | | .timeline-point.drop-below::after { |
| | | content: ''; |
| | | position: absolute; |
| | | bottom: -4px; |
| | | left: 0; |
| | | right: 0; |
| | | height: 8px; |
| | | background: var(--action-0); |
| | | border-radius: 4px; |
| | | z-index: 10; |
| | | animation: pulse 0.6s ease-in-out infinite; |
| | | } |
| | | |
| | | @keyframes pulse { |
| | | 0%, 100% { |
| | | opacity: 0.6; |
| | | transform: scaleY(1); |
| | | } |
| | | 50% { |
| | | opacity: 1; |
| | | transform: scaleY(1.2); |
| | | } |
| | | } |
| | | |
| | | /* Make space for the indicator */ |
| | | .timeline-point.drop-above { |
| | | margin-top: 8px; |
| | | transition: margin-top 0.2s ease; |
| | | } |
| | | |
| | | .timeline-point.drop-below { |
| | | margin-bottom: 8px; |
| | | transition: margin-bottom 0.2s ease; |
| | | } |
| | | |
| | | /* Drag handle styling */ |
| | | .drag-handle { |
| | | cursor: grab; |
| | | padding: 0.5rem; |
| | | background: transparent; |
| | | border: none; |
| | | opacity: 0.6; |
| | | transition: opacity 0.2s ease; |
| | | } |
| | | |
| | | .drag-handle:hover { |
| | | opacity: 1; |
| | | } |
| | | |
| | | .drag-handle:active, |
| | | .is-dragging .drag-handle { |
| | | cursor: grabbing; |
| | | } |
| | | |
| | | /* Preview styling */ |
| | | .drag-preview .drag-handle { |
| | | pointer-events: none; |
| | | } |
| | | |
| | | /****************************************************** |
| | | FILTERS |
| | | ******************************************************/ |
| | | .all-filters { |
| | | margin: 2rem 0; |
| | | margin: 0; |
| | | padding: 1rem 0; |
| | | border-top: 1px solid var(--base-200); |
| | | border-bottom: 1px solid var(--base-200); |
| | | --gap: 0; |
| | | } |
| | | .all-filters .row { |
| | | --justify: flex-start; |
| | | } |
| | | .all-filters[open] { |
| | | --gap: .5rem; |
| | | } |
| | | .all-filters summary { |
| | | width: 100%; |
| | | } |
| | | details.uploader + .items-list .all-filters { |
| | | border-top: none; |
| | | } |
| | |
| | | } |
| | | .all-filters span.label { |
| | | text-transform: uppercase; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | font-weight: 900; |
| | | width: 15vw; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | padding-right: 2rem; |
| | | } |
| | | @media (max-width: 767px) { |
| | | .all-filters > .row { |
| | | padding: .5rem 0; |
| | | } |
| | | .all-filters span.label { |
| | | padding-top: .5rem; |
| | | width: 100%; |
| | | border-top: 1px solid var(--base-200); |
| | | } |
| | | } |
| | | .controls .icon { |
| | | --w: 1.4rem; |
| | | } |
| | | .all-filters .btn + label, |
| | | .all-filters button { |
| | | height: fit-content; |
| | | height: var(--chipchip); |
| | | padding: .5rem!important; |
| | | min-width: 0; |
| | | min-height: 0; |
| | | min-height: var(--chipchip); |
| | | width: var(--chipchip); |
| | | } |
| | | .all-filters .btn + label:hover, |
| | | .all-filters .btn + label:focus, |
| | |
| | | transform-origin: left; |
| | | width: 0; |
| | | padding: 0; |
| | | transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base); |
| | | transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base); |
| | | } |
| | | .search-container button { |
| | | padding: .5rem; |
| | |
| | | .search-container.open .clear-search { |
| | | transform: scaleX(1); |
| | | transform-origin: left; |
| | | transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base); |
| | | transition: transform var(--trans-base), width var(--trans-base), padding var(--trans-base); |
| | | } |
| | | .all-filters > .search, |
| | | input[type=search], |
| | |
| | | } |
| | | .group-fields.hours .time label { |
| | | margin: 0; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | position: absolute; |
| | | top: -1rem; |
| | | left: 0; |
| | |
| | | } |
| | | .dashboard.dash h2 { |
| | | text-transform: none; |
| | | font-size: var(--large); |
| | | font-size: var(--txt-large); |
| | | } |
| | | .dashboard.dash .replace > ul { |
| | | display: flex; |
| | |
| | | flex-wrap: wrap; |
| | | gap: .5rem; |
| | | } |
| | | .dashboard.settings nav.tabs { |
| | | nav.tabs.tabs { |
| | | bottom: 0; |
| | | left: 0; |
| | | right: var(--btn); |
| | | } |
| | | .dashboard.settings nav.tabs.tabs { |
| | | --height: 3.5rem; |
| | | --x: var(--offHeight); |
| | | --x: var(--btn_); |
| | | position: fixed; |
| | | bottom: var(--height); |
| | | bottom: var(--btn); |
| | | left: var(--x); |
| | | right: var(--x); |
| | | z-index:99; |
| | | width: calc(100% - var(--x) - var(--x)); |
| | | background-color: var(--base); |
| | | } |
| | | .jvb-seo-admin nav.tabs.tabs { |
| | | position: sticky; |
| | | padding-bottom: 0; |
| | | bottom: unset; |
| | | left: 0; |
| | | right: 0; |
| | | top: var(--btn); |
| | | } |
| | | .jvb-seo-admin nav.tabs button { |
| | | border: none; |
| | | margin: 0 .125rem; |
| | | background-color: var(--base-200); |
| | | box-shadow:var(--shdw-none); |
| | | } |
| | | .jvb-seo-admin nav.tabs button.active { |
| | | background-color: var(--base); |
| | | color: var(--action-0); |
| | | } |
| | | nav.integrations ul, |
| | | nav.integrations li, |
| | | nav.integrations a, |
| | |
| | | .integration { |
| | | background: var(--base); |
| | | border: 2px solid var(--base-200); |
| | | border-radius: var(--outerRadius); |
| | | border-radius: var(--radius-outer); |
| | | padding: 1rem; |
| | | position: relative; |
| | | transition: all var(--transition-base); |
| | | box-shadow: var(--shadow); |
| | | transition: all var(--trans-base); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | } |
| | | .integration.connected { |
| | | border-color: var(--success); |
| | |
| | | } |
| | | .integration h3 { |
| | | letter-spacing: 1px; |
| | | font-size: var(--medium); |
| | | font-size: var(--txt-medium); |
| | | margin: 0; |
| | | } |
| | | .integration .meta { |
| | | margin-bottom: 1rem; |
| | | text-align: right; |
| | | color: var(--contrast-200); |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .integration .setup { |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | font-weight: bold; |
| | | text-transform: uppercase; |
| | | } |
| | | .integration .setup .indicator { |
| | | font-size: var(--medium); |
| | | font-size: var(--txt-medium); |
| | | } |
| | | .integration .connected .indicator, |
| | | .integration .setup .connected { |
| | |
| | | margin-top: 1rem; |
| | | } |
| | | |
| | | .hint { |
| | | line-height: 1.2; |
| | | font-style: italic; |
| | | font-size: var(--small); |
| | | } |
| | | |
| | | .hasChanges button[data-action=save_credentials] { |
| | | border-color: var(--warning); |
| | | animation: pulse-color 1s infinite; |
| | |
| | | grid-column: 1/-1; |
| | | padding: 1rem 10vw; |
| | | margin: 0 10vw; |
| | | border-radius: var(--outerRadius); |
| | | border-radius: var(--radius-outer); |
| | | background-color: var(--base-100); |
| | | } |
| | | |
| | |
| | | color: #dc3545; |
| | | } |
| | | |
| | | |
| | | |
| | | /******************************************* |
| | | REFERRAL |
| | | */ |
| | | .referral-dashboard { |
| | | max-width: var(--wide); |
| | | } |
| | | .card { |
| | | background-color: var(--base-100); |
| | | padding: 30px; |
| | | border-radius: var(--radius-outer); |
| | | text-align: center; |
| | | margin-bottom: 2rem; |
| | | } |
| | | |
| | | .dashboard-page.referral { |
| | | text-align: center; |
| | | } |
| | | .referral-dashboard .empty-state { |
| | | padding: 3rem 7vw; |
| | | } |
| | | .referral-dashboard .empty-state h3 { |
| | | margin-top: 0; |
| | | } |
| | | .referral-dashboard .empty-state h3 .icon:first-of-type { |
| | | margin-right: 1rem; |
| | | } |
| | | .referral-dashboard .empty-state h3 .icon:last-of-type { |
| | | margin-left: 1rem; |
| | | } |
| | | |
| | | .item-grid.stats .card { |
| | | border: 1px solid var(--base); |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | flex-direction: column; |
| | | } |
| | | .item-grid.stats .card.highlight { |
| | | box-shadow: var(--contrast-rgb) var(--shadow); |
| | | background-color: var(--action-200); |
| | | color: var(--action-contrast); |
| | | grid-column: 1/-1; |
| | | margin: 0 4rem 30px; |
| | | aspect-ratio: unset; |
| | | } |
| | | .card h4 { |
| | | font-size: var(--medium); |
| | | color: var(--contrast-200); |
| | | font-weight: var(--fw-b-bold); |
| | | margin: 0 0 .5rem; |
| | | } |
| | | .card span { |
| | | color: var(--action-0); |
| | | font-weight: var(--fw-b-bold); |
| | | font-size: var(--txt-xx-large); |
| | | } |
| | | .card.highlight span { |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | |
| | | /*.referral-dashboard {*/ |
| | | /* max-width: 1200px;*/ |
| | | /* margin: 0 auto;*/ |
| | | /*}*/ |
| | | /*.referral-header {*/ |
| | | /* text-align: center;*/ |
| | | /* margin-bottom: 30px;*/ |
| | | /*}*/ |
| | | /*.referral-code-card {*/ |
| | | /* background: var(--base-100);*/ |
| | | /* padding: 30px;*/ |
| | | /* border-radius: 8px;*/ |
| | | /* text-align: center;*/ |
| | | /* margin-bottom: 30px;*/ |
| | | /*}*/ |
| | | /*.code-display {*/ |
| | | /* display: flex;*/ |
| | | /* align-items: center;*/ |
| | | /* justify-content: center;*/ |
| | | /* gap: 15px;*/ |
| | | /* margin: 20px 0;*/ |
| | | /*}*/ |
| | | /*.code-display .code {*/ |
| | | /* font-size: 32px;*/ |
| | | /* font-weight: bold;*/ |
| | | /* letter-spacing: 2px;*/ |
| | | /* color: var(--action-0);*/ |
| | | /* user-select: all;*/ |
| | | /*}*/ |
| | | /*.stats-grid {*/ |
| | | /* display: grid;*/ |
| | | /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/ |
| | | /* gap: 20px;*/ |
| | | /* margin-bottom: 30px;*/ |
| | | /*}*/ |
| | | /*.stat-card {*/ |
| | | /* background: white;*/ |
| | | /* padding: 25px;*/ |
| | | /* border-radius: 8px;*/ |
| | | /* border: 1px solid #ddd;*/ |
| | | /* text-align: center;*/ |
| | | /*}*/ |
| | | /*.stat-card.highlight {*/ |
| | | /* background: #d4edda;*/ |
| | | /* border-color: #c3e6cb;*/ |
| | | /*}*/ |
| | | /*.stat-card h4 {*/ |
| | | /* margin: 0 0 10px 0;*/ |
| | | /* color: #666;*/ |
| | | /* font-size: 14px;*/ |
| | | /* font-weight: 600;*/ |
| | | /* text-transform: uppercase;*/ |
| | | /*}*/ |
| | | /*.stat-number {*/ |
| | | /* font-size: 36px;*/ |
| | | /* font-weight: bold;*/ |
| | | /* color: #2271b1;*/ |
| | | /*}*/ |
| | | /*.referrals-list-card {*/ |
| | | /* background: white;*/ |
| | | /* padding: 25px;*/ |
| | | /* border-radius: 8px;*/ |
| | | /* border: 1px solid #ddd;*/ |
| | | /*}*/ |
| | | /*.referrals-table {*/ |
| | | /* width: 100%;*/ |
| | | /* border-collapse: collapse;*/ |
| | | /* margin-top: 15px;*/ |
| | | /*}*/ |
| | | /*.referrals-table th,*/ |
| | | /*.referrals-table td {*/ |
| | | /* padding: 12px;*/ |
| | | /* text-align: left;*/ |
| | | /* border-bottom: 1px solid #eee;*/ |
| | | /*}*/ |
| | | /*.referrals-table th {*/ |
| | | /* background: #f5f5f5;*/ |
| | | /* font-weight: 600;*/ |
| | | /*}*/ |
| | | /*.status-badge {*/ |
| | | /* padding: 4px 12px;*/ |
| | | /* border-radius: 12px;*/ |
| | | /* font-size: 12px;*/ |
| | | /* font-weight: 500;*/ |
| | | /*}*/ |
| | | /*.status-badge.pending {*/ |
| | | /* background: #fff3cd;*/ |
| | | /* color: #856404;*/ |
| | | /*}*/ |
| | | /*.status-badge.consulted {*/ |
| | | /* background: #d1ecf1;*/ |
| | | /* color: #0c5460;*/ |
| | | /*}*/ |
| | | /*.status-badge.treated {*/ |
| | | /* background: #d4edda;*/ |
| | | /* color: #155724;*/ |
| | | /*}*/ |
| | | |
| | | nav.sidebar { |
| | | --wrap: nowrap; |
| | | position: fixed; |
| | | top: var(--btn); |
| | | bottom: 0; |
| | | left: 0; |
| | | z-index: var(--z-4); |
| | | height: calc(100% - var(--btn)); |
| | | background-color: var(--base); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | width: var(--btn); |
| | | transition: var(--trans-size); |
| | | overflow: hidden auto; |
| | | } |
| | | nav.sidebar .icon { |
| | | --w: var(--chip_); |
| | | width: var(--btn); |
| | | transition: var(--trans-size), margin var(--trans-base); |
| | | } |
| | | nav.sidebar.open { |
| | | width: fit-content; |
| | | max-width: 100%; |
| | | } |
| | | nav.sidebar.open .icon { |
| | | --w: var(--chip); |
| | | margin: .75rem; |
| | | width: var(--w); |
| | | } |
| | | |
| | | nav.sidebar ul { |
| | | height: max-content; |
| | | width: 100%; |
| | | --gap: 0; |
| | | } |
| | | nav.sidebar .title { |
| | | display: block; |
| | | } |
| | | /*nav.sidebar .title,*/ |
| | | /*nav.sidebar .toggle {*/ |
| | | /* transition: var(--trans-size);*/ |
| | | /*}*/ |
| | | nav.sidebar .toggle { |
| | | width: var(--btn); |
| | | height: var(--chipchip); |
| | | box-shadow: none; |
| | | background-color: transparent; |
| | | min-height: 0; |
| | | } |
| | | nav.sidebar .toggle:hover, |
| | | nav.sidebar .toggle:focus { |
| | | background-color:var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | /*nav.sidebar:not(.open) .title,*/ |
| | | /*nav.sidebar:not(.open) .toggle:not(.main) {*/ |
| | | /* position: absolute;*/ |
| | | /* left: var(--offScreen);*/ |
| | | /* width: 0;*/ |
| | | /* height: 0;*/ |
| | | /* max-width: 0;*/ |
| | | /* max-height: 0;*/ |
| | | /*}*/ |
| | | nav.sidebar .toggle.main { |
| | | position: fixed; |
| | | left: unset; |
| | | bottom: 0; |
| | | right: 0; |
| | | width: var(--btn); |
| | | height: var(--btn); |
| | | z-index: var(--z-8); |
| | | box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | nav.sidebar .title { |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | nav.sidebar li { |
| | | --justify: center; |
| | | flex-wrap: nowrap; |
| | | overflow: hidden; |
| | | align-items: flex-start; |
| | | } |
| | | nav.sidebar.open li > div { |
| | | width: 100%; |
| | | padding-right: var(--btn); |
| | | } |
| | | nav.sidebar.open li.has-submenu > div { |
| | | padding-right: 0; |
| | | } |
| | | nav.sidebar.open li.has-submenu > ul { |
| | | padding-left: var(--chip); |
| | | } |
| | | |
| | | nav.sidebar .a { |
| | | color: var(--contrast-200); |
| | | } |
| | | |
| | | nav.sidebar a, |
| | | nav.sidebar .a { |
| | | height: var(--chipchip); |
| | | /*width: var(--btn);*/ |
| | | display: flex; |
| | | justify-content:center; |
| | | align-items:center; |
| | | transition: none; |
| | | padding-left: 0; |
| | | } |
| | | nav.sidebar.open a, |
| | | nav.sidebar.open .a { |
| | | width: 100%; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | nav.sidebar .has-submenu ul { |
| | | max-height: 0; |
| | | height: 0; |
| | | overflow:hidden; |
| | | transition: var(--trans-size); |
| | | } |
| | | nav.sidebar .has-submenu.open > ul { |
| | | height: 100%; |
| | | max-height: fit-content; |
| | | } |
| | | |
| | | |
| | | |
| | | header .title, |
| | | header .title a { |
| | | height: var(--btn); |
| | | margin: 0; |
| | | display:block; |
| | | } |
| | | header .title { |
| | | margin-left: var(--btn); |
| | | } |
| | | header .title a { |
| | | width: var(--btn); |
| | | } |
| | |
| | | } |
| | | |
| | | .feed-block > *:not(.feed-grid, h2) { |
| | | max-width: var(--alignWide); |
| | | max-width: var(--wide); |
| | | margin: 1rem var(--mr) 1rem var(--ml); |
| | | } |
| | | .feed-block > h2 { |
| | | max-width: var(--maxWidth); |
| | | max-width: var(--content); |
| | | } |
| | | |
| | | .feed-block[data-loading="true"] { |
| | |
| | | background: var(--base-50); |
| | | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| | | opacity: 0; |
| | | transition: opacity var(--transition-base) var(--delay); |
| | | transition: opacity var(--trans-base) var(--delay); |
| | | height: fit-content; |
| | | padding: 0; |
| | | } |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover; |
| | | transition: transform var(--timing) var(--function); |
| | | transition: transform var(--trans-t) var(--trans-fn); |
| | | } |
| | | |
| | | .artist-tattoos a:hover img, |
| | |
| | | margin: 0!important; |
| | | font-size: 1.1rem; |
| | | font-family: var(--body); |
| | | font-weight: var(--bWeight); |
| | | font-weight: var(--fw-b); |
| | | text-align: center; |
| | | } |
| | | .item-info span { |
| | |
| | | top: .5rem; |
| | | right: .5rem; |
| | | z-index: 10; |
| | | background: var(--overlay-medium); |
| | | background: rgba(var(--base-rgb),var(--op-4)); |
| | | border-radius: 50%; |
| | | box-shadow: var(--subtle); |
| | | border: none; |
| | |
| | | justify-content: center; |
| | | align-items: center; |
| | | backdrop-filter: blur(5px); |
| | | transition: all var(--transition-base); |
| | | transition: all var(--trans-base); |
| | | } |
| | | |
| | | button.favourite:hover { |
| | |
| | | /* position: relative;*/ |
| | | /* justify-content: flex-start;*/ |
| | | /* gap: .5rem;*/ |
| | | /* border-radius: var(--innerRadius);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | } |
| | | .feed-filters details[open] summary { |
| | | background-color: var(--base-50); |
| | |
| | | border: 1px solid var(--base-200); |
| | | border-radius: 4px; |
| | | font-size: .875rem; |
| | | transition: border-color var(--transition-base); |
| | | transition: border-color var(--trans-base); |
| | | margin-bottom: .5rem; |
| | | } |
| | | .filter-toggle .icon { |
| | |
| | | .type-filter:hover { |
| | | color: var(--action-0); |
| | | border-color: var(--action-0); |
| | | transition: var(--transition-color); |
| | | transition: var(--trans-color); |
| | | } |
| | | .feed-filters .type-filter > label { |
| | | flex-direction: column; |
| | |
| | | top: .5rem; |
| | | right: 4rem; |
| | | opacity: 0; |
| | | transition: transform var(--timing) var(--function); |
| | | transition: transform var(--trans-t) var(--trans-fn); |
| | | transition-property: max-width, transform; |
| | | } |
| | | .feed-filters input:checked + label .label { |
| | |
| | | max-width: none!important; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: var(--overlay-medium); |
| | | background: rgba(var(--base-rgb),var(--op-4)); |
| | | backdrop-filter: blur(5px); |
| | | -webkit-backdrop-filter: blur(5px); |
| | | display: flex; |
| | |
| | | background: var(--base); |
| | | padding: 2rem; |
| | | border-radius: 1rem; |
| | | box-shadow: var(--shadow); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | text-align: center; |
| | | width: min(400px, 60vw); |
| | | } |
| | |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | background-color: var(--overlay-light); |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | backdrop-filter: blur(5px); |
| | | border-radius: var(--innerRadius); |
| | | border-radius: var(--radius); |
| | | z-index: 1; |
| | | padding: .25rem .25rem .25rem 1.1rem; |
| | | } |
| | |
| | | opacity: 1; |
| | | transform: scaleY(1); |
| | | transform-origin: bottom; |
| | | transition: opacity var(--transition-base), |
| | | transform var(--transition-base); |
| | | transition: opacity var(--trans-base), |
| | | transform var(--trans-base); |
| | | } |
| | | |
| | | .loading .changing .loading-message p { |
| | |
| | | color: var(--contrast-200); |
| | | border: none; |
| | | border-radius: 4px; |
| | | font-size: var(--medium); |
| | | font-size: var(--txt-medium); |
| | | cursor: pointer; |
| | | transition: all var(--transition-base); |
| | | transition: all var(--trans-base); |
| | | } |
| | | .load-more[hidden]{ |
| | | opacity: 0; |
| | | transition: all var(--transition-base); |
| | | transition: all var(--trans-base); |
| | | } |
| | | |
| | | .load-more:hover { |
| | |
| | | |
| | | .common-term { |
| | | background: var(--base-50); |
| | | border-radius: var(--innerRadius); |
| | | border-radius: var(--radius); |
| | | } |
| | | |
| | | .loading-indicator { |
| | |
| | | cursor: pointer; |
| | | padding: 0.5rem; |
| | | border-radius: 4px; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .back-to-parent:hover { |
| | |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | color: var(--contrast); |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .term-breadcrumb button:hover { |
| | |
| | | } |
| | | |
| | | .suggestion-prompt { |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | color: var(--contrast-50); |
| | | margin-bottom: 1rem; |
| | | } |
| | |
| | | } |
| | | |
| | | .parent-row { |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .parent-row label { |
| | |
| | | align-items: center; |
| | | } |
| | | .gallery-nav:hover { |
| | | background-color: var(--overlay-heavy); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | } |
| | | |
| | | .gallery-nav:hover { |
| | |
| | | bottom: 1rem; |
| | | left: 2rem; |
| | | width: calc(100% - 4rem); |
| | | background-color: var(--overlay-light); |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | padding: 0; |
| | | } |
| | | .gallery-content details:hover, |
| | | .gallery-content details[open] { |
| | | background-color: var(--overlay-heavy); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | backdrop-filter: blur(5px); |
| | | } |
| | |
| | | /****************************************************************** |
| | | FORM INPUTS - BASE |
| | | ******************************************************************/ |
| | | textarea, |
| | | input:is([type=date], [type=number], [type=text], [type=url], |
| | | [type=email], [type=tel], [type=password], [type=search], |
| | | [type=datetime-local], [type=time]) { |
| | | font-family: var(--body); |
| | | font-size: var(--txt-medium); |
| | | color: var(--contrast); |
| | | padding: var(--p-y) var(--p-x); |
| | | border-radius: var(--radius); |
| | | background-color: var(--base); |
| | | outline: 0; |
| | | border: 1px solid var(--base-100); |
| | | border-bottom: 2px solid var(--contrast-200); |
| | | width: 100%; |
| | | max-width: 100%; |
| | | margin: 0 4px; |
| | | } |
| | | |
| | | /****************************************************************** |
| | | FORM INPUTS - STATES |
| | | ******************************************************************/ |
| | | textarea:focus, |
| | | input:is([type=date], [type=number], [type=text], [type=url], |
| | | [type=email], [type=tel], [type=password], [type=search], |
| | | [type=datetime-local], [type=time]):focus { |
| | | outline: var(--action-50); |
| | | background-color: var(--base-100); |
| | | color: var(--contrast); |
| | | } |
| | | |
| | | textarea::placeholder, |
| | | input::placeholder { |
| | | font-family: var(--body); |
| | | color: var(--base-200); |
| | | } |
| | | |
| | | @media (min-width: 768px) { |
| | | :root { |
| | | --p-y: 1rem; |
| | | } |
| | | } |
| | | |
| | | /****************************************************************** |
| | | SELECT |
| | | ******************************************************************/ |
| | | select { |
| | | background: var(--base); |
| | | border: 2px solid var(--base-100); |
| | | border-radius: var(--radius); |
| | | color: var(--contrast); |
| | | cursor: pointer; |
| | | font-family: var(--body); |
| | | font-size: var(--txt-small); |
| | | padding: .5rem 1rem; |
| | | width: 100%; |
| | | } |
| | | |
| | | select:disabled { |
| | | background-color: var(--base-50); |
| | | border-color: var(--base-100); |
| | | color: var(--base-200); |
| | | cursor: not-allowed; |
| | | } |
| | | |
| | | select option { |
| | | background: var(--base); |
| | | color: var(--contrast); |
| | | padding: .5rem; |
| | | } |
| | | |
| | | select option:hover, |
| | | select option:focus, |
| | | select option:active, |
| | | select option:checked { |
| | | background: var(--action-0); |
| | | color: var(--base); |
| | | box-shadow: 0 0 0 100px var(--action-0) inset; |
| | | } |
| | | |
| | | select option:checked { |
| | | background: var(--action-0) linear-gradient(0deg, var(--action-0) 0%, var(--action-0) 100%); |
| | | color: var(--base); |
| | | } |
| | | |
| | | select:hover { |
| | | border-color: var(--action-0); |
| | | } |
| | | |
| | | select:focus { |
| | | border-color: var(--action-0); |
| | | } |
| | | |
| | | /****************************************************************** |
| | | SEARCH & SPECIAL INPUTS |
| | | ******************************************************************/ |
| | | input[type=search]:focus + .clear-search { |
| | | opacity: 1; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .search-container .clear-search { |
| | | opacity: 0; |
| | | cursor: default; |
| | | } |
| | | |
| | | .search-container .icon.search { |
| | | padding: 4px 8px; |
| | | color: var(--contrast-200); |
| | | --w: 3rem; |
| | | } |
| | | |
| | | input[type="search"]::-moz-search-clear-button, |
| | | input[type="search"]::-ms-clear, |
| | | input[type="search"]::-ms-reveal, |
| | | input[type="search"]::search-cancel-button { |
| | | -webkit-appearance: none; |
| | | -moz-appearance: none; |
| | | appearance: none; |
| | | display: none; |
| | | visibility: hidden; |
| | | } |
| | | |
| | | input[type="search"]::-webkit-search-decoration, |
| | | input[type="search"]::-webkit-search-cancel-button, |
| | | input[type="search"]::-webkit-search-results-button, |
| | | input[type="search"]::-webkit-search-results-decoration { |
| | | -webkit-appearance:none; |
| | | } |
| | | |
| | | input[type=url] { |
| | | background: var(--linkIcon); |
| | | background-position: .5em; |
| | | background-size: 1em; |
| | | background-repeat: no-repeat; |
| | | padding-left: 2em; |
| | | } |
| | | |
| | | /****************************************************************** |
| | | LABELS & FIELDS |
| | | ******************************************************************/ |
| | | .integration .label, |
| | | label { |
| | | text-transform: uppercase; |
| | | font-weight: bold; |
| | | margin-bottom: .5rem; |
| | | display: block; |
| | | } |
| | | |
| | | .field { |
| | | margin: 2rem 0; |
| | | position: relative; |
| | | } |
| | | |
| | | .field:has(.has-tooltip) label { |
| | | margin-left: 2rem; |
| | | } |
| | | |
| | | legend { |
| | | padding: 0 1rem; |
| | | } |
| | | |
| | | /********************** |
| | | DATE & TIME FIELDS |
| | | **********************/ |
| | | .date-wrapper { |
| | | position: relative; |
| | | display: inline-block; |
| | | } |
| | | |
| | | input[type=date] { |
| | | padding: 8px 36px 8px 8px; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | input[type=date]::-webkit-calendar-picker-indicator { |
| | | opacity: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | input[type=date] + .icon { |
| | | --w: 20px; |
| | | position: absolute; |
| | | right: 10px; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | pointer-events: none; |
| | | } |
| | | |
| | | input:is([type=time], [type=datetime-local], [type=date]) { |
| | | padding: .5rem; |
| | | border: 1px solid var(--contrast-200); |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | min-width: 180px; |
| | | background: var(--base); |
| | | color: var(--contrast); |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .field-input-wrapper input:is([type=time], [type=datetime-local], [type=date]):focus, |
| | | .time-wrapper input[type=time]:focus, |
| | | .datetime-wrapper input[type=datetime-local]:focus, |
| | | .date-wrapper input[type=date]:focus { |
| | | border-color: var(--action-0); |
| | | box-shadow: 0 0 0 2px rgba(var(--action-rgb), .1); |
| | | } |
| | | |
| | | .field-input-wrapper .icon, |
| | | .time-wrapper .icon, |
| | | .datetime-wrapper .icon, |
| | | .date-wrapper .icon { |
| | | width: 18px; |
| | | height: 18px; |
| | | background-color: var(--contrast); |
| | | opacity: .7; |
| | | } |
| | | |
| | | /********************** |
| | | SPECIAL FIELDS |
| | | **********************/ |
| | | .selected-items { |
| | | --justify: flex-start; |
| | | --gap: .5rem; |
| | | margin-bottom: .5rem; |
| | | } |
| | | |
| | | .selected-item { |
| | | padding: .25rem .5rem; |
| | | margin: .125em; |
| | | background: var(--base-100); |
| | | border-radius: .25rem; |
| | | font-size: var(--txt-medium); |
| | | border: 1px solid var(--base-200); |
| | | position: relative; |
| | | } |
| | | |
| | | .remove-item { |
| | | background: none; |
| | | border: none; |
| | | padding: .25rem; |
| | | cursor: pointer; |
| | | color: #666; |
| | | border-radius: var(--radius); |
| | | width: 1.5em; |
| | | height: 1.5em; |
| | | } |
| | | |
| | | .remove-item .close { |
| | | width: .5em; |
| | | height: .5em; |
| | | } |
| | | |
| | | .remove-item:hover { |
| | | color: var(--action-0); |
| | | background: #fee; |
| | | } |
| | | |
| | | .clear-filters { |
| | | margin-left: auto; |
| | | border: 1px solid var(--base-200); |
| | | } |
| | | |
| | | /****************************************************************** |
| | | CHECKBOXES & RADIOS |
| | | ******************************************************************/ |
| | | [type=radio], |
| | | [type=checkbox], |
| | | input.ch { |
| | | position: absolute; |
| | | opacity: 0; |
| | | left: -200vw; |
| | | } |
| | | |
| | | [type=radio] + label, |
| | | [type=checkbox] + label, |
| | | input.ch + label { |
| | | position: relative; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | [type=radio] + label:hover, |
| | | [type=checkbox] + label:hover { |
| | | color: var(--action-0); |
| | | } |
| | | |
| | | [type=radio] + label::before, |
| | | [type=checkbox] + label::before, |
| | | input.ch + label::before, |
| | | [type=radio] + label::after, |
| | | [type=checkbox] + label::after, |
| | | input.ch + label::after { |
| | | content: ''; |
| | | position: absolute; |
| | | top: 50%; |
| | | } |
| | | |
| | | [type=radio] + label::after, |
| | | [type=checkbox] + label::after, |
| | | input.ch + label::after { |
| | | left: 5px; |
| | | transform: translateY(-70%) rotate(45deg); |
| | | width: 5px; |
| | | height: 10px; |
| | | border: solid var(--light-0); |
| | | border-width: 0 2px 2px 0; |
| | | display: none; |
| | | } |
| | | |
| | | [type=radio] + label::before, |
| | | [type=checkbox] + label::before, |
| | | input.ch + label::before { |
| | | left: 0; |
| | | transform: translateY(-50%); |
| | | width: 1rem; |
| | | height: 1rem; |
| | | border: 2px solid var(--contrast-200); |
| | | background-color: var(--base); |
| | | border-radius: var(--radius); |
| | | } |
| | | |
| | | [type=radio]:hover + label::before, |
| | | [type=checkbox]:hover + label::before, |
| | | input.ch:hover + label::before { |
| | | border-color: var(--action-200); |
| | | } |
| | | |
| | | [type=radio]:checked + label::before, |
| | | [type=checkbox]:checked + label::before, |
| | | input.ch:checked + label::before { |
| | | background-color: var(--action-0); |
| | | border-color: var(--action-100); |
| | | } |
| | | |
| | | [type=radio]:checked + label::before { |
| | | border-radius: 50%; |
| | | } |
| | | |
| | | [type=checkbox]:checked + label::after, |
| | | input.ch:checked + label::after { |
| | | display: block; |
| | | left: 5px; |
| | | top: 50%; |
| | | transform: translateY(-70%) rotate(45deg); |
| | | width: .35rem; |
| | | height: .66rem; |
| | | border: solid var(--light-0); |
| | | border-width: 0 2px 2px 0; |
| | | } |
| | | |
| | | [type=radio]:disabled + label, |
| | | [type=checkbox]:disabled + label, |
| | | input.ch:disabled + label { |
| | | cursor: not-allowed; |
| | | background-color: var(--base-50); |
| | | color: var(--base-200); |
| | | border-color: var(--base-200); |
| | | } |
| | | |
| | | [type=radio]:disabled + label:hover, |
| | | [type=checkbox]:disabled + label:hover, |
| | | input.ch:disabled + label:hover { |
| | | background-color: var(--base-50); |
| | | color: var(--base-200); |
| | | border-color: var(--base-200); |
| | | } |
| | | |
| | | [type=radio]:disabled + label::before, |
| | | [type=checkbox]:disabled + label::before, |
| | | input.ch:disabled + label::before { |
| | | border-color: var(--base-200); |
| | | } |
| | | |
| | | [type=radio]:not(.btn) + label, |
| | | [type=checkbox]:not(.btn) + label, |
| | | input.ch + label { |
| | | flex: 1; |
| | | padding-left: 2rem; |
| | | transform-origin: top center; |
| | | will-change: transform; |
| | | } |
| | | |
| | | /* Button-style checkboxes/radios */ |
| | | .btn + label::before, |
| | | .btn + label::after { |
| | | display: none; |
| | | } |
| | | |
| | | .btn + label { |
| | | --w: 1.2em; |
| | | border: 1px solid var(--base-200); |
| | | border-radius: var(--radius); |
| | | min-width: 2rem; |
| | | min-height: 2rem; |
| | | margin: 0; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | flex-wrap: nowrap; |
| | | gap: .5rem; |
| | | color: var(--contrast-200); |
| | | opacity: .8; |
| | | } |
| | | |
| | | .radio-options.status label { |
| | | padding: 0 .5rem; |
| | | } |
| | | |
| | | .btn:checked + label { |
| | | border-color: var(--contrast); |
| | | color: var(--contrast); |
| | | opacity: 1; |
| | | } |
| | | |
| | | .btn + label:hover { |
| | | color: var(--action-50); |
| | | border-color: var(--action-50); |
| | | } |
| | | |
| | | input[hidden] + label, |
| | | .btn[hidden] + label { |
| | | display: none!important; |
| | | } |
| | | |
| | | .checkbox-options { |
| | | --gap: .5rem 2rem; |
| | | } |
| | | |
| | | .checkbox-options label { |
| | | flex: unset!important; |
| | | } |
| | | |
| | | .radio-options { |
| | | --gap: .125rem .5rem; |
| | | } |
| | | |
| | | .radio-options input:not(.ch) + label::before { |
| | | display: none!important; |
| | | } |
| | | |
| | | .radio-options input:not(.ch) + label { |
| | | flex: unset!important; |
| | | padding: .25rem!important; |
| | | border-radius: 4px; |
| | | border: 1px solid var(--base-100); |
| | | color: var(--contrast-200); |
| | | font-weight: normal; |
| | | text-align: center; |
| | | } |
| | | |
| | | .radio-options input:not(.ch) + label:hover, |
| | | .radio-options input:not(.ch):checked + label { |
| | | border-color: var(--action-0); |
| | | color: var(--action-0); |
| | | } |
| | | |
| | | /****************************************************************** |
| | | QUANTITY FIELD |
| | | ******************************************************************/ |
| | | .quantity { |
| | | margin: 0; |
| | | display: inline-flex; |
| | | width: fit-content; |
| | | align-items: center; |
| | | justify-content: center; |
| | | border: 1px solid transparent; |
| | | border-radius: 4px; |
| | | position: relative; |
| | | } |
| | | |
| | | .quantity:focus-within { |
| | | border-color: var(--action-0); |
| | | } |
| | | |
| | | .quantity label { |
| | | margin: 0; |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | .quantity button { |
| | | background: var(--base); |
| | | padding: 0; |
| | | width: 38px; |
| | | height: 38px; |
| | | z-index: 0; |
| | | position: relative; |
| | | border: 1px solid var(--base-200); |
| | | color: var(--contrast-200); |
| | | } |
| | | |
| | | .quantity button:hover:not(:disabled) { |
| | | color: var(--action-0); |
| | | border-color: var(--action-0); |
| | | background-color: var(--base); |
| | | } |
| | | |
| | | .quantity button:active:not(:disabled) { |
| | | background-color: var(--action-0); |
| | | color: var(--light-0); |
| | | transform: scale(.95); |
| | | } |
| | | |
| | | .quantity button:disabled { |
| | | opacity: .5; |
| | | cursor: not-allowed; |
| | | } |
| | | |
| | | .quantity input[type=number] { |
| | | z-index: 1; |
| | | border: 1px solid var(--base-200); |
| | | background: var(--base); |
| | | text-align: center; |
| | | font-size: 1.1rem; |
| | | width: 60px; |
| | | height: 48px; |
| | | margin: 0; |
| | | padding: 0!important; |
| | | appearance: textfield; |
| | | } |
| | | |
| | | .quantity input[type=number]::-webkit-outer-spin-button, |
| | | .quantity input[type=number]::-webkit-inner-spin-button { |
| | | -webkit-appearance: none; |
| | | margin: 0; |
| | | } |
| | | |
| | | .quantity input[type=number]:focus { |
| | | background-color: var(--base-50); |
| | | } |
| | | |
| | | .quantity button.increase { |
| | | left: -2px; |
| | | border-radius: 0 4px 4px 0; |
| | | } |
| | | |
| | | .quantity button.decrease { |
| | | right: -2px; |
| | | border-radius: 4px 0 0 4px; |
| | | } |
| | | |
| | | /****************************************************************** |
| | | TAXONOMY SELECTOR |
| | | ******************************************************************/ |
| | | .items-container { |
| | | margin: 0; |
| | | padding: 0; |
| | | width: 100%; |
| | | } |
| | | |
| | | .create-new-term { |
| | | margin-top: 1rem; |
| | | width: 100%; |
| | | } |
| | | |
| | | .create-new-term .field, |
| | | .create-new-term[open] summary { |
| | | margin-bottom: 1rem; |
| | | } |
| | | |
| | | .create-new-term .field { |
| | | max-width: 100%; |
| | | } |
| | | |
| | | #jvb-selector > .wrap { |
| | | --wrap: nowrap; |
| | | --justify: flex-start; |
| | | } |
| | | |
| | | #jvb-selector .items-wrap { |
| | | width: 100%; |
| | | } |
| | | |
| | | #jvb-selector .items-container { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fit, minmax(1fr, 100%)) |
| | | } |
| | | |
| | | /****************************** |
| | | TABS |
| | | ******************************/ |
| | | .tab-content[hidden] { |
| | | display: block!important; |
| | | transform: scaleY(0); |
| | | height: 0; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .tab-content[hidden]:focus-within { |
| | | transform: scaleY(1); |
| | | height:auto; |
| | | } |
| | | |
| | | nav.tabs h2 { |
| | | margin: 0!important; |
| | | line-height: 1; |
| | | font-size: var(--txt-medium); |
| | | display: flex; |
| | | color: var(--contrast); |
| | | white-space: nowrap; |
| | | gap: 1rem; |
| | | } |
| | | |
| | | nav.tabs .active h2 { |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | nav.tabs button { |
| | | padding: .75rem 1.5rem; |
| | | border-radius: 0; |
| | | position: relative; |
| | | border: 2px solid var(--action-0); |
| | | } |
| | | |
| | | nav.tabs > button:first-of-type { |
| | | border-top-left-radius: var(--radius); |
| | | } |
| | | |
| | | nav.tabs > button:last-of-type { |
| | | border-top-right-radius: var(--radius); |
| | | } |
| | | |
| | | .tabs > button:hover, |
| | | .tabs > button:focus { |
| | | background-color: var(--base-200); |
| | | } |
| | | |
| | | .tabs > button::after { |
| | | content: ''; |
| | | position: absolute; |
| | | bottom: -2px; |
| | | left: 0; |
| | | width: 0; |
| | | height: 3px; |
| | | background-color: var(--action-50); |
| | | transition: width .3s; |
| | | } |
| | | |
| | | .tabs > button:hover::after, |
| | | .tabs > button.active::after { |
| | | width: 100%; |
| | | } |
| | | |
| | | .tabs > button.active::after { |
| | | background-color: var(--action-200); |
| | | } |
| | | |
| | | .tabs > button.active { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | .tabs > button.active:hover, |
| | | .tabs > button.active:focus { |
| | | background-color: var(--action-100); |
| | | } |
| | | |
| | | .tab-content h2 { |
| | | display: none; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | /************* DONE TO HERE *****/ |
| | | |
| | | details.uploader .file-upload-container { |
| | | margin: 1rem 0; |
| | | max-width: 100%; |
| | |
| | | @media (min-width: 768px) { |
| | | details.uploader .file-upload-container { |
| | | margin: 1rem var(--mr) 1rem var(--ml); |
| | | max-width: var(--maxWidth); |
| | | max-width: var(--content); |
| | | } |
| | | } |
| | | /*.field.upload .item-grid,*/ |
| | |
| | | padding: 2rem; |
| | | text-align: center; |
| | | transition: all .3s ease; |
| | | background: rgba(var(--action-rgb),var(--rgb-subtle)); |
| | | background: rgba(var(--action-rgb),var(--op-1)); |
| | | position: relative; |
| | | cursor: pointer; |
| | | } |
| | | .file-upload-wrapper h2 { |
| | | margin: 0!important; |
| | | font-size: var(--large); |
| | | font-size: var(--txt-large); |
| | | } |
| | | |
| | | .file-upload-wrapper:hover, |
| | | .dragover { |
| | | background: rgba(var(--action-rgb),var(--rgb-subtle-hover)); |
| | | background: rgba(var(--action-rgb),var(--op-2)); |
| | | border-color: var(--action-0)!important; |
| | | } |
| | | |
| | |
| | | top: 0; |
| | | right: 0; |
| | | } |
| | | .item-grid.restore, |
| | | .item-grid.group, |
| | | .item-grid.preview { |
| | | grid-template-columns: repeat(3, 1fr) |
| | | |
| | | .item-grid.group { |
| | | margin-bottom: 0; |
| | | } |
| | | .item-grid.restore .item, |
| | | .item-grid.group .item, |
| | |
| | | .item-grid.preview:has([type=checkbox]:checked), |
| | | .item-grid.group:has([type=checkbox]:checked) { |
| | | padding: 1rem; |
| | | background-color: rgba(var(--contrast-rgb),var(--rgb-subtle)); |
| | | background-color: rgba(var(--contrast-rgb),var(--op-1)); |
| | | } |
| | | .item-grid.restore:has([type=checkbox]:checked) .item, |
| | | .item-grid.preview:has([type=checkbox]:checked) .item, |
| | |
| | | .item-grid.preview .item:has([type=checkbox]:checked), |
| | | .item-grid.group .item:has([type=checkbox]:checked) { |
| | | padding: .5rem; |
| | | background-color: rgba(var(--action-rgb), var(--rgb-medium)); |
| | | background-color: rgba(var(--action-rgb), var(--op-4)); |
| | | opacity: 1; |
| | | } |
| | | |
| | | .item-grid.preview summary span { |
| | | display: none; |
| | | } |
| | | |
| | | .item-grid.restore .item:has([type=checkbox]:checked) img, |
| | | .item-grid.preview .item:has([type=checkbox]:checked) img, |
| | | .item-grid.group .item:has([type=checkbox]:checked) img { |
| | | filter: none; |
| | | } |
| | | |
| | | [type=radio].featured:checked + label .star, |
| | | [type=radio].featured + label .star + .star { |
| | | [type=radio].featured:checked + label .icon-star, |
| | | [type=radio].featured + label .icon-star-fi { |
| | | display: none; |
| | | } |
| | | |
| | | [type=radio].featured + label .star, |
| | | [type=radio].featured:checked + label .star + .star { |
| | | [type=radio].featured + label .icon-star, |
| | | [type=radio].featured:checked + label .icon-star-fi { |
| | | display: inline-block; |
| | | } |
| | | .restore.restore.item, |
| | | .upload.upload.item { |
| | | border-radius: var(--innerRadius); |
| | | border-radius: var(--radius); |
| | | aspect-ratio: unset; |
| | | overflow: hidden; |
| | | background: var(--base); |
| | |
| | | } |
| | | .restore.item img, |
| | | .upload.item img { |
| | | transition: transform var(--transition-base); |
| | | transition: transform var(--trans-base); |
| | | } |
| | | |
| | | .restore.item:hover img, |
| | | .upload.item:hover img { |
| | | transform: scale(1.02); |
| | | transition: transform var(--transition-base); |
| | | transition: transform var(--trans-base); |
| | | } |
| | | |
| | | .upload-group { |
| | | background-image: var(--dashed-action); |
| | | padding: 5px; |
| | | border-radius: var(--innerRadius); |
| | | background-color: rgba(var(--action-rgb), var(--rgb-subtle)); |
| | | border-radius: var(--radius); |
| | | background-color: rgba(var(--action-rgb), var(--op-1)); |
| | | } |
| | | .upload-group .selected .field { |
| | | margin: 0; |
| | | } |
| | | .upload-group .group-actions button { |
| | | aspect-ratio: unset; |
| | | } |
| | | |
| | | .submit-uploads { |
| | | position: fixed; |
| | | bottom: var(--offHeight); |
| | | right: var(--offHeight); |
| | | bottom: var(--btn_); |
| | | right: var(--btn_); |
| | | z-index: var(--z-6); |
| | | height: var(--height); |
| | | box-shadow: var(--shadow); |
| | | border-radius: var(--innerRadius); |
| | | height: var(--btn); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | border-radius: var(--radius); |
| | | animation: pulse-color 5s infinite; |
| | | animation-delay: 1s; |
| | | background-color: var(--action-0); |
| | |
| | | } |
| | | |
| | | .empty-group { |
| | | order: -1; |
| | | grid-column: 1 / -1; |
| | | padding: 20px; |
| | | background-image: var(--dashed-action); |
| | | border-radius: var(--innerRadius); |
| | | border-radius: var(--radius); |
| | | margin: 10px 0; |
| | | cursor: pointer; |
| | | transition: all var(--transition-base); |
| | | transition: all var(--trans-base); |
| | | text-align: center; |
| | | background-color: rgba(var(--action-rgb), var(--rgb-subtle)); |
| | | background-color: rgba(var(--action-rgb), var(--op-1)); |
| | | } |
| | | |
| | | .group-display:not([hidden]) ~ .file-upload-container { |
| | |
| | | .dragging { |
| | | opacity: .7; |
| | | transform: scale(.95) rotate(3deg); |
| | | z-index: var(--z-top); |
| | | z-index: var(--z-7); |
| | | box-shadow: 0 8px 25px rgba(0,0,0,.3); |
| | | } |
| | | |
| | | .dragover { |
| | | background: rgba(var(--action-rgb),var(--rgb-light))!important; |
| | | background: rgba(var(--action-rgb),var(--op-3))!important; |
| | | border-color: var(--action-0) !important; |
| | | transform: scale(1.05); |
| | | animation: drop-pulse .8s infinite ease-in-out; |
| | |
| | | |
| | | .drag-preview { |
| | | position: fixed; |
| | | z-index: var(--zz-top); |
| | | z-index: var(--z-9); |
| | | width: fit-content; |
| | | overflow: visible; |
| | | pointer-events: none; |
| | |
| | | top: 0; |
| | | left: 0; |
| | | background: var(--base); |
| | | border-radius: var(--outerRadius); |
| | | box-shadow: var(--shadow); |
| | | border-radius: var(--radius-outer); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | .drag-preview .drag-items .drag-item:nth-child(1) { |
| | |
| | | justify-content: center; |
| | | font-size: 12px; |
| | | font-weight: bold; |
| | | box-shadow: var(--shadow); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | z-index: var(--z-3); |
| | | } |
| | | |
| | |
| | | |
| | | @keyframes drop-pulse { |
| | | 0%, 100% { |
| | | background-color: rgba(var(--action-rgb),var(--rgb-light)); |
| | | background-color: rgba(var(--action-rgb),var(--op-3)); |
| | | transform: scale(1.02); |
| | | } |
| | | 50% { |
| | | background-color: var(rgba(var(--action-rgb),var(--rgb-medium))); |
| | | background-color: var(rgba(var(--action-rgb),var(--op-4))); |
| | | transform: scale(1.04); |
| | | } |
| | | } |
| | |
| | | |
| | | .group-display.group-display { |
| | | position: fixed; |
| | | top: var(--height); |
| | | bottom: var(--height); |
| | | top: var(--btn); |
| | | bottom: var(--btn); |
| | | left: 0; |
| | | right: 0; |
| | | max-height: var(--maxHeight); |
| | |
| | | left: -.5rem; |
| | | right: -.5rem; |
| | | position: absolute; |
| | | background-color: rgba(var(--base-rgb), var(--rgb-heavy)); |
| | | background-color: rgba(var(--base-rgb), var(--op-6)); |
| | | filter: blur(5px); |
| | | } |
| | | |
| | |
| | | position: absolute; |
| | | left: 0; |
| | | right: 0; |
| | | background-color: rgba(var(--base-rgb), var(--rgb-heavy)); |
| | | background-color: rgba(var(--base-rgb), var(--op-6)); |
| | | z-index: var(--z-3); |
| | | box-shadow: var(--shadow); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | } |
| | | .group-display .item-grid { |
| | | height: 100%; |
| | |
| | | height: fit-content; |
| | | top: 0; |
| | | z-index: var(--z-3); |
| | | background-color: rgba(var(--action-rgb), var(--rgb-heavy)); |
| | | background-color: rgba(var(--action-rgb), var(--op-6)); |
| | | } |
| | | .group-display .sidebar .upload-group { |
| | | order: 1; |
| | |
| | | } |
| | | |
| | | .submit-uploads { |
| | | bottom: var(--height); |
| | | bottom: var(--btn); |
| | | left: 0; |
| | | right: 0; |
| | | width: 100%; |
| | |
| | | .group-display .preview-wrap, |
| | | .group-display .sidebar { |
| | | --justify: flex-start; |
| | | max-height: calc(100vh - var(--doubleHeight)); |
| | | max-height: calc(100vh - var(--btnbtn)); |
| | | overflow: hidden auto; |
| | | } |
| | | .group-display .preview-wrap, |
| | |
| | | .preview-wrap .hint { |
| | | position: sticky; |
| | | z-index: var(--z-3); |
| | | box-shadow: var(--shadow); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | background-color: var(--base); |
| | | width: 100%; |
| | | } |
| | |
| | | |
| | | .restore-uploads { |
| | | position: fixed; |
| | | top: var(--offHeight); |
| | | bottom: var(--offHeight); |
| | | top: var(--btn_); |
| | | bottom: var(--btn_); |
| | | left: 1rem; |
| | | right: 1rem; |
| | | border-radius: var(--outerRadius); |
| | | border-radius: var(--radius-outer); |
| | | padding: 1rem; |
| | | z-index: var(--z-top); |
| | | box-shadow: var(--shadow); |
| | | z-index: var(--z-7); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | background-color: var(--base-200); |
| | | overflow: hidden auto; |
| | | } |
| | |
| | | top: 0; |
| | | background-color: var(--base-50); |
| | | z-index: var(--z-6); |
| | | box-shadow: var(--shadow-down); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down); |
| | | margin-bottom: 2rem; |
| | | } |
| | | |
| | |
| | | flex-wrap: wrap; |
| | | padding: .25rem; |
| | | gap: .5rem 1rem; |
| | | border-top-left-radius: var(--innerRadius); |
| | | border-top-right-radius: var(--innerRadius); |
| | | border-top-left-radius: var(--radius); |
| | | border-top-right-radius: var(--radius); |
| | | border-bottom: 4px solid var(--base-50); |
| | | } |
| | | .ql-toolbar .ql-formats { |
| | |
| | | .editor-container .ql-container { |
| | | --padding: 1rem; |
| | | background-color: var(--base); |
| | | border-bottom-left-radius: var(--innerRadius); |
| | | border-bottom-right-radius: var(--innerRadius); |
| | | border-bottom-left-radius: var(--radius); |
| | | border-bottom-right-radius: var(--radius); |
| | | height: fit-content; |
| | | padding: 2px; |
| | | border: 1px solid var(--base-200); |
| | |
| | | transform: translateY(10px); |
| | | background-color: var(--base-100); |
| | | border: 1px solid var(--base); |
| | | box-shadow: 0px 0px 5px var(--overlay-heavy); |
| | | box-shadow: 0px 0px 5px rgba(var(--base-rgb),var(--op-6)); |
| | | color: var(--contrast); |
| | | padding: 5px 12px; |
| | | white-space: nowrap; |
| | |
| | | |
| | | /*.group-actions button {*/ |
| | | /* padding: 0.5rem 0.75rem;*/ |
| | | /* border-radius: var(--innerRadius);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | /* background: rgba(var(--action-rgb), 0.1);*/ |
| | | /* border: 1px solid rgba(var(--action-rgb), 0.3);*/ |
| | | /* color: var(--action-0);*/ |
| | | /* font-size: var(--small);*/ |
| | | /* transition: all var(--transition-base);*/ |
| | | /* font-size: var(--txt-small);*/ |
| | | /* transition: all var(--trans-base);*/ |
| | | /* cursor: pointer;*/ |
| | | /*}*/ |
| | | |
| | |
| | | /*.item-grid.group {*/ |
| | | /* background: rgba(255, 255, 255, 0.5);*/ |
| | | /* border: 1px solid rgba(var(--action-rgb), 0.15);*/ |
| | | /* border-radius: var(--innerRadius);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | /* padding: 0.75rem;*/ |
| | | /* min-height: 100px;*/ |
| | | /*}*/ |
| | |
| | | /*!* Group count hint *!*/ |
| | | /*.group-count {*/ |
| | | /* margin-top: 0.5rem;*/ |
| | | /* font-size: var(--small);*/ |
| | | /* font-size: var(--txt-small);*/ |
| | | /* color: var(--contrast-70);*/ |
| | | /* font-style: italic;*/ |
| | | /*}*/ |
| | |
| | | /* padding: 1rem;*/ |
| | | /* background: rgba(var(--action-rgb), 0.05);*/ |
| | | /* border: 1px solid rgba(var(--action-rgb), 0.2);*/ |
| | | /* border-radius: var(--innerRadius);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | /* margin: 1rem 0;*/ |
| | | /* animation: slideDown var(--transition-base);*/ |
| | | /* animation: slideDown var(--trans-base);*/ |
| | | /*}*/ |
| | | |
| | | /*.field.upload .progress[hidden] {*/ |
| | |
| | | |
| | | /*!* Progress details - styled for row layout with text and count *!*/ |
| | | /*.progress > .details {*/ |
| | | /* font-size: var(--small);*/ |
| | | /* font-size: var(--txt-small);*/ |
| | | /* color: var(--contrast);*/ |
| | | /* display: flex;*/ |
| | | /* justify-content: space-between;*/ |
| | |
| | | /* gap: 0.5rem;*/ |
| | | /* z-index: var(--z-2);*/ |
| | | /* color: white;*/ |
| | | /* border-radius: var(--innerRadius);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | /* backdrop-filter: blur(2px);*/ |
| | | /*}*/ |
| | | |
| | |
| | | |
| | | /*.upload.item .progress span.details {*/ |
| | | /* color: white;*/ |
| | | /* font-size: var(--small);*/ |
| | | /* font-size: var(--txt-small);*/ |
| | | /* font-weight: 500;*/ |
| | | /*}*/ |
| | | |
| | |
| | | /*!* Selection checkbox - always visible on hover or when checked *!*/ |
| | | /*.upload.item .upload-select + label::before {*/ |
| | | /* opacity: 0.7;*/ |
| | | /* transition: all var(--transition-base);*/ |
| | | /* transition: all var(--trans-base);*/ |
| | | /*}*/ |
| | | |
| | | /*.upload.item:hover .upload-select + label::before,*/ |
| | |
| | | /*}*/ |
| | | |
| | | /*.selection-count {*/ |
| | | /* font-size: var(--large);*/ |
| | | /* font-size: var(--txt-large);*/ |
| | | /* color: var(--action-0);*/ |
| | | /*}*/ |
| | | |
| | |
| | | /*.restore-message h4 {*/ |
| | | /* margin: 0 0 0.5rem 0;*/ |
| | | /* color: var(--action-0);*/ |
| | | /* font-size: var(--large);*/ |
| | | /* font-size: var(--txt-large);*/ |
| | | /*}*/ |
| | | |
| | | /*.restore-message .restore-details {*/ |
| | |
| | | |
| | | /*.restore-message .hint {*/ |
| | | /* margin: 0.5rem 0 0 0;*/ |
| | | /* font-size: var(--small);*/ |
| | | /* font-size: var(--txt-small);*/ |
| | | /* color: var(--contrast-70);*/ |
| | | /*}*/ |
| | | |
| | |
| | | /* display: flex;*/ |
| | | /* flex-direction: column;*/ |
| | | /* border: 2px solid var(--border);*/ |
| | | /* border-radius: var(--innerRadius);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | /* overflow: hidden;*/ |
| | | /* cursor: pointer;*/ |
| | | /* transition: all var(--transition-base);*/ |
| | | /* transition: all var(--trans-base);*/ |
| | | /* position: relative;*/ |
| | | /*}*/ |
| | | |
| | |
| | | /*}*/ |
| | | |
| | | /*.restore-item-info .name {*/ |
| | | /* font-size: var(--small);*/ |
| | | /* font-size: var(--txt-small);*/ |
| | | /* font-weight: 600;*/ |
| | | /* color: var(--contrast);*/ |
| | | /* overflow: hidden;*/ |
| | |
| | | |
| | | /*.selection-controls button {*/ |
| | | /* padding: 0.5rem 1rem;*/ |
| | | /* font-size: var(--small);*/ |
| | | /* font-size: var(--txt-small);*/ |
| | | /* border: 1px solid var(--border);*/ |
| | | /* background: var(--base);*/ |
| | | /* color: var(--contrast);*/ |
| | | /* border-radius: var(--innerRadius);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | /* cursor: pointer;*/ |
| | | /* transition: all var(--transition-base);*/ |
| | | /* transition: all var(--trans-base);*/ |
| | | /*}*/ |
| | | |
| | | /*.selection-controls button:hover {*/ |
| | |
| | | /* font-size: var(--base);*/ |
| | | /* font-weight: 600;*/ |
| | | /* border: none;*/ |
| | | /* border-radius: var(--innerRadius);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | /* cursor: pointer;*/ |
| | | /* transition: all var(--transition-base);*/ |
| | | /* transition: all var(--trans-base);*/ |
| | | /* display: flex;*/ |
| | | /* align-items: center;*/ |
| | | /* gap: 0.5rem;*/ |
| | |
| | | |
| | | .form-progress .progress { |
| | | background: var(--base-100); |
| | | border-radius: var(--innerRadius); |
| | | border-radius: var(--radius); |
| | | padding: 1rem; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | .form-progress .step-text { |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | font-weight: 600; |
| | | color: var(--contrast-200); |
| | | } |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | font-weight: 700; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | border: 3px solid var(--base); |
| | | } |
| | | |
| | |
| | | |
| | | .error-message { |
| | | color: var(--errorText); |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | margin-top: 0.25rem; |
| | | display: block; |
| | | } |
| | |
| | | @media (max-width: 768px) { |
| | | form nav.tabs button { |
| | | min-width: 80px; |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | form nav.tabs button h2 { |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | } |
| | | |
| | | form { |
| | |
| | | /* Validation Message */ |
| | | .validation-message { |
| | | color: var(--error-0); |
| | | font-size: var(--small); |
| | | font-size: var(--txt-small); |
| | | margin-top: 0.25rem; |
| | | display: block; |
| | | animation: slideDown 0.2s ease; |
| | |
| | | } |
| | | |
| | | .ql-toolbar button { |
| | | --height: fit-content; |
| | | min-height: 0; |
| | | padding: .5rem; |
| | | } |
| | | |
| | | .success-message { |
| | | color: var(--success, #16a34a); |
| | | background-color: var(--success-bg, #f0fdf4); |
| | | border: 1px solid var(--success, #16a34a); |
| | | color: var(--success); |
| | | background-color: var(--successBack); |
| | | border: 1px solid var(--success); |
| | | padding: 0.75rem 1rem; |
| | | border-radius: var(--radius); |
| | | margin-bottom: 1rem; |
| | |
| | | } |
| | | |
| | | .success-box { |
| | | background-color: var(--success-bg, #f0fdf4); |
| | | border: 2px solid var(--success, #16a34a); |
| | | background-color: var(--successBack); |
| | | border: 2px solid var(--success); |
| | | padding: 1.5rem; |
| | | border-radius: var(--outerRadius); |
| | | border-radius: var(--radius-outer); |
| | | margin-bottom: 1rem; |
| | | text-align: center; |
| | | } |
| | | |
| | | .success-box h3 { |
| | | color: var(--success, #16a34a); |
| | | color: var(--success); |
| | | margin-bottom: 0.5rem; |
| | | } |
| | | |
| | |
| | | .field-error input, |
| | | .field-error textarea, |
| | | .field-error select { |
| | | border-color: var(--error, #dc2626); |
| | | border-color: var(--error); |
| | | } |
| | | |
| | | .error-message { |
| | | color: var(--error, #dc2626); |
| | | font-size: var(--small); |
| | | color: var(--error); |
| | | font-size: var(--txt-small); |
| | | margin-top: 0.25rem; |
| | | display: block; |
| | | } |
| | | |
| | | .form-error { |
| | | background-color: var(--error-bg, #fee); |
| | | border: 1px solid var(--error, #dc2626); |
| | | background-color: var(--errorBack); |
| | | border: 1px solid var(--error); |
| | | padding: 0.75rem; |
| | | border-radius: var(--radius); |
| | | margin-bottom: 1rem; |
| | |
| | | .has-success input, |
| | | .has-success textarea, |
| | | .has-success select { |
| | | border-color: var(--success, #16a34a); |
| | | border-color: var(--success); |
| | | } |
| | | .form-error { |
| | | display: flex; |
| | |
| | | width: 100%; |
| | | background-color: var(--base-100); |
| | | padding: .5rem; |
| | | box-shadow: var(--shadow); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | .invite details { |
| | | margin-bottom: 1.5rem; |
| | | } |
| | | |
| | | /******************************* |
| | | Tag Field |
| | | */ |
| | | /* Tag List Field */ |
| | | .field.tag-list .tag-input-row { |
| | | display: flex; |
| | | gap: 0.5rem; |
| | | align-items: flex-start; |
| | | margin-bottom: 1rem; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .field.tag-list .tag-input-row .field { |
| | | flex: 1; |
| | | min-width: 150px; |
| | | margin: 0; |
| | | } |
| | | |
| | | .field.tag-list .tag-input-row .add-tag-item { |
| | | flex-shrink: 0; |
| | | white-space: nowrap; |
| | | margin-top: calc(var(--txt-medium) + 1rem); |
| | | } |
| | | |
| | | .field.tag-list .tag-items { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 0.5rem; |
| | | margin-bottom: 1rem; |
| | | min-height: 2rem; |
| | | } |
| | | |
| | | .field.tag-list .tag-item { |
| | | background: var(--base-200); |
| | | padding: 0.4rem 0.75rem; |
| | | border-radius: 4px; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | gap: 0.5rem; |
| | | font-size: 0.9rem; |
| | | line-height: 1.2; |
| | | } |
| | | |
| | | .field.tag-list .tag-item:hover { |
| | | background: var(--base-100); |
| | | } |
| | | |
| | | .field.tag-list .tag-label { |
| | | max-width: 300px; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .field.tag-list .remove-tag { |
| | | min-height: 0; |
| | | padding: .25rem; |
| | | color: var(--contrast); |
| | | transition: transform 0.2s; |
| | | box-shadow: none; |
| | | } |
| | | |
| | | .field.tag-list .remove-tag:hover { |
| | | transform: scale(1.2); |
| | | } |
| | | |
| | | @media (max-width: 768px) { |
| | | .field.tag-list .tag-input-row { |
| | | flex-direction: column; |
| | | align-items: stretch; |
| | | } |
| | | |
| | | .field.tag-list .tag-input-row .field { |
| | | min-width: 100%; |
| | | } |
| | | } |
| New file |
| | |
| | | /********************************************************** |
| | | NAVIGATION - HOVER STYLES (OPTIMIZED) |
| | | Only loaded for (hover: hover) and (pointer: fine) |
| | | **********************************************************/ |
| | | |
| | | /** |
| | | * Primary hover state - All elements that use action-0 on hover |
| | | * Using :is() to group selectors reduces repetition |
| | | */ |
| | | :is( |
| | | nav a, |
| | | nav a:visited, |
| | | .has-submenu button, |
| | | nav.always > button, |
| | | nav.always .has-submenu > a, |
| | | nav.always .submenu > li > a, |
| | | .index a, |
| | | .index .active a |
| | | ):hover { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | /** |
| | | * Submenu hover opening |
| | | */ |
| | | .has-submenu:hover > ul.submenu { |
| | | transform: scaleY(1); |
| | | max-height: 1000%; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | /** |
| | | * Icon rotation on hover |
| | | */ |
| | | .has-submenu:hover > button:not(.notifications, .quick-help) .icon { |
| | | transform: rotate(var(--nav-icon-rotation)); |
| | | } |
| | | |
| | | /** |
| | | * Special hover states - Different from primary action-0 |
| | | */ |
| | | |
| | | /* Submenu items - overlay effect */ |
| | | .submenu li:hover { |
| | | --c: var(--action-rgb); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | } |
| | | |
| | | /* Keep submenu link backgrounds transparent */ |
| | | .submenu a:hover { |
| | | background-color: transparent; |
| | | } |
| | | |
| | | /* Fixed navigation - uses action-contrast directly */ |
| | | :is( |
| | | nav.fixed.bottom a, |
| | | nav.fixed.bottom a:visited |
| | | ):hover { |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | /* Condensed nav - border instead of background */ |
| | | :is( |
| | | .condensed a, |
| | | .condensed a:visited |
| | | ):hover { |
| | | border-color: var(--action-0); |
| | | } |
| | | |
| | | /* Breadcrumbs - transparent background, action-0 text */ |
| | | :is( |
| | | nav#breadcrumbs a, |
| | | nav#breadcrumbs a:visited |
| | | ):hover { |
| | | background-color: transparent; |
| | | color: var(--action-0); |
| | | } |
| | | |
| | | /*!* Current hours - lighter shade *!*/ |
| | | /*.current-hours a:hover {*/ |
| | | /* color: var(--action-200);*/ |
| | | /*}*/ |
| | | |
| | | /*!* Find us - inverted colors *!*/ |
| | | /*.find-us a:hover {*/ |
| | | /* background-color: var(--base);*/ |
| | | /* color: var(--contrast);*/ |
| | | /* border-color: var(--contrast);*/ |
| | | /*}*/ |
| | | |
| | | /* Share button - vertical shift effect */ |
| | | nav.share .button:hover { |
| | | top: -4px; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down); |
| | | } |
| | |
| | | /********************************************************** |
| | | BASE NAV STYLES |
| | | **********************************************************/ |
| | | nav { |
| | | --py: .25rem; |
| | | --px: 1rem; |
| | | max-width: 100%; |
| | | font-family: var(--heading); |
| | | } |
| | | /************************************************************** |
| | | BASE NAVIGATION - Works for 80% of cases |
| | | **************************************************************/ |
| | | nav, |
| | | nav ol, |
| | | nav ul, |
| | | nav li, |
| | | nav a { |
| | | height: var(--height); |
| | | display: flex; |
| | | justify-content: var(--justify); |
| | | align-items: var(--align); |
| | | gap: var(--gap); |
| | | flex-wrap: var(--wrap); |
| | | flex-direction: var(--dir); |
| | | } |
| | | |
| | | ul.socials { |
| | | --w: 1.2em; |
| | | --height: fit-content; |
| | | gap: .5rem; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | flex-wrap: nowrap; |
| | | flex-direction: row; |
| | | overflow: auto hidden; |
| | | touch-action: pan-x; |
| | | list-style: none; |
| | | } |
| | | nav:not(:has(> ul)), |
| | | nav > ul { |
| | | --justify: flex-start; |
| | | --align: center; |
| | | nav ul { |
| | | --padding: 0 1rem; |
| | | --wrap: nowrap; |
| | | --w: 1em; |
| | | --dir: row; |
| | | position: relative; |
| | | overflow: auto hidden; |
| | | touch-action: pan-x; |
| | | display: flex; |
| | | flex-direction: var(--dir, row); |
| | | justify-content: var(--justify, flex-start); |
| | | align-items: var(--align, center); |
| | | gap: var(--gap, 0); |
| | | flex-wrap: var(--wrap, nowrap); |
| | | height: var(--btn, 3rem); |
| | | max-width: 100%; |
| | | font-family: var(--heading); |
| | | padding: 0; |
| | | margin: 0; |
| | | } |
| | | |
| | | nav a { |
| | | padding: 0 var(--px); |
| | | /* Items fill parent */ |
| | | nav li { |
| | | display: flex; |
| | | align-items: center; |
| | | height: max(var(--btn), max-content); |
| | | width: 100%; |
| | | max-inline-size: none; |
| | | } |
| | | |
| | | /* Links fill parent */ |
| | | nav a, |
| | | nav button { |
| | | display: flex; |
| | | text-decoration: none; |
| | | align-items: center; |
| | | justify-content: center; |
| | | height: var(--btn); |
| | | width: 100%; |
| | | white-space: nowrap; |
| | | text-transform: uppercase; |
| | | transition: var(--trans-color); |
| | | } |
| | | nav .current a, |
| | | nav a.current, |
| | | nav a:hover, |
| | | nav a:focus, |
| | | nav a:hover:visited, |
| | | nav a:focus:visited { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | transition: background-color var(--transition-base), |
| | | color var(--transition-base); |
| | | nav a { |
| | | height: var(--btn); |
| | | padding: var(--padding); |
| | | } |
| | | |
| | | nav ol, |
| | | nav ul { |
| | | list-style: none; |
| | | margin: 0; |
| | | /* Buttons */ |
| | | nav button { |
| | | justify-content: center; |
| | | aspect-ratio: 1; |
| | | padding: 0; |
| | | } |
| | | |
| | | /************************************************************** |
| | | SUBMENU |
| | | **************************************************************/ |
| | | .has-submenu button:hover, |
| | | nav a:hover { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | .has-submenu button { |
| | | height: var(--height); |
| | | width: var(--height); |
| | | padding: 0; |
| | | /*background-color: var(--base);*/ |
| | | border: 2px solid var(--base); |
| | | color: var(--contrast); |
| | | border-radius: 0; |
| | | } |
| | | |
| | | /************************************************************** |
| | | STATES - Apply to all navs |
| | | **************************************************************/ |
| | | |
| | | /* Active/Focus states */ |
| | | nav a:hover, |
| | | nav .current a, |
| | | nav a.current, |
| | | nav a:focus, |
| | | nav a:focus:visited, |
| | | nav button:focus { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | |
| | | /* Icon rotation */ |
| | | .toggle .icon { |
| | | transform: rotate(0deg); |
| | | transition: transform var(--timing) var(--function); |
| | | transition-property: transform, background-color, color; |
| | | transition: transform var(--trans-base); |
| | | } |
| | | .has-submenu.open > button:not(.notifications, .quick-help) .icon, |
| | | .has-submenu:hover > button:not(.notifications, .quick-help) .icon { |
| | | |
| | | .has-submenu.open > button .icon { |
| | | transform: rotate(900deg); |
| | | } |
| | | |
| | | /************************************************************** |
| | | SUBMENUS - Generic pattern |
| | | **************************************************************/ |
| | | .has-submenu { |
| | | position: relative; |
| | | } |
| | | |
| | | ul.submenu { |
| | | --dir: column; |
| | | --wrap: nowrap; |
| | | --gap: 0; |
| | | height: max-content; |
| | | position: absolute; |
| | | top: 100%; |
| | | left: 0; |
| | | max-height: 0; |
| | | transform: scaleY(0); |
| | | transform-origin: top; |
| | | width: max-content; |
| | | min-width: 100%; |
| | | background-color: var(--overlay-light); |
| | | border: 2px solid var(--overlay-light); |
| | | transition: all var(--timing) var(--function); |
| | | box-shadow: var(--shadow-none); |
| | | } |
| | | |
| | | .always ul.submenu { |
| | | position: relative; |
| | | top: 0; |
| | | left: 0; |
| | | width: max(100%, max-content); |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | border: 2px solid rgba(var(--base-rgb),var(--op-3)); |
| | | transition: all var(--trans-t) var(--trans-fn); |
| | | box-shadow: var(--shdw-none); |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .submenu li { |
| | | background-color: var(--overlay-heavy); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | border: 1px solid var(--base-50); |
| | | } |
| | | .submenu li:hover { |
| | | --c: var(--action-rgb); |
| | | background-color: var(--overlay-heavy); |
| | | } |
| | | .submenu a:hover { |
| | | background-color: transparent; |
| | | } |
| | | .wp-site-blocks > header ul.submenu { |
| | | right: 0; |
| | | left: auto; |
| | | } |
| | | |
| | | /** |
| | | Opening Submenus |
| | | */ |
| | | .has-submenu.open > ul.submenu, |
| | | .has-submenu:hover > ul.submenu { |
| | | /* Open state */ |
| | | .open > ul.submenu { |
| | | transform: scaleY(1); |
| | | max-height: 1000%; |
| | | box-shadow: var(--shadow); |
| | | } |
| | | /************************************************************** |
| | | FIXED |
| | | **************************************************************/ |
| | | nav.on-this-page, |
| | | nav.fixed.bottom { |
| | | --dir: row; |
| | | --gap: 0; |
| | | width: calc(100% - var(--height)); |
| | | left: 0; |
| | | bottom: 0; |
| | | position: fixed; |
| | | box-shadow: var(--shadow); |
| | | z-index: var(--zz-top); |
| | | } |
| | | nav.fixed.bottom ul { |
| | | width: 100%; |
| | | --justify: space-between; |
| | | background-color: var(--base); |
| | | padding: 0 .25rem; |
| | | } |
| | | nav.fixed li, |
| | | nav.fixed a { |
| | | --justify: center; |
| | | width: 100%; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | } |
| | | |
| | | nav.fixed.bottom a:visited, |
| | | nav.fixed.bottom a { |
| | | color: var(--contrast); |
| | | font-size: var(--small); |
| | | /************************************************************** |
| | | ACCESSIBILITY - Universal |
| | | **************************************************************/ |
| | | .screen-reader-text { |
| | | position: absolute; |
| | | width: 1px; |
| | | height: 1px; |
| | | padding: 0; |
| | | margin: -1px; |
| | | overflow: hidden; |
| | | clip: rect(0, 0, 0, 0); |
| | | white-space: nowrap; |
| | | border-width: 0; |
| | | } |
| | | @media (min-width:768px) { |
| | | nav.fixed.bottom a:visited, |
| | | nav.fixed.bottom a { |
| | | font-size: var(--medium); |
| | | } |
| | | |
| | | nav a:focus:not(:focus-visible) { |
| | | outline: none; |
| | | } |
| | | nav.fixed.bottom a:hover, |
| | | nav.fixed.bottom a:hover:visited, |
| | | nav.fixed.bottom a:focus, |
| | | nav.fixed.bottom a:focus:visited { |
| | | color: var(--action-contrast); |
| | | |
| | | nav a:focus-visible { |
| | | outline: 2px solid var(--action-0); |
| | | outline-offset: 2px; |
| | | } |
| | | .fixed.bottom li { |
| | | |
| | | /************************************************************** |
| | | VARIANT: MOBILE NAV (.always) |
| | | Only define what makes it different from base |
| | | **************************************************************/ |
| | | nav.always { |
| | | /* Different positioning */ |
| | | --dir: column; |
| | | --wrap: nowrap; |
| | | position: fixed; |
| | | bottom: 0; |
| | | right: 0; |
| | | width: var(--btn); |
| | | z-index: var(--z-10); |
| | | } |
| | | |
| | | nav.always.open { |
| | | --justify: flex-end; |
| | | width: 100vw; |
| | | height: 100vh; |
| | | padding-bottom: var(--btn_); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | backdrop-filter: blur(5px); |
| | | } |
| | | |
| | | nav.always > ul { |
| | | --dir: column; |
| | | --align: center; |
| | | --justify: flex-start; |
| | | --gap: 0; |
| | | height: 100%; |
| | | position: relative; |
| | | right: -300vw; |
| | | width: 100vw; |
| | | max-height: 100%; |
| | | padding: 1rem 0 0; |
| | | overflow: hidden auto; |
| | | transition: right var(--trans-base); |
| | | } |
| | | |
| | | nav.always.open > ul { |
| | | right: 0; |
| | | } |
| | | |
| | | nav.always li { |
| | | flex-wrap: wrap; |
| | | background-color: rgba(var(--base-rgb), var(--op-6)); |
| | | } |
| | | |
| | | nav.always a { |
| | | padding: 1rem; |
| | | max-width: calc(100% - var(--btn)); |
| | | text-align: center; |
| | | } |
| | | |
| | | /* Split layout for items with submenus */ |
| | | nav.always .has-submenu { |
| | | display: flex; |
| | | } |
| | | |
| | | nav.always .has-submenu > a { |
| | | flex: 1; |
| | | } |
| | | |
| | | nav.always a { |
| | | padding: 0; |
| | | --justify: center; |
| | | } |
| | | nav.always .socials { |
| | | width: 100%; |
| | | } |
| | | nav.always .socials li { |
| | | width: 100%; |
| | | } |
| | | nav.always li { |
| | | gap: 0; |
| | | --justify:flex-start; |
| | | } |
| | | nav.always > ul > li > a { |
| | | width: 80%; |
| | | } |
| | | nav.always .submenu { |
| | | width: 80%; |
| | | min-width: 80%; |
| | | box-shadow: none!important; |
| | | border: 2px solid var(--action-0); |
| | | background-color: rgba(var(--contrast-rgb), var(--rgb-subtle)); |
| | | } |
| | | nav.always .submenu li { |
| | | background-color: var(--overlay-light); |
| | | } |
| | | nav.fixed .has-submenu > a, |
| | | nav.always .has-submenu > a { |
| | | width: 80%; |
| | | } |
| | | .has-submenu > button { |
| | | width: 20%; |
| | | } |
| | | /************************************************************** |
| | | BREADCRUMBS |
| | | **************************************************************/ |
| | | nav#breadcrumbs { |
| | | --height: 1.5em; |
| | | --w: 20px; |
| | | width: fit-content; |
| | | max-width: var(--full); |
| | | position: absolute; |
| | | background-color: var(--overlay-medium); |
| | | font-size: var(--small); |
| | | padding: .125em; |
| | | overflow:visible; |
| | | --gap: 0; |
| | | } |
| | | nav#breadcrumbs li + li::before { |
| | | content: '/'; |
| | | color: var(--contrast-200); |
| | | } |
| | | nav#breadcrumbs li:last-of-type { |
| | | margin-right: .5em; |
| | | } |
| | | nav#breadcrumbs span, |
| | | nav#breadcrumbs a { |
| | | padding: 0 .125rem; |
| | | white-space: nowrap; |
| | | height: 2em; |
| | | color: var(--contrast); |
| | | text-transform: none; |
| | | width: max-content; |
| | | } |
| | | nav#breadcrumbs span { |
| | | display: flex; |
| | | align-items: center; |
| | | padding-left: .5em; |
| | | } |
| | | nav#breadcrumbs a:focus:visited, |
| | | nav#breadcrumbs a:hover:visited, |
| | | nav#breadcrumbs a:focus, |
| | | nav#breadcrumbs a:hover { |
| | | background-color: transparent; |
| | | color: var(--action-0); |
| | | } |
| | | nav#breadcrumbs a:has(.icon) { |
| | | width: 2rem; |
| | | } |
| | | /************************************************************** |
| | | MOBILE |
| | | **************************************************************/ |
| | | nav.always { |
| | | z-index: var(--z-above); |
| | | position: fixed; |
| | | width: var(--height); |
| | | bottom: 0; |
| | | right: 0; |
| | | } |
| | | nav.always.open { |
| | | width: 100vw; |
| | | height: 100vh; |
| | | padding-bottom:var(--offHeight); |
| | | background-color: var(--overlay-heavy); |
| | | backdrop-filter: blur(5px); |
| | | justify-content: flex-end; |
| | | flex-direction: column; |
| | | z-index: var(--z-above); |
| | | } |
| | | nav.always > ul { |
| | | --dir: column; |
| | | --wrap: nowrap; |
| | | --justify: flex-start; |
| | | --align: center; |
| | | --gap: 0; |
| | | position: relative; |
| | | right: -300vw; |
| | | padding: 1rem 0 0; |
| | | width: 100vw; |
| | | height: fit-content; |
| | | max-height: 100%; |
| | | overflow:hidden auto; |
| | | transition: right var(--transition-base); |
| | | } |
| | | nav.always.open > ul { |
| | | right: 0; |
| | | transition: right var(--transition-base); |
| | | } |
| | | /*nav.always > ul li:hover,*/ |
| | | /*nav.always > ul li:focus-within,*/ |
| | | /*nav.always > ul li.active {*/ |
| | | /* background-color: var(--overlay-heavy);*/ |
| | | /*}*/ |
| | | nav.always li { |
| | | max-inline-size: none; |
| | | width: 100%; |
| | | height: fit-content; |
| | | --dir: row; |
| | | --wrap: wrap; |
| | | } |
| | | nav.always a { |
| | | --py: 1rem; |
| | | width: 100%; |
| | | min-height: var(--height); |
| | | nav.always .has-submenu > button { |
| | | flex: 0 0 var(--btn); |
| | | } |
| | | |
| | | /* Submenu adjustments */ |
| | | nav.always .submenu { |
| | | position: relative; |
| | | padding-right: 4rem; |
| | | height: max-content; |
| | | top: 0; |
| | | width: 100%; |
| | | border: 2px solid var(--action-0); |
| | | background-color: rgba(var(--contrast-rgb), var(--op-1)); |
| | | } |
| | | |
| | | nav.always .submenu li { |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | } |
| | | |
| | | /* Toggle button */ |
| | | nav.always > button { |
| | | position: fixed; |
| | | bottom: 0; |
| | | right: 0; |
| | | width: var(--height); |
| | | height: var(--height); |
| | | border-radius: 0; |
| | | width: var(--btn); |
| | | height: var(--btn); |
| | | background-color: var(--base); |
| | | color: var(--contrast); |
| | | transition: width var(--timing) var(--function); |
| | | transition-property: width, background-color; |
| | | box-shadow: var(--shadow); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | transition: width var(--trans-base); |
| | | } |
| | | nav.always > button:hover { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | nav.always > button:hover { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | nav.always.open > button { |
| | | --c: var(--action-rgb); |
| | | z-index: 1000000; |
| | | width: 100%; |
| | | background-color: var(--overlay-heavy); |
| | | color: var(--contrast); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | backdrop-filter: blur(5px); |
| | | } |
| | | nav.always.open > button:hover, |
| | | nav.always.open > button:focus { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | nav.always.open > button .icon-list, |
| | | nav.always >button .icon-x { |
| | | transform: scale(0); |
| | | height: 0; |
| | | width: 0; |
| | | position: absolute; |
| | | } |
| | | nav.always > button .icon-list, |
| | | nav.always.open > button .icon-x { |
| | | transform: scale(1); |
| | | height: 32px; |
| | | width: 32px; |
| | | } |
| | | nav.always .has-submenu:hover > .submenu, |
| | | nav.always .has-submenu.open > .submenu { |
| | | height: max-content; |
| | | z-index: 1000000; |
| | | } |
| | | |
| | | nav.always .has-submenu:hover > a, |
| | | nav.always .submenu > li > a:hover, |
| | | nav.always .submenu > li > a:focus { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | /* Icon toggle */ |
| | | nav.always > button .icon-x, |
| | | nav.always.open > button .icon-list { |
| | | display: none; |
| | | } |
| | | |
| | | nav.always > button .icon-list, |
| | | nav.always.open > button .icon-x { |
| | | display: block; |
| | | width: 32px; |
| | | height: 32px; |
| | | } |
| | | |
| | | @media (min-width: 768px) { |
| | | /*nav.always a {*/ |
| | | /* padding: 2rem 0;*/ |
| | | /*}*/ |
| | | nav.always > ul { |
| | | padding: var(--height) 0 0; |
| | | padding-top: var(--btn); |
| | | } |
| | | } |
| | | |
| | | /************************************************************** |
| | | ON THIS PAGE |
| | | VARIANT: BREADCRUMBS (#breadcrumbs) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | nav#breadcrumbs { |
| | | /* Different sizing */ |
| | | height: max-content; |
| | | --wrap: wrap; |
| | | --gap: 0; |
| | | width: max-content; |
| | | max-width: var(--full); |
| | | position: absolute; |
| | | background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | font-size: var(--txt-x-small); |
| | | padding: .125em; |
| | | z-index: var(--z-7); |
| | | } |
| | | #breadcrumbs ol { |
| | | height: max-content; |
| | | } |
| | | #breadcrumbs li { |
| | | width: max-content; |
| | | } |
| | | #breadcrumbs a { |
| | | height: var(--chip); |
| | | } |
| | | |
| | | #breadcrumbs li::after { |
| | | content: '/'; |
| | | color: var(--contrast-200); |
| | | padding: 0 .25rem; |
| | | } |
| | | #breadcrumbs li:last-of-type::after { |
| | | display: none; |
| | | } |
| | | |
| | | #breadcrumbs :is(a, span) { |
| | | padding: 0 .125rem; |
| | | color: var(--contrast); |
| | | text-transform: none; |
| | | } |
| | | |
| | | #breadcrumbs a:focus { |
| | | background-color: transparent; |
| | | color: var(--action-0); |
| | | } |
| | | |
| | | /************************************************************** |
| | | VARIANT: FIXED BOTTOM (nav.fixed.bottom) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | nav.fixed.bottom { |
| | | /* Different positioning */ |
| | | position: fixed; |
| | | bottom: 0; |
| | | left: 0; |
| | | width: calc(100% - var(--btn)); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | z-index: var(--z-9); |
| | | } |
| | | |
| | | nav.fixed.bottom ul { |
| | | --justify: space-between; |
| | | width: 100%; |
| | | background-color: var(--base); |
| | | padding: 0 .25rem; |
| | | } |
| | | |
| | | nav.fixed.bottom li { |
| | | flex: 1; |
| | | justify-content: center; |
| | | } |
| | | |
| | | nav.fixed.bottom a { |
| | | color: var(--contrast); |
| | | font-size: var(--txt-x-small); |
| | | } |
| | | |
| | | @media (min-width: 768px) { |
| | | nav.fixed.bottom a { |
| | | font-size: var(--txt-medium); |
| | | } |
| | | } |
| | | |
| | | /************************************************************** |
| | | VARIANT: ON THIS PAGE (nav.on-this-page) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | nav.on-this-page { |
| | | --justify: space-between; |
| | | position: fixed; |
| | | bottom: 0; |
| | | left: 0; |
| | | width: calc(100% - var(--btn)); |
| | | max-width: none; |
| | | z-index: var(--z-6); |
| | | margin: 0; |
| | | padding: 0 .5rem; |
| | | background-color: var(--overlay-medium); |
| | | background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | color: var(--base-200); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | z-index: var(--z-6); |
| | | } |
| | | |
| | | body:has(nav.fixed) nav.on-this-page { |
| | | bottom: var(--offHeight); |
| | | bottom: var(--btn_); |
| | | } |
| | | |
| | | .on-this-page ul { |
| | | --justify: flex-start; |
| | | gap: 0; |
| | | width: 100%; |
| | | } |
| | | .on-this-page li:not(.has) { |
| | | padding: 0; |
| | | } |
| | | nav.letters li { |
| | | width: 100%; |
| | | max-width: calc(7.69% - 2px); |
| | | } |
| | | |
| | | .on-this-page .active a { |
| | | --c: var(--action-rgb); |
| | | background-color: var(--overlay-heavy); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | /************************************************************** |
| | | VARIANT: LETTERS (nav.letters) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | nav.letters li { |
| | | flex: 1; |
| | | max-width: calc(7.69% - 2px); /*Fit 26 letters over 2 rows) */ |
| | | } |
| | | |
| | | @media (min-width: 768px) { |
| | | nav.letters li { |
| | | flex: 0 1 auto; |
| | | max-width: none; |
| | | width: fit-content; |
| | | } |
| | | nav.letters a, |
| | | nav.letters li:not(.has) { |
| | | |
| | | nav.letters a { |
| | | padding: .25rem .66rem; |
| | | } |
| | | } |
| | | |
| | | /************************************************************** |
| | | Table of Contents TOC |
| | | VARIANT: INDEX/TOC (nav.index) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | nav.index { |
| | | --justify: flex-start; |
| | | --px: 0; |
| | | background-color: var(--overlay-heavy); |
| | | --padding: 0; |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | } |
| | | |
| | | .index ul { |
| | | --justify: flex-start; |
| | | width: fit-content; |
| | | width: max-content; |
| | | } |
| | | |
| | | .index li { |
| | | flex-shrink: 0; |
| | | transform: scaleX(0); |
| | | transform-origin: right; |
| | | max-width: 0; |
| | | overflow: hidden; |
| | | transition: transform var(--timing) var(--function); |
| | | transition: transform var(--trans-base); |
| | | } |
| | | .index li.active { |
| | | |
| | | .index li.active, |
| | | .index li.adj { |
| | | transform: scaleX(1); |
| | | transform-origin: left; |
| | | width: 100%; |
| | | flex-shrink: 1; |
| | | max-width: fit-content; |
| | | } |
| | | @media (min-width: 768px ){ |
| | | |
| | | @media (max-width: 767px) { |
| | | .index li.adj { |
| | | transform: scaleX(1); |
| | | transform-origin: left; |
| | | width: 100%; |
| | | flex-shrink: 1; |
| | | max-width: fit-content; |
| | | transform: scaleX(0); |
| | | max-width: 0; |
| | | } |
| | | } |
| | | |
| | | .index a { |
| | | border-bottom: 4px solid transparent; |
| | | } |
| | | |
| | | .index .active a { |
| | | border-color: var(--action-0); |
| | | color: var(--contrast); |
| | | } |
| | | .index a:hover, |
| | | .index .active a:hover { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | .index label { |
| | | display: flex; |
| | | color: var(--contrast); |
| | | align-items: center; |
| | | margin: 0; |
| | | } |
| | | .index label button { |
| | | margin-left: 1em; |
| | | } |
| | | |
| | | /* Index open state */ |
| | | .index.open { |
| | | --dir: column-reverse; |
| | | height: calc(100% - 8rem); |
| | | z-index: var(--z-above); |
| | | height: var(--maxHeight); |
| | | width: 100%; |
| | | background-color: var(--overlay-heavy); |
| | | backdrop-filter: blur(5px); |
| | | align-items: flex-end; |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | backdrop-filter: blur(5px); |
| | | z-index: var(--z-10); |
| | | } |
| | | .index.open label { |
| | | max-width: 90%; |
| | | margin-top: 1rem; |
| | | margin-right: 2rem; |
| | | } |
| | | .index.open .toggle .icon { |
| | | transform: rotate(45deg); |
| | | } |
| | | |
| | | .index.open ul { |
| | | --dir: column; |
| | | --justify: flex-end; |
| | | height: 100%; |
| | | max-width: 100%; |
| | | width: 100%; |
| | | } |
| | | |
| | | .index.open li { |
| | | background-color: transparent; |
| | | max-width: 100%!important; |
| | | width: 100%; |
| | | height: var(--height); |
| | | height: var(--btn); |
| | | max-width: 100%!important; |
| | | transform: scaleX(1); |
| | | flex-shrink: 1; |
| | | overflow: visible; |
| | | } |
| | | |
| | | .index.open a { |
| | | --justify: flex-end; |
| | | background-color: transparent; |
| | | justify-content: flex-end; |
| | | padding: 0 2rem 0 0; |
| | | background-color: transparent; |
| | | } |
| | | |
| | | /************************************************************** |
| | | CONDENSED |
| | | VARIANT: CONDENSED (nav.condensed) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | .condensed { |
| | | --dir: row; |
| | | nav.condensed { |
| | | height: max-content; |
| | | --wrap: wrap; |
| | | --height: 1.2em; |
| | | --py: .25rem; |
| | | --px:.25rem; |
| | | height: fit-content; |
| | | --gap: 0 .25rem; |
| | | } |
| | | .condensed > ul { |
| | | --wrap: wrap; |
| | | height: fit-content |
| | | } |
| | | .condensed ul { |
| | | |
| | | nav.condensed ul { |
| | | min-height: var(--chip_); |
| | | height: max-content; |
| | | --justify: center; |
| | | --gap: 0; |
| | | --wrap: wrap; |
| | | } |
| | | .condensed li { |
| | | width: fit-content; |
| | | width: max-content; |
| | | min-height: var(--chip); |
| | | } |
| | | .condensed li + li::before { |
| | | content: '·'; |
| | | display: block; |
| | | padding: 0 .25em; |
| | | } |
| | | nav.condensed a { |
| | | |
| | | .condensed a { |
| | | height: max-content; |
| | | min-height: var(--chip); |
| | | font-size:var(--txt-x-small); |
| | | padding: 0 .25rem; |
| | | text-transform: none; |
| | | white-space: nowrap; |
| | | border-bottom: 2px solid transparent; |
| | | } |
| | | .condensed a:hover, |
| | | .condensed a:focus, |
| | | .condensed a:hover:visited, |
| | | .condensed a:focus:visited { |
| | | |
| | | .condensed a:focus { |
| | | border-color: var(--action-0); |
| | | } |
| | | |
| | | /************************************************************** |
| | | ADDITIONAL HEADER STUFF |
| | | VARIANT: SOCIALS (ul.socials) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | .dashboard-nav { |
| | | ul.socials { |
| | | --dir: row; |
| | | height: max-content; |
| | | --gap: .5rem; |
| | | --justify: stretch; |
| | | --wrap:nowrap; |
| | | overflow: auto hidden; |
| | | touch-action: pan-x; |
| | | } |
| | | .always ul.socials, |
| | | .always ul.socials li, |
| | | .always ul.socials a { |
| | | width: 100%; |
| | | --dir: row; |
| | | --justify: flex-start; |
| | | } |
| | | |
| | | ul.socials a { |
| | | padding: .5rem; |
| | | max-width: none; |
| | | } |
| | | |
| | | ul.socials .icon { |
| | | margin: 0; |
| | | } |
| | | |
| | | /************************************************************** |
| | | VARIANT: TABS (nav.tabs) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | nav.tabs { |
| | | position: fixed; |
| | | bottom: var(--btn); |
| | | left: var(--btnbtn); |
| | | right: var(--btnbtn); |
| | | padding-bottom: 2px; |
| | | z-index: var(--z-6); |
| | | touch-action: pan-x pan-y; |
| | | --wrap:nowrap; |
| | | overflow: auto hidden; |
| | | } |
| | | nav.tabs button { |
| | | aspect-ratio: unset; |
| | | } |
| | | nav.tabs button.active { |
| | | cursor: default; |
| | | } |
| | | nav.tabs button.active:hover { |
| | | background-color: var(--base-100); |
| | | color: var(--contrast); |
| | | } |
| | | nav.tabs button h2 { |
| | | --wrap: nowrap; |
| | | margin: 0; |
| | | font-size: var(--txt-x-small); |
| | | } |
| | | body > header, |
| | | .wp-site-blocks > header { |
| | | --dir: row; |
| | | position: sticky; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | height: var(--height); |
| | | width: 100vw; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 0 .5rem; |
| | | .tab-content nav.tabs button { |
| | | height: var(--chip_); |
| | | padding: .25rem .75rem; |
| | | min-height: 0; |
| | | } |
| | | .tab-content.active { |
| | | padding: 1rem 0; |
| | | } |
| | | .tab-content h2 { |
| | | margin: 0 0 .5rem; |
| | | } |
| | | .tab-content nav.tabs { |
| | | height: max-content; |
| | | background-color: var(--base); |
| | | z-index: var(--zz-top); |
| | | box-shadow: var(--shadow); |
| | | border-bottom: 1px solid var(--action-0); |
| | | --gap: 0; |
| | | } |
| | | .wp-site-blocks > header img { |
| | | width: var(--height); |
| | | .tab-content .tab-content nav.tabs { |
| | | background-color: var(--base-100); |
| | | } |
| | | .tab-content .tab-content .tab-content nav.tabs { |
| | | background-color: var(--base-200); |
| | | } |
| | | .tab-content nav.tabs button.active h2 { |
| | | color: var(--action-0); |
| | | } |
| | | |
| | | body > header { |
| | | justify-content: space-between; |
| | | } |
| | | /** MOVE TO NORTHEH **/ |
| | | /*header a[rel=home],*/ |
| | | /*header > img {*/ |
| | | /* position: absolute;*/ |
| | | /* width: var(--offHeight);*/ |
| | | /* left: calc(50% - (var(--offHeight) / 2));*/ |
| | | /*}*/ |
| | | header .title { |
| | | --w: 5em; |
| | | margin: 0; |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | max-inline-size: none; |
| | | } |
| | | .current-hours { |
| | | position: sticky; |
| | | top: var(--height); |
| | | bottom: unset; |
| | | width: unset; |
| | | z-index: 100; |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | box-shadow: var(--shadow); |
| | | padding: .25rem 1rem; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | .current-hours p { |
| | | margin: 0; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | flex: 1; |
| | | } |
| | | .current-hours p + p { |
| | | justify-content: flex-end; |
| | | } |
| | | .current-hours a { |
| | | color: var(--action-contrast); |
| | | } |
| | | .current-hours a:hover { |
| | | color: var(--action-200); |
| | | } |
| | | .current-hours b { |
| | | margin-right: .25rem; |
| | | } |
| | | .find-us { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 0 .5rem; |
| | | } |
| | | .find-us p { |
| | | |
| | | } |
| | | .find-us a { |
| | | display: flex; |
| | | padding: .25rem 1rem; |
| | | border: 1px solid var(--action-contrast); |
| | | border-radius: var(--innerRadius); |
| | | } |
| | | .find-us a:hover { |
| | | background-color: var(--base); |
| | | color: var(--contrast); |
| | | border-color: var(--contrast); |
| | | } |
| | | nav.menu { |
| | | --justify: flex-start; |
| | | } |
| | | /************************************************************** |
| | | VARIANT: MENU (nav.menu) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | nav.menu a { |
| | | padding: .5rem .66rem; |
| | | } |
| | | |
| | | /************* |
| | | TABS |
| | | *************/ |
| | | nav.tabs { |
| | | --gap: 0; |
| | | --wrap: nowrap; |
| | | padding-bottom: 2px; |
| | | z-index: var(--z-6); |
| | | position: fixed; |
| | | bottom: var(--height); |
| | | left: var(--doubleHeight); |
| | | right: var(--doubleHeight); |
| | | /************************************************************** |
| | | VARIANT: SHARE (nav.share) |
| | | Only define what makes it different |
| | | **************************************************************/ |
| | | nav.share { |
| | | height: max-content; |
| | | margin: 1rem 0; |
| | | } |
| | | /*@media (min-width: 768px) {*/ |
| | | /* nav.tabs {*/ |
| | | /* --wrap: wrap;*/ |
| | | /* overflow: hidden;*/ |
| | | /* }*/ |
| | | |
| | | nav.share ul { |
| | | overflow: visible; |
| | | } |
| | | |
| | | nav.share h4 { |
| | | display: inline-block; |
| | | width: max-content; |
| | | margin: .25rem .5rem .25rem 0; |
| | | font-size: var(--txt-x-small); |
| | | } |
| | | |
| | | /************************************************************** |
| | | HEADER ELEMENTS |
| | | **************************************************************/ |
| | | :where(body > header, .wp-site-blocks > header) { |
| | | --dir: row; |
| | | --justify: space-between; |
| | | position: sticky; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | height: var(--btn); |
| | | width: 100vw; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 .5rem; |
| | | background-color: var(--base); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | z-index: var(--z-9); |
| | | } |
| | | |
| | | .wp-site-blocks > header img { |
| | | width: var(--btn); |
| | | } |
| | | |
| | | /************************************************************** |
| | | CURRENT HOURS BANNER |
| | | **************************************************************/ |
| | | /*.current-hours {*/ |
| | | /* position: sticky;*/ |
| | | /* top: var(--nav-height);*/ |
| | | /* padding: .25rem 1rem;*/ |
| | | /* background-color: var(--action-0);*/ |
| | | /* color: var(--action-contrast);*/ |
| | | /* box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);*/ |
| | | /* display: flex;*/ |
| | | /* justify-content: space-between;*/ |
| | | /* z-index: 100;*/ |
| | | /*}*/ |
| | | |
| | | /*.current-hours p {*/ |
| | | /* margin: 0;*/ |
| | | /* display: flex;*/ |
| | | /* flex-wrap: wrap;*/ |
| | | /* flex: 1;*/ |
| | | /*}*/ |
| | | |
| | | /*.current-hours p + p {*/ |
| | | /* justify-content: flex-end;*/ |
| | | /*}*/ |
| | | |
| | | /*.current-hours a {*/ |
| | | /* color: var(--action-contrast);*/ |
| | | /*}*/ |
| | | |
| | | /*.current-hours b {*/ |
| | | /* margin-right: .25rem;*/ |
| | | /*}*/ |
| | | |
| | | /************************************************************** |
| | | FIND US BUTTONS |
| | | **************************************************************/ |
| | | /*.find-us {*/ |
| | | /* display: flex;*/ |
| | | /* align-items: center;*/ |
| | | /* gap: 0 .5rem;*/ |
| | | /*}*/ |
| | | |
| | | /*.find-us a {*/ |
| | | /* padding: .25rem 1rem;*/ |
| | | /* border: 1px solid var(--action-contrast);*/ |
| | | /* border-radius: var(--radius);*/ |
| | | /*}*/ |
| | | |
| | | /************************************************************** |
| | | UTILITIES |
| | | **************************************************************/ |
| | | |
| | | /* Hide navigation when empty */ |
| | | nav.term-navigation:has(*[hidden]) { |
| | | display: none; |
| | | } |
| | | ul.socials a { |
| | | padding: .5rem; |
| | | |
| | | /* Dashboard nav */ |
| | | .dashboard-nav { |
| | | --justify: flex-start; |
| | | width: 100%; |
| | | } |
| | | ul.socials a .icon { |
| | | margin: 0; |
| | | |
| | | nav.filters { |
| | | --dir: row; |
| | | --justify: flex-start; |
| | | overflow: auto hidden; |
| | | } |
| | | nav.filters .filter { |
| | | width: auto; |
| | | padding: .25rem .75rem; |
| | | } |
| | |
| | | @media (max-width:768px){ |
| | | .mobile .nav.toggle { |
| | | display: block; |
| | | position: fixed; |
| | | right: 0; |
| | | bottom: 2rem; |
| | | z-index: 50; |
| | | height: 3rem; |
| | | width: 3rem; |
| | | border-radius: 3rem; |
| | | background-color: var(--gray); |
| | | padding: 0.25rem; |
| | | transition: all var(--timing) var(--duration); |
| | | /********************************************************** |
| | | BASE NAV STYLES |
| | | **********************************************************/ |
| | | nav { |
| | | --py: .25rem; |
| | | --px: 1rem; |
| | | max-width: 100%; |
| | | font-family: var(--heading); |
| | | } |
| | | nav, |
| | | nav ol, |
| | | nav ul, |
| | | nav li, |
| | | nav a { |
| | | height: var(--btn); |
| | | display: flex; |
| | | justify-content: var(--justify); |
| | | align-items: var(--align); |
| | | gap: var(--gap); |
| | | flex-wrap: var(--wrap); |
| | | flex-direction: var(--dir); |
| | | } |
| | | |
| | | ul.socials { |
| | | --w: 1.2em; |
| | | --height: fit-content; |
| | | gap: .5rem; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | flex-wrap: nowrap; |
| | | flex-direction: row; |
| | | overflow: auto hidden; |
| | | touch-action: pan-x; |
| | | list-style: none; |
| | | } |
| | | nav:not(:has(> ul)), |
| | | nav > ul { |
| | | --justify: flex-start; |
| | | --align: center; |
| | | --wrap: nowrap; |
| | | --w: 1em; |
| | | --dir: row; |
| | | position: relative; |
| | | overflow: auto hidden; |
| | | touch-action: pan-x; |
| | | } |
| | | |
| | | nav a { |
| | | padding: 0 var(--px); |
| | | white-space: nowrap; |
| | | text-transform: uppercase; |
| | | } |
| | | nav .current a, |
| | | nav a.current, |
| | | nav a:hover, |
| | | nav a:focus, |
| | | nav a:hover:visited, |
| | | nav a:focus:visited { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | transition: background-color var(--trans-base), |
| | | color var(--trans-base); |
| | | } |
| | | |
| | | nav ol, |
| | | nav ul { |
| | | list-style: none; |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | |
| | | /************************************************************** |
| | | SUBMENU |
| | | **************************************************************/ |
| | | .has-submenu button:hover, |
| | | nav a:hover { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | .has-submenu button { |
| | | height: var(--btn); |
| | | width: var(--btn); |
| | | padding: 0; |
| | | /*background-color: var(--base);*/ |
| | | border: 2px solid var(--base); |
| | | color: var(--contrast); |
| | | border-radius: 0; |
| | | } |
| | | |
| | | .toggle .icon { |
| | | transform: rotate(0deg); |
| | | transition: transform var(--trans-t) var(--trans-fn); |
| | | transition-property: transform, background-color, color; |
| | | } |
| | | .has-submenu.open > button:not(.notifications, .quick-help) .icon, |
| | | .has-submenu:hover > button:not(.notifications, .quick-help) .icon { |
| | | transform: rotate(900deg); |
| | | } |
| | | |
| | | ul.submenu { |
| | | --dir: column; |
| | | --wrap: nowrap; |
| | | --gap: 0; |
| | | position: absolute; |
| | | top: 100%; |
| | | left: 0; |
| | | max-height: 0; |
| | | transform: scaleY(0); |
| | | transform-origin: top; |
| | | width: max-content; |
| | | min-width: 100%; |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | border: 2px solid rgba(var(--base-rgb),var(--op-3)); |
| | | transition: all var(--trans-t) var(--trans-fn); |
| | | box-shadow: var(--shdw-none); |
| | | } |
| | | |
| | | .always ul.submenu { |
| | | position: relative; |
| | | top: 0; |
| | | left: 0; |
| | | } |
| | | |
| | | .submenu li { |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | border: 1px solid var(--base-50); |
| | | } |
| | | .submenu li:hover { |
| | | --c: var(--action-rgb); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | } |
| | | .submenu a:hover { |
| | | background-color: transparent; |
| | | } |
| | | .wp-site-blocks > header ul.submenu { |
| | | right: 0; |
| | | left: auto; |
| | | } |
| | | |
| | | /** |
| | | Opening Submenus |
| | | */ |
| | | .has-submenu.open > ul.submenu, |
| | | .has-submenu:hover > ul.submenu { |
| | | transform: scaleY(1); |
| | | max-height: 1000%; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | } |
| | | /************************************************************** |
| | | FIXED |
| | | **************************************************************/ |
| | | nav.on-this-page, |
| | | nav.fixed.bottom { |
| | | --dir: row; |
| | | --gap: 0; |
| | | width: calc(100% - var(--btn)); |
| | | left: 0; |
| | | bottom: 0; |
| | | position: fixed; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | z-index: var(--z-9); |
| | | } |
| | | nav.fixed.bottom ul { |
| | | width: 100%; |
| | | --justify: space-between; |
| | | background-color: var(--base); |
| | | padding: 0 .25rem; |
| | | } |
| | | nav.fixed li, |
| | | nav.fixed a { |
| | | --justify: center; |
| | | width: 100%; |
| | | } |
| | | |
| | | nav.fixed.bottom a:visited, |
| | | nav.fixed.bottom a { |
| | | color: var(--contrast); |
| | | font-size: var(--txt-small); |
| | | padding: 0; |
| | | } |
| | | @media (min-width:768px) { |
| | | nav.fixed.bottom a:visited, |
| | | nav.fixed.bottom a { |
| | | font-size: var(--txt-medium); |
| | | } |
| | | .mobile .nav.toggle:hover { |
| | | box-shadow: var(--legacy-shadow-inset); |
| | | } |
| | | nav.fixed.bottom a:hover, |
| | | nav.fixed.bottom a:hover:visited, |
| | | nav.fixed.bottom a:focus, |
| | | nav.fixed.bottom a:focus:visited { |
| | | color: var(--action-contrast); |
| | | } |
| | | .fixed.bottom li { |
| | | flex: 1; |
| | | } |
| | | |
| | | nav.always a { |
| | | padding: 0; |
| | | --justify: center; |
| | | } |
| | | nav.always .socials { |
| | | width: 100%; |
| | | } |
| | | nav.always .socials li { |
| | | width: 100%; |
| | | } |
| | | nav.always li { |
| | | gap: 0; |
| | | --justify:flex-start; |
| | | background-color: rgba(var(--base-rgb), var(--op-6)); |
| | | } |
| | | nav.always > ul > li > a { |
| | | width: 80%; |
| | | } |
| | | nav.always .submenu { |
| | | width: 80%; |
| | | min-width: 80%; |
| | | box-shadow: none!important; |
| | | border: 2px solid var(--action-0); |
| | | background-color: rgba(var(--contrast-rgb), var(--op-1)); |
| | | } |
| | | nav.always .submenu li { |
| | | background-color: rgba(var(--base-rgb),var(--op-3)); |
| | | } |
| | | nav.fixed .has-submenu > a, |
| | | nav.always .has-submenu > a { |
| | | width: 80%; |
| | | } |
| | | .has-submenu > button { |
| | | width: 20%; |
| | | } |
| | | /************************************************************** |
| | | BREADCRUMBS |
| | | **************************************************************/ |
| | | nav#breadcrumbs { |
| | | --height: 1.5em; |
| | | --w: 20px; |
| | | width: fit-content; |
| | | min-height: var(--btn); |
| | | max-width: var(--full); |
| | | position: absolute; |
| | | background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | font-size: var(--txt-small); |
| | | padding: .125em; |
| | | overflow:visible; |
| | | --gap: 0; |
| | | height: max-content; |
| | | z-index: var(--z-7); |
| | | } |
| | | #breadcrumbs ol { |
| | | --wrap: wrap; |
| | | } |
| | | #breadcrumbs ol, |
| | | #breadcrumbs li, |
| | | #breadcrumbs a, |
| | | #breadcrumbs span { |
| | | height: max-content!important; |
| | | } |
| | | nav#breadcrumbs li + li::before { |
| | | content: '/'; |
| | | color: var(--contrast-200); |
| | | } |
| | | nav#breadcrumbs li:last-of-type { |
| | | margin-right: .5em; |
| | | } |
| | | nav#breadcrumbs span, |
| | | nav#breadcrumbs a { |
| | | padding: 0 .125rem; |
| | | white-space: nowrap; |
| | | height: 2em; |
| | | color: var(--contrast); |
| | | text-transform: none; |
| | | width: max-content; |
| | | } |
| | | nav#breadcrumbs span { |
| | | display: flex; |
| | | align-items: center; |
| | | padding-left: .5em; |
| | | } |
| | | nav#breadcrumbs a:focus:visited, |
| | | nav#breadcrumbs a:hover:visited, |
| | | nav#breadcrumbs a:focus, |
| | | nav#breadcrumbs a:hover { |
| | | background-color: transparent; |
| | | color: var(--action-0); |
| | | } |
| | | nav#breadcrumbs a:has(.icon) { |
| | | width: 2rem; |
| | | } |
| | | /************************************************************** |
| | | MOBILE |
| | | **************************************************************/ |
| | | nav.always { |
| | | z-index: var(--z-10); |
| | | position: fixed; |
| | | width: var(--btn); |
| | | bottom: 0; |
| | | right: 0; |
| | | } |
| | | nav.always.open { |
| | | width: 100vw; |
| | | height: 100vh; |
| | | padding-bottom:var(--btn_); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | backdrop-filter: blur(5px); |
| | | justify-content: flex-end; |
| | | flex-direction: column; |
| | | z-index: var(--z-10); |
| | | } |
| | | nav.always > ul { |
| | | --dir: column; |
| | | --wrap: nowrap; |
| | | --justify: flex-start; |
| | | --align: center; |
| | | --gap: 0; |
| | | position: relative; |
| | | right: -300vw; |
| | | padding: 1rem 0 0; |
| | | width: 100vw; |
| | | height: fit-content; |
| | | max-height: 100%; |
| | | overflow:hidden auto; |
| | | transition: right var(--trans-base); |
| | | } |
| | | nav.always.open > ul { |
| | | right: 0; |
| | | transition: right var(--trans-base); |
| | | } |
| | | /*nav.always > ul li:hover,*/ |
| | | /*nav.always > ul li:focus-within,*/ |
| | | /*nav.always > ul li.active {*/ |
| | | /* background-color: rgba(var(--base-rgb),var(--op-6));*/ |
| | | /*}*/ |
| | | nav.always li { |
| | | max-inline-size: none; |
| | | width: 100%; |
| | | height: fit-content; |
| | | --dir: row; |
| | | --wrap: wrap; |
| | | } |
| | | nav.always a { |
| | | --py: 1rem; |
| | | width: 100%; |
| | | min-height: var(--btn); |
| | | } |
| | | |
| | | nav.always > button { |
| | | position: fixed; |
| | | bottom: 0; |
| | | right: 0; |
| | | width: var(--btn); |
| | | height: var(--btn); |
| | | border-radius: 0; |
| | | background-color: var(--base); |
| | | color: var(--contrast); |
| | | transition: width var(--trans-t) var(--trans-fn); |
| | | transition-property: width, background-color; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | } |
| | | nav.always > button:hover { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | nav.always.open > button { |
| | | --c: var(--action-rgb); |
| | | z-index: 1000000; |
| | | width: 100%; |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | color: var(--contrast); |
| | | backdrop-filter: blur(5px); |
| | | } |
| | | nav.always.open > button:hover, |
| | | nav.always.open > button:focus { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | nav.always.open > button .icon-list, |
| | | nav.always >button .icon-x { |
| | | transform: scale(0); |
| | | height: 0; |
| | | width: 0; |
| | | position: absolute; |
| | | } |
| | | nav.always > button .icon-list, |
| | | nav.always.open > button .icon-x { |
| | | transform: scale(1); |
| | | height: 32px; |
| | | width: 32px; |
| | | } |
| | | nav.always .has-submenu:hover > .submenu, |
| | | nav.always .has-submenu.open > .submenu { |
| | | height: max-content; |
| | | } |
| | | |
| | | nav.always .has-submenu:hover > a, |
| | | nav.always .submenu > li > a:hover, |
| | | nav.always .submenu > li > a:focus { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | @media (min-width: 768px) { |
| | | /*nav.always a {*/ |
| | | /* padding: 2rem 0;*/ |
| | | /*}*/ |
| | | nav.always > ul { |
| | | padding: var(--btn) 0 0; |
| | | } |
| | | nav.mobile li:hover > a { |
| | | color: var(--white); |
| | | } |
| | | /************************************************************** |
| | | ON THIS PAGE |
| | | **************************************************************/ |
| | | nav.on-this-page { |
| | | --justify: space-between; |
| | | max-width: none; |
| | | z-index: var(--z-6); |
| | | margin: 0; |
| | | padding: 0 .5rem; |
| | | background-color: rgba(var(--base-rgb),var(--op-4)); |
| | | color: var(--base-200); |
| | | } |
| | | body:has(nav.fixed) nav.on-this-page { |
| | | bottom: var(--btn_); |
| | | } |
| | | .on-this-page ul { |
| | | --justify: flex-start; |
| | | gap: 0; |
| | | width: 100%; |
| | | } |
| | | .on-this-page li:not(.has) { |
| | | padding: 0; |
| | | } |
| | | nav.letters li { |
| | | width: 100%; |
| | | max-width: calc(7.69% - 2px); |
| | | } |
| | | .on-this-page .active a { |
| | | --c: var(--action-rgb); |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | color: var(--action-contrast); |
| | | } |
| | | |
| | | @media (min-width: 768px) { |
| | | nav.letters li { |
| | | max-width: none; |
| | | width: fit-content; |
| | | } |
| | | nav.mobile .opened > a, |
| | | nav.mobile li.opened:hover > a, |
| | | nav.mobile a:hover, |
| | | nav.mobile li:hover a:hover { |
| | | background-color: var(--pink); |
| | | color: var(--black); |
| | | nav.letters a, |
| | | nav.letters li:not(.has) { |
| | | padding: .25rem .66rem; |
| | | } |
| | | nav.mobile a { |
| | | width: 75%; |
| | | padding: 2rem; |
| | | font-size: 1.1rem; |
| | | text-align: center; |
| | | border-radius: 0; |
| | | } |
| | | nav.mobile .submenu a { |
| | | padding: 1.75rem; |
| | | width: 100%; |
| | | } |
| | | nav.mobile > ul { |
| | | position: fixed; |
| | | background: rgb(10,10,10); |
| | | width: 100vw; |
| | | height: 100vh; |
| | | transform-origin: right; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | | flex-wrap: nowrap; |
| | | transform: scaleX(0); |
| | | visibility: hidden; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | overflow-y: scroll; |
| | | transition: transform var(--timing) var(--duration); |
| | | } |
| | | nav.mobile.open > ul { |
| | | } |
| | | /************************************************************** |
| | | Table of Contents TOC |
| | | **************************************************************/ |
| | | nav.index { |
| | | --justify: flex-start; |
| | | --px: 0; |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | } |
| | | .index ul { |
| | | --justify: flex-start; |
| | | width: fit-content; |
| | | } |
| | | .index li { |
| | | flex-shrink: 0; |
| | | transform: scaleX(0); |
| | | transform-origin: right; |
| | | max-width: 0; |
| | | overflow: hidden; |
| | | transition: transform var(--trans-t) var(--trans-fn); |
| | | } |
| | | .index li.active { |
| | | transform: scaleX(1); |
| | | transform-origin: left; |
| | | width: 100%; |
| | | flex-shrink: 1; |
| | | max-width: fit-content; |
| | | } |
| | | @media (min-width: 768px ){ |
| | | .index li.adj { |
| | | transform: scaleX(1); |
| | | visibility: visible; |
| | | transition: transform var(--timing) var(--duration); |
| | | } |
| | | nav.mobile > ul > li { |
| | | transform-origin: left; |
| | | width: 100%; |
| | | flex-wrap: wrap; |
| | | flex-shrink: 1; |
| | | max-width: fit-content; |
| | | } |
| | | nav.mobile > ul > li:hover { |
| | | background-color: transparent; |
| | | } |
| | | nav.mobile > ul > li + li { |
| | | margin: 0; |
| | | } |
| | | } |
| | | .index a { |
| | | border-bottom: 4px solid transparent; |
| | | } |
| | | .index .active a { |
| | | border-color: var(--action-0); |
| | | color: var(--contrast); |
| | | } |
| | | .index a:hover, |
| | | .index .active a:hover { |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | } |
| | | .index label { |
| | | display: flex; |
| | | color: var(--contrast); |
| | | align-items: center; |
| | | margin: 0; |
| | | } |
| | | .index label button { |
| | | margin-left: 1em; |
| | | } |
| | | |
| | | nav.mobile > ul > li:hover .submenu-toggle svg { |
| | | transform: rotate(180deg); |
| | | color: var(--white); |
| | | } |
| | | nav.mobile > ul > li.opened:hover .submenu-toggle svg { |
| | | transform: rotate(0); |
| | | } |
| | | nav.mobile > ul > li .submenu-toggle:hover { |
| | | color: var(--white); |
| | | background-color: var(--pink); |
| | | } |
| | | nav.mobile .submenu-toggle { |
| | | width: 25%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | border: 8px solid rgb(10,10,10); |
| | | background-color: var(--black); |
| | | padding-right: 16px; |
| | | } |
| | | nav.mobile .has-submenu:not(.opened):hover .submenu { |
| | | transform: scaleY(0); |
| | | height: 0; |
| | | } |
| | | nav.mobile .opened .submenu-toggle { |
| | | background-color: var(--pink); |
| | | color: var(--blacker); |
| | | } |
| | | nav.mobile .opened { |
| | | background: var(--blacker); |
| | | } |
| | | .index.open { |
| | | --dir: column-reverse; |
| | | height: calc(100% - 8rem); |
| | | z-index: var(--z-10); |
| | | width: 100%; |
| | | background-color: rgba(var(--base-rgb),var(--op-6)); |
| | | backdrop-filter: blur(5px); |
| | | align-items: flex-end; |
| | | } |
| | | .index.open label { |
| | | max-width: 90%; |
| | | margin-top: 1rem; |
| | | margin-right: 2rem; |
| | | } |
| | | .index.open .toggle .icon { |
| | | transform: rotate(45deg); |
| | | } |
| | | .index.open ul { |
| | | --dir: column; |
| | | --justify: flex-end; |
| | | height: 100%; |
| | | max-width: 100%; |
| | | width: 100%; |
| | | } |
| | | .index.open li { |
| | | background-color: transparent; |
| | | max-width: 100%!important; |
| | | width: 100%; |
| | | height: var(--btn); |
| | | transform: scaleX(1); |
| | | flex-shrink: 1; |
| | | overflow: visible; |
| | | } |
| | | .index.open a { |
| | | --justify: flex-end; |
| | | background-color: transparent; |
| | | padding: 0 2rem 0 0; |
| | | } |
| | | /************************************************************** |
| | | CONDENSED |
| | | **************************************************************/ |
| | | .condensed { |
| | | --dir: row; |
| | | --wrap: wrap; |
| | | --height: 1.2em; |
| | | --py: .25rem; |
| | | --px:.25rem; |
| | | height: fit-content; |
| | | } |
| | | .condensed > ul { |
| | | --wrap: wrap; |
| | | height: fit-content |
| | | } |
| | | .condensed ul { |
| | | --justify: center; |
| | | --gap: 0; |
| | | } |
| | | .condensed li { |
| | | width: fit-content; |
| | | } |
| | | .condensed li + li::before { |
| | | content: '·'; |
| | | display: block; |
| | | padding: 0 .25em; |
| | | } |
| | | nav.condensed a { |
| | | text-transform: none; |
| | | white-space: nowrap; |
| | | border-bottom: 2px solid transparent; |
| | | } |
| | | .condensed a:hover, |
| | | .condensed a:focus, |
| | | .condensed a:hover:visited, |
| | | .condensed a:focus:visited { |
| | | border-color: var(--action-0); |
| | | } |
| | | /************************************************************** |
| | | ADDITIONAL HEADER STUFF |
| | | **************************************************************/ |
| | | .dashboard-nav { |
| | | width: 100%; |
| | | --dir: row; |
| | | --justify: flex-start; |
| | | --wrap: nowrap; |
| | | } |
| | | body > header, |
| | | .wp-site-blocks > header { |
| | | --dir: row; |
| | | position: sticky; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | height: var(--btn); |
| | | width: 100vw; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 0 .5rem; |
| | | background-color: var(--base); |
| | | z-index: var(--z-9); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | border-bottom: 1px solid var(--action-0); |
| | | } |
| | | .wp-site-blocks > header img { |
| | | width: var(--btn); |
| | | } |
| | | |
| | | nav.mobile .submenu { |
| | | position: relative; |
| | | height: 0; |
| | | transform: scaleY(0); |
| | | top: 0; |
| | | width: 75%; |
| | | z-index: 1; |
| | | } |
| | | nav.mobile .has-submenu.opened:hover .submenu, |
| | | nav.mobile .has-submenu.opened .submenu { |
| | | margin-bottom: 8px; |
| | | border: 1px solid var(--pink); |
| | | transform: scaleY(1); |
| | | height: min-content; |
| | | } |
| | | nav.mobile .submenu > li { |
| | | border: 2px solid var(--pitch); |
| | | } |
| | | nav.mobile .submenu > li + li { |
| | | border-top: 4px solid var(--pitch); |
| | | } |
| | | body > header { |
| | | justify-content: space-between; |
| | | } |
| | | /** MOVE TO NORTHEH **/ |
| | | /*header a[rel=home],*/ |
| | | /*header > img {*/ |
| | | /* position: absolute;*/ |
| | | /* width: var(--btn_);*/ |
| | | /* left: calc(50% - (var(--btn_) / 2));*/ |
| | | /*}*/ |
| | | header .title { |
| | | --w: 5em; |
| | | margin: 0; |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | max-inline-size: none; |
| | | } |
| | | .current-hours { |
| | | position: sticky; |
| | | top: var(--btn); |
| | | bottom: unset; |
| | | width: unset; |
| | | z-index: 100; |
| | | background-color: var(--action-0); |
| | | color: var(--action-contrast); |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw); |
| | | padding: .25rem 1rem; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | .current-hours p { |
| | | margin: 0; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | flex: 1; |
| | | } |
| | | .current-hours p + p { |
| | | justify-content: flex-end; |
| | | } |
| | | .current-hours a { |
| | | color: var(--action-contrast); |
| | | } |
| | | .current-hours a:hover { |
| | | color: var(--action-200); |
| | | } |
| | | .current-hours b { |
| | | margin-right: .25rem; |
| | | } |
| | | .find-us { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 0 .5rem; |
| | | } |
| | | .find-us p { |
| | | |
| | | } |
| | | .find-us a { |
| | | display: flex; |
| | | padding: .25rem 1rem; |
| | | border: 1px solid var(--action-contrast); |
| | | border-radius: var(--radius); |
| | | } |
| | | .find-us a:hover { |
| | | background-color: var(--base); |
| | | color: var(--contrast); |
| | | border-color: var(--contrast); |
| | | } |
| | | nav.menu { |
| | | --justify: flex-start; |
| | | } |
| | | nav.menu a { |
| | | padding: .5rem .66rem; |
| | | } |
| | | |
| | | /************* |
| | | TABS |
| | | *************/ |
| | | nav.tabs { |
| | | --gap: 0; |
| | | --wrap: nowrap; |
| | | padding-bottom: 2px; |
| | | z-index: var(--z-6); |
| | | position: fixed; |
| | | bottom: var(--btn); |
| | | left: var(--btnbtn); |
| | | right: var(--btnbtn); |
| | | } |
| | | /*@media (min-width: 768px) {*/ |
| | | /* nav.tabs {*/ |
| | | /* --wrap: wrap;*/ |
| | | /* overflow: hidden;*/ |
| | | /* }*/ |
| | | /*}*/ |
| | | |
| | | nav.term-navigation:has(*[hidden]) { |
| | | display: none; |
| | | } |
| | | ul.socials a { |
| | | padding: .5rem; |
| | | } |
| | | ul.socials a .icon { |
| | | margin: 0; |
| | | } |
| | | |
| | | nav.share { |
| | | height: max-content; |
| | | margin: 1rem 0; |
| | | --align: center; |
| | | } |
| | | nav.share ul { |
| | | overflow: visible; |
| | | } |
| | | nav.share h4 { |
| | | display: inline-block; |
| | | width: max-content; |
| | | margin: .25rem .5rem .25rem 0; |
| | | font-size: var(--txt-small); |
| | | } |
| | | nav.share .icon { |
| | | margin-right: 0; |
| | | } |
| | | nav.share .button { |
| | | position: relative; |
| | | transition: top var(--trans-base), box-shadow var(--trans-base); |
| | | top: 0; |
| | | box-shadow: var(--shdw-none); |
| | | } |
| | | nav.share .button:hover { |
| | | top: -4px; |
| | | box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down); |
| | | } |
| | |
| | | Requires at least: 6.4 |
| | | Tested up to: 6.4 |
| | | Requires PHP: 7.0 |
| | | Version: 1.279 |
| | | Version: 1.5.9 |
| | | License: GNU General Public License v2 or later |
| | | License URI: http://www.gnu.org/licenses/gpl-2.0.html |
| | | Text Domain: jv |
| | | */:root{--narrow:min(500px, 50vw);--maxWidth:min(768px, 65vw);--alignWide:min(1024px, 90vw);--alignMed:min(962px, 82.5vw);--full:100vw;--mr:auto;--ml:auto;--mt:1rem;--mb:1rem;--p-x:1.5rem;--p-y:.5rem;--setMargin:var(--mt) var(--mr) var(--mb) var(--ml);--insetMargin:var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml);--height:4rem;--doubleHeight:8rem;--offHeight:5rem;--maxHeight:calc(100vh - var(--height) - var(--height));--gap:.5rem;--wrap:wrap;--justify:center;--align:center;--dir:row;--w:1.2em;--filter:grayscale(.3) sepia(.4);--dashed:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23151515' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");--dashed-action:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B7332E' stroke-width='1' stroke-dasharray='12%2c18%2c36' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");--font-base:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--heading:'Aleo',var(--font-base);--body:'Josefin Slab',var(--font-base);--hWeight:900;--hlight:400;--bWeight:400;--bBold:700;--bLight:200;--enormous:calc(26vh - 4rem);--xxxlarge:clamp(2.5rem, 1.429rem + 2.857vw, 4rem);--xxlarge:clamp(2rem, 1.286rem + 1.905vw, 3rem);--xlarge:clamp(1.6rem, .957rem + 1.714vw, 2.5rem);--large:clamp(1.3rem, .6rem + 1.867vw, 2rem);--xmedium:clamp(1.4rem, .971rem + 1.143vw, 2rem);--medium:clamp(1.1rem, .993rem + .286vw, 1.25rem);--small:clamp(.95rem, .879rem + .19vw, 1.05rem);--extra-small:clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);--mixBlendMode:darken;--coverBlend:overlay;--coverIndex:2;--light-0:#fafafa;--light-50:#fcfbfb;--light-100:#f1eded;--light-200:#e6dfdf;--dark-0:#201313;--dark-50:#261717;--dark-100:#2d1b1b;--dark-200:#331e1e;--action-0:#B7332E;--action-50:#a32d29;--action-100:#8e2824;--action-200:#7a221f;--secondary-0:#E8A737;--secondary-50:#e59d20;--secondary-100:#d48f18;--secondary-200:#bd7f16;--success:#22C55E;--successBack:#d4edda;--successText:#155724;--warning:#E8A737;--error:#EF4444;--errorBack:#f8d7da;--errorText:#721c24;--action-contrast:var(--light-0);--secondary-contrast:var(--light-0);--light-rgb:250,250,250;--dark-rgb:16,4,4;--action-rgb:183,51,46;--secondary-rgb:232,167,55;--rgba-subtle:rgba(var(--c),.05);--rgba-subtle-hover:rgba(var(--c),.1);--base:var(--light-0);--base-50:var(--light-50);--base-100:var(--light-100);--base-200:var(--light-200);--contrast:var(--dark-0);--contrast-50:var(--dark-50);--contrast-100:var(--dark-100);--contrast-200:var(--dark-200);--c:var(--light-rgb);--base-rgb:var(--light-rgb);--contrast-rgb:var(--dark-rgb);--z-1:5;--z-2:10;--z-3:15;--z-4:20;--z-5:50;--z-6:100;--z-top:999;--z-topper:1000;--zz-top:999999;--z-above:9999999;--rgb-subtle:.05;--rgb-subtle-hover:.15;--rgb-light:.25;--rgb-medium:.66;--rgb-heavy:.85;--overlay-light:rgba(var(--c), .25);--overlay-medium:rgba(var(--c), .66);--overlay-heavy:rgba(var(--c), .85);--shimmer:rgba(var(--dark-rgb),0) 0%,rgba(var(--dark-rgb),.05) 50%,rgba(var(--dark-rgb),0) 100%;--shadow:rgba(var(--dark-rgb),.45) 0px 0px 4px;--shadow-down:rgba(var(--dark-rgb),.45) 0 6px 5px -5px;--shadow-right:rgba(var(--dark-rgb),.45) 6px 0 5px -5px;--shadow-left:rgba(var(--dark-rgb), .45) -6px 0 5px -5px;--shadow-up:rgba(var(--dark-rgb), .45) 0 -6px 5px -5px;--subtle:rgba(var(--dark-rgb), .45) 0px 25px 20px -20px;--subtleRight:rgba(var(--dark-rgb), .45) 10px 0 20px -20px;--shadow-none:transparent 0px 0px 0px;--innerRadius:4px;--outerPadding:1rem;--outerRadius:calc(var(--innerRadius) + var(--outerPadding));--function:cubic-bezier(.47,.24,.07,.47);--timing:.25s;--transition-base:var(--timing) var(--function);--transition-color:background-color var(--transition-base),color var(--transition-base),border var(--transition-base);--transition-transform:transform var(--transition-base);--transition-size:width var(--transition-base),height var(--transition-base),max-width var(--transition-base),max-height var(--transition-base);--sp1:clamp(0.5rem, 0.714vw + 0.321rem, 1rem);--sp2:clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem);--sp3:clamp(1rem, 1.429vw + 0.643rem, 2rem);--sp4:clamp(1.5rem, 2.143vw + 0.964rem, 3rem);--sp5:clamp(2rem, 2.857vw + 1.286rem, 4rem);--sp6:clamp(3rem, 4.286vw + 1.929rem, 6rem);--sp7:clamp(4rem, 5.714vw + 2.571rem, 8rem);--offScreen:-200vw;/*!** Icons **!*/--scrollbar-width:8px;--scrollbar-track-color:var(--base-100);--scrollbar-thumb-color:var(--action-0);--scrollbar-thumb-hover-color:var(--action-50);--scrollbar-thumb-border:2px solid var(--base-50);--scrollbar-border-radius:4px;--can-scroll:0}body:has(#theme-switcher:checked){--action-50:#cb3933;--action-100:#d14c47;--action-200:#d6605c;--secondary-50:#ebb14e;--secondary-100:#edbb65;--secondary-200:#f0c57c;--mixBlendMode:lighten;--coverBlend:multiply;--coverIndex:0;--contrast:var(--light-0);--contrast-50:var(--light-50);--contrast-100:var(--light-100);--contrast-200:var(--light-200);--base:var(--dark-0);--base-50:var(--dark-50);--base-100:var(--dark-100);--base-200:var(--dark-200);--c:var(--dark-rgb);--base-rgb:var(--dark-rgb);--contrast-rgb:var(--light-rgb);--overlay-light:rgba(var(--c), .25);--overlay-medium:rgba(var(--c), .5);--overlay-heavy:rgba(var(--c), .85);--shimmer:rgba(var(--c),0) 0%,rgba(var(--c),.05) 50%,rgba(var(--c),0) 100%;--shadow:rgba(var(--light-rgb),.45) 0px 0px 4px;--shadow-down:rgba(var(--light-rgb),.45) 0 6px 5px -5px;--shadow-right:rgba(var(--light-rgb),.45) 6px 0 5px -5px;--shadow-left:rgba(var(--light-rgb), .45) -6px 0 5px -5px;--shadow-up:rgba(var(--light-rgb), .45) 0 -6px 5px -5px;--subtle:rgba(var(--light-rgb), .45) 0px 25px 20px -20px;--subtleRight:rgba(var(--light-rgb), .45) 10px 0 20px -20px;--successBack:#155724;--successText:#d4edda;--errorBack:#721c24;--errorText:#f8d7da}@layer reset{font:clamp(1rem,1rem + .5vw,2rem)/1.4 system-ui,sans-serif;tab-size:2;hanging-punctuation:first allow-end last;word-break:break-word}body{margin:0}*,::after,::before{box-sizing:border-box}h1,h2{font-weight:900;letter-spacing:-.02rem}h1,h2,h3{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block-start:0}dd,li,p{text-wrap:pretty;max-inline-size:88ch}a{color:oklch(.68 .17 228);text-underline-offset:2px}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}dl,ol,ul{margin:0;padding:0;list-style:inside}iframe,img,video{display:block;max-inline-size:100%;block-size:auto;border-style:none}figure{inline-size:fit-content;margin-inline:auto}figcaption{contain:inline-size;font-size:90%}button,input,select,textarea{font:inherit}label{display:block}input:not(:where([type=submit],[type=checkbox],[type=radio],[type=button],[type=reset])){inline-size:100%}button,input:where([type=submit],[type=reset],[type=button]){background:CanvasText;color:Canvas;border:1px solid transparent}textarea{field-sizing:content;min-block-size:5lh;inline-size:100%;max-inline-size:100%}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,monospace}svg{fill:currentColor}[aria-disabled=true i],[disabled]{cursor:not-allowed}[hidden]{display:none!important}[disabled],label:has(input[disabled]){opacity:.5}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible;margin-block:2.5rem}:target{scroll-margin:3rlh}table{caption-side:bottom;border-collapse:collapse}td,th{word-break:normal;border:1px solid gray;padding:.5rem}caption{font-size:90%}.screen-reader-text:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:focus-visible{outline-offset:2px}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}html{interpolate-size:allow-keywords}}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb-color);border-radius:var(--scrollbar-border-radius);border:var(--scrollbar-thumb-border)}::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover-color)}body{background-color:var(--base-50);color:var(--contrast);max-width:100vw;overflow-x:hidden;margin:0;font-family:var(--body);font-weight:var(--bWeight);font-size:var(--medium);line-height:1.4;position:relative}body b,body strong{font-weight:var(--bBold)}:target{scroll-snap-margin-top:max(6rem,20vh);scroll-margin-top:max(6rem,20vh);outline:double var(--action-0);border-radius:var(--outerRadius);padding:var(--outerPadding)}body.menu_item :target h2{background-color:var(--action-0);color:var(--action-contrast)}body,body *{transition:background-color var(--transition-base);transition-property:background-color,border}.home main,.home>section:first-of-type{margin-top:0}body.loading,body:has(aside.expanded),body:has(dialog[open]),body:has(nav.open){overflow:hidden}.p-1{padding:var(--sp1)}.p-2{padding:var(--sp2)}.p-3{padding:var(--sp3)}.p-4{padding:var(--sp4)}.p-5{padding:var(--sp5)}.p-6{padding:var(--sp6)}.p-7{padding:var(--sp7)}.px-1{padding-left:var(--sp1);padding-right:var(--sp1)}.px-2{padding-left:var(--sp2);padding-right:var(--sp2)}.px-3{padding-left:var(--sp3);padding-right:var(--sp3)}.px-4{padding-left:var(--sp4);padding-right:var(--sp4)}.px-5{padding-left:var(--sp5);padding-right:var(--sp5)}.px-6{padding-left:var(--sp6);padding-right:var(--sp6)}.px-7{padding-left:var(--sp7);padding-right:var(--sp7)}.py-1{padding-top:var(--sp1);padding-bottom:var(--sp1)}.py-2{padding-top:var(--sp2);padding-bottom:var(--sp2)}.py-3{padding-top:var(--sp3);padding-bottom:var(--sp3)}.py-4{padding-top:var(--sp4);padding-bottom:var(--sp4)}.py-5{padding-top:var(--sp5);padding-bottom:var(--sp5)}.py-6{padding-top:var(--sp6);padding-bottom:var(--sp6)}.py-7{padding-top:var(--sp7);padding-bottom:var(--sp7)}.pt-1{padding-top:var(--sp1)}.pr-1{padding-right:var(--sp1)}.pl-1{padding-left:var(--sp1)}.pb-1{padding-bottom:var(--sp1)}.pt-2{padding-top:var(--sp2)}.pr-2{padding-right:var(--sp2)}.pl-2{padding-left:var(--sp2)}.pb-2{padding-bottom:var(--sp2)}.pt-3{padding-top:var(--sp3)}.pr-3{padding-right:var(--sp3)}.pl-3{padding-left:var(--sp3)}.pb-3{padding-bottom:var(--sp3)}.pt-4{padding-top:var(--sp4)}.pr-4{padding-right:var(--sp4)}.pl-4{padding-left:var(--sp4)}.pb-4{padding-bottom:var(--sp4)}.pt-5{padding-top:var(--sp5)}.pr-5{padding-right:var(--sp5)}.pl-5{padding-left:var(--sp5)}.pb-5{padding-bottom:var(--sp5)}.pt-6{padding-top:var(--sp6)}.pr-6{padding-right:var(--sp6)}.pl-6{padding-left:var(--sp6)}.pb-6{padding-bottom:var(--sp6)}.pt-7{padding-top:var(--sp7)}.pr-7{padding-right:var(--sp7)}.pl-7{padding-left:var(--sp7)}.pb-7{padding-bottom:var(--sp7)}.m-1{margin:var(--sp1)}.m-2{margin:var(--sp2)}.m-3{margin:var(--sp3)}.m-4{margin:var(--sp4)}.m-5{margin:var(--sp5)}.m-6{margin:var(--sp6)}.m-7{margin:var(--sp7)}.mx-1{margin-left:var(--sp1);margin-right:var(--sp1)}.mx-2{margin-left:var(--sp2);margin-right:var(--sp2)}.mx-3{margin-left:var(--sp3);margin-right:var(--sp3)}.mx-4{margin-left:var(--sp4);margin-right:var(--sp4)}.mx-5{margin-left:var(--sp5);margin-right:var(--sp5)}.mx-6{margin-left:var(--sp6);margin-right:var(--sp6)}.mx-7{margin-left:var(--sp7);margin-right:var(--sp7)}.my-1{margin-top:var(--sp1);margin-bottom:var(--sp1)}.my-2{margin-top:var(--sp2);margin-bottom:var(--sp2)}.my-3{margin-top:var(--sp3);margin-bottom:var(--sp3)}.my-4{margin-top:var(--sp4);margin-bottom:var(--sp4)}.my-5{margin-top:var(--sp5);margin-bottom:var(--sp5)}.my-6{margin-top:var(--sp6);margin-bottom:var(--sp6)}.my-7{margin-top:var(--sp7);margin-bottom:var(--sp7)}.mt-1{margin-top:var(--sp1)}.mr-1{margin-right:var(--sp1)}.ml-1{margin-left:var(--sp1)}.mb-1{margin-bottom:var(--sp1)}.mt-2{margin-top:var(--sp2)}.mr-2{margin-right:var(--sp2)}.ml-2{margin-left:var(--sp2)}.mb-2{margin-bottom:var(--sp2)}.mt-3{margin-top:var(--sp3)}.mr-3{margin-right:var(--sp3)}.ml-3{margin-left:var(--sp3)}.mb-3{margin-bottom:var(--sp3)}.mt-4{margin-top:var(--sp4)}.mr-4{margin-right:var(--sp4)}.ml-4{margin-left:var(--sp4)}.mb-4{margin-bottom:var(--sp4)}.mt-5{margin-top:var(--sp5)}.mr-5{margin-right:var(--sp5)}.ml-5{margin-left:var(--sp5)}.mb-5{margin-bottom:var(--sp5)}.mt-6{margin-top:var(--sp6)}.mr-6{margin-right:var(--sp6)}.ml-6{margin-left:var(--sp6)}.mb-6{margin-bottom:var(--sp6)}.mt-7{margin-top:var(--sp7)}.mr-7{margin-right:var(--sp7)}.ml-7{margin-left:var(--sp7)}.mb-7{margin-bottom:var(--sp7)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}[hidden]{display:none!important}@media (max-width:767px){.hide-small{display:none}}.width-50{width:100%}.width-25{width:50%}.width-75{width:100%}.w-full,.width-full{width:100%}@media (min-width:768px){.buttons li.width-50,.width-50{width:calc(50% - .3em)}.width-25{width:calc(25% - .3em)}.width-75{width:calc(75% - .3em)}}.col,.row:not(.icon){--align:center;--justify:center;display:flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir)}.col{--dir:column}.row:not(.icon){--dir:row}.col.rev{--dir:column-reverse}.row.rev{--dir:row-reverse}.nowrap{--wrap:nowrap}.col.a-start,.row.start{--justify:flex-start}.col.a-end,.row.end{--justify:flex-end}.col.btw,.row.btw{--justify:space-between;width:100%}.col.even,.row.even{--justify:space-evenly}.col.start,.row.a-start{--align:flex-start}.col.end,.row.a-end{--align:flex-end}.abs{position:absolute}:has(>.abs){position:relative}.hidden{transform:scale(0);max-width:0;max-height:0;overflow:hidden;transition:var(--transition-transform),var(--transition-size)}.visible{transform:scale(1);max-width:100%;max-height:100%;transition:var(--transition-transform),var(--transition-size)}.toggle-switch input{opacity:0;width:0;height:0;position:absolute;left:var(--offScreen)}.toggle-switch .slider{position:relative;width:2rem;height:1rem;background-color:var(--base-200);border-radius:.75rem;overflow:hidden;display:flex;justify-content:space-evenly;align-items:center;border:4px solid transparent;transition:.3s;box-shadow:0 0 .25rem 0 rgba(var(--contrast-rgb),.125) inset;cursor:pointer;margin:5px}.toggle-switch .slider::before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--base);transform:translateX(-1rem);border-radius:.75rem;transition:.3s;box-shadow:0 0 .25rem 3px rgba(var(--contrast-rgb),.125)}.toggle-switch input:checked~.slider::before{transform:translateX(1rem);box-shadow:0 0 .25rem 3px rgb(0,0,0,.25)}.toggle-switch input:checked~.slider{background-color:var(--action-0)}.toggle-switch input:active~.slider::before{transform:translate(0)}#theme-switch{z-index:99;margin:0;--wrap:nowrap;--gap:1rem}#theme-switch .slider{width:3rem;height:1.5rem}#theme-switch .slider::before{transform:translateX(-1.5rem)}#theme-switch input:checked~.slider::before{transform:translateX(1.5rem)}@media (max-width:600px){#theme-switch{left:1rem}.wp-site-blocks>header{padding:0!important}}/*!* Focus States *!*//*!* Icon Animations *!*//*!* Hover Effects *!*//*!* Active State *!*/html{scroll-behavior:smooth}@media(prefers-reduced-motion){html{scroll-behavior:unset}*{transition:none!important;animation:none!important}}main{min-height:90vh;--justify:flex-start}main>*{width:100%;max-width:var(--maxWidth);margin:var(--setMargin)}main>.align-wide{max-width:var(--alignWide)}main>.align-full{--ml:0;--mr:0;max-width:var(--full)}main>section{--mt:6rem}main>:first-child{margin-top:0}footer{padding:1rem;background-color:var(--base-200);color:var(--contrast-200);text-align:center;margin:4rem 0 0;position:relative;z-index:var(--z-top)}body:has(nav.fixed.bottom,nav.on-this-page) footer{padding-bottom:var(--offHeight)}footer p,footer p+p{margin:.5rem auto}@media (min-width:768px){footer{padding:1rem 2rem var(--offHeight)}}.grid-view,.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grid-view .item,.item-grid .item{border-radius:var(--outerRadius);aspect-ratio:1;display:flex;filter:none;transition:filter var(--transition-base),padding var(--transition-base),background-color var(--transition-base)}.item-grid button{--height:max-content;aspect-ratio:1}.grid-view img,.item-grid img{border-radius:var(--innerRadius)}.item-grid.list-view{display:flex;flex-direction:column;gap:2rem;--gap:2rem}.item-grid.list-view .item .col{--gap:.5rem}.item-grid.list-view img{width:20%}@media (min-width:768px){.grid-view,.item-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}h1 b,h1 strong,h2 b,h2 strong,h3 b,h3 strong,h4 b,h4 strong,h5 b,h5 strong,h6 b,h6 strong{font-weight:var(--hBold);letter-spacing:2px}h1,h2,h3,h4,h5,h6{--mt:1.5em;--mb:.25em;font-family:var(--heading);text-transform:uppercase;font-weight:var(--hWeight);line-height:1.3;margin:var(--mt) var(--mr) var(--mb) var(--ml)}h1.inline,h2.inline,h3.inline,h4.inline,h5.inline,h6.inline{font-size:1.2rem;font-weight:600;display:inline-block;margin:0 2rem 0 0;letter-spacing:.05em}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{display:block;line-height:.8;font-family:var(--body);font-size:.5em}h1.inline+*,h2.inline+*,h3.inline+*,h4.inline+*,h5.inline+*,h6.inline+*{display:inline-block;margin:.5rem 0}h1.inline+.term-list,h2.inline+.term-list,h3.inline+.term-list,h4.inline+.term-list,h5.inline+.term-list,h6.inline+.term-list{display:inline-flex;margin:.5rem 0}h1{font-size:var(--xxxlarge);font-weight:var(--hWeight);line-height:1;margin:0 var(--mr) .25em var(--ml)}h1:first-of-type{margin-top:20vh}h1 small{display:block;font-size:var(--small);font-weight:var(--bWeight);line-height:1;font-family:var(--body)}h2{font-size:var(--xxlarge)}h3{font-size:var(--xlarge)}h4{font-weight:400;font-size:var(--large)}h5,h6{font-weight:400;font-size:var(--medium)}p{line-height:1.6}main>* h1,main>* h2,main>* h3,main>* h4,main>* h5,main>* h6,main>* p{width:100%}main>* p{margin:.5rem 0}a{color:var(--action-0);text-decoration:none}ul a{display:inline-flex;text-decoration:none}a:visited{color:var(--action-100)}a:hover{color:var(--action-50);text-decoration:underline}ol{list-style-type:decimal}.buttons{--wrap:wrap;--justify:flex-start;margin:1rem var(--mr) 1rem var(--ml);width:100%;padding:0}.buttons.fit{width:fit-content;margin:1rem 2rem}.buttons li{--justify:stretch;--align:stretch;padding:0;list-style:none;overflow:hidden;width:100%}.list-none{list-style:none}@media (min-width:768px){.buttons{max-width:var(--maxWidth);margin:3rem var(--mr) 3rem var(--ml)}}.btn+label,.buttons a,[type=submit],a.button,a.wp-block-button__link,button,ul.socials a{--justify:center;--align:center;--dir:row;width:fit-content;text-transform:uppercase;text-decoration:none;text-align:center;background-color:var(--base-100);color:var(--contrast-50);border:1px solid var(--base-200);border-radius:var(--innerRadius);padding:.25rem 1rem;font-family:var(--heading);cursor:pointer;outline:inherit;height:var(--height);display:inline-flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);transition:color var(--transition-base);transition-property:color,border,background-color;position:relative}.btn+label:focus,.btn+label:hover,.buttons a:focus,.buttons a:hover,[type=submit]:focus,[type=submit]:hover,a.button:focus,a.button:hover,button:focus,button:hover,ul.socials a:focus,ul.socials a:hover{background-color:var(--action-0);color:var(--action-contrast)}.buttons .outline a{background-color:transparent;color:var(--action-0);border:2px solid var(--action-0)}.buttons .outline a:focus,.buttons .outline a:hover{background-color:var(--action-0);color:var(--action-contrast);border-color:var(--action-0)}.buttons a{width:100%}.btn:disabled+label,.btn:disabled+label:hover,[type=submit]:disabled,[type=submit]:disabled:focus,[type=submit]:disabled:hover,a.button:disabled,a.button:disabled:focus,a.button:disabled:hover,a.wp-block-button__link:disabled,a.wp-block-button__link:disabled:focus,a.wp-block-button__link:disabled:hover,button:disabled,button:disabled:focus,button:disabled:hover,ul.socials a:disabled,ul.socials a:disabled:hover{opacity:.5;background-color:var(--base-200)!important;color:var(--contrast-200)!important}details .icon{--w:1.5em}button.favourite.favourited,button.voted .icon{animation:favourite-pop .4s cubic-bezier(.25,.46,.45,.94)}@keyframes favourite-pop{0%{transform:scale(1)}50%{transform:scale(1.3)}75%{transform:scale(.9)}100%{transform:scale(1)}}button.filter-toggle{border:1px solid var(--base-200);background-color:transparent;white-space:nowrap;font-size:1rem;padding:.35em;--w:1.2em}.filter-toggle:hover{border-color:var(--action-50);color:var(--action-50)}.filter-toggle:focus{background-color:var(--action-50);color:var(--action-contrast)}.toggle.notifications.has .bell,.toggle.notifications:not(.has) .bell-ringing,.vote .voted .downvote,.vote .voted .upvote,.vote button:not(.voted) .downvoted,.vote button:not(.voted) .upvoted,button.favourite.favourited .heart,button.favourite:not(.favourited) .heart-fill{display:none}.toggle.notifications.has .bell-ringing,.toggle.notifications:not(.has) .bell,.vote .voted .downvoted,.vote .voted .upvoted,.vote button:not(.voted) .downvote,.vote button:not(.voted) .upvote,button.favourite.favourited .heart-fill,button.favourite:not(.favourited) .heart{display:block}i.icon{width:var(--w);height:var(--w);display:inline-block;background-color:currentColor;mask-image:var(--icon);-webkit-mask-image:var(--icon);mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;vertical-align:middle;transition:var(--transition-size),var(--transition-color)}.icon.small,nav ul .icon{--w:24px}.icon-colour{background:#b7332e;background:linear-gradient(180deg,rgba(255,0,128,1) 0,rgba(250,71,101,1) 14%,rgba(251,121,35,1) 28%,rgba(176,190,19,1) 42%,rgba(14,204,0,1) 56%,rgba(14,225,166,1) 70%,rgba(63,152,253,1) 84%,rgba(166,90,196,1) 100%)}.icon.logo-basic svg path{transition:fill var(--timing) var(--function)}.icon.logo-basic svg path#innerCircle,.icon.logo-basic svg path#outerSkull{fill:var(--base)}a .icon.logo-basic:hover svg path{fill:var(--base)}a .icon.logo-basic:hover svg path#innerCircle,a .icon.logo-basic:hover svg path#outerSkull{fill:var(--action-0)}.icon.grab{cursor:grab}main a .icon{margin-right:.5em}body:has(#theme-switcher:not(:checked)) .icon.logo-split-color{position:relative}body:has(#theme-switcher:not(:checked)) .icon.logo-split-color::before{content:'';display:block;width:60%;height:60%;border-radius:50%;background-color:var(--dark-200);position:absolute;left:18%;top:22%;z-index:-1}path#refresh{transform-origin:center;transform-box:fill-box;animation:spin 1s var(--function) infinite}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}input:focus,input:focus-within,input[type=checkbox]+label:focus,input[type=checkbox]+label:focus-visible,input[type=radio]+label:focus,input[type=radio]+label:focus-visible{outline:2px solid var(--action-0)!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(var(--action-rgb),var(--rgb-light))!important}[aria-busy=true]{cursor:progress}[aria-disabled=true],[disabled]{cursor:not-allowed;opacity:.7}details{padding:.25rem 0;border-top:1px solid var(--base-200);border-bottom:1px solid var(--base-200)}details[open]{background-color:var(--base-50)}details summary{--wrap:nowrap;list-style:none;text-transform:uppercase;cursor:pointer;border:0;transition:background-color var(--transition-base);transition-property:background-color,border;position:relative;padding:.5rem 2.5rem .5rem .5rem;gap:.5rem}details summary:hover{background-color:var(--base-100);border-color:var(--base-100);color:var(--contrast);transition:background-color var(--transition-base);transition-property:background-color,border,color}details[open]>summary{background-color:var(--base-50)}details summary::after{content:"";background-color:var(--contrast-100);-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-image:var(--details);mask-image:var(--details);mask-repeat:no-repeat;mask-size:contain;width:1.25rem;height:1.25rem;margin-left:auto;transition:background-color var(--transition-base);transition-property:background-color,transform}details summary:hover::after,details[open]>summary::after{background-color:var(--contrast)}details[open]>summary::after{transform:rotate(-540deg);transition:background-color var(--transition-base);transition-property:background-color,transform}details::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility var(--timing) allow-discrete,opacity var(--timing),block-size var(--timing)}details[open]::details-content{opacity:1;block-size:auto}@media (prefers-reduced-motion:no-preference){details{interpolate-size:allow-keywords}}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=textarea],input[type=url],textarea{font-family:var(--body);font-size:var(--medium);color:var(--contrast);padding:var(--p-y) var(--p-x);border-radius:var(--innerRadius);background-color:var(--base);outline:0;border:1px solid var(--base-100);border-bottom:2px solid var(--contrast-200);width:100%;max-width:100%;margin:0 4px;transition:background-color var(--transition-base);transition-property:background-color,border}input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=textarea]:focus,input[type=url]:focus,textarea:focus{outline:var(--action-50);background-color:var(--base-100);color:var(--contrast)}input::placeholder,textarea::placeholder{font-family:var(--body);color:var(--base-200)}@media (min-width:768px){:root{--p-y:1rem}}select{background:var(--base);border:2px solid var(--base-100);border-radius:var(--innerRadius);color:var(--contrast);cursor:pointer;font-family:var(--body);font-size:var(--small);padding:.5rem 1rem;width:100%;transition:var(--transition-color)}select:disabled{background-color:var(--base-50);border-color:var(--base-100);color:var(--base-200);cursor:not-allowed}select option{background:var(--base);color:var(--contrast);padding:.5rem}select option:active,select option:checked,select option:focus,select option:hover{background:var(--action-0);color:var(--base);box-shadow:0 0 0 100px var(--action-0) inset}select option:checked{background:var(--action-0) linear-gradient(0deg,var(--action-0) 0,var(--action-0) 100%);color:var(--base)}select:hover{border-color:var(--action-0)}select:focus{border-color:var(--action-0)}input[type=search]:focus+.clear-search{opacity:1;cursor:pointer;transition:opacity var(--transition-base)}.search-container .clear-search{opacity:0;cursor:default;transition:opacity var(--transition-base)}.search-container .icon.search{padding:4px 8px;color:var(--contrast-200);--w:3rem}input[type=search]::-moz-search-clear-button,input[type=search]::-ms-clear,input[type=search]::-ms-reveal,input[type=search]::search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:none;visibility:hidden}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.integration .label,label{text-transform:uppercase;font-weight:700;margin-bottom:.5rem;display:block}.selected-items{--justify:flex-start;--gap:.5rem;margin-bottom:.5rem}.selected-item{padding:.25rem .5rem;margin:.125em;background:var(--base-100);border-radius:.25rem;font-size:var(--medium);border:1px solid var(--base-200);position:relative}.remove-item{background:0 0;border:none;padding:.25rem;cursor:pointer;color:#666;border-radius:var(--innerRadius);width:1.5em;height:1.5em}.remove-item .close{width:.5em;height:.5em}.remove-item:hover{color:var(--action-0);background:#fee}.clear-filters{margin-left:auto;border:1px solid var(--base-200)}[type=checkbox],[type=radio],input.ch{position:absolute;opacity:0;left:-200vw}[type=checkbox]+label,[type=radio]+label,input.ch+label{position:relative;cursor:pointer}[type=checkbox]+label:hover,[type=radio]+label:hover{color:var(--action-0)}[type=checkbox]+label::after,[type=checkbox]+label::before,[type=radio]+label::after,[type=radio]+label::before,input.ch+label::after,input.ch+label::before{content:'';position:absolute;top:50%}[type=checkbox]+label::after,[type=radio]+label::after,input.ch+label::after{left:5px;transform:translateY(-70%) rotate(45deg);width:5px;height:10px;border:solid var(--light-0);border-width:0 2px 2px 0;display:none}[type=checkbox]+label::before,[type=radio]+label::before,input.ch+label::before{left:0;transform:translateY(-50%);width:1rem;height:1rem;border:2px solid var(--contrast-200);background-color:var(--base);border-radius:var(--innerRadius);transition:background-color var(--transition-base),border-color var(--transition-base)}[type=checkbox]:hover+label::before,[type=radio]:hover+label::before,input.ch:hover+label::before{border-color:var(--action-200)}[type=checkbox]:checked+label::before,[type=radio]:checked+label::before,input.ch:checked+label::before{background-color:var(--action-0);border-color:var(--action-100)}[type=radio]:checked+label::before{border-radius:50%}[type=checkbox]:checked+label::after,input.ch:checked+label::after{display:block;left:5px;top:50%;transform:translateY(-70%) rotate(45deg);width:.35rem;height:.66rem;border:solid var(--light-0);border-width:0 2px 2px 0}[type=checkbox]:disabled+label,[type=radio]:disabled+label,input.ch:disabled+label{cursor:not-allowed;background-color:var(--base-50);color:var(--base-200);border-color:var(--base-200)}[type=checkbox]:disabled+label:hover,[type=radio]:disabled+label:hover,input.ch:disabled+label:hover{background-color:var(--base-50);color:var(--base-200);border-color:var(--base-200)}[type=checkbox]:disabled+label::before,[type=radio]:disabled+label::before,input.ch:disabled+label::before{border-color:var(--base-200)}[type=checkbox]:not(.btn)+label,[type=radio]:not(.btn)+label,input.ch+label{flex:1;padding-left:2rem;transform-origin:top center;transition:transform .3s ease;will-change:transform}.btn+label::after,.btn+label::before{display:none}.btn+label{--w:1.2em;border:1px solid var(--base-200);border-radius:var(--innerRadius);min-width:2rem;min-height:2rem;margin:0;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:.5rem;color:var(--contrast-200);opacity:.8}.radio-options.status label{padding:0 .5rem}.btn:checked+label{border-color:var(--contrast);color:var(--contrast);opacity:1}.btn+label:hover{color:var(--action-50);border-color:var(--action-50)}.btn[hidden]+label{display:none}.date-wrapper{position:relative;display:inline-block}input[type=date]{padding:8px 36px 8px 8px;border-radius:4px}input[type=date]::-webkit-calendar-picker-indicator{opacity:0;width:100%;height:100%;position:absolute;top:0;left:0;cursor:pointer}input[type=date]+.icon{--w:20px;position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}input[type=url]{background:var(--linkIcon);background-position:.5em;background-size:1em;background-repeat:no-repeat;padding-left:2em}.field{margin:2rem 0;position:relative}.field:has(.has-tooltip) label{margin-left:2rem}.toggle-text input{display:none}.toggle-text input+label{font-weight:400;color:var(--contrast)!important;text-transform:none;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toggle-text label::after,.toggle-text label::before{display:none}.toggle-text label{padding-left:0!important}.toggle-text input+label .text{position:relative;margin:0 .5rem;font-weight:700;width:fit-content;padding:2px 4px;border:1px solid var(--action-50);border-radius:4px;color:var(--action-50)!important}table .toggle-text input+label .text{color:var(--contrast)!important;border-color:var(--contrast)}.toggle-text:hover .text,table .toggle-text:hover .text{background-color:var(--action-50);color:var(--light-0)!important;border-color:var(--action-50)}.toggle-text input+label .off,.toggle-text input+label .on{-webkit-transition:opacity .125s ease-out,-webkit-transform .125s ease-out;transition:opacity .125s ease-out,-webkit-transform .125s ease-out;transition:transform .125s ease-out,opacity .125s ease-out;transition:transform .125s ease-out,opacity .125s ease-out,-webkit-transform .125s ease-out}.toggle-text input+label .off{opacity:1;max-width:100%;-webkit-transform:none;transform:none}.toggle-text input+label .on{opacity:0;max-width:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.toggle-text input:checked+label .off{opacity:0;max-width:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.toggle-text input:checked+label .on{max-width:100%;opacity:1;-webkit-transform:none;transform:none}.items-container{margin:0;padding:0;width:100%}.create-new-term{margin-top:1rem;width:100%}.create-new-term .field,.create-new-term[open] summary{margin-bottom:1rem}.create-new-term .field{max-width:100%}#jvb-selector>.wrap{--gap:nowrap}.quantity{margin:0}.quantity label{margin:0;font-size:var(--small)}.quantity{display:inline-flex;width:fit-content;align-items:center;justify-content:center;border:1px solid transparent;border-radius:4px;position:relative}.quantity:focus-within{border-color:var(--action-0)}.quantity button{background:var(--base);padding:0;width:38px;height:38px;z-index:0;position:relative;border:1px solid var(--base-200);color:var(--contrast-200)}.quantity button:hover:not(:disabled){color:var(--action-0);border-color:var(--action-0);background-color:var(--base)}.quantity button:active:not(:disabled){background-color:var(--action-0);color:var(--light-0);transform:scale(.95)}.quantity button:disabled{opacity:.5;cursor:not-allowed}.quantity input[type=number]{z-index:1;border:1px solid var(--base-200);background:var(--base);text-align:center;font-size:1.1rem;width:60px;height:48px;margin:0;padding:0!important;appearance:textfield}.quantity input[type=number]::-webkit-inner-spin-button,.quantity input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.quantity input[type=number]:focus{background-color:var(--base-50)}.quantity button.increase{left:-2px;border-radius:0 4px 4px 0}.quantity button.decrease{right:-2px;border-radius:4px 0 0 4px}.term-list{--justify:flex-start;--align:center;--wrap:nowrap;--gap:1.5rem;--dir:row;--w:1em;list-style:none;padding:0;height:var(--height);display:flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);position:relative;overflow:auto hidden;touch-action:pan-x;text-transform:lowercase}.cover{position:relative;overflow:hidden;min-height:60vh;padding:var(--height)}.cover::before{z-index:var(--coverIndex);background-color:var(--action-0);mix-blend-mode:var(--coverBlend);background-position:center;background-repeat:no-repeat;background-size:cover;content:''}.cover::before,.cover>img,.cover>video{position:absolute;inset:0;width:100%;height:100%}.cover .content{z-index:5;overflow:hidden auto;width:max-content;height:max-content;max-width:100%;max-height:100%}.cover>img{z-index:1;opacity:.5;mix-blend-mode:luminosity;object-fit:cover}@media (min-width:768px){.cover>img{opacity:.33}}blockquote{--background:var(--base-100);--border:var(--action-0);line-height:1.2;padding:var(--height);border-radius:4rem;background-color:var(--background)}blockquote .content{margin:12px auto;max-width:min(680px,80vw);position:relative;font-family:var(--heading);font-weight:var(--hBold);padding:25px;border-radius:var(--outerRadius);border:2px solid var(--border)}blockquote .content::after,blockquote .content::before{position:absolute;content:'';left:50px}blockquote .content::before{width:80px;border:6px solid var(--background);bottom:-3px;z-index:2}blockquote .content::after{border:2px solid var(--border);border-radius:0 100% 0 0;width:60px;height:60px;bottom:-60px;border-bottom:0;border-left:0;z-index:3}blockquote cite{padding:15px 0 0 12px;margin:0 0 0 150px;z-index:1}blockquote.pull{background-color:unset;border-radius:0;margin:4rem auto;padding:3rem;box-shadow:var(--shadow-down),var(--shadow-up)}blockquote.pull cite{margin:0}dialog::backdrop{backdrop-filter:blur(5px);background-color:var(--overlay-medium)}dialog[open]{z-index:999;--padding:0;top:5vh;width:min(500px,95vw);border-radius:1rem;height:fit-content;overflow:hidden;max-height:90vh;padding:var(--padding);background-color:var(--base-50);color:var(--contrast);border:1px solid var(--base-200);box-shadow:var(--shadow)}dialog>.wrap,dialog>form{max-height:100%;overflow:hidden auto;margin:0 0 0 1.5rem;padding-right:1.2rem;width:calc(100% - 1.5rem)}dialog label{font-weight:400}dialog h2,dialog h3{margin:0 0 .5rem 0;font-size:var(--large)}dialog:has(.m-actions){padding-bottom:var(--height)}.m-actions{--w:1.15em;--justify:flex-end;--wrap:nowrap;--gap:0;position:absolute;bottom:0;left:0;right:0;width:100%;z-index:var(--z-6);background-color:var(--action-100);box-shadow:var(--shadow-up)}.m-actions button{width:100%;height:3rem;border-radius:0;color:var(--action-contrast);background-color:var(--action-50);border:2px solid var(--action-50)}.m-actions button:focus,.m-actions button:hover{background-color:var(--base);color:var(--contrast)}.m-actions button:first-of-type{border-bottom-left-radius:1rem}.m-actions button:last-of-type{border-bottom-right-radius:1rem}dialog ul{list-style:none}dialog .search-container{padding-top:1rem;width:100%;gap:.5rem}dialog[open].gallery{width:calc(100vw - var(--padding) * 2);height:99vh;background:var(--overlay-heavy)}.gallery .content{position:relative;max-width:100%;max-height:100%;padding:2rem}.gallery .favourite button.favourite{top:unset;bottom:1rem;right:1rem}.gallery .image{max-width:100%;max-height:calc(100vh - 4rem);object-fit:contain}.gallery .cancel{position:absolute;top:1rem;right:1rem;background:0 0;border:none;color:#fff;cursor:pointer;padding:.5rem;z-index:10;transition:color .3s ease}.gallery .cancel:hover{color:var(--action-0)}.gallery .nav{position:absolute;top:50%;height:50%;z-index:5;transform:translateY(-50%);border:none;color:var(--contrast);cursor:pointer;padding:1rem;transition:color .3s ease}.gallery .nav:hover{background-color:var(--overlay-heavy)}.gallery .nav:hover{color:var(--action-0)}.gallery .prev{left:1rem}.gallery .next{right:1rem}.gallery .counter{position:absolute;top:1rem;left:1rem;color:#fff;font-size:.875rem}.gallery .content details{position:absolute;bottom:1rem;left:2rem;width:calc(100% - 4rem);background-color:var(--overlay-light);padding:0}.gallery .content details:hover,.gallery .content details[open]{background-color:var(--overlay-heavy);backdrop-filter:blur(5px)}.gallery .content details[open] summary{background-color:transparent}table{white-space:nowrap;width:100%;display:block;margin:0 0 2rem;border-radius:4px;height:var(--maxHeight);overflow:auto;position:relative}tfoot,thead{position:sticky;z-index:10;background-color:var(--base);text-transform:uppercase;padding:.5rem 0;line-height:2;font-weight:400}tr:nth-of-type(even){background-color:var(--base-200)}tfoot th{vertical-align:middle}tfoot th:first-of-type{text-align:right}tfoot tr,thead tr{background-color:var(--overlay-heavy);box-shadow:var(--shadow)}thead tr{border-bottom:1px solid var(--contrast-200)}tfoot tr{border-top:1px solid var(--contrast-200)}thead{top:0}tfoot{bottom:0}thead th{width:max-content}th p{margin:0!important}td{width:max-content;padding:.5rem 1rem}td .toggle input[type=checkbox]{margin:0}td .field{margin:.25rem 0}td[data-id=actions] label{margin:0;padding:0}td .description{display:none}td input[type=text]{width:fit-content;max-width:40vw;padding:.25em!important;font-size:var(--small)!important}tbody tr{border:2px solid transparent}tbody tr:focus-within{background-color:var(--base-100);border-color:var(--action-50)}[data-stuck]{background-color:var(--overlay-medium);position:sticky;left:-1rem;z-index:15;box-shadow:var(--subtleRight)}tbody [data-stuck]{z-index:5}tfoot [data-stuck],thead [data-stuck]{background:var(--base)}.hide-tooltip.hide-tooltip.hide-tooltip+[role=tooltip],[role=tooltip]{visibility:hidden;position:absolute;bottom:2rem;left:1rem;width:max-content;height:fit-content;max-width:50vw;padding:.5rem;border-radius:var(--innerRadius);box-shadow:var(--shadow);background:var(--action-0);color:var(--action-contrast)}body.menu_item [role=tooltip]{left:auto;right:100%;top:-200%;z-index:var(--z-4)}[role=tooltip] p{margin:0}[role=tooltip] p+p{margin-top:.5rem}.field:has([aria-describedby]:focus) [role=tooltip],[aria-describedby]:focus~.has-tooltip[role=tooltip],[aria-describedby]:hover~.has-tooltip [role=tooltip]{visibility:visible;display:block}.has-tooltip{display:inline-flex;justify-content:flex-end;position:absolute;top:0;left:0;--w:1.5rem}.tt-toggle{cursor:pointer;display:flex;border-radius:50%;background-color:transparent}.tt-toggle:focus,.tt-toggle:hover{background-color:var(--action-0);color:var(--action-contrast)}.tt-toggle:focus+[role=tooltip],.tt-toggle:hover+[role=tooltip]{visibility:visible}dialog[open]#jvb-selector{height:70vh;top:15vh;display:flex}#jvb-selector>.wrap{flex:1}dialog.loading{opacity:0;transition:opacity var(--transition-base)}dialog.loading[open]{opacity:1;transition:opacity var(--transition-base);width:100vw;height:100vh;display:flex;max-width:100%;max-height:100%;border-radius:0;border:none;background-color:transparent;box-shadow:none;--w:3em;justify-content:center;align-items:center}dialog.loading[open]@starting-style{opacity:0}dialog.loading[open]>.col{height:fit-content;width:min(400px,60vw);border-radius:var(--outerRadius);background-color:var(--overlay-medium);padding:2rem;box-shadow:var(--shadow);position:relative}dialog.loading[open] .spinner{position:absolute;top:1rem;width:5rem;height:5rem;border-width:0;border-top-width:4px;animation:spin 1s var(--function) infinite}.loading[open] .icon{background-color:var(--action-0)}dialog.loading[open] .icon{animation:dance 2s ease-in-out infinite;transition:color .3s ease}dialog.loading[open] h3{color:var(--contrast);margin:2rem 1rem auto!important;font-size:var(--large);width:-moz-fit-content;width:fit-content}dialog.loading[open] p{margin:.5rem auto}dialog.loading[open]::after{animation:shimmer 3s ease-in-out infinite;background:linear-gradient(90deg,var(--shimmer));content:"";inset:0;position:absolute;z-index:-1}.spinner{width:12px;height:12px;border:2px solid transparent;border-top:2px solid var(--action-50);border-radius:50%;animation:spin 1s var(--function) infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes shimmer{0%{left:-50%}50%{left:150%}100%{left:-50%}}@keyframes dance{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}}@keyframes letterOutline{0%{background-size:1ch 0}100%{background-size:1ch 100%}}@keyframes letterInside{0%,50%{background-position-y:100%,0}100%,50.01%{background-position-y:0,100%}}.tab-content[hidden]{display:block!important;transform:scaleY(0);height:0;overflow:hidden}.tab-content[hidden]:focus-within{transform:scaleY(1);height:auto}nav.tabs h2{margin:0!important;line-height:1;font-size:var(--medium);display:flex;color:var(--contrast);white-space:nowrap;gap:1rem}nav.tabs .active h2{color:var(--action-contrast)}nav.tabs button{padding:.75rem 1.5rem;border-radius:0;position:relative;border:2px solid var(--action-0)}nav.tabs>button:first-of-type{border-top-left-radius:var(--innerRadius)}nav.tabs>button:last-of-type{border-top-right-radius:var(--innerRadius)}.tabs>button:focus,.tabs>button:hover{background-color:var(--base-200)}.tabs>button::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;background-color:var(--action-50);transition:width .3s}.tabs>button.active::after,.tabs>button:hover::after{width:100%}.tabs>button.active::after{background-color:var(--action-200)}.tabs>button.active{background-color:var(--action-0);color:var(--action-contrast)}.tabs>button.active:focus,.tabs>button.active:hover{background-color:var(--action-100)}.tab-content h2{display:none}.toggle-details{gap:2px}body.menu_item #top{z-index:var(--z-4);position:relative}section .toggle-details{position:absolute;right:0;top:5rem}[data-toggle=all]{position:fixed;bottom:calc(var(--offHeight) + var(--height) + .5rem);right:0;z-index:var(--z-4);background-color:var(--action-0);color:var(--action-contrast)}[data-toggle]{z-index:var(--z-1)}body:has(#queue[hidden]) [data-toggle=all]{left:1rem}dialog:not([open]).col,dialog:not([open]).row{display:none}@media (min-width:768px){section .toggle-details{right:-10%}}.typeText::after{content:'|';display:inline-block;margin-left:0;animation:blink .75s step-end infinite}@keyframes blink{from,to{opacity:1}50%{opacity:0}}aside{position:fixed;top:var(--doubleHeight);bottom:var(--offHeight);width:min(500px,calc(100vw - 2rem));background-color:var(--base);z-index:var(--z-5);box-shadow:var(--shadow);padding-bottom:var(--height);overflow:visible}.qtoggle{z-index:var(--z-6);position:fixed;bottom:var(--offHeight);width:var(--height);height:var(--height);background-color:var(--overlay-medium);color:var(--contrast);transition:width var(--transition-base),background-color var(--transition-base),color var(--transition-base),left var(--transition-base);box-shadow:var(--shadow)}.qtoggle:focus,.qtoggle:hover{background-color:rgba(var(--action-rgb),var(--rgb-heavy));color:var(--action-contrast)}.qtoggle:disabled,.qtoggle:disabled:focus,.qtoggle:disabled:hover{opacity:.5;background-color:var(--overlay-light);color:var(--contrast)}.toggle-cart{right:0;border-radius:4px 4px 4px var(--outerRadius)}body:has(#cart.expanded) .toggle-cart .icon{display:none}aside#cart{padding-bottom:6rem}#cart form{max-height:100%;overflow:hidden auto}#cart nav.tabs{z-index:var(--z-6);top:0}#cart table{height:auto}#cart th{padding:0 1.5rem}#cart table th:first-of-type{width:100%}#cart nav.tabs{position:sticky;box-shadow:var(--shadow)}#cart button[data-tab]{flex:1;border-radius:0}#cart form>:not(.tabs){max-width:90%;margin:0 auto}#cart form .empty p{margin:.5rem 0!important}#cart .cart-total.cart-total{--gap:0 1rem;padding-right:1rem;position:absolute;bottom:var(--height);width:100%;max-width:100%;background-color:var(--overlay-heavy);z-index:var(--z-6);box-shadow:var(--shadow-up)}.cart-total p{--gap:2rem;max-width:100%;margin:0}.cart-total p span{width:6rem;display:inline-block;text-align:right}.cart-total p+p{font-weight:700}.cart-items .total{font-weight:700}#cart .restored{background-color:rgba(var(--action-rgb),var(--rgb-light));border-radius:var(--outerRadius);padding:1rem}.restored h3{font-size:var(--medium);margin:0}.restored p{margin:0}.restored .row{--gap:0;--wrap:nowrap;--w:1em}.toasts{position:fixed;top:4rem;right:-350px;z-index:1000;width:350px}.toast{background-color:var(--overlay-heavy);border-left:4px solid var(--action-0);padding:1rem;box-shadow:var(--shadow);left:0;position:relative;opacity:0;transition:left .3s,opacity .3s}.toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--error)}.toast.info{border-left-color:var(--warning)}.toast.show{left:calc(-350px - 1rem);opacity:1}.toast.hiding{left:0;opacity:0}.toast-content p{margin:0}.close-toast{background:0 0;border:none;font-size:1.25rem;cursor:pointer;opacity:.5;transition:opacity .2s;color:inherit}.close-toast:hover{opacity:1}.qtoggle{left:0;border-radius:4px 4px var(--outerRadius) 4px}.qtoggle.expanded{left:var(--height);width:min(calc(500px - var(--height)),calc(100vw - 2rem - var(--height)))}.qtoggle.saving .icon{background-color:var(--action-0);animation:spin .87s var(--function) infinite}#queue .status-actions{position:absolute;bottom:0;left:0;right:0;z-index:var(--z-2)}#queue .status-actions .popup{position:absolute;z-index:-1;width:max-content;max-width:300px;background-color:var(--action-50);color:var(--action-contrast);border-radius:var(--innerRadius);padding:.25em .75em;top:1rem;left:-100vw;transition:left var(--transition-base)}aside#queue .popup::before{content:'';width:10px;height:10px;transform:rotate(-45deg);background-color:var(--action-50);z-index:-1;left:-5px;position:absolute;top:calc(50% - 5px)}.expanded#queue .status-actions .popup.showing{left:calc(100% + 1em)}#queue .status-actions .popup.showing{left:calc(200vw + var(--offHeight));max-width:75vw}#queue .item .status,.filter .count,.qtoggle .count,.qtoggle .indicator,.refresh .countdown{z-index:var(--z-3);--offset:0;position:absolute;top:var(--offset);background-color:var(--overlay-light)}.expanded+.qtoggle .count,.expanded+.qtoggle .indicator{--offset:.25rem}.qtoggle .indicator{right:var(--offset);width:.75rem;height:.75rem;border-radius:50%}aside#queue.synced+.qtoggle .indicator{background-color:var(--success)}aside#queue.pending+.qtoggle .indicator{background-color:var(--warning);animation:pulse 2s infinite}aside#queue.pending:not(.expanded)+.qtoggle .icon{background-color:var(--error);animation:spin 1s var(--function) infinite}.qtoggle .count{--align:center;--justify:center;left:var(--offset);min-width:1.25rem;height:1.25rem;padding:0 4px;color:var(--contrast);border-radius:var(--innerRadius);font-size:var(--extra-small)}#queue:has(.empty-queue)+.qtoggle .count{display:none}aside#queue .header{padding:15px;border-bottom:1px solid var(--base-200);flex-shrink:0}.qitems{flex:1;overflow:hidden auto;padding:.5rem 2rem;--gap:.5rem}aside#queue h3{margin:0 0 12px 0;font-size:16px;color:var(--contrast)}#queue .filters .filter{background-color:transparent;white-space:nowrap;font-size:var(--small)}#queue .filters .filter.active{background:var(--base-200);border-color:transparent}#queue .filter:focus,#queue .filter:hover{background-color:var(--action-0);color:var(--action-contrast)}.filter .count{--offset:-8px;right:var(--offset);background:var(--base-200);color:var(--contrast-200);border-radius:10px;min-width:18px;height:18px;font-size:10px}.filter .count:empty{display:none}.empty-queue{height:100px;color:var(--contrast-200);font-size:var(--small);font-style:italic}.refresh .countdown:not(.counting),aside#queue:has(.empty-queue) .refresh .count{display:none}#queue .item{padding:15px;background:var(--base-100);border-radius:var(--innerRadius);transition:all .2s ease;box-shadow:var(--shadow-none)}#queue .item:hover{box-shadow:var(--shadow)}#queue .item .header{position:relative}#queue .item .type{font-size:var(--small)}#queue .item .status{--w:1em;--gap:0;--justify:center;--align:center;--offset:-1.2rem;aspect-ratio:1;right:var(--offset);border-radius:50%;color:var(--contrast-200);background-color:var(--base-50);border:1px solid var(--base-200);width:1.25em;height:1.25em}#queue .item .status.pending{background:var(--base-100);color:var(--contrast-200)}#queue .item .status.processing{background:var(--base-200);color:var(--contrast-100);animation:pulse-color 2s infinite}#queue .item .status.completed{background:var(--base-50);color:var(--base-200)}#queue .item .status.completed:hover{color:var(--contrast-200)}#queue .item .status.failed{background:var(--base);color:var(--error)}#queue .item button{font-size:16px;padding:0;line-height:1;opacity:.5;transition:opacity .2s}#queue .item button:hover{opacity:1}#queue .item .info{margin-top:8px;font-size:var(--small)}#queue .item .info .time{--gap:7px;font-size:10px}#queue .item .actions{margin-top:12px;--gap:8px}#queue .item .actions button{padding:6px 12px;font-size:12px;background:var(--base-200);border:none;border-radius:4px;cursor:pointer;transition:all .2s;color:var(--contrast)}#queue .item .actions .retry{background-color:var(--secondary-200);color:var(--secondary-contrast)}#queue .item .actions button:hover{opacity:.9}.queue-actions{padding:15px;border-top:1px solid var(--base-200);flex-shrink:0}.queue-actions button{padding:8px 12px;font-size:var(--small);transition:all .2s}.status-actions>.refresh{position:relative;font-size:var(--small)}.refresh .countdown{--justify:center;--align:center;--offset:0;right:var(--offset);margin:0 3px;border-radius:50%;border:1px solid var(--base-200)}.refreshNow{width:var(--height);height:var(--height)}.refreshNow:hover{background:var(--base-200);color:var(--contrast-200)}.icon.refresh{--w:18px}#queue.pending.expanded .refreshNow .icon{animation:spin 1.5s var(--function) infinite}#queue,.item-grid{counter-reset:delay-counter}.item{counter-increment:delay-counter}.item .progress .fill::after{--delay:calc(counter(delay-counter) * .1s)}.progress .bar{height:6px;display:block;border-radius:6px;overflow:hidden;background:var(--base-200);position:relative}.progress .fill{height:100%;background:var(--action-0);border-radius:6px;width:0;transition:width .3s ease}.progress .details{margin-top:5px;font-size:var(--small);color:var(--contrast);text-align:center;padding:.25rem 0}.progress .details:empty{display:none}.pending .fill::after,.processing .fill::after,.queued .fill::after,.uploading .fill::after{--delay:0s;content:'';position:absolute;top:0;left:-50%;width:30%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.225) 50%,rgba(255,255,255,0) 100%);animation:shimmer 2.5s infinite linear var(--delay)}.additional-actions.additional-actions{padding:0;background-color:transparent}.additional-actions .buttons{position:fixed;bottom:var(--offHeight);right:1rem;margin:0;--gap:1rem;z-index:var(--z-6);width:fit-content}.additional-actions .buttons button{height:var(--height);width:var(--height);background-color:var(--overlay-medium);color:var(--contrast);transition:width var(--transition-base),background-color var(--transition-base),color var(--transition-base),left var(--transition-base);box-shadow:var(--shadow)}.additional-actions .buttons button:hover{background-color:var(--action-0);color:var(--action-contrast)}.additional-actions .buttons button:disabled,.additional-actions .buttons button:disabled:focus,.additional-actions .buttons button:disabled:hover{opacity:.5;background-color:var(--overlay-light);color:var(--contrast)}.additional-actions .buttons button:last-of-type{border-radius:4px 4px 4px var(--outerRadius)}aside{position:fixed;top:var(--doubleHeight);bottom:var(--offHeight);width:min(500px,calc(100vw - 2rem));background-color:var(--base);z-index:var(--z-5);box-shadow:var(--shadow);--wrap:nowrap;--align:stretch;overflow:hidden auto;padding:1rem 1rem var(--height)}aside.left{left:var(--offScreen);transition:left var(--transition-base);border-radius:0 var(--outerRadius) var(--outerRadius) 0}aside.left.expanded{left:0}aside.right{right:var(--offScreen);border-radius:var(--outerRadius) 0 0 var(--outerRadius);transition:right var(--transition-base)}aside.right.expanded{right:0}aside.right.expanded button.close{position:sticky;bottom:calc(var(--height) * -1);left:0;border-bottom-left-radius:var(--outerRadius);width:var(--height);height:var(--height)}.additional-actions .buttons:has(.expanded) button:not(.expanded){display:none}.additional-actions .buttons:has(.expanded){right:0}.additional-actions .buttons .expanded{width:calc(min(500px,calc(100vw - 2rem)));background-color:var(--base)}.additional-actions .buttons .expanded:hover,.additional-actions .buttons button:hover{background-color:var(--action-0);color:var(--action-contrast)}[type=submit]{width:100%;height:var(--height);background-color:var(--action-0);color:var(--action-contrast);box-shadow:var(--shadow-none);font-weight:700}[type=submit]:hover{box-shadow:var(--shadow);border:2px solid var(--action-0);color:var(--action-0);background-color:var(--action-contrast)}aside nav.tabs{position:sticky;bottom:unset;top:0;left:0;right:0}.jvb-referral nav.tabs button{width:50%}aside .tab-content.active{padding:1rem;min-height:100%}aside header h3{font-size:var(--medium);margin:1rem 0;text-align:center}aside header p{margin:.25rem 0;text-align:center}aside h4{font-size:var(--small);margin:1rem 0 0 0}code{width:100%;margin:.5rem;padding:.5rem;user-select:all;text-align:center;border-radius:4px;background-color:var(--base-200);border:1px solid var(--contrast-200)}.restore-form{background-color:rgba(var(--action-rgb),var(--rgb-light));border:1px solid var(--action-200);padding:.5rem;border-radius:var(--outerRadius);margin:1rem 2rem}.restore-form h3{text-align:center;margin:1rem 0 0;font-size:var(--medium)}.restore-form p{margin:.5rem 0}.fstatus{z-index:var(--z-5);background-color:rgba(var(--base-rgb),var(--rgb-heavy));border-radius:4px;padding:0 .5rem;position:fixed;bottom:var(--offHeight);right:calc(var(--offHeight) + 1rem);--w:1em;box-shadow:var(--shadow)}.fstatus .spinner{display:none}.fstatus.loading .spinner{display:inline-block}.fstatus p{margin:0;padding:.25rem}aside.pre-header,aside.sub-header{left:0;right:0;width:100vw;display:flex;justify-content:space-between;height:2rem;bottom:unset;padding:0 .5rem;font-size:var(--small);flex-wrap:nowrap;align-items:center;max-width:100vw}@media (min-width:768px){aside.pre-header,aside.sub-header{padding:0 2rem;font-size:var(--medium)}}.pre-header p,.pre-header p+p,.sub-header p,.sub-header p+p{margin:0}.pre-header{top:0;z-index:1001}.wp-site-blocks>.pre-header~header{top:2.05rem}.sub-header{top:var(--height);box-shadow:var(--shadow)}.pre-header~.sub-header{top:calc(var(--height) + 1.5rem)}@keyframes shimmer{0%{left:-50%}50%{left:150%}100%{left:-50%}}@keyframes pulse-color{0%{box-shadow:0 0 0 0 rgba(var(--action-rgb),.4)}30%{box-shadow:0 0 0 .75rem rgba(var(--action-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--action-rgb),0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes detect-scroll{from,to{--can-scroll:1}}.menu-items .menu-item{display:grid;grid-template-columns:repeat(3,1fr);gap:0 1rem}.menu-items .menu-item:not(.variable) label{display:none}.menu-items .menu-item .field{margin:0;--wrap:nowrap}.menu-items .menu-item .has-tooltip{position:absolute;right:-2.5rem}.menu-items .menu-item+.menu-item{border-top:1px solid var(--base-200);margin-top:2rem;padding-top:1rem}.menu-items .menu-item .header{grid-column:1/-1}.menu-items .menu-item .description{grid-column:1/3}.menu-items .menu-item .info{grid-column:3/3}.menu-items .menu-item h3{font-size:var(--medium);font-weight:400;margin:0 0 .5rem 0!important}.menu-items .menu-item .info{--gap:1rem}.price>span{vertical-align:super;font-size:12px}body.menu_item section>h2{display:inline-block;max-width:var(--maxWidth);width:max-content;background-color:var(--base-50);color:var(--action-0);position:relative;z-index:5;padding:0 1rem;margin:var(--mt) auto var(--mb) auto}.menu-section{position:relative}.menu-section hr{position:absolute;width:100%;left:-5%;top:3.5rem;border:none;background-color:var(--action-100);height:2px}details.menu-item summary.row{flex-direction:column;align-items:flex-start}details.menu-item summary .row{width:100%}.menu_item h1:first-of-type{margin-top:10vh!important}@media (min-width:768px){.menu-section hr{width:120%;left:-10%;top:4.25rem}.menu_item section{max-width:var(--maxWidth)}}/*!** Forms **!*//*!*.field.time_open,*!*//*!*.field.time_closes,*!*//*!*.field.date_start,*!*//*!*.field.time_start,*!*//*!*.field.time_end {*!*//*!* margin-bottom: 0;*!*//*!*}*!*//*!*.field.time_open,*!*//*!*.field.time_closes,*!*//*!*.field.time_start,*!*//*!*.field.time_end {*!*//*!* width: 49%;*!*//*!* display: inline-block;*!*//*!* margin-top: 1rem;*!*//*!*}*!*//*!* Style for disabled state *!*//*!** Shop Page **!*//*!** Bio Sections **!*//*!*!* Status notification *!*//*!*.status-notification {*!*//*!* position: fixed;*!*//*!* bottom: 20px;*!*//*!* left: 80px; !* Position to the right of the panel *!*!*//*!* width: 300px;*!*//*!* max-width: calc(100vw - 100px);*!*//*!* border-radius: 8px;*!*//*!* padding: 15px;*!*//*!* background: #323232;*!*//*!* color: white;*!*//*!* transform: translateY(20px);*!*//*!* opacity: 0;*!*//*!* transition: transform .3s, opacity .3s;*!*//*!* z-index: 10000;*!*//*!* box-shadow: 0 4px 20px rgba(0, 0, 0, .2);*!*//*!* pointer-events: none;*!*//*!*}*!*//*!*.status-notification.active {*!*//*!* transform: translateY(0);*!*//*!* opacity: 1;*!*//*!* pointer-events: auto;*!*//*!*}*!*//*!*.status-notification .title {*!*//*!* font-weight: 600;*!*//*!* margin-bottom: 5px;*!*//*!* font-size: 15px;*!*//*!*}*!*//*!*.status-notification .message {*!*//*!* margin-bottom: 10px;*!*//*!* font-size: 14px;*!*//*!*}*!*//*!*.status-notification .actions {*!*//*!* display: flex;*!*//*!* justify-content: flex-end;*!*//*!*}*!*//*!*.status-notification .actions button {*!*//*!* padding: 6px 12px;*!*//*!* background: rgba(255, 255, 255, .2);*!*//*!* border: none;*!*//*!* border-radius: 4px;*!*//*!* color: white;*!*//*!* cursor: pointer;*!*//*!* font-size: 13px;*!*//*!* transition: background .2s;*!*//*!*}*!*//*!*.status-notification .actions button:hover {*!*//*!* background: rgba(255, 255, 255, .3);*!*//*!*}*!*//*!* Progress containers in notifications *!*//*!* Collapsed state - just show the toggle button *!*//*!***/.stack-small.stack-small{--wrap:wrap}@media (min-width:768px){.stack-small.stack-small{--wrap:nowrap}}.font-small{font-size:var(--small)}.font-medium{font-size:var(--medium)}.font-large{font-size:var(--large)}/*!***//*!*.new-term-toggle:disabled + .loader,*!*//*!*.loading .loader {*!*//*!* width: 50px;*!*//*!* aspect-ratio: 1;*!*//*!* display: grid;*!*//*!* border: 4px solid #0000;*!*//*!* border-radius: 50%;*!*//*!* border-right-color: var(--action-0);*!*//*!* animation: l15 1s infinite linear;*!*//*!*}*!*//*!*.new-term-toggle:disabled + .loader::before,*!*//*!*.new-term-toggle:disabled + .loader::after,*!*//*!*.loading .loader::before,*!*//*!*.loading .loader::after {*!*//*!* content: "";*!*//*!* grid-area: 1/1;*!*//*!* margin: 2px;*!*//*!* border: inherit;*!*//*!* border-radius: 50%;*!*//*!* animation: l15 2s infinite;*!*//*!*}*!*//*!*.new-term-toggle:disabled + .loader::after,*!*//*!*.loading .loader::after {*!*//*!* margin: 8px;*!*//*!* animation-duration: 3s;*!*//*!*}*!*//*!*@keyframes l15{*!*//*!* 100%{transform: rotate(1turn)}*!*//*!*}*!*//*!* High contrast mode support *!*//*!** TODO: Verify **!*/input[type=date],input[type=datetime-local],input[type=time]{padding:.5rem;border:1px solid var(--contrast-200);border-radius:4px;font-size:14px;min-width:180px;background:var(--base);color:var(--contrast);cursor:pointer;transition:border-color .2s ease}.date-wrapper input[type=date]:focus,.datetime-wrapper input[type=datetime-local]:focus,.field-input-wrapper input[type=date]:focus,.field-input-wrapper input[type=datetime-local]:focus,.field-input-wrapper input[type=time]:focus,.time-wrapper input[type=time]:focus{border-color:var(--action-0);box-shadow:0 0 0 2px rgba(var(--action-rgb),.1)}.date-wrapper .icon,.datetime-wrapper .icon,.field-input-wrapper .icon,.time-wrapper .icon{width:18px;height:18px;background-color:var(--contrast);opacity:.7}/*!* Required field asterisk *!*//*!* Invalid field styling *!*//*!* Frontend Display *!*//*!* Set and Checkbox Field Display *!*//*!* Radio and Select Field Display *!*//*!* True/False Field Display *!*//*!* Group Field Styling *!*//*!* Responsive Design *!*/legend{padding:0 1rem}.abs{position:absolute}.top{top:0;right:0;left:0}.top-right{top:0;right:0}.top-left{top:0;left:0}.btm{bottom:0;left:0;right:0}.btm-right{bottom:0;right:0}.btm-left{bottom:0;left:0}.edges{top:0;right:0;left:0;bottom:0}.referral-widget{background:#fff;border:1px solid #ddd;border-radius:8px;padding:24px;margin:20px 0;box-shadow:0 2px 4px rgba(0,0,0,.05)}.referral-header{text-align:center;margin-bottom:20px}.referral-header h3{margin:0 0 8px 0;color:#2271b1}.referral-header p{margin:0;color:#666;font-size:14px}.referral-link-section{margin-bottom:20px}.referral-link-section label{display:block;font-weight:600;margin-bottom:8px;color:#333}.link-copy-wrapper{display:flex;gap:8px}.link-copy-wrapper input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-family:monospace;font-size:13px;background:#f9f9f9}.copy-link-btn{padding:10px 20px;background:#2271b1;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;white-space:nowrap;transition:background .2s}.copy-link-btn:hover{background:#135e96}.referral-code-display{margin:8px 0 0 0;font-size:13px;color:#666}.referral-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:16px;margin-bottom:20px;padding:16px;background:#f8f9fa;border-radius:6px}.stat-item{text-align:center}.stat-value{display:block;font-size:24px;font-weight:700;color:#2271b1}.stat-label{display:block;font-size:12px;color:#666;margin-top:4px}.share-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.share-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid #ddd;border-radius:4px;text-decoration:none;color:#333;font-size:14px;font-weight:500;transition:all .2s}.share-btn:hover{background:#f5f5f5;border-color:#999}.form-group{margin-bottom:16px}.form-group label{display:block;font-weight:600;margin-bottom:8px;color:#333}.input-button-wrapper{display:flex;gap:8px}.input-button-wrapper input{flex:1;padding:12px 16px;border:2px solid #ddd;border-radius:4px;font-size:16px;font-family:monospace;font-weight:600;text-transform:uppercase;transition:border-color .2s}.input-button-wrapper input:focus{outline:0;border-color:#2271b1}.validate-btn{padding:12px 24px;background:#2271b1;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;white-space:nowrap;transition:background .2s}.validate-btn:hover{background:#135e96}.validate-btn:disabled{background:#ccc;cursor:not-allowed}.helper-text{margin:8px 0 0 0;font-size:13px;color:#666}.helper-text a{color:#2271b1;text-decoration:none}.helper-text a:hover{text-decoration:underline}.message{padding:12px 16px;border-radius:4px;margin-top:16px;font-size:14px}.message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.referral-success-state{text-align:center}.success-icon{width:80px;height:80px;margin:0 auto 20px;background:#28a745;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px}.success-content h3{color:#28a745;margin:0 0 12px 0}.reward-highlight{background:#e7f5ff;padding:20px;border-radius:6px;margin:20px 0;border-left:4px solid #2271b1}.reward-highlight strong{color:#2271b1;font-size:18px}.cta-button{display:inline-block;padding:14px 32px;background:#2271b1;color:#fff;text-decoration:none;border-radius:4px;font-weight:600;margin-top:16px;transition:background .2s}.cta-button:hover{background:#135e96}.referred-by{margin-top:16px;padding-top:16px;border-top:1px solid #ddd;font-size:13px;color:#666}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #2271b1;border-radius:50%;animation:spin 1s linear infinite;margin-left:8px;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media (max-width:600px){.input-button-wrapper{flex-direction:column}.validate-btn{width:100%}.link-copy-wrapper{flex-direction:column}.copy-link-btn{width:100%}}.callalt.callalt,.callout.callout{padding:2rem;margin:2rem 0;max-width:none}@media (min-width:768px){.callout.callout{padding:2rem 20vw}}.callout.callout{background-color:var(--action-0);color:var(--action-contrast)}.callalt.callalt{background-color:var(--secondary-0);color:var(--secondary-contrast)}.callalt h1,.callalt h2,.callalt h3,.callalt h4,.callalt h5,.callalt h6,.callout h1,.callout h2,.callout h3,.callout h4,.callout h5,.callout h6{font-family:var(--body);font-weight:var(--bBold);margin:1rem 0 0;width:100%}.callout a{background-color:var(--action-contrast);padding:0 .125rem;border-radius:4px}.attn{animation:pulse-color 5s infinite;animation-delay:1s}@media (min-width:768px){.media-text{--wrap:nowrap}}.media-text figure,.media-text>div{width:100%;margin:0}.media-text>div{max-width:var(--maxWidth);margin:0 auto;padding:2rem} |
| | | */:root{--half:min(384px, 17.5vw);--narrow:min(500px, 62.5vw);--content:min(768px, 65vw);--wider:min(900px, 75vw);--wide:min(1024px, 90vw);--full:100vw;--offScreen:-200vw;--chip:1.5rem;--chipchip:3rem;--chip_:2rem;--btn:4rem;--btn_:5rem;--btnbtn:8rem;--maxHeight:calc(100vh - var(--btnbtn));--dir:row;--justify:center;--align:center;--wrap:wrap;--gap:.5rem;--w:1.2em;--font-base:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--heading:'Aleo',var(--font-base);--body:'Josefin Slab',var(--font-base);--fw-h-light:400;--fw-h:900;--fw-h-bold:900;--fw-b-light:200;--fw-b:400;--fw-b-bold:700;--txt-small:clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem);--txt-x-small:clamp(.95rem, .879rem + .19vw, 1.05rem);--txt-medium:clamp(1.1rem, .993rem + .286vw, 1.25rem);--txt-x-medium:clamp(1.4rem, .971rem + 1.143vw, 2rem);--txt-large:clamp(1.3rem, .6rem + 1.867vw, 2rem);--txt-x-large:clamp(1.6rem, .957rem + 1.714vw, 2.5rem);--txt-xx-large:clamp(2rem, 1.286rem + 1.905vw, 3rem);--txt-xxx-large:clamp(2.5rem, 1.429rem + 2.857vw, 4rem);--txt-enormous:calc(26vh - 4rem);--filter:grayscale(.3) sepia(.4);--mix-blend-mode:darken;--coverBlend:overlay;--coverIndex:2;--light-0:#fafafa;--light-50:#fcfbfb;--light-100:#f1eded;--light-200:#e6dfdf;--light-rgb:250,250,250;--dark-0:#201313;--dark-50:#261717;--dark-100:#2d1b1b;--dark-200:#331e1e;--dark-rgb:16,4,4;--action-0:#B7332E;--action-50:#a32d29;--action-100:#8e2824;--action-200:#7a221f;--action-contrast:var(--light-0);--action-rgb:183,51,46;--secondary-0:#E8A737;--secondary-50:#e59d20;--secondary-100:#d48f18;--secondary-200:#bd7f16;--secondary-contrast:var(--light-0);--secondary-rgb:232,167,55;--success:#22C55E;--successBack:#d4edda;--successText:#155724;--warning:#E8A737;--error:#EF4444;--errorBack:#f8d7da;--errorText:#721c24;--base:var(--light-0);--base-50:var(--light-50);--base-100:var(--light-100);--base-200:var(--light-200);--base-rgb:var(--light-rgb);--contrast:var(--dark-0);--contrast-50:var(--dark-50);--contrast-100:var(--dark-100);--contrast-200:var(--dark-200);--contrast-rgb:var(--dark-rgb);--shimmer:rgba(var(--dark-rgb),0) 0%,rgba(var(--dark-rgb),.05) 50%,rgba(var(--dark-rgb),0) 100%;--op-1:.05;--op-2:.15;--op-3:.25;--op-45:.45;--op-4:.66;--op-5:.75;--op-6:.85;--shdw-inset:inset 0 0 4px 1px;--shdw:0 0 4px;--shdw-down:0 6px 5px -5px;--shdw-right:6px 0 5px -5px;--shdw-left:-6px 0 5px -5px;--shdw-up:0 -6px 5px -5px;--shdw-subtle:0 25px 20px -20px;--shdw-subtle-right:10px 0 20px -20px;--shdw-none:transparent 0 0 0;--z-1:5;--z-2:10;--z-3:15;--z-4:20;--z-5:50;--z-6:100;--z-7:999;--z-8:1000;--z-9:999999;--z-10:9999999;--radius:4px;--p-outer:1rem;--radius-outer:calc(var(--radius) + var(--p-outer));--p-y:1rem;--p-x:1rem;--trans-fn:cubic-bezier(.47,.24,.07,.47);--trans-t:.25s;--trans-base:var(--trans-t) var(--trans-fn);--trans-color:background-color var(--trans-base),color var(--trans-base),border var(--trans-base);--trans-transform:transform var(--trans-base);--trans-size:width var(--trans-base),height var(--trans-base),max-width var(--trans-base),max-height var(--trans-base);--trans-vis:opacity var(--trans-base);--sp1:clamp(0.5rem, 0.714vw + 0.321rem, 1rem);--sp2:clamp(0.75rem, 1.071vw + 0.482rem, 1.5rem);--sp3:clamp(1rem, 1.429vw + 0.643rem, 2rem);--sp4:clamp(1.5rem, 2.143vw + 0.964rem, 3rem);--sp5:clamp(2rem, 2.857vw + 1.286rem, 4rem);--sp6:clamp(3rem, 4.286vw + 1.929rem, 6rem);--sp7:clamp(4rem, 5.714vw + 2.571rem, 8rem);--sb-width:8px;--sb-track:var(--base-100);--sb-thumb:var(--action-0);--sb-thumb-hover:var(--action-50);--sb-thumb-border:2px solid var(--base-50);--sb-radius:4px;--details:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');--link:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M238,88.18a52.42,52.42,0,0,1-15.4,35.66l-34.75,34.75A52.28,52.28,0,0,1,150.62,174h-.05A52.63,52.63,0,0,1,98,119.9a6,6,0,0,1,6-5.84h.17a6,6,0,0,1,5.83,6.16A40.62,40.62,0,0,0,150.58,162h0a40.4,40.4,0,0,0,28.73-11.9l34.75-34.74A40.63,40.63,0,0,0,156.63,57.9l-11,11a6,6,0,0,1-8.49-8.49l11-11a52.62,52.62,0,0,1,74.43,0A52.83,52.83,0,0,1,238,88.18Zm-127.62,98.9-11,11A40.36,40.36,0,0,1,70.6,210h0a40.63,40.63,0,0,1-28.7-69.36L76.62,105.9A40.63,40.63,0,0,1,146,135.77a6,6,0,0,0,5.83,6.16H152a6,6,0,0,0,6-5.84A52.63,52.63,0,0,0,68.14,97.42L33.38,132.16A52.63,52.63,0,0,0,70.56,222h0a52.26,52.26,0,0,0,37.22-15.42l11-11a6,6,0,1,0-8.49-8.48Z"></path></svg>')}body:has(#theme-switcher:checked){--mixBlendMode:lighten;--coverBlend:multiply;--coverIndex:0;--action-50:#cb3933;--action-100:#d14c47;--action-200:#d6605c;--secondary-50:#ebb14e;--secondary-100:#edbb65;--secondary-200:#f0c57c;--contrast:var(--light-0);--contrast-50:var(--light-50);--contrast-100:var(--light-100);--contrast-200:var(--light-200);--contrast-rgb:var(--light-rgb);--base:var(--dark-0);--base-50:var(--dark-50);--base-100:var(--dark-100);--base-200:var(--dark-200);--base-rgb:var(--dark-rgb);--successBack:#155724;--successText:#d4edda;--errorBack:#721c24;--errorText:#f8d7da;--shimmer:rgba(var(--c),0) 0%,rgba(var(--c),.05) 50%,rgba(var(--c),0) 100%}@layer reset{font:clamp(1rem,1rem + .5vw,2rem)/1.4 system-ui,sans-serif;tab-size:2;hanging-punctuation:first allow-end last;word-break:break-word}body{margin:0}*,::after,::before{box-sizing:border-box}h1,h2{font-weight:900;letter-spacing:-.02rem}h1,h2,h3{line-height:1.1}h1,h2,h3,h4,h5,h6{text-wrap:balance;margin-block-start:0}dd,li,p{text-wrap:pretty;max-inline-size:88ch}a{color:oklch(.68 .17 228);text-underline-offset:2px}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{inset-block-end:-.25em}sup{inset-block-start:-.5em}dl,ol,ul{margin:0;padding:0;list-style:outside}iframe,img,video{display:block;max-inline-size:100%;block-size:auto;border-style:none}figure{inline-size:fit-content;margin-inline:auto}figcaption{contain:inline-size;font-size:90%}button,input,select,textarea{font:inherit}label{display:block}input:not(:where([type=submit],[type=checkbox],[type=radio],[type=button],[type=reset])){inline-size:100%}button,input:where([type=submit],[type=reset],[type=button]){background:CanvasText;color:Canvas;border:1px solid transparent}textarea{field-sizing:content;min-block-size:5lh;inline-size:100%;max-inline-size:100%}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,monospace}svg{fill:currentColor}[aria-disabled=true i],[disabled]{cursor:not-allowed}[hidden]{display:none!important}[disabled],label:has(input[disabled]){opacity:.5}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible;margin-block:2.5rem}:target{scroll-margin:3rlh}table{caption-side:bottom;border-collapse:collapse}td,th{word-break:normal;border:1px solid gray;padding:.5rem}caption{font-size:90%}.screen-reader-text:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:focus-visible{outline-offset:2px}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}html{interpolate-size:allow-keywords}}::-webkit-scrollbar{width:var(--sb-width);height:var(--sb-width)}::-webkit-scrollbar-track{background:var(--sb-track)}::-webkit-scrollbar-thumb{background-color:var(--sb-thumb);border-radius:var(--sb-radius);border:var(--sb-thumb-border)}::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover)}body{background-color:var(--base-50);color:var(--contrast);margin:0;font-family:var(--body);font-weight:var(--fw-b);font-size:var(--txt-medium);line-height:1.4;position:relative;max-width:100vw}body,body *{transition:var(--trans-color)}html{scroll-behavior:smooth;overflow-x:hidden}@media(prefers-reduced-motion){html{scroll-behavior:unset}*{transition:none!important;animation:none!important}}body.loading,body:has(aside.expanded),body:has(dialog[open]),body:has(nav.open){overflow:hidden;max-height:100vh}main{display:grid;grid-template-columns:[full-start] minmax(1rem,1fr) [wide-start] minmax(0,calc((100% - var(--content))/ 2)) [wider-start] minmax(0,calc((var(--wide) - var(--wider))/ 2)) [content-start] minmax(0,calc((var(--wider) - var(--content))/ 2)) [narrow-start] min(100% - 2rem,var(--narrow)) [narrow-end] minmax(0,calc((var(--content) - var(--narrow))/ 2)) [content-end] minmax(0,calc((var(--wider) - var(--content))/ 2)) [wider-end] minmax(0,calc((var(--wide) - var(--wider))/ 2)) [wide-end] minmax(0,calc((100% - var(--content))/ 2)) minmax(1rem,1fr) [full-end];min-height:var(--maxHeight)}main>*{grid-column:content}main>section{padding:3rem 0;grid-column:full}main>section>*{width:100%;max-width:var(--content)}main .align-narrow{grid-column:narrow}main .align-content{grid-column:content}main .align-wider{grid-column:wider}main .align-wide{grid-column:wide}main .align-full{grid-column:full;width:100%;max-width:none}main>:first-child{margin-top:0}.wp-site-blocks>header{position:sticky;top:0;z-index:var(--z-8);background-color:var(--base);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw-down);transition:top var(--trans-base)}.scroll-progress{position:absolute;inset-inline:0;bottom:0;height:3px;display:flex;align-items:center;pointer-events:none;z-index:var(--z-3);background-color:var(--base-200);overflow:hidden}.scroll-progress .bar{width:100%;height:1px;transform-origin:left center;transform:scaleX(0);background:var(--action-0)}aside.pre-footer,aside.pre-header,aside.sub-footer,aside.sub-header{height:var(--chip_);display:flex;justify-content:space-between;align-items:center;padding:0 1rem;font-size:var(--txt-x-small);background-color:var(--base-50);z-index:var(--z-7)}.pre-header p{width:max-content}.pre-header{position:sticky;top:-2rem;transition:top var(--trans-base)}.scroll-up .pre-header{top:0}.scroll-up .pre-header~header{top:calc(var(--chip_) - 2px)}footer{padding:1rem;background-color:var(--base-200);color:var(--contrast-200);text-align:center;margin:4rem 0 0;position:relative;z-index:var(--z-7)}footer p{margin:0 auto}body:has(nav.fixed.bottom,nav.on-this-page) footer{padding-bottom:var(--btn_)}@media (min-width:768px){footer{padding:1rem 2rem var(--btn_)}}:target{scroll-snap-margin-top:var(--btnbtn);scroll-margin-top:var(--btnbtn);outline:double var(--action-200);background-color:var(--base)}body :is(b,strong){font-weight:var(--fw-b-bold)}:is(h1,h2,h3,h4,h5,h6){font-family:var(--heading);text-transform:uppercase;font-weight:var(--fw-h);line-height:1.3;margin:1.5em auto .25em;width:100%}:is(h1,h2,h3,h4,h5,h6),p{width:100%}:is(h1,h2,h3,h4,h5,h6) :is(b,strong){font-weight:var(--fw-h-bold);letter-spacing:2px}:is(h1,h2,h3,h4,h5,h6) small{display:block;line-height:.8;font-family:var(--body);font-size:.5em}:is(h1,h2,h3,h4,h5,h6) small :is(b,strong){font-weight:var(--fw-b-bold)}:is(h1,h2,h3,h4,h5,h6).inline{font-size:1.2rem;font-weight:600;display:inline-block;margin:0 2rem 0 0;letter-spacing:.05em}:is(h1,h2,h3,h4,h5,h6).inline+*{display:inline-block;margin:.5rem 0}:is(h1,h2,h3,h4,h5,h6).inline+.term-list{display:inline-flex;margin:.5rem 0}h1{font-size:var(--txt-xxx-large);font-weight:var(--fw-h);line-height:1;margin:0 auto .25em}h1:first-of-type{margin-top:10vh}h1 small{display:block;font-size:var(--txt-x-small);font-weight:var(--fw-b);line-height:1;margin-bottom:.75em;font-family:var(--body)}h1 small+small{display:inline-block;font-size:var(--txt-large);margin-right:.5rem}h2{font-size:var(--txt-xx-large)}h3{font-size:var(--txt-x-large)}h4{font-weight:400;font-size:var(--txt-large)}h5,h6{font-weight:400;font-size:var(--txt-medium)}p{line-height:1.6}.hint{line-height:1.2;font-style:italic;font-size:var(--txt-small)}main>* p{margin:.5rem 0}a{color:var(--action-0);border-radius:4px;padding:.125rem}ul a{display:inline-flex}a:visited{color:var(--action-50)}a:hover{color:var(--contrast-50);text-decoration:none}:is(h1,h2,h3,h4,h5,h6) a:hover,li a:hover,p a:hover{color:var(--action-contrast);background-color:var(--action-0)}ol{list-style-type:decimal}.font-small{font-size:var(--txt-x-small)}.font-medium{font-size:var(--txt-medium)}.font-large{font-size:var(--txt-large)}.p-1{padding:var(--sp1)}.p-2{padding:var(--sp2)}.p-3{padding:var(--sp3)}.p-4{padding:var(--sp4)}.p-5{padding:var(--sp5)}.p-6{padding:var(--sp6)}.p-7{padding:var(--sp7)}.px-1{padding-left:var(--sp1);padding-right:var(--sp1)}.px-2{padding-left:var(--sp2);padding-right:var(--sp2)}.px-3{padding-left:var(--sp3);padding-right:var(--sp3)}.px-4{padding-left:var(--sp4);padding-right:var(--sp4)}.px-5{padding-left:var(--sp5);padding-right:var(--sp5)}.px-6{padding-left:var(--sp6);padding-right:var(--sp6)}.px-7{padding-left:var(--sp7);padding-right:var(--sp7)}.py-1{padding-top:var(--sp1);padding-bottom:var(--sp1)}.py-2{padding-top:var(--sp2);padding-bottom:var(--sp2)}.py-3{padding-top:var(--sp3);padding-bottom:var(--sp3)}.py-4{padding-top:var(--sp4);padding-bottom:var(--sp4)}.py-5{padding-top:var(--sp5);padding-bottom:var(--sp5)}.py-6{padding-top:var(--sp6);padding-bottom:var(--sp6)}.py-7{padding-top:var(--sp7);padding-bottom:var(--sp7)}.pt-1{padding-top:var(--sp1)}.pr-1{padding-right:var(--sp1)}.pl-1{padding-left:var(--sp1)}.pb-1{padding-bottom:var(--sp1)}.pt-2{padding-top:var(--sp2)}.pr-2{padding-right:var(--sp2)}.pl-2{padding-left:var(--sp2)}.pb-2{padding-bottom:var(--sp2)}.pt-3{padding-top:var(--sp3)}.pr-3{padding-right:var(--sp3)}.pl-3{padding-left:var(--sp3)}.pb-3{padding-bottom:var(--sp3)}.pt-4{padding-top:var(--sp4)}.pr-4{padding-right:var(--sp4)}.pl-4{padding-left:var(--sp4)}.pb-4{padding-bottom:var(--sp4)}.pt-5{padding-top:var(--sp5)}.pr-5{padding-right:var(--sp5)}.pl-5{padding-left:var(--sp5)}.pb-5{padding-bottom:var(--sp5)}.pt-6{padding-top:var(--sp6)}.pr-6{padding-right:var(--sp6)}.pl-6{padding-left:var(--sp6)}.pb-6{padding-bottom:var(--sp6)}.pt-7{padding-top:var(--sp7)}.pr-7{padding-right:var(--sp7)}.pl-7{padding-left:var(--sp7)}.pb-7{padding-bottom:var(--sp7)}.m-1{margin:var(--sp1)}.m-2{margin:var(--sp2)}.m-3{margin:var(--sp3)}.m-4{margin:var(--sp4)}.m-5{margin:var(--sp5)}.m-6{margin:var(--sp6)}.m-7{margin:var(--sp7)}.mx-1{margin-left:var(--sp1);margin-right:var(--sp1)}.mx-2{margin-left:var(--sp2);margin-right:var(--sp2)}.mx-3{margin-left:var(--sp3);margin-right:var(--sp3)}.mx-4{margin-left:var(--sp4);margin-right:var(--sp4)}.mx-5{margin-left:var(--sp5);margin-right:var(--sp5)}.mx-6{margin-left:var(--sp6);margin-right:var(--sp6)}.mx-7{margin-left:var(--sp7);margin-right:var(--sp7)}.my-1{margin-top:var(--sp1);margin-bottom:var(--sp1)}.my-2{margin-top:var(--sp2);margin-bottom:var(--sp2)}.my-3{margin-top:var(--sp3);margin-bottom:var(--sp3)}.my-4{margin-top:var(--sp4);margin-bottom:var(--sp4)}.my-5{margin-top:var(--sp5);margin-bottom:var(--sp5)}.my-6{margin-top:var(--sp6);margin-bottom:var(--sp6)}.my-7{margin-top:var(--sp7);margin-bottom:var(--sp7)}.mt-1{margin-top:var(--sp1)}.mr-1{margin-right:var(--sp1)}.ml-1{margin-left:var(--sp1)}.mb-1{margin-bottom:var(--sp1)}.mt-2{margin-top:var(--sp2)}.mr-2{margin-right:var(--sp2)}.ml-2{margin-left:var(--sp2)}.mb-2{margin-bottom:var(--sp2)}.mt-3{margin-top:var(--sp3)}.mr-3{margin-right:var(--sp3)}.ml-3{margin-left:var(--sp3)}.mb-3{margin-bottom:var(--sp3)}.mt-4{margin-top:var(--sp4)}.mr-4{margin-right:var(--sp4)}.ml-4{margin-left:var(--sp4)}.mb-4{margin-bottom:var(--sp4)}.mt-5{margin-top:var(--sp5)}.mr-5{margin-right:var(--sp5)}.ml-5{margin-left:var(--sp5)}.mb-5{margin-bottom:var(--sp5)}.mt-6{margin-top:var(--sp6)}.mr-6{margin-right:var(--sp6)}.ml-6{margin-left:var(--sp6)}.mb-6{margin-bottom:var(--sp6)}.mt-7{margin-top:var(--sp7)}.mr-7{margin-right:var(--sp7)}.ml-7{margin-left:var(--sp7)}.mb-7{margin-bottom:var(--sp7)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}[hidden]{display:none!important}@media (max-width:767px){.hide-small{display:none}}.width-25,.width-50,.width-75{width:100%}.w-full{width:100%}@media (min-width:768px){.buttons li.width-50,.width-50{width:calc(50% - .3em)}.width-25{width:calc(25% - .3em)}.width-75{width:calc(75% - .3em)}}.col,.row{display:flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);--align:center;--justify:center;--gap:.5rem;--wrap:wrap}.col{--dir:column}.row{--dir:row}.col.rev{--dir:column-reverse}.row.rev{--dir:row-reverse}.nowrap.nowrap{--wrap:nowrap}.nowrap.nowrap.stack-small{--wrap:wrap}@media (min-width:768px){.nowrap.nowrap.stack-small{--wrap:nowrap}}.col.start,.row.a-start{--align:flex-start}.col.end,.row.a-end{--align:flex-end}.col.a-start,.row.start{--justify:flex-start}.col.a-end,.row.end{--justify:flex-end}.col.btw,.row.btw{--justify:space-between;width:100%}.col.even,.row.even{--justify:space-evenly}.abs{position:absolute}:has(>.abs){position:relative}.top{top:0;right:0;left:0}.top-right{top:0;right:0}.top-left{top:0;left:0}.btm{bottom:0;left:0;right:0}.btm-right{bottom:0;right:0}.btm-left{bottom:0;left:0}.edges{inset:0}.hidden{transform:scale(0);max-width:0;max-height:0;overflow:hidden;transition:var(--trans-transform),var(--trans-size)}.visible{transform:scale(1);max-width:100%;max-height:100%;transition:var(--trans-transform),var(--trans-size)}.toggle-switch input{opacity:0;width:0;height:0;position:absolute;left:var(--offScreen)}.toggle-switch .slider{position:relative;width:2rem;height:1rem;background-color:var(--base-200);border-radius:.75rem;overflow:hidden;display:flex;justify-content:space-evenly;align-items:center;border:4px solid transparent;transition:var(--trans-t);box-shadow:0 0 .25rem 0 rgba(var(--contrast-rgb),.125) inset;cursor:pointer;margin:5px}.toggle-switch .slider::before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-color:var(--base);transform:translateX(-1rem);border-radius:.75rem;transition:var(--trans-transform);box-shadow:0 0 .25rem 3px rgba(var(--contrast-rgb),.125)}.toggle-switch input:checked~.slider::before{transform:translateX(1rem);box-shadow:0 0 .25rem 3px rgba(var(--base-rgb),.25)}.toggle-switch input:checked~.slider{background-color:var(--action-0)}.toggle-switch input:active~.slider::before{transform:translate(0)}#theme-switch{z-index:99;margin:0;--wrap:nowrap;--gap:1rem}#theme-switch .slider{width:var(--chipchip);height:var(--chip)}#theme-switch .slider::before{transform:translateX(-1.5rem)}#theme-switch input:checked~.slider::before{transform:translateX(1.5rem)}@media (max-width:600px){#theme-switch{left:1rem}.wp-site-blocks>header{padding:0!important}}.grid-view,.item-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.item-grid.stats{grid-template-columns:repeat(2,1fr)}@media (min-width:768px){.grid-view,.item-grid{--width:250px;grid-template-columns:repeat(auto-fill,minmax(var(--width),1fr))}}.grid-view .item,.item-grid .item{border-radius:var(--radius-outer);aspect-ratio:1;display:flex;filter:none}.item-grid button{--height:max-content;aspect-ratio:1}.grid-view img,.item-grid img{border-radius:var(--radius)}.item-grid.list-view{display:flex;flex-direction:column;gap:2rem;--gap:2rem}.item-grid.list-view .item .col{--gap:.5rem}.item-grid.list-view img{width:20%}@media (min-width:768px){.grid-view,.item-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}.btn+label,.buttons a,[type=submit],a.button,button{--justify:center;--align:center;--dir:row;width:fit-content;text-transform:uppercase;text-decoration:none;text-align:center;background-color:var(--base-100);color:var(--contrast-50);border:1px solid var(--base-200);border-radius:var(--radius);padding:.25rem 1rem;font-family:var(--heading);cursor:pointer;outline:0;min-height:var(--btn);display:inline-flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);position:relative;box-shadow:rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset)}.btn+label,[data-filter]{width:var(--chipchip);height:var(--chipchip);min-height:var(--chipchip)}select[data-filter]{width:max-content;height:auto;min-height:0}ul.socials a{background-color:var(--base-100);color:var(--contrast-50);border:1px solid var(--base-200);border-radius:var(--radius);padding:.25rem 1rem;cursor:pointer;min-height:var(--btn);display:inline-flex;justify-content:center;align-items:center;box-shadow:rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset)}.btn+label:focus,.btn+label:hover,.buttons a:focus,.buttons a:hover,[type=submit]:focus,[type=submit]:hover,a.button:focus,a.button:hover,button:focus,button:hover,ul.socials a:focus,ul.socials a:hover{background-color:var(--action-0);color:var(--action-contrast);box-shadow:var(--shdw-none)}.btn:disabled+label,.btn:disabled+label:hover,[type=submit]:disabled,[type=submit]:disabled:focus,[type=submit]:disabled:hover,a.button:disabled,a.button:disabled:focus,a.button:disabled:hover,button:disabled,button:disabled:focus,button:disabled:hover,ul.socials a:disabled,ul.socials a:disabled:hover{opacity:.5;cursor:not-allowed;background-color:var(--base-200);color:var(--contrast-200)}.buttons{--wrap:wrap;--justify:flex-start;margin:1rem auto;width:100%;padding:0}.buttons.fit{width:fit-content;margin:1rem 2rem}.buttons li{--justify:stretch;--align:stretch;padding:0;list-style:none;overflow:hidden;width:100%}.list-none{list-style:none}@media (min-width:768px){.buttons{max-width:var(--content);margin:3rem auto}}.buttons .outline a{background-color:transparent;color:var(--action-0);border:2px solid var(--action-0)}.buttons .outline a:focus,.buttons .outline a:hover{background-color:var(--action-0);color:var(--action-contrast);border-color:var(--action-0)}.buttons a{width:100%}details .icon{--w:1.5em}button.favourite.favourited,button.voted .icon{animation:favourite-pop .4s cubic-bezier(.25,.46,.45,.94)}@keyframes favourite-pop{0%{transform:scale(1)}50%{transform:scale(1.3)}75%{transform:scale(.9)}100%{transform:scale(1)}}button.filter-toggle{border:1px solid var(--base-200);background-color:transparent;white-space:nowrap;font-size:1rem;padding:.35em;--w:1.2em}.filter-toggle:hover{border-color:var(--action-50);color:var(--action-50)}.filter-toggle:focus{background-color:var(--action-50);color:var(--action-contrast)}.toggle.notifications.has .bell,.toggle.notifications:not(.has) .bell-ringing,.vote .voted .downvote,.vote .voted .upvote,.vote button:not(.voted) .downvoted,.vote button:not(.voted) .upvoted,button.favourite.favourited .heart,button.favourite:not(.favourited) .heart-fill{display:none}.toggle.notifications.has .bell-ringing,.toggle.notifications:not(.has) .bell,.vote .voted .downvoted,.vote .voted .upvoted,.vote button:not(.voted) .downvote,.vote button:not(.voted) .upvote,button.favourite.favourited .heart-fill,button.favourite:not(.favourited) .heart{display:block}i.icon{width:var(--w);height:var(--w);display:inline-block;background-color:currentColor;mask-image:var(--icon);-webkit-mask-image:var(--icon);mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;vertical-align:middle}.icon-colour{background:#b7332e;background:linear-gradient(180deg,rgba(255,0,128,1) 0,rgba(250,71,101,1) 14%,rgba(251,121,35,1) 28%,rgba(176,190,19,1) 42%,rgba(14,204,0,1) 56%,rgba(14,225,166,1) 70%,rgba(63,152,253,1) 84%,rgba(166,90,196,1) 100%)}.icon.grab{cursor:grab}main a .icon{margin-right:.5rem}.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}input:focus,input:focus-within,input[type=checkbox]:focus+label,input[type=checkbox]:focus-visible+label,input[type=radio]:focus+label,input[type=radio]:focus-visible+label{outline:2px solid var(--action-0)!important;outline-offset:2px!important;box-shadow:0 0 0 4px rgba(var(--action-rgb),var(--op-3))!important}[aria-busy=true]{cursor:progress}[aria-disabled=true],[disabled]{cursor:not-allowed;opacity:.7}details{padding:.25rem 0;border-top:1px solid var(--base-200);border-bottom:1px solid var(--base-200)}details[open]{background-color:var(--base-50)}details summary{--wrap:nowrap;list-style:none;text-transform:uppercase;cursor:pointer;border:0;position:relative;padding:.5rem 2.5rem .5rem .5rem;gap:.5rem}details summary:hover{background-color:var(--base-100);border-color:var(--base-100);color:var(--contrast)}details[open]>summary{background-color:var(--base-50)}details summary::after{position:absolute;right:.5rem;top:.5rem;--icon:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTIuMjQsMTAwLjI0bC04MCw4MGE2LDYsMCwwLDEtOC40OCwwbC04MC04MGE2LDYsMCwwLDEsOC40OC04LjQ4TDEyOCwxNjcuNTFsNzUuNzYtNzUuNzVhNiw2LDAsMCwxLDguNDgsOC40OFoiLz48L3N2Zz4=');content:"";background-color:var(--contrast-100);-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-image:var(--icon);mask-image:var(--icon);mask-repeat:no-repeat;mask-size:contain;width:1.25rem;height:1.25rem;margin-left:auto;transition:var(--trans-color),var(--trans-transform)}details summary:hover::after{background-color:var(--action-0)}details[open]>summary::after{background-color:var(--contrast)}details[open]>summary::after{transform:rotate(-540deg);transition:background-color var(--trans-base);transition-property:background-color,transform}details::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility var(--trans-t) allow-discrete,opacity var(--trans-t),block-size var(--trans-t)}details[open]::details-content{opacity:1;block-size:auto}@media (prefers-reduced-motion:no-preference){details{interpolate-size:allow-keywords}}.term-list{--justify:flex-start;--align:center;--wrap:nowrap;--gap:1.5rem;--dir:row;--w:1em;list-style:none;padding:0;height:var(--btn);display:flex;justify-content:var(--justify);align-items:var(--align);gap:var(--gap);flex-wrap:var(--wrap);flex-direction:var(--dir);position:relative;overflow:auto hidden;touch-action:pan-x;text-transform:lowercase}.cover{position:relative;overflow:hidden;min-height:60vh;padding:var(--btn)}.cover::before{z-index:var(--coverIndex);background-color:var(--action-0);mix-blend-mode:var(--coverBlend);background-position:center;background-repeat:no-repeat;background-size:cover;content:''}.cover::before,.cover>img,.cover>video{position:absolute;inset:0;width:100%;height:100%}.cover .content{z-index:5;position:relative;overflow:hidden auto;width:max-content;height:max-content;max-width:100%;max-height:100%}.cover>img{z-index:1;opacity:.5;mix-blend-mode:luminosity;object-fit:cover}@media (min-width:768px){.cover>img{opacity:.33}}blockquote{--background:var(--base-100);--border:var(--action-0);line-height:1.2;padding:var(--btn);border-radius:4rem;background-color:var(--background)}blockquote .content{margin:12px auto;max-width:min(680px,80vw);position:relative;font-family:var(--heading);font-weight:var(--fw-h-bold);padding:3rem 2.5rem;border-radius:var(--radius-outer);border:2px solid var(--border)}blockquote .content::after,blockquote .content::before{position:absolute;content:'';left:50px}blockquote .content::before{width:80px;border:6px solid var(--background);bottom:-3px;z-index:2}blockquote .content::after{border:2px solid var(--border);border-radius:0 100% 0 0;width:60px;height:60px;bottom:-60px;border-bottom:0;border-left:0;z-index:3}blockquote cite{padding:15px 0 0 12px;margin:0 0 0 150px;z-index:1}blockquote.pull{background-color:unset;border-radius:0;margin:4rem auto;padding:3rem;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw-down),rgba(var(--base-rgb),var(--op-45)) var(--shdw-up)}blockquote.pull cite{margin:0}aside.expanded,dialog[open]{background-color:var(--base);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);z-index:var(--z-5)}dialog::backdrop{backdrop-filter:blur(5px);background-color:rgba(var(--base-rgb),var(--op-4))}aside.main,dialog[open]{border-radius:var(--radius-outer);overflow:hidden}dialog[open]{z-index:999;--padding:0;top:5vh;width:min(500px,95vw);height:fit-content;max-height:90vh;padding:var(--padding);background-color:var(--base-50);color:var(--contrast);border:1px solid var(--base-200)}dialog>.wrap,dialog>form{max-height:100%;overflow:hidden auto;margin:0 0 0 1.5rem;padding-right:1.2rem;width:calc(100% - 1.5rem)}dialog label{font-weight:400}dialog :is(h2,h3){margin:0 0 .5rem 0;font-size:var(--txt-large)}dialog:has(.m-actions){padding-bottom:var(--btn)}.m-actions{--w:1.15em;--justify:flex-end;--wrap:nowrap;--gap:0;position:absolute;bottom:0;left:0;right:0;width:100%;z-index:var(--z-6);background-color:var(--action-100);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw-up)}.m-actions button{width:100%;height:3rem;border-radius:0;color:var(--action-contrast);background-color:var(--action-50);border:2px solid var(--action-50)}.m-actions button:focus,.m-actions button:hover{background-color:var(--base);color:var(--contrast)}.m-actions button:first-of-type{border-bottom-left-radius:1rem}.m-actions button:last-of-type{border-bottom-right-radius:1rem}dialog ul{list-style:none}dialog .search-container{padding-top:1rem;width:100%;gap:.5rem}.loop .item-grid{grid-template-columns:repeat(1,1fr)}@media (min-width:768px){.loop .item-grid{grid-template-columns:repeat(2,1fr)}}.loop .item-grid .progress{aspect-ratio:3/2;position:relative}.loop .item-grid .progress figure{width:100%;height:100%;display:flex;gap:.125rem;background-color:var(--action-0);position:relative}.loop .item-grid .progress figure span{position:absolute;width:50%;text-transform:uppercase;background-color:rgba(var(--action-rgb),var(--op-4));color:var(--action-contrast);padding:0 .25rem}.loop .progress figure img{max-width:50%;object-fit:cover}figure .after{top:0;right:0}figure .before{bottom:0;left:0}table{white-space:nowrap;width:100%;display:block;margin:0 0 2rem;border-radius:4px;height:var(--maxHeight);overflow:auto;position:relative}tfoot,thead{position:sticky;z-index:10;background-color:var(--base);text-transform:uppercase;padding:.5rem 0;line-height:2;font-weight:400}tr:nth-of-type(even){background-color:var(--base-200)}tfoot th{vertical-align:middle}tfoot th:first-of-type{text-align:right}tfoot tr,thead tr{background-color:rgba(var(--base-rgb),var(--op-6));box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}thead tr{border-bottom:1px solid var(--contrast-200)}tfoot tr{border-top:1px solid var(--contrast-200)}thead{top:0}tfoot{bottom:0}thead th{width:max-content}th p{margin:0!important}td{width:max-content;padding:.5rem 1rem}td .toggle input[type=checkbox]{margin:0}td .field{margin:.25rem 0}td[data-id=actions] label{margin:0;padding:0}td .description{display:none}td input[type=text]{width:fit-content;max-width:40vw;padding:.25em!important;font-size:var(--txt-x-small)!important}tbody tr{border:2px solid transparent}tbody tr:focus-within{background-color:var(--base-100);border-color:var(--action-50)}[data-stuck]{background-color:rgba(var(--base-rgb),var(--op-4));position:sticky;left:-1rem;z-index:15;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right)}tbody [data-stuck]{z-index:5}tfoot [data-stuck],thead [data-stuck]{background:var(--base)}.hide-tooltip.hide-tooltip.hide-tooltip+[role=tooltip],[role=tooltip]{visibility:hidden;position:absolute;bottom:2rem;left:1rem;width:max-content;height:fit-content;max-width:50vw;padding:.5rem;border-radius:var(--radius);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);background:var(--action-0);color:var(--action-contrast)}body.menu_item [role=tooltip]{left:auto;right:100%;top:-200%;z-index:var(--z-4)}[role=tooltip] p{margin:0}[role=tooltip] p+p{margin-top:.5rem}.field:has([aria-describedby]:focus) [role=tooltip],[aria-describedby]:focus~.has-tooltip[role=tooltip],[aria-describedby]:hover~.has-tooltip [role=tooltip]{visibility:visible;display:block}.has-tooltip{display:inline-flex;justify-content:flex-end;position:absolute;top:0;left:0;--w:1.5rem}.tt-toggle{cursor:pointer;display:flex;border-radius:50%;background-color:transparent}.tt-toggle:focus,.tt-toggle:hover{background-color:var(--action-0);color:var(--action-contrast)}.tt-toggle:focus+[role=tooltip],.tt-toggle:hover+[role=tooltip]{visibility:visible}dialog[open]#jvb-selector{height:70vh;top:15vh;display:flex}#jvb-selector>.wrap{flex:1}.item .status,.status,.status-badge{border-radius:var(--radius);font-size:.875rem;font-weight:500;text-transform:capitalize}#queue .item .status.pending,.status-badge.pending,.status.pending,[data-status=pending]{background:var(--base-100);color:var(--contrast-200)}#queue .item .status.processing,.status-badge.processing,.status.processing,[data-status=processing]{background:var(--base-200);color:var(--contrast-100);animation:pulse-color 2s infinite}#queue .item .status.completed,.status-badge.consulted,.status-badge.treated,.status.completed,[data-status=completed]{background:var(--success);color:var(--successText)}#queue .item .status.failed,.status-badge.error,.status.failed,[data-status=failed]{background:var(--error);color:var(--errorText)}dialog.loading{opacity:0}dialog.loading[open]{opacity:1;width:100vw;height:100vh;display:flex;max-width:100%;max-height:100%;border-radius:0;border:none;background-color:transparent;box-shadow:none;--w:3em;justify-content:center;align-items:center}dialog.loading[open]@starting-style{opacity:0}dialog.loading[open]>.col{height:fit-content;width:min(400px,60vw);border-radius:var(--radius-outer);background-color:rgba(var(--base-rgb),var(--op-4));padding:2rem;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);position:relative}dialog.loading[open] .spinner{position:absolute;top:1rem;width:5rem;height:5rem;border-width:0;border-top-width:4px;animation:spin 1s var(--trans-fn) infinite}.loading[open] i.icon{background-color:var(--action-0)}dialog.loading[open] i.icon{animation:dance 2s ease-in-out infinite}dialog.loading[open] h3{color:var(--contrast);margin:2rem 1rem auto!important;font-size:var(--txt-large);width:-moz-fit-content;width:fit-content}dialog.loading[open] p{margin:.5rem auto}dialog.loading[open]::after{animation:shimmer 3s ease-in-out infinite;background:linear-gradient(90deg,var(--shimmer));content:"";inset:0;position:absolute;z-index:-1}.spinner{width:12px;height:12px;border:2px solid transparent;border-top:2px solid var(--action-50);border-radius:50%;animation:spin 1s var(--trans-fn) infinite}.toggle-details{gap:2px}body.menu_item #top{z-index:var(--z-4);position:relative}section .toggle-details{position:absolute;right:0;top:5rem}[data-toggle=all]{position:fixed;bottom:calc(var(--btn_) + var(--btn) + .5rem);right:0;z-index:var(--z-4);background-color:var(--action-0);color:var(--action-contrast)}[data-toggle]{z-index:var(--z-1)}body:has(#queue[hidden]) [data-toggle=all]{left:1rem}dialog:not([open]).col,dialog:not([open]).row{display:none}@media (min-width:768px){section .toggle-details{right:-10%}}.typeText::after{content:'|';display:inline-block;margin-left:0;animation:blink .75s step-end infinite}@keyframes blink{from,to{opacity:1}50%{opacity:0}}aside.main{--wrap:nowrap;--align:stretch;position:fixed;top:var(--btnbtn);bottom:var(--btn_);width:min(500px,calc(100vw - 2rem));background-color:var(--base);z-index:var(--z-5);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);padding:1rem 1rem var(--btn);overflow:hidden auto}aside.main.referral{padding-top:0}aside.main.referral nav.tabs{padding:1rem 0;background-color:var(--base);height:max-content;min-height:var(--btn)}.qtoggle{z-index:var(--z-6);position:fixed;bottom:var(--btn_);width:var(--btn);height:var(--btn);background-color:rgba(var(--base-rgb),var(--op-4));color:var(--contrast);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);transition:var(--trans-size),var(--trans-color)}.qtoggle:focus,.qtoggle:hover{background-color:rgba(var(--action-rgb),var(--op-6));color:var(--action-contrast)}.qtoggle:disabled,.qtoggle:disabled:focus,.qtoggle:disabled:hover{opacity:.5;background-color:rgba(var(--base-rgb),var(--op-3));color:var(--contrast)}.toggle-cart{right:0;border-radius:4px 4px 4px var(--radius-outer)}body:has(#cart.expanded) .toggle-cart .icon{display:none}aside#cart{padding-bottom:6rem}#cart form{max-height:100%;overflow:hidden auto}#cart nav.tabs{z-index:var(--z-6);top:0}#cart table{height:auto}#cart th{padding:0 1.5rem}#cart table th:first-of-type{width:100%}#cart nav.tabs{position:sticky;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}#cart button[data-tab]{flex:1;border-radius:0}#cart form>:not(.tabs){max-width:90%;margin:0 auto}#cart form .empty p{margin:.5rem 0!important}#cart .cart-total.cart-total{--gap:0 1rem;padding-right:1rem;position:absolute;bottom:var(--btn);width:100%;max-width:100%;background-color:rgba(var(--base-rgb),var(--op-6));z-index:var(--z-6);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw-up)}.cart-total p{--gap:2rem;max-width:100%;margin:0}.cart-total p span{width:6rem;display:inline-block;text-align:right}.cart-total p+p{font-weight:700}.cart-items .total{font-weight:700}#cart .restored{background-color:rgba(var(--action-rgb),var(--op-3));border-radius:var(--radius-outer);padding:1rem}.restored h3{font-size:var(--txt-medium);margin:0}.restored p{margin:0}.restored .row{--gap:0;--wrap:nowrap;--w:1em}.toasts{position:fixed;top:4rem;right:-350px;z-index:1000;width:350px}.toast{background-color:rgba(var(--base-rgb),var(--op-6));border-left:4px solid var(--action-0);padding:1rem;box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);left:0;position:relative;opacity:0;transition:left .3s,opacity .3s}.toast.success{border-left-color:var(--success)}.toast.error{border-left-color:var(--error)}.toast.info{border-left-color:var(--warning)}.toast.show{left:calc(-350px - 1rem);opacity:1}.toast.hiding{left:0;opacity:0}.toast-content p{margin:0}.close-toast{background:0 0;border:none;font-size:1.25rem;cursor:pointer;opacity:.5;transition:opacity .2s;color:inherit}.close-toast:hover{opacity:1}#queue#queue{width:min(500px,calc(100vw - 2rem))}#queue>*{max-width:100%}.qtoggle{left:0;border-radius:4px 4px var(--radius-outer) 4px}.qtoggle.expanded{left:var(--btn);width:min(calc(500px - var(--btn)),calc(100vw - 2rem - var(--btn)))}.qtoggle.saving .icon{background-color:var(--action-0);animation:spin .87s var(--trans-fn) infinite}#queue .status-actions{position:absolute;bottom:0;left:0;right:0;z-index:var(--z-2)}#queue .status-actions .popup{position:absolute;z-index:-1;width:max-content;max-width:300px;background-color:var(--action-50);color:var(--action-contrast);border-radius:var(--radius);padding:.25em .75em;top:1rem;left:-100vw;transition:left var(--trans-base)}aside#queue .popup::before{content:'';width:10px;height:10px;transform:rotate(-45deg);background-color:var(--action-50);z-index:-1;left:-5px;position:absolute;top:calc(50% - 5px)}.expanded#queue .status-actions .popup.showing{left:calc(100% + 1em)}#queue .status-actions .popup.showing{left:calc(200vw + var(--btn_));max-width:75vw}#queue .item .status,.filter .count,.qtoggle .count,.qtoggle .indicator,.refresh .countdown{z-index:var(--z-3);--offset:0;position:absolute;top:var(--offset);background-color:rgba(var(--base-rgb),var(--op-3))}.expanded+.qtoggle .count,.expanded+.qtoggle .indicator{--offset:.25rem}.qtoggle .indicator{right:var(--offset);width:.75rem;height:.75rem;border-radius:50%}aside#queue.synced+.qtoggle .indicator{background-color:var(--success)}aside#queue.pending+.qtoggle .indicator{background-color:var(--warning);animation:pulse 2s infinite}aside#queue.pending:not(.expanded)+.qtoggle .icon{background-color:var(--error);animation:spin 1s var(--trans-fn) infinite}.qtoggle .count{--align:center;--justify:center;left:var(--offset);min-width:1.25rem;height:1.25rem;padding:0 4px;color:var(--contrast);border-radius:var(--radius);font-size:var(--txt-x-small)}#queue:has(.empty-queue)+.qtoggle .count{display:none}aside#queue .header{padding:15px;border-bottom:1px solid var(--base-200);flex-shrink:0;--height:max-content}.qitems{flex:1;width:100%;overflow:hidden auto;overflow-anchor:none;padding:.5rem 2rem;--gap:.5rem}.qitems .item{width:100%}.qitems button{--height:max-content}aside#queue h3{margin:0;font-size:16px;color:var(--contrast)}#queue .filters{padding:1rem 0 0}#queue .filters .filter{background-color:transparent;white-space:nowrap;font-size:var(--txt-x-small)}#queue .filters .filter.active{background:var(--base-200);border-color:transparent}#queue .filter:focus,#queue .filter:hover{background-color:var(--action-0);color:var(--action-contrast)}.filter .count{--offset:-8px;right:var(--offset);background:var(--base-200);color:var(--contrast-200);border-radius:10px;min-width:18px;height:18px;font-size:10px}.filter .count:empty{display:none}.empty-queue{height:100px;color:var(--contrast-200);font-size:var(--txt-x-small);font-style:italic}.refresh .countdown:not(.counting),aside#queue:has(.empty-queue) .refresh .count{display:none}#queue .item{padding:15px;background:var(--base-100);border-radius:var(--radius);transition:all .2s ease;box-shadow:var(--shdw-none)}#queue .item:hover{box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}#queue .item .header{position:relative;padding:.25rem 0}#queue .item .type{font-size:var(--txt-x-small)}#queue .item .status{--w:1em;--gap:0;--justify:center;--align:center;--offset:-1.2rem;aspect-ratio:1;right:var(--offset);border-radius:50%;color:var(--contrast-200);background-color:var(--base-50);border:1px solid var(--base-200);width:1.25em;height:1.25em}#queue .item .status.completed:hover{color:var(--contrast-200)}#queue .item button{font-size:16px;padding:0;line-height:1;opacity:.5;transition:opacity .2s}#queue .item button:hover{opacity:1}#queue .item .info{margin-top:8px;font-size:var(--txt-x-small)}#queue .item .info .time{--gap:7px;font-size:10px}#queue .item .actions{--gap:8px}#queue .item .actions button{padding:6px 12px;font-size:12px;background:var(--base-200);border:none;border-radius:4px;cursor:pointer;transition:all .2s;color:var(--contrast)}#queue .item .actions .retry{background-color:var(--secondary-200);color:var(--secondary-contrast)}#queue .item .actions button:hover{opacity:.9}.queue-actions{padding:.5rem 0;border-top:1px solid var(--base-200);flex-shrink:0}.queue-actions button{--height:max-content;padding:.75rem;width:100%;font-size:var(--txt-x-small)}.status-actions>.refresh{position:relative;font-size:var(--txt-x-small)}.refresh .countdown{--justify:center;--align:center;--offset:0;right:var(--offset);margin:0 3px;border-radius:50%;border:1px solid var(--base-200)}.refreshNow{width:var(--btn);height:var(--btn)}.refreshNow:hover{background:var(--base-200);color:var(--contrast-200)}.icon.refresh{--w:18px}#queue.pending.expanded .refreshNow .icon{animation:spin 1.5s var(--trans-fn) infinite}#queue,.item-grid{counter-reset:delay-counter}.item{counter-increment:delay-counter}.item .progress .fill::after{--delay:calc(counter(delay-counter) * .1s)}.progress .bar{height:6px;display:block;border-radius:6px;overflow:hidden;background:var(--base-200);position:relative}.progress .fill{height:100%;background:var(--action-0);border-radius:6px;width:0;transition:width .3s ease}.progress .details{margin-top:5px;font-size:var(--txt-x-small);color:var(--contrast);text-align:center;padding:.25rem 0}.progress .details:empty{display:none}.pending .fill::after,.processing .fill::after,.queued .fill::after,.uploading .fill::after{--delay:0s;content:'';position:absolute;top:0;left:-50%;width:30%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.225) 50%,rgba(255,255,255,0) 100%);animation:shimmer 2.5s infinite linear var(--delay)}.additional-actions.additional-actions{padding:0;background-color:transparent}.additional-actions .buttons{position:fixed;bottom:var(--btn_);right:1rem;margin:0;--gap:1rem;z-index:var(--z-6);width:fit-content}.additional-actions .buttons button{height:var(--btn);width:var(--btn);background-color:rgba(var(--base-rgb),var(--op-4));color:var(--contrast);box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw)}.additional-actions .buttons button:hover{background-color:var(--action-0);color:var(--action-contrast)}.additional-actions .buttons button:disabled,.additional-actions .buttons button:disabled:focus,.additional-actions .buttons button:disabled:hover{opacity:.5;background-color:rgba(var(--base-rgb),var(--op-3));color:var(--contrast)}.additional-actions .buttons button:last-of-type{border-radius:4px 4px 4px var(--radius-outer)}aside.left{transition:left var(--trans-base);left:var(--offScreen);border-radius:0 var(--radius-outer) var(--radius-outer) 0}aside.left.expanded{left:0}aside.right{transition:right var(--trans-base);right:var(--offScreen);border-radius:var(--radius-outer) 0 0 var(--radius-outer)}aside.right.expanded{right:0}aside.right.expanded button.close{position:sticky;bottom:calc(var(--btn) * -1);left:0;border-bottom-left-radius:var(--radius-outer);width:var(--btn);height:var(--btn)}.additional-actions .buttons:has(.expanded) button:not(.expanded){display:none}.additional-actions .buttons:has(.expanded){right:0}.additional-actions .buttons button{transition:right var(--trans-base),var(--trans-size)}.additional-actions .buttons .expanded{width:calc(min(500px,calc(100vw - 2rem)));background-color:var(--base)}.additional-actions .buttons .expanded:hover,.additional-actions .buttons button:hover{background-color:var(--action-0);color:var(--action-contrast)}[type=submit]{width:100%;height:var(--btn);background-color:var(--action-0);color:var(--action-contrast);box-shadow:var(--shdw-none);font-weight:700}[type=submit]:hover{box-shadow:rgba(var(--base-rgb),var(--op-45)) var(--shdw);border:2px solid var(--action-0);color:var(--action-0);background-color:var(--action-contrast)}aside nav.tabs{position:sticky;bottom:unset;top:0;left:0;right:0}aside .tab-content.active{padding:1rem;min-height:100%}aside header h3{font-size:var(--txt-medium);margin:1rem 0;text-align:center}aside header p{margin:.25rem 0;text-align:center}aside h4{font-size:var(--txt-x-small);margin:1rem 0 0 0}code{width:100%;margin:.5rem;padding:.5rem;user-select:all;text-align:center;border-radius:4px;background-color:var(--base-200);border:1px solid var(--contrast-200)}.restore-form{background-color:rgba(var(--action-rgb),var(--op-3));border:1px solid var(--action-200);padding:.5rem;border-radius:var(--radius-outer);margin:1rem 2rem}.restore-form h3{text-align:center;margin:1rem 0 0;font-size:var(--txt-medium)}.restore-form p{margin:.5rem 0}.fstatus{z-index:var(--z-5);background-color:rgba(var(--base-rgb),var(--op-6));border-radius:4px;padding:0 .5rem;position:fixed;bottom:var(--btn_);right:calc(var(--btn_) + 1rem);--w:1em;box-shadow:var(--shdw)}.fstatus .spinner{display:none}.fstatus.loading .spinner{display:inline-block}.fstatus p{margin:0;padding:.25rem}.callalt.callalt,.callout.callout{padding:2rem;margin:0;max-width:none;grid-column:full}@media (min-width:768px){.callout.callout{padding:2rem 20vw}}.callout.callout{background-color:var(--action-0);color:var(--action-contrast)}.callalt.callalt{background-color:var(--secondary-0);color:var(--secondary-contrast)}.callalt :is(h1,h2,h3,h4,h5,h6),.callout :is(h1,h2,h3,h4,h5,h6){font-family:var(--body);font-weight:var(--fw-b-bold);margin:1rem 0 0;width:100%}.callout a{background-color:var(--action-contrast);padding:0 .125rem;border-radius:4px}.attn{animation:pulse-color 5s infinite;animation-delay:1s}.media-text figure,.media-text>div{width:100%;margin:0}@media (min-width:768px){.media-text{--wrap:nowrap}}.media-text>div{max-width:var(--content);margin:0 auto;padding:2rem}.timeline.terms{list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}.timeline.terms>li{width:100%}@media (min-width:768px){.timeline.terms>li{width:50%}}dialog.gallery[open]{position:fixed;inset:1rem;margin:0;border:none;width:calc(100% - 2rem);height:calc(100% - 2rem);padding:0;background:rgba(var(--base-rgb),var(--op-6));display:flex;align-items:center;justify-content:center;overflow:hidden;backdrop-filter:blur(3px);z-index:var(--z-9);max-height:100vh;max-width:100vw}.gallery .controls{order:3;justify-content:flex-end;--height:2rem}.gallery .controls .cancel{order:3}dialog.gallery::backdrop{background:rgba(var(--base-rgb),var(--op-4))}dialog.gallery .wrap{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}dialog.gallery .cancel:hover{background:rgba(var(--base-rgb),var(--op-4))}dialog.gallery .content{position:relative;flex:1 1 auto;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}dialog.gallery .content .image{max-width:90vw;max-height:85vh;object-fit:contain;transition:transform .15s ease-out;touch-action:none}dialog.gallery .image-left,dialog.gallery .image-right{position:absolute;opacity:0;pointer-events:none}dialog.gallery details{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);width:calc(100% - 2rem);max-width:600px;background:rgba(0,0,0,.45);color:#fff;border-radius:4px;overflow:hidden;z-index:10}dialog.gallery details summary{padding:.75rem 1rem;cursor:pointer;user-select:none}dialog.gallery details[open] .item-info{padding:1rem}dialog.gallery .counter{position:absolute;bottom:1rem;left:1rem;background:rgba(var(--base-rgb),var(--op-4));color:var(--contrast);padding:.4rem .8rem;border-radius:3px;font-size:.85rem;z-index:10}dialog.gallery .favourite{position:absolute;top:1rem;left:1rem;z-index:10}dialog.gallery .image{opacity:0;transition:opacity .2s ease,transform .15s ease-out}dialog.gallery .image[src]{opacity:1}.referral-reward-banner{background:var(--base-100);color:var(--action-0);border:2px dashed var(--action-0);padding:1.5rem;border-radius:8px;text-align:center;margin-bottom:1.5rem;display:flex;justify-content:center;align-items:center}.referral-reward-banner .icon{--w:3rem}.referral-reward-banner h4{margin:0;font-size:1.25rem;font-weight:700;color:var(--contrast)}.check-code-btn{width:100%;margin-top:.5rem;background:var(--base-100);color:var(--contrast-100);border:1px solid var(--contrast-200);display:flex;align-items:center;justify-content:center;gap:.5rem}.code-status{padding:.75rem;border-radius:4px;margin-top:.5rem;font-size:.875rem}.code-status.loading{background:var(--base-200);color:var(--contrast-200)}.code-status.success{background:var(--successBack);color:var(--successText);border:1px solid var(--successBack)}.code-status.error{background:var(--errorBack);color:var(--errorText);border:1px solid var(--errorBack)}.referral-footer{text-align:center;padding:1rem 0;border-top:1px solid var(--base-200);margin-top:1rem}.referral-footer .text-link{color:var(--contrast-200);text-decoration:none;font-size:.875rem}.referral-footer .text-link:hover{color:var(--action-0);text-decoration:underline}.share-section{margin-bottom:1.5rem}.share-section h4{margin:0 0 .75rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--contrast-200)}.copy-section{margin-bottom:1.5rem}.copy-section h4{margin:0 0 .5rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--contrast-200)}.copy-group{--gap:0 .5rem;margin-bottom:0}.copy-group+.hint{margin:.25rem 1rem 1rem}.copy-target{flex:1;padding:.75rem;background:var(--base-100);border:1px solid var(--base-200);border-radius:4px;font-family:Monaco,'Courier New',monospace;font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}.copy-btn{flex-shrink:0;width:var(--chipchip);height:var(--chipchip);min-height:0;padding:0}.copy-btn .icon-check-circle,.copy-btn.success .icon-copy{display:none}.copy-btn.success .icon-check-circle{display:inline-block}.copy-btn.success{background:var(--successBack);color:var(--success)}.recent-referrals-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--contrast-200)}.recent-referrals-section h4{margin:0 0 .75rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;color:var(--contrast-200)}.recent-referrals-list{display:flex;flex-direction:column;gap:.5rem}.referral-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--base-100);border-radius:4px;font-size:.875rem}.referral-info{display:flex;align-items:center;gap:.5rem}.referral-info strong{color:var(--contrast-200)}.referral-date{font-size:.75rem}.loading,.no-referrals{text-align:center;padding:1rem;color:var(--contrast-200);font-size:.875rem}.stats-summary{margin-bottom:1.5rem}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid var(--base-200)}.stat-row:last-child{border-bottom:none}.stat-row.highlight{background:var(--base-100);border-radius:4px;border:1px solid var(--base);font-weight:600}.stat-label{color:#666;font-size:.875rem}.stat-value{color:#333;font-weight:600;font-size:1rem}.stat-row.highlight .stat-value{color:var(--action-0);font-size:1.25rem}.view-dashboard-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.875rem;background:var(--action-0);color:var(--action-contrast);text-decoration:none;border-radius:8px;font-weight:600;transition:all .2s ease}aside a.button,aside button:not(.button,.qtoggle){position:relative;top:0;box-shadow:var(--shdw-none);transition:top var(--trans-base),box-shadow var(--trans-base)}aside a.button:hover,aside button:not(.button,.qtoggle,:disabled):hover{top:-4px;box-shadow:rgba(var(--contrast-rgb),var(--op-45)) var(--shdw-down)}.view-dashboard-btn:visited{color:var(--action-contrast)}.view-dashboard-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.3)}.success-content{padding:2rem 1rem;text-align:center}.success-content h3{color:var(--success);margin-bottom:1rem}.success-content p{margin-bottom:.75rem;color:var(--base-200)}.success-content .hint{font-size:.875rem;color:var(--base-200);font-style:italic}.code-status.loading::before{content:'';display:inline-block;width:1rem;height:1rem;border:2px solid var(--action-200);border-top:2px solid var(--action-0);border-radius:50%;animation:spin 1s linear infinite;margin-right:.5rem;vertical-align:middle}.share-buttons-grid a{padding:0;min-height:0;width:var(--chipchip);height:var(--chipchip)}.share-buttons-grid a .icon{margin-right:0}@media (max-width:768px){.share-buttons-grid{grid-template-columns:repeat(3,1fr)}.referral-item{flex-direction:column;align-items:flex-start;gap:.5rem}}.toggle-text input{display:none}.toggle-text input+label{font-weight:400;color:var(--contrast)!important;text-transform:none;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toggle-text label::after,.toggle-text label::before{display:none}.toggle-text label{padding-left:0!important}.toggle-text input+label .text{position:relative;margin:0 .5rem;font-weight:700;width:fit-content;padding:2px 4px;border:1px solid var(--action-50);border-radius:4px;color:var(--action-50)!important}table .toggle-text input+label .text{color:var(--contrast)!important;border-color:var(--contrast)}.toggle-text:hover .text,table .toggle-text:hover .text{background-color:var(--action-50);color:var(--light-0)!important;border-color:var(--action-50)}.toggle-text input+label .off,.toggle-text input+label .on{transition:var(--trans-transform),opacity var(--trans-base)}.toggle-text input+label .off{opacity:1;max-width:100%;transform:none}.toggle-text input+label .on{opacity:0;max-width:0;transform:translate3d(0,100%,0)}.toggle-text input:checked+label .off{opacity:0;max-width:0;transform:translate3d(0,-100%,0)}.toggle-text input:checked+label .on{max-width:100%;opacity:1;transform:none}@keyframes shimmer{0%{left:-50%}50%{left:150%}100%{left:-50%}}@keyframes pulse-color{0%{box-shadow:0 0 0 0 rgba(var(--action-rgb),.4)}30%{box-shadow:0 0 0 .75rem rgba(var(--action-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--action-rgb),0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes dance{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.1)}} |