/* ========================================================================== RCM Chords — brand theme Revival Christian Ministry · Built by Jall Fiel Navy and scarlet, taken from the RCM crest, over a cool off-white page. ONE RULE THIS FILE OBEYS: the chart itself is never touched. `.lyrics.mainbox` — the black box holding the chords and lyrics — sets its own background, text colour, monospace family and font size, so nothing here reaches it. That has been verified: forcing colour, font-size, line-height and font-family on leaves it unchanged. Note that #chords is the whole tab pane, not just the chart: the transpose bar, key pills, font-size buttons and tabs live inside it too, and those *are* restyled here. If you add a selector, keep it to that chrome and leave .lyrics / .mainbox / .chord / .bracketed-text alone. ========================================================================== */ :root { /* Crest palette */ --rcm-navy: #16294f; --rcm-navy-deep: #0f1d3a; --rcm-navy-soft: #24406f; --rcm-red: #e5352a; --rcm-red-deep: #c3120a; --rcm-red-tint: #fdeceb; /* Neutrals */ --rcm-page: #f2f5fa; --rcm-surface: #ffffff; --rcm-surface-2: #f7f9fc; --rcm-line: #dde4ef; --rcm-line-strong: #c6d0e0; --rcm-text: #1b2540; --rcm-muted: #5c6884; /* Form */ --rcm-radius: 12px; --rcm-radius-sm: 9px; --rcm-shadow: 0 1px 2px rgba(22, 41, 79, .05), 0 6px 18px rgba(22, 41, 79, .06); --rcm-shadow-lift: 0 2px 4px rgba(22, 41, 79, .08), 0 14px 32px rgba(22, 41, 79, .14); --rcm-gap: 1rem; --rcm-pad: 1.25rem; --rcm-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rcm-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; /* Bootstrap hooks */ --bs-primary: #16294f; --bs-primary-rgb: 22, 41, 79; --bs-link-color: #16294f; --bs-link-color-rgb: 22, 41, 79; --bs-link-hover-color: #c3120a; --bs-border-color: #dde4ef; --bs-border-radius: 12px; --bs-body-color: #1b2540; --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* -------------------------------------------------------------------------- Page and type — readability first -------------------------------------------------------------------------- */ body { background: var(--rcm-page) !important; background-image: none !important; color: var(--rcm-text) !important; font-family: var(--rcm-sans) !important; font-size: 16.5px !important; line-height: 1.65 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(229, 53, 42, .22); } h1, h2, h3, h4, h5, h6 { font-family: var(--rcm-sans); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; margin-bottom: .55em; /* Deliberately `inherit`, not a fixed navy. Some upstream panels are dark and set a light colour on their container; pinning headings to navy made the "Now playing" title navy-on-navy. Inheriting means headings are the right colour on light and dark surfaces alike, and any upstream rule that names a colour explicitly still wins. */ color: inherit; } h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); } h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); } h3 { font-size: clamp(1.15rem, 1.8vw, 1.3rem); } h4 { font-size: 1.08rem; } p { margin-bottom: 1rem; max-width: 68ch; } /* No !important here on purpose. Upstream gives links on its dark panels their own light colour ("Open chart" in the Now playing card); forcing navy made those unreadable. Plain links still pick this up, because this sheet loads last. */ a { color: var(--rcm-navy); text-decoration: none; font-weight: 600; transition: color .14s ease; } a:hover, a:focus-visible { color: var(--rcm-red-deep); } :focus-visible { outline: 3px solid rgba(229, 53, 42, .5); outline-offset: 2px; border-radius: 6px; } /* Tighter, more even vertical rhythm than upstream's 100px bands. */ .p5 { padding: 2.75rem 0 !important; } section { padding-block: clamp(1.5rem, 3vw, 2.5rem); } .container { max-width: 1140px; } /* The hero's blue-white diagonal wash muddied the text sitting on it. Flat page colour reads cleaner. */ .home-hero { background: transparent !important; background-image: none !important; } /* The "Now playing" preview panel is removed, so the hero copy gets the whole row. The headline and search field stretch; body copy keeps a sane measure via the `p` rule above so lines don't run to 140 characters. */ .home-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; } .home-hero-copy { width: 100%; max-width: none; } .home-hero-copy .home-search, .home-hero-copy form { max-width: 44rem; } /* Keep the sidebar with you instead of leaving a tall empty gutter beside the song table. */ @media (min-width: 992px) { .home-library aside, .home-library .col-lg-3, .home-library .col-lg-4, .dashboard-shell aside { position: sticky; top: 1rem; align-self: start; } } /* -------------------------------------------------------------------------- Navbar -------------------------------------------------------------------------- */ .ultimate_bg_nav, .navbar.ultimate_bg_nav { background: var(--rcm-navy) !important; background-image: none !important; border-bottom: 3px solid var(--rcm-red); box-shadow: 0 2px 12px rgba(15, 29, 58, .18); padding-block: .55rem; } .ultimate_bg_nav .navbar-brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff !important; font-family: var(--rcm-serif); font-weight: 700; font-size: 1.28rem; letter-spacing: .005em; } .ultimate_bg_nav .navbar-brand .logo-img, .ultimate_bg_nav .navbar-brand img { width: 38px; height: 38px; border-radius: 9px; background: #fff; } .ultimate_bg_nav .nav-link { color: rgba(255, 255, 255, .85) !important; font-weight: 600; font-size: .97rem; border-radius: var(--rcm-radius-sm); padding: .4rem .8rem !important; transition: color .14s ease, background-color .14s ease; } .ultimate_bg_nav .nav-link:hover, .ultimate_bg_nav .nav-link:focus-visible, .ultimate_bg_nav .nav-link.active { color: #fff !important; background-color: rgba(255, 255, 255, .11); } .ultimate_bg_nav .navbar-toggler { border-color: rgba(255, 255, 255, .28); padding: .34rem .52rem; } .ultimate_bg_nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); } .ultimate_bg_nav .form-control { background-color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--rcm-radius-sm); padding: .45rem .8rem; font-size: .95rem; min-width: 12rem; } .ultimate_bg_nav .form-control::placeholder { color: #8b95ab; } .ultimate_bg_nav .form-control:focus { box-shadow: 0 0 0 .2rem rgba(229, 53, 42, .35); border-color: var(--rcm-red); } .ultimate_bg_nav .btn-outline-success { color: #fff !important; background: var(--rcm-red) !important; border: 0 !important; border-radius: var(--rcm-radius-sm); font-weight: 700; padding: .45rem 1.05rem; } .ultimate_bg_nav .btn-outline-success:hover { background: var(--rcm-red-deep) !important; } /* -------------------------------------------------------------------------- Verse of the day — replaces the upstream shoutout ticker -------------------------------------------------------------------------- */ .rcm-verse-bar { background: var(--rcm-navy-deep); border-bottom: 1px solid rgba(255, 255, 255, .08); padding-block: .7rem; } .rcm-verse-bar__inner { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .45rem .85rem; text-align: center; } .rcm-verse-bar__label { color: #ff9a90; font-size: .66rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; flex: 0 0 auto; } .rcm-verse-bar__text { margin: 0; max-width: 62ch; color: #e6ebf7; font-family: var(--rcm-serif); font-style: italic; font-size: 1rem; line-height: 1.5; } .rcm-verse-bar__ref { color: #94a3c4; font-size: .78rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; flex: 0 0 auto; } .rcm-verse-bar__version { color: #6f7d9c; font-weight: 600; font-size: .72rem; } @media (max-width: 767.98px) { .rcm-verse-bar { padding-block: .6rem; } .rcm-verse-bar__label { display: none; } .rcm-verse-bar__text { font-size: .95rem; } } /* -------------------------------------------------------------------------- Buttons — scarlet leads, navy supports -------------------------------------------------------------------------- */ .btn { border-radius: var(--rcm-radius-sm) !important; font-weight: 700; letter-spacing: .005em; padding: .5rem 1.05rem; transition: background-color .14s ease, box-shadow .14s ease, transform .08s ease; } .btn:active { transform: translateY(1px); } .ultimate_button, .btn-info, .action-buttons .btn-info, .action-buttons .btn-primary { background: var(--rcm-red) !important; background-image: none !important; border: 0 !important; color: #fff !important; box-shadow: 0 1px 2px rgba(195, 18, 10, .25) !important; } .ultimate_button:hover, .btn-info:hover, .action-buttons .btn-info:hover, .action-buttons .btn-primary:hover { background: var(--rcm-red-deep) !important; color: #fff !important; box-shadow: 0 3px 12px rgba(195, 18, 10, .3) !important; } .btn-primary, .action-buttons .btn-success { background: var(--rcm-navy) !important; background-image: none !important; border: 0 !important; color: #fff !important; } .btn-primary:hover, .action-buttons .btn-success:hover { background: var(--rcm-navy-soft) !important; color: #fff !important; } .btn-outline-primary, .btn-outline-secondary, .btn-light { border: 1.5px solid var(--rcm-line-strong) !important; color: var(--rcm-navy) !important; background: var(--rcm-surface) !important; } .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-light:hover { background: var(--rcm-navy) !important; border-color: var(--rcm-navy) !important; color: #fff !important; } .btn-success { background: #1f7a4d !important; border: 0 !important; color: #fff !important; } .btn-danger { background: var(--rcm-red) !important; border: 0 !important; } .badge.bg-primary, .badge.bg-info { background-color: var(--rcm-navy) !important; color: #fff !important; font-weight: 700; } .badge.bg-warning, .badge.bg-danger { background-color: var(--rcm-red) !important; color: #fff !important; } /* -------------------------------------------------------------------------- Surfaces — one card style everywhere -------------------------------------------------------------------------- */ .card, .song_details, .song-main-surface, .song-hero-card, .category-table-shell, .panel, .list-group { background-color: var(--rcm-surface) !important; background-image: none !important; border: 1px solid var(--rcm-line) !important; border-radius: var(--rcm-radius) !important; box-shadow: var(--rcm-shadow) !important; } /* The dashboard welcome panel is one of upstream's *dark* surfaces: its text is set to white. Forcing it white like the cards above made the whole greeting invisible, so it gets the navy treatment instead of the light one. */ .welcome-card { background: var(--rcm-navy) !important; background-image: linear-gradient(120deg, var(--rcm-navy-soft), var(--rcm-navy)) !important; border: 0 !important; border-left: 4px solid var(--rcm-red) !important; border-radius: var(--rcm-radius) !important; box-shadow: var(--rcm-shadow) !important; color: #fff !important; } .welcome-card h1, .welcome-card h2, .welcome-card h3, .welcome-card p, .welcome-card span { color: #fff !important; } .card-body { padding: var(--rcm-pad) !important; } .card-header { background: var(--rcm-surface-2) !important; border-bottom: 1px solid var(--rcm-line) !important; color: var(--rcm-navy) !important; font-weight: 800; font-size: 1.02rem; padding: .85rem var(--rcm-pad) !important; } .song-hero-card { border-top: 3px solid var(--rcm-red) !important; } .song-verse-strip, .bible-verse { background: var(--rcm-red-tint) !important; border: 1px solid rgba(229, 53, 42, .28) !important; border-radius: var(--rcm-radius); color: #7d211c !important; font-family: var(--rcm-serif); font-style: italic; font-size: 1rem; padding: .75rem 1.1rem !important; margin-bottom: 1rem !important; } .song-kicker, .home-milestone-label { color: var(--rcm-red) !important; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; margin-bottom: .3rem; } /* -------------------------------------------------------------------------- Tables — aligned, compact, scannable -------------------------------------------------------------------------- */ .table { margin-bottom: 0; font-size: .97rem; } .table > :not(caption) > * > * { background-color: transparent; } .table thead th { background: var(--rcm-navy) !important; color: #fff !important; border-color: var(--rcm-navy) !important; font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; padding: .7rem .9rem !important; white-space: nowrap; } .table tbody td { padding: .62rem .9rem !important; vertical-align: middle; border-color: var(--rcm-line) !important; } .table tbody tr:hover > * { background-color: #eef2f9 !important; } .table tbody tr:last-child td { border-bottom: 0 !important; } /* Dates read better right-aligned and tabular. */ .table thead th:last-child, .table tbody td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--rcm-muted); white-space: nowrap; } .author-link { color: var(--rcm-muted) !important; font-weight: 600; } .author-link:hover { color: var(--rcm-red-deep) !important; } /* -------------------------------------------------------------------------- Song page chrome — controls around the viewer, never the viewer -------------------------------------------------------------------------- */ /* Download PDF is removed, so the 4-up grid becomes an even 3-up. */ .action-buttons .row { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; } .action-buttons .row > .col { flex: 1 1 0; } @media (min-width: 768px) { .action-buttons .row { flex-wrap: nowrap; } } .action-buttons .btn { width: 100%; padding: .55rem .7rem; font-size: .93rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .nav-tabs { border-bottom-color: var(--rcm-line) !important; gap: .35rem; } .nav-tabs .nav-link { color: var(--rcm-muted) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--rcm-radius-sm) !important; font-weight: 700; font-size: .95rem; padding: .45rem .95rem !important; } .nav-tabs .nav-link:hover:not(.active) { color: var(--rcm-navy) !important; background-color: #e9eef7 !important; } .nav-tabs .nav-link.active { color: #fff !important; background: var(--rcm-navy) !important; border-color: var(--rcm-navy) !important; } .transpose-section { background: var(--rcm-navy) !important; background-image: none !important; border: 0 !important; border-radius: var(--rcm-radius) var(--rcm-radius) 0 0; color: #fff !important; padding: .7rem .95rem !important; } .transpose-down, .transpose-up, .transpose-section .transpose-down, .transpose-section .transpose-up { background: var(--rcm-red) !important; background-image: none !important; border: 0 !important; color: #fff !important; font-weight: 800; border-radius: var(--rcm-radius-sm); } /* 17 keys in a flex wrap fell as 14 + 3, which looked broken. A fixed grid gives even rows (9 + 8 on desktop, 6 + 6 + 5 on small screens) and every pill the same width. */ .transpose-keys { display: grid !important; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .3rem; padding: .7rem 0 !important; } @media (max-width: 767.98px) { .transpose-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .transpose-keys a { background: var(--rcm-surface) !important; border: 1.4px solid var(--rcm-line-strong) !important; color: var(--rcm-navy) !important; font-weight: 700; font-size: .88rem; border-radius: var(--rcm-radius-sm); text-align: center; padding: .35rem .2rem !important; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; } .transpose-keys a:hover { border-color: var(--rcm-red) !important; background: var(--rcm-red-tint) !important; } .transpose-keys a.selected { background: var(--rcm-red) !important; border-color: var(--rcm-red-deep) !important; color: #fff !important; } /* Share row: Facebook and Twitter are removed, so centre what's left. */ .share-icons { display: flex; align-items: center; justify-content: center; gap: .5rem; } .share-icons a, .share-icons button { color: var(--rcm-navy) !important; display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; border: 1.4px solid var(--rcm-line-strong); background: var(--rcm-surface); transition: all .14s ease; } .share-icons a:hover, .share-icons button:hover { color: #fff !important; background: var(--rcm-red) !important; border-color: var(--rcm-red) !important; } #scrollBtn, #font-size-decrease, #font-size-increase, #toggle-light-mode { border-radius: var(--rcm-radius-sm); } /* -------------------------------------------------------------------------- Home page: the replacement band -------------------------------------------------------------------------- */ .rcm-band { background: var(--rcm-navy); color: #dbe3f2; padding-block: clamp(2rem, 4vw, 3rem) !important; border-block: 1px solid rgba(255, 255, 255, .07); } .rcm-band__verse { text-align: center; max-width: 44rem; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); } .rcm-band__quote { font-family: var(--rcm-serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.4; color: #fff; margin: 0 0 .6rem; max-width: none; } .rcm-band__ref { color: #ff9a90; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0; max-width: none; } .rcm-band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .rcm-band__item { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--rcm-radius); padding: 1.15rem; text-align: center; } .rcm-band__item h3 { color: #fff; font-size: 1.05rem; margin: 0 0 .4rem; } .rcm-band__item p { color: #b6c2da; font-size: .92rem; line-height: 1.55; margin: 0; max-width: none; } @media (max-width: 767.98px) { .rcm-band__grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .form-control, .form-select { border: 1.5px solid var(--rcm-line-strong); border-radius: var(--rcm-radius-sm); background-color: var(--rcm-surface); padding: .55rem .8rem; font-size: 1rem; } .form-control:focus, .form-select:focus { border-color: var(--rcm-red); box-shadow: 0 0 0 .2rem rgba(229, 53, 42, .2); } .form-label { color: var(--rcm-navy); font-weight: 700; font-size: .93rem; margin-bottom: .3rem; } .form-text { color: var(--rcm-muted); font-size: .85rem; } .form-check-input:checked { background-color: var(--rcm-red); border-color: var(--rcm-red-deep); } .alert { border-radius: var(--rcm-radius); border-width: 1px; } .alert-info { background: #eef2f9; border-color: var(--rcm-line); color: var(--rcm-navy); } .alert-danger { background: var(--rcm-red-tint); border-color: rgba(229, 53, 42, .3); color: #7d211c; } /* Login / register cards sit better narrow and centred. */ .login-card, .register-card, form.needs-validation { max-width: 34rem; } /* -------------------------------------------------------------------------- Pagination — quiet by default, scarlet for the current page -------------------------------------------------------------------------- */ .pagination { gap: .3rem; margin-bottom: 0; } .pagination .page-link, .pagination .page-link.ultimate_button { background: var(--rcm-surface) !important; background-image: none !important; color: var(--rcm-navy) !important; border: 1.4px solid var(--rcm-line-strong) !important; border-radius: var(--rcm-radius-sm) !important; box-shadow: none !important; font-weight: 700; min-width: 2.5rem; text-align: center; padding: .4rem .55rem !important; } .pagination .page-link:hover { background: var(--rcm-red-tint) !important; border-color: var(--rcm-red) !important; } .pagination .page-item.active .page-link, .pagination .page-link.ultimate_button_selected, .ultimate_button_selected { background: var(--rcm-red) !important; border-color: var(--rcm-red-deep) !important; color: #fff !important; } .pagination .page-item.disabled .page-link { opacity: .45; background: var(--rcm-surface-2) !important; border-color: var(--rcm-line) !important; color: var(--rcm-muted) !important; } /* -------------------------------------------------------------------------- Modals -------------------------------------------------------------------------- */ .modal-content { border-radius: var(--rcm-radius); border: 1px solid var(--rcm-line); } .modal-header { background: var(--rcm-navy); color: #fff; border-bottom: 0; } .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); } .modal-footer { border-top: 1px solid var(--rcm-line); } /* -------------------------------------------------------------------------- Footer + build credit -------------------------------------------------------------------------- */ footer, .footer, .site-footer { background: var(--rcm-navy-deep) !important; color: #9aa7c2 !important; border-top: 3px solid var(--rcm-red); font-size: .9rem; padding-block: 1.1rem !important; } footer a, .footer a { color: #ff9a90 !important; } /* -------------------------------------------------------------------------- My playlists panel (injected into the dashboard) -------------------------------------------------------------------------- */ /* The shoutouts tile is removed, so the two remaining stat tiles share the row evenly instead of leaving a third of it empty. */ .dashboard-shell .row.g-3 > [class*="col-md-"] { flex: 1 1 0; max-width: none; } .rcm-playlists__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .rcm-playlists__count { display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--rcm-red); color: #fff; font-size: .72rem; font-weight: 800; vertical-align: middle; } .rcm-playlists__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .rcm-playlist { display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; border: 1px solid var(--rcm-line); border-radius: var(--rcm-radius-sm); background: var(--rcm-surface-2); } .rcm-playlist__num { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--rcm-navy); color: #fff; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; } .rcm-playlist__name { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--rcm-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rcm-playlist__actions { flex: 0 0 auto; display: flex; gap: .35rem; } .rcm-playlist__actions .btn { padding: .3rem .7rem; font-size: .82rem; } .rcm-playlists__empty { text-align: center; padding: 1.5rem 1rem; } .rcm-playlists__empty p { color: var(--rcm-muted); margin: 0 0 .9rem; max-width: none; } @media (max-width: 575.98px) { .rcm-playlist { flex-wrap: wrap; } .rcm-playlist__name { flex-basis: calc(100% - 2.55rem); white-space: normal; } .rcm-playlist__actions { width: 100%; justify-content: flex-end; } } /* -------------------------------------------------------------------------- Install prompt (injected by brand.js) -------------------------------------------------------------------------- */ .rcm-install { position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 1080; margin-inline: auto; max-width: 26rem; display: flex; align-items: center; gap: .8rem; padding: .8rem .95rem; background: var(--rcm-surface); border: 1px solid var(--rcm-line); border-left: 4px solid var(--rcm-red); border-radius: var(--rcm-radius); box-shadow: var(--rcm-shadow-lift); transform: translateY(140%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); } .rcm-install[data-open="true"] { transform: translateY(0); } .rcm-install__icon { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; } .rcm-install__text { flex: 1 1 auto; min-width: 0; } .rcm-install__title { font-weight: 800; color: var(--rcm-navy); font-size: .93rem; } .rcm-install__sub { color: var(--rcm-muted); font-size: .8rem; line-height: 1.4; } .rcm-install__go { flex: 0 0 auto; border: 0; border-radius: var(--rcm-radius-sm); padding: .5rem 1rem; font-weight: 700; color: #fff; background: var(--rcm-red); cursor: pointer; } .rcm-install__go:hover { background: var(--rcm-red-deep); } .rcm-install__close { flex: 0 0 auto; border: 0; background: transparent; color: var(--rcm-muted); font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0 .2rem; } /* -------------------------------------------------------------------------- Installed app -------------------------------------------------------------------------- */ @media (display-mode: standalone) { .ultimate_bg_nav { padding-top: env(safe-area-inset-top); } body { padding-bottom: env(safe-area-inset-bottom); } .rcm-install { display: none; } } @media (max-width: 575.98px) { body { font-size: 16px !important; } .rcm-install { gap: .6rem; padding: .7rem .75rem; } .rcm-install__sub { display: none; } .table thead th, .table tbody td { padding: .5rem .6rem !important; } }