/* ============================================
L2 Emerge - Responsive Stylesheet
Breakpoints:
- Tablet: max-width 1024px
- Small tablet / large phone: max-width 900px
- Mobile: max-width 600px
Loaded after style.css so these rules win.
============================================ */
/* ------------------------------------------------------------
GENERIC FLUID CONTAINERS (apply on all viewports below 1280)
------------------------------------------------------------ */
@media (max-width: 1279px) {
.full_wrap,
.header_wrap,
.div_launcher,
.footer_wrap,
.servers_tabs_header,
.content_servers_tabs {
width: 100%;
max-width: 100%;
padding-left: 16px;
padding-right: 16px;
}
/* On phones the landscape backdrop looks stretched/cropped weirdly with `cover`.
Anchor it to the viewport height instead: the image keeps its aspect ratio,
centres horizontally, and the vertical fade gradient (defined in style.css)
dissolves it smoothly into the body colour at the bottom of the viewport. */
body {
background-size:
100% 60vh, /* fade-out gradient */
100% 60vh, /* horizontal vignette */
100% 60vh, /* atmospheric tint */
auto 60vh; /* bk_main.jpg — keep aspect ratio, fit viewport height */
}
}
/* =====================================================
TABLET — up to 1024px
===================================================== */
@media (max-width: 1024px) {
/* Header */
.header_wrap {
padding: 8px 16px;
}
.top_menu_left {
gap: 0;
}
.top_menu_content,
.btn_menu_top,
.wrap_btn_lang,
.btn_account {
padding: 8px 10px;
font-size: 12px;
}
.top_menu_content .text_11_white,
.btn_account .text_11_white {
font-size: 12px;
}
.account_header_info { display: none; }
.line_v_20 { margin: 0 6px; }
/* Server dropdown */
.servers_tabs_header { gap: 12px; }
/* Hero */
.top_div_home {
height: 360px;
margin-top: 80px;
}
.right_div_home {
max-width: 60%;
margin-right: 32px;
gap: 18px;
}
.text_32_home { font-size: 26px; }
.text_18_home { font-size: 16px; }
.hero_char_home {
left: -18%;
width: 80%;
height: 180%;
top: -24%;
}
/* Servers grid -> 2 columns */
.servers_frame {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 40px;
}
.right_div_server {
width: 50%;
margin-right: 14px;
padding-top: 18px;
padding-bottom: 18px;
}
.srv_card_game_logo { height: 60px; }
.bk_server { height: 260px; }
/* Wiki / Game guide */
.div_wiki {
padding: 40px 32px;
min-height: 280px;
}
.left_wiki { width: 55%; }
.right_wiki { width: 45%; }
.text_32_wiki { font-size: 26px; }
.text_18_wiki { font-size: 15px; }
.text_18_wiki2 { font-size: 14px; }
/* Launcher */
.img_app_client { width: 440px; }
/* Footer */
.footer_wrap {
flex-direction: column;
align-items: stretch;
gap: 28px;
}
.right_footer { justify-content: flex-start; }
}
/* =====================================================
SMALL TABLET / LARGE PHONE — up to 900px
===================================================== */
@media (max-width: 900px) {
/* Hide desktop server-dropdown trigger and its panel */
.btn_servers_toggle,
.dropdown_header_servers,
.line_v_20 {
display: none !important;
}
/* Hide desktop secondary nav items, keep brand only */
.top_menu_left .top_menu_content:not(.btn_servers_toggle),
.top_menu_content_lang,
.btn_download,
.btn_header_download {
display: none;
}
/* Show mobile triggers */
.icon_menu {
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 6px;
background: url('../images/icons/menu.svg') no-repeat center / 22px 22px,
transparent;
}
.icon_menu:hover { background-color: #3C342F; }
.icon_user_mob {
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 6px;
background: url('../images/icons/user_24.svg') no-repeat center / 22px 22px,
transparent;
}
.icon_user_mob:hover { background-color: #3C342F; }
.hero_eclipse {
width: 250px;
top:-50px;
left: -50px;
}
.hero_interlude {
width: 270px;
top: -130px;
left: -100px;
}
.hero_classic {
width:370px;
left:-110px;
top:-80px;
}
/* Hide desktop account button on mobile -> use icon_user_mob */
.wrap_btn_account_open .btn_account { display: none; }
/* Hero -> single column, stacked */
.top_div_home {
flex-direction: column;
height: auto;
min-height: 420px;
padding: 40px 20px;
margin-top: 10px;
}
.right_div_home {
max-width: 100%;
width: 100%;
margin: 0;
text-align: center;
align-items: end;
gap: 14px;
}
.text_18_home { display: none; }
.text_18_home_resp { display: block; text-align: center; }
.iconset_home { justify-content: center; flex-wrap: wrap; }
.btn_big_download { margin: 4px auto 0; margin-right:0;}
/* Servers grid -> 1 column */
.servers_frame {
grid-template-columns: 1fr;
gap: 22px;
margin-top: 28px;
}
.bk_server { height: 240px; }
.right_div_server { width: 55%; }
/* Wiki section -> stack, image becomes a top banner */
.div_wiki {
flex-direction: column;
padding: 32px 20px;
min-height: 0;
}
.left_wiki,
.right_wiki {
width: 100%;
max-width: 100%;
}
.right_wiki { display: none; } /* the bg already shows the art */
.div_wiki::before { background-size: cover; opacity: 0.6; background-position: right bottom;}
/* Launcher */
.wrap_launcher { padding: 40px 0; }
.img_app_client { width: 100%; max-width: 460px; }
/* Hero character art (already overridden in style.css; keep aligned) */
.hero_char_home {
left: -30%;
top: -24%;
width: 120%;
height: 180%;
}
}
/* =====================================================
MOBILE — up to 600px
===================================================== */
@media (max-width: 600px) {
.right_div_home {
max-width: 200px;
margin-left:auto;
}
/* Header — tighter */
.bk_header { height: 52px; }
.header_wrap { padding: 6px 12px; }
.emerge_brand_mark { height: 26px; }
.top_menu_right { gap: 4px; }
/* Typography */
.text_32_home { font-size: 22px; }
.text_18_home_resp { font-size: 13px; }
.text_24_server { font-size: 20px; margin-top: 28px; margin-bottom: 16px; }
/* Hero */
.top_div_home {
min-height: 240px;
padding: 28px 14px;
border-radius: 10px;
}
.img1_home { border-radius: 10px; }
.btn_big_download {
display:none;
padding: 12px 22px;
font-size: 14px;
}
.iconset_home {
gap: 10px;
font-size: 11px;
}
.btn_icons_home { font-size: 11px; }
/* Hero character art on tiny phones — keep silhouette visible but small */
.hero_char_home {
left: -50%;
top: -24%;
width: 130%;
height: 180%;
opacity: 0.85;
}
/* Server cards */
.bk_server { height: 220px; }
.right_div_server {
width: 60%;
margin-right: 10px;
padding-top: 14px;
padding-bottom: 14px;
}
.text_11_white_desk { display:none;}
.srv_card_game_logo { height: 48px; }
.text_14_regular_srv {
font-size: 12px;
min-height: 0;
max-width: 100%;
}
.btn_play_now {
display:none;
padding: 8px 14px;
font-size: 12px;
}
.servers_frame .btn_feat_icon {
flex-shrink: 1;
width:fit-content;
}
/* Server bottom strip — stack on phones */
.content1_servers_desktop {
align-items: flex-start;
}
.servers_bottom_wrap { padding: 10px 12px; }
.btn_feat_icon {
width: 100%;
justify-content: center;
}
/* Hero card character tweaks per server — pull them in tighter */
.hero_eclipse {
width: 250px;
top:-50px;
left: -65px;
}
.hero_interlude {
width: 270px;
top: -130px;
left: -100px;
}
.hero_classic {
width:370px;
left:-110px;
top:-80px;
}
/* Wiki */
.div_wiki {
padding: 24px 16px;
margin-top: 32px;
margin-bottom: 32px;
}
.text_32_wiki { font-size: 22px; }
.text_18_wiki { font-size: 14px; }
.text_18_wiki2 { font-size: 13px; }
.btn_wiki { padding: 11px 20px; font-size: 12px; }
/* Launcher */
.wrap_launcher { padding: 28px 0; }
.btn_win_download { padding: 12px 24px; font-size: 14px; }
/* Footer */
.footer_content { padding: 36px 0 44px; }
.footer_wrap {
width: 100%;
max-width: 100%;
padding: 0 16px;
gap: 22px;
}
.footer_links_row {
gap: 10px;
row-gap: 8px;
}
.footer_separator { display: none; }
.secondary_link2_small { font-size: 12px; }
/* Account dropdown -> full-width sheet on mobile */
.account_wrap,
.account_wrap_logged {
position: fixed;
top: 56px;
left: 8px;
right: 8px;
width: auto;
min-width: 0;
}
.pop_up_arrow_account { right: 28px; }
/* Language dropdown -> same idea */
.language_wrap {
position: fixed;
top: 56px;
left: 8px;
right: 8px;
}
.language_list_wrap { min-width: 0; }
}
/* =====================================================
VERY SMALL — up to 380px (extra safety)
===================================================== */
@media (max-width: 380px) {
.text_32_home { font-size: 20px; }
.iconset_home { font-size: 10px; }
.btn_big_download { width: fit-content; }
.right_div_server { width: 65%; }
.srv_card_game_logo { height: 52px; }
}
/* =====================================================
MOBILE NAV DRAWER (≤900px)
The JS in public/js/shared.js adds `.open2` to
.bk_mobile_menu and .menu_nav_mobile when the burger
is tapped. style.css has them at display:none, so we
reveal + style them here.
===================================================== */
@media (max-width: 900px) {
/* Burger button — use the inline SVG so we don't depend on a missing icon file */
.icon_menu {
display: inline-flex !important;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 6px;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.icon_menu:hover { background-color: #3C342F; }
/* Overlay backdrop (sibling to the drawer) */
.menu_nav_mobile {
display: block !important;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.22s ease, visibility 0.22s ease;
}
.menu_nav_mobile.open2 {
opacity: 1;
visibility: visible;
}
/* The slide-in drawer itself */
.bk_mobile_menu {
display: flex !important;
flex-direction: column;
gap: 4px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(82vw, 320px);
padding: 72px 18px 24px;
background: #1f1a17;
border-left: 1px solid #3C342F;
z-index: 999;
transform: translateX(100%);
transition: transform 0.28s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.bk_mobile_menu.open2 {
transform: translateX(0);
}
/* Drawer items */
.btn_menu_mobile {
display: flex !important;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 8px;
color: #CCC3BF;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: transparent;
border: 0;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.btn_menu_mobile:hover,
.btn_menu_mobile:focus-visible {
background: #2a2320;
color: #FFCE6D;
}
.btn_menu_mobile a {
display: flex;
align-items: center;
gap: 10px;
color: inherit;
width: 100%;
}
/* Drawer close button (top-right of the sheet) */
.mob_menu_close {
position: absolute;
top: 12px;
right: 14px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: #CCC3BF;
font-size: 26px;
line-height: 1;
cursor: pointer;
border-radius: 6px;
}
.mob_menu_close:hover { background: #2a2320; color: #FFCE6D; }
/* Drawer toggle row (e.g. Servers) — full width with chevron */
.mob_menu_toggle {
width: 100%;
justify-content: space-between !important;
}
.mob_chev {
width: 12px;
height: 12px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform 0.2s ease;
}
.mob_menu_toggle.is_open .mob_chev { transform: rotate(180deg); }
/* Collapsible sub-area inside the drawer */
.mob_menu_sub {
display: none;
flex-direction: column;
gap: 10px;
padding: 6px 4px 10px 8px;
margin: 4px 0 8px 8px;
border-left: 1px solid #3C342F;
}
.mob_menu_sub.is_open { display: flex; }
/* Per-server block inside the Servers sub-list */
.mob_srv_block {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 6px 10px;
}
.mob_srv_name {
font-size: 13px;
font-weight: 700;
color: #FFF;
letter-spacing: 0.02em;
margin-bottom: 4px;
}
.mob_srv_chr {
font-size: 11px;
color: #9A877E;
font-weight: 500;
margin-left: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mob_srv_links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 12px;
}
.mob_srv_links a {
display: block;
padding: 6px 8px;
border-radius: 6px;
color: #CCC3BF;
font-size: 12px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.mob_srv_links a:hover { color: #FFCE6D; background: #2a2320; }
}
@media (max-width: 1400px) {
.l2r_section, .l2r_hero_inner { max-width: 90dvw !important; }
}
/* =====================================================
MOBILE USER ICON + ACCOUNT DROPDOWN AS A SHEET
When user taps .icon_user_mob the JS toggles
.account_wrap (or .account_wrap_logged) display.
We style it as a full-width sheet on phones AND
reveal the language picker that lives inside it.
===================================================== */
@media (max-width: 900px) {
/* Reveal the user icon on phones */
.icon_user_mob {
display: inline-flex !important;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 6px;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.icon_user_mob:hover { background-color: #3C342F; }
/* Account dropdown becomes a wide top-anchored sheet */
.account_wrap,
.account_wrap_logged {
position: fixed !important;
top: 60px !important;
right: 8px !important;
left: auto !important;
width: min(92vw, 320px);
max-height: calc(100vh - 80px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
z-index: 1000;
}
.pop_up_arrow_account { right: 22px; }
/* Show the in-dropdown language section on mobile only */
.account_dd_lang_wrap { display: block; }
.mob_only_sep { display: block; }
}
/* The in-account-dropdown language section is hidden on desktop
(the standalone .top_menu_content_lang already covers desktop). */
.account_dd_lang_wrap { display: none; }
.mob_only_sep { display: none; }
.account_dd_lang_label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8F7F76;
padding: 6px 12px 8px;
}
.account_dd_lang_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 0 6px 6px;
}
.account_dd_lang_btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-radius: 6px;
color: #CCC3BF;
font-size: 12px;
font-weight: 600;
transition: background 0.2s ease, color 0.2s ease;
}
.account_dd_lang_btn:hover { background: #3C342F; color: #FFCE6D; }
.account_dd_lang_btn.is_active { color: #FAC459; background: rgba(250,196,89,.08); }
/* =====================================================
GLOBAL OVERFLOW SAFETY ON SMALL VIEWPORTS
Stops decorative absolutely-positioned art (hero
characters, .feat_concept_img, etc.) from creating
horizontal page scrollbars on phones.
===================================================== */
@media (max-width: 1024px) {
html, body { overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }
}
/* =====================================================
SERVER FEATURES PAGE (/servers//features)
Fix oversize images & per-section grids on tablet/mobile
===================================================== */
@media (max-width: 1024px) {
.feat_wrap { padding: 32px 16px 40px; }
/* Concept card — character art was 66% wide and right:-15%, which
pushed past the card. Tame it on tablet, drop it on mobile. */
.feat_concept_card {
overflow: hidden !important;
clip-path: none !important;
}
.feat_concept_body { max-width: 60% !important; }
.feat_concept_img {
width: 50% !important;
right: 0 !important;
top: 0 !important;
height: 100% !important;
background-size: contain !important;
background-position: right bottom !important;
}
/* Image strips — make sure no img can ever exceed its column */
.feat_card_imgs,
.feat_npc_grid,
.feat_quickrates_grid,
.feat_gallery {
width: 100%;
max-width: 100%;
}
.feat_card_img,
.feat_npc_card {
max-width: 100%;
min-width: 0;
}
.feat_card_img img,
.feat_npc_card img,
.feat_quickrate img,
.feat_gallery_item img,
.feat_section_hero img {
max-width: 100%;
height: auto;
}
/* Tables inside the features page — horizontal scroll instead of bursting layout */
.feat_table,
.feat_quest_table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
}
}
@media (max-width: 768px) {
/* Concept card stacks fully on phones */
.feat_concept_card { flex-direction: column; }
.feat_concept_body { max-width: 100% !important; }
.feat_concept_img {
position: relative !important;
width: 100% !important;
height: 200px !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
background-position: center bottom !important;
}
/* Force every NPC grid to 1 col — the 3-col variant uses an inline
style on the element, so we need !important to win. */
.feat_npc_grid,
.feat_npc_grid[style] {
grid-template-columns: 1fr !important;
}
.feat_npc_card { min-height: 0; padding: 10px; }
.feat_npc_card img { max-height: 240px; }
/* Card image strip — keep cards from stretching too wide */
.feat_card_img { flex-basis: 100%; max-width: 100%; }
.feat_card_imgs { padding: 10px; }
/* Mobile category bar already handled in features.blade.php */
.feat_card { padding: 16px; }
.feat_section_title { font-size: 18px; }
}
/* =========================================================
============== INNER PAGES (account / news / shop /
support / rankings / wiki / static / features) ==========
========================================================= */
/* --- TABLET (≤1024px) --- */
@media (max-width: 1024px) {
/* Generic content wrappers used across pages */
.news_wrap,
.wiki_page_wrap,
.static_page_wrap,
.features_wrap,
.server_landing_wrap,
.account_page_wrap,
.signin_wrap,
.media_section_wrap,
.service_detail_wrap,
.topup_select_wrap,
.wshow_wrap,
.nshow_wrap {
box-sizing: border-box;
}
/* Common 3+ column grids -> 2 columns */
.news_grid,
.wiki_grid,
.static_card_grid,
.streamers_grid,
.media_cards_grid,
.feat_npc_grid,
.feat_rates_grid,
.l2r_features_grid,
.l2r_philo_grid,
.features_grid,
.server_info_grid,
.rs_grid,
.wshow_related_grid,
.settings_form_grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px;
}
/* Tables: scroll horizontally instead of breaking */
.ranking_table_wrap,
.feature_table,
.char_table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ranking_table,
.feature_table,
.char_table {
min-width: 640px;
}
/* Filters wrap on tablet */
.ranking_filters {
flex-wrap: wrap;
gap: 8px;
}
}
/* --- MOBILE (≤768px) --- */
@media (max-width: 768px) {
/* Single column for all listing grids */
.news_grid,
.wiki_grid,
.static_card_grid,
.streamers_grid,
.media_cards_grid,
.feat_npc_grid,
.feat_rates_grid,
.l2r_features_grid,
.l2r_philo_grid,
.features_grid,
.server_info_grid,
.rs_grid,
.wshow_related_grid,
.settings_form_grid {
grid-template-columns: 1fr !important;
gap: 14px;
}
/* News cards */
.news_card { width: 100%; }
.news_card_thumb,
.news_card_thumb_placeholder { height: auto; aspect-ratio: 16 / 9; }
.news_card_title { font-size: 17px; }
.news_heading { font-size: 22px; }
/* Wiki / Static page padding */
.wiki_page_wrap,
.static_page_wrap,
.nshow_wrap,
.wshow_wrap {
padding-top: 24px;
padding-bottom: 32px;
}
.wiki_search_wrap input,
.wiki_search_wrap {
width: 100%;
max-width: 100%;
}
/* Server landing / hero */
.server_hero { padding: 28px 16px; }
.server_hero_title { font-size: 24px; }
.server_hero_subtitle { font-size: 14px; }
/* Rankings */
.ranking_filters {
width: 100%;
}
.ranking_filters > * {
flex: 1 1 calc(50% - 8px);
min-width: 0;
}
.ranking_name_col {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Shop / topup */
.topup_select_wrap {
flex-direction: column;
align-items: stretch;
}
/* Feat / features inner */
.feat_wrap { padding: 16px; }
/* Generic stacked rows */
.service_detail_grid {
grid-template-columns: 1fr !important;
}
}
/* --- TINY PHONES (≤480px) --- */
@media (max-width: 480px) {
.news_heading,
.features_title,
.server_hero_title { font-size: 22px; }
.l2r_hero_logos .lh_chronicle {
height:32px!important;
}
.l2r_hero_logos .lh_brand_group {
margin-left: 2em!important;
}
.l2r_hero_logos .lh_brand {
font-size:18px!important;
}
.l2r_hero_logos .lh_brand img {
height:24px!important;
width:auto!important;
}
.l2r_hero_logos .lh_sep {
height: 24px!important;
}
.ranking_filters > * { flex-basis: 100%; }
/* Generic input/button width on tiny screens */
.l2-input, .l2-select, .l2-textarea,
input[type="text"]:not(.no-mobile-full),
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
}
/* =========================================================
===== Mobile overflow / fab / spacing patches ===========
========================================================= */
@media (max-width: 900px) {
/* Belt-and-suspenders: prevent any rogue absolutely-positioned
element from triggering horizontal page scroll on mobile.
body { overflow-x: hidden; max-width: 100vw; }
/* Reduce excessive bottom padding on mobile (overrides inline style on ) */
body > main[style] {
padding-bottom: 40px !important;
}
/* Settings/account: ensure grid children allow shrinking and don't overflow */
.settings_layout > * { min-width: 0; }
.settings_layout .game_accounts_wrap,
.settings_layout .account_section_panel,
.settings_layout .settings_card { min-width: 0; max-width: 100%; }
.settings_layout code { display: block; max-width: 100%; word-break: break-all; overflow-wrap: anywhere; box-sizing: border-box; }
/* Eclipse / server features page mobile fixes */
.feat_wrap { max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.feat_layout, .feat_main { min-width: 0; max-width: 100%; }
.feat_header_title { font-size: 22px !important; word-break: break-word; overflow-wrap: anywhere; }
.feat_concept_card, .feat_rates_card, .feat_card,
.feat_table, .feat_quest_table { max-width: 100%; box-sizing: border-box; }
.feat_concept_body { padding: 18px !important; }
}
/* ===== Mob server block badge (drawer) ===== */
.mob_srv_block { position: relative; }
.mob_srv_head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.mob_srv_badge {
width: 28px;
height: 28px;
flex-shrink: 0;
object-fit: contain;
border-radius: 6px;
}
/* ===== Game guide sidebar FAB (mobile) ===== */
.wshow_sidebar_fab {
display: none;
position: fixed;
right: 16px;
bottom: 24px;
z-index: 1200;
width: 52px;
height: 52px;
border-radius: 50%;
background: #FAC459;
color: #1C1816;
border: none;
cursor: pointer;
align-items: center;
justify-content: center;
}
.wshow_sidebar_fab svg { width: 22px; height: 22px; stroke: #1C1816; stroke-width: 2; fill: none; }
.wshow_sidebar_fab:hover { background: #FFCE6D; }
@media (max-width: 900px) {
.wshow_sidebar_fab { display: flex; }
.wshow_header {
flex-direction: column;
}
/* Sidebar becomes a slide-in panel on mobile */
.wshow_sidebar {
display: block !important;
position: fixed !important;
top: 0;
right: 0;
width: min(280px, 86vw);
height: 100dvh;
background: #1C1816;
border-left: 1px solid #3C342F;
padding: 24px 16px;
overflow-y: auto;
z-index: 1300;
transform: translateX(100%);
transition: transform .25s ease;
}
.wshow_sidebar.is_open { transform: translateX(0); }
.wshow_sidebar_backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
z-index: 1250;
}
.wshow_sidebar_backdrop.is_open { display: block; }
}
/* =========================================================
============== ADMIN PANEL RESPONSIVE ===================
The admin layout already collapses .l2-shell to 1 column
under 1024px and slides the sidebar off-screen with the
.is-open class. We refine the rest of the admin UI here.
========================================================= */
/* --- TABLET (≤1024px) --- */
@media (max-width: 1024px) {
/* Sidebar overlay backdrop when open */
.l2-admin .l2-sidebar.is-open::after {
content: "";
position: fixed;
inset: 0 0 0 var(--l2-sidebar-w, 260px);
background: rgba(0, 0, 0, 0.55);
z-index: -1;
}
/* Topbar — show hamburger toggle, allow wrapping */
.l2-topbar {
padding: 10px 14px;
gap: 8px;
flex-wrap: wrap;
}
.l2-topbar h1 { font-size: 18px; }
.l2-topbar .l2-search {
order: 10;
width: 100%;
margin-top: 6px;
}
/* Admin sidebar toggle (button must exist in markup with .l2-menu-toggle).
If absent, the slide-in is triggered by JS via .is-open. */
.l2-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--l2-border, #2a2018);
border-radius: 8px;
background: transparent;
color: var(--l2-text-2, #cbb89a);
cursor: pointer;
}
/* Page header stacks */
.l2-page-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.l2-page-title { font-size: 22px; }
/* Content padding */
.l2-content { padding: 14px; }
}
/* --- MOBILE (≤768px) --- */
@media (max-width: 768px) {
/* Tables — horizontal scroll instead of breaking layout */
.l2-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.l2-table {
min-width: 640px;
font-size: 12.5px;
}
.l2-table thead th,
.l2-table tbody td {
padding-left: 10px;
padding-right: 10px;
white-space: nowrap;
}
.l2-table .l2-actions { gap: 4px; }
.l2-btn-sm { padding: 4px 8px; font-size: 11px; }
/* Stat tiles */
.l2-stat-value { font-size: 20px; }
.l2-stat { padding: 14px; }
/* Cards */
.l2-card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.l2-card-body { padding: 14px; }
/* Forms — already 1 col below 700px via admin.css.
Make buttons full width for finger-friendliness. */
.l2-form-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.l2-form-actions .l2-btn { width: 100%; justify-content: center; }
/* Topbar trims */
.l2-userchip .l2-userchip-text { display: none; }
.l2-iconbtn { width: 34px; height: 34px; }
}
/* --- TINY PHONES (≤420px) --- */
@media (max-width: 420px) {
.l2-topbar h1 { font-size: 16px; }
.l2-page-title { font-size: 19px; }
.l2-stat-value { font-size: 18px; }
.l2-content { padding: 10px; }
}