/* ========================================================================== COBBLEMON AU - custom store styles -------------------------------------------------------------------------- Framework in use: Bootstrap 3 + Bootswatch "Flatly" (loaded by base.twig). This stylesheet loads LAST, so it overrides the theme without !important (the one exception is marked below). TO REVERT COMPLETELY: delete everything in this file. ========================================================================== */ :root { --cau-navy: #2c3e50; /* Flatly navy - navbar + headings */ --cau-teal: #18bc9c; /* Flatly accent - links + primary buttons */ --cau-teal-dark: #128f76; --cau-ground: #eceff3; /* page ground - see note in section 1 */ --cau-hairline: #e7ebee; --cau-ink-soft: #5d6d7e; --cau-muted: #8b98a5; --cau-card-radius: 12px; --cau-banner-h: 420px; /* height of the header banner band */ } /* -------------------------------------------------------------------------- 1. PAGE GROUND + HEADER BANNER The ground is #eceff3, not pure #ffffff, on purpose: the panels are white, and white cards on a white page have no edge, which is what made the original store look flat. This is light enough to still read as "white" while letting every panel separate from it. The banner is background.png, pre-blurred and shrunk to 880x495 before being embedded below, so the whole thing costs ~13 KB instead of 1.5 MB. It is baked into the image rather than applied with CSS filter:blur(), because a CSS filter would also blur the logo sitting on top of it. It is squashed to the band height rather than cropped - at this blur radius the distortion is invisible, and nothing gets cut off. IMPORTANT: do NOT set a Background URL in Design Settings. base.twig would add it inline on , and an inline style beats this rule - you would lose the banner. -------------------------------------------------------------------------- */ body { min-height: 100vh; background-color: var(--cau-ground); background-image: linear-gradient( to bottom, rgba(10, 26, 50, .20) 0px, rgba(10, 26, 50, .06) 130px, rgba(236, 239, 243, .40) 300px, var(--cau-ground) var(--cau-banner-h) ), url("data:image/jpeg;base64,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"); background-repeat: no-repeat, no-repeat; background-position: center top, center top; background-size: 100% var(--cau-banner-h), 100% var(--cau-banner-h); -webkit-font-smoothing: antialiased; } @media (max-width: 767px) { :root { --cau-banner-h: 300px; } } /* -------------------------------------------------------------------------- 2. HEADER / LOGO -------------------------------------------------------------------------- */ .header { margin: 0 0 24px; padding: 34px 0 26px; text-align: center; } .logo { height: auto; text-align: center; } /* The logo is a near-black hexagon on transparency, sitting on a bright blue banner - so a plain dark shadow is the right separator here. */ .logo img { height: 112px; width: auto; max-width: 80%; display: inline-block; filter: drop-shadow(0 6px 18px rgba(8, 22, 44, .45)); } @media (max-width: 767px) { .header { padding: 22px 0 18px; margin-bottom: 16px; } .logo img { height: 78px; } } /* -------------------------------------------------------------------------- 3. NAVBAR Bigger tap targets, rounded slab, and the basket promoted to a green button so the buy path is the most visible thing in the bar. -------------------------------------------------------------------------- */ .navbar-default { background-color: var(--cau-navy); border: 0; border-radius: var(--cau-card-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); margin-bottom: 26px; } .navbar-default .navbar-nav > li > a { color: rgba(255, 255, 255, .82); font-weight: 600; letter-spacing: .2px; padding: 10px 16px; margin: 10px 2px; border-radius: 8px; transition: background-color .15s ease, color .15s ease; } /* `.open` is added to the

by Bootstrap's own dropdown JS when a category dropdown is expanded - it is not written in navbar.twig. */ .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .open > a { background-color: rgba(255, 255, 255, .11); color: #fff; } /* Shopping basket - the only navbar-right item */ .navbar-default .navbar-nav.navbar-right > li > a { background-color: var(--cau-teal); color: #fff; } .navbar-default .navbar-nav.navbar-right > li > a:hover, .navbar-default .navbar-nav.navbar-right > li > a:focus { background-color: var(--cau-teal-dark); color: #fff; } .navbar-default .navbar-toggle { border-color: rgba(255, 255, 255, .25); border-radius: 8px; margin-top: 13px; margin-bottom: 13px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: rgba(255, 255, 255, .12); } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-default .dropdown-menu { border: 0; border-radius: 10px; padding: 6px; box-shadow: 0 14px 32px rgba(0, 0, 0, .3); } .navbar-default .dropdown-menu > li > a { border-radius: 7px; padding: 9px 14px; font-weight: 500; } .navbar-default .dropdown-menu > li > a:hover, .navbar-default .dropdown-menu > li > a:focus { background-color: rgba(24, 188, 156, .12); color: var(--cau-navy); } @media (max-width: 767px) { .navbar-default .navbar-collapse { border-color: rgba(255, 255, 255, .12); } .navbar-default .navbar-nav > li > a { margin: 2px 8px; padding: 12px 14px; } .navbar-default .navbar-nav.navbar-right { margin-bottom: 10px; } } /* -------------------------------------------------------------------------- 4. PANELS (the white cards - every page uses these) -------------------------------------------------------------------------- */ /* Shadows are tuned for a light ground: tinted navy rather than black, and split into a tight contact shadow plus a wide soft one. A single heavy black shadow reads as dirt on a pale page. */ .panel-default { border: 1px solid rgba(24, 39, 56, .06); border-radius: var(--cau-card-radius); background-color: #fff; box-shadow: 0 1px 2px rgba(24, 39, 56, .05), 0 10px 26px rgba(24, 39, 56, .07); } .panel-default > .panel-body { padding: 24px; } .panel-default > .panel-heading { background-color: #fff; border-bottom: 1px solid var(--cau-hairline); border-radius: var(--cau-card-radius) var(--cau-card-radius) 0 0; color: var(--cau-navy); font-weight: 700; padding: 14px 20px; } @media (max-width: 767px) { .panel-default > .panel-body { padding: 16px; } } /* -------------------------------------------------------------------------- 5. TEXT INSIDE PANELS This is what styles your homepage copy - index.twig renders it from {{ page.content }}, i.e. the rich-text box in your dashboard. -------------------------------------------------------------------------- */ .panel-body h1, .panel-body h2, .panel-body h3, .panel-body h4 { color: var(--cau-navy); font-weight: 700; } .panel-body h1 { font-size: 34px; margin-top: 0; margin-bottom: 18px; } .panel-body p { line-height: 1.65; } /* :not(.btn) so that buttons keep their own colour */ .panel-body a:not(.btn) { color: var(--cau-teal); font-weight: 600; } .panel-body a:not(.btn):hover { color: var(--cau-teal-dark); } @media (max-width: 767px) { .panel-body h1 { font-size: 26px; } } /* -------------------------------------------------------------------------- 6. PACKAGE GRID (Ranks / Crate Keys / Global Boosters) category.twig emits packages|batch(3) into plain .col-md-4 columns with no .col-sm-*, so below 992px every card went full width and the price / button halves stacked awkwardly. Fixed here without touching the template. -------------------------------------------------------------------------- */ /* Equal-height rows. :has() is used so this only ever hits the package grid and never any other .row on the site. Browsers without :has() simply keep the current float layout. */ .row:has(> .col-md-4 > .item-wrapper) { display: flex; flex-wrap: wrap; } .col-md-4:has(> .item-wrapper) { float: none; display: flex; width: 100%; margin-bottom: 24px; } /* 2-up on tablets, 3-up on desktop */ @media (min-width: 768px) and (max-width: 991px) { .col-md-4:has(> .item-wrapper) { width: 50%; } } @media (min-width: 992px) { .col-md-4:has(> .item-wrapper) { width: 33.3333%; } } .item-wrapper { width: 100%; display: flex; flex-direction: column; margin-bottom: 0; border: 1px solid var(--cau-hairline); border-radius: var(--cau-card-radius); box-shadow: 0 3px 10px rgba(16, 24, 32, .07); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .item-wrapper:hover { transform: translateY(-4px); border-color: rgba(24, 188, 156, .55); box-shadow: 0 16px 32px rgba(16, 24, 32, .18); } .item-wrapper > .panel-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px; } .item-wrapper .img-responsive { margin: 0 auto; border-radius: 8px; } /* ---- card footer: name, price, CTA ---- */ .item-footer { margin-top: auto; /* pins the CTA to the bottom of every card */ padding-top: 14px; } /* Name + price on the left, button on the right, as in the original layout. Flex rather than the template's col-md-6 halves, because col-md-* only engages at 992px and up - below that the two halves would stack and the button would drop onto its own line. flex-wrap is the safety valve: if a package name is ever long enough to squeeze the button, it wraps instead of overflowing the card. */ .item-footer .row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: 0; margin-right: 0; } .item-footer .col-md-6 { width: auto; float: none; padding-left: 0; padding-right: 0; } .item-footer .col-md-6:first-child { flex: 1 1 auto; min-width: 0; } .item-footer .col-md-6.text-right { flex: 0 0 auto; text-align: right; } /* The price is a bare text node sitting next to name, so the column carries the price styling and carries the name. The
between them is hidden and replaced with a margin, so the gap is controllable. */ .item-footer .col-md-6:first-child { font-size: 17px; font-weight: 700; color: var(--cau-teal-dark); line-height: 1.25; } .item-footer .col-md-6:first-child br { display: none; } .item-footer .col-md-6:first-child b { display: block; margin-bottom: 3px; font-size: 18px; font-weight: 700; color: var(--cau-navy); line-height: 1.25; } .item-footer del { font-size: 15px; font-weight: 400; color: var(--cau-muted); margin-right: 5px; } /* Scoped to .item-footer ONLY - basket.twig uses .btn-xs for its quantity +/- buttons and must not be affected. */ .item-footer .btn-xs { display: inline-block; width: auto; margin-top: 0; padding: 10px 18px; font-size: 15px; font-weight: 700; line-height: 1.35; border-radius: 8px; white-space: nowrap; } /* -------------------------------------------------------------------------- 7. BUTTONS & FORMS Only colour, radius and weight change - no size or display changes, so basket.twig / checkout.twig layouts are untouched. -------------------------------------------------------------------------- */ .btn { border-radius: 8px; font-weight: 600; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn-primary { background-color: var(--cau-teal); border-color: var(--cau-teal); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background-color: var(--cau-teal-dark); border-color: var(--cau-teal-dark); } /* btn-secondary is a Bootstrap 4 class that BS3 does not define, so the modal Close button was rendering unstyled. */ .btn-secondary { background-color: #eceff1; border-color: #dde3e8; color: var(--cau-navy); } .btn-secondary:hover, .btn-secondary:focus { background-color: #dde3e8; border-color: #ced6dd; color: var(--cau-navy); } .form-control { border-radius: 8px; border: 1px solid #d8dee3; box-shadow: none; } .form-control:focus { border-color: var(--cau-teal); box-shadow: 0 0 0 3px rgba(24, 188, 156, .18); } .alert { border: 0; border-radius: 10px; } /* -------------------------------------------------------------------------- 8. PACKAGE MODALS (the "More info" popups on category pages) -------------------------------------------------------------------------- */ .modal-content { border: 0; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); } .modal-header { border-bottom: 1px solid var(--cau-hairline); padding: 18px 22px; } .modal-title { font-weight: 700; color: var(--cau-navy); } .modal-body { padding: 22px; } .modal-footer { border-top: 1px solid var(--cau-hairline); padding: 16px 22px; } /* On phones the Close / Buy now buttons were cramped onto one line. */ @media (max-width: 575px) { .modal-footer > a { display: block; } .modal-footer .btn { display: block; width: 100%; margin-left: 0; } .modal-footer > a + a, .modal-footer .btn + .btn { margin-top: 8px; } } /* -------------------------------------------------------------------------- 9. FOOTER These links sit directly on the body rather than inside a panel, so they are toned down against the light ground instead of competing with it. -------------------------------------------------------------------------- */ .footer { margin: 26px 0 40px; } .footer p { color: var(--cau-muted); margin: 0; } .footer a { color: var(--cau-ink-soft); } .footer a:hover, .footer a:focus { color: var(--cau-navy); } @media (max-width: 767px) { .footer { text-align: center; } /* BS3 declares .pull-right as float:right !important, so this needs it too. */ .footer .pull-right { float: none !important; } .footer .col-md-6 + .col-md-6 { margin-top: 6px; } } /* -------------------------------------------------------------------------- 10. SERVER ADDRESS BAR Pairs with the block added to header.twig. Because header.twig is included by base.twig, this appears on every page of the store, including the basket and checkout - it sits above the navbar and touches nothing below it. -------------------------------------------------------------------------- */ .cau-serverbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 14px; margin-top: 16px; } /* Both chips sit on the banner image, whose brightness varies from white cloud to deep blue water. Neither may rely on the image behind it: the status is a frosted white chip with navy text, the address is a solid navy pill. That also ranks them - the address is the thing players need. */ .cau-serverbar-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, .84); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(8, 22, 44, .13); color: var(--cau-navy); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .cau-serverbar-status .js-status-player-count { font-weight: 700; } .cau-serverbar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cau-teal); box-shadow: 0 0 0 3px rgba(24, 188, 156, .22); } /* user-select:all means a single click selects the whole address, so players can copy it with one click + Ctrl+C. No JavaScript involved. */ .cau-serverbar-ip { display: inline-block; background: var(--cau-navy); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .2px; padding: 10px 20px; box-shadow: 0 4px 16px rgba(8, 22, 44, .28); user-select: all; -webkit-user-select: all; transition: background-color .15s ease, box-shadow .15s ease; } .cau-serverbar-ip:hover { background: #22303d; box-shadow: 0 6px 20px rgba(8, 22, 44, .36); } @media (max-width: 767px) { .cau-serverbar { margin-top: 12px; gap: 7px 10px; } .cau-serverbar-ip { font-size: 14px; padding: 8px 16px; } .cau-serverbar-status { font-size: 11px; padding: 6px 12px; } } /* --- LIVE PLAYER COUNT: self-hiding --- store.js fills .js-status-player-count with text once mcsrvstat.us answers. Until then - and permanently, if the server is offline or the lookup fails or times out - the span stays empty, and this rule keeps the whole status block hidden rather than showing a lone dot with no number beside it. The moment a real count arrives the span is no longer :empty and the block appears on its own. Nothing to switch on by hand. */ .cau-serverbar-status:has(.js-status-player-count:empty) { display: none; }