/* AI Design Studio — shared tool navigation header Anant National University identity: blue #0779BC, gold #F2B01E, Barlow + Open Sans. Self-contained. Drop into any AI Club tool; set to light the current location. Placeholder URLs live in data-placeholder-url — swap into href when the tools deploy. */ @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap'); .aiclub-nav { --nav-blue: #0779BC; --nav-blue-d:#055A8E; --nav-gold: #F2B01E; --nav-ink: #14181C; --nav-slate: #566470; --nav-line: #DCE3E9; position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 28px; padding: 0 clamp(16px, 4vw, 40px); height: 62px; background: #FFFFFF; border-bottom: 1px solid var(--nav-line); box-shadow: 0 1px 0 0 var(--nav-gold); /* the gold hairline */ font-family: 'Open Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; } /* brand lockup ---------------------------------------------------------- */ .aiclub-nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; } .aiclub-nav__mark { display: block; width: 30px; height: 30px; } .aiclub-nav__word { font-family: 'Barlow', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.2px; color: var(--nav-ink); line-height: 1; } .aiclub-nav__word b { color: var(--nav-blue); font-weight: 800; } /* links ----------------------------------------------------------------- */ .aiclub-nav__links { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; /* push links to the right */ padding: 0; list-style: none; } .aiclub-nav__link { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 8px; text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--nav-slate); white-space: nowrap; transition: color .16s ease, background .16s ease; } .aiclub-nav__link:hover { color: var(--nav-blue-d); background: #F1F7FC; } .aiclub-nav__link:focus-visible { outline: 2px solid var(--nav-blue); outline-offset: 2px; } /* the active-location marker: a small gold square + blue label + gold underline. Mirrors the theme's gold-square bullet, so the header reads as one family. */ .aiclub-nav__link::before { content: ''; width: 8px; height: 8px; border-radius: 1px; background: transparent; transition: background .16s ease; } .aiclub-nav__link[aria-current="page"] { color: var(--nav-blue); background: #E9F3FB; } .aiclub-nav__link[aria-current="page"]::before { background: var(--nav-gold); } /* mobile ---------------------------------------------------------------- */ @media (max-width: 720px) { .aiclub-nav { gap: 12px; height: 56px; } .aiclub-nav__word { font-size: 15px; } .aiclub-nav__links { gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .aiclub-nav__links::-webkit-scrollbar { display: none; } .aiclub-nav__link { padding: 7px 10px; font-size: 13.5px; } .aiclub-nav__link::before { display: none; } /* room on small screens */ .aiclub-nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 0 var(--nav-gold); } } @media (prefers-reduced-motion: reduce) { .aiclub-nav__link { transition: none; } }