/* ============================================================ MIA — Montpellier Ivoire Association Palette : Drapeau ivoirien — Orange #F77F00 · Blanc · Vert #009A44 Région Occitanie — Rouge #C1003E · Or #F0A500 ============================================================ */ :root { /* Vert ivoirien (couleur principale) */ --primary: #00703C; --primary-dark: #004d2a; --primary-light: #00934f; /* Orange ivoirien (accent) */ --accent: #F77F00; --accent-light: #ff9d2e; /* Occitanie */ --occitanie-red: #C1003E; --occitanie-gold: #F0A500; --white: #ffffff; --page-bg: #b8dfc8; --section-bg: #f9e8c8; --section-alt-bg: #9ed4b5; --gray-50: #f0f7f2; --gray-100: #e4f0e8; --gray-200: #cce3d4; --gray-400: #8aaa94; --gray-600: #4a6652; --gray-800: #213328; --text: #1a2e20; --radius: 10px; --radius-lg: 18px; --shadow: 0 2px 16px rgba(0,112,60,.10); --shadow-md: 0 6px 32px rgba(0,112,60,.18); --transition: .22s ease; } /* ============================================================ SYSTÈME DE THÈMES — data-theme sur ============================================================ */ /* ── THÈME SOMBRE ── */ [data-theme="dark"] { --primary: #3fb950; --primary-dark: #2ea043; --primary-light: #56d364; --accent: #F77F00; --white: #161b22; --gray-50: #0d1117; --gray-100: #21262d; --gray-200: #30363d; --gray-400: #6e7681; --gray-600: #8b949e; --gray-800: #e6edf3; --text: #c9d1d9; --shadow: 0 2px 16px rgba(0,0,0,.4); --shadow-md: 0 6px 32px rgba(0,0,0,.5); --bg: #0f1117; } [data-theme="dark"] body { background: #0f1117; color: #c9d1d9; } [data-theme="dark"] .section { background: #0f1117; } [data-theme="dark"] .section-alt { background: #161b22; } [data-theme="dark"] .navbar { background: #0d1117 !important; border-bottom: 1px solid #21262d; } [data-theme="dark"] .nav-menu a { color: #8b949e; } [data-theme="dark"] .nav-menu a:hover { color: #e6edf3; } [data-theme="dark"] .footer { background: #0d1117; border-top: 1px solid #21262d; } [data-theme="dark"] .card { background: #161b22; border-color: #30363d; } [data-theme="dark"] .card h3 { color: #e6edf3; } [data-theme="dark"] .card p { color: #8b949e; } [data-theme="dark"] .page-hero { filter: brightness(.92); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #0d1117; border-color: #30363d; color: #e6edf3; } [data-theme="dark"] .db-card { background: #161b22; border-color: #30363d; } [data-theme="dark"] .auth-box { background: #161b22; border-color: #30363d; } [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4 { color: #e6edf3; } [data-theme="dark"] p { color: #8b949e; } [data-theme="dark"] .dropdown-menu { background: #161b22; border-color: #30363d; } [data-theme="dark"] .dropdown-menu a { color: #8b949e; } [data-theme="dark"] .dropdown-menu a:hover { background: #21262d; color: #3fb950; } [data-theme="dark"] .btn-outline { border-color: #3fb950; color: #3fb950; } [data-theme="dark"] .event-card { background: #161b22; border-color: #30363d; } [data-theme="dark"] .partner-card { background: #161b22; border-color: #30363d; } [data-theme="dark"] .pricing-card { background: #161b22; border-color: #30363d; } [data-theme="dark"] .tab-btn { background: #21262d; color: #8b949e; border-color: #30363d; } [data-theme="dark"] .tab-btn.active { background: #3fb950; color: #fff; } [data-theme="dark"] .tab-panel { background: #0f1117; } [data-theme="dark"] .feature-item { background: #161b22; } [data-theme="dark"] .form-group label { color: #8b949e; } [data-theme="dark"] .flag-bar { opacity: .7; } /* ── THÈME FESTIF ── */ [data-theme="festif"] { --primary: #D4A017; --primary-dark: #a87c0f; --primary-light: #e8b820; --accent: #C1003E; --white: #FFF8F0; --gray-50: #FFF3E6; --gray-100: #FFE8CC; --gray-200: #FFD6A0; --gray-400: #D4956A; --gray-600: #8B5E3C; --gray-800: #3D1F0A; --text: #3D1F0A; --shadow: 0 2px 16px rgba(212,160,23,.2); --shadow-md: 0 6px 32px rgba(212,160,23,.3); } [data-theme="festif"] body { background: #FFF8F0; } [data-theme="festif"] .section { background: #FFF8F0; } [data-theme="festif"] .section-alt { background: #FFF3E6; } [data-theme="festif"] .navbar { background: linear-gradient(135deg, #D4A017, #F77F00) !important; } [data-theme="festif"] .btn-primary { background: #D4A017; } [data-theme="festif"] .btn-primary:hover { background: #a87c0f; } [data-theme="festif"] .footer { background: linear-gradient(135deg, #3D1F0A, #6B3A1F); } [data-theme="festif"] .section-alt { background: #FFF3E6; } [data-theme="festif"] .card { background: #fff; border-color: #FFD6A0; } [data-theme="festif"] .card-icon { background: linear-gradient(135deg, #D4A017, #F77F00); } [data-theme="festif"] .tab-btn.active { background: #D4A017; } [data-theme="festif"] .label { background: rgba(212,160,23,.15); color: #a87c0f; } [data-theme="festif"] .flag-bar { background: linear-gradient(90deg, #D4A017 33%, #fff 33% 66%, #C1003E 66%); } [data-theme="festif"] .page-hero { background: linear-gradient(135deg, #D4A017 0%, #F77F00 50%, #C1003E 100%) !important; } [data-theme="festif"] .btn-outline { border-color: #D4A017; color: #D4A017; } [data-theme="festif"] .pricing-card.featured { border-color: #D4A017; } [data-theme="festif"] .event-card { border-left: 4px solid #D4A017; } [data-theme="festif"] .event-date { background: linear-gradient(135deg, #D4A017, #F77F00); } /* ── THÈME HAUTE LISIBILITÉ ── */ [data-theme="lisible"] { --primary: #005000; --primary-dark: #003000; --primary-light: #007000; --accent: #B35000; --white: #ffffff; --gray-50: #f5f5f5; --gray-100: #e8e8e8; --gray-200: #cccccc; --gray-400: #666666; --gray-600: #333333; --gray-800: #000000; --text: #000000; --shadow: 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 4px 16px rgba(0,0,0,.4); } [data-theme="lisible"] body { background: #fff; color: #000; font-size: 110%; line-height: 1.8; } [data-theme="lisible"] .navbar { background: #005000 !important; } [data-theme="lisible"] .nav-menu a { font-size: 1rem; font-weight: 600; } [data-theme="lisible"] .footer { background: #000; } [data-theme="lisible"] .card { border: 2px solid #000; } [data-theme="lisible"] .card h3 { color: #000; font-size: 1.1rem; } [data-theme="lisible"] .btn-primary { background: #005000; font-size: 1rem; font-weight: 700; padding: 1rem 2rem; } [data-theme="lisible"] .btn-primary:hover { background: #003000; } [data-theme="lisible"] .btn-outline { border: 3px solid #005000; color: #005000; font-weight: 700; } [data-theme="lisible"] a { text-decoration: underline; } [data-theme="lisible"] .tab-btn { font-size: .95rem; font-weight: 700; border: 2px solid #000; } [data-theme="lisible"] .tab-btn.active { background: #005000; color: #fff; outline: 3px solid #000; } [data-theme="lisible"] input, [data-theme="lisible"] select, [data-theme="lisible"] textarea { border: 2px solid #000; font-size: 1rem; padding: .75rem 1rem; } [data-theme="lisible"] .label { background: #000; color: #fff; font-size: .8rem; font-weight: 800; } [data-theme="lisible"] .section-header h2 { font-size: 2rem; } [data-theme="lisible"] p { font-size: 1rem; line-height: 1.9; color: #000; } [data-theme="lisible"] .event-card { border: 2px solid #000; } [data-theme="lisible"] .partner-card { border: 2px solid #000; } /* ── HERO PHOTO : support background-image ── */ .page-hero { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text); background: var(--page-bg); line-height: 1.65; min-height: 100vh; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.6rem; border-radius: 50px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); border: 2px solid transparent; } .btn-primary { background: var(--accent); color: var(--white); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-light); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(201,149,42,.35); } .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); } .btn-outline:hover { background: rgba(255,255,255,.12); } .btn-dark { background: var(--primary); color: var(--white); border-color: var(--primary); } .btn-dark:hover { background: var(--primary-dark); transform: translateY(-2px); } /* ── BANDEAU TRICOLORE IVOIRIEN ── */ .flag-bar { height: 4px; background: linear-gradient(to right, #F77F00 33.33%, #ffffff 33.33%, #ffffff 66.66%, #009A44 66.66% ); position: fixed; top: 0; left: 0; right: 0; z-index: 1001; } /* ── NAVBAR ── */ .navbar { position: fixed; top: 4px; left: 0; right: 0; z-index: 1000; background: var(--primary); box-shadow: 0 2px 20px rgba(0,0,0,.3); transition: background var(--transition); } /* Emblème Occitanie dans la navbar — côté droit */ .nav-occitanie { display: flex; align-items: center; margin-left: .75rem; flex-shrink: 0; order: 10; /* pousse l'emblème tout à droite */ } .nav-occitanie img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); transition: transform var(--transition); } .nav-occitanie img:hover { transform: scale(1.1); } @media (max-width: 480px) { .nav-occitanie { display: none; } } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 68px; } .nav-logo { display: flex; align-items: center; gap: .75rem; font-size: 1.15rem; font-weight: 700; color: var(--white); letter-spacing: .02em; } .nav-logo .logo-icon { width: 42px; height: 42px; background: var(--accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .nav-menu { display: flex; align-items: center; gap: .2rem; } .nav-menu a { color: rgba(255,255,255,.85); font-size: .88rem; font-weight: 500; padding: .45rem .75rem; border-radius: 6px; transition: background var(--transition), color var(--transition); white-space: nowrap; } .nav-menu a:hover, .nav-menu a.active { background: rgba(255,255,255,.12); color: var(--white); } .nav-menu .btn-nav { background: var(--accent); color: var(--white); padding: .45rem 1rem; border-radius: 50px; margin-left: .5rem; } .nav-menu .btn-nav:hover { background: var(--accent-light); } /* Hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .5rem; background: none; border: none; } .nav-toggle span { display: block; width: 26px; height: 2.5px; background: var(--white); border-radius: 3px; transition: transform .25s, opacity .25s; } .nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Dropdown */ .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 200px; padding: .5rem 0; z-index: 200; } .dropdown-menu a { display: block; color: var(--gray-800) !important; padding: .55rem 1.2rem; font-size: .88rem; } .dropdown-menu a:hover { background: var(--gray-100); color: var(--primary) !important; } .dropdown:hover .dropdown-menu, .dropdown.open .dropdown-menu { display: block; } /* ── PAGE LAYOUT ── */ .page-content { padding-top: 72px; } /* 4px flag-bar + 68px navbar */ /* ── HERO ── */ .hero { background: linear-gradient(rgba(0,40,15,.6),rgba(0,70,30,.5)), url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1400&h=700&auto=format&fit=crop&q=80') center/cover no-repeat; color: var(--white); padding: 6rem 1.5rem 5rem; text-align: center; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .hero-content { position: relative; max-width: 780px; margin: 0 auto; } .hero-badge { display: inline-block; background: rgba(201,149,42,.25); border: 1px solid rgba(201,149,42,.5); color: var(--accent-light); padding: .35rem 1rem; border-radius: 50px; font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.2; margin-bottom: 1.2rem; letter-spacing: -.01em; } .hero h1 span { color: var(--accent-light); } .hero p { font-size: 1.1rem; color: rgba(255,255,255,.85); margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero-stats { display: flex; gap: 2.5rem; justify-content: center; margin-top: 3.5rem; flex-wrap: wrap; } .hero-stat { text-align: center; } .hero-stat strong { display: block; font-size: 2rem; font-weight: 800; color: var(--accent-light); } .hero-stat span { font-size: .85rem; color: rgba(255,255,255,.7); } /* ── SECTIONS ── */ .section { padding: 5rem 1.5rem; background: var(--section-bg); } .section-alt { background: var(--section-alt-bg); } .container { max-width: 1200px; margin: 0 auto; } .section-header { text-align: center; margin-bottom: 3rem; } .section-header .label { display: inline-block; background: rgba(201,149,42,.12); color: var(--accent); padding: .3rem .9rem; border-radius: 50px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; } .section-header h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--primary); margin-bottom: .75rem; line-height: 1.25; } .section-header p { color: var(--gray-600); max-width: 600px; margin: 0 auto; font-size: 1.02rem; } /* ── CARDS GRID ── */ .cards-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); border: 1px solid var(--gray-200); transition: transform var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.2rem; } .card h3 { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: .6rem; } .card p { color: var(--gray-600); font-size: .93rem; line-height: 1.6; } .card-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent); font-size: .88rem; font-weight: 600; margin-top: 1rem; transition: gap var(--transition); } .card-link:hover { gap: .6rem; } /* ── PAGE HERO (inner pages) ── */ .page-hero { background-image: linear-gradient(135deg, var(--primary-dark), var(--primary)); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--white); padding: 4rem 1.5rem 3rem; text-align: center; } .page-hero .label { display: inline-block; background: rgba(201,149,42,.25); color: var(--accent-light); padding: .3rem .9rem; border-radius: 50px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; } .page-hero h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: .75rem; } .page-hero p { color: rgba(255,255,255,.8); max-width: 560px; margin: 0 auto; } /* ── FEATURES LIST ── */ .features-list { display: flex; flex-direction: column; gap: 1rem; } .feature-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.5rem; background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); box-shadow: var(--shadow); } .feature-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; } .feature-item h4 { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: .25rem; } .feature-item p { font-size: .9rem; color: var(--gray-600); } /* ── FORM ── */ .form-group { margin-bottom: 1.3rem; } .form-group label { display: block; font-size: .88rem; font-weight: 600; color: var(--gray-800); margin-bottom: .45rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius); font-size: .95rem; color: var(--text); background: var(--white); transition: border-color var(--transition), box-shadow var(--transition); font-family: inherit; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,46,90,.1); } .form-group textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* ── FOOTER ── */ .footer { background: var(--primary-dark); color: rgba(255,255,255,.75); padding: 4rem 1.5rem 2rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; max-width: 1200px; margin: 0 auto 3rem; } .footer-brand .logo-icon { width: 44px; height: 44px; background: var(--accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: .75rem; } .footer-brand p { font-size: .9rem; line-height: 1.7; margin-top: .75rem; } .footer-col h4 { color: var(--white); font-size: .95rem; font-weight: 700; margin-bottom: 1rem; } .footer-col ul { display: flex; flex-direction: column; gap: .5rem; } .footer-col ul a { color: rgba(255,255,255,.65); font-size: .88rem; transition: color var(--transition); } .footer-col ul a:hover { color: var(--accent-light); } .footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .83rem; color: rgba(255,255,255,.45); } .footer-bottom a { color: rgba(255,255,255,.6); } .footer-bottom a:hover { color: var(--accent-light); } /* ── BADGE ── */ .badge { display: inline-flex; align-items: center; padding: .25rem .75rem; border-radius: 50px; font-size: .78rem; font-weight: 600; } .badge-primary { background: rgba(26,46,90,.1); color: var(--primary); } .badge-accent { background: rgba(201,149,42,.15); color: var(--accent); } .badge-green { background: rgba(34,197,94,.12); color: #16a34a; } .badge-red { background: rgba(239,68,68,.12); color: #dc2626; } /* ── TIMELINE ── */ .timeline { position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: .6rem; top: 0; bottom: 0; width: 2px; background: var(--gray-200); } .timeline-item { position: relative; margin-bottom: 2rem; } .timeline-item::before { content: ''; position: absolute; left: -1.65rem; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--white); box-shadow: 0 0 0 2px var(--accent); } .timeline-item h4 { font-weight: 700; color: var(--primary); margin-bottom: .25rem; } .timeline-item p { font-size: .9rem; color: var(--gray-600); } /* ── TABS ── */ .tabs { border-bottom: 2px solid var(--gray-200); display: flex; gap: .25rem; margin-bottom: 2rem; overflow-x: auto; } .tab-btn { padding: .7rem 1.2rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: .9rem; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: color var(--transition), border-color var(--transition); white-space: nowrap; } .tab-btn:hover { color: var(--primary); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── ACCORDION ── */ .accordion { border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; } .accordion-item { border-bottom: 1px solid var(--gray-200); } .accordion-item:last-child { border-bottom: none; } .accordion-btn { width: 100%; background: none; border: none; padding: 1.2rem 1.5rem; display: flex; align-items: center; justify-content: space-between; font-size: .97rem; font-weight: 600; color: var(--primary); cursor: pointer; text-align: left; transition: background var(--transition); } .accordion-btn:hover { background: var(--gray-50); } .accordion-btn .chevron { transition: transform .25s; font-size: .75rem; } .accordion-btn.open .chevron { transform: rotate(180deg); } .accordion-body { display: none; padding: 0 1.5rem 1.2rem; color: var(--gray-600); font-size: .93rem; line-height: 1.7; } .accordion-body.open { display: block; } /* ── ALERT ── */ .alert { display: flex; gap: .75rem; padding: 1rem 1.25rem; border-radius: var(--radius); font-size: .92rem; margin-bottom: 1.5rem; } .alert-info { background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.2); color: #1d4ed8; } .alert-success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.2); color: #15803d; } .alert-warning { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.2); color: #b45309; } /* ── EVENT CARD ── */ .event-card { display: grid; grid-template-columns: 80px 1fr; gap: 1.25rem; background: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow); border: 1px solid var(--gray-200); transition: transform var(--transition), box-shadow var(--transition); align-items: start; } .event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .event-date { background: var(--primary); border-radius: 10px; text-align: center; padding: .6rem .5rem; color: var(--white); } .event-date .day { font-size: 1.6rem; font-weight: 800; line-height: 1; } .event-date .month { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; } .event-info h4 { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: .35rem; } .event-info p { font-size: .88rem; color: var(--gray-600); margin-bottom: .6rem; } .event-meta { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; } .event-meta span { font-size: .8rem; color: var(--gray-400); display: flex; align-items: center; gap: .3rem; } /* ── PARTNER CARD ── */ .partner-card { background: var(--white); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow); border: 1px solid var(--gray-200); text-align: center; transition: transform var(--transition), box-shadow var(--transition); } .partner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .partner-logo { width: 72px; height: 72px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem; } .partner-card h4 { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: .3rem; } .partner-card p { font-size: .85rem; color: var(--gray-600); } /* ── LOGIN BOX ── */ .auth-box { max-width: 440px; margin: 0 auto; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 2.5rem; border: 1px solid var(--gray-200); } .auth-box h2 { font-size: 1.5rem; font-weight: 800; color: var(--primary); margin-bottom: .5rem; } .auth-box .subtitle { color: var(--gray-600); font-size: .93rem; margin-bottom: 2rem; } /* ── PRICING ── */ .pricing-card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; border: 2px solid var(--gray-200); text-align: center; position: relative; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .pricing-card.featured { border-color: var(--accent); } .pricing-featured-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--white); padding: .25rem .85rem; border-radius: 50px; font-size: .75rem; font-weight: 700; } .pricing-price { font-size: 2.8rem; font-weight: 800; color: var(--primary); line-height: 1; margin: 1rem 0 .25rem; } .pricing-price span { font-size: 1rem; font-weight: 400; color: var(--gray-600); } .pricing-perks { text-align: left; margin: 1.5rem 0; display: flex; flex-direction: column; gap: .6rem; } .pricing-perks li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--gray-800); } .pricing-perks li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; } /* ── MAP PLACEHOLDER ── */ .map-placeholder { background: var(--gray-100); border-radius: var(--radius-lg); height: 300px; display: flex; align-items: center; justify-content: center; font-size: 3rem; border: 1px solid var(--gray-200); } /* ── RESPONSIVE ── */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-toggle { display: flex; } .nav-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: var(--primary-dark); flex-direction: column; align-items: flex-start; gap: 0; padding: 1.5rem; overflow-y: auto; } .nav-menu.open { display: flex; } .nav-menu a { width: 100%; padding: .9rem 1rem; border-radius: 8px; font-size: .97rem; } .nav-menu .btn-nav { margin-left: 0; margin-top: .5rem; width: 100%; justify-content: center; } .dropdown-menu { position: static; box-shadow: none; background: rgba(255,255,255,.06); border-radius: 8px; margin-top: .25rem; display: none !important; } .dropdown:hover .dropdown-menu { display: none !important; } .dropdown.open .dropdown-menu { display: block !important; } .dropdown-menu a { color: rgba(255,255,255,.8) !important; } .dropdown-menu a:hover { color: var(--white) !important; background: rgba(255,255,255,.08); } .form-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; text-align: center; } .hero { padding: 4rem 1.2rem 3.5rem; } .section { padding: 3.5rem 1.2rem; } .event-card { grid-template-columns: 1fr; } .event-date { display: flex; gap: .5rem; align-items: center; width: fit-content; } .hero-stats { gap: 1.5rem; } } @media (max-width: 480px) { .cards-grid { grid-template-columns: 1fr; } .auth-box { padding: 1.75rem 1.25rem; } .btn { padding: .65rem 1.3rem; font-size: .9rem; } }