/* * Paleta CIRYON — Banco Digital * * O site é dark-only. O atributo data-theme="dark" continua fixo no * (ver index.html) apenas para que as regras `[data-theme="dark"] …` já * existentes em style.css, navigation.css, gallery.css, team.css e * inner-pages.css sigam casando. Não há mais alternância de tema. */ :root { color-scheme: dark; /* Paleta oficial da marca */ --gold: #d4af37; --gold-dark: #b8942c; /* derivado — hover/pressed */ --gold-light: #e8c96a; /* derivado — gradientes e brilhos */ --black: #0d0d0f; --black-soft: #1a1a1d; --black-mid: #2b2b2e; --off-white: #f2f2f2; /* * Aliases legados. Consumidos por ~10 arquivos CSS; os nomes --accent-blue * e --accent-green nunca guardaram azul nem verde — sempre foram dourados. */ --navy: var(--black); --navy-mid: var(--black-soft); --navy-soft: var(--black-mid); --accent-gold: var(--gold); --accent-gold-dark: var(--gold-dark); --accent-blue: var(--gold); --accent-green: var(--gold-light); /* Superfícies */ --white-color: #ffffff; --white-background: var(--black-soft); --surface-muted: var(--black); --surface-alt: var(--black-soft); --paragraph-color: #c9c9cd; --text-primary: var(--off-white); /* Marca — CTAs e destaques */ --primary-color: var(--gold); --primary-text: var(--gold); --btn-color: var(--gold); --btn-hover: var(--gold-dark); --btn-text-on-primary: var(--black); /* Hero / slideshow — overlay preto com dourado da marca */ --background-color: var(--black); --background-linear-color: linear-gradient( 115deg, rgba(13, 13, 15, 0.96) 0%, rgba(26, 26, 29, 0.82) 48%, rgba(212, 175, 55, 0.28) 100% ); --background-overlay: linear-gradient( 120deg, rgba(13, 13, 15, 0.9) 0%, rgba(212, 175, 55, 0.22) 55%, transparent 100% ); /* Seções */ --background-gallery: linear-gradient( 165deg, var(--black) 0%, var(--black-soft) 45%, var(--black-mid) 100% ); --background-contact: linear-gradient( 165deg, var(--surface-muted) 0%, var(--surface-alt) 52%, var(--black) 100% ); --background-second: var(--surface-alt); /* Gradientes de acento (ícones, underlines) */ --gradient-brand: linear-gradient( 135deg, var(--gold) 0%, var(--gold-light) 100% ); --gradient-brand-soft: linear-gradient( 90deg, rgba(212, 175, 55, 0.22) 0%, rgba(232, 201, 106, 0.16) 100% ); --accent-highlight: var(--gold); /* Navegação */ --menu-header-color: var(--black-soft); --menu-header-text: var(--off-white); --nav-surface: rgba(13, 13, 15, 0.94); --nav-border: rgba(255, 255, 255, 0.08); --nav-link: rgba(242, 242, 242, 0.82); --nav-link-hover-bg: rgba(212, 175, 55, 0.16); --nav-link-hover-text: var(--gold-light); --nav-shadow: 0 4px 28px rgba(0, 0, 0, 0.45); /* Elevação e forma */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.55); --shadow-glow-gold: 0 4px 24px rgba(212, 175, 55, 0.28); --shadow-inner-vignette: inset 0 0 100px rgba(13, 13, 15, 0.35); --border-hairline: 1px solid rgba(255, 255, 255, 0.08); --border-accent-soft: 1px solid rgba(212, 175, 55, 0.28); --section-py: clamp(3.5rem, 6vw, 5.5rem); --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Animações — curvas e durações unificadas */ --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); --ease-nav: cubic-bezier(0.22, 1, 0.36, 1); --ease-hero: cubic-bezier(0.2, 0.85, 0.35, 1); --dur-reveal: 0.88s; --dur-hero: 0.92s; --dur-nav: 1s; } /* Reveals de seção (scroll) */ @keyframes revealUpFade { from { opacity: 0; transform: translate3d(0, 48px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes revealFromLeft { from { opacity: 0; transform: translate3d(-52px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes revealFromRight { from { opacity: 0; transform: translate3d(52px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Hero / slideshow — entrada mais legível */ @keyframes heroSlideInRight { from { opacity: 0; transform: translate3d(72px, 36px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes heroSlideInLeft { from { opacity: 0; transform: translate3d(-56px, 28px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }