/*
* ══════════════════════════════════════════════════════════
* myip.casa – Navigation & Header Component
* Version : 1.1.0
* Usage :
*
* Dépendances Google Fonts (à inclure dans ) :
*
* ══════════════════════════════════════════════════════════
*/
/* ── Variables ────────────────────────────────────────── */
:root {
--nav-teal: #20B2AA;
--nav-teal-dark: #17a096;
--nav-teal-darker: #0e8f88;
--nav-teal-light: #e8f8f7;
--nav-white: #ffffff;
--nav-text: #1a1a2e;
--nav-border: #e9ecef;
--nav-shadow: 0 8px 40px rgba(0,0,0,0.10);
--nav-shadow-sm: 0 4px 20px rgba(0,0,0,0.07);
--nav-font: 'Sora', sans-serif;
--nav-mono: 'IBM Plex Mono', 'Courier New', monospace;
--nav-radius: 16px;
}
/* ── Reset minimal (scope nav) ────────────────────────── */
.site-header *, .site-header *::before, .site-header *::after {
box-sizing: border-box;
}
.site-header a { text-decoration: none; color: inherit; }
/* ── Header wrapper ───────────────────────────────────── */
.site-header {
background: var(--nav-teal);
padding: 2rem 20px 0;
text-align: center;
font-family: var(--nav-font);
}
/* ── Logo ─────────────────────────────────────────────── */
.site-logo-wrap {
width: 72px;
height: 72px;
background: var(--nav-white);
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
margin: 0 auto 1rem;
}
/* ── Site title ───────────────────────────────────────── */
.site-header h1 {
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
font-weight: 800;
color: var(--nav-white);
margin-bottom: 0.4rem;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
}
.site-header .subtitle {
font-size: 0.93rem;
color: rgba(255,255,255,0.88);
max-width: 500px;
margin: 0 auto 1.6rem;
}
/* ── Nav container ────────────────────────────────────── */
.nav-wrap {
background: rgba(255,255,255,0.14);
border-radius: 14px;
padding: 0.9rem 1rem;
display: inline-block;
max-width: 800px;
width: 100%;
margin-bottom: 0;
}
.nav-buttons {
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
/* ── Nav item (wrapper relatif pour le dropdown) ─────── */
.nav-item {
position: relative;
}
/* ── Bouton pill ──────────────────────────────────────── */
.nav-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 9px 18px;
border-radius: 100px;
background: var(--nav-white);
border: none;
font-family: var(--nav-font);
font-size: 0.8rem;
font-weight: 700;
color: var(--nav-text);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
box-shadow: 0 2px 6px rgba(0,0,0,0.07);
user-select: none;
-webkit-user-select: none;
}
.nav-btn:hover {
background: #f0fffe;
color: var(--nav-teal-dark);
}
.nav-btn.active {
background: #f0fffe;
color: var(--nav-teal-dark);
}
/* Variante CTA (ex : "Get API Key") */
.nav-btn.highlight {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
}
.nav-btn.highlight:hover {
filter: brightness(1.05);
}
/* Flèche indicateur de dropdown */
.nav-btn .nav-arrow {
display: inline-block;
font-size: 0.6rem;
transition: transform 0.2s ease;
margin-left: 1px;
}
.nav-item.open .nav-btn .nav-arrow {
transform: rotate(180deg);
}
/* ── Submenu dropdown ─────────────────────────────────── */
/*
* Comportement : ouverture/fermeture au CLIC (géré en JS),
* fermeture quand on clique en dehors.
* La classe `.open` sur .nav-item rend le menu visible.
*
* Alignement :
* - Par défaut : aligné sur le bord GAUCHE du bouton (left: 0)
* - Ajouter .submenu-right sur le .submenu pour aligner à droite
* (utile pour les items en fin de ligne, ex: "Tools")
*/
.submenu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0; /* aligné bord gauche du bouton */
background: var(--nav-white);
border: 1px solid var(--nav-border);
border-radius: 12px;
box-shadow: var(--nav-shadow);
min-width: 210px;
z-index: 300;
padding: 6px 0;
text-align: left;
opacity: 0;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease;
pointer-events: none;
}
/* Variante alignée à droite — ajouter .submenu-right sur le .submenu */
.submenu.submenu-right {
left: auto;
right: 0;
}
/* État ouvert — ajouté par JS */
.nav-item.open .submenu {
display: block;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Lien dans le submenu */
.submenu-item {
display: block;
padding: 9px 18px;
font-size: 0.81rem;
font-weight: 600;
color: var(--nav-text);
transition: background 0.1s;
white-space: nowrap;
text-align: left;
}
.submenu-item:hover,
.submenu-item.active {
background: var(--nav-teal-light);
color: var(--nav-teal-dark);
}
/* ── API live badge (eyebrow pill dans le hero) ──────── */
.ts-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
padding: 6px 18px;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
backdrop-filter: blur(6px);
color: var(--nav-white);
font-family: var(--nav-font);
}
.api-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
flex-shrink: 0;
transition: background 0.4s;
position: relative;
}
.api-dot.pulse-green { background: #4ade80; }
.api-dot.pulse-red { background: #f87171; }
.api-dot.pulse-green::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid #4ade80;
animation: nav-ping 1.4s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes nav-ping {
0% { transform: scale(1); opacity: .75; }
100% { transform: scale(2.4); opacity: 0; }
}
/* ── Responsive mobile ────────────────────────────────── */
@media (max-width: 600px) {
.nav-wrap {
padding: 0.5rem 0.5rem;
}
/* Les boutons s'empilent en colonne pleine largeur */
.nav-buttons {
flex-direction: column;
gap: 4px;
}
.nav-item {
width: 100%;
}
.nav-btn {
width: 100%;
font-size: 0.85rem;
padding: 11px 16px;
border-radius: 10px;
justify-content: space-between;
}
.site-header h1 {
font-size: 1.3rem;
}
/* Sur mobile : submenu dans le flux (position static),
pas de floating qui sort de l'écran */
.submenu,
.submenu.submenu-right {
position: static;
display: none;
transform: none;
opacity: 1;
box-shadow: none;
border: none;
border-radius: 8px;
background: rgba(255,255,255,0.08);
min-width: 0;
width: 100%;
margin-top: 3px;
padding: 2px 0;
pointer-events: auto;
transition: none;
}
.nav-item.open .submenu {
display: block;
transform: none;
}
.submenu-item {
padding: 9px 20px;
font-size: 0.82rem;
color: #1a1a2e;
border-radius: 7px;
}
.submenu-item:hover,
.submenu-item.active {
background: rgba(32,178,170,0.12);
}
}