/* ============================================================================= * New Comet Trading Agency — Modern Theme CSS * ============================================================================= */ /* ── Custom Properties ──────────────────────────────────────────────────────── */ :root { --nc-blue: #0B2D6E; --nc-blue-mid: #1a3f8f; --nc-blue-light: #EEF3FB; --nc-gold: #F5B000; --nc-gold-dark: #d99d00; --nc-text: #1A1A2E; --nc-muted: #555; --nc-white: #ffffff; --nc-card-bg: #ffffff; --nc-border: #e2e8f0; --nc-radius: 12px; --nc-radius-sm: 6px; --nc-shadow: 0 2px 16px rgba(11,45,110,0.08); --nc-shadow-hover:0 8px 32px rgba(11,45,110,0.16); --nc-max-width: 1160px; --nc-font: 'Inter', 'Pyidaungsu', sans-serif; --nc-transition: 0.25s ease; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); @font-face { font-family: Pyidaungsu; src: url('font/pyidaungsu.ttf'); } @font-face { font-family: Myanmar3; src: url('font/Myanmar3.ttf'); } /* ── Reset / Base ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--nc-font) !important; font-size: 16px; line-height: 1.7; color: var(--nc-text); background: #fff; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--nc-blue); text-decoration: none; transition: color var(--nc-transition); } a:hover { color: var(--nc-gold); } p { margin-bottom: 1rem; color: var(--nc-muted); } h1,h2,h3,h4,h5,h6 { font-family: var(--nc-font) !important; font-weight: 700; color: var(--nc-text); line-height: 1.25; } ul { list-style: none; } .nc-container { max-width: var(--nc-max-width); margin: 0 auto; padding: 0 24px; } /* ── Hide extras ─────────────────────────────────────────────────────────────── */ .site-branding__name-link { display: none !important; } .view-empty, .feed-icons, .l-attribution { display: none !important; } /* ───────────────────────────────────────────────────────────────────────────── * HEADER & NAVBAR * ───────────────────────────────────────────────────────────────────────────── */ #masthead, header[role="banner"], .pr-header, .at-panel-full.pr-header { background: var(--nc-blue) !important; padding: 0 !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important; } #block-mainmenu .we-mega-menu-ul { display: flex !important; align-items: center !important; gap: 4px !important; padding: 0 !important; margin: 0 !important; flex-wrap: nowrap !important; } #block-mainmenu .we-mega-menu-ul > li { list-style: none !important; margin: 0 !important; position: relative !important; } /* White text ONLY for top-level direct links (NOT submenu links) */ #block-mainmenu .we-mega-menu-ul > li > a.we-mega-menu-li, #block-mainmenu .we-mega-menu-ul > li > a.we-megamenu-nolink { display: inline-flex !important; align-items: center !important; padding: 8px 14px !important; font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,0.92) !important; background: transparent !important; border-radius: 6px !important; transition: background 0.2s !important; font-family: var(--nc-font) !important; white-space: nowrap !important; text-decoration: none !important; } #block-mainmenu .we-mega-menu-ul > li > a.we-mega-menu-li:hover, #block-mainmenu .we-mega-menu-ul > li > a.we-megamenu-nolink:hover, #block-mainmenu .we-mega-menu-ul > li:hover > a { background: rgba(255,255,255,0.12) !important; color: #fff !important; } /* SUBMENU nested ul — must NOT be hidden — WE MegaMenu controls display */ #block-mainmenu .we-mega-menu-submenu ul, #block-mainmenu .we-mega-menu-submenu .subul { display: block !important; padding: 0 !important; margin: 0 !important; list-style: none !important; border: none !important; background: transparent !important; } /* Submenu link colors — dark text on white bg */ #block-mainmenu .we-mega-menu-submenu a, #block-mainmenu .we-mega-menu-submenu li a, #block-mainmenu .we-mega-menu-submenu .subul li a { display: block !important; color: #1a2e5a !important; padding: 10px 20px !important; font-size: 14px !important; background: transparent !important; border-radius: 0 !important; white-space: nowrap !important; font-family: var(--nc-font) !important; } #block-mainmenu .we-mega-menu-submenu a:hover, #block-mainmenu .we-mega-menu-submenu li a:hover { background: #f0f5ff !important; color: #003cc8 !important; } /* OLD ul ul rules removed — replaced by WE MegaMenu-specific rules above */ .block--language-block a, .block--language-switcher a { display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 1.5px solid rgba(255,255,255,0.55) !important; border-radius: 20px !important; padding: 5px 14px !important; font-size: 14px !important; font-weight: 500 !important; color: #fff !important; transition: all var(--nc-transition) !important; } .block--language-block a:hover, .block--language-switcher a:hover { background: rgba(255,255,255,0.15) !important; border-color: #fff !important; } /* ───────────────────────────────────────────────────────────────────────────── * HERO SECTION * ───────────────────────────────────────────────────────────────────────────── */ .nc-hero { position: relative; min-height: 520px; background: url('../../images/hero-bg.jpg') center center / cover no-repeat; display: flex; align-items: center; overflow: hidden; } .nc-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(11,45,110,0.85) 0%, rgba(11,45,110,0.58) 60%, rgba(0,0,0,0.25) 100%); z-index: 1; } .nc-hero__inner { position: relative; z-index: 2; max-width: var(--nc-max-width); margin: 0 auto; padding: 80px 24px 60px; width: 100%; } .nc-hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.95); font-size: 13px; font-weight: 500; padding: 5px 14px; border-radius: 20px; margin-bottom: 24px; backdrop-filter: blur(6px); } .nc-hero__title { font-size: clamp(32px, 5vw, 52px); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 20px; max-width: 640px; } .nc-hero__sub { font-size: 17px; color: rgba(255,255,255,0.88); margin-bottom: 36px; max-width: 520px; line-height: 1.7; } .nc-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; align-items: center; } .nc-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--nc-gold); color: #fff !important; font-size: 15px; font-weight: 600; padding: 13px 28px; border-radius: 30px; transition: all var(--nc-transition); box-shadow: 0 4px 16px rgba(245,176,0,0.35); } .nc-btn-primary:hover { background: var(--nc-gold-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,176,0,0.45); color: #fff !important; } .nc-btn-outline { display: inline-flex; align-items: center; gap: 8px; border: 2px solid rgba(255,255,255,0.7); color: #fff !important; font-size: 15px; font-weight: 600; padding: 12px 28px; border-radius: 30px; transition: all var(--nc-transition); } .nc-btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff !important; } .nc-hero__stats { display: flex; gap: 48px; flex-wrap: wrap; } .nc-hero__stats .block, .nc-hero__stats .block__content { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .nc-hero__stats .stat-number { display: block; font-size: 32px; font-weight: 800; color: var(--nc-gold); line-height: 1.1; margin-bottom: 4px; } .nc-hero__stats .stat-label { display: block; font-size: 13px; color: rgba(255,255,255,0.82); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* ───────────────────────────────────────────────────────────────────────────── * SECTION COMMONS * ───────────────────────────────────────────────────────────────────────────── */ .nc-section-about { padding: 72px 0; background: #fff; } .nc-section-news { padding: 72px 0; background: var(--nc-blue-light); } .nc-section-lc { padding: 72px 0; background: #fff; } .nc-section-contact { padding: 72px 0; background: var(--nc-blue-light); } .nc-section-title { font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--nc-blue); margin-bottom: 6px; position: relative; display: inline-block; } .nc-section-title::after { content: ''; display: block; width: 48px; height: 3px; background: var(--nc-gold); border-radius: 2px; margin-top: 10px; } .nc-section-sub { font-size: 16px; color: var(--nc-muted); margin-top: 16px; margin-bottom: 0; } .nc-section-header { margin-bottom: 40px; } /* ───────────────────────────────────────────────────────────────────────────── * ABOUT US 3x2 CARD GRID * ───────────────────────────────────────────────────────────────────────────── */ .nc-about-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .nc-card { background: #fff; border-radius: var(--nc-radius); padding: 28px 24px; border: 1px solid var(--nc-border); box-shadow: var(--nc-shadow); transition: all var(--nc-transition); display: flex; flex-direction: column; } .nc-card:hover { transform: translateY(-4px); box-shadow: var(--nc-shadow-hover); border-color: rgba(11,45,110,0.15); } .nc-card__icon { width: 48px; height: 48px; background: var(--nc-blue-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--nc-blue); font-size: 22px; } .nc-card__icon img { width: 28px; height: 28px; object-fit: contain; } .nc-card h3, .nc-card__title { font-size: 17px; font-weight: 700; color: var(--nc-blue); margin-bottom: 10px; } .nc-card p, .nc-card__desc { font-size: 14px; color: var(--nc-muted); line-height: 1.65; flex: 1; margin: 0; } .nc-card .readmore, .nc-readmore { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--nc-blue); margin-top: 16px; transition: gap var(--nc-transition), color var(--nc-transition); } .nc-card .readmore:hover, .nc-readmore:hover { gap: 10px; color: var(--nc-gold); } /* Hide old block images in about cards */ .nc-card .block__content img[width="275"] { display: none !important; } .nc-card .block__content img { display: none; } .nc-card .block__content p { font-size: 14px; color: var(--nc-muted); line-height: 1.65; } .nc-card .block__content .text-align-center { text-align: left !important; } .nc-card .block__content a { color: var(--nc-blue); font-weight: 600; font-size: 14px; } /* ───────────────────────────────────────────────────────────────────────────── * ANNOUNCEMENT + ACTIVITIES 2-COL * ───────────────────────────────────────────────────────────────────────────── */ .nc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .nc-news-card { background: #fff; border-radius: var(--nc-radius); padding: 32px; box-shadow: var(--nc-shadow); border: 1px solid var(--nc-border); } .nc-news-title { font-size: 22px; font-weight: 700; color: var(--nc-blue); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 3px solid var(--nc-gold); display: inline-block; } .view-announcement .views-row, .view-activity .views-row { padding: 14px 0; border-bottom: 1px solid var(--nc-border); } .view-announcement .views-row:last-child, .view-activity .views-row:last-child { border-bottom: none; } .view-announcement .views-field-title a, .view-activity .views-field-title a { font-size: 15px; font-weight: 600; color: var(--nc-text); line-height: 1.4; display: block; margin-bottom: 4px; } .view-announcement .views-field-title a:hover, .view-activity .views-field-title a:hover { color: var(--nc-blue); } .view-announcement .views-field-created, .view-activity .views-field-created { font-size: 12px; color: var(--nc-muted); font-weight: 500; } a.keep { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--nc-blue) !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; padding: 10px 22px !important; border-radius: 24px !important; margin-top: 20px !important; transition: all var(--nc-transition) !important; text-decoration: none !important; } a.keep:hover { background: var(--nc-blue-mid) !important; transform: translateY(-1px) !important; color: #fff !important; } a.keep img { display: none !important; } /* ───────────────────────────────────────────────────────────────────────────── * LANGUAGE CENTER * ───────────────────────────────────────────────────────────────────────────── */ .view-language-center .view-content { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .view-language-center .views-row { background: #fff; border-radius: var(--nc-radius); overflow: hidden; box-shadow: var(--nc-shadow); border: 1px solid var(--nc-border); transition: all var(--nc-transition); display: flex; flex-direction: column; } .view-language-center .views-row:hover { transform: translateY(-4px); box-shadow: var(--nc-shadow-hover); } .view-language-center .views-row img { width: 100%; height: 220px; object-fit: cover; display: block; max-width: none; } .view-language-center .views-field { padding: 0 20px; } .view-language-center .views-field:first-child { padding: 0; } .view-language-center .views-field-created { font-size: 12px; color: var(--nc-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding-top: 16px; } .view-language-center .views-field-title { padding-top: 8px; } .view-language-center .views-field-title a { font-size: 17px; font-weight: 700; color: var(--nc-blue); line-height: 1.35; } .view-language-center .views-field-title a:hover { color: var(--nc-gold-dark); } .view-language-center .views-field-body { font-size: 14px; color: var(--nc-muted); padding-top: 8px; } .view-language-center .views-field-nothing, .view-language-center .views-field-view-node { padding: 12px 20px 20px; } .view-language-center .views-field-nothing a, .view-language-center .views-field-view-node a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--nc-blue); } .view-language-center .views-field-nothing a:hover, .view-language-center .views-field-view-node a:hover { color: var(--nc-gold); } /* ───────────────────────────────────────────────────────────────────────────── * CONTACT US * ───────────────────────────────────────────────────────────────────────────── */ .nc-contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .nc-contact-card { background: #fff; border-radius: var(--nc-radius); padding: 28px 24px; box-shadow: var(--nc-shadow); border: 1px solid var(--nc-border); } .nc-contact-card p, .nc-contact-card a { font-size: 14px; color: var(--nc-muted); line-height: 1.7; } .nc-contact-card a:hover { color: var(--nc-blue); } /* ───────────────────────────────────────────────────────────────────────────── * FOOTER * ───────────────────────────────────────────────────────────────────────────── */ footer, .pr-footer, #footer, .l-footer { background: var(--nc-blue) !important; padding: 20px 0 !important; } .pr-footer .at-panel__rw { max-width: var(--nc-max-width); margin: 0 auto; padding: 0 24px !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } footer a, .pr-footer a { color: rgba(255,255,255,0.8) !important; font-size: 14px !important; transition: color var(--nc-transition) !important; } footer a:hover, .pr-footer a:hover { color: var(--nc-gold) !important; } .block--block-content--copyright p, #block-copyright p { color: rgba(255,255,255,0.75) !important; font-size: 14px !important; margin: 0 !important; } /* ───────────────────────────────────────────────────────────────────────────── * INNER PAGE HERO * ───────────────────────────────────────────────────────────────────────────── */ .nc-page-hero { background: var(--nc-blue); padding: 60px 0 48px; color: #fff; } .nc-page-hero h1, .nc-page-hero .page__title { font-size: clamp(28px,4vw,44px); font-weight: 800; color: #fff !important; margin-bottom: 12px; display: block !important; } .nc-page-hero p { color: rgba(255,255,255,0.82); font-size: 16px; max-width: 560px; margin: 0; } .nc-page-hero .nc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .nc-tag { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 500; padding: 4px 14px; border-radius: 20px; } .nc-page-hero .nc-category-pills { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .nc-pill { display: flex; align-items: center; gap: 10px; border: 1.5px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius: 8px; transition: all var(--nc-transition); } .nc-pill:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); } /* Hide default page title (shown in nc-page-hero instead) */ .path-frontpage #main-content { display: none !important; } .nc-inner-wrap .page__title { display: none !important; } /* Breadcrumb */ .breadcrumb, .block--system-breadcrumb-block nav { background: none !important; padding: 0 !important; margin: 0 0 12px !important; } .breadcrumb ol, .breadcrumb__list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .breadcrumb li, .breadcrumb__item { font-size: 13px; color: rgba(255,255,255,0.7); } .breadcrumb__item + .breadcrumb__item::before { content: '/'; margin-right: 6px; } .breadcrumb a { color: rgba(255,255,255,0.8); font-size: 13px; } .breadcrumb a:hover { color: #fff; } /* ───────────────────────────────────────────────────────────────────────────── * DETAIL PAGE * ───────────────────────────────────────────────────────────────────────────── */ .nc-detail-body { max-width: 800px; margin: 0 auto; padding: 48px 24px; } .node__image img { width: 100%; height: auto; max-height: 480px; object-fit: cover; border-radius: var(--nc-radius); margin-bottom: 36px; } .field--name-body p { font-size: 17px; line-height: 1.8; margin-bottom: 1.25rem; } .field--name-body p:first-child { font-size: 18px; font-weight: 600; } .nc-detail-actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; } .nc-btn-gold { display: inline-flex; align-items: center; gap: 8px; background: var(--nc-gold); color: #fff !important; font-weight: 600; font-size: 15px; padding: 12px 26px; border-radius: 30px; transition: all var(--nc-transition); } .nc-btn-gold:hover { background: var(--nc-gold-dark); transform: translateY(-2px); color: #fff !important; } .nc-btn-back { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--nc-border); color: var(--nc-text) !important; font-weight: 600; font-size: 15px; padding: 11px 24px; border-radius: 30px; transition: all var(--nc-transition); } .nc-btn-back:hover { border-color: var(--nc-blue); color: var(--nc-blue) !important; } /* ───────────────────────────────────────────────────────────────────────────── * VIEWS GENERAL * ───────────────────────────────────────────────────────────────────────────── */ .node--teaser { background: #fff; border-radius: var(--nc-radius); overflow: hidden; box-shadow: var(--nc-shadow); border: 1px solid var(--nc-border); transition: all var(--nc-transition); margin-bottom: 24px; } .node--teaser:hover { transform: translateY(-3px); box-shadow: var(--nc-shadow-hover); } .node--teaser .field--name-field-image img { width: 100%; height: 200px; object-fit: cover; } .node--teaser .node__title a { font-size: 17px; font-weight: 700; color: var(--nc-blue); } .node--teaser .node__title a:hover { color: var(--nc-gold-dark); } .pager { display: flex; justify-content: center; gap: 8px; padding: 32px 0; } .pager__item a, .pager__item--current { padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; } .pager__item a { color: var(--nc-blue); border: 1px solid var(--nc-border); } .pager__item a:hover { background: var(--nc-blue-light); } .pager__item--current { background: var(--nc-blue); color: #fff; border-radius: 6px; padding: 8px 16px; } /* ───────────────────────────────────────────────────────────────────────────── * AT LAYOUT OVERRIDES * ───────────────────────────────────────────────────────────────────────────── */ .at-panel__rw { padding: 0 !important; } .pr-content .at-panel__rw { max-width: var(--nc-max-width); margin: 0 auto; padding: 0 24px !important; } .block { margin: 0 !important; } .block__title { margin: 0 0 16px !important; } #block-announcementtitle h2.block__title, #block-activitiestitle h2.block__title, #block-languagecentertitle h2.block__title { display: none !important; } /* ───────────────────────────────────────────────────────────────────────────── * MOBILE * ───────────────────────────────────────────────────────────────────────────── */ .nc-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; } .nc-hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.3s; } @media (max-width: 768px) { .nc-hamburger { display: flex !important; } #block-mainmenu { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--nc-blue); padding: 16px; z-index: 999; } #block-mainmenu.nc-menu-open { display: block !important; } #block-mainmenu ul { flex-direction: column !important; gap: 4px !important; } #block-mainmenu ul li a { padding: 12px 16px !important; border-radius: 8px !important; } .nc-hero { min-height: 420px; } .nc-hero__title { font-size: 28px; } .nc-hero__stats { gap: 24px; } .nc-about-grid { grid-template-columns: 1fr; } .nc-two-col { grid-template-columns: 1fr; } .nc-contact-grid { grid-template-columns: 1fr; } .view-language-center .view-content { grid-template-columns: 1fr; } .nc-hero__actions { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .nc-hero { min-height: 360px; } .nc-hero__inner { padding: 48px 16px 40px; } .nc-hero__stats .stat-number { font-size: 24px; } } /* ───────────────────────────────────────────────────────────────────────────── * HEADER LAYOUT FIX * ───────────────────────────────────────────────────────────────────────────── */ #masthead { background: var(--nc-blue) !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important; } .masthead-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; max-width: var(--nc-max-width) !important; margin: 0 auto !important; padding: 0 24px !important; min-height: 68px !important; gap: 24px !important; } .nc-brand { flex-shrink: 0; } .nc-brand .block { margin: 0 !important; } .nc-brand .site-branding { display: flex !important; align-items: center !important; } .nc-brand .site-branding img, .nc-brand img { max-height: 50px !important; width: auto !important; } .nc-nav { display: flex !important; align-items: center !important; gap: 8px !important; flex: 1 !important; justify-content: flex-end !important; } .nc-nav .block { margin: 0 !important; } /* WE MegaMenu override in header */ .nc-nav .we-mega-menu-ul, .nc-nav ul.we-mega-menu-ul { display: flex !important; align-items: center !important; gap: 4px !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; list-style: none !important; } .nc-nav .we-mega-menu-ul > li.we-mega-menu-li { position: relative !important; float: none !important; } .nc-nav .we-mega-menu-ul > li.we-mega-menu-li > a, .nc-nav .we-mega-menu-ul > li.we-mega-menu-li > span.we-mega-menu-nodrop { display: block !important; padding: 8px 16px !important; font-size: 15px !important; font-weight: 500 !important; color: rgba(255,255,255,0.9) !important; text-transform: none !important; letter-spacing: 0 !important; border-radius: var(--nc-radius-sm) !important; transition: background var(--nc-transition) !important; font-family: var(--nc-font) !important; background: none !important; border: none !important; white-space: nowrap !important; } .nc-nav .we-mega-menu-ul > li.we-mega-menu-li > a:hover, .nc-nav .we-mega-menu-ul > li.we-mega-menu-li:hover > a, .nc-nav .we-mega-menu-ul > li.we-mega-menu-li.active > a { background: rgba(255,255,255,0.12) !important; color: #fff !important; } /* Dropdown arrow */ .nc-nav .we-mega-menu-ul > li.we-mega-menu-li.we-mega-menu-dropdown > a::after, .nc-nav .we-mega-menu-ul li.we-mega-menu-dropdown > a::after { content: ' ▾' !important; font-size: 11px !important; } /* Dropdown panel */ .nc-nav .we-mega-menu-submenu, .nc-nav .we-mega-menu-ul .sub-hidden-accessible, .nc-nav .we-mega-menu-ul li .we-mega-menu-submenu { position: absolute !important; top: 100% !important; left: 0 !important; background: #fff !important; min-width: 200px !important; box-shadow: var(--nc-shadow-hover) !important; border-radius: var(--nc-radius-sm) !important; padding: 8px 0 !important; z-index: 9999 !important; /* display controlled by WE MegaMenu JS */ } .nc-nav .we-mega-menu-submenu a { color: var(--nc-text) !important; padding: 10px 20px !important; font-size: 14px !important; display: block !important; } .nc-nav .we-mega-menu-submenu a:hover { background: var(--nc-blue-light) !important; color: var(--nc-blue) !important; } /* Language Dropdown */ .nc-nav #block-languagedropdownswitcher, .nc-nav .block--language-dropdown-block { margin-left: 4px !important; } .nc-nav .lang-dropdown-select-element, .nc-nav select { background: transparent !important; border: 1.5px solid rgba(255,255,255,0.55) !important; border-radius: 20px !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important; padding: 5px 12px !important; cursor: pointer !important; font-family: var(--nc-font) !important; -webkit-appearance: none; appearance: none; padding-right: 28px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-color: transparent !important; } .nc-nav .lang-dropdown-select-element option { background: var(--nc-blue); color: #fff; } .nc-nav .lang-dropdown-select-element:focus { outline: none; border-color: #fff !important; } /* Globe icon fallback */ .nc-nav .block--language-block a, .nc-nav .block--language-switcher a { border: 1.5px solid rgba(255,255,255,0.55) !important; border-radius: 20px !important; padding: 5px 14px !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important; } /* ───────────────────────────────────────────────────────────────────────────── * FOOTER FIX * ───────────────────────────────────────────────────────────────────────────── */ .nc-footer { background: var(--nc-blue) !important; padding: 20px 0 !important; } .nc-footer__inner { max-width: var(--nc-max-width) !important; margin: 0 auto !important; padding: 0 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px !important; } .nc-footer__inner .block { margin: 0 !important; } .nc-footer p { color: rgba(255,255,255,0.75) !important; font-size: 14px !important; margin: 0 !important; } .nc-footer a { color: rgba(255,255,255,0.8) !important; transition: color var(--nc-transition) !important; } .nc-footer a:hover { color: var(--nc-gold) !important; } .nc-footer img { max-height: 20px !important; display: inline !important; vertical-align: middle !important; } /* ───────────────────────────────────────────────────────────────────────────── * MORE BTN * ───────────────────────────────────────────────────────────────────────────── */ .nc-more-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--nc-blue) !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; padding: 10px 22px !important; border-radius: 24px !important; margin-top: 16px !important; transition: all var(--nc-transition) !important; } .nc-more-btn:hover { background: var(--nc-blue-mid) !important; transform: translateY(-1px) !important; color: #fff !important; } /* Contact icon */ .nc-contact-icon { font-size: 28px; margin-bottom: 12px; text-align: center; } .nc-contact-card { text-align: center !important; } /* ───────────────────────────────────────────────────────────────────────────── * SIDEBAR LAYOUT (inner pages) * ───────────────────────────────────────────────────────────────────────────── */ .nc-sidebar-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; } .nc-sidebar { position: sticky; top: 88px; } /* Page title in nc-page-hero */ .nc-page-hero .page__title { display: block !important; color: #fff !important; font-size: clamp(28px,4vw,44px) !important; font-weight: 800 !important; margin: 0 !important; } .nc-page-hero nav.breadcrumb ol, .nc-page-hero .breadcrumb__list { list-style: none !important; display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin: 0 0 12px !important; padding: 0 !important; } .nc-page-hero .breadcrumb__item a { color: rgba(255,255,255,0.8) !important; font-size: 13px !important; } .nc-page-hero .breadcrumb__item { color: rgba(255,255,255,0.6); font-size: 13px; } .nc-page-hero .breadcrumb__item + .breadcrumb__item::before { content: '/' !important; margin-right: 6px !important; color: rgba(255,255,255,0.4) !important; } /* Hide global page title (already in hero) */ .nc-inner-wrap .block--page-title-block h1 { display: none !important; } /* Mobile sidebar */ @media (max-width: 768px) { .nc-sidebar-layout { grid-template-columns: 1fr; } .nc-sidebar { position: static; } .masthead-inner { padding: 0 16px !important; } .nc-nav .we-mega-menu-ul > li.we-mega-menu-li > a { padding: 8px 10px !important; font-size: 14px !important; } } /* ═══════════════════════════════════════════════════════════════════════ * WE MEGAMENU — FULL NAVBAR OVERRIDE FOR DARK HEADER * ═══════════════════════════════════════════════════════════════════════ */ /* Nuke Bootstrap navbar defaults inside nc-nav */ .nc-nav .navbar, .nc-nav .navbar-default, .nc-nav .navbar-we-mega-menu { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; min-height: unset !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } /* Hide the mobile toggle button on desktop */ .nc-nav .navbar-toggle, .nc-nav a.navbar-toggle { display: none !important; } /* container-fluid inside navbar — no padding */ .nc-nav .container-fluid { padding: 0 !important; margin: 0 !important; width: auto !important; } /* The main UL — horizontal flex row */ .nc-nav .we-mega-menu-ul, .nc-nav ul.we-mega-menu-ul, .nc-nav .nav.nav-tabs.we-mega-menu-ul { display: flex !important; flex-direction: row !important; align-items: center !important; padding: 0 !important; margin: 0 !important; list-style: none !important; background: transparent !important; border: none !important; border-bottom: none !important; float: none !important; gap: 2px !important; } /* LI items — no float */ .nc-nav .we-mega-menu-ul > li, .nc-nav .we-mega-menu-ul > li.we-mega-menu-li, .nc-nav .we-mega-menu-ul > li.dropdown-menu { float: none !important; position: relative !important; background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; } /* Top-level menu links */ .nc-nav .we-mega-menu-ul > li > a, .nc-nav .we-mega-menu-ul > li > a.we-mega-menu-li, .nc-nav .we-mega-menu-ul li.we-mega-menu-li > a { display: block !important; padding: 8px 14px !important; font-size: 14px !important; font-weight: 500 !important; color: rgba(255,255,255,0.92) !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 6px !important; text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap !important; font-family: var(--nc-font) !important; line-height: 1.4 !important; transition: background 0.2s !important; text-decoration: none !important; } .nc-nav .we-mega-menu-ul > li > a:hover, .nc-nav .we-mega-menu-ul > li:hover > a, .nc-nav .we-mega-menu-ul > li.active > a, .nc-nav .we-mega-menu-ul > li > a:focus { background: rgba(255,255,255,0.13) !important; color: #fff !important; outline: none !important; } /* Dropdown indicator */ .nc-nav .we-mega-menu-ul > li[data-submenu="1"] > a::after { content: ' ▾'; font-size: 10px; opacity: 0.8; } /* Submenu panel */ .nc-nav .we-mega-menu-submenu { position: absolute !important; top: 100% !important; left: 0 !important; min-width: 200px !important; background: #fff !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; border-radius: 8px !important; padding: 8px 0 !important; z-index: 9999 !important; display: none !important; border: 1px solid rgba(0,0,0,0.08) !important; } .nc-nav .we-mega-menu-ul li:hover > .we-mega-menu-submenu { display: block !important; } .nc-nav .we-mega-menu-submenu a { color: #1a2e5a !important; padding: 10px 18px !important; font-size: 14px !important; display: block !important; white-space: nowrap !important; background: transparent !important; transition: background 0.15s !important; } .nc-nav .we-mega-menu-submenu a:hover { background: #f0f4ff !important; color: var(--nc-blue) !important; } .nc-nav .we-mega-menu-submenu-inner { padding: 0 !important; } .nc-nav .we-mega-menu-row { margin: 0 !important; } .nc-nav .we-mega-menu-col { padding: 0 !important; } .nc-nav .subul { list-style: none !important; padding: 0 !important; margin: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ * LANGUAGE DROPDOWN BLOCK — PILL STYLE * ═══════════════════════════════════════════════════════════════════════ */ .nc-nav #block-languagedropdownswitcher, .nc-nav .block--language-dropdown-block { margin-left: 8px !important; flex-shrink: 0 !important; } /* Hide block title */ .nc-nav #block-languagedropdownswitcher .block__title { display: none !important; } /* Style the select element */ .nc-nav select, .nc-nav .lang-dropdown-select-element, #block-languagedropdownswitcher select { appearance: none !important; -webkit-appearance: none !important; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='white' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; border: 1.5px solid rgba(255,255,255,0.5) !important; border-radius: 20px !important; color: #fff !important; font-size: 13px !important; font-weight: 500 !important; font-family: var(--nc-font) !important; padding: 6px 30px 6px 14px !important; cursor: pointer !important; outline: none !important; min-width: 100px !important; max-width: 140px !important; } .nc-nav select option, #block-languagedropdownswitcher select option { background: var(--nc-blue) !important; color: #fff !important; } .nc-nav select:focus, #block-languagedropdownswitcher select:focus { border-color: #fff !important; outline: none !important; box-shadow: none !important; } /* Hide the form wrapper styling */ .nc-nav .form-select, .nc-nav .form-item { margin: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ * SITE BRANDING — LOGO + NAME IN HEADER * ═══════════════════════════════════════════════════════════════════════ */ .nc-brand .block-branding, .nc-brand #block-new-comet-branding { margin: 0 !important; } .nc-brand .block__inner { padding: 0 !important; } .nc-brand .site-branding { display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; } .nc-brand .site-branding__logo-link { display: flex !important; align-items: center !important; } .nc-brand .site-branding__logo-img { height: 48px !important; width: auto !important; object-fit: contain !important; display: block !important; } .nc-brand .site-branding__text { display: flex !important; align-items: center !important; } .nc-brand .site-branding__name { margin: 0 !important; } .nc-brand .site-branding__name-link { color: #fff !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; text-decoration: none !important; line-height: 1.2 !important; font-family: var(--nc-font) !important; } .nc-brand .site-branding__name-link:hover { color: rgba(255,255,255,0.85) !important; } /* ═══════════════════════════════════════════════════════════════════════ * MOBILE RESPONSIVE HEADER * ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .masthead-inner { flex-wrap: wrap !important; padding: 8px 16px !important; } .nc-nav .we-mega-menu-ul { flex-wrap: wrap !important; } .nc-nav .we-mega-menu-ul > li > a { padding: 6px 10px !important; font-size: 13px !important; } .nc-brand .site-branding__name-link { font-size: 11px !important; } } /* ═══════════════════════════════════════════════════════════════════════ * HEADER SECOND REGION — FLEX ROW (menu + language side by side) * ═══════════════════════════════════════════════════════════════════════ */ /* Make the header_second region a flex row */ #rid-header-second, .region.pr-header__header-second, .nc-nav .l-r.region { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; background: transparent !important; padding: 0 !important; margin: 0 !important; flex-wrap: nowrap !important; } /* Make blocks inside region flex items (no block styling) */ #rid-header-second > div, .region.pr-header__header-second > div { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; flex-shrink: 0 !important; } /* Language dropdown block — inline */ #block-languagedropdownswitcher { flex-shrink: 0 !important; order: 10 !important; /* Always last */ } /* ═══════════════════════════════════════════════════════════════════════ * WE MEGAMENU SUBMENU — FIX DROPDOWN CONTENT VISIBILITY * ═══════════════════════════════════════════════════════════════════════ */ /* DO NOT hide submenu with !important — let WE MegaMenu JS control it */ /* Instead, just fix colors and positioning */ .nc-nav .we-mega-menu-submenu, .nc-nav div.we-mega-menu-submenu { /* Remove: display: none !important from previous CSS */ background: #fff !important; border: 1px solid #e0e6f0 !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important; min-width: 180px !important; padding: 6px 0 !important; z-index: 99999 !important; position: absolute !important; top: 100% !important; left: 0 !important; } /* Sub-UL inside submenu */ .nc-nav .we-mega-menu-submenu ul, .nc-nav .we-mega-menu-submenu .subul, .nc-nav .we-mega-menu-submenu .nav-tabs { list-style: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; } /* All links inside submenu */ .nc-nav .we-mega-menu-submenu a, .nc-nav .we-mega-menu-submenu li > a, .nc-nav .we-mega-menu-submenu .subul li > a, .nc-nav .we-mega-menu-submenu .nav-tabs li > a { color: #1a2e5a !important; display: block !important; padding: 9px 18px !important; font-size: 14px !important; font-weight: 400 !important; background: transparent !important; white-space: nowrap !important; text-decoration: none !important; border: none !important; border-radius: 0 !important; line-height: 1.4 !important; font-family: var(--nc-font) !important; transition: background 0.15s !important; } .nc-nav .we-mega-menu-submenu a:hover, .nc-nav .we-mega-menu-submenu li > a:hover { background: #f0f4ff !important; color: var(--nc-blue) !important; } /* Remove tab-style borders from nav-tabs inside submenu */ .nc-nav .we-mega-menu-submenu .nav-tabs { border-bottom: none !important; } .nc-nav .we-mega-menu-submenu .nav-tabs > li { float: none !important; margin: 0 !important; border: none !important; } .nc-nav .we-mega-menu-submenu .nav-tabs > li > a { margin: 0 !important; border: none !important; border-radius: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ * LANGUAGE DROPDOWN — PILL STYLE (reference: 🌐 English) * ═══════════════════════════════════════════════════════════════════════ */ #block-languagedropdownswitcher .block__inner, #block-languagedropdownswitcher .block__content { padding: 0 !important; margin: 0 !important; } #block-languagedropdownswitcher .lang-dropdown-form, #block-languagedropdownswitcher form { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } #block-languagedropdownswitcher .form-item, #block-languagedropdownswitcher .js-form-item { margin: 0 !important; padding: 0 !important; } #block-languagedropdownswitcher select, #block-languagedropdownswitcher .lang-dropdown-select-element { appearance: none !important; -webkit-appearance: none !important; background: transparent !important; border: 2px solid rgba(255,255,255,0.6) !important; border-radius: 24px !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; font-family: var(--nc-font) !important; padding: 6px 32px 6px 14px !important; cursor: pointer !important; outline: none !important; min-width: 90px !important; max-width: 130px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='white' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-color: rgba(255,255,255,0.08) !important; transition: border-color 0.2s, background 0.2s !important; } #block-languagedropdownswitcher select:hover { border-color: rgba(255,255,255,0.9) !important; background-color: rgba(255,255,255,0.15) !important; } #block-languagedropdownswitcher select:focus { outline: none !important; border-color: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.2) !important; } #block-languagedropdownswitcher select option { background: #1a2e5a !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════════════════ * WE MEGAMENU — DROPDOWN ARROW + HOVER DISPLAY FIX * ═══════════════════════════════════════════════════════════════════════ */ /* Dropdown arrow — both CSS ::after and WE MegaMenu JS-added carets */ .nc-nav .we-mega-menu-ul > li[data-submenu="1"] > a::after { content: ' ▾' !important; font-size: 10px !important; opacity: 0.8 !important; display: inline !important; } /* WE MegaMenu auto-arrow (JS-added or caret) */ .nc-nav .we-mega-menu-ul .caret, .nc-nav .we-mega-menu-ul b.caret, .nc-nav .we-mega-menu-ul span.caret, .nc-nav .we-mega-menu-ul .arrow, .nc-nav .we-mega-menu-ul .we-mega-menu-caret { color: #fff !important; border-top-color: #fff !important; border-bottom-color: #fff !important; display: inline-block !important; margin-left: 4px !important; } /* ── PURE CSS HOVER FALLBACK ── (works even without JS) */ /* Override inline style="width: px" and show submenu on LI hover */ .nc-nav .we-mega-menu-ul li.we-mega-menu-li { position: relative !important; } .nc-nav .we-mega-menu-ul li.we-mega-menu-li .we-mega-menu-submenu { min-width: 180px !important; width: auto !important; /* override inline style="width: px" */ position: absolute !important; top: 100% !important; left: 0 !important; z-index: 99999 !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.1) !important; border-radius: 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; padding: 6px 0 !important; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; } .nc-nav .we-mega-menu-ul li.we-mega-menu-li:hover > .we-mega-menu-submenu, .nc-nav .we-mega-menu-ul li.we-mega-menu-li.open > .we-mega-menu-submenu, .nc-nav .we-mega-menu-ul li.we-mega-menu-li.dropdown-open > .we-mega-menu-submenu { pointer-events: auto !important; opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* Submenu items styling */ .nc-nav .we-mega-menu-submenu .we-mega-menu-submenu-inner { padding: 0 !important; } .nc-nav .we-mega-menu-submenu .we-mega-menu-row { margin: 0 !important; } .nc-nav .we-mega-menu-submenu .we-mega-menu-col { padding: 0 !important; } .nc-nav .we-mega-menu-submenu .subul, .nc-nav .we-mega-menu-submenu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } .nc-nav .we-mega-menu-submenu li { float: none !important; margin: 0 !important; } .nc-nav .we-mega-menu-submenu li > a, .nc-nav .we-mega-menu-submenu a { color: #1a2e5a !important; display: block !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 400 !important; font-family: var(--nc-font) !important; background: transparent !important; border: none !important; border-radius: 0 !important; white-space: nowrap !important; text-decoration: none !important; transition: background 0.15s, color 0.15s !important; } .nc-nav .we-mega-menu-submenu li > a:hover, .nc-nav .we-mega-menu-submenu a:hover { background: #f0f5ff !important; color: var(--nc-blue) !important; } /* ── FONT: Use system sans-serif with Inter if Google Fonts unavailable ── */ :root { --nc-font: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif !important; } body, .nc-nav, .masthead-inner { font-family: var(--nc-font) !important; } /* ═══════════════════════════════════════════════════════════════════════ * WE MEGAMENU DROPDOWN — DEFINITIVE FIX * WE MegaMenu backend.css sets display:none on submenu. * Bootstrap 3 does NOT do CSS hover — so we must do it all in CSS. * Strategy: override display:none with display:block + hide via opacity/visibility. * ═══════════════════════════════════════════════════════════════════════ */ /* Step 1: Override the display:none from WE MegaMenu backend.css */ /* Use !important and high specificity to beat the module CSS */ .nc-nav .we-mega-menu-ul > li.dropdown-menu > .we-mega-menu-submenu, .nc-nav .we-mega-menu-ul > .dropdown-menu > .we-mega-menu-submenu { display: block !important; /* hide visually until hover */ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; /* Position */ position: absolute !important; top: calc(100% + 4px) !important; left: 0 !important; z-index: 9999999 !important; /* Size & style */ min-width: 180px !important; width: auto !important; background: #fff !important; border: 1px solid rgba(30,60,120,0.12) !important; border-radius: 8px !important; box-shadow: 0 8px 28px rgba(0,0,0,0.14) !important; padding: 6px 0 !important; /* Smooth animation */ transform: translateY(-6px) !important; transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important; } /* Step 2: Show on hover — reveal the submenu */ .nc-nav .we-mega-menu-ul > li.dropdown-menu:hover > .we-mega-menu-submenu, .nc-nav .we-mega-menu-ul > li.dropdown-menu:focus-within > .we-mega-menu-submenu { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* Ensure the LI is positioned as relative anchor */ .nc-nav .we-mega-menu-ul > li.dropdown-menu { position: relative !important; } /* ── DROPDOWN ARROW INDICATOR ── */ /* Add ▾ after menu items that have submenus */ .nc-nav .we-mega-menu-ul > li.dropdown-menu > a.we-mega-menu-li::after { content: ' ▾' !important; font-size: 9px !important; opacity: 0.75 !important; display: inline !important; margin-left: 2px !important; vertical-align: middle !important; line-height: 1 !important; } /* Rotate arrow on hover */ .nc-nav .we-mega-menu-ul > li.dropdown-menu:hover > a.we-mega-menu-li::after { content: ' ▴' !important; opacity: 1 !important; } /* ── SUBMENU INNER CONTENT ── */ /* Reset nav-tabs styling inside submenu */ .nc-nav .we-mega-menu-submenu-inner, .nc-nav .we-mega-menu-submenu .we-mega-menu-row, .nc-nav .we-mega-menu-submenu .we-mega-menu-col { padding: 0 !important; margin: 0 !important; display: block !important; width: 100% !important; } .nc-nav .we-mega-menu-submenu .nav-tabs, .nc-nav .we-mega-menu-submenu .subul { list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; display: block !important; } .nc-nav .we-mega-menu-submenu .nav-tabs > li, .nc-nav .we-mega-menu-submenu .subul > li { float: none !important; margin: 0 !important; padding: 0 !important; display: block !important; } .nc-nav .we-mega-menu-submenu .nav-tabs > li > a, .nc-nav .we-mega-menu-submenu .subul > li > a, .nc-nav .we-mega-menu-submenu a { display: block !important; padding: 10px 20px !important; color: #1a2e5a !important; font-size: 14px !important; font-weight: 400 !important; font-family: var(--nc-font) !important; text-decoration: none !important; white-space: nowrap !important; border: none !important; border-radius: 0 !important; background: transparent !important; margin: 0 !important; transition: background 0.15s, color 0.15s !important; line-height: 1.5 !important; } .nc-nav .we-mega-menu-submenu .nav-tabs > li > a:hover, .nc-nav .we-mega-menu-submenu .subul > li > a:hover, .nc-nav .we-mega-menu-submenu a:hover { background: #f0f5ff !important; color: var(--nc-blue) !important; } /* ═══════════════════════════════════════════════════════════════════════ * SUBMENU LINK COLOR — OVERRIDE WHITE TEXT BLEED * The top-level white link CSS bleeds into submenu links. * Use maximum specificity with !important to override. * ═══════════════════════════════════════════════════════════════════════ */ /* Super-specific dark color for ALL links inside any submenu */ .nc-nav .we-mega-menu-ul > li.dropdown-menu > .we-mega-menu-submenu a, .nc-nav .we-mega-menu-ul > li.dropdown-menu > .we-mega-menu-submenu li > a, .nc-nav .we-mega-menu-ul > li.dropdown-menu .we-mega-menu-submenu .subul a, .nc-nav .we-mega-menu-ul > li.dropdown-menu .we-mega-menu-submenu .nav-tabs a, .nc-nav .we-mega-menu-ul > li.dropdown-menu .we-mega-menu-submenu .nav-tabs li a, .nc-nav .we-mega-menu-ul li.we-mega-menu-li.dropdown-menu .we-mega-menu-submenu a, #block-mainmenu .we-mega-menu-submenu a, #block-mainmenu .we-mega-menu-submenu li a, #block-mainmenu .we-mega-menu-submenu .subul li a, #block-mainmenu .we-mega-menu-submenu .nav-tabs li a { color: #1a2e5a !important; background: transparent !important; text-shadow: none !important; border: none !important; display: block !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 400 !important; font-family: var(--nc-font) !important; white-space: nowrap !important; line-height: 1.5 !important; text-decoration: none !important; transition: background 0.15s, color 0.15s !important; } #block-mainmenu .we-mega-menu-submenu a:hover, #block-mainmenu .we-mega-menu-submenu li a:hover, #block-mainmenu .we-mega-menu-submenu .subul li a:hover, #block-mainmenu .we-mega-menu-submenu .nav-tabs li a:hover, .nc-nav .we-mega-menu-ul li.dropdown-menu .we-mega-menu-submenu a:hover { color: #0047c8 !important; background: #f0f5ff !important; } /* Ensure submenu container is properly visible */ #block-mainmenu .we-mega-menu-submenu-inner, #block-mainmenu .we-mega-menu-row, #block-mainmenu .we-mega-menu-col { display: block !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } #block-mainmenu .we-mega-menu-submenu .subul, #block-mainmenu .we-mega-menu-submenu .nav-tabs { display: block !important; list-style: none !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; } #block-mainmenu .we-mega-menu-submenu li { display: block !important; float: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * DROPDOWN GAP FIX — Hover bridge so mouse can move to submenu * ═══════════════════════════════════════════════════════════════════════ */ /* Remove the gap — submenu starts directly below the trigger */ .nc-nav .we-mega-menu-ul > li.dropdown-menu > .we-mega-menu-submenu { top: 100% !important; /* Remove the +4px gap */ margin-top: 0 !important; } /* Invisible hover bridge: extends the hover area between menu item and submenu */ .nc-nav .we-mega-menu-ul > li.dropdown-menu > .we-mega-menu-submenu::before { content: '' !important; position: absolute !important; top: -8px !important; /* extends 8px above the submenu */ left: 0 !important; right: 0 !important; height: 8px !important; background: transparent !important; display: block !important; } /* Arrow span styling */ .nc-nav .nc-arrow { font-size: 10px !important; opacity: 0.8 !important; display: inline !important; margin-left: 2px !important; vertical-align: middle !important; color: rgba(255,255,255,0.85) !important; } /* Ensure the top-level link stays inline-flex to fit arrow */ .nc-nav .we-mega-menu-ul > li > a.we-mega-menu-li { display: inline-flex !important; align-items: center !important; } /* ═══════════════════════════════════════════════════════════════════════ * DROPDOWN BOX — FIX EXTRA BOTTOM SPACE (Bootstrap grid override) * ═══════════════════════════════════════════════════════════════════════ */ /* Bootstrap .row has margin: 0 -15px — reset it inside submenu */ .nc-nav .we-mega-menu-submenu .we-mega-menu-row, #block-mainmenu .we-mega-menu-submenu .we-mega-menu-row { margin: 0 !important; padding: 0 !important; width: 100% !important; float: none !important; display: block !important; overflow: hidden !important; } /* Bootstrap .span12 has padding: 0 15px — reset it */ .nc-nav .we-mega-menu-submenu .we-mega-menu-col, .nc-nav .we-mega-menu-submenu .span12, #block-mainmenu .we-mega-menu-submenu .we-mega-menu-col, #block-mainmenu .we-mega-menu-submenu .span12 { padding: 0 !important; margin: 0 !important; width: 100% !important; float: none !important; display: block !important; } /* Submenu inner — no extra padding */ .nc-nav .we-mega-menu-submenu .we-mega-menu-submenu-inner, #block-mainmenu .we-mega-menu-submenu .we-mega-menu-submenu-inner { padding: 0 !important; margin: 0 !important; display: block !important; overflow: hidden !important; } /* The submenu box itself — fit content height */ .nc-nav .we-mega-menu-ul > li.dropdown-menu > .we-mega-menu-submenu, .nc-nav .we-mega-menu-ul > .dropdown-menu > .we-mega-menu-submenu { height: auto !important; max-height: none !important; overflow: visible !important; padding: 6px 0 !important; } /* Language selector with globe icon styling */ .nc-lang-wrap select, #block-languagedropdownswitcher .nc-lang-wrap select { padding-left: 30px !important; } /* Override inline-flex on top-level links — use flex for arrow alignment */ .nc-nav .we-mega-menu-ul > li > a.we-mega-menu-li { display: inline-flex !important; align-items: center !important; gap: 0 !important; white-space: nowrap !important; } /* ═══════════════════════════════════════════════════════════════════════ * FINAL DROPDOWN FIX — Remove overflow:hidden (was clipping content) * ═══════════════════════════════════════════════════════════════════════ */ /* UNDO the overflow:hidden from previous CSS - it clips submenu items */ .nc-nav .we-mega-menu-submenu .we-mega-menu-submenu-inner, #block-mainmenu .we-mega-menu-submenu .we-mega-menu-submenu-inner, .nc-nav .we-mega-menu-submenu .we-mega-menu-row, #block-mainmenu .we-mega-menu-submenu .we-mega-menu-row { overflow: visible !important; } /* Better arrow spacing — more gap between text and ▾ */ .nc-nav .nc-arrow { margin-left: 6px !important; font-size: 8px !important; opacity: 0.85 !important; display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; color: rgba(255,255,255,0.85) !important; position: relative !important; top: -1px !important; } /* Menu link — ensure arrow has proper space */ .nc-nav .we-mega-menu-ul > li > a.we-mega-menu-li { display: inline-flex !important; align-items: center !important; gap: 0 !important; padding-right: 14px !important; } /* Fix submenu item visibility — extremely specific selectors */ nav.navbar-we-mega-menu .we-mega-menu-submenu *:not(.nc-arrow) a, nav.navbar-we-mega-menu .we-mega-menu-submenu a, nav.navbar-we-mega-menu .we-mega-menu-submenu li a, #block-mainmenu nav .we-mega-menu-submenu a, #block-mainmenu nav .we-mega-menu-submenu li a { color: #1e3a6e !important; background: transparent !important; display: block !important; padding: 9px 18px !important; font-size: 14px !important; white-space: nowrap !important; } /* ── ARROW SPACING — more gap between menu text and ▾ ── */ .nc-nav .nc-arrow, span.nc-arrow { margin-left: 8px !important; font-size: 9px !important; letter-spacing: 0 !important; } /* Also ensure link padding accommodates the arrow */ #block-mainmenu .we-mega-menu-ul > li > a.we-mega-menu-li, #block-mainmenu .we-mega-menu-ul > li > a.we-megamenu-nolink { gap: 6px !important; padding: 7px 12px !important; } /* ── DROPDOWN BOX — Remove Bootstrap nav-tabs bottom margin/border ── */ /* Bootstrap .nav.nav-tabs adds margin-bottom: 15px and border-bottom on .subul */ #block-mainmenu .we-mega-menu-submenu .nav-tabs, #block-mainmenu .we-mega-menu-submenu ul.subul, #block-mainmenu .we-mega-menu-submenu .nav, .nc-nav .we-mega-menu-submenu .nav-tabs, .nc-nav .we-mega-menu-submenu .subul { margin-bottom: 0 !important; margin-top: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; border: none !important; } /* Also reset the we-mega-menu-col (may carry Bootstrap column height) */ #block-mainmenu .we-mega-menu-submenu .we-mega-menu-col, #block-mainmenu .we-mega-menu-submenu .span12 { height: auto !important; min-height: unset !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Submenu container: tight fit */ .nc-nav .we-mega-menu-ul > li.dropdown-menu > .we-mega-menu-submenu { padding: 4px 0 !important; height: auto !important; min-height: unset !important; } /* ═══════════════════════════════════════════════════════════════════════ * ROOT CAUSE FIX: Bootstrap clearfix pseudo-elements on .nav.subul * Bootstrap adds: .nav::before { display:table; content:" " } * .nav::after { display:table; content:" "; clear:both } * These render as table boxes with the space char — adding ~20px each at * bottom of the dropdown = the extra whitespace the user sees. * ═══════════════════════════════════════════════════════════════════════ */ #block-mainmenu .we-mega-menu-submenu .nav::before, #block-mainmenu .we-mega-menu-submenu .nav::after, #block-mainmenu .we-mega-menu-submenu ul::before, #block-mainmenu .we-mega-menu-submenu ul::after, #block-mainmenu .we-mega-menu-submenu .subul::before, #block-mainmenu .we-mega-menu-submenu .subul::after { display: none !important; content: none !important; clear: none !important; height: 0 !important; visibility: hidden !important; } /* Also ensure li items are NOT floating (Bootstrap .nav-tabs>li { float:left }) */ #block-mainmenu .we-mega-menu-submenu .nav-tabs > li, #block-mainmenu .we-mega-menu-submenu li.we-mega-menu-li { float: none !important; clear: none !important; margin-bottom: 0 !important; display: block !important; } /* Ensure container height fits content only */ .nc-nav .we-mega-menu-ul > li.dropdown-menu > .we-mega-menu-submenu { height: fit-content !important; } #block-mainmenu .we-mega-menu-submenu .we-mega-menu-row, #block-mainmenu .we-mega-menu-submenu .we-mega-menu-submenu-inner, #block-mainmenu .we-mega-menu-submenu .we-mega-menu-col { height: fit-content !important; min-height: 0 !important; float: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * INNER PAGE — HERO BANNER (dark blue header) * Reference: breadcrumb path + large title on dark blue bg * ═══════════════════════════════════════════════════════════════════════ */ .nc-page-hero { background: var(--nc-blue) !important; padding: 36px 0 44px !important; color: #fff !important; position: relative !important; } /* Breadcrumb inside hero */ .nc-page-hero__crumb .block--system-breadcrumb-block, .nc-page-hero__crumb nav, .nc-page-hero__crumb .breadcrumb { background: none !important; padding: 0 !important; margin: 0 0 14px !important; } .nc-page-hero__crumb ol, .nc-page-hero__crumb .breadcrumb__list { display: flex !important; align-items: center !important; gap: 0 !important; list-style: none !important; padding: 0 !important; margin: 0 !important; flex-wrap: wrap !important; } .nc-page-hero__crumb li, .nc-page-hero__crumb .breadcrumb__item { font-size: 13px !important; color: rgba(255,255,255,0.65) !important; display: flex !important; align-items: center !important; } .nc-page-hero__crumb li + li::before, .nc-page-hero__crumb .breadcrumb__item + .breadcrumb__item::before { content: '/' !important; margin: 0 8px !important; color: rgba(255,255,255,0.35) !important; } .nc-page-hero__crumb a { color: rgba(255,255,255,0.75) !important; text-decoration: none !important; font-size: 13px !important; transition: color 0.15s !important; } .nc-page-hero__crumb a:hover { color: #fff !important; } /* Page title in hero */ .nc-page-hero__title { font-size: clamp(24px, 3.5vw, 40px) !important; font-weight: 800 !important; color: #fff !important; margin: 0 !important; line-height: 1.2 !important; max-width: 780px !important; font-family: var(--nc-font) !important; } /* Hide duplicate page title rendered in content area */ .nc-inner-wrap .block-page-title-block, .nc-inner-wrap .block--page-title-block, .nc-inner-wrap h1.page-title, .nc-inner-wrap h1.page__title, .nc-inner-wrap .page-title, .nc-inner-wrap .js-page-title { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * INNER PAGE — WHITE CONTENT AREA * ═══════════════════════════════════════════════════════════════════════ */ .nc-inner-wrap { background: #fff !important; min-height: 400px !important; } .nc-inner-wrap > .nc-container { padding-top: 52px !important; padding-bottom: 72px !important; } /* Full-width (no sidebar) content: constrain to ~820px */ .nc-main-content--full { max-width: 820px !important; margin: 0 auto !important; } /* Sidebar layout: main + sidebar */ .nc-sidebar-layout { display: grid !important; grid-template-columns: 1fr 300px !important; gap: 48px !important; align-items: start !important; } .nc-sidebar { position: sticky !important; top: 88px !important; } /* ── Node content typography ── */ .nc-main-content h2 { font-size: clamp(20px, 2.5vw, 28px) !important; font-weight: 700 !important; color: var(--nc-blue) !important; margin: 32px 0 16px !important; } .nc-main-content h3 { font-size: 20px !important; font-weight: 600 !important; color: #1a2e5a !important; margin: 24px 0 12px !important; } .nc-main-content p { font-size: 16px !important; line-height: 1.75 !important; color: #374151 !important; margin-bottom: 18px !important; font-family: var(--nc-font) !important; } .nc-main-content p:first-child, .nc-main-content .field__item > p:first-child { font-weight: 600 !important; color: #1a2e5a !important; font-size: 17px !important; } .nc-main-content ul, .nc-main-content ol { padding-left: 24px !important; margin-bottom: 18px !important; color: #374151 !important; line-height: 1.75 !important; } /* ── Feature image in node ── */ .nc-main-content .field--type-image img, .nc-main-content .field--name-field-image img, .nc-main-content .node__image img, .nc-main-content article img { width: 100% !important; height: auto !important; border-radius: 12px !important; margin-bottom: 32px !important; display: block !important; } /* ── Node metadata (date, tags) ── */ .node__meta, .submitted, .field--name-field-date { font-size: 13px !important; color: #6b7280 !important; margin-bottom: 24px !important; } /* ── CTA button area ── */ .node__links, .nc-main-content .links { margin-top: 36px !important; display: flex !important; gap: 16px !important; flex-wrap: wrap !important; align-items: center !important; } /* ── Related / Other posts section ── */ .nc-related-posts, .view--related, .block--views-blockannouncement-block, .view-id-announcement.view-display-id-block_1 { margin-top: 64px !important; padding-top: 48px !important; border-top: 1px solid #e5e7eb !important; } .nc-related-posts h2, .view-header h2 { font-size: 22px !important; font-weight: 700 !important; color: var(--nc-blue) !important; margin-bottom: 6px !important; padding-bottom: 10px !important; border-bottom: 3px solid var(--nc-gold) !important; display: inline-block !important; } /* ═══════════════════════════════════════════════════════════════════════ * LIST PAGE — "Latest posts" section heading * ═══════════════════════════════════════════════════════════════════════ */ .view-header h2, .nc-section-title { font-size: 22px !important; font-weight: 700 !important; color: var(--nc-blue) !important; margin-bottom: 8px !important; position: relative !important; padding-bottom: 12px !important; } .view-header h2::after, .nc-section-title::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 44px !important; height: 3px !important; background: var(--nc-gold) !important; border-radius: 2px !important; } /* ── View card grid (2-col on list pages) ── */ .view-content { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 28px !important; margin-top: 32px !important; } .views-row { background: #fff !important; border: 1px solid #e8ecf2 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 12px rgba(30,60,120,0.07) !important; transition: transform 0.2s, box-shadow 0.2s !important; } .views-row:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(30,60,120,0.14) !important; } .views-row .views-field-field-image img, .views-row img { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; } .views-row .views-field-title a, .views-row h3 a { font-size: 17px !important; font-weight: 700 !important; color: var(--nc-blue) !important; text-decoration: none !important; line-height: 1.3 !important; } .views-row .views-field-title a:hover { color: var(--nc-gold) !important; } .views-row .card-body, .views-row .views-field + .views-field { padding: 20px !important; } /* ── "Read more" link ── */ .views-row a.read-more, .nc-main-content a.read-more, a.node-read-more { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: var(--nc-blue) !important; font-size: 14px !important; font-weight: 600 !important; margin-top: 12px !important; text-decoration: none !important; } .views-row a.read-more:hover { color: var(--nc-gold) !important; } /* ── Messages ── */ .nc-messages { background: #fef3c7; border-bottom: 2px solid #f59e0b; padding: 12px 0; } /* ═══════════════════════════════════════════════════════════════════════ * INNER PAGE FIX ROUND 2 * 1. Style page title block in hero (white, large) * 2. Hide the same block instance in content (it renders twice) * 3. Fix card layout (image top, 2-col grid) * ═══════════════════════════════════════════════════════════════════════ */ /* ── Page title block styled in the HERO ── */ .nc-page-hero__title-wrap .block__inner, .nc-page-hero__title-wrap .block__content { background: none !important; padding: 0 !important; margin: 0 !important; } .nc-page-hero__title-wrap h1, .nc-page-hero__title-wrap .page__title, .nc-page-hero__title-wrap .page-title { font-size: clamp(24px, 3.5vw, 42px) !important; font-weight: 800 !important; color: #fff !important; margin: 0 !important; line-height: 1.2 !important; max-width: 800px !important; font-family: var(--nc-font) !important; display: block !important; } /* ── HIDE the duplicate page title block placed in content region ── */ /* Block ID is #block-new-comet-page-title, class block-plugin-id--page-title-block */ #block-new-comet-page-title { display: none !important; } .nc-inner-wrap .block-plugin-id--page-title-block { display: none !important; } .nc-inner-wrap h1.page__title { display: none !important; } /* ── Inner container spacing (class-based, no inline style) ── */ .nc-inner-container { padding-top: 52px !important; padding-bottom: 72px !important; } /* ══════════════════════════════════════════════════════════════ * CARD LAYOUT FIX — views list pages (Language Center, etc.) * ══════════════════════════════════════════════════════════════ */ /* Override Drupal teaser float: force image on top */ .view-content .views-row, .view-content article.node--view-mode-teaser { display: flex !important; flex-direction: column !important; background: #fff !important; border: 1px solid #e8ecf2 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(30,60,120,0.07) !important; transition: transform 0.2s, box-shadow 0.2s !important; } .view-content .views-row:hover, .view-content article.node--view-mode-teaser:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(30,60,120,0.14) !important; } /* Image — full-width, fixed height, covers top of card */ .view-content .views-row .field--type-image, .view-content .views-row .views-field-field-image, .view-content article.node--view-mode-teaser .field--type-image { order: -10 !important; width: 100% !important; flex-shrink: 0 !important; float: none !important; margin: 0 !important; padding: 0 !important; } .view-content .views-row .field--type-image img, .view-content .views-row .views-field-field-image img, .view-content article.node--view-mode-teaser .field--type-image img { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; float: none !important; } /* Clear any Drupal default float on teaser image */ .field--name-field-image { float: none !important; margin: 0 !important; } /* Card text body area */ .view-content .views-row .node__content, .view-content .views-row .views-field, .view-content article.node--view-mode-teaser .node__content { padding: 20px !important; float: none !important; } /* Date in card */ .view-content .views-field-created, .view-content .node__submitted, .view-content .field--name-created { font-size: 12px !important; color: #9ca3af !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; margin-bottom: 8px !important; font-weight: 500 !important; } /* Card title */ .view-content .views-row h2 a, .view-content .views-row h3 a, .view-content .views-field-title a, .view-content article h3 a, .view-content article h2 a { font-size: 17px !important; font-weight: 700 !important; color: var(--nc-blue) !important; text-decoration: none !important; line-height: 1.35 !important; display: block !important; margin-bottom: 8px !important; } .view-content .views-row h2 a:hover, .view-content .views-row h3 a:hover, .view-content .views-field-title a:hover { color: var(--nc-gold) !important; } /* Card body text (teaser) */ .view-content .views-row .field--name-body, .view-content article .field--name-body { font-size: 14px !important; color: #6b7280 !important; line-height: 1.6 !important; margin-bottom: 12px !important; } /* Read more link */ .view-content .more-link a, .view-content .node-read-more, .view-content .read-more a, .view-content .links a[href*="read-more"], .view-content .links a { font-size: 13px !important; font-weight: 600 !important; color: var(--nc-blue) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } .view-content .more-link a:hover, .view-content .links a:hover { color: var(--nc-gold) !important; } /* ── Announcement cards — no image, padding-only layout ── */ .view-id-announcement .views-row .node__content { padding: 24px !important; } /* ═══════════════════════════════════════════════════════════════════════ * INNER PAGE — HERO TITLE SOURCES (Fix Round 3) * ═══════════════════════════════════════════════════════════════════════ */ /* Custom title blocks rendered in hero via .nc-hero-prefix */ .nc-hero-prefix .block__inner, .nc-hero-prefix .block__content, .nc-hero-prefix .block { background: none !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } /* All h1/h2/h3 inside hero prefix become white large title */ .nc-hero-prefix h1, .nc-hero-prefix h2, .nc-hero-prefix h3, .nc-hero-prefix .block__title { font-size: clamp(24px, 3.5vw, 42px) !important; font-weight: 800 !important; color: #fff !important; margin: 0 !important; line-height: 1.2 !important; font-family: var(--nc-font) !important; display: block !important; } /* Paragraphs/body text in hero prefix (if any description) */ .nc-hero-prefix p { color: rgba(255,255,255,0.82) !important; font-size: 16px !important; margin-top: 12px !important; max-width: 600px !important; } /* System page title fallback in hero */ .nc-page-hero__title-wrap .block__inner { background: none !important; padding: 0 !important; margin: 0 !important; } .nc-page-hero__title-wrap h1, .nc-page-hero__title-wrap .page__title, .nc-page-hero__title-wrap .page-title { font-size: clamp(24px, 3.5vw, 42px) !important; font-weight: 800 !important; color: #fff !important; margin: 0 !important; line-height: 1.2 !important; font-family: var(--nc-font) !important; } /* ── HIDE system page title from main content (now in hero) ── */ #block-new-comet-page-title { display: none !important; } .nc-inner-wrap .block-plugin-id--page-title-block { display: none !important; } .nc-inner-wrap h1.page__title, .nc-inner-wrap h1.page-title { display: none !important; } /* ── View header duplicate title ── */ .nc-inner-wrap .view > .view-header { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * VIEW CARDS — views-view-grid (Language Center 2-col layout) * Actual HTML: .views-view-grid.horizontal.cols-2 > .views-row > .views-col * ═══════════════════════════════════════════════════════════════════════ */ /* Override the grid/float layout with CSS Grid */ .views-view-grid.horizontal { display: grid !important; float: none !important; } .views-view-grid.horizontal.cols-2 { grid-template-columns: 1fr 1fr !important; gap: 28px !important; } .views-view-grid.horizontal.cols-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } /* Each views-row becomes transparent so cols sit in the grid */ .views-view-grid .views-row { display: contents !important; float: none !important; } /* Each views-col = one card */ .views-view-grid .views-col { width: auto !important; float: none !important; background: #fff !important; border: 1px solid #e8ecf2 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(30,60,120,0.07) !important; display: flex !important; flex-direction: column !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .views-view-grid .views-col:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 28px rgba(30,60,120,0.13) !important; } /* Image in card — full width, fixed height, top of card */ .views-view-grid .views-field-field-lc-img, .views-view-grid .views-field-field-announce-img, .views-view-grid .views-field-field-image { flex-shrink: 0 !important; overflow: hidden !important; } .views-view-grid .views-field-field-lc-img img, .views-view-grid .views-field-field-announce-img img, .views-view-grid .views-field-field-image img, .views-view-grid .views-col img { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; float: none !important; border-radius: 0 !important; margin: 0 !important; } /* Card text padding area */ .views-view-grid .views-col .views-field:not(.views-field-field-lc-img):not(.views-field-field-announce-img):not(.views-field-field-image) { padding: 0 20px !important; } .views-view-grid .views-col .views-field:last-child { padding-bottom: 20px !important; } .views-view-grid .views-col .views-field:first-of-type:not(.views-field-field-lc-img) { padding-top: 16px !important; } /* Date field in card */ .views-view-grid .views-field-created, .views-view-grid .views-field-field-date { font-size: 12px !important; font-weight: 600 !important; color: #9ca3af !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; padding-top: 16px !important; padding-bottom: 4px !important; } /* Title in card */ .views-view-grid .views-field-title a, .views-view-grid .views-field-title span { font-size: 17px !important; font-weight: 700 !important; color: var(--nc-blue) !important; text-decoration: none !important; line-height: 1.35 !important; display: block !important; padding-bottom: 8px !important; } .views-view-grid .views-field-title a:hover { color: var(--nc-gold) !important; } /* Body/summary field */ .views-view-grid .views-field-body, .views-view-grid .views-field-field-description { font-size: 14px !important; color: #6b7280 !important; line-height: 1.6 !important; padding-bottom: 8px !important; } /* Read more link */ .views-view-grid .views-field-view-node a, .views-view-grid .views-field-nothing a, .views-view-grid a.read-more { font-size: 13px !important; font-weight: 600 !important; color: var(--nc-blue) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; padding-bottom: 20px !important; } .views-view-grid .views-field-view-node a:hover { color: var(--nc-gold) !important; } /* ── "Latest posts" view header ── */ .view-header { margin-bottom: 28px !important; } .view-header h2 { font-size: 22px !important; font-weight: 700 !important; color: var(--nc-blue) !important; display: inline-block !important; padding-bottom: 10px !important; border-bottom: 3px solid var(--nc-gold) !important; } /* ── Announcement 3-col cards (unformatted list) ── */ /* Override earlier broad rules that applied views-view-grid to all views */ .view-id-announcement .view-content { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 24px !important; } .view-id-announcement .views-row { background: #fff !important; border: 1px solid #e8ecf2 !important; border-radius: 12px !important; padding: 24px !important; box-shadow: 0 2px 8px rgba(30,60,120,0.06) !important; display: block !important; /* announcement has no grid display needed */ transition: transform 0.2s, box-shadow 0.2s !important; } .view-id-announcement .views-row:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 20px rgba(30,60,120,0.12) !important; } .view-id-announcement h3 a, .view-id-announcement .views-field-title a { font-size: 16px !important; font-weight: 700 !important; color: var(--nc-blue) !important; text-decoration: none !important; line-height: 1.35 !important; display: block !important; margin-bottom: 12px !important; } .view-id-announcement h3 a:hover { color: var(--nc-gold) !important; } .view-id-announcement .views-field-created { font-size: 12px !important; color: #9ca3af !important; margin-bottom: 12px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } .view-id-announcement .views-field-view-node a, .view-id-announcement .links a { font-size: 13px !important; font-weight: 600 !important; color: var(--nc-blue) !important; text-decoration: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * HERO + CARD FIX (Round 4) — after confirmed HTML structure * ═══════════════════════════════════════════════════════════════════════ */ /* ── Hide breadcrumb block's h2 TITLE (screen-reader block heading) ── */ .nc-page-hero__crumb .block__title, .nc-page-hero__crumb h2.block__title, .nc-page-hero__crumb .block-breadcrumbs__title { display: none !important; } /* ── Style Language Center h2 in hero prefix ── */ /* The title is stored as

via CKEditor */ .nc-hero-prefix h2, .nc-hero-prefix h2.text-align-center, .nc-hero-prefix .field__item h2, .nc-hero-prefix .field__items h2 { text-align: left !important; color: #fff !important; font-size: clamp(26px, 3.5vw, 42px) !important; font-weight: 800 !important; margin: 0 0 8px !important; line-height: 1.2 !important; font-family: var(--nc-font) !important; display: block !important; } .nc-hero-prefix p, .nc-hero-prefix .field__item p { color: rgba(255,255,255,0.85) !important; font-size: 15px !important; margin-top: 8px !important; max-width: 640px !important; } /* Remove block decoration */ .nc-hero-prefix .block, .nc-hero-prefix .block__inner, .nc-hero-prefix .block__content, .nc-hero-prefix .region { background: none !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } /* Remove CKEditor wrapping field divs visual effects */ .nc-hero-prefix .clearfix { margin: 0 !important; padding: 0 !important; } /* ── Hero proper height ── */ .nc-page-hero { padding: 36px 0 50px !important; min-height: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ * VIEWS-VIEW-GRID cards — fix image link wrapping issue * ═══════════════════════════════════════════════════════════════════════ */ /* Image link wrapper must be block + full-width */ .views-view-grid .views-field-field-lc-img .field-content, .views-view-grid .views-field-field-lc-img .field-content > a, .views-view-grid .views-field-field-announce-img .field-content, .views-view-grid .views-field-field-announce-img .field-content > a { display: block !important; width: 100% !important; overflow: hidden !important; } .views-view-grid .views-field-field-lc-img .field-content > a img, .views-view-grid .views-field-field-announce-img .field-content > a img { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; float: none !important; transition: transform 0.3s ease !important; } .views-view-grid .views-col:hover img { transform: scale(1.04) !important; } /* Inline width: 50% override */ .views-view-grid.horizontal .views-col { width: auto !important; } /* Space between image and text inside card */ .views-view-grid .views-col > .views-field:not(.views-field-field-lc-img):not(.views-field-field-announce-img):not(.views-field-field-image) { padding-left: 20px !important; padding-right: 20px !important; } .views-view-grid .views-col > .views-field-title { padding-top: 16px !important; } .views-view-grid .views-col > .views-field:last-child { padding-bottom: 20px !important; } /* ── "Latest posts" view header title ── */ .view-content + *, .views-element-container > .view > .view-header { display: none !important; /* Hide duplicate header if it's just a title we already show */ } /* But show Latest Posts inside main content (not in hero) */ .nc-main-content .view-header { display: block !important; margin-bottom: 28px !important; } .nc-main-content .view-header h2 { font-size: 22px !important; font-weight: 700 !important; color: var(--nc-blue) !important; display: inline-block !important; padding-bottom: 10px !important; border-bottom: 3px solid var(--nc-gold) !important; margin-bottom: 8px !important; } /* ═══════════════════════════════════════════════════════════════════════ * SECTION HEADING — "Latest posts" style (injected via JS) * Reference: bold dark blue text + 3px gold underline (text-width only) * ═══════════════════════════════════════════════════════════════════════ */ .nc-section-heading-wrap { margin-bottom: 32px !important; } .nc-section-heading { font-size: 22px !important; font-weight: 700 !important; color: var(--nc-blue) !important; font-family: var(--nc-font) !important; display: inline-block !important; padding-bottom: 10px !important; border-bottom: 3px solid var(--nc-gold) !important; margin: 0 !important; line-height: 1.3 !important; } /* ═══════════════════════════════════════════════════════════════════════ * VIEWS-VIEW-GRID CARD LAYOUT — Flexbox (avoids display:contents issues) * Clearfix ::before/::after on .views-row became grid items with display:contents * Use flexbox on rows + auto-sizing cols instead * ═══════════════════════════════════════════════════════════════════════ */ /* Kill the previous grid approach */ .views-view-grid.horizontal.cols-2 { display: block !important; grid-template-columns: none !important; } /* Each row = flexbox row */ .views-view-grid.horizontal.cols-2 .views-row { display: flex !important; gap: 28px !important; margin-bottom: 28px !important; float: none !important; } /* Kill clearfix pseudo-elements on views-row */ .views-view-grid.horizontal.cols-2 .views-row::before, .views-view-grid.horizontal.cols-2 .views-row::after { display: none !important; content: none !important; } /* Each col = equal-width flex item */ .views-view-grid.horizontal.cols-2 .views-col { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; float: none !important; /* Card styling */ background: #fff !important; border: 1px solid #e8ecf2 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(30,60,120,0.07) !important; display: flex !important; flex-direction: column !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .views-view-grid.horizontal.cols-2 .views-col:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(30,60,120,0.13) !important; } /* ═══════════════════════════════════════════════════════════════════════ * CARD LAYOUT FINAL FIX — double-grid conflict resolved * * The root cause: .view-content { display: grid } (broad rule added earlier) * causes .views-view-grid to be a SINGLE grid-item at 396px wide (half the * container), then the flex-row inside creates two 184px-wide narrow cards. * * Fix: Reset .view-content to block, use flexbox ONLY on .views-row level. * ═══════════════════════════════════════════════════════════════════════ */ /* 1. Reset view-content: block only (no more grid wrapper) */ .nc-main-content .view-content { display: block !important; grid-template-columns: none !important; gap: 0 !important; margin-top: 0 !important; } /* 2. Also reset views-view-grid to block (was set to grid earlier) */ .views-view-grid.horizontal { display: block !important; float: none !important; } /* 3. Flexbox on the ROWS level only — scoped to language center */ .view-id-language_center .views-view-grid.horizontal .views-row, .view-id-language_center .views-view-grid.horizontal.cols-2 .views-row { display: flex !important; gap: 28px !important; margin-bottom: 28px !important; float: none !important; width: 100% !important; } .view-id-language_center .views-view-grid.horizontal .views-row::before, .view-id-language_center .views-view-grid.horizontal .views-row::after { display: none !important; content: none !important; } /* 4. Cards = equal-width flex items */ .view-id-language_center .views-view-grid.horizontal .views-col { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; float: none !important; background: #fff !important; border: 1px solid #e8ecf2 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(30,60,120,0.07) !important; display: flex !important; flex-direction: column !important; transition: transform 0.2s, box-shadow 0.2s !important; } .view-id-language_center .views-view-grid.horizontal .views-col:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(30,60,120,0.13) !important; } /* 5. Image full-width at top of card */ .view-id-language_center .views-field-field-lc-img { order: -1 !important; } .view-id-language_center .views-field-field-lc-img .field-content, .view-id-language_center .views-field-field-lc-img .field-content > a { display: block !important; width: 100% !important; } .view-id-language_center .views-field-field-lc-img img { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; float: none !important; margin: 0 !important; } /* 6. Card text padding */ .view-id-language_center .views-col .views-field:not(.views-field-field-lc-img) { padding: 0 18px !important; } .view-id-language_center .views-col .views-field-title { padding-top: 16px !important; } .view-id-language_center .views-col .views-field:last-child { padding-bottom: 18px !important; } /* 7. Card title */ .view-id-language_center .views-field-title .field-content a { font-size: 16px !important; font-weight: 700 !important; color: var(--nc-blue) !important; text-decoration: none !important; line-height: 1.35 !important; display: block !important; } .view-id-language_center .views-field-title .field-content a:hover { color: var(--nc-gold) !important; } /* 8. Card date */ .view-id-language_center .views-field-field-lc-post-date { font-size: 12px !important; color: #9ca3af !important; padding-top: 8px !important; font-weight: 500 !important; } /* 9. Card read-more */ .view-id-language_center .views-field-view-node a, .view-id-language_center .views-field-nothing a { font-size: 13px !important; font-weight: 600 !important; color: var(--nc-blue) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } .view-id-language_center .views-field-view-node a:hover { color: var(--nc-gold) !important; } /* ── Announcement view: 3-col grid ── */ .view-id-announcement .view-content { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 24px !important; margin-top: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ * KILL clearfix pseudo-elements on LC view grid/row * Without this, ::before and ::after become ghost CSS grid items * that push the real .views-col to wrong positions. * ═══════════════════════════════════════════════════════════════════════ */ .view-id-language_center .views-row::before, .view-id-language_center .views-row::after, .view-id-language_center .views-view-grid::before, .view-id-language_center .views-view-grid::after { display: none !important; content: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * SECTION HEADING — "Latest posts" short underline (matches About Us style) * About Us uses: width:48px, height:3px, border-radius:2px, margin-top:10px * ═══════════════════════════════════════════════════════════════════════ */ .nc-section-heading { font-size: 22px !important; font-weight: 700 !important; color: var(--nc-blue) !important; font-family: var(--nc-font) !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; /* Remove full-width border-bottom */ border-bottom: none !important; position: relative !important; } /* Short gold line — same as .nc-section-title::after (About Us) */ .nc-section-heading::after { content: '' !important; display: block !important; width: 48px !important; height: 3px !important; background: var(--nc-gold) !important; border-radius: 2px !important; margin-top: 10px !important; } .nc-section-heading-wrap { margin-bottom: 32px !important; } /* ═══════════════════════════════════════════════════════════════════════ * ENGLISH FONTS — Bricolage Grotesque (headings) + Plus Jakarta Sans (body) * * Scoped to html[lang="en"] so Japanese (ja) and Korean (ko) pages * are NOT affected — they use their system/default fonts as before. * * Drupal sets based on the active language. * ═══════════════════════════════════════════════════════════════════════ */ /* Override CSS font variables for English only */ html[lang="en"] { --nc-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --nc-heading-font: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif; } /* ── English body / base text → Plus Jakarta Sans ── */ html[lang="en"] body, html[lang="en"] p, html[lang="en"] li, html[lang="en"] td, html[lang="en"] th, html[lang="en"] span, html[lang="en"] div, html[lang="en"] a, html[lang="en"] label, html[lang="en"] input, html[lang="en"] button, html[lang="en"] select, html[lang="en"] textarea, html[lang="en"] blockquote { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* ── English headings → Bricolage Grotesque ── */ html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6, html[lang="en"] .nc-hero__title, html[lang="en"] .nc-page-hero__title-wrap h1, html[lang="en"] .nc-hero-prefix h1, html[lang="en"] .nc-hero-prefix h2, html[lang="en"] .nc-section-title, html[lang="en"] .nc-section-heading, html[lang="en"] .views-field-title a, html[lang="en"] .nc-card__title, html[lang="en"] .node__title, html[lang="en"] .node__title a { font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* ── Nav menu links → Plus Jakarta Sans (consistent with body) ── */ html[lang="en"] .nc-nav a, html[lang="en"] .we-mega-menu-ul a, html[lang="en"] .nc-lang-wrap select { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important; } /* ── Buttons → Plus Jakarta Sans bold ── */ html[lang="en"] .nc-btn-primary, html[lang="en"] .nc-btn-gold, html[lang="en"] button { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important; font-weight: 600 !important; } /* ── Font-size micro-tweaks for Bricolage Grotesque ── Bricolage is slightly condensed, so headings may need slight tracking */ html[lang="en"] h1 { letter-spacing: -0.02em; } html[lang="en"] h2 { letter-spacing: -0.015em; } html[lang="en"] h3 { letter-spacing: -0.01em; } /* ── English body font-weight reset ── Plus Jakarta Sans looks heavy if inherited font-weight is > 400. Force normal weight on all body-level content. */ html[lang="en"] body, html[lang="en"] p, html[lang="en"] li, html[lang="en"] td, html[lang="en"] th, html[lang="en"] blockquote, html[lang="en"] .field--type-text-with-summary, html[lang="en"] .field--type-text-long, html[lang="en"] .field--type-text, html[lang="en"] .node__content p, html[lang="en"] .node__content li, html[lang="en"] .nc-main-content p, html[lang="en"] .nc-main-content li, html[lang="en"] .nc-main-content div:not([class*="heading"]):not([class*="title"]) { font-weight: 400 !important; } /* Links in body → regular weight */ html[lang="en"] .nc-main-content a:not(.nc-btn-primary):not(.nc-btn-gold):not(.nc-readmore) { font-weight: 400 !important; } /* Breadcrumb, meta text → regular */ html[lang="en"] .breadcrumb__link, html[lang="en"] .breadcrumb__list-item, html[lang="en"] .views-field-created, html[lang="en"] .views-field-field-lc-post-date, html[lang="en"] time { font-weight: 400 !important; } /* Nav links → medium weight (500 is readable, not too heavy) */ html[lang="en"] .nc-nav .we-mega-menu-ul > li > a { font-weight: 500 !important; } /* Card titles → semi-bold (600 is fine for headings) */ html[lang="en"] .views-field-title a { font-weight: 600 !important; } /* ═══════════════════════════════════════════════════════════════════════ * ANNOUNCEMENT PAGE — professional card grid * ═══════════════════════════════════════════════════════════════════════ */ /* 3-column card grid for announcement view */ .view-id-announcement .view-content { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin-top: 0 !important; } /* Responsive: 2 cols on medium screens */ @media (max-width: 900px) { .view-id-announcement .view-content { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .view-id-announcement .view-content { grid-template-columns: 1fr !important; } } /* Hide the old "Announcement" heading that was injected as view-header (now replaced by JS-injected "Latest posts") */ .view-id-announcement .view-header { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * DRUPAL PAGER — Modern pagination style * Applies to announcement and language-center view pagers * ═══════════════════════════════════════════════════════════════════════ */ /* Pager wrapper */ .view-id-announcement .pager, .view-id-language_center .pager { display: flex !important; justify-content: center !important; margin-top: 40px !important; padding-bottom: 12px !important; } /* Item list */ .view-id-announcement .pager__items, .view-id-language_center .pager__items { display: flex !important; align-items: center !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; flex-wrap: wrap !important; } .view-id-announcement .pager__items__num-pages, .view-id-language_center .pager__items__num-pages { display: flex !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; flex-wrap: wrap !important; } /* Individual page links */ .view-id-announcement .pager__link, .view-id-language_center .pager__link { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 38px !important; height: 38px !important; padding: 0 10px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--nc-blue) !important; background: #fff !important; border: 1.5px solid #e2e8f0 !important; text-decoration: none !important; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s !important; line-height: 1 !important; } .view-id-announcement .pager__link:hover, .view-id-language_center .pager__link:hover { background: var(--nc-blue) !important; color: #fff !important; border-color: var(--nc-blue) !important; transform: translateY(-2px) !important; } /* Active page */ .view-id-announcement .pager__link--is-active, .view-id-language_center .pager__link--is-active { background: var(--nc-blue) !important; color: #fff !important; border-color: var(--nc-blue) !important; cursor: default !important; } /* Next / Previous / First / Last wider buttons */ .view-id-announcement .pager__item--next .pager__link, .view-id-announcement .pager__item--previous .pager__link, .view-id-announcement .pager__item--first .pager__link, .view-id-announcement .pager__item--last .pager__link, .view-id-language_center .pager__item--next .pager__link, .view-id-language_center .pager__item--previous .pager__link { min-width: auto !important; padding: 0 16px !important; font-size: 13px !important; background: #f8faff !important; border-color: #cbd5e1 !important; color: var(--nc-blue) !important; } /* Hide visually-hidden text inside pager links */ .view-id-announcement .pager__link .visually-hidden, .view-id-language_center .pager__link .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; } /* Pager key (page number) */ .pager__key { display: inline-block !important; } /* ═══════════════════════════════════════════════════════════════════════ * NODE DETAIL PAGE — Announcement / Language Center * ═══════════════════════════════════════════════════════════════════════ */ /* 1. Override sidebar layout → full-width for node detail pages */ .page-node-type--announcement .nc-sidebar-layout, .page-node-type--lc-post .nc-sidebar-layout { display: block !important; width: 100% !important; } .page-node-type--announcement .nc-sidebar, .page-node-type--lc-post .nc-sidebar { display: none !important; } .page-node-type--announcement .nc-main-content, .page-node-type--lc-post .nc-main-content { max-width: 820px !important; margin: 0 auto !important; width: 100% !important; } /* 2. Hide duplicate node title in content (shown in hero via JS) */ .page-node-type--announcement .node__title, .page-node-type--lc-post .node__title, .page-node-type--announcement .node__header, .page-node-type--lc-post .node__header { display: none !important; } /* 3. Hero title for detail page (injected by JS) */ .nc-detail-hero-title { font-size: clamp(22px, 3vw, 38px) !important; font-weight: 800 !important; color: #fff !important; line-height: 1.25 !important; margin: 14px 0 0 0 !important; max-width: 720px !important; font-family: 'Bricolage Grotesque', var(--nc-font) !important; } /* 4. Node content area */ .page-node-type--announcement .node__content, .page-node-type--lc-post .node__content { padding-top: 4px !important; } /* 5. Date field in detail page */ .page-node-type--announcement .field-name-field-announce-post-date, .page-node-type--lc-post .field-name-field-lc-post-date { margin-bottom: 4px !important; } /* 6. Body text — readable article typography */ .page-node-type--announcement .field-name-body p, .page-node-type--lc-post .field-name-body p { font-size: 16px !important; line-height: 1.8 !important; color: #374151 !important; margin-bottom: 16px !important; } .page-node-type--announcement .field-name-body ul, .page-node-type--lc-post .field-name-body ul, .page-node-type--announcement .field-name-body ol, .page-node-type--lc-post .field-name-body ol { font-size: 16px !important; line-height: 1.8 !important; color: #374151 !important; padding-left: 24px !important; margin-bottom: 16px !important; } .page-node-type--announcement .field-name-body h2, .page-node-type--announcement .field-name-body h3, .page-node-type--lc-post .field-name-body h2, .page-node-type--lc-post .field-name-body h3 { color: var(--nc-blue) !important; margin-top: 28px !important; margin-bottom: 12px !important; } .page-node-type--announcement .field-name-body strong { color: var(--nc-blue) !important; font-weight: 700 !important; } /* 7. Back link */ .nc-detail-back { margin-top: 48px !important; padding-top: 24px !important; border-top: 1px solid #e8ecf2 !important; } .nc-back-link { font-size: 14px !important; font-weight: 600 !important; color: var(--nc-blue) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transition: color 0.2s !important; } .nc-back-link:hover { color: var(--nc-gold) !important; } /* 8. Article node container */ .page-node-type--announcement article.node, .page-node-type--lc-post article.node { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ * RELATED POSTS SECTION — Detail page (below main content) * ═══════════════════════════════════════════════════════════════════════ */ /* Section wrapper */ .nc-related-section { background: #f4f7fb !important; padding: 48px 0 56px !important; margin-top: 0 !important; border-top: 1px solid #e8ecf2 !important; } /* Inner container */ .nc-related-inner { max-width: 1100px !important; margin: 0 auto !important; padding: 0 24px !important; } /* Card grid — 3 columns */ .nc-related-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin-top: 32px !important; } @media (max-width: 900px) { .nc-related-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .nc-related-grid { grid-template-columns: 1fr !important; } } /* Related card */ .nc-related-card { background: #fff !important; border: 1.5px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important; } .nc-related-card:hover { transform: translateY(-4px) !important; box-shadow: 0 10px 28px rgba(30, 60, 120, 0.12) !important; border-color: var(--nc-blue) !important; } /* Card link — wraps the whole card */ .nc-related-card__link { display: block !important; padding: 20px !important; text-decoration: none !important; height: 100% !important; } /* Date meta */ .nc-related-card__meta { font-size: 10px !important; font-weight: 600 !important; color: #9ca3af !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-bottom: 10px !important; } /* Title */ .nc-related-card__title { font-size: 15px !important; font-weight: 700 !important; color: var(--nc-blue) !important; line-height: 1.4 !important; margin-bottom: 16px !important; font-family: 'Bricolage Grotesque', var(--nc-font) !important; } .nc-related-card:hover .nc-related-card__title { color: var(--nc-blue) !important; } /* Read more */ .nc-related-card__more { font-size: 12px !important; font-weight: 600 !important; color: var(--nc-blue) !important; transition: color 0.2s, letter-spacing 0.2s !important; } .nc-related-card:hover .nc-related-card__more { color: var(--nc-gold) !important; letter-spacing: 0.03em !important; } /* ═══════════════════════════════════════════════════════════════════════ * ACTIVITY VIEW — Clearfix kill + pager styling * ═══════════════════════════════════════════════════════════════════════ */ /* Suppress clearfix pseudo-elements (same fix as Language Center) */ .view-id-activity .views-row::before, .view-id-activity .views-row::after, .view-id-activity .views-view-grid::before, .view-id-activity .views-view-grid::after { display: none !important; content: none !important; } /* Pager (same style as announcement pager) */ .view-id-activity .pager { display: flex !important; justify-content: center !important; margin-top: 40px !important; padding-bottom: 12px !important; } .view-id-activity .pager__items, .view-id-activity .pager__items__num-pages { display: flex !important; align-items: center !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; flex-wrap: wrap !important; } .view-id-activity .pager__link { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 38px !important; height: 38px !important; padding: 0 10px !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--nc-blue) !important; background: #fff !important; border: 1.5px solid #e2e8f0 !important; text-decoration: none !important; transition: background 0.18s, color 0.18s, border-color 0.18s !important; } .view-id-activity .pager__link:hover { background: var(--nc-blue) !important; color: #fff !important; border-color: var(--nc-blue) !important; } .view-id-activity .pager__link--is-active { background: var(--nc-blue) !important; color: #fff !important; border-color: var(--nc-blue) !important; } .view-id-activity .pager__link .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; } /* Slider block on activities page — give it breathing room */ .path-activities .view-id-slider { margin-bottom: 40px !important; border-radius: 12px !important; overflow: hidden !important; } /* Hide slider/banner block on Activities page */ .path-activities #block-views-block-slider-block-1 { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * ACTIVITIES DETAIL PAGE — Same layout as announcement detail * ═══════════════════════════════════════════════════════════════════════ */ /* Full-width layout (no sidebar) */ .page-node-type--activities .nc-sidebar-layout { display: block !important; width: 100% !important; } .page-node-type--activities .nc-sidebar { display: none !important; } .page-node-type--activities .nc-main-content { max-width: 820px !important; margin: 0 auto !important; width: 100% !important; } /* Hide duplicate title in content (shown in hero) */ .page-node-type--activities .node__title, .page-node-type--activities .node__header { display: none !important; } /* Hero title styling */ .page-node-type--activities .nc-detail-hero-title { font-size: clamp(22px, 3vw, 38px) !important; font-weight: 800 !important; color: #fff !important; line-height: 1.25 !important; margin: 14px 0 0 0 !important; max-width: 720px !important; font-family: 'Bricolage Grotesque', var(--nc-font) !important; } /* Activity image — full width, rounded */ .page-node-type--activities .field-name-field-activities-img { margin-bottom: 28px !important; border-radius: 12px !important; overflow: hidden !important; } .page-node-type--activities .field-name-field-activities-img img { width: 100% !important; height: auto !important; display: block !important; border-radius: 12px !important; } /* Body text */ .page-node-type--activities .field-name-body p { font-size: 16px !important; line-height: 1.8 !important; color: #374151 !important; margin-bottom: 16px !important; } .page-node-type--activities .field-name-body ul, .page-node-type--activities .field-name-body ol { font-size: 16px !important; line-height: 1.8 !important; color: #374151 !important; padding-left: 24px !important; margin-bottom: 16px !important; } .page-node-type--activities .field-name-body strong { color: var(--nc-blue) !important; font-weight: 700 !important; } /* Article reset */ .page-node-type--activities article.node { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ * LANGUAGE CENTER DETAIL PAGE — Consistent with Announcement & Activities * Body class: page-node-type--language-center * ═══════════════════════════════════════════════════════════════════════ */ /* Full-width layout (no sidebar) */ .page-node-type--language-center .nc-sidebar-layout { display: block !important; width: 100% !important; } .page-node-type--language-center .nc-sidebar { display: none !important; } .page-node-type--language-center .nc-main-content { max-width: 820px !important; margin: 0 auto !important; width: 100% !important; } /* Hide duplicate title / header in content (shown in hero) */ .page-node-type--language-center .node__title, .page-node-type--language-center .node__header { display: none !important; } /* LC feature image — full-width, rounded */ .page-node-type--language-center .field-name-field-lc-img { margin-bottom: 28px !important; border-radius: 12px !important; overflow: hidden !important; } .page-node-type--language-center .field-name-field-lc-img img { width: 100% !important; height: auto !important; display: block !important; border-radius: 12px !important; } /* Body text — article typography */ .page-node-type--language-center .field-name-body p { font-size: 16px !important; line-height: 1.8 !important; color: #374151 !important; margin-bottom: 16px !important; } .page-node-type--language-center .field-name-body ul, .page-node-type--language-center .field-name-body ol { font-size: 16px !important; line-height: 1.8 !important; color: #374151 !important; padding-left: 24px !important; margin-bottom: 16px !important; } .page-node-type--language-center .field-name-body strong { color: var(--nc-blue) !important; font-weight: 700 !important; } .page-node-type--language-center .field-name-body h2, .page-node-type--language-center .field-name-body h3 { color: var(--nc-blue) !important; margin-top: 28px !important; margin-bottom: 12px !important; } /* Description field (if shown) */ .page-node-type--language-center .field-name-field-lc-description { font-size: 16px !important; line-height: 1.8 !important; color: #374151 !important; margin-bottom: 20px !important; } /* Article container reset */ .page-node-type--language-center article.node { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ * HOMEPAGE — Block view section styling * ═══════════════════════════════════════════════════════════════════════ */ /* nc-section-news: "Announcement + Activities" 2-col */ .nc-section-news { padding: 60px 0; background: #f8faff; } .nc-section-news .nc-home-section-head { margin-bottom: 20px; } .nc-section-news .nc-section-title { font-size: 20px !important; margin-bottom: 0 !important; padding-bottom: 10px !important; position: relative !important; } .nc-section-news .nc-section-title::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; width: 40px !important; height: 3px !important; background: var(--nc-gold) !important; border-radius: 2px !important; } /* "More" button */ .nc-more-btn { display: inline-flex !important; align-items: center !important; margin-top: 20px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--nc-blue) !important; text-decoration: none !important; border: 1.5px solid var(--nc-blue) !important; padding: 8px 18px !important; border-radius: 8px !important; transition: background 0.18s, color 0.18s !important; } .nc-more-btn:hover { background: var(--nc-blue) !important; color: #fff !important; } /* LC home section */ .nc-section-lc { padding: 60px 0; } .nc-section-lc .nc-section-header { margin-bottom: 28px; } .nc-home-lc-list { margin-top: 8px; } /* Announcement list — remove default view margins */ .nc-home-ann-list .view-content { margin: 0 !important; padding: 0 !important; } .nc-home-ann-list .views-row:last-child { border-bottom: none !important; } /* Activities list — remove default margins */ .nc-home-act-list .view-content { margin: 0 !important; padding: 0 !important; } /* Suppress pager on homepage block views */ .nc-home-ann-list .pager, .nc-home-act-list .pager, .nc-home-lc-list .pager { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * HOMEPAGE FIXES — Button text + Announcement list layout * ═══════════════════════════════════════════════════════════════════════ */ /* Fix "More" button — white text on blue bg */ .nc-more-btn { background: var(--nc-blue) !important; color: #fff !important; border-color: var(--nc-blue) !important; } .nc-more-btn:hover { background: #0f1f4a !important; color: #fff !important; border-color: #0f1f4a !important; } /* Announcement section: clean vertical list (no card boxes) */ .nc-home-ann-list .view-content { display: flex !important; flex-direction: column !important; } .nc-home-ann-list .views-row { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 14px 0 !important; border-bottom: 1px solid #eef0f5 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; border-top: none !important; border-left: none !important; border-right: none !important; } .nc-home-ann-list .views-row:last-child { border-bottom: none !important; } /* Activities: remove card box from outer nc-news-card */ .nc-section-news .nc-news-card { background: #fff !important; border-radius: 12px !important; padding: 24px !important; box-shadow: 0 2px 12px rgba(30,60,120,0.07) !important; } /* Kill blank line above announcement list */ .nc-home-ann-list .view-id-announcement, .nc-home-ann-list .views-element-container, .nc-home-ann-list .element-container-wrapper, .nc-home-ann-list .view-content { margin: 0 !important; padding: 0 !important; border: none !important; } .nc-home-ann-list .views-row:first-child { border-top: none !important; padding-top: 0 !important; } /* ═══════════════════════════════════════════════════════════════════════ * HOMEPAGE Language Center — page_1 view, limit to row-1 only (2 posts) * ═══════════════════════════════════════════════════════════════════════ */ /* Hide rows beyond the first (only show 2 posts = 1 row of 2-col grid) */ .path-frontpage .nc-home-lc-list .views-view-grid .views-row:not(.row-1) { display: none !important; } /* Hide pager on homepage */ .path-frontpage .nc-home-lc-list .pager { display: none !important; } /* Remove "Latest posts" heading wrapper on homepage (guard already in JS) */ .path-frontpage .nc-home-lc-list .nc-section-heading-wrap { display: none !important; } /* Section spacing */ .nc-section-lc { padding: 56px 0 48px; } .nc-section-lc .nc-section-header { margin-bottom: 28px; } /* ═════ HOMEPAGE LC: Force full-width 2-col layout ═══════════════════════ */ .path-frontpage .nc-home-lc-list, .path-frontpage .nc-home-lc-list .views-element-container, .path-frontpage .nc-home-lc-list .element-container-wrapper, .path-frontpage .nc-home-lc-list .view-id-language_center, .path-frontpage .nc-home-lc-list .view-content, .path-frontpage .nc-home-lc-list .views-view-grid { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .path-frontpage .nc-home-lc-list .views-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px !important; width: 100% !important; max-width: 100% !important; float: none !important; margin-bottom: 0 !important; } .path-frontpage .nc-home-lc-list .views-col { width: auto !important; min-width: 0 !important; float: none !important; background: #fff !important; border: 1px solid #e8ecf2 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 10px rgba(30,60,120,0.07) !important; } .path-frontpage .nc-home-lc-list .views-field-field-lc-img img { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; } /* Kill pager + rows beyond row-1 */ .path-frontpage .nc-home-lc-list .views-row:not(.row-1), .path-frontpage .nc-home-lc-list .pager, .path-frontpage .nc-home-lc-list .nc-section-heading-wrap { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ * CONTACT US SECTION — Reference UI style * ═══════════════════════════════════════════════════════════════════════ */ .nc-section-contact { padding: 60px 0 70px !important; background: #eef2fb !important; } .nc-contact-head { text-align: center !important; margin-bottom: 40px !important; } .nc-contact-head .nc-section-title { display: inline-block !important; position: relative !important; padding-bottom: 12px !important; } .nc-contact-head .nc-section-title::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 40px !important; height: 3px !important; background: var(--nc-gold) !important; border-radius: 2px !important; } .nc-contact-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 24px !important; } .nc-contact-card { background: #fff !important; border-radius: 16px !important; padding: 28px 28px 32px !important; box-shadow: 0 2px 12px rgba(30,60,120,0.06) !important; text-align: left !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Override any old center-align from contact-icon */ .nc-contact-icon { display: none !important; } .nc-contact-icon-wrap { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 44px !important; height: 44px !important; margin-bottom: 16px !important; } .nc-contact-icon-wrap svg { display: block !important; } .nc-contact-text { font-size: 14px !important; color: #374151 !important; line-height: 1.7 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .nc-contact-text a { color: #1a2e5a !important; text-decoration: none !important; font-weight: 500 !important; } .nc-contact-text a:hover { color: var(--nc-gold) !important; } /* ═══ FOOTER — Facebook icon fix ═══════════════════════════════════════ */ .nc-fb-block { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; font-size: 13px !important; color: rgba(255,255,255,0.85) !important; } .nc-fb-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; background: #1877f2 !important; border-radius: 50% !important; text-decoration: none !important; flex-shrink: 0 !important; transition: background 0.2s !important; } .nc-fb-link:hover { background: #0c5bc9 !important; } .nc-fb-link svg { display: block !important; width: 18px !important; height: 18px !important; } /* Kill old distorted img if it still shows */ .nc-footer img[src*="icon_fb"] { display: none !important; } /* ═══ HEADER NAV — Kill ALL bullet dots from menu items ═══════════════ */ .nc-nav ul, .nc-nav li, .nc-nav .we-mega-menu-ul, .nc-nav .we-mega-menu-ul > li, .nc-nav .we-mega-menu-ul li, .nc-nav .subul, .nc-nav .subul li { list-style: none !important; list-style-type: none !important; padding-left: 0 !important; margin-left: 0 !important; } .nc-nav li::marker { content: none !important; font-size: 0 !important; } .nc-nav li::before, .nc-nav li::after { display: none !important; content: none !important; } /* Kill any nav-tabs separator dots or borders */ .nc-nav .nav-tabs > li { border: none !important; margin: 0 !important; } .nc-nav .nav.nav-tabs { border-bottom: none !important; } /* ═══ NUCLEAR: Kill ALL list bullets in header/nav — covers Bootstrap overrides ═══ */ header li, header ul, [id*="masthead"] li, [id*="masthead"] ul, .masthead li, .masthead ul, .nc-nav li, .nc-nav ul, #block-mainmenu li, #block-mainmenu ul, .we-mega-menu-ul, .we-mega-menu-ul li, .we-mega-menu-ul ul { list-style: none !important; list-style-type: none !important; padding-left: 0 !important; } header li::before, header li::after, .nc-nav li::before, .nc-nav li::after, .we-mega-menu-ul li::before, .we-mega-menu-ul li::after { content: none !important; display: none !important; } /* ═══ KILL Bootstrap .dropdown-menu styles bleeding onto WE MegaMenu
  • ═══ * Bootstrap .dropdown-menu: background:#fff; border:1px solid rgba(0,0,0,.15); * border-radius:4px; box-shadow:… — these apply to
  • * in WE MegaMenu and create visible bubble rings around dropdown arrows. * ═══════════════════════════════════════════════════════════════════════════ */ .nc-nav .we-mega-menu-ul > li.dropdown-menu, #block-mainmenu .we-mega-menu-ul > li.dropdown-menu { background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; position: relative !important; float: none !important; display: inline-flex !important; align-items: center !important; } /* Also kill any border/outline on the links and our arrow span */ .nc-nav .we-mega-menu-ul > li > a, .nc-nav .we-mega-menu-ul > li > a:hover, .nc-nav .we-mega-menu-ul > li > a:focus, .nc-nav .we-mega-menu-ul > li > a:active { border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; } .nc-nav .nc-arrow, .nc-nav .nc-arrow svg { border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; } /* ═══ KILL WE MegaMenu's ico-arrow.png ::before/::after pseudo-elements ═══ * we_megamenu_backend.css injects: * .we-mega-menu-ul .dropdown-menu > a::before { background-image: url(ico-arrow.png) } * .we-mega-menu-ul .dropdown-menu > a::after { background-image: url(ico-arrow-white.png) } * These create the circular arrow image next to dropdown menu items. * We use our own SVG chevron, so these are removed. * ═══════════════════════════════════════════════════════════════════════════ */ .we-mega-menu-ul .dropdown-menu > a::before, .we-mega-menu-ul .dropdown-menu > a::after, .we-mega-menu-ul .dropdown-menu > span::before, .we-mega-menu-ul .dropdown-menu > span::after, .nc-nav .we-mega-menu-ul li > a::before, .nc-nav .we-mega-menu-ul li > a::after { display: none !important; content: none !important; background-image: none !important; opacity: 0 !important; width: 0 !important; height: 0 !important; } /* ═══ Language selector — remove native browser select button appearance ═══ */ .nc-nav select, .nc-lang-wrap select, #block-languagedropdownswitcher select, .lang-dropdown-form select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: none !important; } /* ═══ WE MegaMenu — Replace PNG ico-arrow with CSS chevron ════════════════ * Kill the PNG background-image and draw a pure-CSS chevron instead. * This avoids the JS SVG + PNG double-arrow oval artifact. * ═══════════════════════════════════════════════════════════════════════════ */ body .we-mega-menu-ul .dropdown-menu > a::before, body .nc-nav .we-mega-menu-ul .dropdown-menu > a::before { content: '' !important; display: inline-block !important; position: relative !important; right: auto !important; top: auto !important; margin-top: 0 !important; margin-left: 6px !important; margin-bottom: 2px !important; width: 6px !important; height: 6px !important; border-right: 2px solid rgba(255,255,255,0.8) !important; border-bottom: 2px solid rgba(255,255,255,0.8) !important; border-top: none !important; border-left: none !important; border-radius: 0 !important; transform: rotate(45deg) !important; background-image: none !important; background-color: transparent !important; background-size: 0 !important; vertical-align: middle !important; transition: transform 0.2s !important; } body .we-mega-menu-ul .dropdown-menu > a::after, body .nc-nav .we-mega-menu-ul .dropdown-menu > a::after { content: none !important; display: none !important; background-image: none !important; } /* Rotate chevron on hover */ body .we-mega-menu-ul .dropdown-menu:hover > a::before, body .nc-nav .we-mega-menu-ul .dropdown-menu:hover > a::before { transform: rotate(225deg) !important; margin-top: 3px !important; } /* ═══ Language selector — kill AT Core's FontAwesome ▲▼ sort icon ::after ═══ * form.css adds content:"\f0dc" (FontAwesome sort icon) to select wrappers * when .fa-loaded is present. This appears as a black dot near the language pill. * ═══════════════════════════════════════════════════════════════════════════ */ .nc-nav .form-type-select__select-wrapper::after, .nc-nav .form-type-select__select-wrapper::before, #block-languagedropdownswitcher .form-type-select__select-wrapper::after, #block-languagedropdownswitcher .form-type-select__select-wrapper::before, .nc-lang-wrap .form-type-select__select-wrapper::after, .nc-lang-wrap .form-type-select__select-wrapper::before { display: none !important; content: none !important; } .nc-detail-back { display:none !important;}