/* ========================================================================== * MARVEL CONSULTANTS — REDESIGN.CSS (non-home pages) * -------------------------------------------------------------------------- * Scoped overlay for: service detail SEO pages, static pages * (about/contact/career/gst/bbmp/blog landing), blog articles. * Loaded LAST in . Homepage uses redesign-home.css instead. * Brand primary: #621755 (plum). Accent: #ff7110 (orange). * ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap'); :root { --mc-plum: #621755; --mc-plum-deep: #4a1140; --mc-plum-soft: #8d3f7d; --mc-tint: #efe7ee; --mc-tint-warm: #f7f0f5; --mc-orange: #ff7110; --mc-orange-deep: #e85e00; --mc-orange-soft: #ffa05c; --mc-orange-tint: #fff1e6; --mc-cream: #fbf8f5; --mc-paper: #fbf8f3; --mc-paper-warm: #f6f0e6; --mc-light: #f5f9ff; --mc-frost: #f4eef3; --mc-charcoal: #1a1a1a; --mc-graphite: #2c3a47; --mc-slate: #5a6573; --mc-mute: #8a8a8a; --mc-rule: #e6dfe4; --mc-rule-strong: #c8b9c4; --mc-rule-gold: #c69a4e; --mc-display: 'Fraunces', 'Lora', Georgia, serif; --mc-serif: 'Lora', Georgia, serif; --mc-sans: 'Questrial', 'Inter', -apple-system, system-ui, sans-serif; --mc-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(40, 8, 32, 0.05), 0 8px 24px rgba(40, 8, 32, 0.07); --mc-shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 16px rgba(98, 23, 85, 0.10), 0 24px 56px rgba(40, 8, 32, 0.14); --mc-shadow-button: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 2px 0 rgba(232, 94, 0, 0.45), 0 4px 14px rgba(255, 113, 16, 0.32); --mc-shadow-button-hover: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 3px 0 rgba(232, 94, 0, 0.55), 0 10px 28px rgba(255, 113, 16, 0.45); --mc-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ── 1. Inner small banner (page-header banner used on most pages) ── */ body section.inner_small_banner { background: radial-gradient(ellipse at top right, rgba(255, 113, 16, 0.18), transparent 50%), radial-gradient(ellipse at bottom left, rgba(98, 23, 85, 0.55), transparent 60%), linear-gradient(135deg, #2a0a25 0%, var(--mc-plum-deep) 35%, var(--mc-plum) 70%, #501346 100%) !important; padding: clamp(4rem, 7vw, 7rem) 0 clamp(3rem, 5vw, 5rem) !important; height: auto !important; min-height: clamp(200px, 18vw, 280px) !important; display: flex !important; align-items: center !important; position: relative; overflow: hidden; isolation: isolate; } body section.inner_small_banner .container { width: 100%; } body section.inner_small_banner .div-bredsection { display: block !important; align-items: initial !important; } body section.inner_small_banner::before { content: '' !important; position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; background-color: transparent !important; background-image: url("data:image/svg+xml;utf8,") !important; opacity: 0.45; mix-blend-mode: overlay; pointer-events: none; z-index: 0; } body section.inner_small_banner::after { content: '' !important; position: absolute !important; top: 0 !important; right: -10% !important; bottom: 0 !important; left: auto !important; width: 60% !important; height: auto !important; background-color: transparent !important; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 22px) !important; pointer-events: none; opacity: 0.6; z-index: 0; } /* Defeat per-color :after fills (.bg-bbmp:after, .bg-gst:after, etc) */ body section.inner_small_banner.bg-bbmp::after, body section.inner_small_banner.bg-gst::after, body section.inner_small_banner.bg-contact::after, body section.inner_small_banner.bg-career::after { background-color: transparent !important; } /* Also defeat per-color base fills on the banner itself */ body section.inner_small_banner.bg-bbmp, body section.inner_small_banner.bg-gst, body section.inner_small_banner.bg-contact, body section.inner_small_banner.bg-career { background-color: transparent !important; } body section.inner_small_banner .container { position: relative; z-index: 1; } body section.inner_small_banner .div-bredsection .text { font-family: var(--mc-display) !important; font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem) !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: -0.025em !important; line-height: 1.1; margin: 0 !important; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); } body section.inner_small_banner .div-bredsection .text::after { content: ''; display: block; width: 64px; height: 2px; background: linear-gradient(90deg, var(--mc-orange), var(--mc-orange-soft)); margin: 1rem 0 0; border-radius: 2px; } body section.inner_small_banner .div-bredsection .tagline, body section.inner_small_banner .div-bredsection .subtitle { font-family: var(--mc-serif) !important; font-size: 1.05rem !important; color: rgba(255, 255, 255, 0.86) !important; margin-top: 1rem !important; line-height: 1.6; max-width: 56ch; } /* ── 2. about-servicesdetails (text-heavy static pages) ───────────── */ body section.about-servicesdetails { background: linear-gradient(180deg, var(--mc-cream) 0%, #ffffff 100%) !important; padding: clamp(3.5rem, 6vw, 6rem) 0 !important; position: relative; } body section.about-servicesdetails .container { max-width: 920px; } body section.about-servicesdetails .title-headingone { font-family: var(--mc-display) !important; font-weight: 600 !important; color: var(--mc-charcoal) !important; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem) !important; letter-spacing: -0.018em !important; line-height: 1.25 !important; margin: 2.5rem 0 1rem !important; text-align: left !important; position: relative; padding-left: 1.1rem; border-left: 3px solid var(--mc-orange); } body section.about-servicesdetails .title-headingtwo { font-family: var(--mc-display) !important; font-weight: 600 !important; color: var(--mc-charcoal) !important; font-size: clamp(1.85rem, 1.5rem + 1.5vw, 2.85rem) !important; letter-spacing: -0.022em !important; line-height: 1.15 !important; margin: 0 0 1.5rem !important; text-align: center !important; position: relative; } body section.about-servicesdetails .title-headingsub { font-family: var(--mc-display) !important; font-weight: 600 !important; color: var(--mc-plum) !important; font-size: 1.25rem !important; letter-spacing: -0.012em !important; margin: 2rem 0 0.85rem !important; } body section.about-servicesdetails .title-para { font-family: var(--mc-serif) !important; font-size: 1.05rem !important; font-weight: 400 !important; color: var(--mc-graphite) !important; line-height: 1.85 !important; text-align: left !important; margin: 1rem 0 !important; } body section.about-servicesdetails strong { color: var(--mc-plum) !important; font-weight: 600; } body section.about-servicesdetails .title-para a, body section.about-servicesdetails p a { color: var(--mc-plum); border-bottom: 1px solid rgba(98, 23, 85, 0.3); padding-bottom: 1px; font-weight: 500; transition: color 0.25s var(--mc-ease), border-color 0.25s var(--mc-ease); } body section.about-servicesdetails .title-para a:hover, body section.about-servicesdetails p a:hover { color: var(--mc-orange); border-color: var(--mc-orange); } /* Contact-page two-column (Get In Touch With Us + form) */ body section.about-servicesdetails .row { gap: 2rem 0; } /* ── 3. Service detail SEO pages (.hero, .services, .challenges, .faq, .cta) ── */ /* These pages have their own inline