/* * nmcr-theme.css * New Morning Coffee Roasters — color overrides layered on top of Astrum's gray.css * * gray.css sets the primary accent to #505050 (charcoal). * This file swaps interactive accents to the logo's gold (#F5B731) * and adjusts the footer to use the dark style by default. * * Load order in : * 1. css/style.css * 2. css/colors/gray.css * 3. css/nmcr-theme.css ← this file */ /* ================================================================ Brand colors (reference only — not used by CSS vars in Astrum) ================================================================ Gold: #F5B731 Gold dark: #C9920A Gray: #505050 (from gray.css — kept as-is for text/icons) ================================================================ */ /* ---- Logo sizing ---- */ #logo a img { height: 44px; } @media only screen and (max-width: 767px) { #logo a img { height: auto; width: 140px; } } /* ---- Remove all bottom border / shadow from nav header ---- */ #header, #header.compact { box-shadow: none !important; -webkit-box-shadow: none !important; border-bottom: none !important; border: none !important; } /* ---- Nav bottom padding controlled via custom.js defMenuPaddingTop/Bottom values ---- */ /* Remove the structural transparent border-bottom that creates the visible line */ .menu ul > li > a, body #current, body .menu ul li a:hover, body .menu ul > li:hover > a { border-bottom: none !important; border-bottom-width: 0 !important; } /* Kill ALL transitions on nav links to prevent jump on hover in/out */ .menu ul li a, .menu ul > li > a { transition: none !important; -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; } /* Fix dropdown top margin — was -3px to compensate for border, no longer needed */ .menu ul ul { margin-top: -3px !important; transition: none !important; animation: none !important; display: none; } /* Override superfish show/hide with CSS — avoids jQuery height animation causing jump */ .menu ul li:hover > ul { display: block !important; opacity: 1 !important; height: auto !important; visibility: visible !important; } /* Kill the gray bottom border and diamond — gray.css sets border-color:#505050 We use body prefix to beat gray.css specificity without !important abuse */ body #current, body .menu ul li a:hover, body .menu ul > li:hover > a { border-bottom: 3px solid transparent !important; background-color: transparent !important; } body #current:after { display: none !important; } /* ---- Page background: white ---- */ body, #content-wrapper { background: #fff !important; } /* ---- Panel backgrounds: white; tiles: light gray ---- */ .panel-intro { background: #fff !important; } .page-cards-section { background: #fff !important; } .page-card-box { background: #f8f8f8 !important; border-top: 4px solid #f8f8f8; border-radius: 4px; padding: 28px 22px 24px; margin: 0 0 24px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.28s ease, box-shadow 0.28s ease, border-top-color 0.28s ease; } /* ---- Nav hover/active accent: gold instead of gray ---- */ body #current, body .menu ul li a:hover, body .menu ul > li:hover > a { border-bottom: 3px solid #F5B731 !important; } .menu ul ul { border-top-color: #F5B731 !important; } #current:after { background: #F5B731 !important; } /* ---- Featured box hover circles: gold ---- */ .featured-box:hover > .circle, .featured-box:hover > .circle span, .featured-box:hover > .circle-2, .featured-box:hover > .circle-3 { background-color: #F5B731 !important; } .featured-box:hover > .circle i { color: #fff !important; } .featured-box:hover > .circle-2, .featured-box:hover > .circle-3 { box-shadow: 0 0 0 8px rgba(245, 183, 49, 0.25) !important; } /* ---- Buttons / form submits: gold ---- */ .button.color, a.button.color, input[type="button"], input[type="submit"], .newsletter-btn, .search-btn { background-color: #F5B731 !important; background: #F5B731 !important; color: #3a3a3a !important; border-color: #F5B731 !important; } .button.color:hover, a.button.color:hover, input[type="button"]:hover, input[type="submit"]:hover, .newsletter-btn:hover, .search-btn:hover { background-color: #C9920A !important; background: #C9920A !important; color: #fff !important; border-color: #C9920A !important; } /* ---- Pagination / tags: gold ---- */ #current:after, .pagination .current, .pagination ul li a:hover, .tags a:hover, .skill-bar-value, .highlight.color, .notice-box:hover, .tabs-nav li.active a, .ui-accordion .ui-accordion-header-active, .trigger.active a { background: #F5B731 !important; color: #3a3a3a !important; } /* ---- Links: gold — scoped to body content, NOT nav, footer, or toggle triggers ---- */ #content-wrapper a:not(.button):not(.trigger a), #content-wrapper a:not(.button):not(.trigger a):visited { color: #C9920A !important; } #content-wrapper a:not(.button):not(.trigger a):hover { color: #F5B731 !important; } /* Nav links stay gray (Astrum default) */ #navigation a, #navigation a:visited, #navigation a:hover, #jPanelMenu-menu a, #jPanelMenu-menu a:visited, #jPanelMenu-menu a:hover { color: #888 !important; border-color: inherit; } /* Footer links — darker than Astrum default #888 */ #footer .get-in-touch a, #footer .get-in-touch p, #footer .get-in-touch li, #footer p, #footer a, #footer a:visited { color: #555 !important; } #footer a:hover { color: #333 !important; } #footer h3 { color: #333; } /* Force four footer columns to share the row equally using percentages */ #footer .four.columns { width: 22% !important; margin-left: 1.5% !important; margin-right: 1.5% !important; } /* ---- Filters ---- */ #filters a:hover, .selected { background-color: #F5B731 !important; color: #3a3a3a !important; } /* ================================================================ AUDIENCE TOGGLE — custom component, sits inside #content-wrapper ================================================================ */ #audience-hero { background: url('../images/hero1.jpg') center center / cover no-repeat; padding: 72px 0 90px; min-height: 480px; text-align: center; position: relative; overflow: hidden; } /* Dark overlay so toggle and logo read clearly over the photo */ #audience-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52); pointer-events: none; } #audience-hero::after { display: none; } #audience-hero .container { position: relative; z-index: 1; } /* ---- Hero logo ---- */ .hero-logo-wrap { margin-bottom: 38px; } .hero-logo { display: block; margin: 0 auto; height: 160px; width: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.55)); } @media only screen and (max-width: 767px) { #audience-hero { background-position: center center; padding: 52px 0 70px; } .hero-logo { height: 110px; } } /* The toggle pill */ .audience-toggle-wrap { display: inline-block; position: relative; z-index: 1; background: rgba(255,255,255,0.92); border-radius: 30px; padding: 16px 20px 20px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); } .toggle-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #888; margin-bottom: 14px; } .audience-toggle { display: inline-flex; background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 50px; padding: 5px; gap: 4px; } .toggle-btn { padding: 14px 38px; border-radius: 50px; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; border: none; background: transparent; color: #666; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .toggle-btn.active { background: #F5B731; color: #3a3a3a; box-shadow: 0 4px 18px rgba(245, 183, 49, 0.38); } .toggle-btn:hover:not(.active) { color: #333; background: rgba(0, 0, 0, 0.06); } /* ================================================================ AUDIENCE PANELS ================================================================ */ .audience-panel { display: none; } .audience-panel.active { display: block; } /* ---- Intro strip inside each panel ---- */ .panel-intro { background: #fff !important; padding: 40px 0; border-bottom: 1px solid #ebebeb; } .panel-intro-inner { display: flex; align-items: center; gap: 28px; } .panel-intro-inner img { height: 54px; width: auto; flex-shrink: 0; } .panel-intro-inner h2 { font-size: 22px; margin-bottom: 6px; color: #333; } .panel-intro-inner p { color: #888; font-size: 14px; line-height: 22px; margin: 0; } .gold-text { color: #F5B731; } /* ---- Page-card grid ---- */ .page-cards-section { padding: 40px 0 50px; background: #fff !important; } /* Reuse Astrum's .featured-box layout but in a 5-across grid for individuals */ .page-cards-section .featured-boxes { margin: 0; } .page-card-link { display: block; text-decoration: none !important; color: inherit !important; } .page-card-link:hover .page-card-box { border-top-color: #F5B731; box-shadow: 0 8px 28px rgba(0,0,0,0.10); transform: translateY(-3px); } .page-card-link.biz:hover .page-card-box { border-top-color: #F5B731; } .page-card-box { background: #f8f8f8 !important; border-top: 4px solid #f8f8f8; border-radius: 4px; padding: 28px 22px 24px; margin: 0 0 24px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.28s ease, box-shadow 0.28s ease, border-top-color 0.28s ease; /* stretch to fill the column height */ display: flex; flex-direction: column; height: calc(100% - 24px); box-sizing: border-box; overflow: hidden; } /* Astrum's .featured-desc uses float:left and negative top margin — override for card layout */ .page-card-box .featured-desc { float: none; margin: 0; flex: 1; display: flex; flex-direction: column; } .page-card-box .featured-desc p { flex: 1; } /* The one-third column needs height:100% to pass down to the card */ .page-cards-section .one-third.column, .container > .featured-boxes .one-third.column { display: flex; flex-direction: column; } /* Each featured-boxes row needs to align card heights */ .page-cards-section .featured-boxes, .container > .featured-boxes { margin: 0; display: flex; align-items: stretch; } /* Clearfix still needed for Astrum's float-based grid siblings */ .page-cards-section .featured-boxes::after, .container > .featured-boxes::after { content: ''; display: table; clear: both; } .page-card-box .circle { margin-bottom: 16px; } .page-card-box h3 { font-size: 17px; margin-bottom: 8px; color: #333; } .page-card-box p { font-size: 13px; color: #888; line-height: 21px; margin: 0 0 14px; } .card-cta { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #C9920A; text-transform: uppercase; } .card-cta::after { content: ' →'; } .page-card-link.biz .card-cta { color: #505050; } /* ================================================================ QUOTE / TESTIMONIAL BAND ================================================================ */ .quote-band { background: #3a3a3a; padding: 52px 0; text-align: center; } .quote-band .quote-mark { font-size: 64px; color: #F5B731; line-height: 0.5; margin-bottom: 20px; font-family: Georgia, serif; display: block; } .quote-band blockquote { font-size: 20px; font-style: italic; color: rgba(255,255,255,0.9); max-width: 680px; margin: 0 auto 16px; line-height: 32px; border: none; padding: 0; } .quote-band cite { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.4); } /* ================================================================ RESPONSIVE ADJUSTMENTS ================================================================ */ @media only screen and (max-width: 767px) { .toggle-btn { padding: 12px 20px; font-size: 13px; } .panel-intro-inner { flex-direction: column; text-align: center; } .panel-intro-inner img { display: none; } /* Cards: stack to full width on mobile */ .page-cards-section .one-third.column, .page-cards-section .featured-boxes { width: 100% !important; display: block !important; margin-left: 0 !important; margin-right: 0 !important; } .page-card-box { height: auto !important; margin-bottom: 16px; } /* Footer: stack all columns to full width on mobile */ #footer .four.columns { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; display: block; } } /* ================================================================ INNER PAGE TITLE BAND ================================================================ */ #page-title { background: url('../images/banner.png') center center / cover no-repeat; border-bottom: none; padding: 52px 0 44px; position: relative; overflow: hidden; } /* White overlay so text reads clearly over the photo */ #page-title::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.7); pointer-events: none; } #page-title .container { position: relative; z-index: 1; } #page-title h1 { font-size: 32px; color: #000; margin-bottom: 14px; text-shadow: none; } #page-title .line { display: block; width: 52px; height: 3px; background: #F5B731; border-radius: 2px; } /* Sidebar widgets on inner pages */ .sidebar-widget { background: #f8f8f8; border-left: 3px solid #F5B731; padding: 20px 20px 16px; margin-bottom: 24px; border-radius: 0 4px 4px 0; } .sidebar-widget h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #333; margin-bottom: 14px; } /* Contact form select */ #contact-form select { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; color: #555; background: #fff; } /* ================================================================ WHO WE ARE — Team section (about.html) ================================================================ */ /* Show all three members side by side, no carousel behavior */ #team .overflowholder { overflow: visible !important; } #team .showbiz { overflow: visible !important; } #team ul { display: flex !important; flex-wrap: wrap; gap: 28px; list-style: none; padding: 24px 0 0; margin: 0; width: 100% !important; transform: none !important; } #team ul li { flex: 1 1 calc(33.333% - 20px); min-width: 220px; background: #f8f8f8; border-radius: 4px; padding: 24px; box-sizing: border-box; float: none !important; width: auto !important; } /* Hide the showbiz nav arrows */ #team .showbiz-navigation { display: none !important; } /* Mobile: stack full width */ @media only screen and (max-width: 767px) { #team ul li { flex: 1 1 100%; } } /* ================================================================ WHO WE ARE — static team grid (about.html) ================================================================ */ @media only screen and (max-width: 767px) { .team-img, .five.columns .team-img, .six.columns .team-img { width: 100% !important; } } /* ================================================================ FAQ TOGGLE — fix text color on gold active/hover background ================================================================ */ .trigger.active a, .trigger.active a:hover, .trigger a:hover, .ui-accordion .ui-accordion-header-active, .ui-accordion .ui-accordion-header-active:hover { background: #F5B731 !important; color: #3a3a3a !important; } .trigger.active .toggle-icon:before, .trigger a:hover .toggle-icon:before { color: #3a3a3a !important; } @media only screen and (max-width: 767px) { #audience-hero { background-position: center center; padding: 52px 0 70px; } .hero-logo { height: auto; width: 100%; } #audience-hero { min-height: auto; } } /* ================================================================ PHOTO CARDS — cards with a full-bleed image header instead of icon ================================================================ */ .page-card-box.photo-card { padding: 0 !important; overflow: hidden; } .card-photo-wrap { width: 100%; height: 180px; overflow: hidden; flex-shrink: 0; } .card-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .page-card-link:hover .card-photo { transform: scale(1.04); } .page-card-box.photo-card .featured-desc { padding: 20px 22px 22px; } @media only screen and (max-width: 767px) { .card-photo-wrap { height: 200px; } } /* Aroma Valley card — anchor image to left so text isn't cropped */ a[href="aroma-valley-brand.html"] .card-photo { object-position: left top; } /* Testimonial avatar — white background for sun logo */ .happy-clients-photo img { background-color: #ffffff; object-fit: cover; }