@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Instrument+Sans:wght@400;500;600;700&display=swap"); /* ============================================================================ SMU MITROVICË — DOCUMENT & STAFF BROWSERS ---------------------------------------------------------------------------- Loaded AFTER Content/Rregulloret/style.css by the only two views that use it, both of which open in a new tab from the public menu: Views/RregulloretPublic/Index.cshtml (Rregulloret) Views/AcademicAnnex/AllStaff/Index.cshtml (Stafi akademik) Those two sit on _LayoutStaff.cshtml — a third shell, unrelated to the public site — and so looked like a different product entirely. Rather than move them onto the public layout (their sidebar + AJAX #content is built on their own jQuery/Bootstrap bundle and would have to be rewritten), this sheet re-skins them in the same "PAPER & PINE" identity: ivory paper, pine sidebar, one coral accent, Fraunces over Instrument Sans, and the arch cut from the SMU mark's portico. Light and dark are driven by the same mechanism as the rest of the site — Scripts/smu-theme.js and data-theme on — so the switch follows the visitor across from the public pages. Tokens only. The sidebar layout itself is kept: for a document browser it is the right shape, and #sidebar / #content / .components li.active are bound by Content/Rregulloret/main.js and the views' own loadDocs()/loadStaff(). ========================================================================== */ :root { --d-bg: #F8F5EE; --d-paper: #FFFDF9; --d-surface: #F0EBE0; --d-line: #E0D8C7; --d-ink: #1A211C; --d-heading: #101613; --d-muted: #5A6660; --d-pine: #0C3A2D; --d-pine-900: #07271E; --d-coral: #E0563D; --d-coral-solid: #C9482F; --d-coral-ink: #B23A22; --d-coral-bright: #FF8A6E; --d-arch: 999px 999px 0 0; --d-r: 10px; --d-r-lg: 18px; --d-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --d-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --d-ease: cubic-bezier(.22, .61, .36, 1); } :root[data-theme="dark"] { --d-bg: #0A1210; --d-paper: #101B17; --d-surface: #16241F; --d-line: rgba(255, 255, 255, .12); --d-ink: #E7EFEA; --d-heading: #F2F8F4; --d-muted: #A3B2AA; --d-coral-ink: #FF8A6E; } /* ------------------------------------------------------------------ BASE */ html { background: var(--d-bg); } body { background: var(--d-bg); color: var(--d-ink); font-family: var(--d-sans); font-size: 15.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; } body h1, body h2, body h3, body h4, body h5 { font-family: var(--d-serif); letter-spacing: -.028em; color: var(--d-heading); } a { color: var(--d-coral-ink); transition: color .2s var(--d-ease); } a:hover, a:focus { color: var(--d-coral); text-decoration: none; } :focus-visible { outline: 2px solid var(--d-coral); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------------- SIDEBAR */ #sidebar { position: relative; isolation: isolate; overflow: hidden; min-width: 288px; max-width: 288px; background: var(--d-pine); color: #FFFFFF; } /* the portico arch, quiet, at the foot of the rail */ #sidebar::after { content: ""; position: absolute; left: -28%; bottom: -14%; z-index: -1; width: 150%; aspect-ratio: 0.85; border: 1px solid rgba(255, 255, 255, .1); border-bottom: 0; border-radius: var(--d-arch); pointer-events: none; } #sidebar::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(72% 42% at 92% 2%, rgba(224, 86, 61, .26) 0%, rgba(224, 86, 61, 0) 64%); } #sidebar h1 { margin-bottom: 26px; font-family: var(--d-serif); font-size: 26px !important; /* the staff view sets font-size inline */ font-weight: 700; letter-spacing: -.035em; line-height: 1.15; } #sidebar h1 .logo, #sidebar .h6 { color: #FFFFFF; } #sidebar h1 .logo span { color: var(--d-coral-bright); } #sidebar ul.components { padding: 0; } #sidebar ul li { font-size: 14.5px; } #sidebar ul li a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-bottom: 1px solid rgba(255, 255, 255, .09); border-radius: 0; color: rgba(255, 255, 255, .74); font-weight: 500; transition: background-color .2s var(--d-ease), color .2s var(--d-ease), padding-left .2s var(--d-ease); } #sidebar ul li a span { color: rgba(255, 255, 255, .5); transition: color .2s var(--d-ease); } #sidebar ul li a:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; padding-left: 17px; } #sidebar ul li a:hover span { color: var(--d-coral-bright); } #sidebar ul li.active > a { position: relative; background: rgba(255, 255, 255, .1); color: #FFFFFF; font-weight: 600; } #sidebar ul li.active > a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--d-coral); } #sidebar ul li.active > a span { color: var(--d-coral-bright); } /* the language flags and copyright at the foot of the rail */ #sidebar .footer p { font-size: 12px; color: rgba(255, 255, 255, .55); } #sidebar .footer img { border-radius: 4px; opacity: .8; transition: opacity .2s var(--d-ease); } #sidebar .footer a:hover img { opacity: 1; } /* ---- the collapse control ---- The visible shape is NOT the button: style.css sets `.btn.btn-primary { background: transparent }` and paints the diamond on a `::after` rotated 45deg, in #3e5889. Setting a background on the button itself therefore did nothing except cast a rectangular shadow behind a transparent element — the colour has to go on the pseudo-element. */ #sidebar .custom-menu .btn, #sidebarCollapse { border: 0; background: transparent; box-shadow: none; color: #FFFFFF; } #sidebar .custom-menu .btn.btn-primary::after, #sidebarCollapse::after { background: var(--d-coral-solid); border-radius: var(--d-r); } #sidebar .custom-menu .btn.btn-primary:hover::after, #sidebar .custom-menu .btn.btn-primary:focus::after, #sidebarCollapse:hover::after { background: var(--d-coral); } #sidebar .custom-menu .btn:hover, #sidebar .custom-menu .btn:focus, #sidebarCollapse:hover { background: transparent; color: #FFFFFF; } /* ------------------------------------------------------------- CONTENT */ #content { background: var(--d-bg); color: var(--d-ink); } #content h1, #content h2, #content h3, #content h4 { color: var(--d-heading); } /* ============================================================================ THE STAFF DIRECTORY (AllStaff/_Search) ---------------------------------------------------------------------------- The partial used to ship its own