/* ========================================================================== Visionery Consulting — Brand System (Navy + Gold) File: /wp-content/themes/blocksy-child/assets/css/custom.css Notes: - Uses CSS variables for easy global updates - Includes typography + buttons + scroll reveal animations ========================================================================== */ /* ========================= 1) Brand Tokens (Colors) ========================= */ :root { /* Primary */ --vc-navy-900: #0B1F33; /* Deep Navy (primary brand) */ --vc-navy-800: #122A44; /* Section navy / hover background */ --vc-navy-700: #1A3554; /* Borders / subtle surfaces */ /* Accent */ --vc-gold-500: #C9B27C; /* Champagne Gold (primary accent) */ --vc-gold-400: #D6C28F; /* Lighter gold (hover/soft) */ --vc-gold-300: #E7D8B5; /* Very soft gold (badges/highlights) */ /* Neutrals */ --vc-ivory-50: #F7F8FA; /* Main page background */ --vc-white: #FFFFFF; /* Cards/containers */ --vc-gray-600: #6B7684; /* Muted text */ --vc-gray-700: #4B5563; /* Secondary headings/subtitles */ --vc-ink-900: #0F172A; /* Dark text on light background */ /* UI */ --vc-border: rgba(11, 31, 51, 0.12); --vc-shadow: 0 18px 45px rgba(11, 31, 51, 0.12); --vc-radius: 18px; /* Typography (colors) */ --vc-h-color: var(--vc-navy-900); /* H1-H6 color */ --vc-text-color: var(--vc-ink-900); /* Paragraph text color */ --vc-muted-color: var(--vc-gray-600); /* Secondary text */ /* Buttons */ --vc-btn-bg: var(--vc-gold-500); --vc-btn-bg-hover: var(--vc-gold-400); --vc-btn-text: var(--vc-navy-900); --vc-btn-outline: var(--vc-gold-500); /* Links */ --vc-link: var(--vc-navy-900); --vc-link-hover: var(--vc-gold-500); } /* ========================= 2) Global Base ========================= */ body { background: var(--vc-ivory-50); color: var(--vc-text-color); } /* Headings */ h1, h2, h3, h4, h5, h6 { color: var(--vc-h-color); letter-spacing: -0.02em; } /* Paragraphs / small text */ p, li, small, .vc-muted { color: var(--vc-text-color); } .vc-muted { color: var(--vc-muted-color); } /* Links */ a { color: var(--vc-link); text-decoration: none; } a:hover { color: var(--vc-link-hover); } /* ========================= 3) Surfaces (Cards/Sections) ========================= */ .vc-surface { background: var(--vc-white); border: 1px solid var(--vc-border); border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); } /* Dark section helper (optional) */ .vc-section-dark { background: var(--vc-navy-900); color: var(--vc-ivory-50); } .vc-section-dark h1, .vc-section-dark h2, .vc-section-dark h3, .vc-section-dark h4, .vc-section-dark h5, .vc-section-dark h6 { color: var(--vc-ivory-50); } .vc-section-dark a { color: var(--vc-gold-500); } .vc-section-dark a:hover { color: var(--vc-gold-400); } /* ========================= 4) Buttons (Primary + Outline) ========================= */ /* Primary button */ .vc-btn, button.vc-btn, a.vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border-radius: 999px; background: var(--vc-btn-bg); color: var(--vc-btn-text); border: 1px solid rgba(0, 0, 0, 0.0); box-shadow: 0 14px 30px rgba(201, 178, 124, 0.25); font-weight: 700; line-height: 1; transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease; } .vc-btn:hover { background: var(--vc-btn-bg-hover); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(201, 178, 124, 0.32); } /* Outline button */ .vc-btn--outline, button.vc-btn--outline, a.vc-btn--outline { background: transparent; color: var(--vc-navy-900); border: 1px solid var(--vc-btn-outline); box-shadow: none; } .vc-btn--outline:hover { background: rgba(201, 178, 124, 0.12); transform: translateY(-2px); } /* ========================= 5) Scroll Reveal (Bottom -> Up) + H1 (Left -> Right) How to use: - Add class "sr-item" to any block you want to animate - For H1: add class "sr-item sr-left" (moves left -> right) - Optional ordering: data-sr="1" data-sr="2" ... data-sr-delay="250" ========================= */ /* Initial state (hidden) */ .sr-item { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 650ms cubic-bezier(0.2, 0.65, 0.2, 1), transform 650ms cubic-bezier(0.2, 0.65, 0.2, 1); transition-delay: var(--sr-delay, 0ms); will-change: opacity, transform; } /* H1 special direction: left -> right */ .sr-item.sr-left { transform: translate3d(-26px, 0, 0); } /* Revealed state */ .sr-item.is-in { opacity: 1; transform: translate3d(0, 0, 0); } /* Reduced motion accessibility */ @media (prefers-reduced-motion: reduce) { .sr-item { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================= Brand Buttons — Visionery Consulting Firm Purpose: - Premium consulting style - Navy + Gold identity - Smooth luxury interactions ========================================= */ /* ---------- Base button reset ---------- */ .vc-btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-weight: 600; font-size: 15px; letter-spacing: 0.3px; text-decoration: none; border-radius: 8px; cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease, transform 0.25s ease, box-shadow 0.35s ease; } /* ---------- Primary (Gold) ---------- */ .vc-btn-primary, .wp-block-button.is-style-fill .wp-block-button__link { background-color: #C9B27C; color: #0B1F33; box-shadow: 0 10px 25px rgba(11, 31, 51, 0.15); } .vc-btn-primary:hover, .wp-block-button.is-style-fill .wp-block-button__link:hover { background-color: #D6C28F; color: #0B1F33; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(11, 31, 51, 0.25); } /* ---------- Secondary (Outline Navy) ---------- */ .vc-btn-outline { background: transparent; color: #0B1F33; border: 2px solid #0B1F33; } .vc-btn-outline:hover { background: #0B1F33; color: #FFFFFF; transform: translateY(-2px); } /* ---------- Dark background version ---------- */ .vc-dark .vc-btn-outline { color: #FFFFFF; border-color: #FFFFFF; } .vc-dark .vc-btn-outline:hover { background: #FFFFFF; color: #0B1F33; }