/* ============================================================ shared.css — Auréa Gems Investment Styles partagés entre toutes les pages : nav, footer, boutons. Charger APRÈS tokens.css et base.css. ============================================================ */ /* ---------------------------------------------------------- VARIABLES locales (couleurs nommées pour lisibilité) ---------------------------------------------------------- */ :root { --obsidienne: #0C0B09; --papier: #F2EFE8; --encre: #1A1712; --or: #D4A017; --or-pale: #B8860B; --texte: #A09080; --texte-doux: #7A6E64; --texte-mute: #4A4038; --texte-mini: #776C60; --regle: rgba(212,160,23,0.12); --nav-h: 72px; } /* ---------------------------------------------------------- POLICES (si pas chargées via dans le ) ---------------------------------------------------------- */ /* ---------------------------------------------------------- NAV — fixe, top, full-width ---------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(12,11,9,0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--regle); } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; width: 100%; display: flex; align-items: center; gap: 1.5rem; } /* Logo / marque */ .nav-brand { text-decoration: none; flex-shrink: 0; line-height: 1; } .nav-brand-mark { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; font-weight: 500; color: var(--papier); letter-spacing: 0.025em; } .nav-brand-mark em { font-style: italic; color: var(--or); } .nav-brand-sub { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.14em; color: #8A7E70; margin-top: 2px; } /* Menu desktop */ .nav__menu { display: flex; align-items: center; gap: 0.125rem; margin-left: auto; } .nav__menu a { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texte-doux); text-decoration: none; padding: 0.4rem 0.7rem; border-radius: 2px; transition: color 0.2s, background 0.2s; } .nav__menu a:hover { color: var(--papier); background: rgba(242,239,232,0.06); } .nav__menu a.is-active { color: var(--or); } /* CTA desktop */ .nav__cta { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--obsidienne); background: var(--or); text-decoration: none; padding: 0.5rem 1.1rem; border-radius: 2px; white-space: nowrap; transition: opacity 0.2s; flex-shrink: 0; } .nav__cta:hover { opacity: 0.85; } /* Instagram icon — nav (desktop only) */ .nav__instagram { display: flex; align-items: center; justify-content: center; color: #8A7E70; transition: color 0.2s; flex-shrink: 0; padding: 0 0.15rem; } .nav__instagram:hover { color: var(--or); } /* Hamburger mobile */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; } .nav__hamburger span { display: block; width: 22px; height: 1.5px; background: var(--texte-doux); transition: all 0.25s ease; transform-origin: center; } .nav__hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav__hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Drawer mobile */ .nav__drawer { position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--obsidienne); border-bottom: 1px solid rgba(212,160,23,0.15); padding: 1.5rem 32px 2rem; display: flex; flex-direction: column; gap: 0; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 0.24s ease, opacity 0.24s ease; z-index: 99; } .nav__drawer.is-open { transform: translateY(0); opacity: 1; pointer-events: all; } .nav__drawer a { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texte-doux); text-decoration: none; padding: 0.75rem 0; border-bottom: 1px solid rgba(242,239,232,0.05); transition: color 0.2s; } .nav__drawer a:last-child { border-bottom: none; } .nav__drawer a:hover, .nav__drawer a.is-active { color: var(--papier); } .nav__drawer .drawer-cta { margin-top: 1.25rem; color: var(--or); border-bottom: none; padding-top: 1.25rem; border-top: 1px solid rgba(212,160,23,0.1); } /* ---------------------------------------------------------- BOUTONS ---------------------------------------------------------- */ .btn { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; padding: 0.85rem 1.75rem; border-radius: 2px; transition: all 0.2s; cursor: pointer; border: none; line-height: 1; } .btn-primary { background: var(--or); color: var(--obsidienne); } .btn-primary:hover { opacity: 0.88; } .btn-ghost { border: 1px solid rgba(212,160,23,0.3); color: var(--texte-doux); background: transparent; } .btn-ghost:hover { border-color: var(--or); color: var(--or); } .btn-ghost-dark { border: 1px solid rgba(26,23,18,0.25); color: var(--texte-mute); background: transparent; } .btn-ghost-dark:hover { border-color: var(--or-pale); color: var(--or-pale); } /* ---------------------------------------------------------- FOOTER ---------------------------------------------------------- */ .footer { background: var(--obsidienne); border-top: 1px solid rgba(242,239,232,0.05); padding: 2rem 0; } .footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texte-mini); } .footer__links { display: flex; gap: 1.5rem; flex-wrap: wrap; } .footer__links a { color: var(--texte-mini); text-decoration: none; transition: color 0.2s; } .footer__links a:hover { color: var(--or); } .footer-icon { display: flex; align-items: center; } /* ---------------------------------------------------------- REVEAL — fade-in on scroll ---------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-reveal][data-visible] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---------------------------------------------------------- RESPONSIVE ---------------------------------------------------------- */ @media (max-width: 768px) { .nav-inner { padding: 0 20px; } .nav__menu, .nav__cta, .nav__instagram { display: none; } .nav__hamburger { display: flex; } .nav__drawer { padding: 1.5rem 20px 2rem; } .footer__inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 0 20px; } } /* ---------------------------------------------------------- SNIPPET JS mobile nav (inlinable pattern) ---------------------------------------------------------- */