/* ===================================================================== NOVERIA · 2026 — CMS INTEGRATION BRIDGE --------------------------------------------------------------------- Loaded LAST, after: font-awesome(FA5) + bootstrap-layered + (subpage: make.css + make-cms.css) + noveria style.css + responsive.css + noveria-2026.css. Responsibilities (things the raw theme export could not know about the live CMS): 1. Fixed top navigation (logo + links + language switch + burger), driven by real CMS routes — pure vanilla JS, no jQuery/Bootstrap JS. 2. Homepage hero band (single static slide — the export's Swiper was a 1:1 snapshot, so we render it statically and robustly). 3. The 3-column layout (left panels / center / right panels) as a CSS grid so it never depends on a specific Bootstrap version, and stacks cleanly on mobile. 4. Sub-page shell: same layout as the homepage, page content dropped in the CENTRE column inside a themed panel with a clean title bar (never the tiled sidebar texture). 5. Small harmonizing touches for sub-page (Bootstrap/CMS) content. ===================================================================== */ :root{ --e2-max:1200px; --e2-nav-h:66px; } /* keep the sticky nav from hiding page anchors, and stop sideways scroll */ html,body{max-width:100%;overflow-x:clip;} /* --------------------------------------------------------------------- FIX: the exported theme only sets box-sizing:border-box on the homepage (`body.is-home *` in style.css). On every sub-page (`body.is-subpage`) elements fall back to the browser default content-box, so any element styled with width:100% + padding (inputs, buttons, etc.) renders wider than its container and visually overflows/"breaks" out of its panel. This restores border-box site-wide on sub-pages too, WITHOUT touching margin/ padding (unlike the homepage rule), so existing spacing is safe. --------------------------------------------------------------------- */ body.is-subpage, body.is-subpage *, body.is-subpage *::before, body.is-subpage *::after{box-sizing:border-box;} /* THEMED BACKGROUND — painted on so the browser canvas is ALWAYS covered edge-to-edge (a body-only background can leave white gutters/rows). A solid dark base is the last layer, so nothing ever shows white even if the image fails to load or a fixed background is clipped in a screenshot. */ html{ background:#090604 url('../images/yj_bg.jpg') no-repeat center top fixed; background-size:cover; } body.e2-body{ margin:0;min-height:100vh;display:flex;flex-direction:column; background:linear-gradient(to bottom,rgba(58,39,23,.28) 0%,rgba(20,14,8,.60) 40%,rgba(12,8,5,.86) 72%,rgba(9,6,4,.95) 100%); } body.e2-body > footer, body.e2-body .e2-shell{width:100%;} /* the page body starts on the SAME flat dark colour the header fades into (#0d0906), then gradually reveals the atmospheric background further down — this removes the visible seam between the header image and the body. */ .e2-shell{ flex:1 0 auto; background:linear-gradient(to bottom, #0d0906 0, rgba(13,9,6,.7) 160px, rgba(13,9,6,0) 560px) no-repeat; } /* CENTERING — these must beat the homepage reset `body.is-home *{margin:0}` (which otherwise zeroes the auto side-margins and pins content to the left). Two classes out-rank the reset's one-class-plus-universal selector. */ .e2-body .e2-wrap, .e2-body .e2-hero-inner{margin-left:auto !important;margin-right:auto !important;} /* ===================================================================== 1) TOP NAVIGATION ===================================================================== */ #mainNav{padding-top:8px;padding-bottom:8px;} #mainNav .container{max-width:var(--e2-max);} #mainNav .navbar-brand{display:inline-flex;align-items:center;gap:10px;padding:4px 0;} #mainNav .navbar-brand img{height:68px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));} #mainNav .navbar-brand .e2-brand-name{ font-family:'Friz-Quadrata-TT-Regular','Sora',serif; font-size:18px;letter-spacing:.12em;text-transform:uppercase; color:#f1edea;text-shadow:0 2px 10px rgba(193,137,92,.45); } .e2-navwrap{display:flex;align-items:center;gap:22px;} .e2-menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;} .e2-menu li{margin:0;} .e2-link{ display:inline-flex;align-items:center;gap:8px; font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px; text-transform:uppercase;letter-spacing:.03em; color:#dac2ae;padding:9px 14px;border-radius:8px; transition:color .2s,background .2s,box-shadow .2s; } .e2-link i{font-size:12px;color:#f2c96b;transition:color .2s;} .e2-link:hover{color:#fff;background:rgba(193,137,92,.12);text-shadow:0 0 12px rgba(193,137,92,.55);} .e2-link:hover i{color:#ffe6a6;} .e2-link.is-active{color:#fff;background:rgba(242,201,107,.10);box-shadow:inset 0 -2px 0 #c1895c;} .e2-link.is-active i{color:#ffe6a6;} /* language switch (vanilla dropdown) */ .e2-lang{position:relative;user-select:none;} .e2-lang-btn{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; background:rgba(38,28,19,.6);border:1px solid rgba(193,137,92,.35); border-radius:8px;padding:6px 10px;color:#e1d5cb;font-size:12px;font-weight:600; transition:filter .2s,border-color .2s; } .e2-lang-btn:hover{filter:brightness(1.15);border-color:rgba(242,201,107,.5);} .e2-lang-btn img{width:22px;height:auto;border-radius:2px;display:block;} .e2-lang-btn i{font-size:11px;color:#b9a89a;} .e2-lang-menu{ position:absolute;right:0;top:calc(100% + 8px);min-width:120px;z-index:120; background:rgba(21,16,11,.98);border:1px solid rgba(193,137,92,.4); border-radius:10px;padding:6px;display:none; box-shadow:0 14px 34px rgba(0,0,0,.55); } .e2-lang.is-open .e2-lang-menu{display:block;} .e2-lang-menu a{ display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px; color:#e1d5cb;font-size:12.5px;font-weight:600;text-transform:capitalize; } .e2-lang-menu a:hover{background:rgba(193,137,92,.16);color:#fff;} .e2-lang-menu a img{width:22px;height:auto;border-radius:2px;} /* burger (mobile only) */ .e2-burger{ display:none;flex-direction:column;gap:5px;cursor:pointer; background:transparent;border:0;padding:8px;margin-left:auto; } .e2-burger span{display:block;width:26px;height:2px;background:#f1edea;border-radius:2px;transition:transform .25s,opacity .2s;} .e2-nav-open .e2-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);} .e2-nav-open .e2-burger span:nth-child(2){opacity:0;} .e2-nav-open .e2-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ===================================================================== 2) HERO (homepage only) ===================================================================== */ .e2-hero{ position:relative;width:100%; min-height:620px;overflow:hidden; flex-shrink:0; /* never let the flex-column body shrink the header to 0 */ display:flex;align-items:center; /* vertically centre the content (clears the fixed nav at any size) */ padding-top:var(--e2-nav-h); /* single header artwork (toned to the brown/gold theme); the solid colour is a fallback so the header is dark brown (not black) if the image is missing */ background:#171009 url('../images/hero.jpg') no-repeat center center; background-size:cover; } /* readability overlay: darken the left (where the title sits) + a touch at the top */ .e2-hero::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg, rgba(9,6,4,.86) 0%, rgba(9,6,4,.5) 30%, rgba(9,6,4,.12) 56%, rgba(9,6,4,0) 74%), linear-gradient(180deg, rgba(9,6,4,.5) 0%, rgba(9,6,4,0) 24%); } /* bottom fade: the header dissolves into a FLAT dark colour (#0d0906) that the body picks up at the exact same tone right below — so the join is invisible */ .e2-hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:380px;z-index:1;pointer-events:none; background:linear-gradient(180deg, transparent 0%, rgba(13,9,6,.45) 45%, rgba(13,9,6,.9) 82%, #0d0906 100%); } .e2-hero-inner{ position:relative;z-index:2;flex:1 1 auto;width:100%; max-width:var(--e2-max);margin:0 auto; display:flex;align-items:center;justify-content:flex-start;gap:20px; } /* side gutters + horizontal centering that beat the homepage reset */ .e2-body .e2-hero-inner{padding-left:20px;padding-right:20px;} .e2-hero-left{ position:relative;z-index:3;display:flex;flex-direction:column; align-items:flex-start;gap:22px;max-width:560px; } .e2-hero-title{ font-family:'Friz-Quadrata-TT-Regular','Sora',serif; font-size:54px;line-height:1.04;color:#fff;margin:0; text-shadow:0 4px 26px rgba(0,0,0,.75),0 2px 6px #000; } .e2-hero-title span{color:#f2c96b;} .e2-download{display:flex;flex-direction:column;align-items:flex-start;gap:10px;} .e2-hero .btn-main-download{ border-color:rgba(242,201,107,.55); background:linear-gradient(180deg,#c1895c 0%,#67452a 100%); color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22); } .e2-hero .btn-main-download:hover{ color:#fff;border-color:#ffe6a6; box-shadow:0 16px 38px rgba(193,137,92,.55),0 0 18px rgba(242,201,107,.45); } .e2-hero .title-desc{opacity:.92;text-shadow:0 2px 6px #000;} /* ===================================================================== 3) MAIN LAYOUT (3 columns) ===================================================================== */ .detailed-section{ background:transparent;position:relative;z-index:20; padding-bottom:60px;margin-top:0; } body.is-home .detailed-section{margin-top:-150px;} /* overlap the hero */ body.is-subpage .detailed-section{margin-top:calc(var(--e2-nav-h) + 40px);} .e2-wrap{max-width:var(--e2-max);margin:0 auto;padding:0 16px;width:100%;} .e2-grid{ display:grid;gap:20px;align-items:start; grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,300px); } .e2-col{min-width:0;display:flex;flex-direction:column;gap:22px;} .e2-col > .mb-3{margin-bottom:0 !important;} /* spacing handled by grid gap */ /* full-width sub-pages (admin / dense back-office) */ .e2-grid.e2-wide{grid-template-columns:minmax(0,1fr);} /* ===================================================================== 4) SUB-PAGE CONTENT PANEL (centre column) the .content-box / .content-header / .content-body classes are already skinned by noveria-2026.css — here we only guarantee full width and a clean, non-tiled title bar. ===================================================================== */ .e2-col-center .content-box, .e2-grid.e2-wide .content-box{width:100%;} .content-box .content-header{ background:linear-gradient(180deg,rgba(50,36,25,.94),rgba(26,19,14,.94)) !important; background-image:none !important; /* never the tiled sidebar texture */ background-repeat:no-repeat !important; } .content-box .content-header .name h3{font-size:16px !important;} /* the CMS page markup lives inside .content-body — give it comfortable room */ .content-box .content-body{min-height:220px;} .content-box .content-body > .news-body{background:transparent;border:0;padding:0;} /* ===================================================================== 5) SUB-PAGE CONTENT HARMONIZING (Bootstrap + CMS classes -> red/gold) Light-touch only; make.css / make-cms.css still provide component shape. ===================================================================== */ .content-body a{color:#ffcf8f;} .content-body a:hover{color:#ffe6a6;} .content-body .btn-success, .content-body input[type="submit"].btn-success{ background:linear-gradient(180deg,#c1895c,#67452a) !important; border:1px solid rgba(242,201,107,.5) !important;color:#fff !important; } .content-body .btn-success:hover{filter:brightness(1.07);} .content-body .alert{border-radius:10px;} .content-body .table.table-dark{--bs-table-bg:transparent;} .content-body .form-control{ background:rgba(11,8,6,.7);border:1px solid rgba(193,137,92,.28); color:#fff;border-radius:10px; } .content-body .form-control:focus{ border-color:rgba(242,201,107,.6);box-shadow:0 0 0 3px rgba(193,137,92,.14); background:rgba(21,16,12,.9);color:#fff; } /* keep the recaptcha inside narrow columns */ .content-body .g-recaptcha{max-width:100%;overflow:hidden;} /* ===================================================================== 5b) ACCOUNT PANEL (administration.php) — turn the raw Bootstrap jumbotron/row/col markup into a clean, theme-matching action list. ===================================================================== */ .content-body .jumbotron{padding:0 !important;} .content-body .jumbotron > div > p{ font-family:var(--e-ui);font-size:13.5px;color:var(--e-muted); margin:0 0 10px; } .content-body .jumbotron > div > p:last-of-type{margin-bottom:16px;} .content-body .jumbotron hr{ border:0;border-top:1px solid rgba(193,137,92,.22);margin:0 0 18px; } .content-body .jumbotron .row{ display:flex;align-items:center;gap:14px; margin:0 0 10px !important;padding:10px 14px; background:rgba(11,8,6,.5);border:1px solid rgba(193,137,92,.16); border-radius:11px; } .content-body .jumbotron .row > [class*="col-"]{ padding:0 !important;max-width:none;flex:0 0 auto; } .content-body .jumbotron .row > [class*="col-"]:first-child{flex:0 0 200px;} .content-body .jumbotron .row > [class*="col-"]:last-child{ flex:1 1 auto;color:var(--e-muted);font-size:13px;display:flex !important; } .content-body .jumbotron .row form{width:100%;} .content-body .jumbotron .row .btn, .content-body .jumbotron .row input[type="submit"].btn{ width:100% !important;height:40px !important;margin:0 !important; box-sizing:border-box !important; display:flex !important;align-items:center;justify-content:center; font-family:var(--e-ui) !important;font-weight:700 !important;font-size:12px !important; letter-spacing:.05em;text-transform:uppercase;white-space:nowrap; border-radius:10px !important;transition:transform .2s,box-shadow .2s,filter .2s; } .content-body .jumbotron .row a.btn.btn-primary, .content-body .jumbotron .row input.btn-primary{ color:#fff !important; background:linear-gradient(180deg,var(--e-red-bright),var(--e-red-deep)) !important; border:1px solid rgba(242,201,107,.5) !important; box-shadow:0 6px 16px rgba(193,137,92,.3),inset 0 1px 0 rgba(255,255,255,.2) !important; } .content-body .jumbotron .row a.btn.btn-warning{ color:var(--e-ink) !important; background:linear-gradient(180deg,var(--e-gold-bright),var(--e-gold)) !important; border:1px solid rgba(242,201,107,.6) !important; box-shadow:0 6px 16px rgba(242,201,107,.25),inset 0 1px 0 rgba(255,255,255,.3) !important; } .content-body .jumbotron .row .btn:hover{ filter:brightness(1.07);transform:translateY(-1px); } .content-body .jumbotron br{display:none;} /* spacing now handled by .row margin */ /* ===================================================================== 6) RESPONSIVE ===================================================================== */ @media (max-width:991px){ #mainNav{padding-top:8px;} .e2-burger{display:flex;} .e2-navwrap{ position:absolute;left:12px;right:12px;top:calc(100% + 6px); flex-direction:column;align-items:stretch;gap:6px; background:rgba(17,13,10,.98);border:1px solid rgba(193,137,92,.4); border-radius:12px;padding:12px; max-height:0;overflow:hidden;opacity:0;pointer-events:none; transition:max-height .3s ease,opacity .2s ease; box-shadow:0 20px 40px rgba(0,0,0,.6); } .e2-nav-open .e2-navwrap{max-height:80vh;opacity:1;pointer-events:auto;overflow:auto;} .e2-menu{flex-direction:column;align-items:stretch;gap:2px;width:100%;} .e2-link{width:100%;font-size:13px;padding:12px 14px;} .e2-lang{margin-top:6px;} .e2-lang-menu{position:static;display:none;margin-top:6px;box-shadow:none;} .e2-lang.is-open .e2-lang-menu{display:block;} .e2-hero{min-height:420px;padding-top:calc(var(--e2-nav-h) + 10px);} .content-body .jumbotron .row{flex-direction:column;align-items:stretch;gap:8px;} .content-body .jumbotron .row > [class*="col-"]:first-child{flex:0 0 auto;} .e2-hero-inner{flex-direction:column;text-align:left;justify-content:center;padding-bottom:20px;} .e2-hero-left{align-items:flex-start;max-width:100%;} .e2-download{align-items:flex-start;} .e2-hero-title{font-size:40px;} .e2-hero-art{display:none;} .e2-grid{grid-template-columns:minmax(0,1fr);} /* stacking order: centre content first, then the two sidebars */ .e2-col-center{order:1;} .e2-col-left{order:2;} .e2-col-right{order:3;} body.is-home .detailed-section{margin-top:20px;} body.is-subpage .detailed-section{margin-top:calc(var(--e2-nav-h) + 20px);} } @media (max-width:1120px) and (min-width:992px){ .e2-grid{grid-template-columns:minmax(0,270px) minmax(0,1fr) minmax(0,270px);gap:16px;} } /* ===================================================================== 7) MISC FIXES ===================================================================== */ /* the theme reset zeroes list styles; restore bullets we actually removed */ .e2-menu,.top-footer ul{list-style:none;} /* item-shop modal (Bootstrap 5) sits above everything */ #itemShop{z-index:12000;} /* logged-in account links block inside the login panel */ .login-body .e2-account{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;} .login-body .e2-account a.btn-account-menu{margin-bottom:8px;} /* keep the reCAPTCHA widget inside the narrow login panel (it's 304px wide by default and would overflow the sidebar) — scale it to fit and collapse the leftover vertical space. transform-origin keeps it flush-left in the panel. */ .login-body .g-recaptcha{ transform:scale(.78); transform-origin:0 0; /* no width/overflow here: a fixed 304px box + overflow:hidden was clipping the widget's right edge (the reCAPTCHA logo). Let it render naturally and just scale it; the negative bottom margin removes the empty space the unscaled 78px-tall box leaves behind. */ margin:14px 0 -16px 0; } /* small links under the login form */ .e2-mini-link{font-family:'Inter',sans-serif;font-size:11.5px;color:#b9a89a;} .e2-mini-link:hover{color:#ffe6a6;} .e2-flag-txt{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:15px;background:#322419;border-radius:2px;font-size:9px;font-weight:700;color:#e1d5cb;} /* ===================================================================== HOMEPAGE NEWS ARTICLES (centre column, classic .content-box) ===================================================================== */ .e2-article{padding:6px 2px 18px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:18px;} .e2-article:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;} .e2-article-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;} .e2-article-title{ font-family:'Friz-Quadrata-TT-Regular','Sora',serif;font-size:19px;color:#fff;margin:0; letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.5); } .e2-article-date{ font-family:'Inter',sans-serif;font-size:11.5px;color:#b9a89a;white-space:nowrap; display:inline-flex;align-items:center;gap:6px; } .e2-article-date i{color:#f2c96b;font-size:11px;} .e2-article-body{font-family:'Inter',sans-serif;font-size:14px;line-height:1.65;color:#e4ddd7;} .e2-article-body img{max-width:100%;height:auto;border-radius:10px;margin:8px 0;} .e2-article-body a{color:#ffcf8f;} .e2-article-body a:hover{color:#ffe6a6;} .e2-readmore{ display:inline-block;margin-top:12px;font-family:'Inter',sans-serif;font-size:12px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:#f2c96b; padding:7px 14px;border:1px solid rgba(242,201,107,.35);border-radius:999px; background:rgba(242,201,107,.08);transition:all .2s; } .e2-readmore:hover{color:#0b0806;background:linear-gradient(180deg,#ffe6a6,#f2c96b);border-color:#f2c96b;} /* ===================================================================== EVENTS panel (left column, editable config + JS countdown) ===================================================================== */ .e2-events .faq-body-bg{display:flex;flex-direction:column;gap:2px;} .e2-event{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);} .e2-event:last-child{border-bottom:none;} .e2-event-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;} .e2-event-name{font-family:'Inter',sans-serif;font-weight:700;font-size:13px;color:#fff;} .e2-event-tag{ font-family:'Inter',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:#f2c96b;padding:2px 8px;border-radius:999px;border:1px solid rgba(242,201,107,.35);background:rgba(242,201,107,.08); } .e2-event-desc{font-family:'Inter',sans-serif;font-size:11.5px;line-height:1.5;color:#b9a89a;margin:0 0 6px;} .e2-event-count{font-family:'Inter',sans-serif;font-size:11.5px;color:#b9a89a;} .e2-event-count b{color:#ebc9ae;font-weight:700;}