/* ============================================================= GIGBUILDER HOSTING — SOGo theme overlay Loaded via sub_filter on every webmail..com response AND on sogo.gigbuilder.com via /etc/nginx/conf.d/sogo.conf. Brand: deep navy (#0f3a6b), primary blue (#2a6fb5), warm amber (#f59e0b). Fonts: IBM Plex Sans (UI/body), Fraunces (display). SOGo login DOM (verified 2026-05-05):

============================================================= */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap"); :root { --gb-blue-deep: #0f3a6b; --gb-blue: #2a6fb5; --gb-blue-bright: #3d8ce0; --gb-amber: #f59e0b; --gb-ink: #0a1628; --gb-ink-2: #1c2735; --gb-line: #d9e1ec; --gb-paper: #ffffff; --gb-muted: #6b7c93; --serif: "Fraunces", "Times New Roman", Georgia, serif; --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ===== GLOBAL TYPOGRAPHY ===== */ body, html, body.md-default-theme, body.main, .md-button, .md-toolbar-tools, md-input-container input, md-input-container label, md-list-item, md-virtual-repeat-container, input, button, select, textarea { font-family: var(--sans) !important; } /* ===== LOGIN PAGE — full-bleed hero background ===== */ /* Scoped to login pages only via :has(.sg-login) so the hero doesn't bleed into the post-login app (which also has body.main). */ body.main:has(.sg-login) { background: linear-gradient(120deg, rgba(8, 16, 32, 0.92) 0%, rgba(8, 16, 32, 0.72) 35%, rgba(8, 16, 32, 0.45) 60%, rgba(8, 16, 32, 0.78) 100%), url("https://host2.gigbuilder.com/img/gigbuilder-hosting-hero-dj.webp") center/cover no-repeat fixed, var(--gb-ink) !important; min-height: 100vh; margin: 0; } /* On the login page only, make wrappers transparent so the hero shows through */ body.main:has(.sg-login) > main.view, body.main:has(.sg-login) > main.md-background, body.main:has(.sg-login) > main { background: transparent !important; min-height: 100vh; } body.main:has(.sg-login) main md-content, body.main:has(.sg-login) md-content._md { background: transparent !important; } /* The split-card wrapper — collapse to single centered card */ body.main .md-whiteframe-3dp.layout-gt-md-row, body.main .md-whiteframe-3dp { background: transparent !important; box-shadow: none !important; flex-direction: column !important; max-width: 460px !important; margin: 0 auto !important; border-radius: 0 !important; overflow: visible !important; } /* Hide the white left panel entirely (the one with the tiny 'Gb' logo) */ body.main .md-whiteframe-3dp > div:not(.sg-login):not([class*="md-bg"]) { display: none !important; } /* The green right panel — kill the green, make it our card */ body.main .sg-login, body.main .sg-login.md-bg.md-accent, body.main div.sg-login { background: rgba(255, 255, 255, 0.97) !important; background-color: rgba(255, 255, 255, 0.97) !important; color: var(--gb-ink) !important; flex: 0 0 auto !important; width: 100% !important; max-width: 460px !important; padding: 40px 36px !important; border-radius: 18px !important; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; } /* Insert Gigbuilder Hosting logo + welcome heading at top of card. Pseudo-elements render in DOM order, so ::before goes before form content. We pack BOTH the logo (as background-image) AND the heading text into one ::before block. */ body.main .sg-login::before { content: "Sign in to your inbox"; display: block; padding-top: 70px; margin: 0 0 24px; background-image: url("https://host2.gigbuilder.com/img/gigbuilder-hosting-logo-color.png"); background-position: top center; background-size: auto 54px; background-repeat: no-repeat; font-family: var(--serif); font-size: 1.4rem; font-weight: 500; text-align: center; color: var(--gb-ink); letter-spacing: -0.01em; line-height: 1.2; } /* Use ::after for the bottom microcopy line */ body.main .sg-login::after { content: "Use your full email address as the username."; display: block; font-family: var(--sans); font-size: 0.82rem; text-align: center; color: var(--gb-muted); margin-top: 18px; letter-spacing: 0; } /* SOGo's own logo image inside the card — hide if present */ body.main .sg-login img[src*="sogo"], body.main img[src*="sogo-full.svg"], body.main img[src*="sogo-compact.svg"], body.main img[src*="sogo-logo"] { display: none !important; } /* Form labels */ body.main .sg-login md-input-container label, body.main .sg-login label { font-family: var(--sans) !important; color: var(--gb-muted) !important; font-weight: 500 !important; } /* Input fields */ body.main .sg-login md-input-container .md-input, body.main .sg-login md-input-container input, body.main .sg-login input[type="text"], body.main .sg-login input[type="password"] { font-family: var(--sans) !important; color: var(--gb-ink) !important; font-size: 1rem !important; border-color: var(--gb-line) !important; } body.main .sg-login md-input-container.md-input-focused .md-input, body.main .sg-login md-input-container:not(.md-input-invalid).md-input-focused .md-input { border-color: var(--gb-blue) !important; } body.main .sg-login md-input-container.md-input-focused label, body.main .sg-login md-input-container:not(.md-input-invalid).md-input-focused label { color: var(--gb-blue) !important; } /* Input field icons (person, key, language) — Gigbuilder blue */ body.main .sg-login md-input-container > md-icon, body.main .sg-login md-icon { color: var(--gb-blue) !important; } /* Hide the (i) info icon button entirely */ body.main .sg-login .md-icon-button, body.main .sg-login md-button.md-icon-button { display: none !important; } /* Primary submit button — turn the round FAB into a proper wide "Sign In" pill */ body.main .sg-login .md-button.md-fab, body.main .sg-login button.md-fab, body.main .sg-login md-button.md-fab, body.main .md-fab.md-primary { /* Reshape from circle to full-width pill */ background: linear-gradient(135deg, var(--gb-amber) 0%, #fbb03b 100%) !important; background-color: var(--gb-amber) !important; color: var(--gb-ink) !important; box-shadow: 0 10px 24px rgba(245, 158, 11, 0.40) !important; width: 100% !important; max-width: 100% !important; height: 52px !important; min-height: 52px !important; line-height: 52px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 0 28px !important; margin: 0 !important; font-family: var(--sans) !important; font-size: 1rem !important; font-weight: 600 !important; letter-spacing: 0.01em; text-transform: none !important; transition: transform 0.1s, box-shadow 0.2s, filter 0.2s !important; position: relative; } body.main .sg-login .md-button.md-fab:hover, body.main .md-fab.md-primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(245, 158, 11, 0.55) !important; } body.main .sg-login .md-button.md-fab:active, body.main .md-fab.md-primary:active { transform: translateY(0); } /* Add "Sign In" text label before the existing arrow icon */ body.main .sg-login .md-button.md-fab::before, body.main .md-fab.md-primary::before { content: "Sign In"; display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--gb-ink); letter-spacing: 0.01em; } /* Tighten the embedded arrow icon */ body.main .sg-login .md-button.md-fab md-icon, body.main .sg-login .md-button.md-fab svg, body.main .md-fab.md-primary md-icon { color: var(--gb-ink) !important; fill: var(--gb-ink) !important; width: 18px !important; height: 18px !important; font-size: 18px !important; margin: 0 !important; } /* Wrapper around the FAB inside the form row — center it */ body.main .sg-login [layout="row"]:has(> .md-fab), body.main .sg-login [layout="row"]:has(> md-button.md-fab), body.main .sg-login div[layout="row"] { width: 100%; margin-top: 8px; display: flex !important; justify-content: center !important; align-items: center !important; } /* The button itself: don't span full width, just center it */ body.main .sg-login .md-button.md-fab, body.main .sg-login button.md-fab, body.main .sg-login md-button.md-fab, body.main .md-fab.md-primary { width: auto !important; min-width: 200px !important; margin: 0 auto !important; } /* "Remember username" toggle — Gigbuilder blue */ body.main md-switch.md-checked .md-thumb { background-color: var(--gb-blue) !important; } body.main md-switch.md-checked .md-bar { background-color: rgba(42,111,181,0.4) !important; } /* Footer line under the card — login page only */ body.main:has(.sg-login) main::after { content: "Gigbuilder Hosting • Secure email hosted in the United States"; position: fixed; bottom: 22px; left: 0; right: 0; text-align: center; font-family: var(--sans); font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em; pointer-events: none; z-index: 100; } /* ===== POST-LOGIN: GIGBUILDER COLORS THROUGHOUT THE APP ===== */ /* Top toolbars */ md-toolbar:not(.md-menu-toolbar), md-toolbar.md-default-theme:not(.md-menu-toolbar), .md-toolbar-tools { background: var(--gb-blue-deep) !important; color: #fff !important; } /* SOGo's teal/green primary → Gigbuilder blue */ [style*="background-color:rgb(99,153,151)"], [style*="background-color:rgb(77,128,128)"], [style*="background-color:rgb(86, 176, 76)"], [style*="background-color:rgb(86,176,76)"] { background-color: var(--gb-blue) !important; } /* Buttons */ .md-button.md-primary.md-raised:not([disabled]), .md-button.md-primary.md-fab:not([disabled]), button.md-primary.md-raised, md-button.md-primary.md-raised:not([disabled]) { background: var(--gb-blue) !important; color: #fff !important; } .md-button.md-primary.md-raised:not([disabled]):hover, .md-button.md-primary.md-fab:not([disabled]):hover { background: var(--gb-blue-deep) !important; } /* Tab indicator + active label */ md-tabs md-ink-bar, .md-default-theme md-ink-bar { background-color: var(--gb-blue) !important; } md-tabs-canvas md-tab-item.md-active md-tab-label { color: var(--gb-blue) !important; } /* Input focus accent (post-login forms too) */ md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused .md-input, md-input-container:not(.md-input-invalid).md-input-focused .md-input { border-color: var(--gb-blue) !important; } md-input-container.md-default-theme:not(.md-input-invalid).md-input-focused label, md-input-container:not(.md-input-invalid).md-input-focused label { color: var(--gb-blue) !important; } /* Checkboxes / radios */ md-checkbox.md-checked .md-icon, md-radio-button.md-checked .md-on { background-color: var(--gb-blue) !important; border-color: var(--gb-blue) !important; } /* Side nav selected mailbox */ md-list-item.md-selected, md-list-item._md-button-wrap.md-selected, md-list-item.md-selected > .md-button._md-no-style { background-color: rgba(42, 111, 181, 0.10) !important; border-left: 3px solid var(--gb-blue) !important; } /* Unread message accent */ md-list-item.unread .subject, md-virtual-repeat-container .unread .subject { color: var(--gb-blue-deep) !important; font-weight: 600 !important; } /* Replace SOGo logo in toolbar with Gigbuilder mark */ img[src*="sogo-full.svg"], img[src*="sogo-compact.svg"], img[src*="sogo-logo.png"] { content: url("https://host2.gigbuilder.com/img/gigbuilder-hosting-logo-white.png") !important; max-height: 32px; width: auto; } /* Modals / dialogs */ md-dialog.md-default-theme, md-dialog { border-radius: 14px !important; box-shadow: 0 30px 80px -20px rgba(15, 58, 107, 0.4) !important; } /* Page bg post-login — apply to any page WITHOUT .sg-login (i.e. all the real app screens: mailboxes, calendar, contacts, settings, etc.). */ body.main:not(:has(.sg-login)) { background: #f5f7fb !important; } body.main:not(:has(.sg-login)) md-content, body.main:not(:has(.sg-login)) md-sidenav, body.main:not(:has(.sg-login)) main.view, body.main:not(:has(.sg-login)) main.md-background { background: #f5f7fb !important; } /* Mailbox message list, message viewer — solid white panels */ body.main:not(:has(.sg-login)) md-list, body.main:not(:has(.sg-login)) .md-virtual-repeat-container, body.main:not(:has(.sg-login)) md-card, body.main:not(:has(.sg-login)) .md-whiteframe-1dp { background: #ffffff !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }