/* FlyingMinds brand lockup — one source for the logo everywhere. * * Mirrors the home page / dashboard nav (views/partials/navbar.ejs): the round gold * badge with the winged screen (/flymind-fred.png) inside a white ring, then * "Flying" in white and "Minds" in gold, Fraunces bold. Fred is shown as that same * badge, never as an owl. Page stylesheets once coloured ".logo span" pink, so the * few properties that define the lockup are marked !important. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&display=swap'); .fm-brand { display: inline-flex !important; align-items: center; gap: 10px; text-decoration: none !important; line-height: 1; /* some lesson top bars style every link as a boxed button */ background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } .fm-brand-mark { width: 34px; height: 34px; border-radius: 50%; background: #fcc162; border: 2.5px solid #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; box-sizing: border-box; transition: transform 0.25s ease; } .fm-brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .fm-brand:hover .fm-brand-mark { transform: rotate(-15deg) scale(1.1); } .fm-brand-name { font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important; font-weight: 700 !important; font-size: 20px !important; color: #fff !important; white-space: nowrap; letter-spacing: 0; } .fm-brand-minds { color: #fcc162 !important; } /* Fred's avatar and inline mentions use the same badge. */ .fm-fred-mark { width: 44px; height: 44px; border-radius: 50%; background: #fcc162; border: 2.5px solid #fff; object-fit: cover; display: block; box-sizing: border-box; } .fm-fred-inline { width: 1.25em; height: 1.25em; border-radius: 50%; background: #fcc162; object-fit: cover; vertical-align: -0.3em; display: inline-block; margin-right: 0.2em; } @media (max-width: 480px) { .fm-brand-mark { width: 30px; height: 30px; } .fm-brand-name { font-size: 18px !important; } } @media (prefers-reduced-motion: reduce) { .fm-brand-mark { transition: none; } .fm-brand:hover .fm-brand-mark { transform: none; } } /* Dark top bar for pages whose own header is light (hubs, resources): the logo * always sits on the same dark ground as the home page and lesson pages. */ .fm-topbar { background: #1a1208; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 32px; box-sizing: border-box; width: 100%; } .fm-topbar-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .fm-topbar-links a { color: #f3e9d6 !important; font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none !important; } .fm-topbar-links a:hover, .fm-topbar-links a:focus-visible { color: #fcc162 !important; } @media (max-width: 480px) { .fm-topbar { padding: 12px 16px; } } /* Pages whose is a centered, padded column: let the bar reach both edges. */ .fm-topbar--bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: calc(-1 * var(--fm-body-pad, 24px)); margin-bottom: var(--fm-body-pad, 24px); padding-left: max(32px, calc(50vw - 550px)); padding-right: max(32px, calc(50vw - 550px)); } /* Inside a white card (password pages): a rounded dark band at the top of the card. */ .fm-topbar--card { border-radius: 14px; padding: 12px 18px; margin-bottom: 24px; }