/* ═══════════════════════════════════════════════════════════ NS theme — application-only components. These exist in the live site but not in the static prototype: the cart badge and the logged-in user menu. Kept in a separate file so regenerating ns-theme.css from the prototype never overwrites them. Everything here is scoped to .ns-theme, same as ns-theme.css. ═══════════════════════════════════════════════════════════ */ /* The prototype put overflow-x:clip on ; scoping moved it to , so restore it on the root for themed pages only. */ html:has(> body.ns-theme){overflow-x:clip} /* ---------- cart ---------- */ .ns-theme .nsc{ position:relative;display:grid;place-items:center;width:42px;height:42px;flex:none; border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.7); color:var(--text);box-shadow:var(--sh-sm);transition:.35s var(--ease); } .ns-theme .nsc svg{width:20px;height:20px} .ns-theme .nsc:hover{background:#fff;border-color:var(--blue-2);color:var(--blue-2);transform:translateY(-2px)} .ns-theme .nsc b{ position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px; display:grid;place-items:center;border-radius:100px; background:var(--coral);color:#fff;border:2px solid var(--paper); font-family:var(--label);font-weight:700;font-size:10px;line-height:1; } /* ---------- logged-in user menu ---------- */ .ns-theme .nsu{position:relative;flex:none} .ns-theme .nsu__btn{ display:flex;align-items:center;gap:9px;padding:6px 13px 6px 6px;border-radius:100px; border:1px solid var(--line-2);background:rgba(255,255,255,.7);color:var(--text); box-shadow:var(--sh-sm);cursor:pointer;font-size:13.5px;font-weight:600; transition:.35s var(--ease); } .ns-theme .nsu__btn svg{width:15px;height:15px;color:var(--blue-2);transition:transform .35s var(--ease)} .ns-theme .nsu__btn:hover{background:#fff;border-color:var(--blue-2)} .ns-theme .nsu__btn[aria-expanded="true"] svg{transform:rotate(180deg)} .ns-theme .nsu__av{ display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none; background:var(--gold-fill);color:#241A05; font-family:var(--display);font-size:14px;font-weight:700;font-style:italic; } .ns-theme .nsu__menu{ position:absolute;right:0;top:calc(100% + 10px);min-width:208px;padding:8px; border-radius:16px;border:1px solid var(--line);background:#fff; box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transform:translateY(-8px); transition:.32s var(--ease);z-index:10; } .ns-theme .nsu.is-open .nsu__menu{opacity:1;visibility:visible;transform:none} .ns-theme .nsu__menu a{ display:block;padding:9px 13px;border-radius:10px;font-size:13.5px;color:var(--muted); transition:background .25s,color .25s; } .ns-theme .nsu__menu a:hover{background:rgba(27,75,150,.07);color:var(--text)} .ns-theme .nsu__out{ margin-top:6px;padding-top:12px !important;border-top:1px solid var(--line); border-radius:0 !important;color:var(--coral) !important;font-weight:600; } .ns-theme .nsu__out:hover{background:rgba(194,69,31,.08) !important;color:var(--coral) !important} @media (max-width:1180px){ .ns-theme .nsu__btn span:not(.nsu__av){display:none} .ns-theme .nsu__btn{padding:6px} .ns-theme .nsu__btn svg{display:none} } @media (max-width:640px){ .ns-theme .nsc{width:38px;height:38px} .ns-theme .nav__actions .btn{padding:11px 16px;font-size:13px} } /* ---------- legacy widgets that still render inside a themed page ---------- */ .ns-theme #cartresult{position:relative;z-index:950} .ns-theme .modal{color:#212529} /* login/forgot modals keep Bootstrap's own colours */ .ns-theme .modal *{box-sizing:border-box} /* ---------- live-data adjustments ---------- */ /* card titles and thumbs are links once they point at a real detail page */ .ns-theme .pcard__thumb{display:grid} .ns-theme .pcard h3 a{color:inherit;transition:color .3s} .ns-theme .pcard:hover h3 a{color:var(--accent)} .ns-theme .pcard__thumb img{width:100%;height:100%;object-fit:cover} /* video-series tiles can carry a real thumbnail */ .ns-theme .vcat__ico{overflow:hidden} .ns-theme .vcat__ico img{width:100%;height:100%;object-fit:cover;border-radius:inherit} /* update bodies come out of the DB as raw HTML - give that prose a house style */ .ns-theme .tlbody{font-size:14.5px;line-height:1.72;color:var(--muted)} .ns-theme .tlbody p{margin:0 0 10px} .ns-theme .tlbody p:last-child{margin-bottom:0} .ns-theme .tlbody a{ display:inline-flex;align-items:center;gap:8px;margin:3px 0;padding:9px 13px; border-radius:11px;border:1px solid var(--line);background:rgba(27,75,150,.05); color:var(--text);font-size:13.5px;font-weight:600;transition:.3s var(--ease); } .ns-theme .tlbody a:hover{background:rgba(27,75,150,.1);border-color:color-mix(in srgb,var(--blue-2) 34%,transparent);transform:translateX(3px)} .ns-theme .tlbody img{max-width:100%;height:auto;border-radius:12px;margin:10px 0} .ns-theme .tlbody ul,.ns-theme .tlbody ol{margin:0 0 10px;padding-left:20px;list-style:revert} .ns-theme .tlcard h3 a{color:inherit;transition:color .3s} .ns-theme .tlcard:hover h3 a{color:var(--blue-2)} /* empty states can carry a link */ .ns-theme .empty a{color:var(--blue-2);font-weight:600;text-decoration:underline} /* a listing with no filter data hides the sidebar and goes full width */ .ns-theme .filters[hidden]{display:none !important} .ns-theme .layout--wide{grid-template-columns:minmax(0,1fr)} /* the legacy login/forgot modals must not inherit the theme's button styling */ .ns-theme .modal .btn{border-radius:.25rem;padding:.375rem .75rem;font-size:1rem;font-weight:400;box-shadow:none} .ns-theme .modal .btn::after{display:none} /* ═══════════════════════════════════════════════════════════ 13. BRAND LOGO The header and footer use the institute's own logo files, not a recreation: colored-logo.png (dark ink) on the light header, and footerlogo.png (light ink) on the dark footer band. These override the SVG-era rules in ns-theme.css. ═══════════════════════════════════════════════════════════ */ body.ns-theme .nslogo{ display:block;height:46px;width:auto;max-width:100%; transition:height .5s var(--ease),opacity .3s; } body.ns-theme .nav.is-stuck .nslogo{height:38px} body.ns-theme .brand:hover .nslogo{opacity:.85} body.ns-theme .brand{flex:none;align-items:center} /* footer band is dark, so the light-ink file is used there */ body.ns-theme .nslogo--foot{height:52px} /* small screens: the lockup is ~4.5:1, so it has to come down to sit beside the cart, login button and burger without wrapping */ @media (max-width:1180px){ body.ns-theme .nslogo{height:40px} } @media (max-width:640px){ body.ns-theme .nslogo{height:30px} body.ns-theme .nslogo--foot{height:42px} } @media (max-width:400px){ body.ns-theme .nslogo{height:26px} } /* ═══════════════════════════════════════════════════════════ 14. OVERRIDES FOR LEGACY !important RULES custom.css carries `a,li,p{font-family:"Nanum Myeongjo",serif!important}`. An !important declaration beats a normal one whatever the load order, so without this every paragraph, list item and link on a themed page would render in that serif instead of the theme face. Matching !important at a higher specificity is the only way to take it back. ═══════════════════════════════════════════════════════════ */ body.ns-theme a, body.ns-theme li, body.ns-theme p{font-family:var(--body) !important} /* headings keep the display face */ body.ns-theme h1,body.ns-theme h2,body.ns-theme h3, body.ns-theme h4,body.ns-theme h5{font-family:var(--display) !important} /* ---------- the project's footer, on the theme's own ground ---------- It used to be a flat #16202b charcoal, then a deep-sapphire band. Both read as a different site from the light blue-grey the rest of the page sits on, so the footer now continues that ground: --paper-3 at the top settling to --paper-2 at the bottom, sapphire type, and a gold hairline across the top edge to mark the boundary (gold as metal, never as body text — the palette rule from styles.css). */ body.ns-theme .footer_sec{ position:relative; background:linear-gradient(180deg,#EDF1F4 0%,#DCE4E9 46%,#D2DCE3 100%); background-attachment:scroll; color:var(--text); border-top:1px solid var(--line); overflow:hidden; } /* brass hairline along the top edge, and one soft warm bloom for depth */ body.ns-theme .footer_sec::after{ content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2; background:linear-gradient(90deg,transparent,#D9B45C 18%,#F3DFA8 50%,#D9B45C 82%,transparent); opacity:.85; } body.ns-theme .footer_sec::before{ content:"";position:absolute;left:-10%;bottom:-34%;width:60vw;height:60vw; pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(217,180,92,.20),transparent 62%);filter:blur(60px); } body.ns-theme .footer_sec > *{position:relative;z-index:1} body.ns-theme .footer_sec .footer_mid{border-bottom:1px solid var(--line)} /* The site-map row carries four columns, not the three .footer_mid is built for. Scoped above 768px because media.css stacks .footer_mid to one column below that and loads earlier, so an unguarded rule would win on phones. */ @media (min-width:769px) and (max-width:1100px){ /* Four tracks here leave the contacts ~146px and every address wraps, so the three link columns take the row and Follow Us spans the one beneath — which keeps phones-left / emails-right intact at every width above mobile. */ body.ns-theme .footer_sec .footer_mid--sitemap{grid-template-columns:repeat(3,minmax(0,1fr))} body.ns-theme .footer_sec .footer_mid--sitemap > .footer_mid_grid:last-child{grid-column:1 / -1;margin-top:6px} } @media (min-width:1101px){ body.ns-theme .footer_sec .footer_mid--sitemap{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2.05fr)} } body.ns-theme .footer_sec .footer_mid_grid h3{ font-family:var(--label) !important; font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink-900); } body.ns-theme .footer_sec p, body.ns-theme .footer_sec li, body.ns-theme .footer_sec td, body.ns-theme .footer_sec span, body.ns-theme .footer_sec a{color:var(--muted)} body.ns-theme .footer_sec .footer_mid_grid ul li a{ font-family:var(--label) !important;font-size:13px;letter-spacing:.01em; transition:color .3s,transform .35s var(--ease);display:inline-block; } body.ns-theme .footer_sec a:hover, body.ns-theme .footer_sec .footer_mid_grid ul li a:hover{color:var(--blue-2);transform:translateX(3px)} body.ns-theme .footer_sec h1,body.ns-theme .footer_sec h2, body.ns-theme .footer_sec h3,body.ns-theme .footer_sec h4, body.ns-theme .footer_sec h5,body.ns-theme .footer_sec strong, body.ns-theme .footer_sec b{color:var(--ink-900)} /* and it should not inherit the theme's card surfaces */ body.ns-theme .footer_sec .white_bg, body.ns-theme .footer_sec .bg_white{background:none;border:0;box-shadow:none} /* social pills, matching .foot__social but on a light ground */ body.ns-theme .footer_sec #socail_share_footer li{padding:0 6px 0 0} body.ns-theme .footer_sec #socail_share_footer li a{ display:grid;place-items:center;width:38px;height:38px;border-radius:50%; background:var(--surface);border:1px solid var(--line-2); box-shadow:var(--sh-sm);transition:.4s var(--ease); } body.ns-theme .footer_sec #socail_share_footer li a:hover{ background:var(--gold-fill);border-color:transparent;transform:translateY(-4px); } body.ns-theme .footer_sec #socail_share_footer li a img{width:18px} /* Contacts read down each column, not across: both phone numbers in the first, both addresses in the second. grid-auto-flow:column with two explicit rows places 1-2 left and 3-4 right without touching the markup order. */ body.ns-theme .footer_sec #contact_details{ display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto); grid-template-columns:auto minmax(0,1fr);gap:4px 32px;margin-top:16px; } body.ns-theme .footer_sec #contact_details li{ display:block;width:auto;padding:0;margin:0;text-align:left;min-width:0; } body.ns-theme .footer_sec #contact_details li a{ display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px; font-family:var(--label) !important;color:var(--text);overflow-wrap:anywhere; } body.ns-theme .footer_sec #contact_details li a:hover{transform:none;color:var(--blue-2)} body.ns-theme .footer_sec #contact_details li a span{ flex:none;width:18px;height:18px;margin:0;display:grid;place-items:center; } body.ns-theme .footer_sec #contact_details li a span img{width:16px;height:16px} body.ns-theme .footer_sec .footer_bottom{border-top:0} body.ns-theme .footer_sec .footer_bottom p{color:var(--faint);font-size:12.5px} body.ns-theme .footer_sec .footer_bottom p a{color:var(--blue-2);font-weight:700} body.ns-theme .footer_sec .footer_bottom p a:hover{color:var(--blue-3)} @media (max-width:640px){ body.ns-theme .footer_sec #contact_details{ grid-auto-flow:row;grid-template-rows:none;grid-template-columns:minmax(0,1fr);gap:2px; } }