/* ========================================================================== Winni Webworks — shared theme Loaded after bootstrap.min.css / styles.min.css on every page so the whole site (not just the homepage) shares one lake-and-logo color system, typography, nav, and footer. Content and markup are untouched; this file only restyles what's already there. ========================================================================== */ /* ---- Fonts (replaces the old Montserrat/Kaushan Script/Roboto Slab mix) ---- */ /* Add this link to alongside this stylesheet: https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap */ :root, [data-bs-theme="light"] { /* Bootstrap variable overrides -- these cascade into every .btn-*, .text-*, .bg-*, .border-*, .form-control, badge, and icon on every page. */ --bs-primary: #1c9db3; --bs-primary-rgb: 28, 157, 179; --bs-primary-text-emphasis: #0f5865; --bs-primary-bg-subtle: #dcf1f4; --bs-primary-border-subtle: #a9dde6; --bs-secondary: #0a1930; --bs-secondary-rgb: 10, 25, 48; --bs-dark: #0b1f33; --bs-dark-rgb: 11, 31, 51; --bs-light: #eef6f7; --bs-light-rgb: 238, 246, 247; --bs-warning: #2fc4d6; --bs-warning-rgb: 47, 196, 214; --bs-info-text-emphasis: #0a1930; --bs-body-bg: #eef6f7; --bs-body-color: #16324a; --bs-link-color: #1c9db3; --bs-link-color-rgb: 28, 157, 179; --bs-link-hover-color: #0f5865; --bs-link-hover-color-rgb: 15, 88, 101; --bs-border-color: #d6e5e9; /* Our own tokens (same palette as the homepage) */ --ink: #0b1f33; --ink-soft: #4c6474; --aqua: #1c9db3; --aqua-bright: #2fc4d6; --aqua-soft: rgba(28, 157, 179, 0.12); --navy: #0a1930; --navy-2: #0f2542; --line: #d6e5e9; --surface: #ffffff; --surface-2: #e3f0f2; } /* ---- Base typography ---- */ html, body { font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif; background-color: var(--bs-body-bg) !important; color: var(--ink) !important; } h1, h2, h3, h4, h5, h6, .section-heading, .card-title, .navbar-brand, .intro-heading, .card-subtitle { font-family: "Fraunces", Georgia, "Times New Roman", serif !important; font-weight: 500 !important; } a { color: var(--aqua); } a:hover, a:focus { color: var(--navy-2); } /* Small uppercase "kicker" text (subheadings, nav, footer links) */ .section-subheading { font-family: "IBM Plex Mono", ui-monospace, monospace !important; letter-spacing: 0.06em; } /* ---- Section heading color: white only where it still sits on a dark/photo background (the homepage hero); everywhere else (now light) it's ink. ---- */ .section-heading { color: var(--ink) !important; } .masthead .section-heading, .masthead .intro-heading, .masthead h1, .masthead p { color: #fff !important; } /* ---- Nav ---- */ #mainNav { background: linear-gradient(180deg, rgba(8, 20, 36, 0.38), rgba(8, 20, 36, 0)) !important; transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; } #mainNav.navbar-shrink { background: #ffffff !important; box-shadow: 0 10px 30px -18px rgba(10, 25, 48, 0.28) !important; } #mainNav .navbar-brand { display: inline-flex; align-items: center; gap: 10px; color: #ffffff !important; font-size: 1.05rem !important; } #mainNav.navbar-shrink .navbar-brand { color: var(--ink) !important; } #mainNav .navbar-brand .brand-mark { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1.5px var(--aqua-bright); display: inline-block; } #mainNav .navbar-brand .brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } #mainNav .nav-link, #mainNav .dropdown-toggle { color: rgba(255, 255, 255, 0.88) !important; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.06em; } #mainNav.navbar-shrink .nav-link, #mainNav.navbar-shrink .dropdown-toggle { color: var(--ink) !important; } #mainNav .nav-link:hover, #mainNav .dropdown-toggle:hover, #mainNav .dropdown-item:hover { color: var(--aqua-bright) !important; } #mainNav.navbar-shrink .nav-link:hover, #mainNav.navbar-shrink .dropdown-toggle:hover { color: var(--aqua) !important; } #mainNav .navbar-toggler { color: #fff !important; background-color: transparent !important; border-color: rgba(255, 255, 255, 0.4) !important; } #mainNav.navbar-shrink .navbar-toggler { color: var(--ink) !important; background-color: transparent !important; border-color: var(--line) !important; } /* ---- Mobile menu: the expanded .navbar-collapse had no background of its own, so page content showed through behind the open menu items. ---- */ @media (max-width: 991.98px) { #mainNav #navbarResponsive.show, #mainNav #navbarResponsive.collapsing { background: var(--navy); padding: 14px 18px 20px; border-radius: 10px; margin-top: 10px; } #mainNav.navbar-shrink #navbarResponsive.show, #mainNav.navbar-shrink #navbarResponsive.collapsing { background: #ffffff; box-shadow: 0 16px 34px -18px rgba(10, 25, 48, 0.35); } #mainNav .navbar-nav .nav-item { padding: 4px 0; } } .dropdown-menu { background: #ffffff !important; border: 1px solid var(--line) !important; box-shadow: 0 20px 40px -20px rgba(10, 25, 48, 0.3); } .dropdown-item { color: var(--ink) !important; } .dropdown-item:hover, .dropdown-item:focus { background: var(--aqua-soft) !important; color: var(--aqua) !important; } /* ---- Buttons ---- */ .btn-primary { color: #ffffff !important; background-color: var(--aqua) !important; border-color: var(--aqua) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--navy) !important; border-color: var(--navy) !important; color: #ffffff !important; } .btn-outline-primary { color: var(--aqua) !important; border-color: var(--aqua) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--aqua) !important; color: #ffffff !important; } /* ---- Cards & forms ---- */ .card { border-color: var(--line); box-shadow: 0 1px 3px rgba(10, 25, 48, 0.06); } .card.border-primary { border-color: var(--aqua) !important; } .form-control, .form-select { background-color: #ffffff !important; border: 1.5px solid rgba(28, 157, 179, 0.35) !important; color: var(--ink) !important; } .form-control:focus, .form-select:focus { border-color: var(--aqua) !important; box-shadow: 0 0 0 3px var(--aqua-soft) !important; } /* ---- #contact quote/inquiry sections (homepage + every standalone form page) ---- */ #contact { background-color: var(--bs-body-bg) !important; background-image: none; } #contact .section-subheading { color: var(--aqua) !important; } #contact p, #contact label { color: var(--ink-soft) !important; } /* ---- Footer ---- */ footer { background: var(--surface-2) !important; color: var(--ink-soft) !important; border-top: 1px solid var(--line); padding: 40px 0; } footer .copyright { color: var(--ink-soft); } footer .social-buttons a { color: var(--ink-soft); border: 1px solid var(--line); border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; } footer .social-buttons a:hover { color: var(--aqua) !important; border-color: var(--aqua) !important; } footer .quicklinks a { color: var(--ink-soft); font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; letter-spacing: 0.04em; } footer .quicklinks a:hover { color: var(--aqua) !important; } /* ---- Bootstrap ships a second, hardcoded "#fed136 !important" rule for .text-primary later in the same stylesheet, which beats the variable-based rule above. Override it directly so icons that rely on .text-primary (service icon circles, etc.) pick up the new palette. ---- */ .text-primary { color: var(--aqua) !important; } /* ---- Portfolio hover overlay: also a hardcoded rgba(254,209,54,.9) in Bootstrap, not variable-driven. ---- */ .portfolio-hover { background: rgba(28, 157, 179, 0.92) !important; } .portfolio-hover-content { color: #fff !important; } /* ---- Uniform portfolio card sizing (image + caption match across cards, regardless of each source image's original aspect ratio) ---- */ .portfolio-item { display: flex; flex-direction: column; } .portfolio-item .portfolio-link { display: block; width: 100%; max-width: 400px; margin: 0 auto; } .portfolio-item .portfolio-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .portfolio-item .portfolio-caption { width: 100%; max-width: 400px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 150px; } /* ---- Text selection highlight (was the old gold) ---- */ ::selection { background: #2fc4d6; color: #0b1f33; } /* ---- A few pages hardcode literal legacy colors inline; catch those too ---- */ [style*="096d81"] { background: var(--navy) !important; } [style*="254, 209, 54"], [style*="254,209,54"] { background: var(--aqua) !important; color: #fff !important; } [style*="255, 246, 215"], [style*="255,246,215"] { background: var(--bs-body-bg) !important; }