:root {
--header-padding: 75px;
--scale-factor: 3.555;
--background-color: #fafafa;
--theme-color: #5f788a;
--foreground-color: white;
--button-color:#007bff;
}
/* Ensure html and body elements take up the full height of the viewport */
html, body {
height: 100%;
margin: 0;
}
body {
background-color: var(--background-color);
color: #333333;
margin-top: 5rem;
font-family: 'Baskerville', serif; /* Use Baskerville for body text */
display: flex;
flex-direction: column;
height: 100%; /* Make sure the body takes up the entire height of the screen */
}
.navbar.fixed-top {
min-height: 5rem;
}
/* Make the main content area flexible so it can grow to fill available space */
.main-content {
flex: 1; /* Allow the content to grow and push the footer down */
}
.footer {
margin-top: auto; /* Pushes footer to the bottom */
background-color: var(--theme-color);
color: var(--foreground-color);
padding: 15px;
text-align: center;
}
/* Container for footer content */
footer .footer-container {
display: flex;
flex-direction: column;
}
/* Links styling */
footer a {
color: #cbd5db;
text-decoration: none;
margin: 0 10px;
}
footer a:hover {
text-decoration: underline;
color: var(--foreground-color);
}
h1 {
font-size: clamp(2.1rem, 6vw, 2.5rem);
overflow-wrap: break-word;
overflow: hidden;
}
@font-face {
font-family: 'Luminari';
src: url("../fonts/Luminari.ceb1f9f79609.eot"); /* IE9 Compatibility */
src: url("../fonts/Luminari.ceb1f9f79609.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
url("../fonts/Luminari_edit.36893b1c719a.woff2") format('woff2'), /* Modern browsers */
url("../fonts/Luminari_edit.b93929086b02.woff") format('woff'), /* Older browsers */
url("../fonts/Luminari_edit.1f9c12499863.ttf") format('truetype'); /* iOS */
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Baskerville 10 Pro';
src: url("../fonts/Baskerville10Pro.91556900c85e.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Baskerville 10 Pro';
src: url("../fonts/Baskerville10Pro-Italic.4b567c901eee.ttf") format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Baskerville 10 Pro';
src: url("../fonts/Baskerville10Pro-Medium.ebd27b847b28.ttf") format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Baskerville 10 Pro';
src: url("../fonts/Baskerville10Pro-MediumItalic.608a325d3bc8.ttf") format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Baskerville 10 Pro';
src: url("../fonts/Baskerville10Pro-Bold.50480d8bca15.ttf") format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Baskerville 10 Pro';
src: url("../fonts/Baskerville10Pro-BoldItalic.e63861d56a34.ttf") format('truetype');
font-weight: bold;
font-style: italic;
}
legend {
color: #444444;
font-family: 'Luminari', serif;
/* font-feature-settings: "salt" 1; */
/* Use Luminari for titles */
}
.root-title {
/* color: #444444; */
font-family: 'Luminari', serif;
}
.root-title-underlined {
position: relative; /* Ensure that the pseudo-element is positioned correctly */
display: inline-block; /* Make sure it's inline for correct sizing */
z-index: 1;
}
.manifest-box {
position: relative;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
.manifest-box::before {
content: '';
position: absolute;
top: -1px;
left: -3px;
right: -3px;
height: 18px; /* Creates the space for the left and right borders to start */
background-color: var(--foreground-color); /* This hides the top part of the left and right borders */
overflow: visible;
}
.manifest-box::after {
content: '';
position: absolute;
top: 17px; /* Starts after the 17px space */
left: 0;
right: 0;
height: 2px; /* Thin line to represent the top part of the left and right borders */
background-color: black; /* Border color */
}
.manifest-title {
position: relative;
background: var(--foreground-color);
z-index: 1;
padding-right: 10px;
padding-left: 10px;
}
.piece-box {
flex: 1 1 150px;
position: relative; /* needed for pseudo-element positioning */
}
/* Add a vertical line to the left of all boxes except the first */
.piece-box + .piece-box::before {
content: '';
position: absolute;
left: -1px; /* move line 5px to the left of the box */
top: 10%; /* optional: adjust vertical start */
bottom: 10%; /* optional: adjust vertical end */
width: 1px; /* line thickness */
background-color: black;
}
.root-title-underlined::after {
content: "";
position: absolute;
bottom: 0; /* Position the bar below the text */
left: 0;
width: 100%; /* Make it the same width as the text */
height: 5px; /* Thickness of the bar */
background-color: var(--underline-color, lightgrey); /* Default to light grey if no color is provided */
transform: scaleX(0); /* Start with the bar hidden */
transform-origin: bottom left; /* Start from the right for a smooth animation */
transition: transform 0.8s ease-out; /* Smooth transition for the appearance of the bar */
z-index: -1;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.post-card:hover .root-title-underlined:after {
transform: scaleX(1); /* Reveal the bar on hover */
transform-origin: bottom left; /* Make the bar grow from left to right */
}
/* Disable transitions on touch devices and keep content hidden */
@media (pointer: coarse) {
/* No hover effect for touch devices */
.post-card:hover .root-title-underlined:after {
transform: scaleX(0); /* Reveal the bar on hover */
transform-origin: bottom left; /* Make the bar grow from left to right */
}
}
.root-menu-title {
border: #0056b3;
}
/* Italic body text */
em, i {
font-family: 'Baskerville', serif; /* Italicized text */
font-style: italic; /* Ensure italic style is applied */
}
ul {
margin: 0;
}
.bg-steel {
background-color: var(--theme-color);
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: var(--foreground-color);
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
/* Bootstrap 5 nav-link override - remove blue color */
.nav-link {
color: inherit;
}
.nav-link:hover,
.nav-link:focus {
color: inherit;
}
/* Mobile offcanvas navigation panel — only below the lg breakpoint, where
the .offcanvas is an actual sliding panel. At lg+ Bootstrap renders the
same element inline, so these overrides must NOT apply there (otherwise
they'd recolor the desktop avatar dropdown, which lives inside it). */
@media (max-width: 991.98px) {
.site-header .offcanvas {
background-color: var(--theme-color);
color: var(--foreground-color);
max-width: 80vw;
}
.site-header .offcanvas .offcanvas-title {
color: var(--foreground-color);
}
/* Offcanvas body already scrolls (overflow-y: auto) so the user menu can
never be cut off by the viewport. Give items roomier touch targets.
Items inside an actual .dropdown-menu popover (e.g. the logged-out
language selector) keep Bootstrap's default dark-on-white styling, so
they're excluded here. */
.site-header .offcanvas .dropdown-item:not(.dropdown-menu .dropdown-item),
.site-header .offcanvas .navbar-nav > .nav-link {
color: var(--foreground-color);
white-space: normal;
padding: 0.55rem 0.5rem;
border-radius: 0.375rem;
}
.site-header .offcanvas .dropdown-item:not(.dropdown-menu .dropdown-item):hover,
.site-header .offcanvas .dropdown-item:not(.dropdown-menu .dropdown-item):active,
.site-header .offcanvas .navbar-nav > .nav-link:hover,
.site-header .offcanvas .navbar-nav > .nav-link:focus {
background-color: rgba(255, 255, 255, 0.12);
color: var(--foreground-color);
}
/* Profile banner at the top of the user section */
.site-header .mobile-user-menu {
margin-top: 0.25rem;
}
.site-header .mobile-user-header {
color: var(--foreground-color);
padding: 0.5rem;
margin-bottom: 0.25rem;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 0.5rem;
}
.site-header .mobile-user-header .lg-avatar-icon {
border: 2px solid rgba(255, 255, 255, 0.5);
}
/* Section dividers between groups of links. The user-menu dividers are
inside a flex-column .navbar-nav,
so the wrapping items must span full width or the
collapses to
content width (i.e. shows as nothing). */
.site-header .offcanvas .navbar-nav > li {
width: 100%;
}
/* .dropdown-divider colours its line from --bs-dropdown-divider-bg, which
is only defined inside a .dropdown-menu — in the offcanvas it's empty, so
the border renders transparent. Set the full border-top explicitly. */
.site-header .offcanvas .dropdown-divider,
.site-header .offcanvas .mobile-section-divider {
width: 100%;
height: 0;
border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.25);
opacity: 1;
margin: 0.5rem 0;
}
/* "Next Scheduled Match" header + time read against the dark panel. */
.site-header .offcanvas .dropdown-header,
.site-header .offcanvas .scheduled-time {
color: rgba(255, 255, 255, 0.65);
}
}
/* Scheduled-match time in the desktop dropdown (white background): keep it a
muted gray. text-muted was dropped from the markup so the mobile panel can
override the color without specificity fights. */
.site-header .dropdown-menu .scheduled-time {
color: #6c757d;
}
.content-section {
background: var(--foreground-color);
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 16px;
}
.content-box {
background: var(--foreground-color);
border: 1px solid #dddddd;
border-radius: 3px;
padding: 4px 8px;
flex: 1 1 45%;
max-width: 45%;
}
.responsive-img {
max-width: 100%;
height: auto;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.post-card {
position: relative;
transition: transform 0.5s ease-out, box-shadow 0.3s ease-out; /* Smooth transition for padding and transform */
overflow: hidden; /* Hide anything that overflows (like the hidden div) */
}
.post-card:hover {
transform: scale(1.05); /* Slightly scale up the post-card */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle drop shadow */
}
.hidden-description {
border-top: 1px solid #e3e3e3;
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 500ms, opacity 1s ease-in-out;
}
.hidden-description > div {
overflow: hidden;
}
.post-card:hover .hidden-description {
grid-template-rows: 1fr;
opacity: 1;
}
.limited-text {
display: -webkit-box;
-webkit-line-clamp: 4; /* Limits to 4 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Standard line-clamp for compatibility (though support is limited) */
display: box;
line-clamp: 4; /* Limits to 4 lines (standard property) */
box-orient: vertical;
}
.hidden-snippet {
display: grid;
grid-template-columns: 0fr;
opacity: 0; /* Start with hidden opacity */
transition: grid-template-columns 700ms, opacity 700ms ease-in-out; /* Add opacity transition */
white-space: nowrap;
}
.hidden-snippet > div {
overflow: hidden;
}
.post-card:hover .hidden-snippet {
grid-template-columns: 1fr;
opacity: 1; /* Fade in the content when hovered */
}
.hidden-status {
display: grid;
grid-template-columns: 0fr;
opacity: 0; /* Start with hidden opacity */
transition: grid-template-columns 1s ease-out 1s, opacity 0.5s ease-in-out; /* Add opacity transition */
white-space: nowrap;
}
.hidden-status > div {
overflow: hidden;
}
.list-group-item-action:hover .hidden-status,
.post-card:hover .hidden-status {
grid-template-columns: 1fr;
opacity: 1; /* Fade in the content when hovered */
transition: grid-template-columns 0s ease-out, opacity 0.5s ease-in-out; /* Fast in, slow fade */
}
@media (prefers-reduced-motion) {
.post-card {
transition: none;
}
.hidden-description {
transition: none;
}
.hidden-snippet {
transition: none;
}
.hidden-status {
transition: none;
}
.list-group-item-action:hover .hidden-status,
.post-card:hover .hidden-status {
transition: none;
}
.root-title-underlined::after {
transition: none;
}
}
/* Disable transitions on touch devices and keep content hidden */
@media (pointer: coarse) {
/* No hover effect for touch devices */
.post-card:hover .hidden-content {
opacity: 0; /* Keep content hidden even on hover */
visibility: hidden; /* Keep visibility hidden */
}
.post-card:hover .hidden-description {
grid-template-rows: 0fr;
opacity: 0; /* Keep content hidden even on hover */
}
.list-group-item-action:hover .hidden-status,
.post-card:hover .hidden-snippet,
.post-card:hover .hidden-status {
grid-template-columns: 0fr;
opacity: 0; /* Keep content hidden even on hover */
}
}
.lore-content {
font-style: italic;
}
.article-img {
max-height: 80px;
max-width: 80px;
margin-right: 16px;
height: auto; /* Allow height to adjust */
width: auto; /* Allow width to adjust */
border-radius: 10px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
.faction-icon {
max-height: 20px; /* 10% of viewport height */
max-width: 20px; /* 10% of viewport width */
height: auto;
width: auto;
margin-right: 2px;
margin-bottom: 2px;
border-radius: 2px;
}
.avatar-icon {
width: 20px; /* Fixed width */
height: 20px; /* Fixed height */
margin-right: 2px;
margin-bottom: 2px;
border-radius: 50%;
object-fit: cover;
}
.md-avatar-icon {
width: 30px; /* Fixed width */
height: 30px; /* Fixed height */
margin-right: 2px;
margin-bottom: 2px;
border-radius: 50%;
object-fit: cover;
}
.lg-avatar-icon {
width: 40px; /* Fixed width */
height: 40px; /* Fixed height */
margin-right: 2px;
margin-bottom: 2px;
border-radius: 50%;
object-fit: cover;
}
.xl-avatar-icon {
width: 80px; /* Fixed width */
height: 80px; /* Fixed height */
margin-right: 2px;
margin-bottom: 2px;
border-radius: 50%;
object-fit: cover;
}
.icon-bar {
display: flex;
gap: 0; /* optional: explicitly removes space */
}
/* Per-player faction icons on the matches page. The player names stay fixed on
the left (.effort-names); only the icon grid (.effort-grid-scroll) scrolls
horizontally, as a single unit. Both columns use the same fixed row height so
their rows line up. */
:root {
--effort-row-height: 28px;
}
.effort-names .effort-row,
.effort-grid > * {
height: var(--effort-row-height);
}
.effort-row {
white-space: nowrap;
}
.effort-names {
/* match the scroll container's vertical padding so the name rows line up
with the icon-grid rows */
padding: 6px 0;
}
.effort-grid-scroll {
/* fill the width left of the names so the grid can be pushed to the right
edge (don't rely on the Bootstrap flex-grow-1 utility being present) */
flex: 1 1 auto;
/* scroll horizontally only when the grid is wider than the available space;
auto means no scrollbar (or drag) when everything already fits */
overflow-x: auto;
overflow-y: hidden; /* height always fits the rows; no vertical scrollbar */
min-width: 0; /* allow the flex child to shrink so it can scroll */
display: flex;
/* breathing room so the (oversized) laurel overlay isn't clipped at the edges
(it can spill ~11px left and ~5px up beyond its cell) */
padding: 6px 12px;
}
.effort-grid-scroll > .effort-grid {
flex-shrink: 0; /* don't squeeze the fixed-width cells when scrolling */
/* right-justify within the card when there's room; on overflow the auto
margin collapses to 0 so content scrolls from the left as usual */
margin-left: auto;
}
.effort-grid {
display: grid;
grid-template-columns: repeat(var(--effort-grid-games), 28px);
align-items: center;
column-gap: 4px;
/* keep the laurel overlay (larger than a cell) from being clipped vertically */
overflow: visible;
}
.effort-grid-cell {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
/* Clickable card hover affordance (also defined inline on the matches page). */
.group-card {
transition: box-shadow 0.2s;
}
.group-card:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* Clickable Stage / Round sections on the bracket page.
The whole section is a click target via a .stretched-link overlay. The
inner match cards must sit above that overlay so they stay independently
clickable, hence the raised z-index on .bracket-section .card. */
.bracket-section {
transition: box-shadow 0.2s;
}
.bracket-section:hover {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* Only the innermost hovered section shows the shadow: a stage drops its
shadow when a round inside it is hovered, and any section drops its shadow
when a match card (linked game) inside it is hovered. */
.bracket-section:has(.bracket-section:hover),
.bracket-section:has(.group-card:hover) {
box-shadow: none;
}
.bracket-stretched-link {
z-index: 1;
}
/* A round sits inside a stage; raise it so its overlay (and its match cards)
win clicks over the surrounding stage overlay. */
.bracket-round {
z-index: 2;
}
/* Match cards live in a section's card-body; lift the clickable (game-linked)
ones above their section's stretched-link overlay so they stay independently
clickable. Scoped to .group-card so non-linked match cards (plain divs with
no game yet) stay below the overlay and let the round's stretched-link
receive the hover/click. */
.bracket-section .card-body .group-card {
position: relative;
z-index: 3;
}
/* Header icon reacts to hovering anywhere on the section. */
.bracket-section-header .bi {
opacity: 0.6;
transition: transform 0.15s, opacity 0.15s, color 0.15s;
}
.bracket-section:hover > .bracket-section-header {
color: var(--bs-primary);
}
.bracket-section:hover > .bracket-section-header .bi {
opacity: 1;
color: var(--bs-primary);
}
.bracket-section:hover > .bracket-section-header .bi.bi-chevron-right {
transform: translateX(2px);
}
/* Keep the header highlight tied to the innermost hovered section: a stage
header stays neutral while a round or match card inside it is hovered. */
.bracket-section:has(.bracket-section:hover) > .bracket-section-header,
.bracket-section:has(.group-card:hover) > .bracket-section-header {
color: inherit;
}
.bracket-section:has(.bracket-section:hover) > .bracket-section-header .bi,
.bracket-section:has(.group-card:hover) > .bracket-section-header .bi {
opacity: 0.6;
color: inherit;
transform: none;
}
.centered-icon {
display: flex;
width: var(--icon-width);
justify-content: center;
max-height: 50px;
}
.status-icon {
display: block;
max-width: 100%;
height: auto;
padding-left: 1%;
object-fit: contain;
border-radius: 6px;
}
.status-icon.greyed-out {
filter: grayscale(100%);
opacity: 0.6; /* dim it slightly */
}
.external-link-image {
max-height: 40px;
max-width: 40px;
height: auto;
width: auto;
margin-right: 2px;
margin-bottom: 2px;
border-radius: 5px;
}
.md-faction-icon {
max-height: 30px;
max-width: 30px;
height: auto;
width: auto;
margin-right: 2px;
margin-bottom: 2px;
border-radius: 3px;
}
.lg-faction-icon {
max-height: 40px;
max-width: 40px;
height: auto;
width: auto;
margin-right: 2px;
margin-bottom: 2px;
border-radius: 3px;
}
/* Site icon to the left of the brand title. Sized in em and aligned to the
text's middle, with vertical margins collapsed so it never increases the
brand's line height (the title baseline/height stays unchanged). */
.site-header .navbar-brand .brand-icon,
.site-header .offcanvas-title .brand-icon {
height: 1.4em;
width: auto;
margin-right: 0.4rem;
margin-top: -0.5em;
margin-bottom: -0.5em;
vertical-align: 0.2em;
border-radius: 3px;
}
.wide-icon {
max-height: 50px;
max-width: 100px;
height: auto;
width: auto;
margin-right: 2px;
margin-bottom: 2px;
border-radius: 3px;
}
a {
color: inherit;
text-decoration: none; /* Removes underline */
}
a:hover {
color: black;
text-decoration: none;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px; /* Space below the table */
}
th, td {
padding: 12px; /* More padding for spacing */
text-align: left;
vertical-align: middle; /* Center align vertically */
}
@media (max-width: 768px) {
table {
font-size: 12px; /* You can adjust this value as needed */
}
th, td {
padding: 8px; /* Optionally reduce padding as well */
}
}
.effort-rows {
border-top: 1px solid #000; /* Line before the tbody */
}
.effort-rows tr {
border-bottom: 1px solid #ddd; /* Optional: line between rows */
}
.effort-rows td {
padding-left: 15px; /* Space between columns */
padding-right: 15px; /* Space between columns */
}
.effort-rows td.username {
max-width: 100px;
overflow: hidden; /* Hide overflow text */
text-overflow: ellipsis; /* Add "..." when truncated */
}
.adset-img {
max-height: 300px;
max-width: 225px;
height: auto; /* Allow height to adjust */
width: auto; /* Allow width to adjust */
border-radius: 10px;
}
.rounded-corner-img {
border-radius: 10px;
}
.deck-img {
max-height: 700px;
max-width: 500px;
height: auto; /* Allow height to adjust */
width: auto; /* Allow width to adjust */
border-radius: 10px;
}
.avatar-sm {
max-height: 10vh; /* 10% of viewport height */
max-width: 10vw; /* 10% of viewport width */
height: auto;
width: auto;
border-radius: 50%; /* Optional: Makes the image round */
}
.game-data {
border: 5px dotted red;
display: flex;
gap: 1rem;
}
.game-data > * {
outline: 2px solid lime;
flex-shrink: 1;
flex-grow: 0;
}
.game-player {
flex-shrink: 0;
flex-basis: 12ch;
}
.game-faction {
flex-grow: 1;
flex-basis: 30ch;
}
.game-score {
flex-shrink: 0;
flex-basis: 8ch;
}
tr[data-href] {
cursor: pointer;
}
.turn-form {
border-bottom: 1px solid black;
}
.turn-header, .turn-form {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.turn-column {
flex: 1; /* Makes each column take equal width */
padding: 5px;
text-align: center; /* Center-align text */
}
.turn-column input,
.turn-column select,
.turn-column span {
width: 100%; /* Ensure form fields span the full column width */
}
.hidden {
display: none;
}
#turn-form-list {
max-width: 100%;
overflow-x: auto;
}
.turn-column.total-points {
font-weight: bold;
}
.total-row {
font-weight: bold;
}
.inline-form {
display: flex;
align-items: center;
}
/* Each individual chart */
.chart {
flex: 1; /* Default behavior: the chart takes up equal space */
}
/* Make the line chart 3/4 of the container width */
#lineChartContainer {
flex: 3; /* 3/4 of the width */
}
/* Make the pie chart 1/4 of the container width */
#pieChartContainer {
flex: 3; /* 1/4 of the width */
}
/* Container that holds both charts side by side */
.chart-container {
display: flex; /* Use flexbox to lay them out in a row */
justify-content: space-between; /* Space out the charts */
width: 100%; /* Take up full width of the parent container */
margin: 0 auto; /* Center the container */
/*padding: 10px; /* Optional: Add padding inside container */
box-sizing: border-box; /* Prevent padding from affecting the layout */
}
/* Optional: Set a maximum width for the chart containers */
.chart-container {
max-width: 1200px; /* Set max width for large screens */
}
/* Make individual charts responsive */
.chart-container .chart {
flex: 1 1 48%; /* Each chart will take up ~50% of the container */
margin: 0 10px; /* Space between charts */
box-sizing: border-box; /* Include padding and margins within the element's total width */
}
/* Make sure the canvas (chart) adjusts to the container size */
#pieChart, #scorecardChart {
width: 100% !important; /* Make the charts responsive */
height: auto !important; /* Keep aspect ratio */
}
/* On small screens, stack the charts vertically */
@media (max-width: 768px) {
.chart-container {
flex-direction: column; /* Stack charts vertically on small screens */
align-items: center; /* Center-align the charts */
}
.chart-container .chart {
width: 100%; /* Ensure the chart takes up full width */
margin: 10px 0; /* Space between charts */
}
/* Adjust the canvas chart sizes for mobile */
#pieChart, #scorecardChart {
width: 100%; /* Ensure full width on smaller screens */
height: auto !important; /* Keep aspect ratio intact */
}
}
th.sortable {
cursor: pointer;
text-decoration: underline;
}
th.sortable:hover {
background-color: #f1f1f1; /* Light gray background on hover */
}
.form-control-num {
width: 60px; /* Adjust the width for a 3-digit number */
text-align: center; /* Center the text inside the input box */
}
.compact-file-input {
display: none; /* Hide the default file input */
}
.file-input-button {
background-color: #007bff;
color: var(--foreground-color);
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
border-radius: 5px;
}
.file-input-button:hover {
background-color: #0056b3;
}
.hidden-buttons {
display: none; /* Hide the buttons initially */
}
.hidden-pieces {
display: none; /* Hide the buttons initially */
}
.parent {
position: relative;
display: inline-block; /* Ensures images don't break out of the parent container */
}
.image1 {
position: relative;
top: 0;
left: 0;
/* border: 1px red solid; */
}
tr.clickable-row:hover {
background-color: #f1f1f1; /* Light gray background on hover */
}
.clickable-segment:hover {
background-color: #f1f1f1; /* Light gray background on hover */
}
.soft-clickable-segment {
cursor: pointer;
border-radius: 8px; /* Rounded corners */
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth fade */
padding: 0.5rem 1rem; /* Optional spacing */
}
.soft-clickable-segment:hover {
background-color: #f9f9f9; /* Even softer light gray */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); /* Subtle shadow on hover */
}
.wrappable-link {
word-break: break-all;
overflow-wrap: break-word;
white-space: normal;
}
.wrappable-text {
word-break: break-word;
overflow-wrap: break-word;
white-space: pre-line;
}
.clickable-link {
color: #007bff; /* Link color */
text-decoration: underline; /* Underline the text */
cursor: pointer; /* Make the cursor a hand when hovering */
transition: color 0.3s ease; /* Smooth transition for hover color */
}
.clickable-link:hover {
color: #0056b3; /* Darker blue on hover */
text-decoration: underline; /* Keep underline on hover */
}
.subtle-link {
color: grey; /* Link color */
/* text-decoration: underline; */
cursor: pointer; /* Make the cursor a hand when hovering */
transition: color 0.3s ease; /* Smooth transition for hover color */
}
.subtle-link:hover {
color: darkblue; /* Darker blue on hover */
text-decoration: underline; /* Keep underline on hover */
}
.image2 {
position: absolute;
top: -4.5px; /* Adjust as needed */
left: -10.5px; /* Adjust as needed */
/* border: 1px green solid; */
z-index: 10; /* Make sure this image appears on top */
}
.search-popup {
position: absolute;
top: 100%; /* Position below the search input */
left: 0;
right: 0;
background-color: var(--foreground-color);
border: 1px solid #ccc;
max-height: 300px;
overflow-y: auto;
width: 100%;
z-index: 1000;
display: none; /* Initially hidden */
}
/* Hidden by default; JS (showSearchResults / htmx:afterSwap) sets
display:block only when there are actual results to show. Keeping this as
display:none avoids the empty popup rendering as a thin bordered line. */
#universal-search-results {
display: none;
}
.search-bar {
border: 0;
display: flex;
border-radius: 100vh;
background: var(--foreground-color);
width: 27px;
position: relative;
transition: width 300ms cubic-bezier(0.2, 0.75, 0.42, 1.10);
overflow: hidden;
justify-content: center; /* Center the content when collapsed */
align-items: center;
}
.search-bar:focus-within {
width: 125px;
.search-bar-input {
opacity: 1;
cursor: initial;
}
.search-bar-submit {
margin-left: auto;
margin-right: 0;
}
}
/* The hamburger toggler only shows on mobile and always sits in the top-right.
Position it absolutely (relative to the fixed-top navbar) so it's out of the
flex flow — that way the expanding search bar never pushes it onto a second
line. */
.site-header .navbar-toggler {
position: absolute;
right: 1rem;
top: 1.25rem;
/* keep the toggler narrow so it hugs the icon */
padding-left: 0.35rem;
padding-right: 0.35rem;
}
/* Only on narrow screens (below Bootstrap's sm) does the expanded search bar
reach the right-anchored toggler. There, hide the toggler while the search
is focused so they don't overlap; above sm there's room, so leave it shown.
focus-within bubbles to the search wrapper, a preceding sibling of the
toggler. */
@media (max-width: 429.98px) {
.universal-search-wrap:focus-within ~ .navbar-toggler {
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease;
}
}
.search-bar-input {
flex-grow: 1;
padding: 0 0.5em;
border: 0;
background: transparent;
position: absolute;
top: 0;
bottom: 0;
left: 0;
line-height: 30px;
opacity: 0;
cursor: pointer;
max-width: 110px; /* Limit the width of the input */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-bar-input:focus {
outline: 0;
}
.search-bar-submit {
cursor: pointer;
border: 0;
background: transparent;
border-radius: 100vh;
background: transparent;
margin-left: auto;
margin-right: auto;
transition: background 300ms ease-in-out;
color: var(--theme-color);
}
.sub-data {
border-top: 1px solid #e3e3e3;
}
.htmx-indicator{
display: none;
}
.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request{
display: inline !important;
}
.htmx-inverted-indicator{
display: inline;
}
.htmx-request .htmx-inverted-indicator{
display: none;
}
.bar-container {
width: 100%; /* Full-width of the container */
padding: 10px 0;
border-left: 2px solid black;
}
.bar-background {
background-color: var(--bar-color, darkgrey); /* Dynamic background color of the bar */
height: 30px; /* Height of the bar */
/*width: 20%; /* Width of the bar (can be dynamic or fixed) */
position: relative; /* Positioning the label */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Horizontal, vertical, blur radius, color */
/* border: 1px solid black; */
/*border-radius: 5px; /* Optional: for rounded corners */
}
@keyframes expandWidth {
0% {
width: 0;
}
100% {
width: var(--bar-width); /* Final width */
}
}
.bar-background-variable {
width: var(--bar-width); /* Dynamic width of the bar */
animation: expandWidth 1s ease-out forwards;
}
.bar-background-low {
width: 28%; /* Width of the bar */
}
.bar-background-moderate {
width: 59%; /* Width of the bar */
}
.bar-background-high {
width: 98%; /* Width of the bar */
}
.bar-background-none {
width: 2%; /* Width of the bar */
}
.bar-background-any {
position: relative;
width: 100%;
border: 2px dashed #666;
background-color: transparent;
overflow: hidden; /* To contain the pseudo background */
}
.bar-background-any::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
45deg,
var(--bar-color),
var(--bar-color) 10px,
#bbb 10px,
#bbb 20px
);
opacity: 0.35;
z-index: 0;
}
.bar-background-any .bar-text {
position: relative;
z-index: 1;
}
.bar-text {
position: absolute; /* Absolutely position the text inside the bar */
top: 50%; /* Vertically center the text */
left: 11px; /* Adjust the left position to control text spacing */
transform: translateY(-50%); /* To fine-tune vertical centering */
color: #fff; /* Text color */
font-weight: bold;
text-transform: uppercase;
opacity: 1;
}
.bar-black-text {
color: black; /* Text color */
}
.bar-label {
padding-left: 3px;
font-style: italic;
font-size: 22px;
}
.bar-click-zone {
cursor: pointer;
user-select: none;
-webkit-user-select: none; /* Safari diable select */
}
.bar-click-zone:hover {
opacity: 0.85;
transition: opacity 0.2s ease-in-out;
}
/* @scroll-timeline scrollTimeline {
source: scroller;
time-range: 100%;
} */
.hero-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
.hero-image {
background-image: url("../images/homepage/Archive.6496e84cb121.webp");
background-position: center; /* Center the image */
background-size: cover; /* Cover the entire container */
width: 100%;
height: 100%;
}
/* Background Banner */
.background-image {
position: fixed;
top: var(--header-padding); /* moves image down for header */
left: 50%; /* Position it at 50% of the viewport width */
transform: translateX(-50%);
z-index: -100; /* Furthest Back */
width: auto; /* You can set specific width/height for each image if needed */
height: 60vh; /* 60% of the viewport height */
min-height: calc(100vw / var(--scale-factor)); /* Keeps aspect ratio */
min-width: 100vw;
}
/* Make the parent container a flex container */
.background-image-wrapper {
position: fixed; /* Keep the wrapper fixed on the screen */
top: calc(var(--header-padding)); /* Adjust for header space */
left: calc(50% + var(--start-position)); /* Center horizontally */
transform: translateX(-50%); /* Adjust to center the image correctly */
z-index: var(--z-depth); /* Put behind the content */
display: flex; /* Turn the parent into a flex container */
justify-content: center; /* Centers items horizontally */
align-items: center; /* Centers items vertically */
width: auto; /* Full viewport width */
height: 60vh; /* You can adjust based on your needs */
min-height: calc(100vw / var(--scale-factor)); /* Keeps aspect ratio */
min-width: 100vw; /* Minimum width of 100vw */
overflow: visible;
}
.background-image-wrapper img {
width: 100%; /* Ensures the image doesn't overflow the container */
height: 100%; /* Maintain the aspect ratio */
min-height: calc(100vw / var(--scale-factor)); /* Keeps aspect ratio */
min-width: 100vw;
object-fit: cover; /* Makes sure the image covers the container area */
overflow: visible;
}
/* For dynamic picture container */
.background-image-wrapper picture {
width: 100%; /* Ensures the image doesn't overflow the container */
height: 100%; /* Maintain the aspect ratio */
min-height: calc(100vw / var(--scale-factor)); /* Keeps aspect ratio */
min-width: 100vw;
object-fit: cover; /* Makes sure the image covers the container area */
overflow: visible;
}
.background-image-padding {
height: 60vh;
min-height: calc(100vw / var(--scale-factor)); /* Keeps aspect ratio */
}
/* Media Query for Very Small Screens */
@media (max-width: 431px) {
.background-image {
height: 15vh; /* Reduce height for small screens */
min-height: calc(100vw / var(--scale-factor)); /* Keep aspect ratio */
}
.background-image-wrapper {
left: calc(50% + var(--start-position) / 1); /* Center horizontally */
height: 15vh; /* Reduce height for small screens */
}
.background-image-padding {
height: 15vh; /* You can adjust based on your needs */
}
}
/* Media Query for Small Screens */
@media (max-width: 550px) {
.background-image {
height: 20vh; /* Reduce height for small screens */
min-height: calc(100vw / var(--scale-factor)); /* Keep aspect ratio */
}
.background-image-wrapper {
left: calc(50% + var(--start-position) / 1); /* Center horizontally */
height: 20vh; /* Reduce height for small screens */
}
.background-image-padding {
height: 20vh; /* You can adjust based on your needs */
}
}
/* Medium sceens */
@media (max-width: 1300px) {
.background-image {
height: 22vh; /* Reduce height for small screens */
min-height: calc(100vw / var(--scale-factor)); /* Keep aspect ratio */
}
.background-image-wrapper {
left: calc(50% + var(--start-position) / 1); /* Center horizontally */
height: 22vh; /* Reduce height for small screens */
}
.background-image-padding {
height: 22vh; /* You can adjust based on your needs */
}
}
@media (min-width: 768px) {
/* Apply animations only if "reduce motion" is set to "no-preference" */
@media (prefers-reduced-motion: no-preference) {
/* Check if the browser supports scroll timelines */
@supports (--css: variables) {
/* Fallback animation for browsers that DON'T support scroll-timeline */
#progress-right {
transform: translateX(var(--offset-percent)); /* Set initial position */
animation: fallback-slide 2.5s ease-in-out forwards;
animation-delay: 0.7s;
}
@keyframes fallback-slide {
from {
transform: translateX(var(--offset-percent));
}
to {
transform: translateX(0);
}
}
/* Scroll-based animation for browsers that support scroll-timeline */
@supports (animation-timeline: scroll()) {
/* Start and End Position */
@keyframes foreground-right {
from {
transform: translateX(0); /* Initial state */
}
to {
transform: translateX(var(--offset-percent)); /* Final state based on scroll */
}
}
/* Scroll timing of animation */
#progress-right {
transform: none; /* Remove transform as scroll-timeline will handle it */
animation: foreground-right ease-in-out forwards;
animation-timeline: scroll();
animation-range: 3vh var(--slide-speed);
}
}
}
}
}
@keyframes slideUp {
0% {
transform: translateY(100%) translateX(-60%);
}
100% {
transform: translateY(0) translateX(-50%);
}
}
/* Grid */
#spinner {
display: none; /* Hide by default */
bottom: 0;
width: 100%;
height: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
place-items: center;
overflow: hidden;
}
#spinner.hx-request {
display: grid;
}
.image-container {
width: 60%;
height: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
place-items: center;
}
.image {
width: 100%;
grid-area: 1 / 1;
}
.top-image {
z-index: 10;
}
@keyframes moveImage {
0% {
transform: translateY(34%) translateX(-6%);
}
30% {
transform: translateY(0) translateX(0); /* Move to center */
}
60% {
transform: translateY(0) translateX(0); /* Move to center */
}
100% {
transform: translateY(34%) translateX(-6%); /* Move back to original position */
}
}
/* Apply the animation to the movement image */
.movement-image {
animation: moveImage 3s ease-in-out infinite; /* Run animation indefinitely */
z-index: 9;
}
.back-image {
z-index: 8;
}
#spinner.hx-request .movement-image {
transform: translateY(0) translateX(0);
}
/* =========================
Base Custom Button
========================= */
.custom-btn,
.custom-btn-sm,
.custom-btn-lg {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 400;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s ease-in-out;
background-color: var(--button-color, #0d6efd);
color: var(--text-color, white);
}
/* Hover, focus, active shared across all sizes */
.custom-btn:hover,
.custom-btn-sm:hover,
.custom-btn-lg:hover {
background-color: var(--hover-color, var(--button-color, #0d6efd));
color: var(--text-hover-color, var(--text-color, white));
text-decoration: none;
}
.custom-btn:focus,
.custom-btn-sm:focus,
.custom-btn-lg:focus {
outline: none;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.custom-btn:active,
.custom-btn-sm:active,
.custom-btn-lg:active {
background-color: var(--hover-color, var(--button-color, #0d6efd));
color: var(--text-hover-color, var(--text-color, white));
border-color: var(--button-color, #0d6efd);
}
/* =========================
Size Modifiers
========================= */
.custom-btn {
padding: 0.375rem 0.75rem; /* default */
font-size: 1rem;
border-radius: 0.25rem;
}
.custom-btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
border-radius: 0.2rem;
}
.custom-btn-lg {
padding: 0.5rem 1rem;
font-size: 1.25rem;
border-radius: 0.3rem;
}
/* Custom small outline button styling */
.btn-outline {
display: inline-block;
padding: 0.25rem 0.5rem; /* Bootstrap's padding for small buttons */
font-size: 0.875rem; /* Font size for small button */
font-weight: 400; /* Font weight for button text */
text-align: center;
text-decoration: none; /* Remove underline for links */
border: 1px solid var(--button-color); /* Blue border (default outline color for btn-outline-primary) */
border-radius: 0.25rem; /* Rounded corners, like Bootstrap */
background-color: transparent; /* Transparent background */
color: var(--button-color); /* Blue text color */
cursor: pointer; /* Pointer cursor on hover */
transition: all 0.15s ease-in-out; /* Smooth transition for hover and focus effects */
}
/* Hover effect */
.btn-outline:hover {
background-color: var(--button-color); /* Blue background on hover */
color: white; /* White text color on hover */
border-color: var(--button-color); /* Darker blue border on hover */
text-decoration: none; /* Remove underline on hover */
}
/* Focus effect */
.btn-outline:focus {
outline: none; /* Remove outline when focused */
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1); /* Blue shadow on focus */
}
/* Active (clicking) state */
.btn-outline:active {
background-color: var(--button-color); /* Darker blue when clicked */
border-color: var(--button-color); /* Darker blue border when clicked */
color: white; /* White text color when clicked */
}
/* Custom small outline button styling */
.btn-outline-inverted {
display: inline-block;
padding: 0.25rem 0.5rem; /* Bootstrap's padding for small buttons */
font-size: 0.875rem; /* Font size for small button */
font-weight: 400; /* Font weight for button text */
text-align: center;
text-decoration: none; /* Remove underline for links */
border: 1px solid black; /* Blue border (default outline color for btn-outline-inverted-primary) */
border-radius: 0.25rem; /* Rounded corners, like Bootstrap */
background-color: var(--button-color); /* Transparent background */
color: black; /* Blue text color */
cursor: pointer; /* Pointer cursor on hover */
transition: all 0.15s ease-in-out; /* Smooth transition for hover and focus effects */
}
/* Hover effect */
.btn-outline-inverted:hover {
background-color: black; /* Blue background on hover */
color: var(--button-color); /* White text color on hover */
border-color: black; /* Darker blue border on hover */
text-decoration: none; /* Remove underline on hover */
}
/* Focus effect */
.btn-outline-inverted:focus {
outline: none; /* Remove outline when focused */
box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1); /* Blue shadow on focus */
}
/* Active (clicking) state */
.btn-outline-inverted:active {
background-color: black; /* Darker blue when clicked */
border-color: black; /* Darker blue border when clicked */
color: var(--button-color); /* White text color when clicked */
}
.color-group-container {
display: flex; /* Flexbox to align items horizontally */
align-items: center; /* Align items vertically in the center */
gap: 10px; /* Space between the color square and the label */
}
.color-square {
width: 30px; /* Size of the color square */
height: 30px; /* Size of the color square */
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Soft drop shadow */
}
.homepage-image-container {
position: relative;
/* width: auto; */
width: 100%;
height: 60vh; /* 60% of the viewport height */
min-height: 40vh;
min-width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.homepage-image-container img,
.homepage-image-container picture {
width: 100%;
height: 100%;
object-fit: cover; /* Ensure the image covers the container without distortion */
}
.text-overlay {
top: 20%;
position: absolute;
left: max(20px, 10vw); /* Minimum 20px padding from left edge */
color: white;
text-align: center;
padding: 10px 20px 20px 20px; /* top, right, bottom, left */
background: rgba(0, 0, 0, 0.7); /* Solid color fallback */
border-radius: 10px; /* Rounded corners */
font-size: 1.5rem;
max-width: calc(100% - 40px); /* Ensure it never exceeds viewport width minus padding */
}
.title-overlay {
font-size: 2rem;
padding: 10px; /* Add some padding for mobile */
}
.text-overlay-right {
left: auto;
right: max(20px, 10vw); /* Minimum 20px padding from right edge */
}
/* Ensure proper spacing at medium widths */
@media (max-width: 900px) and (min-width: 651px) {
.text-overlay {
left: max(20px, 5vw); /* Reduce viewport-based spacing for medium screens */
max-width: calc(100% - 40px);
}
.text-overlay-right {
right: max(20px, 5vw); /* Reduce viewport-based spacing for medium screens */
}
}
@media (max-width: 650px) {
.text-overlay {
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Offset by 50% to truly center the element */
width: auto; /* Ensure it doesn't stretch unnecessarily */
max-width: calc(100% - 40px); /* Maintain 20px spacing on each side */
min-width: min(75%, calc(100% - 40px)); /* Use 75% width but never exceed available space */
}
.text-overlay-right {
right: auto; /* Reset right positioning */
}
}
/* Ensures no extra space between images */
.homepage-image-container:not(:last-child) {
margin-bottom: 0;
}
.floating-alert {
position: fixed !important;
top: calc(var(--header-padding) + 0.5rem);
left: 50%;
transform: translateX(-50%);
width: min(600px, 90vw);
z-index: 1020;
}
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
max-width: 100%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.notification-wrapper {
position: relative;
display: inline-block;
}
.notification-badge {
position: absolute;
top: -8px;
right: -8px;
background-color: red;
color: white;
border: 2px solid white;
font-size: 0.65rem;
padding: 2px 6px;
border-radius: 999px;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
line-height: 1;
box-sizing: border-box;
}
.zoomable {
cursor: zoom-in;
}
.lightbox {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.9);
justify-content: center;
align-items: center;
}
.lightbox img {
border-radius: 10px;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;
display: block;
margin: auto;
}
.lightbox-thumb {
cursor: pointer;
transition: 0.3s;
}
.lightbox-thumb:hover {
opacity: 0.8;
}
.soft-shadow {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background-color: #fff;
padding: .5rem;
margin-bottom: .25rem;
max-width: 100%;
overflow: hidden;
word-wrap: break-word;
}
/* LAW OF ROOT */
/* .law-code {
font-size: 0.7em;
vertical-align: 0.15em;
} */
.law-entry {
display: grid;
grid-template-columns: 50px 1fr; /* First column fixed at 50px */
column-gap: 0.5em;
/* align-items: start; */
}
.law-entry > :first-child {
text-align: right; /* Right-align text in the first column */
}
.law-entry-sm {
display: grid;
grid-template-columns: 15px 1fr;
column-gap: 0.5em;
/* align-items: start; */
}
.law-entry-sm > :first-child {
text-align: right; /* Right-align text in the first column */
}
.law-code {
font-size: 0.7em;
color: #555;
white-space: nowrap;
text-align: center;
padding-top: 0.5em;
}
.law-content {
font-size: 1em;
}
.markdown-section table {
border-collapse: collapse;
margin: 1em 0;
font-size: 0.95em;
max-width: 100%;
width: auto;
}
.markdown-section th,
.markdown-section td {
border: 1px solid #ccc;
padding: 0.5em 0.75em;
text-align: left;
}
.markdown-section thead {
background-color: #f9f9f9;
font-weight: bold;
}
.smart-smallcaps {
font-size: 0.8em;
}
.large-char {
font-size: 1.5em;
}
.smallcaps {
font-size: 0.8em;
}
.light-green {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
padding: 0.5em 1em;
border-radius: 4px;
}
.light-yellow {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
padding: 0.5em 1em;
border-radius: 4px;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Faded background */
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}
.modal-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 90%;
animation: fadeIn 0.3s ease;
position: relative;
}
.modal-card form input,
.modal-card form textarea {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-close-button {
position: absolute;
top: 1rem;
right: 1rem;
background: transparent;
border: none;
font-size: 1.5rem;
font-weight: bold;
color: #333;
cursor: pointer;
z-index: 1000;
transition: color 0.2s;
}
.modal-close-button:hover {
color: #007bff;
}
.dropdown-item:hover {
background-color: var(--theme-color); /* your custom hover color */
color: var(--background-color); /* optional */
}
/* Change active (selected) background color */
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--theme-color); /* your custom active color */
color: var(--background-color); /* optional */
}
.highlight-temp {
position: relative;
z-index: 1;
}
.highlight-temp::before {
content: '';
position: absolute;
top: -2px;
bottom: -2px;
left: -6px;
right: -6px;
background-color: rgba(240, 240, 240, 0.8);
border-radius: 10px;
box-shadow: 0 0 10px rgba(240, 240, 240, 0.4);
z-index: -1;
pointer-events: none;
/* Start invisible */
opacity: 0;
transition: opacity 0.8s ease;
}
/* Show the highlight with fade-in */
.highlight-temp.active::before {
opacity: 1;
}
.inline-icon {
height: 1.2em; /* Matches the current font size */
width: auto; /* Maintains aspect ratio */
vertical-align: text-bottom; /* Aligns nicely with the text baseline */
}
.box-with-bar {
position: relative;
padding-left: 4vw;
/* padding-bottom: 1px; */
/* text-align: center; */
}
.box-with-bar::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background-color: black;
}
/* FAQ */
.accordion {
max-width: 800px;
margin: 2rem auto;
border-radius: 6px;
overflow: hidden;
}
.accordion-item {
border-bottom: 1px solid #e0e0e0;
}
.accordion-header {
background-color: #f9f9f9;
cursor: pointer;
padding: 1rem 1.5rem;
font-weight: 600;
font-size: 1.2rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s;
}
.accordion-header:hover {
background-color: #f1f1f1;
}
.accordion-body {
padding: 1rem 1.5rem 1rem;
display: none;
font-size: 1rem;
color: #555;
}
.accordion-header::after {
content: "＋";
font-size: 1.2rem;
transition: transform 0.3s;
}
.accordion-item.active .accordion-body {
display: block;
animation: accordionFadeIn 0.3s ease-in-out;
}
.accordion-item.active .accordion-header::after {
content: "－";
}
@keyframes accordionFadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
/* Advanced search buttons */
.select-option {
display: inline-block;
cursor: pointer;
user-select: none;
}
.select-option.selected {
box-shadow: 0 0 0 2px var(--button-color);
transform: scale(1.05);
}
.button-option {
display: inline-block;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f4f4f4;
cursor: pointer;
margin-right: 5px;
user-select: none;
}
.item-option {
height: 40px;
width: 40px;
}
/* Law comparison Markdown */
.markdown-body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
line-height: 1.6;
color: #24292f;
background-color: #fff;
padding: 2rem;
max-width: 900px;
margin: 2rem auto;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
/* Headings */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
border-bottom: 1px solid #eaecef;
padding-bottom: 0.3em;
margin-top: 1.4em;
font-weight: 600;
line-height: 1.25;
}
.markdown-body h1 { font-size: 2em; }
.markdown-body h2 { font-size: 1.5em; }
.markdown-body h3 { font-size: 1.25em; }
/* Paragraphs and lists */
.markdown-body p,
.markdown-body ul,
.markdown-body ol {
margin-top: 0;
margin-bottom: 1em;
}
.markdown-body ul,
.markdown-body ol {
padding-left: 2em;
}
.markdown-body li {
margin: 0.25em 0;
}
/* Tables */
.markdown-body table {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
}
.markdown-body th,
.markdown-body td {
border: 1px solid #dfe2e5;
padding: 0.5em 0.75em;
}
.markdown-body th {
background-color: #f6f8fa;
font-weight: 600;
}
/* Code blocks and inline code */
.markdown-body code {
background-color: #f6f8fa;
padding: 0.2em 0.4em;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
font-size: 0.95em;
}
.markdown-body pre code {
background: none;
padding: 0;
}
.markdown-body pre {
background-color: #f6f8fa;
padding: 1em;
border-radius: 6px;
overflow-x: auto;
font-size: 0.9em;
line-height: 1.45;
border: 1px solid #dfe2e5;
}
/* Blockquotes */
.markdown-body blockquote {
color: #6a737d;
border-left: 0.25em solid #dfe2e5;
padding: 0 1em;
margin: 0.8em 0;
}
/* Links */
.markdown-body a {
color: #0366d6;
text-decoration: none;
}
.markdown-body a:hover {
text-decoration: underline;
}
/* Horizontal rule */
.markdown-body hr {
border: 0;
border-top: 1px solid #eaecef;
margin: 2em 0;
}
/* Game list responsive grid: fills columns based on available width.
One column on narrow screens, more as the container gets wider. */
.game-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 16px;
align-items: start;
}
/* Keep cards from forcing horizontal overflow on very narrow screens */
@media (max-width: 400px) {
.game-grid {
grid-template-columns: 1fr;
}
}
/* Each game card already has its own margin-bottom (content-section);
the grid gap handles spacing, so suppress the doubled bottom margin. */
.game-grid > div > .post-card,
.game-grid > .post-card {
margin-bottom: 0;
}
/* Full-width rows inside the grid: the loading spinner and the stats header
should span all columns rather than occupying a single cell. */
.game-grid > #spinner,
.game-grid > #games-stats {
grid-column: 1 / -1;
}
/* Dashboard Widgets */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
align-items: stretch;
}
.dashboard-widget {
border-radius: 0.5rem;
overflow: hidden;
transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
min-height: 250px;
}
.dashboard-widget:hover {
transform: translateY(-2px);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.widget-img {
height: 120px;
object-fit: cover;
}
.discord-login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: var(--header-padding) 1rem 2rem;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #dcddde;
}
.discord-login-page .login-card {
background: #ffffff;
padding: 2.5rem;
border-radius: 8px;
width: 380px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
text-align: center;
}
.discord-login-page h1 {
margin-bottom: 1rem;
color: #2e3338;
font-weight: 700;
font-size: 2 rem;
}
.discord-login-page p {
color: #5e6772;
margin-bottom: 2rem;
font-size: 0.95rem;
}
.btn-discord {
background-color: #5865F2; /* Discord blurple */
border: none;
padding: 0.65rem 1.4rem;
font-size: 1rem;
width: 100%;
border-radius: 6px;
transition: background .15s ease;
font-weight: 600;
color: white;
}
.btn-discord:hover {
background-color: #4752c4;
}
.invalid-feedback {
display: block;
}
/* Subtle hover effect for cards*/
.card-hover {
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* ========================================
Warroom Navigation Header Styles
======================================== */
/* Main header container */
.section-nav-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: nowrap;
}
/* Navigation tabs container */
.section-nav-tabs {
display: flex;
row-gap: 0.25rem;
column-gap: 1.25rem;
align-items: baseline;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
/* Individual tab link */
.section-nav-tab {
position: relative;
padding: 0.5rem 0;
color: #6c757d;
text-decoration: none;
font-size: 1.1rem;
font-weight: 500;
transition: color 0.2s ease;
white-space: nowrap;
}
.section-nav-tab:hover {
color: var(--button-color);
}
/* Active tab styling with underline */
.section-nav-tab.active {
color: var(--button-color);
font-weight: 600;
}
.section-nav-tab.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background-color: var(--button-color);
border-radius: 2px;
}
/* Action buttons container */
.section-nav-action-buttons {
display: flex;
gap: 0.5rem;
align-items: flex-start;
flex-wrap: wrap;
flex-shrink: 0;
margin-left: auto;
}
/* Desktop buttons visible by default */
.section-nav-actions-desktop {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
/* Mobile dropdown hidden by default */
.section-nav-actions-mobile {
display: none;
gap: 0.25rem;
}
/* Mobile responsive styles */
@media (max-width: 768px) {
/* Stack header on very small screens if needed */
.section-nav-header {
gap: 0.75rem;
}
/* Reduce tab spacing on mobile */
.section-nav-tabs {
row-gap: 0.25rem;
column-gap: 1rem;
}
/* Scale down tab font size */
.section-nav-tab {
font-size: 0.95rem;
padding: 0.4rem 0;
}
/* Hide desktop buttons, show mobile dropdown */
.section-nav-actions-desktop {
display: none;
}
.section-nav-actions-mobile {
display: flex;
}
}
/* Extra small screens - further condensing */
@media (max-width: 480px) {
.section-nav-tabs {
row-gap: 0.25rem;
column-gap: 0.75rem;
}
.section-nav-tab {
font-size: 0.875rem;
}
}
/* Badge on navigation tabs */
.section-nav-tab-badge {
display: inline-block;
padding: 0.2em 0.5em;
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
color: #fff;
background-color: #dc3545;
border-radius: 10rem;
margin-left: 0rem;
vertical-align: middle;
}
/* Tab group: wraps a main tab + its sub-nav */
.section-nav-tab-group {
position: relative;
}
/* Sub-navigation links centered beneath parent tab */
.section-sub-nav {
position: absolute;
top: calc(100% + 4px);
left: 0;
display: flex;
gap: 0.75rem;
white-space: nowrap;
}
.section-sub-tab {
font-size: 0.7rem;
font-weight: 500;
color: #6c757d;
text-decoration: none;
letter-spacing: 0.03em;
transition: color 0.2s ease;
white-space: nowrap;
}
.section-sub-tab:hover {
color: var(--button-color);
}
.section-sub-tab.active {
color: var(--button-color);
font-weight: 700;
}
@media (max-width: 768px) {
.section-sub-tab {
font-size: 0.65rem;
}
}
/* Changelog highlight styling */
.changelog-selected {
border: 3px solid var(--theme-color) !important;
box-shadow: 0 0 15px rgba(95, 120, 138, 0.3) !important;
transition: all 0.3s ease-in-out;
}
.changelog-highlighted {
animation: highlight-pulse 1s ease-in-out;
}
@keyframes highlight-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.01);
}
}
/* Toggle Slider Base Styles */
.asset-mode-toggle,
.option-toggle {
display: flex;
background: #e9ecef;
border-radius: 50px;
padding: 4px;
position: relative;
width: 100%;
max-width: 800px;
}
.asset-mode-option,
.option-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 50px;
font-weight: 500;
color: #6c757d;
z-index: 1;
position: relative;
}
.asset-mode-option:hover,
.option-item:hover {
color: #495057;
}
.asset-mode-option.active,
.option-item.active {
color: #fff;
}
.asset-mode-slider,
.option-slider {
position: absolute;
top: 4px;
left: 4px;
height: calc(100% - 8px);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50px;
transition: transform 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* 3-option slider (33.333% width per option) */
.asset-mode-slider,
.option-toggle-3 .option-slider {
width: calc(33.333% - 4px);
}
.asset-mode-slider.position-1,
.option-toggle-3 .option-slider.position-1 {
transform: translateX(0);
}
.asset-mode-slider.position-2,
.option-toggle-3 .option-slider.position-2 {
transform: translateX(calc(100% + 4px));
}
.asset-mode-slider.position-3,
.option-toggle-3 .option-slider.position-3 {
transform: translateX(calc(200% + 8px));
}
/* 4-option slider (25% width per option) */
.option-toggle-4 .option-slider {
width: calc(25% - 4px);
}
.option-toggle-4 .option-slider.position-0 {
transform: translateX(0);
}
.option-toggle-4 .option-slider.position-1 {
transform: translateX(calc(100% + 4px));
}
.option-toggle-4 .option-slider.position-2 {
transform: translateX(calc(200% + 8px));
}
.option-toggle-4 .option-slider.position-3 {
transform: translateX(calc(300% + 12px));
}
.toggle-description {
margin-top: 12px;
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
font-size: 0.9rem;
color: #495057;
}
/* Responsive platform text - show full text on larger screens */
.toggle-text-short {
display: none;
}
.toggle-text-full {
display: inline;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.asset-mode-option,
.option-item {
padding: 8px 12px;
font-size: 0.85rem;
}
/* Extra compact for 4-option toggles */
.option-toggle-4 .option-item {
padding: 8px 6px;
font-size: 0.8rem;
}
.asset-mode-option i,
.option-item i {
font-size: 0.9rem;
}
.toggle-description {
font-size: 0.85rem;
padding: 10px;
}
/* Switch to short text on tablets */
.toggle-text-short {
display: inline;
}
.toggle-text-full {
display: none;
}
}
@media (max-width: 576px) {
.asset-mode-option,
.option-item {
padding: 6px 8px;
font-size: 0.75rem;
}
/* Very compact for 4-option toggles on mobile */
.option-toggle-4 .option-item {
padding: 6px 4px;
font-size: 0.7rem;
}
.asset-mode-option i,
.option-item i {
font-size: 0.85rem;
margin-right: 2px !important;
}
/* Even smaller icons for 4-option on mobile */
.option-toggle-4 .option-item i {
font-size: 0.75rem;
}
.toggle-description {
font-size: 0.8rem;
padding: 8px;
}
/* Reduce margin for icons on very small screens */
.option-item .me-1 {
margin-right: 0.15rem !important;
}
}
@media (max-width: 400px) {
/* Extra small screens - make 4-option even more compact */
.option-toggle-4 .option-item {
padding: 6px 2px;
font-size: 0.65rem;
}
.option-toggle-4 .option-item i {
font-size: 0.7rem;
}
}
/* ── Availability Calendar ── */
.availability-calendar {
overflow-x: auto;
}
.cal-grid {
display: grid;
grid-template-columns: 42px repeat(7, 1fr);
grid-template-rows: auto repeat(24, 1fr);
gap: 1px;
background: #dee2e6;
border: 1px solid #dee2e6;
border-radius: 4px;
min-width: 360px;
min-height: 320px;
}
.cal-header {
background: #f8f9fa;
text-align: center;
font-size: 0.7rem;
font-weight: 600;
padding: 4px 2px;
color: #495057;
}
.cal-corner {
background: #f8f9fa;
}
.cal-time-label {
background: #f8f9fa;
font-size: 0.6rem;
color: #6c757d;
text-align: right;
padding: 0 4px;
display: flex;
align-items: flex-start;
justify-content: flex-end;
line-height: 1;
}
.cal-cell {
background: #fff;
position: relative;
min-height: 12px;
transition: outline 0.1s;
}
.cal-cell:hover {
outline: 1.5px solid #495057;
outline-offset: -1px;
z-index: 2;
}
.cal-cell[title] {
cursor: default;
}
.cal-legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 6px;
font-size: 0.75rem;
color: #6c757d;
}
.cal-legend-item {
display: flex;
align-items: center;
gap: 4px;
}
.cal-legend-swatch {
width: 12px;
height: 12px;
border-radius: 2px;
flex-shrink: 0;
}
.cal-toggle {
font-size: 0.75rem;
padding: 2px 8px;
}
.cal-empty {
grid-column: 1 / -1;
text-align: center;
padding: 24px;
color: #6c757d;
font-size: 0.85rem;
background: #fff;
}
/* === Alert Stack System === */
.alert-stack-wrapper {
position: relative;
}
.alert-stack-item {
padding-right: 3rem;
transition: opacity 0.2s ease, transform 0.25s ease;
position: relative;
}
.alert-stack-item .btn-close {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: 1.25rem 1rem;
}
.alert-stack-wrapper.is-stacked .alert-stack-item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 0;
}
.alert-stack-wrapper.is-stacked .alert-stack-item[data-stack-index="0"] {
z-index: 10;
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.alert-stack-wrapper.is-stacked .alert-stack-item[data-stack-index="1"] {
z-index: 9;
transform: translateY(4px) scale(0.97);
opacity: 0.7;
pointer-events: none;
}
.alert-stack-wrapper.is-stacked .alert-stack-item[data-stack-index="2"],
.alert-stack-wrapper.is-stacked .alert-stack-item[data-stack-index="3"],
.alert-stack-wrapper.is-stacked .alert-stack-item[data-stack-index="4"] {
z-index: 8;
transform: translateY(8px) scale(0.94);
opacity: 0.4;
pointer-events: none;
}
.alert-stack-item.stack-dismissing {
opacity: 0 !important;
transform: translateY(-8px) scale(0.97) !important;
pointer-events: none;
}
.alert-stack-counter {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
padding: 1px 6px;
border-radius: 10px;
background: rgba(0,0,0,.15);
margin-left: 8px;
vertical-align: middle;
user-select: none;
}
/* Notification Chat Window */
.notification-chat {
border-radius: 0.5rem;
overflow: hidden;
}
.notification-chat-history {
min-height: 200px;
max-height: 500px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.notification-bubble .avatar-icon {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
/* Type icon picker */
.notif-type-picker {
display: flex;
gap: 0.4rem;
align-items: center;
}
.notif-type-btn {
background: none;
border: 2px solid transparent;
border-radius: 50%;
padding: 4px;
cursor: pointer;
font-size: 1.25rem;
line-height: 1;
transition: border-color 0.15s, transform 0.1s;
}
.notif-type-btn:hover { transform: scale(1.15); }
.notif-type-btn.active { border-color: currentColor; }
/* Preview textarea inside alert */
.notif-msg-preview {
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
transition: background-color 0.2s, border-color 0.2s;
}
.notif-msg-preview textarea {
background: transparent !important;
border: none !important;
box-shadow: none !important;
resize: vertical;
}
/* Forge text classes — emitted by format_forge_text filter. */
.luminari {
font-family: 'Luminari', serif;
}
.forge-baskerville-bold {
font-family: 'Baskerville 10 Pro', 'Baskerville', Georgia, serif;
font-weight: bold;
}
.forge-header {
font-size: 1.4em;
font-family: 'Luminari', serif;
}
/* ---------- Forge phase-step row children (boxes / tracks / actions) ---------- */
.forge-card-row {
border: 1px solid #d6d2c4;
border-radius: 6px;
padding: 0.6rem 0.75rem;
margin-bottom: 0.5rem;
background: #fbf8ef;
}
.forge-card-row.is-dirty { border-color: #d4a017; }
.forge-card-row__head {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.forge-card-row__form {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
flex: 1;
margin: 0;
}
.forge-card-row__title { max-width: 18rem; }
.forge-card-row__body { width: 100%; margin-top: 0.4rem; }
.forge-card-row__badge {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.1rem 0.4rem;
border-radius: 3px;
background: #e8e2cf;
color: #58523f;
}
.forge-card-row__badge.action-badge { background: #cde4cd; color: #2d5d2d; }
.forge-card-row__badge.track-badge { background: #cdd8e8; color: #2d3d5d; }
.forge-cost-image-preview {
height: 2rem;
width: 2rem;
object-fit: contain;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
padding: 2px;
}
/* Reserve preview space even before an image is chosen so the form width
doesn't change when a file is selected (which could cause it to wrap).
Bootstrap sets [hidden]{display:none!important}, so we need !important too. */
.phase-step-cost-image-form .forge-cost-image-preview[hidden] {
display: inline-block !important;
visibility: hidden;
border-color: transparent;
background: transparent;
}
.row-grip,
.action-grip {
cursor: grab;
user-select: none;
font-size: 1.1rem;
color: #888;
padding: 0 0.25rem;
}
.row-grip:active,
.action-grip:active { cursor: grabbing; }
.phase-step-actions { flex-wrap: wrap; }
.forge-segmented.btn-group-sm > .btn,
.forge-segmented .btn {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Icon-only buttons in the segmented group needed asymmetric padding so the
icon optically centered. Text-only buttons (e.g. Small/Medium/Large height
picker on box rows) should use Bootstrap's default symmetric btn-sm padding. */
.forge-segmented .btn:has(> .bi) {
padding-top: 0.9375rem;
padding-bottom: 0.375rem;
}
.forge-segmented .btn > .bi {
display: inline-flex;
align-items: center;
line-height: 1;
}
.forge-segmented .btn-check:checked + .btn {
background: #6c757d;
color: #fff;
}
.forge-stepper {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
/* ---------- Forge inline-form (action/box/track create) ---------- */
.forge-inline-form {
border: 1px dashed #b6b09e;
border-radius: 6px;
padding: 0.5rem 0.6rem;
margin: 0.4rem 0;
background: #fefcf5;
}
/* ---------- Cardboard track grid editor ---------- */
.track-row-scroll {
overflow-x: auto;
padding: 0.5rem;
background: #f9f5e7;
border-radius: 4px;
}
.track-editor {
display: flex;
flex-direction: column;
gap: 0;
width: max-content;
/* Shared vertical metric: height of one row-title field. The grid-row
pads itself so its total height equals --track-row-title-h, keeping
row-title fields and grid cells aligned and dividers continuous.
4 lines at 0.75rem font with line-height 1.5, plus padding+border. */
--track-row-title-h: calc(4 * 1.5 * 0.75rem + 0.2rem + 2px);
/* Cell size (square) for the current track type (token/building = 3rem,
counter = 2.25rem). Used by the grid-row padding for vertical
centering and by the column-header width for horizontal alignment. */
--track-cell-size: 3rem;
}
.track-editor--counter {
--track-cell-size: 2.25rem;
}
.track-editor__header-strip { padding: 0.2rem 0; }
.track-editor__body-strip { padding: 0; }
.track-editor--hp-below .track-editor__header-strip { order: 2; }
.track-editor--hp-below .track-editor__body-strip { order: 1; }
.track-editor--hp-below .track-editor__add-row-wrap { order: 3; }
.track-editor__header-strip {
display: flex;
align-items: stretch;
gap: 0.4rem;
}
.track-editor__header-title {
width: 5rem;
flex-shrink: 0;
}
.track-editor__header-cells {
display: flex;
align-items: center;
gap: 0.4rem;
}
.track-editor__divider-spacer {
display: inline-block;
width: 0.25rem;
align-self: stretch;
margin: -0.2rem 0; /* bridge header-strip padding so the line meets the grid */
background: transparent;
border: none;
border-left: 2px dashed #b3a98d;
cursor: pointer;
padding: 0;
}
.track-editor__divider-spacer:hover { border-left-color: #d4a017; }
.track-editor__divider-spacer.is-active { border-left: 3px solid #4d4636; }
.track-editor__col-header {
width: var(--track-cell-size);
text-align: center;
font-size: 0.75rem;
padding: 0.1rem 0.2rem;
}
.track-editor__col-header--ghost,
.track-editor__row-title--ghost {
opacity: 0.45;
background: #efe9d3;
}
.track-editor__add-col,
.track-editor__add-row {
align-self: center;
padding: 0 0.5rem;
}
.track-editor__body-strip {
display: flex;
align-items: stretch;
gap: 0.4rem;
}
.track-editor__row-title-col {
display: flex;
flex-direction: column;
gap: 0;
width: 5rem;
flex-shrink: 0;
}
/* Mirror the grid-row's vertical padding so each row-title cell occupies
the same vertical slot as its corresponding grid row. Without this,
row-title col gap layout drifts from the grid's padding-based layout
and horizontal dividers don't line up across the boundary. */
.track-editor__row-title,
.track-editor__row-title.forge-icon-input {
width: 100%;
font-size: 0.75rem;
padding: 0.1rem 0.2rem;
margin: 0.2rem 0;
/* Fixed height (--track-row-title-h on .track-editor); content beyond
scrolls vertically inside the field rather than expanding the row.
The compound selector above bumps specificity over .forge-icon-input's
overflow-y: hidden. */
height: var(--track-row-title-h);
min-height: var(--track-row-title-h);
max-height: var(--track-row-title-h);
overflow-y: auto;
}
.track-editor--rt-vertical .track-editor__row-title {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
}
.track-editor--rt-vertical .track-editor__row-title.forge-icon-input img.inline-icon {
transform: rotate(90deg);
}
.track-editor__toggles {
align-items: flex-end;
}
.track-editor__toggle-group {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.track-editor__toggle-label {
line-height: 1;
}
.track-editor__toggle-group .btn-group .btn {
width: 2.4rem;
padding: 0.2rem 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.track-editor__toggle-group--bg input[type="file"] {
width: 14rem;
}
.track-editor__toggle-group {
position: relative;
}
form[data-track-editor],
form[data-forge-icon-form] {
position: relative;
}
.scale-entry__field {
flex: 1 1 0;
min-width: 0;
}
.scale-entry__field--range {
text-align: right;
}
.forge-icon-input.is-invalid {
border-color: #dc3545;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.forge-icon-input {
min-height: calc(1.5em + 0.5rem + 2px);
white-space: pre-wrap;
overflow-y: hidden;
}
.forge-icon-input img.inline-icon {
height: 1.2em;
width: auto;
vertical-align: -0.15em;
display: inline-block;
}
.forge-icon-picker {
position: absolute;
z-index: 30;
}
.forge-icon-picker[hidden] {
display: none;
}
.forge-icon-picker__panel {
display: grid;
grid-template-columns: repeat(8, 2rem);
gap: 0.25rem;
padding: 0.4rem;
background: #fff;
border: 1px solid #b3a98d;
border-radius: 0.25rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
max-height: 14rem;
overflow-y: auto;
min-width: 17rem;
}
.forge-icon-picker__btn {
width: 2rem;
height: 2rem;
padding: 0.15rem;
background: transparent;
border: 1px solid transparent;
border-radius: 0.2rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.forge-icon-picker__btn:hover {
border-color: #d4a017;
background: #fff7e0;
}
.forge-icon-picker__btn img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.forge-icon-picker--keyboard {
position: fixed;
left: 0;
right: 0;
top: auto;
z-index: 1050;
}
.forge-icon-picker--keyboard .forge-icon-picker__panel {
border-radius: 0;
border-left: none;
border-right: none;
max-height: 6rem;
grid-template-columns: repeat(auto-fit, 2.4rem);
width: 100%;
box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
}
.track-editor__grid-wrap {
display: flex;
align-items: stretch;
gap: 0.4rem;
}
.track-editor__grid {
display: flex;
flex-direction: column;
gap: 0;
}
.track-editor__grid-row {
display: flex;
align-items: center;
gap: 0.4rem;
/* Vertical padding sized so the grid-row's total height matches the
row-title field (var(--track-row-title-h) + its 0.4rem margin), with
the cell vertically centered. Cell height varies by track type
(--track-cell-size: 3rem default, 2.25rem for counter). */
padding: calc((var(--track-row-title-h) + 0.4rem - var(--track-cell-size)) / 2) 0;
}
.track-editor__grid-row + .track-editor__grid-row { margin-top: 0; }
.track-editor__divider {
width: 0.25rem;
align-self: stretch;
height: auto;
/* Cancel grid-row vertical padding so the dashed line spans the full
row height. Mirrors the grid-row padding formula (negated). */
margin: calc((var(--track-cell-size) - var(--track-row-title-h) - 0.4rem) / 2) 0;
border: none;
background: transparent;
border-left: 2px dashed #b3a98d;
cursor: pointer;
padding: 0;
}
.track-editor__divider:hover { border-left-color: #d4a017; }
.track-editor__divider.is-active { border-left: 3px solid #4d4636; }
.track-editor__divider--ghost { opacity: 0.5; cursor: default; }
/* Row dividers: horizontal counterpart of .track-editor__divider. Sibling to
each .track-editor__grid-row (between rows) and to each row-title input. */
.track-editor__row-divider {
height: 0.25rem;
align-self: stretch;
width: auto;
margin: 0 -0.2rem; /* cancel grid-row horizontal padding so the dashed line is continuous */
border: none;
background: transparent;
border-top: 2px dashed #b3a98d;
cursor: pointer;
padding: 0;
}
.track-editor__row-divider:hover { border-top-color: #d4a017; }
.track-editor__row-divider.is-active { border-top: 3px solid #4d4636; }
.track-editor__row-divider--ghost { opacity: 0.5; cursor: default; }
.track-editor__row-divider-spacer {
display: block;
height: 0.25rem;
align-self: stretch;
background: transparent;
border: none;
border-top: 2px dashed #b3a98d;
cursor: pointer;
padding: 0;
width: 100%;
}
.track-editor__row-divider-spacer:hover { border-top-color: #d4a017; }
.track-editor__row-divider-spacer.is-active { border-top: 3px solid #4d4636; }
/* Floating mini rich-text toolbar — mounted by forge_editor.js next to a
focused [data-track-image-input] contenteditable. Style buttons mirror the
full rich-text toolbar but are sized for inline use. */
.forge-mini-toolbar {
position: absolute;
display: flex;
gap: 2px;
padding: 2px 4px;
background: #fffaf0;
border: 1px solid #b3a98d;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
z-index: 1050;
}
.forge-mini-toolbar[hidden] { display: none; }
.forge-mini-toolbar button {
background: transparent;
border: 1px solid transparent;
border-radius: 2px;
padding: 0 6px;
height: 22px;
min-width: 22px;
font-size: 0.85rem;
line-height: 1;
cursor: pointer;
}
.forge-mini-toolbar button:hover { background: #f0e7ce; }
.forge-mini-toolbar button[data-active="true"] {
background: #4d4636;
color: #fff;
border-color: #4d4636;
}
.forge-mini-toolbar button.rt-luminari { font-family: 'Luminari', serif; }
.track-editor__col-buttons,
.track-editor__row-buttons {
align-self: center;
}
.track-editor__col-buttons .btn,
.track-editor__row-buttons .btn {
padding: 0 0.5rem;
line-height: 1;
}
.track-editor__add-row-wrap {
margin-left: 5.4rem; /* row-title col width + gap */
}
.track-cell--ghost {
width: 3rem;
height: 3rem;
border: 1.5px dashed #b3a98d;
background-color: rgba(255, 255, 255, 0.5);
cursor: default;
display: inline-block;
opacity: 0.6;
}
.track-cell--ghost.track-cell--token { border-radius: 50%; }
.track-cell--ghost.track-cell--building { border-radius: 4px; }
.track-cell--ghost.track-cell--counter { border-radius: 50%; width: 2.25rem; height: 2.25rem; }
.track-cell {
position: relative;
width: 3rem;
height: 3rem;
border: 1.5px solid #8a8674;
background-color: #fff;
background-size: cover;
background-position: center;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.track-cell--token { border-radius: 50%; }
.track-cell--building { border-radius: 4px; }
.track-cell--counter { border-radius: 50%; width: 2.25rem; height: 2.25rem; background-color: transparent; }
.track-cell::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--slot-bg, var(--track-bg, none));
background-size: cover;
background-position: center;
opacity: 0.3;
border-radius: inherit;
pointer-events: none;
}
.track-cell--filled { border-color: #4d4636; }
.track-cell:hover { outline: 2px solid #d4a017; outline-offset: 1px; }
.track-cell__icons {
display: flex;
flex-wrap: wrap;
gap: 1px;
max-width: 100%;
position: relative;
z-index: 1;
align-items: center;
justify-content: center;
}
.track-cell__icons img {
max-width: 1.1rem;
max-height: 1.1rem;
}
.track-cell--token .track-cell__icons {
max-width: 70%;
max-height: 70%;
}
.track-cell--token .track-cell__icons img {
max-width: 0.85rem;
max-height: 0.85rem;
}
.track-cell--counter .track-cell__icons {
max-width: 70%;
max-height: 70%;
}
.track-cell--counter .track-cell__icons img {
max-width: 0.6rem;
max-height: 0.6rem;
}
.track-cell__centered-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Baskerville', serif;
font-size: 0.85rem;
font-weight: 600;
color: #3a2a14;
pointer-events: none;
z-index: 2;
}
/* ---------- Slot modal ---------- */
.forge-slot-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
}
.forge-slot-modal[hidden] { display: none; }
.forge-slot-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 16, 8, 0.6);
}
.forge-slot-modal__panel {
position: relative;
background: #fbf8ef;
border-radius: 8px;
width: min(720px, 95vw);
max-height: min(90vh, 100dvh);
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
overflow: hidden;
}
.forge-slot-modal__header,
.forge-slot-modal__footer {
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
flex: 0 0 auto;
}
.forge-slot-modal__header { border-bottom: 1px solid #ddd5c3; }
.forge-slot-modal__footer { border-top: 1px solid #ddd5c3; }
#forge-slot-modal-form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.forge-slot-modal__body {
padding: 1rem;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
}
.forge-slot-modal__section { margin-bottom: 1rem; }
.forge-slot-modal__tray {
min-height: 3rem;
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
padding: 0.4rem;
border: 1px dashed #aaa;
border-radius: 4px;
}
.forge-slot-modal__tray-item {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #4d4636;
background: #fff;
border-radius: 4px;
padding: 0;
}
.forge-slot-modal__tray-item img { max-width: 100%; max-height: 100%; }
.forge-slot-bg-thumb {
width: 2rem;
height: 2rem;
object-fit: cover;
border: 1px solid #c8c2af;
border-radius: 3px;
}
.forge-slot-modal__picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
gap: 0.3rem;
max-height: 14rem;
overflow-y: auto;
padding: 0.4rem;
border: 1px solid #ddd5c3;
border-radius: 4px;
background: #fff;
}
.forge-slot-modal__pick {
width: 2.4rem;
height: 2.4rem;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
padding: 0;
}
.forge-slot-modal__pick:hover { border-color: #d4a017; }
.forge-slot-modal__pick img { max-width: 100%; max-height: 100%; }
body.forge-modal-open { overflow: hidden; }
/* Faction header preview — used in the factionsheet editor (sheet_header_form.html).
Dimensions match the rendered PDF title bar in pdf_engine.py:
BODY_W = (PAGE_W - 2*X_MARGIN) = 7.5" (PAGE_W=11", X_MARGIN=0.25")
bar_w = BODY_W * COLOR_BAR_W_RATIO = 7.125" (COLOR_BAR_W_RATIO=0.95)
bar_h = TITLE_BAR_H = 0.6"
So the bar scales with screen width while preserving aspect ratio. The title
uses container query units so the Luminari name scales with the bar. */
.forge-header-preview {
container-type: inline-size;
width: 100%;
margin-bottom: 0.25rem;
}
.forge-header-preview-bar {
position: relative;
width: 100%;
aspect-ratio: 7.125 / 0.6;
background: var(--faction-color, #888);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.forge-header-preview-image {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
z-index: 1;
pointer-events: none;
}
.forge-header-preview-image[hidden] { display: none; }
.forge-header-preview-title {
position: relative;
z-index: 2;
/* Mirrors pdf_engine: Luminari 30pt on a 43.2pt-tall bar that is 718.2pt wide.
30 / 718.2 ≈ 4.18% of bar width, and the bar fills the container's inline
width, so 4.18cqw matches the PDF's nominal font size. */
font-size: 4.18cqw;
line-height: 1;
text-align: center;
pointer-events: none;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
padding: 0 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.forge-header-preview-title.is-text-black {
color: #000;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}
/* Setup-card live preview ----------------------------------------------
Mirrors SetupCardLayoutEngine in the_forge/pdf_engine.py.
Card is 2.5" × 3.46". Render at 96 px/in => 240 × 332 px.
All offsets/sizes are % of the card so the layout stays consistent
if the size changes. */
.forge-adset-card-preview {
position: relative;
width: 240px;
height: 332px;
margin: 0 auto;
background: #ddd;
border-radius: 8px;
overflow: hidden;
font-family: Baskerville, 'Baskerville Old Face', serif;
user-select: none;
container-type: size;
}
.forge-adset-card-bg,
.forge-adset-card-type-overlay {
position: absolute;
inset: 0;
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
/* "ADVANCED SETUP" — Baskerville-Bold 9.5pt centered, baseline ~0.833"
from the top of a 3.46" card. We approximate top-relative position. */
.forge-adset-card-title {
position: absolute;
left: 0;
right: 0;
top: 19.95%;
text-align: center;
font-family: Baskerville, serif;
font-weight: bold;
font-size: 5.28cqi; /* 9.5pt / (2.5*72) */
letter-spacing: 0.4px;
color: #fff;
pointer-events: none;
}
/* Reach: white Luminari 18pt, drawn centered on a point that's
0.35" from the right and 0.3" from the bottom of the card. */
.forge-adset-card-reach {
position: absolute;
right: 14%; /* 0.35" / 2.5" */
bottom: 8.67%; /* 0.3" / 3.46" */
transform: translate(50%, 25%);
font-family: Luminari, fantasy;
font-size: 10cqi; /* 18pt / (2.5*72) */
color: #fff;
line-height: 1;
pointer-events: none;
}
/* Faction-color band */
.forge-adset-card-band {
position: absolute;
left: 8.68%; /* 0.217" / 2.5" */
right: 8.68%;
top: 9.71%; /* 0.336" / 3.46" */
height: 10.09%; /* 0.3491" / 3.46" */
background: var(--faction-color, #5B4A8A);
overflow: visible; /* image is allowed to overhang upward */
}
.forge-adset-card-header-image {
position: absolute;
left: 0;
bottom: 0;
width: auto;
max-height: 401%; /* 1.4" / 0.3491" ≈ 4.01× band height */
max-width: 100%;
object-fit: contain;
object-position: left bottom;
pointer-events: none;
z-index: 1;
}
.forge-adset-card-header-image[hidden] { display: none; }
.forge-adset-card-name {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-start; /* left-aligned, matches PDF */
padding-left: 2.9%; /* 0.06" / 2.066" */
padding-right: 2.9%;
font-family: Luminari, fantasy;
font-size: 6.67cqi; /* 12pt / (2.5*72) */
line-height: 1;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.forge-adset-card-name.is-text-black {
color: #000;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}
/* Setup steps inside the white usable area */
.forge-adset-card-steps {
position: absolute;
left: 12.8%; /* 0.32" / 2.5" */
right: 12.8%;
top: 28.9%; /* 1" / 3.46" */
bottom: 7.23%; /* 0.25" / 3.46" */
margin: 0;
padding: 0;
list-style: none;
font-family: Baskerville, serif;
font-size: 4.5cqi;
line-height: 1.2;
color: #000;
overflow: hidden;
}
.forge-adset-card-step {
display: flex;
gap: 0.8em;
margin-bottom: 0.86%; /* 0.06" / 3.46" */
align-items: flex-start;
}
.forge-adset-card-step-marker-cell {
flex: 0 0 2.5em; /* fixed marker column so step text aligns */
width: 2.5em;
height: 2.5em;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.forge-adset-card-step-marker {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
}
.forge-adset-card-step-body {
flex: 1 1 auto;
min-width: 0;
}
.forge-adset-card-step-body p {
margin: 0;
}
/* Forge faction list cards */
.forge-faction-card {
color: inherit;
min-height: 160px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.forge-faction-card:hover {
transform: translateY(-2px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
color: inherit;
text-decoration: none;
}
.forge-faction-card__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
.forge-faction-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.85) 100%
);
z-index: 1;
}
.forge-faction-card .card-body {
z-index: 2;
}
.forge-faction-card__swatch {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.forge-faction-card__name {
word-break: break-word;
}
.forge-faction-card__preview {
height: 3rem;
width: auto;
border-radius: 0.375rem;
object-fit: cover;
border: 2px solid var(--faction-color, rgba(0, 0, 0, 0.15));
background: rgba(255, 255, 255, 0.6);
}
.forge-faction-card__preview-empty {
display: inline-flex;
align-items: center;
justify-content: center;
height: 3rem;
padding: 0 0.6rem;
border-radius: 0.375rem;
border: 2px dashed var(--faction-color, rgba(0, 0, 0, 0.25));
background: rgba(255, 255, 255, 0.45);
color: rgba(0, 0, 0, 0.55);
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
}
.forge-faction-card__preview-empty--landscape {
/* Match a 3rem-tall letter-landscape preview (11/8.5 ratio). */
width: 3.88rem;
padding: 0;
}
.forge-faction-card__preview-empty--portrait {
/* Match a 3rem-tall poker-card portrait preview (2.5/3.5 ratio). */
width: 2.14rem;
padding: 0;
}
.forge-faction-card__markers {
display: flex;
flex-direction: column;
gap: 0.25rem;
height: 3rem;
width: 1.375rem;
flex-shrink: 0;
}
.forge-faction-card__marker {
width: 1.375rem;
height: 1.375rem;
border-radius: 0.3rem;
object-fit: cover;
border: 2px solid var(--faction-color, rgba(0, 0, 0, 0.15));
background: rgba(255, 255, 255, 0.6);
}
/* Forge faction detail page — full-page background, overlay, ornamental frame, columns */
.forge-detail-page-bg {
position: fixed;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -2;
}
.forge-detail-page-overlay {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.70);
z-index: -1;
}
.forge-detail-frame {
margin-bottom: 1rem;
}
.forge-detail-frame__box {
position: relative;
border: 24px solid transparent;
/* Default: tall/portrait container — upright Phase_Box.
A JS ResizeObserver on .forge-detail-frame swaps in a data-box-shape
attribute ("square" or "wide") to override based on the live aspect ratio. */
border-image: url("../pdf/boxes/Phase_Box.3691f9dfe1c4.svg") 30 fill / 24px / 0 stretch;
padding: 1.25rem;
}
.forge-detail-frame[data-box-shape="square"] .forge-detail-frame__box {
border-image: url("../pdf/boxes/Medium_Box.a600e6799ab1.svg") 30 fill / 24px / 0 stretch;
}
.forge-detail-frame[data-box-shape="wide"] .forge-detail-frame__box {
border-image: url("../pdf/boxes/Phase_Rotated_Box.8083c473b1b2.svg") 30 fill / 24px / 0 stretch;
}
.forge-detail-columns {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: stretch;
}
@media (min-width: 992px) {
.forge-detail-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1400px) {
.forge-detail-columns { grid-template-columns: repeat(3, 1fr); }
}
.forge-detail-col { display: flex; }
.forge-detail-col > .card { width: 100%; }
.forge-faction-marker-preview {
width: 100%;
max-width: 14rem;
aspect-ratio: 1 / 1;
height: auto;
border-radius: 0.75rem;
object-fit: cover;
cursor: zoom-in;
border: 2px solid var(--faction-color, rgba(0, 0, 0, 0.15));
}
.forge-component-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.forge-component-row {
display: grid;
grid-template-columns: 2.25rem 2.5rem 1fr;
align-items: center;
gap: 0.6rem;
}
.forge-component-icon-wrap {
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: rgba(0, 0, 0, 0.04);
}
.forge-component-icon-wrap--building { border-radius: 0.34rem; }
.forge-component-icon-wrap--token { border-radius: 50%; }
.forge-component-icon {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.forge-component-icon--placeholder {
width: 70%;
height: 70%;
border-radius: inherit;
opacity: 0.5;
}
.forge-component-qty {
font-variant-numeric: tabular-nums;
font-weight: 600;
text-align: right;
}
.forge-component-name {
font-style: italic;
}
.forge-detail-preview-wrap { position: relative; }
.forge-detail-preview-stale {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
pointer-events: none;
}
.forge-detail-preview {
display: block;
width: 100%;
height: auto;
border-radius: 0.5rem;
border: 2px solid var(--faction-color, rgba(0, 0, 0, 0.15));
background: rgba(255, 255, 255, 0.6);
}
@media (max-width: 767.98px) {
.forge-detail-frame .forge-header-preview-bar {
aspect-ratio: auto;
min-height: 5rem;
}
}
.forge-howtoplay-preview {
position: relative;
width: 100%;
max-width: 360px;
aspect-ratio: 350 / 330;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.03);
border: 1px dashed rgba(0, 0, 0, 0.2);
padding: 6px 14px 6px 6px;
overflow: hidden;
}
.forge-howtoplay-body-wrap {
height: var(--howto-body-h, auto);
}
.forge-howtoplay-body {
/* Render bar runs as actual inline text so the browser wraps them around
the floated image shape exactly like real prose. Each "bar segment"
is a span of unicode block glyphs at the configured line stride. */
font-size: var(--howto-bar-h, 4px);
line-height: var(--howto-line-stride, 12px);
color: rgba(0, 0, 0, 0.18);
word-spacing: calc(var(--howto-bar-h, 4px) * 0.6);
letter-spacing: 0;
font-family: monospace;
}
.forge-howtoplay-image-shape {
float: right;
/* Float width includes the right-padding offset so wrapped text clears the
image even though the image itself is anchored past the padding. */
width: calc(var(--howto-img-w, 0px) + 6px - var(--howto-pad-right, 0px));
height: var(--howto-body-h, 0px);
shape-outside: inset(var(--howto-img-spacer, 0px) 0 0 0);
pointer-events: none;
margin-right: calc(-1 * var(--howto-pad-right, 0px));
}
.forge-howtoplay-image {
position: absolute;
right: calc(-1 * var(--howto-pad-right, 0px));
bottom: calc(-1 * var(--howto-pad-bottom, 0px));
display: block;
width: var(--howto-img-w, 0px);
height: var(--howto-img-h, 0px);
object-fit: contain;
}
/* Publish-to-the-Keep card on the ForgedFaction detail page. */
.forge-publish-card {
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.forge-publish-card__action {
flex-shrink: 0;
}
.forge-publish-requirements {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.5rem 1rem;
}
.forge-publish-requirement {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.025);
transition: background-color 120ms ease, color 120ms ease;
}
.forge-publish-requirement__icon {
font-size: 1.1rem;
line-height: 1;
flex-shrink: 0;
}
.forge-publish-requirement__label {
font-size: 0.95rem;
}
.forge-publish-requirement.is-done {
background: rgba(25, 135, 84, 0.1);
color: #146c43;
}
.forge-publish-requirement.is-done .forge-publish-requirement__icon {
color: #198754;
}
.forge-publish-requirement.is-missing {
color: #6c757d;
}
.forge-publish-requirement.is-missing .forge-publish-requirement__icon {
color: #adb5bd;
}
.forge-publish-requirement.has-warning {
align-items: flex-start;
background: rgba(255, 193, 7, 0.12);
color: #997404;
}
.forge-publish-requirement.has-warning .forge-publish-requirement__icon {
color: #ffc107;
margin-top: 0.15rem;
}
.forge-publish-requirement__warning {
margin-top: 0.15rem;
line-height: 1.3;
}