/* ========================================================================== ICON — design system : la scène et le verre ========================================================================== Deux classes, réutilisables partout : .icon-scene le fond bordeaux plein cadre + son halo diffus .icon-glass la carte de verre crème qui flotte dessus Usage minimal :

…

Le halo se déplace sans nouvelle classe, en posant deux variables : Le fond est bordeaux, jamais noir. Le halo est bordeaux clair, jamais blanc : une lueur chaude qui se dissout, pas un projecteur. ========================================================================== */ :root { /* ---- bordeaux : l'univers du logo -------------------------------------- */ --icon-bordeaux: #4A1215; /* le fond, partout */ --icon-bordeaux-clair: #6B1E22; /* le halo */ /* ---- crème : ce qui s'écrit sur la scène ------------------------------- */ --icon-creme: #FAF9F7; --icon-creme-60: rgba(250, 249, 247, 0.6); --icon-creme-45: rgba(250, 249, 247, 0.45); /* ---- le verre ---------------------------------------------------------- Le remplissage est un voile crème neutre — du blanc cassé, jamais du bordeaux éclairci. Ce qui fait lire le verre, c'est l'arête : un liseré clair, vif là où la lumière frappe, éteint à l'opposé. Le corps reste sobre pour que le texte crème tienne dessus. */ /* Le voile est en crème (250,249,247) et non en blanc pur : à ces opacités l'écart ne se mesure pas, mais du blanc pur refroidirait le bordeaux. C'est lui qui porte le crème — pas brightness, qui ne fait qu'éclaircir le bordeaux vu à travers. Pour rendre la carte plus crème, c'est ici. */ --icon-verre-haut: rgba(250, 249, 247, 0.11); --icon-verre-bas: rgba(250, 249, 247, 0.026); /* l'arête, du plus exposé au plus dans l'ombre */ --icon-arete-vive: rgba(255, 253, 250, 0.62); --icon-arete-tiede: rgba(255, 253, 250, 0.16); --icon-arete-eteinte: rgba(255, 253, 250, 0.05); /* ---- la géométrie ------------------------------------------------------ */ --icon-rayon: 26px; /* la carte : arrondi franc, jamais une pastille */ --icon-rayon-petit: 12px; /* champs et boutons à l'intérieur */ /* ---- polices ----------------------------------------------------------- */ --icon-logo: 'PP Editorial New', 'Cormorant', Georgia, 'Times New Roman', serif; --icon-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* ------------------------------------------------------------------ scène */ /* Le halo par défaut vient du haut, centré. Il se déplace par --halo-x/y. */ .icon-scene { --halo-x: 50%; --halo-y: 0%; min-height: 100dvh; background-color: var(--icon-bordeaux); background-image: /* la lueur : trois paliers pour qu'elle se dissolve au lieu de s'arrêter */ radial-gradient( 68% 52% at var(--halo-x) var(--halo-y), rgba(107, 30, 34, 0.92) 0%, rgba(107, 30, 34, 0.5) 34%, rgba(107, 30, 34, 0.16) 58%, rgba(107, 30, 34, 0) 76% ), /* les angles opposés se referment sur un bordeaux plus profond (#350C0F) : c'est ce qui donne le volume */ radial-gradient( 120% 100% at calc(100% - var(--halo-x)) calc(100% - var(--halo-y)), rgba(53, 12, 15, 0.75) 0%, rgba(53, 12, 15, 0) 62% ); background-attachment: fixed; color: var(--icon-creme); font-family: var(--icon-sans); } /* Le grain : on ne le voit pas, on le sent. Sans lui l'aplat fait « écran ». */ .icon-scene::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Le contenu passe devant le grain sans qu'on ait à y penser. */ .icon-scene > * { position: relative; z-index: 2; } /* ------------------------------------------------------------------ verre */ .icon-glass { position: relative; background: /* le reflet diffus qui glisse depuis le coin exposé */ radial-gradient(80% 55% at 14% -6%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 58%), /* l'épaisseur du verre, qui s'éteint vers le bas */ linear-gradient(158deg, var(--icon-verre-haut) 0%, var(--icon-verre-bas) 70%); /* saturate SOUS 1 : le bordeaux vu à travers la vitre se dégrise au lieu de rougir. C'est ce qui sépare une plaque de verre d'un filtre coloré. brightness assombrit le fond vu à travers, le voile crème pose la clarté par-dessus : c'est la tension entre les deux qui donne une vitre teintée plutôt qu'un panneau laiteux. Ne pas descendre brightness sous ~0.85, le bordeaux vire au gris à partir de là. */ backdrop-filter: blur(40px) saturate(0.72) brightness(0.94); -webkit-backdrop-filter: blur(40px) saturate(0.72) brightness(0.94); border: none; border-radius: var(--icon-rayon); /* L'ombre portée est teintée bordeaux, jamais noire — une ombre grise sur du bordeaux fait sale. Deux couches, un contact proche et une portée large, pour flotter sans être détourée. */ box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.03), 0 2px 10px rgba(30, 6, 8, 0.3), 0 30px 78px rgba(24, 5, 7, 0.55); } /* L'arête. C'est ici que le verre se voit — un filet de 1px qui fait le tour, vif dans l'angle exposé à la lumière, presque éteint à l'opposé. Un bord d'opacité constante ferait un cadre ; il faut un dégradé. La technique : on peint le dégradé sur toute la carte, puis on ne garde que le pourtour en soustrayant l'intérieur au masque. Le filet est posé par-dessus le contenu, mais il ne mesure qu'un pixel sur le bord — là où il n'y a jamais rien à lire. */ .icon-glass::after { content: ''; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient( 142deg, var(--icon-arete-vive) 0%, var(--icon-arete-tiede) 26%, var(--icon-arete-eteinte) 52%, var(--icon-arete-tiede) 78%, var(--icon-arete-vive) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* --------------------------------------------------------------- réserves */ /* Sans backdrop-filter, un voile à 8 % ne se voit plus : on rend à la carte un fond dégrisé propre, sinon elle disparaît. L'arête, elle, tient toujours — c'est elle qui porte l'effet, pas le flou. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .icon-glass { background: rgba(72, 44, 46, 0.5); } } /* Le mode léger de l'espace membre coupe déjà flous et grain sur les machines modestes. On suit la même convention plutôt que d'en inventer une seconde. */ html.perf-lite .icon-scene::after { display: none; } html.perf-lite .icon-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(72, 44, 46, 0.5); } /* Quelqu'un qui a demandé moins de transparence à son système a une raison. */ @media (prefers-reduced-transparency: reduce) { .icon-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(66, 40, 42, 0.94); } }