/* ================================================================ Innovea Mark — theme-override.css COLOR SYSTEM REDESIGN v2.0 ---------------------------------------------------------------- IMPORT AFTER all other stylesheets in every page : Rules here ONLY touch: • CSS custom properties (design tokens) • Background colours • Border colours / opacity • Box shadows • Gradients • Text colours (contrast improvements) • Glow & depth effects Nothing in this file changes: layout · spacing · typography sizes · component structure · animation timing · section order · PHP structure ================================================================ */ /* ================================================================ 1. ROOT TOKENS — replaces every colour variable site-wide ================================================================ */ :root { /* ── Backgrounds: deep navy layers, not pure black ──────────── */ --bg: #08111F; /* primary canvas — deep midnight navy */ --bg-2: #0D1728; /* secondary sections — slightly lifted navy */ --bg-3: #121E31; /* tertiary sections — visible step up */ --bg-card: #131F33; /* card surfaces — clearly above bg */ /* ── Border system: precise, not washed-out ────────────────── */ --border: rgba(212,175,55,0.10); /* resting state — subtle gold tint */ --border-glow: rgba(212,175,55,0.26); /* hover/active — legible gold rim */ /* ── Gold accent: champagne, not saturated yellow ──────────── */ --gold: #D4AF37; /* primary accent */ --gold-light: #E6C55A; /* hover / highlight variant */ --gold-dim: rgba(212,175,55,0.10); /* tinted fill — very restrained */ --gold-glow: 0 0 28px rgba(212,175,55,0.18); /* soft ambient glow */ /* ── Text: maximum readability on navy ─────────────────────── */ --text-primary: #F5F5F5; /* headlines — near-white, not pure */ --text-secondary: #AAB3C5; /* body copy — readable mid-tone */ --text-muted: #7D8898; /* captions, labels */ --text-gold: #D4AF37; /* ── Gradient: refined champagne shimmer ───────────────────── */ --grad-gold: linear-gradient(135deg, #C9A227 0%, #E6C55A 45%, #B8961F 100%); --grad-card: linear-gradient(160deg, rgba(19,31,51,1) 0%, rgba(13,23,40,1) 100%); /* ── Semantic convenience tokens (used in overrides below) ─── */ --glow-gold: rgba(212,175,55,0.12); --shadow-card: 0 1px 3px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.35); --shadow-hover: 0 2px 6px rgba(0,0,0,0.5), 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.20); --shadow-float: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04); } /* ================================================================ 2. BASE BACKGROUNDS — section alternation creates clear rhythm ================================================================ */ body { background-color: var(--bg); /* Subtle noise-free full-page gradient for depth without banding */ background-image: radial-gradient( ellipse 120% 80% at 50% -10%, rgba(21, 38, 72, 0.55) 0%, transparent 70% ); } /* Dark sections: #08111F — deepest layer */ .sec-dark { background: var(--bg); } /* Darker sections: #0D1728 — one step up */ .sec-darker { background: var(--bg-2); /* Separating edge — near-invisible line above */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } /* Card-surface sections: #121E31 */ .sec-card { background: var(--bg-3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } /* Scrollbar: navy track */ ::-webkit-scrollbar-track { background: var(--bg-2); } ::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.18); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.32); } /* Text selection */ ::selection { background: rgba(212,175,55,0.18); color: var(--text-primary); } /* ================================================================ 3. PAGE LOADER ================================================================ */ #loader { background: var(--bg); /* Radial wash so it doesn't look flat */ background-image: radial-gradient( ellipse 60% 50% at 50% 40%, rgba(19,31,51,0.8) 0%, transparent 65% ); } .loader-bar-wrap { background: rgba(255,255,255,0.06); } .loader-tagline { color: var(--text-muted); letter-spacing: 0.22em; } .loader-dot { background: var(--gold); opacity: 0.25; } /* ================================================================ 4. NAVIGATION ================================================================ */ /* Transparent until scrolled — matches hero bg */ #nav { background: transparent; } /* Scrolled: frosted navy, not frosted black */ #nav.scrolled { background: rgba(8, 17, 31, 0.90); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-bottom: 1px solid rgba(212,175,55,0.10); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 32px rgba(0,0,0,0.45); } /* Nav links: softer gold on active/hover */ .nav-links a:hover, .nav-links a.active { color: var(--gold-light); background: rgba(212,175,55,0.07); } /* Hamburger border: navy-appropriate */ .nav-hamburger { border-color: rgba(212,175,55,0.14); background: rgba(255,255,255,0.03); } .nav-hamburger:hover { border-color: rgba(212,175,55,0.35); background: rgba(212,175,55,0.06); } .nav-hamburger span { background: var(--text-secondary); } .nav-hamburger:hover span { background: var(--gold-light); } /* Mobile menu: navy, not charcoal */ .nav-mobile { background: rgba(8, 17, 31, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top-color: rgba(212,175,55,0.10); } .nav-mobile a { border-bottom-color: rgba(255,255,255,0.05); color: var(--text-secondary); } .nav-mobile a:hover, .nav-mobile a.active { color: var(--gold-light); } /* ================================================================ 5. CARDS — elevated, separated, premium ================================================================ */ .card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .card:hover { background: #18263D; /* slightly lighter surface on hover */ border-color: rgba(212,175,55,0.22); box-shadow: var(--shadow-hover); transform: translateY(-4px); } /* Glow variant: gold gradient border on hover */ .card-glow::before { background: linear-gradient( 135deg, rgba(212,175,55,0.22) 0%, rgba(212,175,55,0.06) 40%, transparent 70% ); } /* ================================================================ 6. BUTTONS ================================================================ */ /* Primary CTA: champagne gold, dark text, soft glow */ .btn-gold { background: linear-gradient(135deg, #C9A227 0%, #E0BC42 50%, #B8961F 100%); color: #0A0E1A; /* dark navy text for max contrast on gold */ box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 4px 20px rgba(212,175,55,0.25); border: none; } .btn-gold:hover { background: linear-gradient(135deg, #D4AF37 0%, #EDCA50 50%, #C9A227 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 8px 32px rgba(212,175,55,0.38); } /* Secondary CTA: transparent navy bg, gold rim */ .btn-outline-gold { background: rgba(13,23,40,0.60); color: var(--gold-light); border: 1px solid rgba(212,175,55,0.38); box-shadow: none; } .btn-outline-gold:hover { background: rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.60); color: var(--gold-light); box-shadow: 0 0 20px rgba(212,175,55,0.14), 0 4px 16px rgba(0,0,0,0.3); } /* Ghost: low-key, navy-tinted */ .btn-ghost { background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.09); } .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: var(--text-primary); } /* ================================================================ 7. BADGES ================================================================ */ .badge-gold { background: rgba(212,175,55,0.08); color: var(--gold-light); border-color: rgba(212,175,55,0.20); } .badge-dark { background: rgba(255,255,255,0.04); color: var(--text-secondary); border-color: rgba(255,255,255,0.08); } /* ================================================================ 8. EYEBROW / SECTION LABELS — reduce gold saturation, use light variant ================================================================ */ .eyebrow { color: var(--gold-light); opacity: 0.85; } .eyebrow::before { background: linear-gradient(90deg, var(--gold), transparent); opacity: 0.7; } /* ================================================================ 9. HERO SECTION ================================================================ */ #hero { background: var(--bg); /* Layered radial to simulate depth behind content */ background-image: radial-gradient(ellipse 100% 65% at 50% 0%, rgba(18,30,49,0.75) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 100% 60%, rgba(16,28,50,0.45) 0%, transparent 65%); } /* Grid lines: finer, more refined */ .hero-grid-bg { background-image: linear-gradient(rgba(212,175,55,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.03) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.8; } /* Ambient glows: navy-blue shifted, not pure gold blobs */ .hero-glow-1 { background: radial-gradient( circle, rgba(30, 50, 100, 0.40) 0%, rgba(212,175,55,0.04) 40%, transparent 65% ); } .hero-glow-2 { background: radial-gradient( circle, rgba(20, 40, 80, 0.35) 0%, rgba(212,175,55,0.03) 45%, transparent 65% ); } /* Hero badge: restraint — barely-there gold tint */ .hero-badge { background: rgba(212,175,55,0.07); border-color: rgba(212,175,55,0.20); color: var(--gold-light); } .hero-badge-dot { background: var(--gold-light); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.35); } 50% { box-shadow: 0 0 0 5px rgba(212,175,55,0); } } /* Gold gradient text on headline */ .hero-highlight { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Stats divider */ .hero-stats { border-top-color: rgba(255,255,255,0.07); } .hero-stat { border-right-color: rgba(255,255,255,0.07); } .hero-stat-label { color: var(--text-muted); } /* Scroll indicator */ .scroll-line { background: linear-gradient(to bottom, rgba(212,175,55,0.5), transparent); } .scroll-ind span { color: var(--text-muted); } /* ================================================================ 10. LOGOS / CLIENT STRIP ================================================================ */ .logos-label { color: var(--text-muted); } .logo-pill { background: rgba(13,23,40,0.70); border-color: rgba(255,255,255,0.07); color: var(--text-muted); box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .logo-pill:hover { border-color: rgba(212,175,55,0.25); color: var(--text-secondary); background: rgba(13,23,40,0.90); } /* ================================================================ 11. TICKER ================================================================ */ .ticker { background: linear-gradient(90deg, var(--bg-2), #111D30, var(--bg-2)); border-top-color: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.05); } .ticker-item { color: var(--text-muted); } .ticker-item:hover { color: var(--text-secondary); } /* Separator dot: dimmer */ .ticker-item::after { background: rgba(212,175,55,0.30); } /* ================================================================ 12. SERVICE ICON BOXES ================================================================ */ .svc-icon-box { background: rgba(212,175,55,0.07); border-color: rgba(212,175,55,0.14); color: var(--gold-light); } .card:hover .svc-icon-box { background: rgba(212,175,55,0.12); box-shadow: 0 0 16px rgba(212,175,55,0.12); } /* Service link arrow */ .svc-link { color: var(--gold-light); opacity: 0.85; } .svc-card:hover .svc-link { opacity: 1; } /* ================================================================ 13. WHY-US VISUAL PANEL ================================================================ */ /* The dark box sitting on bg-2: needs to stand out */ .why-visual { background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%); border-color: rgba(255,255,255,0.07); box-shadow: var(--shadow-float); } .why-visual::before { background: radial-gradient( circle, rgba(212,175,55,0.08) 0%, transparent 65% ); } /* Service status pills inside why visual */ .why-service-pill { background: var(--bg); border-color: rgba(255,255,255,0.07); } .why-service-pill:hover { border-color: rgba(212,175,55,0.18); } /* Why-point feature rows */ .why-point { background: var(--bg); border-color: rgba(255,255,255,0.06); box-shadow: 0 1px 4px rgba(0,0,0,0.3); } .why-point:hover { border-color: rgba(212,175,55,0.16); box-shadow: 0 2px 12px rgba(0,0,0,0.4); } .why-point-icon { background: rgba(212,175,55,0.07); border: 1px solid rgba(212,175,55,0.12); color: var(--gold-light); } /* Metric cards within why-visual */ .metric-card { background: rgba(8,17,31,0.70); border-color: rgba(255,255,255,0.07); box-shadow: 0 1px 4px rgba(0,0,0,0.35); } .metric-card .metric-val { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ================================================================ 14. CASE STUDY / PORTFOLIO CARDS ================================================================ */ .case-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .case-card:hover { background: #18263D; border-color: rgba(212,175,55,0.20); box-shadow: var(--shadow-hover); } /* Gradient overlay on thumb for legible badges */ .case-thumb-overlay { background: linear-gradient( to top, rgba(8,17,31,0.92) 0%, rgba(8,17,31,0.30) 50%, transparent 100% ); } .case-result strong { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .case-link, .cs-link { color: var(--gold-light); opacity: 0.85; } .case-card:hover .case-link, .cs-card:hover .cs-link { opacity: 1; } /* ================================================================ 15. PROCESS CARDS ================================================================ */ .process-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .process-card:hover { border-color: rgba(212,175,55,0.20); box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.4); } .process-num { /* More restrained: barely visible watermark */ opacity: 0.10; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* The connector line between process steps */ .process-grid::before { background: linear-gradient( 90deg, transparent 0%, rgba(212,175,55,0.15) 25%, rgba(212,175,55,0.15) 75%, transparent 100% ); } /* ================================================================ 16. TESTIMONIAL CARDS ================================================================ */ .card.testi-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .card.testi-card:hover { border-color: rgba(212,175,55,0.18); box-shadow: var(--shadow-hover); } .testi-stars span { /* Slightly dimmed — not blasting gold */ color: #C9A227; opacity: 0.85; } .testi-author { border-top-color: rgba(255,255,255,0.07); } /* Avatar: richer navy gradient, subtle gold */ .testi-avatar { background: linear-gradient(135deg, #1A2E52 0%, #253D6B 100%); color: var(--gold-light); font-size: 0.72rem; border: 1px solid rgba(212,175,55,0.20); } /* ================================================================ 17. CTA BANNER ================================================================ */ .cta-banner { background: linear-gradient( 160deg, var(--bg-3) 0%, #0F1B2F 50%, var(--bg-2) 100% ); border-color: rgba(212,175,55,0.16); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 32px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03); } /* Very soft background glow — not a gold spotlight */ .cta-banner::before { background: radial-gradient( ellipse 80% 50% at 50% -20%, rgba(212,175,55,0.07) 0%, transparent 70% ); } /* ================================================================ 18. PAGE HERO (inner pages) ================================================================ */ .page-hero { background: var(--bg-2); background-image: radial-gradient(ellipse 100% 80% at 70% 0%, rgba(25,42,78,0.55) 0%, transparent 60%); } /* Grid: subtler */ .page-hero-grid { background-image: linear-gradient(rgba(212,175,55,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,0.025) 1px, transparent 1px); } /* Ambient glow: navy-blue, not gold haze */ .page-hero-glow { background: radial-gradient( circle, rgba(30,50,100,0.25) 0%, rgba(212,175,55,0.04) 45%, transparent 65% ); } /* ================================================================ 19. STAT NUMBERS ================================================================ */ .stat-num { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { color: var(--text-muted); } /* ================================================================ 20. FOOTER ================================================================ */ footer { background: var(--bg-2); border-top-color: rgba(255,255,255,0.05); /* Subtle elevation above page */ box-shadow: 0 -1px 0 rgba(255,255,255,0.03) inset; } /* Brand name: champagne gradient — same as logo */ .footer-brand-name { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .footer-brand-tag { color: var(--text-muted); } .footer-brand p { color: var(--text-muted); } /* Social icons: navy surface, gold on hover */ .footer-socials a { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: var(--text-muted); } .footer-socials a:hover { background: rgba(212,175,55,0.08); border-color: rgba(212,175,55,0.30); color: var(--gold-light); } /* Column headings: restrained gold, not screaming */ .footer-col h4 { color: var(--gold-light); opacity: 0.75; } /* Links: muted at rest, bright white on hover */ .footer-col ul li a { color: var(--text-muted); } .footer-col ul li a:hover { color: var(--text-primary); } /* Bottom bar */ .footer-bottom { border-top-color: rgba(255,255,255,0.05); color: var(--text-muted); } .footer-bottom a { color: var(--gold-light); opacity: 0.75; } .footer-bottom a:hover { opacity: 1; } /* ================================================================ 21. GOLD SEPARATOR LINE ================================================================ */ .gold-sep { background: linear-gradient( 90deg, transparent 0%, rgba(212,175,55,0.12) 30%, rgba(212,175,55,0.12) 70%, transparent 100% ); } /* ================================================================ 22. SERVICES PAGE (sdc cards, int-cards, pricing) ================================================================ */ /* Service detail cards */ .sdc { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .sdc:hover { border-color: rgba(212,175,55,0.20); box-shadow: var(--shadow-hover); } /* Feature list item divider */ .feat-list li { border-bottom-color: rgba(255,255,255,0.05); color: var(--text-secondary); } .feat-list li::before { color: var(--gold-light); opacity: 0.7; } /* Integration cards */ .int-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .int-card:hover { border-color: rgba(212,175,55,0.22); box-shadow: var(--shadow-hover); } /* Service tab pills */ .svc-tab { background: transparent; border-color: rgba(255,255,255,0.08); color: var(--text-muted); } .svc-tab:hover, .svc-tab.active { border-color: rgba(212,175,55,0.35); color: var(--gold-light); background: rgba(212,175,55,0.07); } /* Pricing cards */ .pricing-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .pricing-card:hover { border-color: rgba(212,175,55,0.18); box-shadow: var(--shadow-hover); } /* Featured pricing card: slightly brighter surface */ .pricing-card.featured { background: linear-gradient( 160deg, #18263D 0%, #131F33 100% ); border-color: rgba(212,175,55,0.28); box-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,175,55,0.16); } .pricing-price.gold { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pricing-feats li::before { color: var(--gold-light); opacity: 0.7; } .pricing-period { color: var(--text-muted); } /* ================================================================ 23. CASE STUDIES PAGE (cs-card, filter buttons) ================================================================ */ .cs-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .cs-card:hover { border-color: rgba(212,175,55,0.20); box-shadow: var(--shadow-hover); } .cs-thumb-overlay { background: linear-gradient( to top, rgba(8,17,31,0.92) 0%, rgba(8,17,31,0.30) 50%, transparent 100% ); } .cs-result strong { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cs-results { border-top-color: rgba(255,255,255,0.06); border-bottom-color: rgba(255,255,255,0.06); } .cs-filter-btn { background: transparent; border-color: rgba(255,255,255,0.08); color: var(--text-muted); } .cs-filter-btn:hover, .cs-filter-btn.active { border-color: rgba(212,175,55,0.35); color: var(--gold-light); background: rgba(212,175,55,0.07); } /* ================================================================ 24. ABOUT PAGE (stat ribbon, team cards, value cards) ================================================================ */ /* Stat ribbon */ .stat-ribbon { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .stat-ribbon-item { border-right-color: rgba(255,255,255,0.06); } /* Team cards */ .team-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .team-card:hover { border-color: rgba(212,175,55,0.18); box-shadow: var(--shadow-hover); } .team-thumb { background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%); } .team-thumb::after { background: linear-gradient(to top, var(--bg-card) 0%, transparent 50%); } .team-role { color: var(--gold-light); opacity: 0.85; } /* Value cards */ .value-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .value-card:hover { border-color: rgba(212,175,55,0.18); box-shadow: var(--shadow-hover); } .value-icon { background: rgba(212,175,55,0.07); border: 1px solid rgba(212,175,55,0.12); color: var(--gold-light); } /* Award pills */ .award-pill { background: var(--bg-card); border-color: rgba(255,255,255,0.07); box-shadow: var(--shadow-card); } .award-pill:hover { border-color: rgba(212,175,55,0.22); } .award-name { color: var(--text-primary); } .award-year { color: var(--text-muted); } /* About visual placeholder */ .about-image-placeholder { background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%); border-color: rgba(255,255,255,0.07); box-shadow: var(--shadow-float); } .about-image-placeholder::before { background: radial-gradient( circle at 50% 50%, rgba(212,175,55,0.07) 0%, transparent 65% ); } /* ================================================================ 25. BLOG PAGE (blog-featured, blog-card, sidebar, newsletter) ================================================================ */ .blog-featured { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .blog-featured:hover { border-color: rgba(212,175,55,0.20); box-shadow: var(--shadow-hover); } .blog-featured-overlay { background: linear-gradient( to top, rgba(8,17,31,0.96) 0%, rgba(8,17,31,0.35) 55%, transparent 100% ); } .blog-cat { color: var(--gold-light); opacity: 0.9; } .blog-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .blog-card:hover { border-color: rgba(212,175,55,0.18); box-shadow: var(--shadow-hover); } .read-more { color: var(--gold-light); opacity: 0.85; } .blog-card:hover .read-more { opacity: 1; } /* Sidebar widgets */ .sidebar-widget { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .sidebar-widget h4 { color: var(--gold-light); opacity: 0.80; border-bottom-color: rgba(255,255,255,0.06); } .sidebar-cats a { color: var(--text-muted); border-bottom-color: rgba(255,255,255,0.05); } .sidebar-cats a:hover { color: var(--text-secondary); } .sidebar-cats a span { background: rgba(255,255,255,0.05); color: var(--text-muted); } /* Newsletter widget */ .newsletter-widget { background: linear-gradient( 160deg, var(--bg-card) 0%, #111B2E 100% ); border-color: rgba(212,175,55,0.14); box-shadow: var(--shadow-card); } .newsletter-widget h4 { color: var(--text-primary); } .newsletter-widget input { background: rgba(8,17,31,0.70); border-color: rgba(255,255,255,0.09); color: var(--text-primary); } .newsletter-widget input::placeholder { color: var(--text-muted); } .newsletter-widget input:focus { border-color: rgba(212,175,55,0.35); box-shadow: 0 0 0 3px rgba(212,175,55,0.07); } /* ================================================================ 26. CONTACT PAGE (info card, form card, faq cards) ================================================================ */ .contact-info-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .contact-detail { border-bottom-color: rgba(255,255,255,0.06); } .contact-icon-box { background: rgba(212,175,55,0.07); border-color: rgba(212,175,55,0.14); color: var(--gold-light); } .form-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } /* Form inputs: navy surface */ .form-group input, .form-group select, .form-group textarea { background: rgba(8,17,31,0.65); border-color: rgba(255,255,255,0.09); color: var(--text-primary); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: rgba(212,175,55,0.35); box-shadow: 0 0 0 3px rgba(212,175,55,0.07); background: rgba(10,18,32,0.80); } .form-group input.error, .form-group select.error, .form-group textarea.error { border-color: rgba(239,68,68,0.55); } /* Form submit: matches btn-gold */ .form-submit { background: linear-gradient(135deg, #C9A227 0%, #E0BC42 50%, #B8961F 100%); color: #0A0E1A; box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 4px 20px rgba(212,175,55,0.25); } .form-submit:hover { background: linear-gradient(135deg, #D4AF37 0%, #EDCA50 50%, #C9A227 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 8px 32px rgba(212,175,55,0.38); } .form-note { color: var(--text-muted); } /* Form success */ .form-success.show { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.20); } .form-success strong { color: #4ade80; } /* FAQ cards */ .faq-card { background: var(--bg-card); border-color: rgba(255,255,255,0.06); box-shadow: var(--shadow-card); } .faq-card:hover { border-color: rgba(212,175,55,0.18); box-shadow: var(--shadow-hover); } .faq-card h4 { color: var(--text-primary); } .faq-card p { color: var(--text-secondary); } /* Tip box inside contact info */ .tip-box-inner, div[style*="background:var(--bg-2)"], div[style*="background: var(--bg-2)"] { background: rgba(8,17,31,0.60) !important; border-radius: var(--radius); } /* ================================================================ 27. CUSTOM CURSOR — navy ring instead of harsh gold ================================================================ */ .cursor-dot { background: var(--gold-light); box-shadow: 0 0 8px rgba(212,175,55,0.4); } .cursor-ring { border-color: rgba(212,175,55,0.35); } .cursor-ring.hovered { border-color: rgba(212,175,55,0.65); box-shadow: 0 0 16px rgba(212,175,55,0.12); } /* ================================================================ 28. HERO CANVAS PARTICLES — JS renders rgba(212,175,55,…) Override just the canvas opacity wrapper for subtlety ================================================================ */ #hero-canvas { opacity: 0.35; /* was 0.45 — dialled back to be atmospheric */ } /* ================================================================ 29. SECTION-TO-SECTION TRANSITION EDGES Adds a 1px shimmer where bg-2 meets bg to separate blocks without a visible hard line ================================================================ */ .sec-darker + .sec-dark, .sec-dark + .sec-darker, .sec-card + .sec-dark, .sec-dark + .sec-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } /* ================================================================ 30. GOLD DIVIDER LINE (refined) ================================================================ */ .gold-line { background: linear-gradient( 90deg, transparent 0%, var(--gold) 30%, var(--gold-light) 60%, transparent 100% ); opacity: 0.55; height: 1.5px; } /* ================================================================ 31. RESPONSIVE — keep overrides intact on smaller screens ================================================================ */ @media (max-width: 640px) { /* Maintain card elevation at mobile */ .card { box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.3); } }