:root { --color-bg: #0c0c0c; --color-panel: #16180f; --color-panel-alt: #1f2216; --color-khaki: #a89f86; --color-khaki-dark: #8d8579; --color-red: #bf4946; --color-text: #e8e4da; --color-text-muted: #9b9689; --color-border: #33362a; --color-header-bg: rgba(12, 12, 12, 0.92); --color-lightbox-bg: rgba(6, 6, 6, 0.94); --color-btn-solid-text: #100604; --font-display: "Oswald", "Arial Narrow", sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --max-width: 1100px; } :root[data-theme="light"] { --color-bg: #f2f0e9; --color-panel: #e8e4d5; --color-panel-alt: #ddd7c2; --color-khaki: #6b6350; --color-khaki-dark: #524c3d; --color-red: #a3302c; --color-text: #201f19; --color-text-muted: #5c5646; --color-border: #cac3ab; --color-header-bg: rgba(242, 240, 233, 0.92); --color-lightbox-bg: rgba(20, 18, 14, 0.92); --color-btn-solid-text: #fbf8f0; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Also on , so the canvas is already dark while a page is loading or transitioning - otherwise the gap between pages flashes white. */ background: var(--color-bg); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* The markup is written in Serbian Cyrillic. When the reader has chosen another language, js/i18n.js holds the paint here rather than letting them watch the Cyrillic flip over after it lands. Released as soon as the dictionary is in (and unconditionally on a failsafe timer). */ html[data-i18n-pending] body { visibility: hidden; } /* ---------- page transitions ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: ease-in-out; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.55; overflow-x: hidden; transition: background-color 0.2s ease, color 0.2s ease; } img { max-width: 100%; display: block; } a { color: var(--color-khaki); } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); margin: 0 0 1rem; } h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); border-bottom: 2px solid var(--color-border); padding-bottom: 0.6rem; } .eyebrow { color: var(--color-red); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; margin-bottom: 0.4rem; display: block; } /* ---------- header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-header-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-border); transition: background-color 0.2s ease, border-color 0.2s ease; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 0.6rem; padding-bottom: 0.6rem; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--color-text); } .brand img { height: 42px; width: auto; } .brand-name { font-family: var(--font-display); letter-spacing: 0.08em; font-size: 1.15rem; text-transform: uppercase; } .main-nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .main-nav a { color: var(--color-text-muted); text-decoration: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; transition: color 0.15s ease; } .main-nav a:hover { color: var(--color-red); } .lang-switch { display: flex; gap: 0.3rem; } .lang-switch button { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.06em; padding: 0.25rem 0.55rem; cursor: pointer; border-radius: 2px; } .lang-switch button[aria-pressed="true"] { border-color: var(--color-red); color: var(--color-text); } /* Fixed box: the ☾ and ☀ glyphs differ in width, which used to shift the whole nav on toggle. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 1.7rem; overflow: hidden; background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.95rem; line-height: 1; padding: 0; cursor: pointer; border-radius: 2px; transition: border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { border-color: var(--color-red); color: var(--color-text); } .nav-toggle { display: none; background: transparent; border: 1px solid var(--color-border); color: var(--color-text); padding: 0.4rem 0.6rem; font-size: 1.1rem; cursor: pointer; transition: transform 0.2s ease; } /* ---------- hero ---------- */ .hero { padding: 4rem 0 3rem; text-align: center; background: radial-gradient(ellipse at top, var(--color-panel-alt) 0%, var(--color-bg) 70%); border-bottom: 1px solid var(--color-border); } .hero img { margin: 0 auto 1.5rem; height: 260px; width: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)); } .hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 0.5rem; } .hero p { color: var(--color-text-muted); max-width: 46ch; margin: 0 auto; font-size: 1.05rem; } .hero .cta-row { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .btn { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; padding: 0.75rem 1.6rem; border: 1px solid var(--color-khaki-dark); color: var(--color-text); border-radius: 2px; transition: all 0.15s ease; } .btn:hover { border-color: var(--color-red); color: var(--color-red); } .btn-solid { background: var(--color-red); border-color: var(--color-red); color: var(--color-btn-solid-text); } .btn-solid:hover { background: #d65a56; border-color: #d65a56; color: var(--color-btn-solid-text); } /* ---------- sections ---------- */ section { padding: 4rem 0; } section:nth-of-type(even) { background: var(--color-panel); } .about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } .about-card { background: var(--color-panel-alt); border: 1px solid var(--color-border); padding: 1.4rem; border-radius: 4px; } .about-card h3 { font-size: 1.05rem; color: var(--color-khaki); margin-bottom: 0.5rem; } .about-card p { color: var(--color-text-muted); margin: 0; font-size: 0.95rem; } .subheading { font-size: 1.1rem; color: var(--color-khaki); margin: 2.5rem 0 0; } .subheading + .about-grid { margin-top: 1.2rem; } .num-badge { display: inline-grid; place-items: center; flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--color-red); color: var(--color-btn-solid-text); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1; } .item-link { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; text-decoration: none; } .item-link:hover { color: var(--color-red); } /* ---------- team ---------- */ .member-grid { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; /* an opened member grows without stretching the rest of its row */ gap: 1rem; } /* member card: the name patch is the that opens the loadout below it */ .member { background: var(--color-panel-alt); border: 1px solid var(--color-border); border-radius: 6px; transition: border-color 0.15s ease; } /* .is-closing is set by main.js while the card animates shut, so the open styling drops right away */ .member[open]:not(.is-closing) { border-color: var(--color-khaki-dark); } .member-patch { position: relative; display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.2rem; border-radius: 5px; font-family: var(--font-display); text-transform: uppercase; list-style: none; cursor: pointer; transition: background-color 0.2s ease; } .member-patch::-webkit-details-marker { display: none; } .member[open]:not(.is-closing) .member-patch { border-radius: 5px 5px 0 0; background: var(--color-panel); } /* chevron at the far right: down when closed, up when open */ .member-patch::before { content: ""; order: 1; flex-shrink: 0; width: 0.5rem; height: 0.5rem; margin: 0 0.3rem 0.2rem auto; border-right: 2px solid var(--color-khaki); border-bottom: 2px solid var(--color-khaki); transform: rotate(45deg); transition: transform 0.2s ease, border-color 0.15s ease; } .member[open]:not(.is-closing) .member-patch::before { margin-bottom: -0.2rem; transform: rotate(-135deg); } .member-patch:hover::before, .member-patch:focus-visible::before { border-color: var(--color-red); } /* stitched edge, like a velcro name patch */ .member-patch::after { content: ""; position: absolute; inset: 5px; border: 1px dashed var(--color-khaki-dark); border-radius: 3px; opacity: 0.5; pointer-events: none; } .member-patch img { width: 28px; height: auto; } .member-id { display: flex; flex-direction: column; } /* min-height keeps the slot when a member has no callsign yet, so every patch lines up */ .member-callsign { min-height: 1.15em; font-size: 1.35rem; line-height: 1.15; letter-spacing: 0.12em; color: var(--color-text); } /* blank write-in line where the callsign will go */ .member-callsign:empty::before { content: ""; display: block; width: 5.5em; height: 0.7em; border-bottom: 1px dashed var(--color-khaki-dark); opacity: 0.7; } .member-name { font-size: 0.8rem; line-height: 1.3; letter-spacing: 0.16em; color: var(--color-khaki); } /* ---------- loadout ---------- */ .loadout-list { list-style: none; margin: 0; padding: 0.15rem 1.2rem 0.45rem; border-top: 1px solid var(--color-border); } /* main.js animates the card height; the list fades in and out along with it */ @media (prefers-reduced-motion: no-preference) { .member[open] .loadout-list { animation: loadout-open 0.3s ease-out; transition: opacity 0.2s ease; } .member.is-closing .loadout-list { opacity: 0; } } @keyframes loadout-open { from { opacity: 0; transform: translateY(-6px); } } .loadout-list li + li { border-top: 1px dashed var(--color-border); } .loadout-item { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; width: 100%; padding: 0.5rem 0; background: none; border: 0; color: var(--color-text); font: inherit; text-align: left; cursor: zoom-in; } .loadout-slot { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--color-text-muted); transition: color 0.15s ease; } /* a long value drops below its label instead of squeezing it */ .loadout-value { margin-left: auto; text-align: right; font-size: 0.9rem; font-weight: 600; } .loadout-value:empty::before { content: "—"; font-weight: 400; color: var(--color-text-muted); } /* photo icon: every item opens its image in the lightbox */ .loadout-value::after { --icon-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 2.5h11A1.5 1.5 0 0 1 15 4v8a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12V4a1.5 1.5 0 0 1 1.5-1.5zM2.5 4v8h11V4z'/%3E%3Cpath d='M3.5 11l2.8-3.6 2 2.4 1.5-1.7 2.7 2.9z'/%3E%3Ccircle cx='10.6' cy='6.2' r='1.1'/%3E%3C/svg%3E"); content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.55em; vertical-align: -0.14em; background: var(--color-khaki); -webkit-mask: var(--icon-photo) center / contain no-repeat; mask: var(--icon-photo) center / contain no-repeat; transition: background-color 0.15s ease; } .loadout-item:hover .loadout-slot, .loadout-item:focus-visible .loadout-slot { color: var(--color-text); } .loadout-item:hover .loadout-value::after, .loadout-item:focus-visible .loadout-value::after { background: var(--color-red); } /* ---------- fields ---------- */ .fields-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; margin: 2rem 0; } .fields-layout.no-map { grid-template-columns: 1fr; } .fields-layout.no-map .fields-map { display: none; } .fields-map { position: relative; z-index: 0; /* contain Leaflet's pane z-indexes below the sticky header */ min-height: 420px; background: var(--color-panel-alt); border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; } .fields-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; align-content: start; } .field-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.3rem 0.9rem; padding: 0.7rem 1rem; background: var(--color-panel-alt); border: 1px solid var(--color-border); border-radius: 4px; } .field-card h3 { font-size: 1rem; margin: 0; } .field-card p { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; } .fields-map.leaflet-container { background: var(--color-panel-alt); font-family: var(--font-body); } :root:not([data-theme="light"]) .fields-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9) saturate(0.45); } .fields-map .map-marker { width: 28px; height: 28px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .fields-map .leaflet-popup-content-wrapper, .fields-map .leaflet-popup-tip { background: var(--color-panel-alt); color: var(--color-text); } .fields-map .leaflet-popup-content h3 { font-size: 0.95rem; margin: 0; } .fields-map .leaflet-popup-content p { margin: 0.1rem 0 0.4rem; color: var(--color-text-muted); } .fields-map .leaflet-popup-content a, .fields-map .leaflet-control-attribution a { color: var(--color-khaki); } .fields-map .leaflet-control-attribution { background: var(--color-header-bg); color: var(--color-text-muted); } /* ---------- uniform ---------- */ .uniform-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 2.5rem; align-items: center; margin-top: 2rem; } .uniform-figure { margin: 0; padding: 1.5rem 1rem 1rem; background: radial-gradient(ellipse at 45% 35%, var(--color-panel-alt) 0%, var(--color-panel) 80%); border: 1px solid var(--color-border); border-radius: 6px; } .uniform-svg { display: block; width: 100%; height: auto; } .uniform-switch { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; } .uniform-switch button { display: flex; flex-direction: column; align-items: flex-start; min-width: 9.5rem; padding: 0.5rem 1rem 0.55rem; background: var(--color-panel-alt); border: 1px solid var(--color-border); border-radius: 4px; color: var(--color-text-muted); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease; } .uniform-switch button:hover { border-color: var(--color-khaki-dark); color: var(--color-text); } .uniform-switch button[aria-selected="true"] { border-color: var(--color-red); box-shadow: inset 0 -3px 0 var(--color-red); color: var(--color-text); } .uniform-switch-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; } .uniform-switch-sub { font-size: 0.8rem; line-height: 1.3; color: var(--color-text-muted); } /* Both drawings share one grid cell, and so do both product lists: switching cross-fades in place without changing the section height. */ .uniform-stage, .uniform-panels { display: grid; } .uniform-stage .uniform-svg, .uniform-panel { grid-area: 1 / 1; } .uniform-svg:not(.is-active) { opacity: 0; transform: scale(0.97); } .uniform-panel:not(.is-active) { visibility: hidden; opacity: 0; } .uniform-panel.is-before { transform: translateX(-1.5rem); } .uniform-panel.is-after { transform: translateX(1.5rem); } @media (prefers-reduced-motion: no-preference) { .uniform-svg { transition: opacity 0.45s ease, transform 0.45s ease; } .uniform-panel { transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s; } .uniform-item { transition: opacity 0.35s ease, transform 0.35s ease; } .uniform-panel:not(.is-active) .uniform-item { opacity: 0; transform: translateY(0.5rem); } .uniform-panel.is-active .uniform-item:nth-child(2) { transition-delay: 0.07s; } .uniform-panel.is-active .uniform-item:nth-child(3) { transition-delay: 0.14s; } } .uniform-svg .patch-text { fill: #d9d0b6; font-family: var(--font-display); font-weight: 600; font-size: 6.4px; letter-spacing: 0.03em; text-anchor: middle; } .uniform-svg .callout-line { fill: none; stroke: var(--color-khaki); stroke-width: 1.5; stroke-dasharray: 4 3; } .uniform-svg .callout-dot { fill: var(--color-khaki); } .uniform-svg .callout-badge { fill: var(--color-red); } .uniform-svg .callout-num { fill: var(--color-btn-solid-text); font-family: var(--font-display); font-weight: 600; font-size: 15px; text-anchor: middle; dominant-baseline: central; } .uniform-figure figcaption { margin-top: 0.6rem; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; } .uniform-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .uniform-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; background: var(--color-panel-alt); border: 1px solid var(--color-border); border-radius: 4px; } .uniform-item h3 { font-size: 1.05rem; color: var(--color-khaki); margin: 0 0 0.2rem; } .uniform-item p { margin: 0 0 0.5rem; color: var(--color-text-muted); font-size: 0.92rem; } .uniform-item .uniform-product { color: var(--color-text); font-weight: 600; } /* ---------- replicas ---------- */ .replica-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } .replica-card { display: flex; flex-direction: column; padding: 1.3rem 1.4rem; background: var(--color-panel-alt); border: 1px solid var(--color-border); border-radius: 4px; } .replica-art { display: block; width: 100%; height: auto; margin: 0 0 1rem; color: var(--color-khaki); } .replica-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; } .replica-card p { margin: 0 0 1rem; color: var(--color-text-muted); font-size: 0.92rem; } .replica-specs { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0.5rem; margin: auto 0 0; padding-top: 0.8rem; border-top: 1px solid var(--color-border); } .replica-specs dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; color: var(--color-text-muted); } .replica-specs dd { margin: 0.1rem 0 0; font-size: 0.9rem; font-weight: 600; } .replica-specs .spec-auto { color: var(--color-red); } .replica-credit { margin: 1.5rem 0 0; color: var(--color-text-muted); font-size: 0.78rem; } .replica-specs .spec-sub { display: block; font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); } /* ---------- gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; margin-top: 2rem; } .gallery-grid button { padding: 0; border: 1px solid var(--color-border); background: var(--color-panel-alt); border-radius: 4px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; } .gallery-grid button:hover img { transform: scale(1.06); } .gallery-empty, .gallery-error { color: var(--color-text-muted); margin-top: 1.5rem; } /* lightbox */ .lightbox { position: fixed; inset: 0; background: var(--color-lightbox-bg); display: none; align-items: center; justify-content: center; z-index: 100; padding: 2rem; } .lightbox.open { display: flex; } .lightbox img { max-width: 90vw; max-height: 82vh; border: 1px solid var(--color-border); } .lightbox-caption { position: absolute; bottom: 1.5rem; left: 0; right: 0; padding: 0 1rem; text-align: center; color: var(--color-text-muted); font-size: 0.9rem; } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: transparent; border: 1px solid var(--color-border); color: var(--color-text); font-size: 1.4rem; line-height: 1; padding: 0.5rem 0.8rem; cursor: pointer; border-radius: 2px; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { border-color: var(--color-red); color: var(--color-red); } .lightbox-close { top: 1.2rem; right: 1.2rem; } .lightbox-prev { left: 1.2rem; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 1.2rem; top: 50%; transform: translateY(-50%); } /* ---------- contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; } .contact-list { list-style: none; padding: 0; margin: 0; color: var(--color-text-muted); } .contact-list li { margin-bottom: 0.8rem; } /* The email row carries two addresses, so each link gets its own line. */ .contact-list a { display: block; } .contact-list strong { color: var(--color-text); display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; margin-bottom: 0.15rem; } /* ---------- subpages ---------- */ .page-header { padding: 3rem 0 1rem; border-bottom: 1px solid var(--color-border); } .page-header h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: 0.6rem; } .page-header p { color: var(--color-text-muted); max-width: 65ch; } .breadcrumb { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 1rem; } .breadcrumb a { color: var(--color-khaki); text-decoration: none; } table.rules-table { width: 100%; min-width: 760px; /* scroll sideways on phones instead of squeezing the notes column */ border-collapse: collapse; margin: 1.5rem 0; font-size: 0.92rem; } table.rules-table th, table.rules-table td { border: 1px solid var(--color-border); padding: 0.6rem 0.8rem; text-align: left; } table.rules-table td:nth-child(2), table.rules-table td:nth-child(3), table.rules-table td:nth-child(4) { white-space: nowrap; } table.rules-table th .unit { text-transform: none; } table.rules-table th { white-space: nowrap; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-khaki); background: var(--color-panel-alt); } .rules-source { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 2rem; border-top: 1px solid var(--color-border); padding-top: 1.2rem; } .resource-list { list-style: none; padding: 0; margin: 1.5rem 0; } .resource-list li { margin-bottom: 0.8rem; padding: 0.9rem 1.1rem; background: var(--color-panel-alt); border: 1px solid var(--color-border); border-radius: 4px; } .resource-list a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; } .resource-list p { margin: 0.3rem 0 0; color: var(--color-text-muted); font-size: 0.9rem; } .tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .tag-list span { border: 1px solid var(--color-border); padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.82rem; color: var(--color-text-muted); } .page-empty { color: var(--color-text-muted); margin-top: 1.5rem; padding: 1.5rem; border: 1px dashed var(--color-border); border-radius: 4px; } .ally-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; } .ally-card { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1.5rem 1rem 1.2rem; text-align: center; text-decoration: none; color: var(--color-text); background: var(--color-panel-alt); border: 1px solid var(--color-border); border-radius: 4px; transition: border-color 0.15s ease, transform 0.15s ease; } .ally-card:hover { border-color: var(--color-red); transform: translateY(-2px); } /* Most team logos are round social-media avatars, so a circle crop fits them. */ .ally-logo { width: 112px; height: 112px; margin-bottom: 0.7rem; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--color-border); } .ally-logo--contain { object-fit: contain; padding: 12px; background: #16180f; } .ally-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.1rem; } .ally-city { color: var(--color-text-muted); font-size: 0.85rem; } .ally-link { margin-top: 0.4rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; color: var(--color-khaki); } /* Founder we have no profile link for yet - a card, but nothing to click. */ .ally-card--pending { cursor: default; } .ally-card--pending:hover { border-color: var(--color-border); transform: none; } .ally-link--pending { color: var(--color-text-muted); } .ally-card--own { border-color: var(--color-khaki-dark); } /* Brother teams: fewer, bigger cards - four across on wide screens, two from 820px down, the width the site's other grids already fold at. minmax(0, 1fr) keeps a long team name from pushing its column wider than the rest. */ .ally-grid--large { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .ally-grid--large .ally-card { padding: 1.8rem 1rem 1.5rem; } .ally-grid--large .ally-logo { width: 100%; /* most team logos are 150 px Instagram avatars - no point showing them larger */ max-width: 150px; height: auto; aspect-ratio: 1; } .ally-grid--large .ally-name { font-size: 1.25rem; overflow-wrap: anywhere; } @media (max-width: 820px) { .ally-grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .ally-grid--large .ally-card { padding: 1.4rem 0.75rem 1.2rem; } /* shrinks just enough that "Јустинијан" stays whole on a 320 px phone */ .ally-grid--large .ally-name { font-size: clamp(0.95rem, 3.4vw + 0.3rem, 1.1rem); } } /* ---------- ASZ JUG ---------- */ .asz-hero { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 2rem; align-items: start; margin-bottom: 1rem; } .asz-crest { width: 100%; height: auto; /* the crest ships flat; the glow around it is the site's, not part of the file */ filter: drop-shadow(0 0 14px rgba(232, 228, 218, 0.28)); } /* On the light theme the crest's white border would dissolve into the page, so it gets a cast shadow instead of a glow. */ :root[data-theme="light"] .asz-crest { filter: drop-shadow(0 3px 12px rgba(32, 31, 25, 0.4)); } .asz-hero-text h2 { margin-top: 0; } /* Image on the right, so the page alternates. The image stays first in the markup, which keeps it on top when the columns stack on a phone. */ .asz-hero--flip { grid-template-columns: 1fr minmax(180px, 260px); } .asz-hero--flip .asz-patch { order: 2; } .asz-patch { width: 100%; height: auto; /* The merrowed edge is nearly as dark as the page, so a faint rim keeps the patch's silhouette readable; the shadow lifts it like the real thing. */ filter: drop-shadow(0 0 1px rgba(232, 228, 218, 0.35)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55)); } :root[data-theme="light"] .asz-patch { filter: drop-shadow(0 4px 12px rgba(32, 31, 25, 0.4)); } .page-note { color: var(--color-text-muted); font-size: 0.9rem; } @media (max-width: 700px) { .asz-hero { grid-template-columns: 1fr; justify-items: center; gap: 1.4rem; } .asz-crest, .asz-patch { max-width: 220px; } .asz-hero--flip .asz-patch { order: 0; } } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--color-border); padding: 2rem 0; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; } /* ---------- responsive ---------- */ @media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .member-grid { grid-template-columns: repeat(2, 1fr); } .fields-layout { grid-template-columns: 1fr; } .fields-map { min-height: 320px; } .uniform-layout { grid-template-columns: 1fr; } .uniform-figure { width: 100%; max-width: 400px; margin: 0 auto; } .replica-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .field-card { grid-template-columns: auto 1fr; } .field-card .item-link { grid-column: 2; } .member-grid, .replica-grid { grid-template-columns: 1fr; } } @media (max-width: 680px) { .nav-toggle { display: inline-block; } .nav-toggle.open { transform: rotate(90deg); } .main-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); flex-direction: column; align-items: flex-start; gap: 1rem; max-height: 0; opacity: 0; padding: 0 1.5rem; overflow: hidden; pointer-events: none; transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease; } .main-nav.open { max-height: 32rem; opacity: 1; padding: 1rem 1.5rem 1.5rem; pointer-events: auto; } .lang-switch { order: 3; } .theme-toggle { order: 4; } }