/* ============================================================ DA « Pop » — le style de l'app depuis le 26 septembre (soir), choisie par Alexis parmi Pop / Bonbon / Nuit (« pas très fun »). Posée par-dessus Élan (classes theme-elan theme-pop sur ) ; ?theme=elan revient à Élan, ?theme=ancienne à l'ancienne DA. Fond crème uni, couleurs franches et pleines des domaines, cartes blanches à bord épais, boutons « à enfoncer » (une ombre pleine dessous, qui disparaît quand on appuie), façon jeu. Contraste AA : sur une couleur de domaine, le texte est la même teinte presque noire (18 % de la couleur, 82 % de noir) ; sur le violet profond, du blanc ; sur le rose, l'encre. ============================================================ */ html.theme-pop.theme-elan { --pop-creme: #FFF6E9; --pop-encre: #1E1B4B; --pop-gris: #5B5675; --pop-bord: #F0E4D1; --pop-rose: #FF6B9A; --pop-rose-o: #D63E72; --pop-violet: #5B3FE0; --pop-violet-o: #3A22A8; --pop-jaune: #FFD45C; --tete-c: #9B85FF; --autres-c: #FF8AC8; --corps-c: #3DDC97; --travail-c: #FFC53D; --quotidien-c: #5CC8FF; --ink: #1E1B4B; --ink2: #2B2760; --muted: #5B5675; --track: #F5ECDF; --card: #FFFFFF; --lav: #E9E1FF; --elan-marine: #1E1B4B; } /* sur une couleur de domaine : l'ombre pleine et le texte, tirés de la couleur elle-même */ html.theme-pop.theme-elan * { --pop-o: color-mix(in srgb, var(--c) 70%, #000); --pop-t: color-mix(in srgb, var(--c) 18%, #000); } html.theme-pop.theme-elan body { background: #FBEBD6; } /* fond crème uni (les ronds de confettis retirés à la demande d'Alexis) */ html.theme-pop.theme-elan .shell { background: var(--pop-creme) !important; } html.theme-pop.theme-elan .shell::before { display: none; } /* titres : encre pleine, bien gras */ html.theme-pop.theme-elan h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--pop-encre); font-weight: 800; letter-spacing: -1.2px; } html.theme-pop.theme-elan h1, html.theme-pop.theme-elan .big, html.theme-pop.theme-elan .hbar .ht, html.theme-pop.theme-elan .pas-t, html.theme-pop.theme-elan .lq { color: var(--pop-encre); font-weight: 800; } html.theme-pop.theme-elan .sect { color: var(--pop-encre); } html.theme-pop.theme-elan .kicker { background: var(--pop-rose); color: var(--pop-encre); border: 0; box-shadow: 0 3px 0 var(--pop-rose-o); } /* cartes : blanches, bord épais crème, plus épais dessous (elles « posent » sur la page) */ html.theme-pop.theme-elan .panel, html.theme-pop.theme-elan .group, html.theme-pop.theme-elan .lcard, html.theme-pop.theme-elan .pistes, html.theme-pop.theme-elan .duo-carte, html.theme-pop.theme-elan .balance, html.theme-pop.theme-elan .tl, html.theme-pop.theme-elan .lecon-cta, html.theme-pop.theme-elan .row, html.theme-pop.theme-elan .duo-theme, html.theme-pop.theme-elan .entry { background: #fff; border: 2px solid var(--pop-bord); border-bottom-width: 5px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.theme-pop.theme-elan .panel .group { border-width: 2px; } /* lignes (envies) : pastille pleine à la couleur du domaine, on les enfonce */ html.theme-pop.theme-elan .row::before, html.theme-pop.theme-elan .dom::before { display: none; } html.theme-pop.theme-elan .row .ic, html.theme-pop.theme-elan .resume .rd { background: var(--c); color: var(--pop-t); box-shadow: inset 0 -3px 0 var(--pop-o); } html.theme-pop.theme-elan .row .act { background: var(--track); color: var(--pop-encre); } html.theme-pop.theme-elan .row.on { background: color-mix(in srgb, var(--c) 22%, #fff); border-color: color-mix(in srgb, var(--c) 55%, #fff); } html.theme-pop.theme-elan .row.on .act { background: var(--pop-encre); color: #fff; } html.theme-pop.theme-elan .row.on .ts { color: var(--pop-encre); } html.theme-pop.theme-elan .row, html.theme-pop.theme-elan .dom, html.theme-pop.theme-elan .prog, html.theme-pop.theme-elan .resume, html.theme-pop.theme-elan .duo-theme, html.theme-pop.theme-elan .chip, html.theme-pop.theme-elan .lecon-cta { transition: transform .08s ease, border-bottom-width .08s ease, box-shadow .08s ease; } html.theme-pop.theme-elan .row:active, html.theme-pop.theme-elan .duo-theme:active, html.theme-pop.theme-elan .lecon-cta:active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; box-shadow: none; } @media (hover: hover) { html.theme-pop.theme-elan .row:hover, html.theme-pop.theme-elan .dom:hover, html.theme-pop.theme-elan .prog:hover, html.theme-pop.theme-elan .resume:hover { transform: translateY(-2px); } } /* boutons : rose bonbon, ombre pleine dessous ; appuyer les enfonce */ html.theme-pop.theme-elan .btn:not(.soft):not(.soft2):not(.danger), html.theme-pop.theme-elan .panel .btn:not(.soft):not(.soft2):not(.danger) { background: var(--pop-rose); color: var(--pop-encre); border: 0; font-weight: 800; box-shadow: 0 5px 0 var(--pop-rose-o); margin-bottom: 5px; } html.theme-pop.theme-elan .btn::after { display: none; } html.theme-pop.theme-elan .btn:not(.soft):not(.soft2):not(.danger):active, html.theme-pop.theme-elan .panel .btn:not(.soft):not(.soft2):not(.danger):active { transform: translateY(5px); box-shadow: 0 0 0 var(--pop-rose-o); } html.theme-pop.theme-elan .btn[disabled] { opacity: .45; } html.theme-pop.theme-elan .btn.soft, html.theme-pop.theme-elan .link { background: #fff; color: var(--pop-encre); border: 2px solid var(--pop-encre); box-shadow: 0 4px 0 var(--pop-encre); margin-bottom: 4px; } html.theme-pop.theme-elan .btn.soft:active, html.theme-pop.theme-elan .link:active { transform: translateY(4px); box-shadow: none; } html.theme-pop.theme-elan .btn.soft2 { background: #fff; color: var(--pop-encre); border: 2px solid var(--pop-bord); box-shadow: 0 4px 0 var(--pop-bord); } html.theme-pop.theme-elan .btn.danger { background: #C8231B; color: #fff; box-shadow: 0 5px 0 #7E130E; margin-bottom: 5px; } html.theme-pop.theme-elan .btn.danger:active { transform: translateY(5px); box-shadow: none; } /* pastilles de choix */ html.theme-pop.theme-elan .chip { background: #fff; border: 2px solid var(--pop-bord); box-shadow: 0 3px 0 var(--pop-bord); color: var(--pop-encre); } html.theme-pop.theme-elan .chip.has, html.theme-pop.theme-elan .chips.tabs .chip.has { background: var(--pop-encre); color: #fff; border-color: var(--pop-encre); box-shadow: 0 3px 0 #000; } html.theme-pop.theme-elan .chip:active { transform: translateY(3px); box-shadow: none; } html.theme-pop.theme-elan .gi.pick, html.theme-pop.theme-elan .lopt { background: #fff; border: 2px solid var(--pop-bord); } html.theme-pop.theme-elan .gi.pick.on, html.theme-pop.theme-elan .lopt.good { background: #EFE9FF; border: 2px solid var(--pop-encre); color: var(--pop-encre); } html.theme-pop.theme-elan .seg i.on { background: var(--pop-encre); } /* retour et boutons ronds */ html.theme-pop.theme-elan .hbar .ico, html.theme-pop.theme-elan .back, html.theme-pop.theme-elan .rbtn { background: #fff; border: 2px solid var(--pop-bord); box-shadow: 0 3px 0 var(--pop-bord); color: var(--pop-encre); } /* en-tête d'un domaine : la couleur en plein */ html.theme-pop.theme-elan .zhero { background: var(--c); box-shadow: 0 6px 0 var(--pop-o); } html.theme-pop.theme-elan .zhero::after { background: rgba(255, 255, 255, .22); width: 110px; height: 110px; right: -24px; top: -34px; } html.theme-pop.theme-elan .zhero .zic { background: #fff; color: var(--pop-t); box-shadow: 0 4px 0 var(--pop-o); } html.theme-pop.theme-elan .zhero .zd { color: var(--pop-t); } html.theme-pop.theme-elan .zhero .zn { background: rgba(255, 255, 255, .9); color: var(--pop-t); } /* Explorer : la carte du corps et ses étiquettes */ html.theme-pop.theme-elan .mapcard { background: radial-gradient(46% 50% at 50% 46%, #fff 0%, rgba(255, 255, 255, .5) 55%, transparent 78%); } html.theme-pop.theme-elan .zone .lab { background: var(--c); color: var(--pop-t); border: 0; box-shadow: 0 3px 0 var(--pop-o); font-weight: 800; } html.theme-pop.theme-elan .zone .lab i { background: #fff; color: var(--pop-t); } html.theme-pop.theme-elan .resume { background: var(--c); border: 0; box-shadow: 0 6px 0 var(--pop-o); } html.theme-pop.theme-elan .resume .re, html.theme-pop.theme-elan .resume .rp, html.theme-pop.theme-elan .resume .rc { color: var(--pop-t); } html.theme-pop.theme-elan .resume .rd { background: #fff; box-shadow: 0 3px 0 var(--pop-o); } html.theme-pop.theme-elan .resume .ch { background: var(--pop-encre); color: #fff; } html.theme-pop.theme-elan .lpasse { color: var(--pop-encre); } /* accueil : les cinq domaines en couleur pleine */ html.theme-pop.theme-elan .dom { background: var(--c); border: 0; box-shadow: 0 5px 0 var(--pop-o); } html.theme-pop.theme-elan .dom b, html.theme-pop.theme-elan .dom small { color: var(--pop-t); } html.theme-pop.theme-elan .dom .ic { background: #fff; color: var(--pop-t); box-shadow: 0 3px 0 var(--pop-o); } html.theme-pop.theme-elan .dom:active { transform: translateY(5px); box-shadow: none; } /* Mes pas : le compteur en violet profond, les programmes en couleur pleine */ html.theme-pop.theme-elan .unlock, html.theme-pop.theme-elan .insight { background: var(--pop-violet); border: 0; box-shadow: 0 6px 0 var(--pop-violet-o); } html.theme-pop.theme-elan .unlock::after, html.theme-pop.theme-elan .insight::after { background: var(--pop-jaune); opacity: .9; width: 64px; height: 64px; right: -18px; top: -18px; left: auto; bottom: auto; } html.theme-pop.theme-elan .insight::after { background: var(--pop-rose); } html.theme-pop.theme-elan .unlock .un { color: #fff; font-weight: 800; } html.theme-pop.theme-elan .unlock .ut b, html.theme-pop.theme-elan .insight p, html.theme-pop.theme-elan .insight .il { color: #fff; } html.theme-pop.theme-elan .unlock .ut span { color: #EDE9FF; } html.theme-pop.theme-elan .prog, html.theme-pop.theme-elan .capsule-carte { background: var(--c); border: 0; box-shadow: 0 6px 0 var(--pop-o); } html.theme-pop.theme-elan .prog .pn, html.theme-pop.theme-elan .prog .pm, html.theme-pop.theme-elan .prog .pm.maint, html.theme-pop.theme-elan .prog .pm.maint small, html.theme-pop.theme-elan .capsule-carte b, html.theme-pop.theme-elan .capsule-carte small { color: var(--pop-t) !important; } html.theme-pop.theme-elan .prog .ch { background: #fff; color: var(--pop-t); box-shadow: 0 3px 0 var(--pop-o); } html.theme-pop.theme-elan .prog:active { transform: translateY(6px); box-shadow: none; } html.theme-pop.theme-elan .dotsline i { background: rgba(255, 255, 255, .6); } html.theme-pop.theme-elan .dotsline i.f, html.theme-pop.theme-elan .dotsline i.c { background: var(--pop-t); box-shadow: none; } html.theme-pop.theme-elan .ajout { border: 2px dashed var(--pop-encre); background: rgba(255, 255, 255, .6); color: var(--pop-encre); } /* un programme : le pas en cours encadré de sa couleur */ html.theme-pop.theme-elan .panel.pas-cours { background: #fff; border: 3px solid var(--c); border-bottom: 7px solid var(--pop-o); box-shadow: none; } html.theme-pop.theme-elan .rung { border: 2px solid var(--pop-bord); box-shadow: none; } html.theme-pop.theme-elan .rung.now { background: var(--pop-violet); border-color: var(--pop-violet); box-shadow: 0 4px 0 var(--pop-violet-o); } html.theme-pop.theme-elan .rung.done .rn { background: #3DDC97; color: #0B3B26; } html.theme-pop.theme-elan .unlocked { background: var(--pop-jaune); border: 0; box-shadow: 0 5px 0 #D9A400; } html.theme-pop.theme-elan .unlocked b, html.theme-pop.theme-elan .unlocked span span { color: #3A2800; } html.theme-pop.theme-elan .lecon-cta .li { background: var(--pop-violet); color: #fff; box-shadow: 0 3px 0 var(--pop-violet-o); } /* compte */ html.theme-pop.theme-elan .who .av { background: var(--pop-rose); color: var(--pop-encre); box-shadow: 0 4px 0 var(--pop-rose-o); } html.theme-pop.theme-elan .brow .bb { background: var(--track); } html.theme-pop.theme-elan .brow .bb i { background: var(--c); box-shadow: inset 0 -3px 0 var(--pop-o); } /* duo : chaque thème en couleur */ html.theme-pop.theme-elan .duo-theme[data-theme] { background: color-mix(in srgb, var(--c) 28%, #fff); border-color: color-mix(in srgb, var(--c) 45%, #fff); box-shadow: none; } html.theme-pop.theme-elan .duo-theme[data-theme].on { background: var(--c); border: 2px solid var(--pop-encre); border-bottom-width: 5px; box-shadow: none; } html.theme-pop.theme-elan .duo-theme[data-theme] b, html.theme-pop.theme-elan .duo-theme[data-theme] span { color: var(--pop-t); } html.theme-pop.theme-elan .duo-longueur .duo-theme { background: #fff; border-color: var(--pop-bord); } html.theme-pop.theme-elan .duo-longueur .duo-theme.on { background: var(--pop-jaune); border-color: var(--pop-encre); } html.theme-pop.theme-elan .duo-longueur .duo-theme b, html.theme-pop.theme-elan .duo-longueur .duo-theme span { color: var(--pop-encre); } /* calendrier */ html.theme-pop.theme-elan .day.on { background: var(--pop-rose); } /* barre du bas : blanche, l'onglet actif dans une pastille rose qu'on dirait enfoncée */ html.theme-pop.theme-elan .nav { background: #fff; border-top: 2px solid var(--pop-bord); box-shadow: none; } html.theme-pop.theme-elan .nav button { color: var(--pop-gris); } html.theme-pop.theme-elan .nav button.on { color: var(--pop-encre); } html.theme-pop.theme-elan .nav button .pillbg { background: var(--pop-rose); box-shadow: 0 3px 0 var(--pop-rose-o); height: 28px; top: 2px; } html.theme-pop.theme-elan .nav button.on .pillbg { width: 56px; top: 2px; } /* un petit rebond à l'arrivée des listes */ @keyframes pop-monte { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 70% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { transform: none; } } html.theme-pop.theme-elan .list > .row, html.theme-pop.theme-elan .stack > .prog, html.theme-pop.theme-elan .domaines > .dom { animation-name: pop-monte; animation-duration: .45s; } @media (prefers-reduced-motion: reduce) { html.theme-pop.theme-elan .list > .row, html.theme-pop.theme-elan .stack > .prog, html.theme-pop.theme-elan .domaines > .dom { animation: none !important; } html.theme-pop.theme-elan * { transition: none !important; } } /* Explorer (27 sept., « repense cette page pour qu'elle soit plus harmonieuse ») : plus d'air sous la phrase, une carte plus haute pour que les cinq étiquettes respirent, et « Fais-le tourner » sous le mannequin plutôt que collé au titre */ html.theme-pop.theme-elan .mapcard { margin-top: 20px; } html.theme-pop.theme-elan .mapwrap { aspect-ratio: 520 / 580; } html.theme-pop.theme-elan .hint3d { left: 50%; top: auto; bottom: -40px; transform: translateX(-50%); background: #fff; border: 2px solid var(--pop-bord); box-shadow: 0 3px 0 var(--pop-bord); color: var(--pop-encre); } html.theme-pop.theme-elan .mapcard + .grow { min-height: 58px; } html.theme-pop.theme-elan .resume + .link { margin-top: 16px; } /* Titres plus hauts partout (27 sept., « remonte les titres ») : la barre du haut sort du flux ; elle ne porte que le bouton du contexte (le calendrier de Mes pas), qui flotte à droite. */ html.theme-pop.theme-elan .topbar { position: absolute; top: env(safe-area-inset-top, 0px); right: 0; left: auto; height: auto; min-height: 0; padding: 12px 18px 0; z-index: 5; background: none; } html.theme-pop.theme-elan .topbar.vide { display: none; } html.theme-pop.theme-elan .pad { padding-top: 16px; } html.theme-pop.theme-elan h1 { margin-top: 6px; } html.theme-pop.theme-elan h1.ser { padding-right: 56px; } /* laisse la place au bouton calendrier */ html.theme-pop.theme-elan h1.h-carte { font-size: clamp(30px, 8.6vw, 40px); } /* Explorer : tout tient sur un écran de téléphone, sans défiler */ html.theme-pop.theme-elan .mapcard { margin-top: 12px; } html.theme-pop.theme-elan .mapwrap { aspect-ratio: 520 / 470; } html.theme-pop.theme-elan .hint3d { bottom: -34px; } html.theme-pop.theme-elan .mapcard + .grow { min-height: 46px; } /* Explorer : sous le mannequin, la question du jour et « Surprends-moi » (27 sept.) */ .qdj { margin-top: 4px; padding: 16px 18px; border-radius: 22px; background: var(--pop-violet); box-shadow: 0 6px 0 var(--pop-violet-o); color: #fff; } .qdj-k { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #fff; } .qdj-q { margin: 6px 0 0; font-family: var(--display); font-size: 21px; font-weight: 800; line-height: 1.22; letter-spacing: -.4px; color: #fff; } html.theme-pop.theme-elan .qdj .partage { background: #fff; color: var(--pop-sombre, #1E1B4B); box-shadow: 0 3px 0 var(--pop-violet-o); } .hasard-btn { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 14px 16px; border-radius: 20px; cursor: pointer; text-align: left; font: inherit; background: var(--pop-jaune); color: #3A2800; border: 0; box-shadow: 0 5px 0 #D9A400; transition: transform .08s ease, box-shadow .08s ease; } .hasard-btn:active { transform: translateY(5px); box-shadow: none; } .hasard-btn svg { flex-shrink: 0; width: 28px; height: 28px; } .hasard-btn b { display: block; font-family: var(--display); font-size: 18px; font-weight: 800; } .hasard-btn small { display: block; font-size: 13px; font-weight: 600; margin-top: 1px; } .hasard { margin-top: 14px; padding: 16px 18px; border-radius: 22px; background: var(--c); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 70%, #000); } .hasard-k { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--c) 18%, #000); } .hasard-k .d { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, #000); } .hasard-p { margin: 6px 0 0; font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1.22; color: color-mix(in srgb, var(--c) 18%, #000); } .hasard-a { display: flex; gap: 10px; margin-top: 12px; } .hasard-a .btn { flex: 1; margin-top: 0; padding-left: 10px; padding-right: 10px; } .hasard-a .btn svg { width: 16px; height: 16px; vertical-align: -3px; } html.theme-pop.theme-elan .hasard .btn.soft { background: #fff; color: #1E1B4B; border-color: #1E1B4B; box-shadow: 0 4px 0 #1E1B4B; } html.theme-pop.theme-elan .qdj + .hasard-btn + .link, html.theme-pop.theme-elan .hasard + .link { margin-top: 18px; } /* hauteur fixe, quelle que soit la phrase tirée (Alexis) : la page ne saute pas d'un tirage à l'autre */ .hasard, .hasard-btn { box-sizing: border-box; height: 172px; } .hasard { display: flex; flex-direction: column; } .hasard-k .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .hasard-p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hasard-a { margin-top: auto; } .hasard-btn { flex-direction: column; justify-content: center; text-align: center; gap: 8px; } .hasard-btn svg { width: 36px; height: 36px; } /* la question du jour : toujours la place de trois lignes */ .qdj-q { min-height: calc(3 * 1.22em); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* la carte des questions : deux onglets, hauteur fixe */ .qdj { box-sizing: border-box; height: 214px; display: flex; flex-direction: column; } .qdj-tabs { display: flex; gap: 6px; } .qdj-tabs button { border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; padding: 6px 13px; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); color: #fff; } .qdj-tabs button.on { background: #fff; color: #1E1B4B; box-shadow: 0 3px 0 var(--pop-violet-o); } .qdj .qdj-q { margin-top: 12px; } .qdj-n { margin: auto 0 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #fff; } .qdj-a { display: flex; gap: 8px; margin-top: auto; } .qdj-a .partage { margin-top: 0; } .qdj-autre { display: inline-flex; align-items: center; gap: 7px; border: 2px solid #fff; background: none; color: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; padding: 8px 14px; border-radius: 999px; } .qdj-autre svg { width: 16px; height: 16px; }