/* ========================================================================== Cobble — a Minecraft-style theme for Azuriom -------------------------------------------------------------------------- Everything visual is driven by the CSS custom properties in section 1. The layout writes the admin-configured values into an inline :root block, so you can change nearly everything without touching this file. ========================================================================== */ /* 1. Tokens ================================================================ */ :root { /* Backdrop */ --mc-bg: #1b1410; --mc-texture: url("../img/tex-dirt.svg"); --mc-texture-size: 96px; --mc-texture-opacity: 0.35; /* Panels (the "GUI window" surface) */ --mc-panel: #c6c6c6; --mc-panel-2: #b9b9b9; --mc-panel-border: #4c4c4c; --mc-light: rgba(255, 255, 255, 0.6); --mc-shade: rgba(0, 0, 0, 0.3); --mc-ink: #1f1f1f; --mc-ink-soft: #545454; /* Recessed surfaces (inventory slots, inputs, tables) */ --mc-slot: #373737; --mc-slot-ink: #e9e9e9; /* Accents */ --mc-grass: #5fbb3f; --mc-diamond: #35c8c0; --mc-gold: #ffc94a; --mc-redstone: #d63b2f; /* Geometry */ --mc-bevel: 4px; --mc-radius: 0px; --mc-frame: 3px; /* Type */ --mc-font-display: "Pixelify Sans", "Silkscreen", ui-monospace, monospace; --mc-font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; --mc-display-tracking: 0.02em; /* Derived */ --mc-ink-contrast: #fff; --mc-hard-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); } /* 2. Panel styles ========================================================== */ /* Set on by the layout: mc-panels-stone | deepslate | oak */ .mc-panels-deepslate { --mc-panel: #2f333a; --mc-panel-2: #272b31; --mc-panel-border: #14161a; --mc-light: rgba(255, 255, 255, 0.14); --mc-shade: rgba(0, 0, 0, 0.45); --mc-ink: #e8eaed; --mc-ink-soft: #a3a9b3; --mc-slot: #17191d; --mc-slot-ink: #e8eaed; } .mc-panels-oak { --mc-panel: #b98b52; --mc-panel-2: #a97c47; --mc-panel-border: #5b3f21; --mc-light: rgba(255, 240, 214, 0.45); --mc-shade: rgba(59, 37, 12, 0.4); --mc-ink: #2b1c0b; --mc-ink-soft: #5c4223; --mc-slot: #4a3218; --mc-slot-ink: #f3e3c8; } /* 3. Bootstrap bridge ====================================================== Azuriom and its plugins are built on Bootstrap 5. Rather than fighting plugin markup with deep selectors, we remap Bootstrap's own variables so shop / vote / support pages inherit the theme for free. */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { /* Components that fall back to --bs-body-bg (offcanvas, toasts, popovers) should land on a panel, not on nothing. The page itself is cleared separately on so the block wall shows through. */ --bs-body-bg: var(--mc-panel); --bs-body-color: var(--mc-ink); --bs-emphasis-color: var(--mc-ink); --bs-secondary-color: var(--mc-ink-soft); --bs-secondary-bg: var(--mc-panel-2); --bs-tertiary-bg: var(--mc-panel-2); --bs-border-color: var(--mc-panel-border); --bs-border-radius: var(--mc-radius); --bs-border-radius-sm: var(--mc-radius); --bs-border-radius-lg: var(--mc-radius); --bs-border-radius-xl: var(--mc-radius); --bs-border-radius-2xl: var(--mc-radius); --bs-border-radius-pill: var(--mc-radius); --bs-font-sans-serif: var(--mc-font-body); --bs-heading-color: var(--mc-ink); --bs-link-color: var(--mc-link); --bs-link-hover-color: var(--mc-link-hover); --mc-link: color-mix(in srgb, var(--mc-diamond) 70%, var(--mc-ink)); --mc-link-hover: var(--mc-diamond); } .mc-panels-deepslate, .mc-panels-oak { --mc-link: var(--mc-diamond); --mc-link-hover: color-mix(in srgb, var(--mc-diamond) 65%, #fff); } /* 4. Base ================================================================== */ html { background-color: var(--mc-bg); scroll-behavior: smooth; } body { background: transparent; font-family: var(--mc-font-body); color: var(--mc-ink); -webkit-font-smoothing: antialiased; } /* The tiled block backdrop. Fixed so it reads as a wall behind the site. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: var(--mc-texture); background-size: var(--mc-texture-size) var(--mc-texture-size); background-repeat: repeat; image-rendering: pixelated; opacity: var(--mc-texture-opacity); pointer-events: none; } img { max-width: 100%; height: auto; } a { text-decoration: none; color: var(--mc-link); } a:hover { color: var(--mc-link-hover); } h1, h2, h3, h4, h5, h6, .mc-display { font-family: var(--mc-font-display); letter-spacing: var(--mc-display-tracking); line-height: 1.15; color: var(--mc-ink); } /* Pixel faces are lovely at display sizes and punishing at 15px, so the body face stays in charge of running text unless you turn this off. */ .mc-pixel-everything body, .mc-pixel-everything .btn, .mc-pixel-everything .nav-link { font-family: var(--mc-font-display); } .mc-section-title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); text-transform: uppercase; margin-bottom: 1.5rem; color: #fff; text-shadow: var(--mc-hard-shadow); display: flex; align-items: center; gap: 0.85rem; } /* The little block that flags a section — reads as a placed cube. */ .mc-section-title::before { content: ""; width: 0.75em; height: 0.75em; flex: none; background: var(--mc-grass); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.35), inset 3px 3px 0 rgba(255, 255, 255, 0.35); } .mc-section { padding-block: clamp(2.5rem, 5vw, 4rem); } .mc-lead { color: rgba(255, 255, 255, 0.82); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); max-width: 62ch; } /* 5. Bevel primitives ====================================================== Raised = light top-left (a panel sitting on the wall). Inset = dark top-left (a hole punched into it). */ .mc-raised { background-color: var(--mc-panel); border: var(--mc-frame) solid var(--mc-panel-border); border-radius: var(--mc-radius); box-shadow: inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 var(--mc-shade), inset var(--mc-bevel) var(--mc-bevel) 0 var(--mc-light); } .mc-inset { background-color: var(--mc-slot); border: var(--mc-frame) solid var(--mc-panel-border); border-radius: var(--mc-radius); color: var(--mc-slot-ink); box-shadow: inset var(--mc-bevel) var(--mc-bevel) 0 rgba(0, 0, 0, 0.45), inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 rgba(255, 255, 255, 0.18); } /* 6. Buttons =============================================================== */ .btn { --bs-btn-border-radius: var(--mc-radius); --bs-btn-border-width: var(--mc-frame); --bs-btn-padding-y: 0.6rem; --bs-btn-padding-x: 1.35rem; --bs-btn-font-family: var(--mc-font-display); --bs-btn-font-weight: 600; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; position: relative; box-shadow: inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 rgba(0, 0, 0, 0.32), inset var(--mc-bevel) var(--mc-bevel) 0 rgba(255, 255, 255, 0.32); transition: transform 0.06s steps(2), filter 0.12s linear; } .btn:hover { filter: brightness(1.12); } /* Buttons in Minecraft push into the surface when clicked. */ .btn:active { transform: translateY(var(--mc-frame)); box-shadow: inset var(--mc-bevel) var(--mc-bevel) 0 rgba(0, 0, 0, 0.32), inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 rgba(255, 255, 255, 0.22); } .btn-primary { --bs-btn-bg: var(--mc-grass); --bs-btn-border-color: color-mix(in srgb, var(--mc-grass) 55%, #000); --bs-btn-color: #10240a; --bs-btn-hover-bg: var(--mc-grass); --bs-btn-hover-border-color: color-mix(in srgb, var(--mc-grass) 55%, #000); --bs-btn-hover-color: #10240a; --bs-btn-active-bg: var(--mc-grass); --bs-btn-active-border-color: color-mix(in srgb, var(--mc-grass) 50%, #000); --bs-btn-active-color: #10240a; --bs-btn-disabled-bg: var(--mc-grass); --bs-btn-disabled-border-color: var(--mc-grass); } .btn-secondary { --bs-btn-bg: var(--mc-panel); --bs-btn-border-color: var(--mc-panel-border); --bs-btn-color: var(--mc-ink); --bs-btn-hover-bg: var(--mc-panel); --bs-btn-hover-border-color: var(--mc-panel-border); --bs-btn-hover-color: var(--mc-ink); --bs-btn-active-bg: var(--mc-panel-2); --bs-btn-active-border-color: var(--mc-panel-border); --bs-btn-active-color: var(--mc-ink); } .btn-danger { --bs-btn-bg: var(--mc-redstone); --bs-btn-border-color: color-mix(in srgb, var(--mc-redstone) 55%, #000); --bs-btn-hover-bg: var(--mc-redstone); --bs-btn-hover-border-color: color-mix(in srgb, var(--mc-redstone) 55%, #000); } .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.7); --bs-btn-hover-bg: rgba(255, 255, 255, 0.15); --bs-btn-hover-border-color: #fff; --bs-btn-hover-color: #fff; backdrop-filter: blur(2px); } .btn-lg { --bs-btn-padding-y: 0.85rem; --bs-btn-padding-x: 2rem; font-size: 1.15rem; } /* 7. Panels: cards, list groups, accordions ================================ */ .card { --bs-card-bg: var(--mc-panel); --bs-card-color: var(--mc-ink); --bs-card-border-color: var(--mc-panel-border); --bs-card-border-width: var(--mc-frame); --bs-card-border-radius: var(--mc-radius); --bs-card-inner-border-radius: var(--mc-radius); --bs-card-cap-bg: var(--mc-panel-2); --bs-card-cap-color: var(--mc-ink); --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.25rem; box-shadow: inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 var(--mc-shade), inset var(--mc-bevel) var(--mc-bevel) 0 var(--mc-light); } .card-title, .card-header { font-family: var(--mc-font-display); } .card-img-top { border-radius: 0; } .list-group { --bs-list-group-bg: var(--mc-panel); --bs-list-group-color: var(--mc-ink); --bs-list-group-border-color: var(--mc-panel-border); --bs-list-group-border-radius: var(--mc-radius); --bs-list-group-action-hover-bg: var(--mc-panel-2); } .accordion { --bs-accordion-bg: var(--mc-panel); --bs-accordion-color: var(--mc-ink); --bs-accordion-border-color: var(--mc-panel-border); --bs-accordion-border-radius: var(--mc-radius); --bs-accordion-btn-color: var(--mc-ink); --bs-accordion-active-bg: var(--mc-panel-2); --bs-accordion-active-color: var(--mc-ink); } /* 8. Forms, tables and feedback ============================================ */ .form-control, .form-select { background-color: var(--mc-slot); color: var(--mc-slot-ink); border: var(--mc-frame) solid var(--mc-panel-border); border-radius: var(--mc-radius); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.4); } .form-control:focus, .form-select:focus { background-color: var(--mc-slot); color: var(--mc-slot-ink); border-color: var(--mc-grass); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.4), 0 0 0 3px color-mix(in srgb, var(--mc-grass) 40%, transparent); } .form-control::placeholder { color: rgba(255, 255, 255, 0.4); } .form-label { font-family: var(--mc-font-display); color: var(--mc-ink); } .table { --bs-table-bg: transparent; --bs-table-color: var(--mc-ink); --bs-table-border-color: var(--mc-panel-border); --bs-table-striped-bg: var(--mc-panel-2); --bs-table-striped-color: var(--mc-ink); --bs-table-hover-bg: var(--mc-panel-2); --bs-table-hover-color: var(--mc-ink); } .table > thead { font-family: var(--mc-font-display); text-transform: uppercase; font-size: 0.9rem; } .alert { --bs-alert-border-radius: var(--mc-radius); border-width: var(--mc-frame); font-weight: 500; } .badge { border-radius: var(--mc-radius); font-family: var(--mc-font-display); font-weight: 400; letter-spacing: 0.03em; padding: 0.4em 0.7em; } .dropdown-menu { --bs-dropdown-bg: var(--mc-panel); --bs-dropdown-color: var(--mc-ink); --bs-dropdown-link-color: var(--mc-ink); --bs-dropdown-link-hover-bg: var(--mc-panel-2); --bs-dropdown-link-hover-color: var(--mc-ink); --bs-dropdown-link-active-bg: var(--mc-grass); --bs-dropdown-link-active-color: #10240a; --bs-dropdown-border-color: var(--mc-panel-border); --bs-dropdown-border-width: var(--mc-frame); --bs-dropdown-border-radius: var(--mc-radius); --bs-dropdown-divider-bg: var(--mc-panel-border); box-shadow: inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 var(--mc-shade), inset var(--mc-bevel) var(--mc-bevel) 0 var(--mc-light); } .dropdown-item { font-family: var(--mc-font-display); } .modal-content { background-color: var(--mc-panel); color: var(--mc-ink); border: var(--mc-frame) solid var(--mc-panel-border); border-radius: var(--mc-radius); box-shadow: inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 var(--mc-shade), inset var(--mc-bevel) var(--mc-bevel) 0 var(--mc-light); } .modal-title { font-family: var(--mc-font-display); } .pagination { --bs-pagination-bg: var(--mc-panel); --bs-pagination-color: var(--mc-ink); --bs-pagination-border-color: var(--mc-panel-border); --bs-pagination-border-radius: var(--mc-radius); --bs-pagination-hover-bg: var(--mc-panel-2); --bs-pagination-hover-color: var(--mc-ink); --bs-pagination-active-bg: var(--mc-grass); --bs-pagination-active-border-color: var(--mc-panel-border); --bs-pagination-active-color: #10240a; font-family: var(--mc-font-display); } /* Progress bars become XP bars. */ .progress, .progress-stacked { --bs-progress-bg: #0b0b0b; --bs-progress-border-radius: var(--mc-radius); --bs-progress-height: 0.85rem; border: 2px solid #000; padding: 2px; } .progress-bar { background-color: var(--mc-grass); background-image: linear-gradient( to bottom, color-mix(in srgb, var(--mc-grass) 70%, #fff) 0%, var(--mc-grass) 45%, color-mix(in srgb, var(--mc-grass) 70%, #000) 100% ); } /* 9. Navbar: the hotbar ==================================================== */ .mc-navbar { background-color: color-mix(in srgb, var(--mc-bg) 82%, #000); border-bottom: var(--mc-frame) solid rgba(0, 0, 0, 0.6); box-shadow: inset 0 var(--mc-bevel) 0 rgba(255, 255, 255, 0.08); padding-block: 0.5rem; } .mc-navbar.mc-sticky { position: sticky; top: 0; z-index: 1030; } .mc-navbar .navbar-brand { font-family: var(--mc-font-display); color: #fff; text-shadow: var(--mc-hard-shadow); font-size: 1.35rem; text-transform: uppercase; display: flex; align-items: center; gap: 0.6rem; } .mc-navbar .navbar-brand img { image-rendering: pixelated; } .mc-navbar .nav-link { font-family: var(--mc-font-display); color: rgba(255, 255, 255, 0.82); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.5rem 0.85rem; } .mc-navbar .nav-link:hover, .mc-navbar .nav-link:focus-visible { color: var(--mc-gold); } /* Hotbar mode: each link is an inventory slot, the current page is selected. */ .mc-hotbar .navbar-nav { gap: 4px; } .mc-hotbar .nav-item > .nav-link { background: rgba(0, 0, 0, 0.45); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.5), inset -3px -3px 0 rgba(255, 255, 255, 0.16); border: 2px solid transparent; } .mc-hotbar .nav-item > .nav-link.active { color: #fff; border-color: #f0f0f0; box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.5), inset -3px -3px 0 rgba(255, 255, 255, 0.16), 0 0 0 2px rgba(0, 0, 0, 0.5); } .navbar-toggler { border-radius: var(--mc-radius); border: 2px solid rgba(255, 255, 255, 0.5); } .navbar-toggler:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-grass) 45%, transparent); } .mc-navbar .dropdown-menu { margin-top: 0.5rem; } /* 10. Hero ================================================================= */ .mc-hero { --mc-hero-overlay: 0.55; /* overridden inline from the config */ position: relative; display: flex; align-items: center; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; border-bottom: var(--mc-frame) solid rgba(0, 0, 0, 0.55); } .mc-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, calc(var(--mc-hero-overlay) * 0.7)) 0%, rgba(0, 0, 0, var(--mc-hero-overlay)) 100% ); } .mc-hero > .container { position: relative; z-index: 2; } .mc-hero-title { font-family: var(--mc-font-display); font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.5rem); color: #fff; text-transform: uppercase; text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); margin-bottom: 0.75rem; } .mc-hero-subtitle { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem); color: rgba(255, 255, 255, 0.9); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); max-width: 55ch; margin-bottom: 1.75rem; } .mc-hero-center { text-align: center; } .mc-hero-center .mc-hero-subtitle { margin-inline: auto; } .mc-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .mc-hero-center .mc-hero-actions { justify-content: center; } /* 11. The IP bar — the signature element =================================== Reads as a single hotbar slot holding the one thing a visitor came for. */ .mc-ip-group { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; margin-bottom: 1.75rem; } .mc-hero-center .mc-ip-group { justify-content: center; } .mc-ip-block { min-width: 0; } .mc-ip { display: inline-flex; align-items: stretch; max-width: 100%; background: rgba(0, 0, 0, 0.55); border: var(--mc-frame) solid rgba(0, 0, 0, 0.75); box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.5), inset -4px -4px 0 rgba(255, 255, 255, 0.18); padding: 6px; gap: 6px; } .mc-ip-label { display: block; font-family: var(--mc-font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mc-gold); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); margin-bottom: 0.5rem; } .mc-ip-value { display: flex; align-items: center; padding: 0.5rem 1rem; font-family: var(--mc-font-display); font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.7rem); color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); word-break: break-all; user-select: all; } .mc-ip-copy { flex: none; border: 0; padding-inline: 1.1rem; font-family: var(--mc-font-display); text-transform: uppercase; font-size: 0.95rem; color: #10240a; background: var(--mc-grass); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.3), inset 4px 4px 0 rgba(255, 255, 255, 0.35); cursor: pointer; transition: filter 0.12s linear, transform 0.06s steps(2); } .mc-ip-copy:hover { filter: brightness(1.12); } .mc-ip-copy:active { transform: translateY(3px); } .mc-ip-port { flex: none; display: flex; align-items: center; border: 0; padding-inline: 0.9rem; font-family: var(--mc-font-display); font-size: 0.9rem; text-transform: uppercase; white-space: nowrap; color: var(--mc-gold); background: rgba(0, 0, 0, 0.5); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.5), inset -3px -3px 0 rgba(255, 255, 255, 0.14); cursor: pointer; transition: filter 0.12s linear, transform 0.06s steps(2); } .mc-ip-port:hover { filter: brightness(1.3); } .mc-ip-port:active { transform: translateY(3px); } .mc-ip.is-copied { animation: mc-flash 0.35s steps(2) 1; } @keyframes mc-flash { 50% { background: rgba(255, 255, 255, 0.35); } } /* The "+1" that floats off like an XP pickup on copy. */ .mc-orb { position: absolute; font-family: var(--mc-font-display); color: var(--mc-gold); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); pointer-events: none; animation: mc-orb-rise 0.9s ease-out forwards; } @keyframes mc-orb-rise { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-52px); } } .mc-players { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mc-font-display); color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); margin-bottom: 1.25rem; } .mc-dot { width: 10px; height: 10px; flex: none; background: var(--mc-grass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-grass) 35%, transparent); } .mc-dot-off { background: var(--mc-redstone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-redstone) 35%, transparent); } /* 12. Feature grid: an inventory row ======================================= */ .mc-slot-item { height: 100%; padding: 1.5rem 1.25rem; text-align: center; background-color: var(--mc-panel); border: var(--mc-frame) solid var(--mc-panel-border); box-shadow: inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 var(--mc-shade), inset var(--mc-bevel) var(--mc-bevel) 0 var(--mc-light); transition: transform 0.1s steps(2); } .mc-slot-item:hover { transform: translateY(-4px); } .mc-slot-icon { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 1rem; font-size: 2rem; color: var(--mc-gold); background-color: var(--mc-slot); box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.5), inset -4px -4px 0 rgba(255, 255, 255, 0.18); } .mc-slot-title { font-family: var(--mc-font-display); font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--mc-ink); } .mc-slot-text { color: var(--mc-ink-soft); margin-bottom: 0; font-size: 0.95rem; } /* 13. Stats ================================================================ */ .mc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; } .mc-stat { padding: 1.25rem 1rem; text-align: center; background: rgba(0, 0, 0, 0.4); border: var(--mc-frame) solid rgba(0, 0, 0, 0.6); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, 0.35), inset 4px 4px 0 rgba(255, 255, 255, 0.1); } .mc-stat-value { display: block; font-family: var(--mc-font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); color: var(--mc-gold); text-shadow: var(--mc-hard-shadow); } .mc-stat-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.75); } /* 14. News ================================================================= */ .mc-post { height: 100%; display: flex; flex-direction: column; background-color: var(--mc-panel); border: var(--mc-frame) solid var(--mc-panel-border); box-shadow: inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 var(--mc-shade), inset var(--mc-bevel) var(--mc-bevel) 0 var(--mc-light); } .mc-post-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: var(--mc-frame) solid var(--mc-panel-border); } .mc-post-body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; } .mc-post-title { font-family: var(--mc-font-display); font-size: 1.3rem; margin-bottom: 0.4rem; } .mc-post-title a { color: var(--mc-ink); } .mc-post-title a:hover { color: color-mix(in srgb, var(--mc-grass) 70%, var(--mc-ink)); } .mc-post-meta { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mc-ink-soft); margin-bottom: 0.85rem; } .mc-post-excerpt { color: var(--mc-ink-soft); flex: 1; margin-bottom: 1.1rem; } /* 15. Server cards ========================================================= */ .mc-server { height: 100%; padding: 1.5rem; background-color: var(--mc-panel); border: var(--mc-frame) solid var(--mc-panel-border); box-shadow: inset calc(var(--mc-bevel) * -1) calc(var(--mc-bevel) * -1) 0 var(--mc-shade), inset var(--mc-bevel) var(--mc-bevel) 0 var(--mc-light); display: flex; flex-direction: column; gap: 0.75rem; } .mc-server-name { font-family: var(--mc-font-display); font-size: 1.3rem; margin: 0; } .mc-server-count { font-family: var(--mc-font-display); color: var(--mc-ink-soft); margin: 0; } /* 16. Discord ============================================================== */ .mc-discord { padding: 6px; background: rgba(0, 0, 0, 0.35); border: var(--mc-frame) solid var(--mc-panel-border); box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.4), inset -4px -4px 0 rgba(255, 255, 255, 0.12); } .mc-discord iframe { display: block; width: 100%; border: 0; } /* 17. Footer =============================================================== */ .mc-footer { margin-top: auto; padding-block: 2.5rem; background-color: color-mix(in srgb, var(--mc-bg) 80%, #000); border-top: var(--mc-frame) solid rgba(0, 0, 0, 0.6); box-shadow: inset 0 var(--mc-bevel) 0 rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.75); text-align: center; } .mc-footer a { color: rgba(255, 255, 255, 0.9); } .mc-footer a:hover { color: var(--mc-gold); } .mc-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0.25rem; color: #fff; box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.35), inset 3px 3px 0 rgba(255, 255, 255, 0.28); transition: transform 0.1s steps(2); } .mc-social:hover { transform: translateY(-3px); color: #fff; } .mc-disclaimer { margin-top: 1.25rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); max-width: 70ch; margin-inline: auto; } /* 18. Content pages (posts, profile, plugins) ============================== */ /* Plugin and core pages render inside .content — give them a panel to sit on so nothing floats naked on the dirt wall. */ main.content > .card, main.content > .row, main.content > h1, main.content > h2 { position: relative; } main.content > h1, main.content > h2 { color: #fff; text-shadow: var(--mc-hard-shadow); } .mc-page-head { padding: 2.25rem 0 0.5rem; } /* 19. Motion, focus, print ================================================= */ .mc-reveal { opacity: 0; transform: translateY(18px); } .mc-reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.45s ease-out, transform 0.45s ease-out; } :focus-visible { outline: 3px solid var(--mc-gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .mc-reveal { opacity: 1; transform: none; } } /* 20. Responsive =========================================================== */ @media (max-width: 991.98px) { .mc-hotbar .navbar-nav { gap: 2px; margin-block: 0.75rem; } .mc-hotbar .nav-item > .nav-link { background: rgba(0, 0, 0, 0.3); } .mc-hero { min-height: 60vh !important; } } @media (max-width: 575.98px) { .mc-ip { flex-direction: column; } .mc-ip-value { justify-content: center; text-align: center; } .mc-ip-copy, .mc-ip-port { justify-content: center; padding-block: 0.6rem; } .mc-ip-group { gap: 1.25rem; } .mc-hero-actions .btn { width: 100%; } }