/* ========================================================= ELDER LABORATORIES — INNER PAGES LUXE LAYER Pages: Brand, Certifications, Leadership, Organization, Privacy Policy, CSR, Contact Load AFTER site.css / layout-luxe.css (in _Layout.cshtml ). Every rule is scoped to that page's own class names, so it is safe to load site-wide. To roll back one page, delete its block. Palette: navy #0a1b33 / brand #234e86 / blue #147bc1 / gold #c9a24b ========================================================= */ :root { --pg-navy: #0a1b33; --pg-brand: #234e86; --pg-blue: #147bc1; --pg-gold: #c9a24b; --pg-gold-soft: #e8cf8e; --pg-canvas: #f7f9fd; --pg-muted: #5b7088; --pg-ease: cubic-bezier(.2, .7, .2, 1); } /* ========================================================= STEP 1 — SHARED HERO (all 7 pages) Navy gradient, white type, gold accents, molecule art ========================================================= */ .brand-hero, .certifications-hero, .clsLeadershipHero, .organization-hero, .privacy-hero, .csr-hero, .contact-hero { background: radial-gradient(700px 360px at 85% 10%, rgba(20,123,193,.35), transparent 70%), linear-gradient(105deg, #061c38 0%, #0a2d56 38%, #0d4f8b 100%) !important; border-bottom: 0 !important; clip-path: none !important; } /* remove each page's old pale decorations */ .brand-hero-bg-circle, .clsLeadershipAbstract, .clsLeadershipWaterEffect, .contact-hero-image, .contact-molecule { display: none !important; } .certifications-hero::before, .organization-hero::before { display: none !important; } /* photo heroes: keep the photo, tint it navy */ .csr-hero-background::after, .privacy-hero-overlay, .contact-hero-overlay { background: linear-gradient(95deg, rgba(6,28,56,.96) 0%, rgba(10,45,86,.86) 34%, rgba(13,79,139,.45) 68%, rgba(13,79,139,.15) 100%) !important; } /* molecule illustration, floating on the right */ .brand-hero::after, .certifications-hero::after, .clsLeadershipHero::after, .organization-hero::after, .privacy-hero::after, .csr-hero::after, .contact-hero::after { content: "" !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 50% !important; height: auto !important; border: 0 !important; border-radius: 0 !important; transform: none; background: url("/images/about/about-molecule.svg") right 4% center / contain no-repeat !important; opacity: .85; z-index: 3; pointer-events: none; animation: pgFloat 9s ease-in-out infinite; } @keyframes pgFloat { 50% { transform: translateY(-12px); } } /* hero text */ .brand-hero h1, .certifications-hero h1, .clsLeadershipHero h1, .organization-hero h1, .privacy-hero h1, .csr-hero-content h1, .contact-hero-content h1 { color: #fff !important; font-family: "DM Serif Display", Georgia, serif !important; font-weight: 400 !important; letter-spacing: -.5px; } .certifications-hero h1 span, .contact-hero-content h1 strong { color: var(--pg-gold-soft) !important; } .brand-hero-subtitle, .certifications-hero p, .clsLeadershipHero p, .privacy-hero p, .csr-hero-content p, .contact-hero-content p { color: rgba(255,255,255,.86) !important; } .clsLeadershipBreadcrumb { color: rgba(255,255,255,.65) !important; } /* hero eyebrow labels: gold, with a short gold rule */ .brand-small-title, .certifications-small-title, .clsLeadershipLabel, .organization-hero-small-title, .privacy-hero-label, .csr-hero-label, .contact-eyebrow { color: var(--pg-gold-soft) !important; letter-spacing: 3px !important; } .brand-small-title::after, .certifications-small-title::after, .privacy-hero-label::after { background: var(--pg-gold) !important; width: 60px !important; } .organization-hero-small-title::after { background: var(--pg-gold) !important; } /* hand-drawn gold underline under each hero title, draws once */ .brand-hero h1::after, .certifications-hero h1::after, .clsLeadershipHero h1::after, .organization-hero h1::after, .privacy-hero h1::after, .csr-hero-content h1::after, .contact-hero-content h1::after { content: ""; display: block; width: 190px; height: 14px; margin-top: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 14'%3E%3Cpath d='M3 9 C35 2 62 12 95 6 S160 3 187 8' fill='none' stroke='%23c9a24b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat / 100% 100%; animation: pgDraw 1.2s .5s var(--pg-ease) both; } @keyframes pgDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* waves: fill matches the page canvas, single fine gold line */ .brand-hero-wave, .privacy-hero-wave { background: var(--pg-canvas) !important; box-shadow: 0 -2px 0 rgba(201,162,75,.9); } .csr-wave-fill, .wave-white { fill: var(--pg-canvas) !important; } .csr-wave-line, .wave-blue { stroke: rgba(201,162,75,.9) !important; stroke-width: 2px !important; opacity: 1 !important; vector-effect: non-scaling-stroke; } /* ========================================================= STEP 2 — SHARED CONTENT POLISH Section canvas, labels, headings, cards, buttons ========================================================= */ /* calm canvas with a fine dotted grid */ .brand-introduction, .brand-values, .brand-products, .certifications-section, .clsLeadershipIntro, .organization-content, .privacy-content-section, .csr-activities-section, .contact-main { background-color: var(--pg-canvas) !important; background-image: radial-gradient(rgba(35,78,134,.08) 1px, transparent 1px) !important; background-size: 26px 26px !important; } /* section labels: brand blue with a gold tick */ .brand-section-label, .certifications-label, .csr-activity-label, .csr-cta-label, .section-eyebrow, .bottom-eyebrow, .privacy-cta-label { display: inline-flex !important; align-items: center; gap: 12px; color: var(--pg-brand) !important; letter-spacing: 3px !important; } .brand-section-label::before, .certifications-label::before, .csr-activity-label::before, .section-eyebrow::before, .bottom-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--pg-gold); } /* headings */ .brand-section-heading h2, .certifications-heading h2, .csr-section-heading h2, .csr-commitment-heading h2, .contact-form-heading h2, .clsLeadershipIntroContent h2, .privacy-cta-content h2, .csr-cta-content h2 { color: var(--pg-navy) !important; font-family: "DM Serif Display", Georgia, serif !important; font-weight: 400 !important; line-height: 1.15; } /* body copy tone */ .brand-intro-content p, .certifications-heading p, .csr-activity-content p, .clsLeadershipIntroContent p, .organization-introduction p, .privacy-intro p, .privacy-policy-block p { color: var(--pg-muted) !important; } /* small cards: rounded, soft depth, gold on hover */ .brand-value-card, .certification-card, .clsLeaderCard, .clsLeaderCardItem, .csr-commitment-card, .contact-card { background: #fff; border-radius: 20px !important; border: 1px solid rgba(35,78,134,.10) !important; box-shadow: 0 20px 44px -28px rgba(10,27,51,.35) !important; transition: transform .4s var(--pg-ease), box-shadow .3s ease, border-color .3s ease; } .brand-value-card:hover, .certification-card:hover, .clsLeaderCard:hover, .clsLeaderCardItem:hover, .csr-commitment-card:hover, .contact-card:hover { transform: translateY(-8px); border-color: rgba(201,162,75,.55) !important; box-shadow: 0 30px 56px -26px rgba(10,27,51,.42) !important; } /* large blocks: same finish, no hover lift */ .brand-philosophy-box, .clsLeadershipIntroCard, .clsLeadershipBox, .contact-form-card, .privacy-policy-block, .organization-chart-wrapper { border-radius: 22px !important; border: 1px solid rgba(35,78,134,.10) !important; box-shadow: 0 30px 60px -34px rgba(10,27,51,.35) !important; } /* round icons with a gold ring */ .brand-value-icon, .csr-commitment-number, .contact-card-icon { border-radius: 50% !important; background: linear-gradient(145deg, #f4f9ff, #dcebf9) !important; color: var(--pg-brand) !important; box-shadow: 0 0 0 5px rgba(201,162,75,.10), 0 0 0 6px rgba(201,162,75,.45); } .brand-value-card:hover .brand-value-icon, .contact-card:hover .contact-card-icon { background: linear-gradient(135deg, #2a5a9a, #173a68) !important; color: #fff !important; } /* images */ .certification-image-wrapper, .csr-activity-image-inner, .clsLeaderImage, .brand-visual-card { border-radius: 20px !important; } /* buttons: blue pill, gold outline for secondary */ .csr-cta-btn-primary, .privacy-cta-button, .contact-submit { background: linear-gradient(135deg, var(--pg-blue), var(--pg-brand)) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 14px 28px -10px rgba(35,78,134,.55) !important; } .csr-cta-btn-primary:hover, .privacy-cta-button:hover, .contact-submit:hover { background: linear-gradient(135deg, var(--pg-gold), #b98a2c) !important; color: var(--pg-navy) !important; } .csr-cta-btn-secondary { border: 1.5px solid rgba(201,162,75,.8) !important; color: var(--pg-navy) !important; border-radius: 999px !important; } .csr-cta-btn-secondary:hover { background: var(--pg-navy) !important; border-color: var(--pg-navy) !important; color: #fff !important; } /* CTA panels */ .privacy-cta, .csr-cta-section, .clsLeadershipCTA, .contact-bottom { background: radial-gradient(520px 260px at 100% 0%, rgba(20,123,193,.10), transparent 70%), radial-gradient(420px 220px at 0% 100%, rgba(201,162,75,.12), transparent 70%), var(--pg-canvas) !important; } /* form fields (Contact) */ .contact-form input, .contact-form textarea, .contact-form select { border-radius: 14px !important; border-color: rgba(35,78,134,.16) !important; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--pg-gold) !important; box-shadow: 0 0 0 4px rgba(201,162,75,.16) !important; outline: none; } /* ========================================================= STEP 3 — PAGE-SPECIFIC FINISHES ========================================================= */ /* Organization: the hero used a clipped ellipse; keep a clean edge */ .organization-hero { min-height: 340px; } .organization-chart-image { border-radius: 16px; } /* Certifications: navy backdrop behind the zoom preview */ .certification-preview-backdrop { background: rgba(6,20,40,.82) !important; } .certification-preview-box { border-radius: 20px !important; } /* Privacy: readable long-form column */ .privacy-policy-block { padding: 34px 38px; background: #fff; } /* ========================================================= ACCESSIBILITY + RESPONSIVE ========================================================= */ @media (max-width: 1000px) { .brand-hero::after, .certifications-hero::after, .clsLeadershipHero::after, .organization-hero::after, .privacy-hero::after, .csr-hero::after, .contact-hero::after { width: 70% !important; opacity: .4; } } @media (max-width: 768px) { .brand-hero::after, .certifications-hero::after, .clsLeadershipHero::after, .organization-hero::after, .privacy-hero::after, .csr-hero::after, .contact-hero::after { width: 100% !important; opacity: .22; background-position: center !important; } .brand-hero h1::after, .certifications-hero h1::after, .clsLeadershipHero h1::after, .organization-hero h1::after, .privacy-hero h1::after, .csr-hero-content h1::after, .contact-hero-content h1::after { width: 140px; } .privacy-policy-block { padding: 24px 20px; } } @media (prefers-reduced-motion: reduce) { .brand-hero::after, .certifications-hero::after, .clsLeadershipHero::after, .organization-hero::after, .privacy-hero::after, .csr-hero::after, .contact-hero::after, .brand-hero h1::after, .certifications-hero h1::after, .clsLeadershipHero h1::after, .organization-hero h1::after, .privacy-hero h1::after, .csr-hero-content h1::after, .contact-hero-content h1::after { animation: none !important; } .brand-value-card, .certification-card, .clsLeaderCard, .clsLeaderCardItem, .csr-commitment-card, .contact-card { transition: none; } }