/* Coin District — shared styles for every mockup page. Component classes are plain CSS so they work with the Tailwind Play CDN. */ :root { --primary: #630ed4; --primary-container: #7c3aed; --secondary: #4d3ee5; --surface: #fdf8ff; --surface-low: #f7f1ff; --surface-container: #f2ebff; --surface-high: #ece4ff; --surface-highest: #e7deff; --on-surface: #1e055a; --on-surface-variant: #4a4455; --outline-variant: #ccc3d8; --error: #ba1a1a; } html { scroll-behavior: smooth; } body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; background-color: var(--surface); color: var(--on-surface); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .font-headline { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; } ::selection { background: #eaddff; color: #25005a; } .tabular { font-variant-numeric: tabular-nums; } .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; vertical-align: middle; line-height: 1; } .material-symbols-outlined.fill, .fill-1 { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Keyboard focus always visible */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } /* « hidden » doit cacher, quelles que soient les classes : sans cela un bouton (display: inline-flex) ou une ligne flex restait visible malgre l'attribut. */ [hidden] { display: none !important; } /* ── Buttons ─────────────────────────────────────────────────────────── */ .btn-primary, .btn-secondary, .btn-ghost, .btn-tonal { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: .875rem; line-height: 1.25rem; border-radius: 1rem; padding: .75rem 1.5rem; transition: filter .2s, background-color .2s, transform .15s, color .2s; white-space: nowrap; cursor: pointer; text-decoration: none; max-width: 100%; } /* Sur telephone un libelle peut depasser la largeur de l'ecran : l'anglais tient, le francais et l'allemand non. Le bouton se replie alors sur deux lignes au lieu de pousser toute la page vers la droite. */ @media (max-width: 480px) { /* Un mot compose allemand (« Datenschutzerklarung ») peut etre plus large que l'ecran. La propriete s'herite : posee sur body, elle vaut partout. « anywhere » et non « break-word », parce que lui seul reduit la largeur minimale d'un element dans une rangee flex. La cesure suit la langue de la page, que i18n.js inscrit sur . */ /* « break-word » partout : un mot trop long se coupe quand il deborde, sans rien changer a la place que les elements se donnent. « anywhere », essaye d'abord, reduisait la largeur minimale de tout a une lettre : dans une rangee serree, les libelles se brisaient en plein mot (« AMO UNT »). On le reserve aux grands titres, ou un mot compose allemand n'a pas d'autre issue. */ body { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } h1, h2 { overflow-wrap: anywhere; } /* Les petits libelles ne se cesurent pas : coupes, ils deviennent illisibles. */ .eyebrow, .chip, .field-label, .btn-primary, .btn-secondary, .btn-ghost, .btn-tonal, th { hyphens: manual; -webkit-hyphens: manual; } /* Une cellule de grille refuse par defaut de descendre sous la largeur de son contenu : un seul titre long elargit alors toute la page. Deux ecrans en avaient souffert ; la regle protege les 153. */ .grid > * { min-width: 0; } .tabular, .material-symbols-outlined { hyphens: manual; -webkit-hyphens: manual; } .btn-primary, .btn-secondary, .btn-ghost, .btn-tonal { white-space: normal; text-align: center; } .btn-primary .material-symbols-outlined, .btn-secondary .material-symbols-outlined, .btn-ghost .material-symbols-outlined, .btn-tonal .material-symbols-outlined { flex-shrink: 0; } } .btn-primary { color: #fff; background-image: linear-gradient(135deg, var(--primary), var(--primary-container)); box-shadow: 0 12px 24px rgba(99, 14, 212, .22); } .btn-primary:hover { filter: brightness(1.08); } .btn-primary:active, .btn-secondary:active, .btn-tonal:active { transform: scale(.98); } .btn-secondary { background: var(--surface-highest); color: var(--primary); } .btn-secondary:hover { background: #ded4ff; } .btn-tonal { background: var(--surface-low); color: var(--on-surface); padding: .5rem 1rem; font-size: .8125rem; } .btn-tonal:hover { background: var(--surface-high); color: var(--primary); } .btn-ghost { background: transparent; color: var(--primary); padding: .5rem .75rem; } .btn-ghost:hover { background: rgba(99, 14, 212, .06); } .btn-sm { padding: .5rem 1rem; font-size: .8125rem; border-radius: .75rem; } /* ── Surfaces ────────────────────────────────────────────────────────── */ .card { background: #fff; border-radius: 1.5rem; box-shadow: 0 16px 32px rgba(30, 5, 90, .04); } .card-muted { background: var(--surface-low); border-radius: 1.5rem; } .glass { background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 16px 32px rgba(30, 5, 90, .06); } /* ── Typography helpers ──────────────────────────────────────────────── */ .eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-surface-variant); } .chip { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px; padding: .25rem .625rem; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #e3dfff; color: var(--secondary); } .chip-primary { background: #eaddff; color: var(--primary); } .chip-neutral { background: var(--surface-high); color: var(--on-surface-variant); } .chip-warning { background: #fef3c7; color: #92400e; } .chip-error { background: #ffdad6; color: #93000a; } /* ── Forms ───────────────────────────────────────────────────────────── */ /* Element-qualified selectors: the Tailwind forms plugin (injected after this file) styles [type=text] etc. with the same specificity and would otherwise win. Consequence: override padding on a .field with the important form (!pl-12). */ .field, input.field, select.field, textarea.field { width: 100%; border: 0; border-radius: 1rem; background-color: var(--surface-low); padding: .875rem 1rem; color: var(--on-surface); font-size: .9375rem; line-height: 1.5rem; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s; } .field::placeholder, input.field::placeholder, textarea.field::placeholder { color: #7b7487; opacity: 1; } .field:focus, input.field:focus, select.field:focus, textarea.field:focus { outline: none; border-color: transparent; box-shadow: inset 0 0 0 2px var(--primary); } .field-label { display: block; margin-bottom: .375rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-variant); } /* ── Tables ("trading tables": no divider lines, zebra rows) ─────────── */ .table-ether { width: 100%; text-align: left; font-size: .875rem; border-collapse: collapse; } .table-ether thead { background: var(--surface-low); } .table-ether th { padding: .875rem 1.5rem; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-surface-variant); } .table-ether td { padding: 1rem 1.5rem; } .table-ether tbody tr:nth-child(even) { background: var(--surface); } /* Denser variant (e.g. P2P offers tables with two row actions) */ .table-ether.table-compact th, .table-ether.table-compact td { padding-left: 1rem; padding-right: 1rem; } /* ── Progress ────────────────────────────────────────────────────────── */ .progress { height: .5rem; width: 100%; border-radius: 9999px; background: var(--surface-highest); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: inherit; background: var(--secondary); } /* ── Shell: header / footer / mobile nav ─────────────────────────────── */ .cd-header { position: sticky; top: 0; z-index: 50; background: rgba(253, 248, 255, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 32px rgba(30, 5, 90, .06); } .cd-nav-link { position: relative; font-size: .875rem; font-weight: 600; color: var(--on-surface-variant); padding: .5rem 0; transition: color .2s; white-space: nowrap; } .cd-nav-link:hover { color: var(--primary); } .cd-nav-link[aria-current="page"] { color: var(--primary); } .cd-nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.2rem; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); } .cd-mobile-nav a[aria-current="page"] { color: #fff; background-image: linear-gradient(135deg, var(--primary), var(--primary-container)); box-shadow: 0 8px 20px rgba(99, 14, 212, .3); } /* ── Back-office (data-shell="admin") ────────────────────────────────── */ .cd-admin-sidebar { position: fixed; top: 4.5rem; bottom: 0; left: 0; width: 16rem; z-index: 40; flex-direction: column; gap: 1.5rem; padding: 1.5rem 1rem; background: #fff; box-shadow: 16px 0 32px rgba(30, 5, 90, .03); overflow-y: auto; } .cd-admin-main { max-width: 88rem; margin: 0 auto; padding: 2rem 1.25rem 6rem; } @media (min-width: 1024px) { .cd-admin-main { margin-left: 16rem; padding: 2.5rem 2.5rem 4rem; } } /* Simple visual bar charts (no JS) */ .cd-bars { display: flex; align-items: flex-end; gap: .5rem; height: 10rem; } .cd-bars > span { flex: 1; border-radius: .5rem .5rem 0 0; background: var(--surface-highest); min-height: .25rem; } /* ── Modal pages ─────────────────────────────────────────────────────── */ /* Oversized so the blurred edges never reveal the page background */ .cd-modal-behind { position: fixed; top: -24px; left: -24px; width: calc(100% + 48px); height: calc(100% + 48px); border: 0; pointer-events: none; filter: blur(3px); } body[data-shell="modal"] { background: #d9cff0; } .cd-modal-scrim { position: fixed; inset: 0; background: rgba(30, 5, 90, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .cd-modal-stage { position: relative; z-index: 10; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .cd-modal { width: 100%; max-width: 32rem; background: #fff; border-radius: 1.5rem; box-shadow: 0 32px 64px rgba(30, 5, 90, .18); overflow: hidden; } .cd-modal-lg { max-width: 44rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── Demo mode (assets/demo.js) ──────────────────────────────────────────── */ .cd-demo-badge { position: fixed; bottom: 7rem; left: 1rem; z-index: 60; display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; background: rgba(30, 5, 90, .85); padding: .5rem .75rem .5rem 1rem; color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 16px 32px rgba(30, 5, 90, .18); } .cd-demo-dot { height: .5rem; width: .5rem; border-radius: 9999px; background: #6ee7a8; } .cd-demo-reset { border-radius: 9999px; background: rgba(255, 255, 255, .16); padding: .25rem .625rem; color: #fff; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .cd-demo-reset:hover { background: rgba(255, 255, 255, .28); } @media (min-width: 1280px) { .cd-demo-badge { bottom: 1.25rem; } } .cd-demo-toast { position: fixed; left: 50%; bottom: 7.5rem; z-index: 70; transform: translateX(-50%); max-width: min(26rem, calc(100vw - 2rem)); border-radius: 1rem; background: #1e055a; padding: .875rem 1.25rem; color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.35; box-shadow: 0 24px 48px rgba(30, 5, 90, .28); animation: cd-toast-in .25s ease-out; } .cd-demo-toast-error { background: #93000a; } .cd-demo-toast-out { opacity: 0; transition: opacity .45s ease-in; } @keyframes cd-toast-in { from { opacity: 0; transform: translate(-50%, .75rem); } to { opacity: 1; transform: translate(-50%, 0); } } @media (min-width: 1280px) { .cd-demo-toast { bottom: 1.5rem; } } /* Language switch: keep the page hidden until the dictionary is applied */ html.i18n-pending body { visibility: hidden; } /* Ligne « rien pour l'instant » d'un tableau : elle s'efface des qu'une vraie ligne la rejoint, sans une ligne de script. */ tbody tr.cd-empty:not(:only-child) { display: none; } /* ── Icone d'information ────────────────────────────────────────────────── Une phrase d'aide rangee derriere un « i » : elle ne prend de place que lorsqu'on la demande. La bulle est sortie du flux par shell.js (position fixe, rattachee a ), sinon une fenetre modale ou un tableau defilant la rognerait. Les avertissements de risque n'y vont jamais. */ .cd-tip { display: inline-flex; vertical-align: middle; } .cd-tip-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 9999px; flex-shrink: 0; color: var(--on-surface-variant); background: transparent; cursor: pointer; transition: background-color .15s, color .15s; } .cd-tip-btn .material-symbols-outlined { font-size: 18px; } .cd-tip-btn:hover, .cd-tip-btn[aria-expanded="true"] { background: var(--surface-high); color: var(--primary); } .cd-tip-body { position: fixed; z-index: 90; display: block; width: max-content; max-width: min(22rem, calc(100vw - 1.5rem)); padding: .75rem .875rem; border-radius: 1rem; background: #fff; box-shadow: 0 18px 36px rgba(30, 5, 90, .18), 0 0 0 1px rgba(30, 5, 90, .06); /* la bulle peut naitre dans un titre : elle n'en herite pas la typographie */ font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: .8125rem; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: left; white-space: normal; color: var(--on-surface-variant); } .cd-tip-body[hidden] { display: none; } .cd-tip-body a { color: var(--primary); font-weight: 600; } .cd-tip-row { display: flex; align-items: center; gap: .125rem; font-size: .75rem; font-weight: 600; color: var(--on-surface-variant); } /* Mode presentation : modules coupes au back-office (shell.js). */ [data-feature-hidden], .cd-off-lending [data-feature~="lending"], .cd-off-secondary [data-feature~="secondary"], .cd-off-funds [data-feature~="funds"], .cd-off-syndicates [data-feature~="syndicates"] { display: none !important; } /* ── Visite guidee (assets/tour.js) ───────────────────────────────────────── */ .cd-tour-spot { position: fixed; z-index: 80; display: none; pointer-events: none; border-radius: 1rem; box-shadow: 0 0 0 4px rgba(124, 77, 255, .85), 0 0 0 9999px rgba(20, 6, 60, .45); transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; } .cd-tour-card { position: fixed; z-index: 81; width: min(22.5rem, calc(100vw - 2rem)); border-radius: 1.25rem; background: #fff; padding: 1.125rem 1.25rem 1rem; color: #1b1530; box-shadow: 0 24px 60px rgba(30, 5, 90, .30); font-size: .875rem; line-height: 1.45; } .cd-tour-center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); } .cd-tour-sheet { left: 1rem !important; right: 1rem; bottom: 1rem; top: auto !important; width: auto; } .cd-tour-mini { right: 1rem; bottom: 10rem; left: auto; top: auto; } @media (min-width: 1280px) { .cd-tour-mini { bottom: 4.5rem; } } .cd-tour-invite { text-align: left; z-index: 82; } .cd-tour-veil { position: fixed; inset: 0; z-index: 81; background: rgba(20, 6, 60, .45); } .cd-tour-icon { display: inline-flex; margin-bottom: .5rem; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: .875rem; background: #ede7ff; color: #5b2ee0; font-size: 1.375rem; } .cd-tour-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; } .cd-tour-chapter { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5b2ee0; } .cd-tour-x { display: inline-flex; height: 2rem; width: 2rem; margin: -.375rem -.5rem -.375rem 0; align-items: center; justify-content: center; border-radius: 9999px; color: #6b6480; } .cd-tour-x:hover { background: #f3f0fa; color: #1b1530; } .cd-tour-x .material-symbols-outlined { font-size: 1.125rem; } .cd-tour-title { font-family: inherit; font-size: 1.0625rem; font-weight: 800; color: #1e055a; margin-bottom: .25rem; } .cd-tour-text { color: #4a4460; } .cd-tour-bar { margin-top: .875rem; height: .25rem; border-radius: 9999px; background: #eeeaf6; overflow: hidden; } .cd-tour-bar span { display: block; height: 100%; border-radius: inherit; background: #6d3cf5; transition: width .25s ease; } .cd-tour-foot { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; } .cd-tour-count { margin-right: auto; font-size: .75rem; font-weight: 600; color: #6b6480; font-variant-numeric: tabular-nums; } .cd-tour-btn { border-radius: 9999px; background: #5b2ee0; padding: .5rem 1rem; font-size: .8125rem; font-weight: 700; color: #fff; } .cd-tour-btn:hover { background: #4a20c9; } .cd-tour-ghost { background: transparent; color: #5b2ee0; } .cd-tour-ghost:hover { background: #f3f0fa; } .cd-tour-btn:focus-visible, .cd-tour-x:focus-visible { outline: 2px solid #5b2ee0; outline-offset: 2px; } .cd-tour-launch { margin-left: -.25rem; } .cd-tour-off { display: block; margin: .625rem auto -.25rem; font-size: .6875rem; font-weight: 600; color: #8a839c; text-decoration: underline; text-underline-offset: 2px; } .cd-tour-off:hover { color: #5b2ee0; } /* ── Tous formats d'appareil ──────────────────────────────────────────────── Filet de securite : une page ne defile jamais de cote (clip, pas hidden, pour garder les en-tetes collants). Sur les tres petits ecrans (telephones pliants, anciens modeles), une rangee qui ne tient pas passe a la ligne au lieu de deborder — seulement si elle ne tient pas : ce qui tient reste sur une ligne. */ html, body { max-width: 100%; overflow-x: clip; } img, video, iframe, svg, canvas { max-width: 100%; } @media (max-width: 374px) { /* Seulement le contenu des pages et des fenetres : jamais l'en-tete ni les barres d'onglets, qui defilent ou se resserrent deja d'elles-memes. */ main .flex.justify-between:not(.flex-col):not(.flex-nowrap), main .flex.flex-wrap-sm { flex-wrap: wrap; } main .chip { white-space: normal; } main .btn-primary, main .btn-secondary, main .btn-tonal, main .btn-ghost { max-width: 100%; white-space: normal; text-align: center; } main select.field { max-width: 100%; } } /* « hidden » doit l'emporter sur les composants qui fixent leur propre affichage (boutons, puces, icones) : sans cela, un bouton prevu pour le seul ordinateur (« hidden sm:inline-flex ») s'affichait aussi sur telephone et chevauchait le logo. Les variantes par taille d'ecran le reaffichent au bon moment. */ .hidden.btn-primary, .hidden.btn-secondary, .hidden.btn-tonal, .hidden.btn-ghost, .hidden.chip, .hidden.material-symbols-outlined { display: none; } @media (min-width: 640px) { .hidden.sm\:inline-flex { display: inline-flex; } .hidden.sm\:flex { display: flex; } .hidden.sm\:inline { display: inline; } .hidden.sm\:block { display: block; } .hidden.sm\:inline-block { display: inline-block; } } @media (min-width: 768px) { .hidden.md\:inline-flex { display: inline-flex; } .hidden.md\:flex { display: flex; } .hidden.md\:inline { display: inline; } .hidden.md\:block { display: block; } .hidden.md\:inline-block { display: inline-block; } } @media (min-width: 1024px) { .hidden.lg\:inline-flex { display: inline-flex; } .hidden.lg\:flex { display: flex; } .hidden.lg\:inline { display: inline; } .hidden.lg\:block { display: block; } .hidden.lg\:inline-block { display: inline-block; } } @media (min-width: 1280px) { .hidden.xl\:inline-flex { display: inline-flex; } .hidden.xl\:flex { display: flex; } .hidden.xl\:inline { display: inline; } .hidden.xl\:block { display: block; } .hidden.xl\:inline-block { display: inline-block; } } /* En-tetes et barre du bas sur petits ecrans : rien ne se chevauche. */ .cd-mobile-nav a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 419px) { /* Libelles du bas : sans capitales ni espacement, « Portefeuille » tient. */ .cd-mobile-nav { padding-left: .25rem; padding-right: .25rem; } .cd-mobile-nav a { padding-left: 1px; padding-right: 1px; } .cd-mobile-nav a > span:last-child { font-size: 9.5px; letter-spacing: 0; text-transform: none; } /* Back-office : l'etiquette « Back-office » laisse la place aux actions. */ .cd-header .chip-primary { display: none; } } @media (max-width: 374px) { .cd-header > div { gap: .75rem; padding-left: 1rem; padding-right: 1rem; } .cd-header img[alt="Coin District"] { height: 1.375rem; } } @media (max-width: 359px) { .cd-mobile-nav a > span:last-child { font-size: 8.5px; } } @media (max-width: 319px) { /* Telephones pliants (ecran exterieur ~280 px) */ .cd-header img[alt="Coin District"] { height: 1.1rem; } .cd-header > div { gap: .5rem; padding-left: .75rem; padding-right: .75rem; } }