/* ================================================================ Copious IT — Global Base Stylesheet ================================================================ This file holds the SHARED CSS rules that every page used to carry duplicated inline in its . Extracted so colors, fonts, and effects live in ONE place instead of 50 copies. Every page in /css/base.css consumers: - All 24 blog posts (blog/*.html) + /blog/blog-style.css - 26 main service pages (*.html) ------------------------------------------------------------------ CHEAT SHEET — COLORS & FONTS (all site-wide) ------------------------------------------------------------------ BACKGROUNDS --ink #020617 page background (near-black navy) --ink-2 #0f172a deeper panel / nav-scrolled surface --panel rgba(51,65,85,.5) borders, dividers --panel-soft rgba(30,41,59,.5) soft card fill TEXT --text #cbd5e1 body text (silver-slate) --text-bright #ffffff headings / emphasis (white) --muted #64748b placeholders, quiet text BRAND (cyan) — accent + buttons + links --brand #00b7e3 primary brand cyan --brand-soft #1abbe6 lighter brand cyan --brand-glow rgba(0,183,227,.15) hover/glow tint --brand-ring rgba(0,183,227,.3) border on hover ACCENT (teal) — used on some cards/pricing (rgba forms) --accents rgba(20,184,166,…) teal hover/glow FONTS Primary 'Inter' (Google Fonts), fallback sans-serif Body size 0.875rem (14px) base, 1.6–1.8 line-height ================================================================ */ /* ------------------------------------------------------------------ BASE RESET Normalizes box-sizing so padding/borders are included in width. ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Smooth anchor scrolling for in-page nav jumps */ html { scroll-behavior: smooth; } /* ------------------------------------------------------------------ BODY — dark ink background, silver-slate text, Inter font ------------------------------------------------------------------- */ body { font-family: 'Inter', sans-serif; background: #020617; /* --ink page background */ color: #cbd5e1; /* --text body color */ overflow-x: hidden; /* stop horizontal scrollbars */ } /* ------------------------------------------------------------------ HERO — animated gradient background Sweeps a multi-stop slate/cyan gradient across the hero section. ------------------------------------------------------------------- */ @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero-gradient { background: linear-gradient( -45deg, #020617, /* --ink */ #0f172a, /* --ink-2 */ #002040, /* deep navy */ #0d2f55, /* deepest navy (lightened toward blue) */ #0f172a, /* --ink-2 */ #020617 /* --ink */ ); background-size: 400% 400%; animation: gradientShift 20s ease infinite; } /* ------------------------------------------------------------------ SECTION DIVIDER — cyan gradient hairline between sections ------------------------------------------------------------------- */ .section-divider { height: 1px; background: linear-gradient(to right, transparent, #00b7e3, transparent); margin: 0 auto; max-width: 80%; } /* ------------------------------------------------------------------ SCROLL-REVEAL — elements fade/slide in on scroll JS toggles the .visible class once the element enters the viewport. ------------------------------------------------------------------- */ .animate-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } /* ------------------------------------------------------------------ CARD HOVER — lift + cyan glow on interactive cards ------------------------------------------------------------------- */ .card-hover { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s, box-shadow 0.5s; } .card-hover:hover { transform: translateY(-8px); border-color: rgba(0, 183, 227, 0.3); /* --brand-ring */ box-shadow: 0 20px 60px -15px rgba(0, 183, 227, 0.15); } /* ------------------------------------------------------------------ BUTTON SHINE — animated light sheen sweeping across buttons ------------------------------------------------------------------- */ .btn-shine { position: relative; overflow: hidden; } .btn-shine::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%); transform: rotate(30deg) translateX(-100%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .btn-shine:hover::after { transform: rotate(30deg) translateX(100%); } /* ------------------------------------------------------------------ NAV — glass fade transition (JS adds .scrolled for solid bg) ------------------------------------------------------------------- */ .nav-glass { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* ------------------------------------------------------------------ MOBILE MENU — right-side slide-in drawer ------------------------------------------------------------------- */ .mobile-menu { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); background-color: #020617 !important; /* --ink, force over utilities */ } .mobile-menu.open { transform: translateX(0); } /* ------------------------------------------------------------------ CONTACT OVERLAY — modal dialog (dim backdrop + centered card) ------------------------------------------------------------------- */ .contact-overlay { opacity: 0; visibility: hidden; transition: all 0.3s ease; } .contact-overlay.active { opacity: 1; visibility: visible; } .contact-modal { transform: scale(0.95) translateY(20px); opacity: 0; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .contact-overlay.active .contact-modal { transform: scale(1) translateY(0); opacity: 1; } /* ------------------------------------------------------------------ CONTACT BANNER — fixed bottom bar with email/phone CTA ------------------------------------------------------------------- */ #contact-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; background: linear-gradient(to right, #020617, #0f172a); border-top: 1px solid rgba(51, 65, 85, 0.5); /* --panel */ padding: 10px 0; display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 0.875rem; } #contact-banner img { width: 20px; height: 20px; opacity: 0.7; } #contact-banner a { color: #1abbe6; /* --brand-soft */ text-decoration: none; } /* ------------------------------------------------------------------ SERVICES MEGA-DRAWER — full-width dropdown under the nav bar Opened by the Services button in the top nav (JS toggles .open). Styled as a full-width panel (morleymedia.dev-style), using the site's dark panel palette + brand cyan accents. ------------------------------------------------------------------- */ .services-dropdown { position: fixed; top: 72px; /* sits just under the nav bar */ left: 0; right: 0; z-index: 45; /* below modals (z-100), above page */ max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .services-dropdown.open { max-height: calc(100vh - 72px); /* scrollable if very tall */ overflow-y: auto; opacity: 1; transform: translateY(0); } /* Full-width panel: light surface, hairline border, soft shadow */ .services-dropdown .dropdown-panel { background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid rgba(203, 213, 225, 0.6); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .services-dropdown .dropdown-panel .inner { max-width: 1200px; margin: 0 auto; padding: 16px 20px 20px; } /* The 4 service categories rendered side-by-side as columns */ .services-dropdown .services-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; } @media (min-width: 768px) { .services-dropdown .services-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .services-dropdown .services-col { min-width: 0; } /* Category heading within a column */ .services-dropdown .category-title { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #009abf; /* accent */ font-weight: 700; padding-bottom: 4px; border-bottom: 1px solid rgba(0, 154, 191, 0.35); margin: 0 0 4px; } /* Each column's links stack vertically, tight */ .services-dropdown .services-grid { display: block; } /* A single service entry: title + one-line description */ .services-dropdown .service-link { display: block; padding: 3px 6px; border-radius: 6px; transition: background 0.15s ease; } .services-dropdown .service-link:hover { background: rgba(0, 183, 227, 0.08); } .services-dropdown .service-link .svc-name { display: block; font-size: 0.78rem; font-weight: 600; color: #0f172a; transition: color 0.15s ease; } .services-dropdown .service-link:hover .svc-name { color: #009abf; } .services-dropdown .service-link .svc-desc { display: block; font-size: 0.68rem; color: #475569; line-height: 1.35; margin-top: 1px; } /* Footer strip inside drawer: view-all + assessment CTA */ .services-dropdown .dropdown-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0, 154, 191, 0.35); } .services-dropdown .view-all { color: #009abf; font-weight: 600; font-size: 0.85rem; transition: color 0.15s ease; } .services-dropdown .view-all:hover { color: #0f172a; } /* Chevron rotation on the Services button when open */ .nav-services-btn .chev { transition: transform 0.25s ease; } .nav-services-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }