/* ============================================================ ACKency website — TWEAKS overlay Three expressive controls that reshape the feel of the page. Activated by setting attributes on : data-temperament = cabinet | atelier | cyberdefense data-ambiance = jour | nuit data-voix = posee | directe (handled in JSX, not CSS) ============================================================ */ /* ───────────────────────────────────────────── AMBIANCE — Jour (default) / Nuit Inverts the whole tonal stack to a Bleu Nuit canvas with the cyan accent doing the lifting. Not a "dark mode" toggle — it's the cabinet's *night shift* posture. ───────────────────────────────────────────── */ html[data-ambiance="nuit"] body { background: #0E2A4F; color: #F8F8F8; } html[data-ambiance="nuit"] .ack-header { background: rgba(14, 42, 79, 0.78); border-bottom-color: rgba(123, 200, 218, 0.18); } html[data-ambiance="nuit"] .ack-logo .word, html[data-ambiance="nuit"] .ack-nav a { color: #F8F8F8; } html[data-ambiance="nuit"] .hero h1, html[data-ambiance="nuit"] .section-head h2 { color: #F8F8F8; } html[data-ambiance="nuit"] .hero h1 .accent { color: #7BC8DA; } html[data-ambiance="nuit"] .hero .lead, html[data-ambiance="nuit"] .section-head p { color: #C5CFDC; } html[data-ambiance="nuit"] .hero-visual { background: #1B3A65; border: 1px solid rgba(123, 200, 218, 0.25); } html[data-ambiance="nuit"] .svc-card, html[data-ambiance="nuit"] .contact-card, html[data-ambiance="nuit"] .contact-row, html[data-ambiance="nuit"] form { background: #1B3A65 !important; border-color: rgba(123, 200, 218, 0.18) !important; color: #F8F8F8; box-shadow: none; } html[data-ambiance="nuit"] .svc-card h3, html[data-ambiance="nuit"] .contact-name, html[data-ambiance="nuit"] .field label, html[data-ambiance="nuit"] .ack-logo .word .b { color: #F8F8F8; } html[data-ambiance="nuit"] .svc-card p, html[data-ambiance="nuit"] .contact-role, html[data-ambiance="nuit"] .contact-row .meta { color: #C5CFDC; } html[data-ambiance="nuit"] .svc-icon { background: rgba(123, 200, 218, 0.14); color: #7BC8DA; } html[data-ambiance="nuit"] .input, html[data-ambiance="nuit"] .textarea { background: #0E2A4F; color: #F8F8F8; border-color: rgba(123, 200, 218, 0.22); } html[data-ambiance="nuit"] .chip { background: rgba(123, 200, 218, 0.16); color: #A8DCE7; } html[data-ambiance="nuit"] .btn-primary { background: #7BC8DA; color: #0E2A4F; } html[data-ambiance="nuit"] .btn-primary:hover { background: #A8DCE7; } html[data-ambiance="nuit"] .btn-secondary { border-color: #7BC8DA; color: #7BC8DA; } html[data-ambiance="nuit"] .btn-ghost { color: #7BC8DA; } html[data-ambiance="nuit"] .band { background: #1B3A65; outline: 1px solid rgba(123, 200, 218, 0.22); } html[data-ambiance="nuit"] .ack-footer { background: #06182E; } /* ───────────────────────────────────────────── TEMPÉRAMENT — Cabinet (default) / Atelier / Cyberdéfense Reshapes type voice, corner language, accent treatment. ───────────────────────────────────────────── */ /* ATELIER — warmer, human, generous. Larger radii, softer eyebrow, accent slides under headlines as a highlighter sweep. */ html[data-temperament="atelier"] { --r-md: 16px; --r-lg: 22px; } html[data-temperament="atelier"] body { background: #FAF6F0; } html[data-temperament="atelier"] .hero h1, html[data-temperament="atelier"] .section-head h2 { font-weight: 700; letter-spacing: -0.025em; } html[data-temperament="atelier"] .hero h1 .accent { font-weight: 700; background: linear-gradient(180deg, transparent 62%, rgba(123, 200, 218, 0.55) 62%, rgba(123, 200, 218, 0.55) 92%, transparent 92%); color: inherit; padding: 0 4px; } html[data-temperament="atelier"] .eyebrow { text-transform: none; letter-spacing: 0; font-weight: 500; font-style: italic; font-size: 16px; color: #3E94A8; } html[data-temperament="atelier"] .svc-card, html[data-temperament="atelier"] .contact-card, html[data-temperament="atelier"] .contact-row, html[data-temperament="atelier"] .input, html[data-temperament="atelier"] .textarea, html[data-temperament="atelier"] form, html[data-temperament="atelier"] .band { border-radius: 22px; } html[data-temperament="atelier"] .svc-icon { border-radius: 50%; width: 56px; height: 56px; } html[data-temperament="atelier"] .btn { border-radius: 999px; padding: 0 26px; } html[data-temperament="atelier"] .hero-visual { border-radius: 28px; background: linear-gradient(160deg, #0E2A4F 0%, #2C4A75 100%); } /* CYBERDÉFENSE — technical, alert, console. Mono eyebrows, tighter chrome, scanlines on dark accents, sharper corners. */ html[data-temperament="cyberdefense"] { --r-md: 2px; --r-lg: 4px; } html[data-temperament="cyberdefense"] .eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.18em; color: #7BC8DA; } html[data-temperament="cyberdefense"] .eyebrow::before { content: "▌ "; color: #7BC8DA; } html[data-temperament="cyberdefense"] .hero h1, html[data-temperament="cyberdefense"] .section-head h2 { font-weight: 800; letter-spacing: -0.005em; } html[data-temperament="cyberdefense"] .hero h1 .accent { font-family: var(--font-mono); font-weight: 500; color: #7BC8DA; font-size: 0.85em; } html[data-temperament="cyberdefense"] .svc-card, html[data-temperament="cyberdefense"] .contact-card, html[data-temperament="cyberdefense"] .contact-row, html[data-temperament="cyberdefense"] .input, html[data-temperament="cyberdefense"] .textarea, html[data-temperament="cyberdefense"] form, html[data-temperament="cyberdefense"] .band, html[data-temperament="cyberdefense"] .btn { border-radius: 2px; } html[data-temperament="cyberdefense"] .svc-card { border-left: 3px solid #7BC8DA; } html[data-temperament="cyberdefense"] .svc-icon { border-radius: 2px; background: #0E2A4F; color: #7BC8DA; } html[data-temperament="cyberdefense"] .svc-card h3 { font-family: var(--font-mono); font-weight: 500; font-size: 17px; letter-spacing: 0.005em; text-transform: uppercase; } html[data-temperament="cyberdefense"] .chip { border-radius: 2px; font-family: var(--font-mono); font-weight: 500; background: transparent; border: 1px solid currentColor; color: #3E94A8; } html[data-temperament="cyberdefense"] .band { background: repeating-linear-gradient(0deg, rgba(123,200,218,0.04) 0 1px, transparent 1px 3px), #0E2A4F; } html[data-temperament="cyberdefense"] .band .stat-num { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.005em; } html[data-temperament="cyberdefense"] .band .stat-lbl { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; } html[data-temperament="cyberdefense"] .hero-visual { background: linear-gradient(0deg, rgba(123,200,218,0.05) 0 1px, transparent 1px 3px) 0 0/100% 3px, #0E2A4F; border: 1px solid #7BC8DA; border-radius: 2px; } html[data-temperament="cyberdefense"] .btn-primary { background: #0E2A4F; border: 1px solid #7BC8DA; color: #7BC8DA; } html[data-temperament="cyberdefense"] .btn-primary:hover { background: #7BC8DA; color: #0E2A4F; }