/* BLACKHAWK : mêmes variables et même verre que custom.css de la Homepage */ /* ---------- 1. VARIABLES BLACKHAWK ---------- */ :root { --bh-bg: #0A0D14; /* fond très sombre */ --bh-bg-top: #101826; /* haut de page : bleu-ardoise sombre */ --bh-bg-bot: #07090E; /* bas de page */ --bh-fg: #EDF0F7; /* texte et logo */ --bh-accent: #F7B145; /* ambre : l'œil du faucon (accent UNIQUE) */ --bh-ok: #5CCB8F; /* vert discret */ --bh-bad: #E5646B; /* rouge sobre */ --bh-muted: rgba(237, 240, 247, 0.58); --bh-faint: rgba(237, 240, 247, 0.40); --bh-radius: 22px; /* FLOU DU VERRE : un flou fort (20 px) rend les cartes "opaques" car il efface tout ce qui passe dessous (points de la constellation, halos). 4 px = verre dépoli léger qui laisse voir le fond. Monter à 8 px pour un verre plus laiteux, 0 pour du verre transparent. */ --bh-blur: blur(4px) saturate(145%); --bh-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.80), 0 1px 0 rgba(255, 255, 255, 0.05) inset; } @font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")} @font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2")} @font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")} @font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2) format("woff2")} *{box-sizing:border-box} html{background:var(--bh-bg);color-scheme:dark} body,button,input{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} body{margin:0;min-height:100vh;color:var(--bh-fg);display:flex;flex-direction:column;align-items:center; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scrollbar-width:none} ::-webkit-scrollbar{display:none} ::selection{background:rgba(247,177,69,.30)} /* ---------- 3. FOND : couleur unie + aurora très lente (CSS pur) ---------- */ /* fond : bleu-ardoise très sombre en haut, qui s'assombrit vers le bas (pas de noir pur) */ html { background: linear-gradient(180deg, var(--bh-bg-top) 0%, var(--bh-bg) 55%, var(--bh-bg-bot) 100%) fixed !important; background-color: var(--bh-bg) !important; color-scheme: dark; } body, #__next, #page_wrapper, #inner_wrapper { /* [F1] on laisse voir l'aurora */ background: transparent !important; } /* >>> FOND : L'AMBRE ÉMANE DE L'ŒIL DU GRAND FAUCON EN FILIGRANE <<< Couches, de l'arrière vers l'avant (z-index négatif = derrière tout le contenu) : html::before z-4 lueur ambre centrée sur l'ŒIL du grand faucon html::after z-3 grille de points (plus nette près de l'œil et au centre) #page_wrapper::before z-2 grand faucon en filigrane (blackhawk-symbol.svg), très discret #page_wrapper::after z-2 l'ŒIL seul, en ambre net (même dessin, même place) body::after z+ grain fin par-dessus (ne capte aucun clic) LA POSITION DE L'ŒIL EST CALCULÉE (pas mesurée) : le faucon est posé en bas à droite avec background-size "auto var(--bh-mark-h)" et background-position "calc(100% + 9vh) calc(100% + 10vh)". Largeur du dessin = hauteur x 1,1716 (viewBox 1345x1148). L'œil est à 42,21 % de la largeur et 28,91 % de la hauteur du dessin. x = 100vw + 9vh - largeur x 0,5779 y = 110vh - hauteur x 0,7109 -> si on change la taille ou la position du faucon, MODIFIER AUSSI ces deux lignes. Tout est en vh / vw / vmax : ça s'adapte à toutes les résolutions. POINTS FRAGILES : [F1] html / body / #page_wrapper (pseudo-éléments). */ :root { --bh-top: clamp(26px, 5vh, 54px); /* marge au-dessus du petit logo */ --bh-logo-h: clamp(40px, 3.2vh, 62px); /* hauteur du petit logo du haut */ --bh-mark-h: 74vh; /* hauteur du grand faucon en filigrane */ --bh-mark-w: calc(var(--bh-mark-h) * 1.1716); --bh-eye-x: calc(100vw + 9vh - var(--bh-mark-w) * 0.5779); /* œil du grand faucon : x */ --bh-eye-y: calc(110vh - var(--bh-mark-h) * 0.7109); /* œil du grand faucon : y */ --bh-eye-pop: .90; /* opacité de l'œil ambre net (le reste du faucon est à --bh-mark) */ --bh-eye-core: .78; /* point lumineux sur l'œil */ --bh-eye-glow: .28; /* lueur proche */ --bh-eye-wide: .07; /* lumière diffuse lointaine (très discrète) */ --bh-grid: .05; /* grille de points (3 à 5 %) */ --bh-mark: .045; /* grand faucon en filigrane (3 à 5 %) */ --bh-grain: .045; /* grain (≈ 4 %) */ } /* lueur de l'œil : trois dégradés superposés (point, lueur, diffusion), qui "respire" lentement */ html::before { content: ""; position: fixed; z-index: -4; pointer-events: none; left: var(--bh-eye-x); top: var(--bh-eye-y); width: 130vh; height: 130vh; /* pourcentages ci-dessous = part de 65 vh de rayon */ translate: -50% -50%; /* centre le carré sur l'œil */ background: radial-gradient(circle closest-side, rgba(255, 214, 140, var(--bh-eye-core)) 0, rgba(247, 177, 69, calc(var(--bh-eye-core) * .45)) 1.6%, rgba(247, 177, 69, 0) 5.2%), radial-gradient(circle closest-side, rgba(247, 177, 69, var(--bh-eye-glow)) 0, rgba(247, 177, 69, calc(var(--bh-eye-glow) * .33)) 10%, rgba(247, 177, 69, 0) 40%), radial-gradient(circle closest-side, rgba(247, 177, 69, var(--bh-eye-wide)) 0, rgba(247, 177, 69, 0) 100%); animation: bh-breathe 6s ease-in-out infinite alternate; /* aller 6 s + retour 6 s = cycle de 12 s */ will-change: scale, opacity; } @keyframes bh-breathe { /* la lueur grandit un peu et s'adoucit... */ from { scale: 1; opacity: 1; } to { scale: 1.14; opacity: .70; } } @keyframes bh-eye-breathe { /* ...pendant que l'œil net s'adoucit aussi (même rythme) */ from { opacity: var(--bh-eye-pop); } to { opacity: calc(var(--bh-eye-pop) * .70); } } /* grille de points : visible au centre et autour de l'œil, estompée vers les bords */ html::after { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; opacity: var(--bh-grid); background-image: radial-gradient(circle, #EDF0F7 1px, transparent 1.3px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 6%, transparent 100%), radial-gradient(circle 42vh at var(--bh-eye-x) var(--bh-eye-y), #000 4%, transparent 100%); mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 6%, transparent 100%), radial-gradient(circle 42vh at var(--bh-eye-x) var(--bh-eye-y), #000 4%, transparent 100%); } /* faucon en filigrane : très grand, en bas à droite, coupé par le bord de l'écran */ #page_wrapper::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: var(--bh-mark); background: url("/blackhawk-symbol.svg") no-repeat; background-size: auto var(--bh-mark-h); background-position: calc(100% + 9vh) calc(100% + 10vh); } /* l'ŒIL seul, en ambre net : même dessin, même taille, même position que le faucon */ #page_wrapper::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: var(--bh-eye-pop); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1345 1148'%3E%3Cpath fill='%23F7B145' d='M620.1,289.1 L502.4,339.4 L580.7,367.1Z'/%3E%3C/svg%3E") no-repeat; background-size: auto var(--bh-mark-h); background-position: calc(100% + 9vh) calc(100% + 10vh); animation: bh-eye-breathe 6s ease-in-out infinite alternate; } /* grain fin sur toute la page (SVG feTurbulence en data URI, aucun fichier externe) */ body::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; /* au-dessus de tout, sans gêner les clics */ pointer-events: none; opacity: var(--bh-grain); background-image: url("data:image/svg+xml,"); background-size: 220px 220px; } /* mobile : lueur fixe (pas de respiration), grille et filigrane plus discrets */ @media (max-width: 767px) { :root { --bh-top: 24px; --bh-mark-h: 52vh; } html::before, #page_wrapper::after { animation: none; will-change: auto; } html::after { opacity: calc(var(--bh-grid) * .6); background-size: 24px 24px; } #page_wrapper::before { opacity: calc(var(--bh-mark) * .7); } body::after { opacity: calc(var(--bh-grain) * .8); } } /* mouvement réduit : la lueur ne respire plus */ @media (prefers-reduced-motion: reduce) { html::before, #page_wrapper::after { animation: none; will-change: auto; } } /* logo : symbole + BLACKHAWK espacé */ header{margin:clamp(26px,6vh,64px) 16px 26px;text-align:center;user-select:none} header a{text-decoration:none;display:block} header img{height:44px;width:auto;display:block;margin:0 auto 14px} header b{display:block;font-weight:700;font-size:.78rem;line-height:1;letter-spacing:.52em;text-indent:.52em; text-transform:uppercase;color:rgba(237,240,247,.80)} header small{display:block;margin-top:10px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bh-faint);font-weight:600} main{width:100%;max-width:560px;padding:0 16px 56px} /* cartes glass */ .card{position:relative;border-radius:var(--bh-radius);padding:24px;margin-bottom:16px; background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.028)); -webkit-backdrop-filter:var(--bh-blur);backdrop-filter:var(--bh-blur);box-shadow:var(--bh-shadow); transition:transform .28s ease,background .28s ease,box-shadow .28s ease} .card::before,.drop::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none; background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 38%,rgba(255,255,255,.02) 62%,rgba(247,177,69,.24)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .card:hover{transform:translateY(-3px);background:linear-gradient(150deg,rgba(255,255,255,.115),rgba(255,255,255,.045)); box-shadow:0 26px 56px -22px rgba(0,0,0,.85),0 0 0 1px rgba(247,177,69,.10),0 1px 0 rgba(255,255,255,.07) inset} h1{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bh-faint);margin:0 0 10px} p{color:var(--bh-muted);margin:0 0 16px;line-height:1.55;font-size:.92rem} input[type=password],input[type=text]{width:100%;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.045);color:var(--bh-fg);font:inherit;margin-bottom:12px;transition:border-color .2s,background .2s} input:focus{outline:0;border-color:rgba(247,177,69,.55);background:rgba(255,255,255,.07)} button:focus-visible,.drop:focus-visible{outline:2px solid rgba(247,177,69,.55);outline-offset:2px} button{font:inherit;font-weight:600;font-size:.9rem;border:1px solid rgba(247,177,69,.35);border-radius:999px;padding:10px 20px;cursor:pointer; background:rgba(247,177,69,.12);color:var(--bh-accent);transition:background .2s,transform .2s,box-shadow .2s} button:hover{background:rgba(247,177,69,.22);box-shadow:0 0 22px -6px rgba(247,177,69,.55)} button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:default;box-shadow:none} button.ghost{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:var(--bh-muted);padding:8px 14px;font-weight:500} button.ghost:hover{color:var(--bh-fg);background:rgba(255,255,255,.10);box-shadow:none} .drop{position:relative;border-radius:var(--bh-radius);padding:36px 16px;text-align:center;cursor:pointer;color:var(--bh-muted); background:rgba(255,255,255,.03);transition:background .25s,transform .25s,box-shadow .25s} .drop::before{background:repeating-linear-gradient(90deg,rgba(237,240,247,.28) 0 6px,transparent 6px 12px); -webkit-mask:none;mask:none;padding:0;background:none;border:1.5px dashed rgba(237,240,247,.24);inset:0} .drop.over,.drop:hover{background:rgba(247,177,69,.06);box-shadow:0 0 36px -10px rgba(247,177,69,.45)} .drop.over::before,.drop:hover::before{border-color:rgba(247,177,69,.7)} .drop svg{width:30px;height:30px;stroke:var(--bh-accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto 10px;opacity:.9} .row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:11px 0;border-top:1px solid rgba(255,255,255,.07)} .row:first-child{border-top:0} .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;font-weight:500} .size{color:var(--bh-faint);font-size:.8rem;white-space:nowrap} .link{display:flex;gap:8px}.link input{margin:0} .pill{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bh-faint);margin-right:10px;flex:none} .pill.ok{background:var(--bh-ok);box-shadow:0 0 0 3px rgba(92,203,143,.14)} .pill.bad{background:var(--bh-bad);box-shadow:0 0 0 3px rgba(229,100,107,.16)} .bar{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:6px} .bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,rgba(247,177,69,.55),var(--bh-accent));transition:width .2s} .err{color:var(--bh-bad);font-size:.88rem;min-height:1.2em;margin:0 0 8px} .hint{color:var(--bh-faint);font-size:.8rem} .hidden{display:none!important} .stage{display:flex;justify-content:center;margin:4px 0 6px} .stage canvas{width:100%;max-width:520px;height:auto;aspect-ratio:520/130} /* apparition en cascade (bh-rise de la Homepage) */ :root{--bh-ease:cubic-bezier(.2,.75,.2,1)} @keyframes bh-rise{from{opacity:0;transform:translate3d(0,14px,0);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}} .reveal{animation:bh-rise .55s var(--bh-ease) calc(.1s + var(--i,0)*90ms) backwards} @media(prefers-reduced-motion:reduce){.reveal{animation:none}.card,.drop,button{transition:none}} @media(max-width:767px){.card{border-radius:18px;padding:20px}}