@property --glow { syntax: ""; inherits: true; initial-value: #C9D4FF; } .slide[data-screen="13"] { color: var(--fg, #111); transition: color .6s, --glow .8s; --glow: #C9D4FF; } .slide[data-screen="13"][data-theme="glass"] { --glow: #C9B8FF; } .slide[data-screen="13"][data-theme="mini"] { --glow: #D4D4D4; } .slide[data-screen="13"][data-theme="neu"] { --glow: #C9D2E3; } .slide[data-screen="13"][data-theme="clay"] { --glow: #D9B8FF; } .slide[data-screen="13"][data-theme="flat"] { --glow: #7CB8FF; } .slide[data-screen="13"][data-theme="mat"] { --glow: #D0BCFF; } .slide[data-screen="13"][data-theme="neob"] { --glow: #FF9A6B; } .slide[data-screen="13"][data-theme="brut"] { --glow: #BDBDBD; } .slide[data-screen="13"][data-theme="max"] { --glow: #FF6BB5; } .slide[data-screen="13"][data-theme="retro"] { --glow: #F0A050; } .slide[data-screen="13"][data-theme="edito"] { --glow: #E5DFD0; } .slide[data-screen="13"][data-theme="main"] { --glow: #F2C45A; } .slide[data-screen="13"][data-theme="terra"] { --glow: #F0A07C; } .slide[data-screen="13"][data-theme="pastel"] { --glow: #CFEFDC; } .slide[data-screen="13"][data-theme="sombre"] { --glow: #2F4A12; } .slide[data-screen="13"][data-theme="neon"] { --glow: #7B2BFF; } .slide[data-screen="13"] .wrap { gap: .85rem; padding-top: 2.5rem; align-items: center; text-align: center; max-width: 40rem; } .slide[data-screen="13"] .title { margin: 0; font-size: clamp(1.05rem, 5.4vw, 2.2rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; } .slide[data-screen="13"] .sub { margin: -.35rem 0 0; font-size: .9rem; opacity: .65; max-width: 22rem; } /* ---------- Barre d'avancement : fine, centrée, et elle prend le style du thème choisi ---------- */ .slide[data-screen="13"] .q-progress { top: max(.5rem, env(safe-area-inset-top)); width: 100%; max-width: 40rem; height: 6px; margin: calc(max(.5rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-top))) auto .5rem; border-radius: 999px; background: rgb(127 127 127 / .2); transition: background .5s, box-shadow .5s, height .3s, border-radius .3s; } .slide[data-screen="13"] .q-progress i { border-radius: inherit; background: var(--fg, #111); transition: width .7s cubic-bezier(.4,0,.2,1), background .5s, box-shadow .5s; } .slide[data-screen="13"][data-theme="glass"] .q-progress { background: rgb(255 255 255 / .5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8); } .slide[data-screen="13"][data-theme="glass"] .q-progress i { background: linear-gradient(90deg, #8FB4FF, #C79BFF); } .slide[data-screen="13"][data-theme="mini"] .q-progress { height: 4px; border-radius: 0; background: #eee; } .slide[data-screen="13"][data-theme="mini"] .q-progress i { background: #000; } .slide[data-screen="13"][data-theme="neu"] .q-progress { height: 9px; background: #E4E9F2; box-shadow: inset 2px 2px 4px #C2C8D4, inset -2px -2px 4px #fff; } .slide[data-screen="13"][data-theme="neu"] .q-progress i { background: #5B7CFA; box-shadow: 2px 2px 4px #C2C8D4; } .slide[data-screen="13"][data-theme="clay"] .q-progress { height: 10px; background: #fff; box-shadow: inset 2px 2px 5px rgb(90 60 180 / .15); } .slide[data-screen="13"][data-theme="clay"] .q-progress i { background: #A88BFF; box-shadow: inset -2px -2px 4px rgb(60 30 160 / .3), inset 2px 2px 4px rgb(255 255 255 / .6); } .slide[data-screen="13"][data-theme="flat"] .q-progress { border-radius: 3px; background: #fff; } .slide[data-screen="13"][data-theme="flat"] .q-progress i { background: #2F80ED; } .slide[data-screen="13"][data-theme="mat"] .q-progress { height: 4px; background: #E8DEF8; } .slide[data-screen="13"][data-theme="mat"] .q-progress i { background: #6750A4; } .slide[data-screen="13"][data-theme="neob"] .q-progress { height: 12px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 2px #111, 3px 3px 0 2px #111; } .slide[data-screen="13"][data-theme="neob"] .q-progress i { background: #FF5A36; box-shadow: 2px 0 0 #111; } .slide[data-screen="13"][data-theme="brut"] .q-progress { height: 8px; border-radius: 0; background: #fff; box-shadow: 0 0 0 1px #000; } .slide[data-screen="13"][data-theme="brut"] .q-progress i { background: repeating-linear-gradient(-45deg, #000 0 4px, #fff 4px 7px); } .slide[data-screen="13"][data-theme="max"] .q-progress { height: 10px; background: #fff; box-shadow: 0 0 0 2px #2B0B3F, 3px 3px 0 2px #FFD400; } .slide[data-screen="13"][data-theme="max"] .q-progress i { background: repeating-linear-gradient(-45deg, #FF3D7F 0 6px, #FFD400 6px 12px, #00C2A8 12px 18px); } .slide[data-screen="13"][data-theme="retro"] .q-progress { height: 9px; background: #FBF3E3; box-shadow: 0 2px 0 #4A2C17; } .slide[data-screen="13"][data-theme="retro"] .q-progress i { background: linear-gradient(180deg, #E8772E 0 34%, #E4B23A 34% 67%, #C94A6B 67%); } .slide[data-screen="13"][data-theme="edito"] .q-progress { height: 2px; border-radius: 0; background: rgb(0 0 0 / .15); } .slide[data-screen="13"][data-theme="edito"] .q-progress i { background: #111; } .slide[data-screen="13"][data-theme="main"] .q-progress { background: rgb(58 42 28 / .15); border-radius: 3px 5px 2px 4px; } .slide[data-screen="13"][data-theme="main"] .q-progress i { background: #D9653B; } .slide[data-screen="13"][data-theme="terra"] .q-progress { background: #FFF5EC; } .slide[data-screen="13"][data-theme="terra"] .q-progress i { background: #C8553D; } .slide[data-screen="13"][data-theme="pastel"] .q-progress { height: 8px; background: #EEF0F3; } .slide[data-screen="13"][data-theme="pastel"] .q-progress i { background: #0B0B0C; } .slide[data-screen="13"][data-theme="sombre"] .q-progress { background: rgb(255 255 255 / .1); } .slide[data-screen="13"][data-theme="sombre"] .q-progress i { background: #B7FF5A; box-shadow: 0 0 10px rgb(183 255 90 / .7); } .slide[data-screen="13"][data-theme="neon"] .q-progress { background: rgb(255 255 255 / .08); } .slide[data-screen="13"][data-theme="neon"] .q-progress i { background: linear-gradient(90deg, #FF2BD6, #22E6FF); box-shadow: 0 0 10px rgb(255 43 214 / .8); } /* ---------- Scène + téléphone ---------- */ .slide[data-screen="13"] .scene { position: relative; isolation: isolate; perspective: 1100px; padding: .5rem 0; } .slide[data-screen="13"] .scene::before { content: ""; position: absolute; inset: -10% -45%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent); opacity: .7; } .slide[data-screen="13"] .phone { /* Variables de thème (défaut neutre, chaque thème les redéfinit) */ --p-bg: #F7F8FA; --p-fg: #111; --p-muted: #7b808a; --p-card: rgb(255 255 255 / .78); --p-card2: #ffffff; --p-acc: #111; --p-acc-fg: #fff; --p-tile-a: #E4F0FF; --p-line: transparent; --p-lw: 0px; --p-r: 20px; --p-r-sm: 14px; --p-shadow: 0 8px 22px rgb(20 30 60 / .08); --p-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --p-weight: 700; --p-track: -.03em; --p-name: 21px; --p-frame: #1b1c20; position: relative; width: min(58vw, 222px); aspect-ratio: 9 / 19; border-radius: 40px; padding: 8px; background: var(--p-frame); box-shadow: 0 30px 60px -22px rgb(0 0 0 / .4), inset 0 0 0 2px rgb(255 255 255 / .08); transition: background .5s, box-shadow .5s; transform-origin: 50% 50%; transform-style: preserve-3d; } .slide[data-screen="13"] .screen { position: relative; height: 100%; border-radius: 33px; overflow: hidden; background: var(--p-bg); color: var(--p-fg); font-family: var(--p-font); padding: 7px 11px 60px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; display: grid; grid-template-columns: 1fr; align-content: start; gap: 9px; grid-template-areas: "status" "head" "hero" "feats" "sec" "list"; } .slide[data-screen="13"] .grain { position: absolute; inset: 0; pointer-events: none; opacity: 0; } .slide[data-screen="13"] .status { grid-area: status; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 20px; padding: 0 6px; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; } .slide[data-screen="13"] .island { width: 60px; height: 17px; border-radius: 12px; background: #000; } .slide[data-screen="13"] .st-r { display: flex; align-items: center; justify-content: flex-end; gap: 3px; } .slide[data-screen="13"] .st-net { display: flex; align-items: center; gap: 2px; } .slide[data-screen="13"] .st-net svg { width: 12px; height: 9px; } .slide[data-screen="13"] .st-net b { font-size: 8.5px; letter-spacing: .02em; } .slide[data-screen="13"] .st-pct { display: none; font-size: 8.5px; } .slide[data-screen="13"] .st-bat { position: relative; width: 19px; height: 9px; border: 1.3px solid currentColor; border-radius: 3px; padding: 1px; opacity: .9; } .slide[data-screen="13"] .st-bat::after { content: ""; position: absolute; right: -3px; top: 2px; width: 1.5px; height: 3px; border-radius: 1px; background: currentColor; } .slide[data-screen="13"] .st-bat i { display: block; height: 100%; width: var(--lvl, 80%); border-radius: 1px; background: currentColor; } /* En-tête : le nom est un champ */ .slide[data-screen="13"] .app-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; } .slide[data-screen="13"] .hello { flex: 1; min-width: 0; display: grid; } .slide[data-screen="13"] .hello small { font-size: 9.5px; color: var(--p-muted); } .slide[data-screen="13"] .name-l { display: flex; align-items: center; gap: 4px; min-width: 0; cursor: text; } .slide[data-screen="13"] .name { flex: 1; min-width: 0; width: 100%; margin: 0; padding: 0 0 1px; border: 0; border-bottom: 1.5px dashed transparent; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: var(--p-name); font-weight: var(--p-weight); letter-spacing: var(--p-track); line-height: 1.1; text-overflow: ellipsis; transition: border-color .2s; } .slide[data-screen="13"] .name::placeholder { color: var(--p-muted); opacity: 1; } .slide[data-screen="13"] .name:hover, .slide[data-screen="13"] .name:focus { border-bottom-color: currentColor; } .slide[data-screen="13"] .name:focus-visible { outline: 2px solid var(--focus, #2B6BFF); outline-offset: 3px; border-radius: 4px; } .slide[data-screen="13"] .pen { width: 16px; height: 16px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: var(--p-muted); animation: s13-nudge 2.4s ease-in-out 1.2s 2; } .slide[data-screen="13"] .pen svg { width: 11px; } .slide[data-screen="13"] .avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--p-acc); color: var(--p-acc-fg); border: var(--p-lw) solid var(--p-line); } .slide[data-screen="13"] .bell { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--p-card2); box-shadow: var(--p-shadow); border: var(--p-lw) solid var(--p-line); } .slide[data-screen="13"] .bell svg { width: 13px; } /* Modules */ .slide[data-screen="13"] .hero { grid-area: hero; position: relative; overflow: hidden; border-radius: var(--p-r); padding: 12px; background: var(--p-acc); color: var(--p-acc-fg); border: var(--p-lw) solid var(--p-line); box-shadow: var(--p-shadow); display: flex; flex-direction: column; gap: 4px; } .slide[data-screen="13"] .hero small { font-size: 8.5px; opacity: .75; text-transform: uppercase; letter-spacing: .08em; } .slide[data-screen="13"] .hero strong { font-size: 14px; line-height: 1.15; font-weight: var(--p-weight); letter-spacing: var(--p-track); } .slide[data-screen="13"] .hero-btn { position: absolute; right: 10px; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--p-acc-fg); color: var(--p-acc); display: grid; place-items: center; } .slide[data-screen="13"] .hero-btn svg { width: 13px; } .slide[data-screen="13"] .blob { display: none; } .slide[data-screen="13"] .feats { grid-area: feats; display: flex; gap: 6px; } .slide[data-screen="13"] .ft { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px; border-radius: var(--p-r-sm); background: var(--p-card); box-shadow: var(--p-shadow); border: var(--p-lw) solid var(--p-line); font-size: 8.5px; font-weight: 650; text-align: center; } .slide[data-screen="13"] .ft-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--p-tile-a); } .slide[data-screen="13"] .ft-ic svg { width: 12px; } .slide[data-screen="13"] .ft-t { display: grid; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slide[data-screen="13"] .ft-t small { display: none; font-size: 8px; font-weight: 500; color: var(--p-muted); } .slide[data-screen="13"] .sec { grid-area: sec; margin: 2px 2px -2px; font-size: 10.5px; font-weight: 700; color: var(--p-muted); } .slide[data-screen="13"] .list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .slide[data-screen="13"] .list li { display: flex; align-items: center; gap: 8px; padding: 7px 9px 7px 7px; border-radius: var(--p-r-sm); background: var(--p-card); font-size: 10.5px; font-weight: 650; border: var(--p-lw) solid var(--p-line); box-shadow: var(--p-shadow); } .slide[data-screen="13"] .li-t { display: grid; min-width: 0; } .slide[data-screen="13"] .li-t small { font-size: 8.5px; font-weight: 500; color: var(--p-muted); } .slide[data-screen="13"] .list em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; white-space: nowrap; } .slide[data-screen="13"] .li-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--p-tile-a); flex-shrink: 0; } .slide[data-screen="13"] .li-ic svg { width: 12px; } .slide[data-screen="13"] .nav { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 44px; border-radius: 999px; display: flex; justify-content: space-around; align-items: center; background: var(--p-card2); box-shadow: var(--p-shadow); border: var(--p-lw) solid var(--p-line); } .slide[data-screen="13"] .nav span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--p-muted); } .slide[data-screen="13"] .nav span.on { background: var(--p-acc); color: var(--p-acc-fg); } .slide[data-screen="13"] .nav svg { width: 15px; } /* Indices de toucher */ .slide[data-screen="13"] .tap-ring { position: absolute; left: 50%; top: 58%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none; border: 2px solid currentColor; opacity: 0; animation: s13-ping 1.6s ease-out .9s 3; } .slide[data-screen="13"].used .tap-ring { display: none; } .slide[data-screen="13"] .rip { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .25; animation: s13-rip .6s ease-out forwards; } /* ========================================================= Thèmes : style + disposition (16) ========================================================= */ /* 1. Glassmorphisme : taches de couleur floues, cartes en verre dépoli, filets blancs */ .slide[data-screen="13"] .phone[data-theme="glass"] { --p-bg: #E6EBFF; --p-fg: #1C2140; --p-muted: #6B71A0; --p-card: rgb(255 255 255 / .42); --p-card2: rgb(255 255 255 / .55); --p-acc: rgb(255 255 255 / .38); --p-acc-fg: #1C2140; --p-tile-a: rgb(255 255 255 / .65); --p-line: rgb(255 255 255 / .8); --p-lw: 1px; --p-r: 20px; --p-r-sm: 16px; --p-shadow: 0 10px 30px -12px rgb(60 70 160 / .35); --p-weight: 700; --p-track: -.02em; --p-name: 20px; --p-frame: #2a2d4a; } .slide[data-screen="13"] .phone[data-theme="glass"] .screen { grid-template-areas: "status" "head" "hero" "feats"; background: radial-gradient(circle at 18% 22%, #FFB6E1 0, transparent 34%), radial-gradient(circle at 88% 28%, #9DB8FF 0, transparent 38%), radial-gradient(circle at 50% 88%, #B8F0E6 0, transparent 40%), #E6EBFF; } .slide[data-screen="13"] .phone[data-theme="glass"] .hero, .slide[data-screen="13"] .phone[data-theme="glass"] .ft, .slide[data-screen="13"] .phone[data-theme="glass"] .nav, .slide[data-screen="13"] .phone[data-theme="glass"] .bell { backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); } .slide[data-screen="13"] .phone[data-theme="glass"] .avatar { background: linear-gradient(135deg, #FF8FCF, #7E9BFF); color: #fff; border: 0; box-shadow: 0 6px 14px -6px rgb(120 80 220 / .6); } .slide[data-screen="13"] .phone[data-theme="glass"] .hero { min-height: 94px; justify-content: flex-end; box-shadow: var(--p-shadow), inset 0 1px 0 rgb(255 255 255 / .9); } .slide[data-screen="13"] .phone[data-theme="glass"] .hero .blob { display: block; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, rgb(255 255 255 / .9), rgb(255 255 255 / .1)); } .slide[data-screen="13"] .phone[data-theme="glass"] .hero-btn { background: #1C2140; color: #fff; } .slide[data-screen="13"] .phone[data-theme="glass"] .feats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .slide[data-screen="13"] .phone[data-theme="glass"] .ft { align-items: flex-start; min-height: 62px; padding: 9px; font-size: 10.5px; text-align: left; } .slide[data-screen="13"] .phone[data-theme="glass"] .ft-t small { display: block; } .slide[data-screen="13"] .phone[data-theme="glass"] .sec, .slide[data-screen="13"] .phone[data-theme="glass"] .list { display: none; } .slide[data-screen="13"] .phone[data-theme="glass"] .nav span.on { background: #1C2140; color: #fff; } /* 2. Minimalisme : noir & blanc, typo énorme, bandeau pleine largeur, liste numérotée à filets */ .slide[data-screen="13"] .phone[data-theme="mini"] { --p-bg: #FFFFFF; --p-fg: #000; --p-muted: #777; --p-card: transparent; --p-card2: #fff; --p-acc: #000; --p-acc-fg: #fff; --p-tile-a: transparent; --p-line: #000; --p-lw: 0px; --p-r: 0px; --p-r-sm: 0px; --p-name: 25px; --p-shadow: none; --p-weight: 900; --p-track: -.05em; --p-frame: #000; } .slide[data-screen="13"] .phone[data-theme="mini"] .screen { grid-template-areas: "status" "head" "hero" "feats"; } .slide[data-screen="13"] .phone[data-theme="mini"] .app-head { margin-top: 12px; align-items: flex-end; } .slide[data-screen="13"] .phone[data-theme="mini"] .avatar { display: none; } .slide[data-screen="13"] .phone[data-theme="mini"] .hello small { text-transform: uppercase; letter-spacing: .18em; font-size: 8px; color: #000; } .slide[data-screen="13"] .phone[data-theme="mini"] .bell { border: 1px solid #000; border-radius: 0; } .slide[data-screen="13"] .phone[data-theme="mini"] .hero { margin: 4px -11px 0; padding: 14px 11px; } .slide[data-screen="13"] .phone[data-theme="mini"] .hero small { opacity: .6; } .slide[data-screen="13"] .phone[data-theme="mini"] .hero-btn { right: 11px; border-radius: 0; } .slide[data-screen="13"] .phone[data-theme="mini"] .feats { display: grid; gap: 0; counter-reset: ft; } .slide[data-screen="13"] .phone[data-theme="mini"] .ft { flex-direction: row; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #000; font-size: 11px; font-weight: 800; text-align: left; letter-spacing: -.02em; } .slide[data-screen="13"] .phone[data-theme="mini"] .ft::before { content: counter(ft, decimal-leading-zero); counter-increment: ft; width: 16px; font-size: 8.5px; font-weight: 400; } .slide[data-screen="13"] .phone[data-theme="mini"] .ft-ic { order: 3; margin-left: auto; width: 20px; height: 20px; border: 1px solid #000; border-radius: 0; } .slide[data-screen="13"] .phone[data-theme="mini"] .ft-ic svg { width: 11px; } .slide[data-screen="13"] .phone[data-theme="mini"] .ft-t { display: flex; align-items: baseline; gap: 6px; } .slide[data-screen="13"] .phone[data-theme="mini"] .ft-t small { display: inline; font-weight: 400; color: #777; } .slide[data-screen="13"] .phone[data-theme="mini"] .sec, .slide[data-screen="13"] .phone[data-theme="mini"] .list { display: none; } .slide[data-screen="13"] .phone[data-theme="mini"] .nav { left: 0; right: 0; bottom: 0; height: 48px; border-radius: 0; border-top: 1px solid #000; } .slide[data-screen="13"] .phone[data-theme="mini"] .nav span { color: #aaa; border-radius: 0; } .slide[data-screen="13"] .phone[data-theme="mini"] .nav span.on { background: none; color: #000; box-shadow: inset 0 -2px 0 #000; } /* 3. Neumorphisme : tout est de la même matière gris-bleu, en relief (extrudé) ou en creux (enfoncé) */ .slide[data-screen="13"] .phone[data-theme="neu"] { --p-bg: #E4E9F2; --p-fg: #3B4256; --p-muted: #8A93A8; --p-card: #E4E9F2; --p-card2: #E4E9F2; --p-acc: #E4E9F2; --p-acc-fg: #3B4256; --p-tile-a: #E4E9F2; --p-line: transparent; --p-lw: 0px; --p-r: 22px; --p-r-sm: 18px; --p-name: 18px; --p-shadow: 7px 7px 14px #C2C8D4, -7px -7px 14px #FFFFFF; --p-weight: 650; --p-track: -.01em; --p-frame: #C9D0DC; } .slide[data-screen="13"] .phone[data-theme="neu"] .screen { grid-template-areas: "status" "head" "hero" "feats"; gap: 14px; padding: 7px 14px 60px; } .slide[data-screen="13"] .phone[data-theme="neu"] .island { background: #3B4256; } .slide[data-screen="13"] .phone[data-theme="neu"] .avatar { box-shadow: var(--p-shadow); color: #5B7CFA; } .slide[data-screen="13"] .phone[data-theme="neu"] .bell { color: #5B7CFA; } .slide[data-screen="13"] .phone[data-theme="neu"] .hero { min-height: 84px; justify-content: flex-end; } .slide[data-screen="13"] .phone[data-theme="neu"] .hero small { color: #8A93A8; opacity: 1; } .slide[data-screen="13"] .phone[data-theme="neu"] .hero strong { color: #5B7CFA; } .slide[data-screen="13"] .phone[data-theme="neu"] .hero-btn { background: #E4E9F2; color: #5B7CFA; box-shadow: inset 3px 3px 6px #C2C8D4, inset -3px -3px 6px #fff; } .slide[data-screen="13"] .phone[data-theme="neu"] .feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .slide[data-screen="13"] .phone[data-theme="neu"] .ft { min-height: 64px; padding: 9px 6px; font-size: 9.5px; justify-content: center; } .slide[data-screen="13"] .phone[data-theme="neu"] .ft-ic { width: 28px; height: 28px; color: #5B7CFA; box-shadow: inset 3px 3px 6px #C2C8D4, inset -3px -3px 6px #fff; } .slide[data-screen="13"] .phone[data-theme="neu"] .sec, .slide[data-screen="13"] .phone[data-theme="neu"] .list { display: none; } .slide[data-screen="13"] .phone[data-theme="neu"] .nav span.on { background: #E4E9F2; color: #5B7CFA; box-shadow: inset 3px 3px 6px #C2C8D4, inset -3px -3px 6px #fff; } /* 4. Claymorphisme : pâte à modeler, bords très ronds, volumes gonflés (ombre interne + portée), pastels vifs */ .slide[data-screen="13"] .phone[data-theme="clay"] { --p-bg: #F1EBFF; --p-fg: #3A2E6E; --p-muted: #8A7FB8; --p-card: #fff; --p-card2: #fff; --p-acc: #A88BFF; --p-acc-fg: #fff; --p-tile-a: #fff; --p-r: 26px; --p-r-sm: 20px; --p-name: 18px; --p-font: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; --p-frame: #C9B8FF; --p-weight: 800; --p-track: -.01em; --p-shadow: inset -5px -5px 10px rgb(90 60 180 / .16), inset 5px 5px 10px rgb(255 255 255 / .9), 10px 14px 22px -10px rgb(90 60 180 / .35); } .slide[data-screen="13"] .phone[data-theme="clay"] .screen { grid-template-areas: "status" "head" "hero" "feats"; gap: 12px; background: linear-gradient(170deg, #F6F1FF, #E9E0FF); } .slide[data-screen="13"] .phone[data-theme="clay"] .island { background: #3A2E6E; } .slide[data-screen="13"] .phone[data-theme="clay"] .st-pct { display: inline; } .slide[data-screen="13"] .phone[data-theme="clay"] .st-bat { border-radius: 5px; } .slide[data-screen="13"] .phone[data-theme="clay"] .avatar { background: #FFB2D6; color: #3A2E6E; box-shadow: var(--p-shadow); } .slide[data-screen="13"] .phone[data-theme="clay"] .bell { color: #A88BFF; } .slide[data-screen="13"] .phone[data-theme="clay"] .hero { min-height: 140px; align-items: center; justify-content: flex-end; text-align: center; padding: 14px 12px 40px; gap: 2px; box-shadow: inset -8px -8px 16px rgb(60 30 160 / .3), inset 8px 8px 16px rgb(255 255 255 / .4), 12px 18px 28px -12px rgb(90 60 180 / .5); } .slide[data-screen="13"] .phone[data-theme="clay"] .blob { display: block; position: absolute; left: 50%; top: 12px; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; background: #FFD1E3; box-shadow: inset -6px -6px 12px rgb(200 90 140 / .4), inset 6px 6px 12px rgb(255 255 255 / .8), 8px 12px 18px -8px rgb(60 30 160 / .5); animation: s13-bob 3.2s ease-in-out infinite; } .slide[data-screen="13"] .phone[data-theme="clay"] .hero-btn { left: 50%; right: auto; bottom: 10px; width: 64px; height: 22px; margin-left: -32px; border-radius: 999px; color: #A88BFF; box-shadow: inset -3px -3px 6px rgb(90 60 180 / .2), inset 3px 3px 6px #fff; } .slide[data-screen="13"] .phone[data-theme="clay"] .feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .slide[data-screen="13"] .phone[data-theme="clay"] .ft { min-height: 58px; padding: 8px 6px; font-size: 9.5px; justify-content: center; color: #3A2E6E; } .slide[data-screen="13"] .phone[data-theme="clay"] .ft:nth-child(1) { background: #FFD1E3; } .slide[data-screen="13"] .phone[data-theme="clay"] .ft:nth-child(2) { background: #C9E7FF; } .slide[data-screen="13"] .phone[data-theme="clay"] .ft:nth-child(3) { background: #D8F5D2; } .slide[data-screen="13"] .phone[data-theme="clay"] .ft:nth-child(4) { background: #FFE7B3; } .slide[data-screen="13"] .phone[data-theme="clay"] .ft-ic { width: 26px; height: 26px; box-shadow: inset -2px -2px 4px rgb(90 60 180 / .15), inset 2px 2px 4px #fff; color: #3A2E6E; } .slide[data-screen="13"] .phone[data-theme="clay"] .sec, .slide[data-screen="13"] .phone[data-theme="clay"] .list { display: none; } .slide[data-screen="13"] .phone[data-theme="clay"] .nav { left: 50%; right: auto; width: 160px; margin-left: -80px; bottom: 14px; height: 42px; } .slide[data-screen="13"] .phone[data-theme="clay"] .nav span { width: 28px; height: 28px; } .slide[data-screen="13"] .phone[data-theme="clay"] .nav span.on { box-shadow: inset -2px -2px 4px rgb(60 30 160 / .3), inset 2px 2px 4px rgb(255 255 255 / .5); } /* 5. Flat design : aplats francs, zéro ombre ni dégradé, bandeau bleu, icônes carrées colorées */ .slide[data-screen="13"] .phone[data-theme="flat"] { --p-bg: #F4F6F9; --p-fg: #1F2933; --p-muted: #7B8794; --p-card: #fff; --p-card2: #fff; --p-acc: #fff; --p-acc-fg: #1F2933; --p-tile-a: #2F80ED; --p-line: transparent; --p-lw: 0px; --p-r: 6px; --p-r-sm: 6px; --p-name: 17px; --p-shadow: none; --p-weight: 700; --p-track: 0; --p-frame: #2F80ED; } .slide[data-screen="13"] .phone[data-theme="flat"] .screen { grid-template-areas: "status" "head" "hero" "feats" "sec" "list"; background: linear-gradient(180deg, #2F80ED 0 112px, #F4F6F9 112px); } .slide[data-screen="13"] .phone[data-theme="flat"] .status, .slide[data-screen="13"] .phone[data-theme="flat"] .app-head { color: #fff; } .slide[data-screen="13"] .phone[data-theme="flat"] .island { background: #1B5FBA; } .slide[data-screen="13"] .phone[data-theme="flat"] .hello small { color: rgb(255 255 255 / .75); } .slide[data-screen="13"] .phone[data-theme="flat"] .name::placeholder { color: rgb(255 255 255 / .7); } .slide[data-screen="13"] .phone[data-theme="flat"] .pen { color: rgb(255 255 255 / .8); } .slide[data-screen="13"] .phone[data-theme="flat"] .avatar { border-radius: 6px; background: #fff; color: #2F80ED; } .slide[data-screen="13"] .phone[data-theme="flat"] .bell { border-radius: 6px; background: rgb(255 255 255 / .22); color: #fff; } .slide[data-screen="13"] .phone[data-theme="flat"] .hero { padding: 10px 12px; } .slide[data-screen="13"] .phone[data-theme="flat"] .hero small { color: #2F80ED; opacity: 1; } .slide[data-screen="13"] .phone[data-theme="flat"] .hero-btn { border-radius: 6px; background: #2F80ED; color: #fff; } .slide[data-screen="13"] .phone[data-theme="flat"] .feats { gap: 8px; } .slide[data-screen="13"] .phone[data-theme="flat"] .ft { background: transparent; padding: 0; font-size: 8.5px; color: #1F2933; } .slide[data-screen="13"] .phone[data-theme="flat"] .ft-ic { width: 34px; height: 34px; border-radius: 8px; color: #fff; } .slide[data-screen="13"] .phone[data-theme="flat"] .ft-ic svg { width: 15px; } .slide[data-screen="13"] .phone[data-theme="flat"] .ft:nth-child(1) .ft-ic { background: #EB5757; } .slide[data-screen="13"] .phone[data-theme="flat"] .ft:nth-child(2) .ft-ic { background: #F2994A; } .slide[data-screen="13"] .phone[data-theme="flat"] .ft:nth-child(3) .ft-ic { background: #27AE60; } .slide[data-screen="13"] .phone[data-theme="flat"] .ft:nth-child(4) .ft-ic { background: #9B51E0; } .slide[data-screen="13"] .phone[data-theme="flat"] .sec { color: #1F2933; text-transform: uppercase; font-size: 9px; letter-spacing: .08em; } .slide[data-screen="13"] .phone[data-theme="flat"] .list { gap: 0; } .slide[data-screen="13"] .phone[data-theme="flat"] .list li { border-radius: 0; border-bottom: 1px solid #E3E7ED; padding: 6px 8px; } .slide[data-screen="13"] .phone[data-theme="flat"] .list li:first-child { border-radius: 6px 6px 0 0; } .slide[data-screen="13"] .phone[data-theme="flat"] .list li:last-child { border-radius: 0 0 6px 6px; border-bottom: 0; } .slide[data-screen="13"] .phone[data-theme="flat"] .li-ic { border-radius: 6px; color: #fff; } .slide[data-screen="13"] .phone[data-theme="flat"] .list em { color: #2F80ED; } .slide[data-screen="13"] .phone[data-theme="flat"] .nav { left: 0; right: 0; bottom: 0; height: 50px; border-radius: 0; border-top: 1px solid #E3E7ED; } .slide[data-screen="13"] .phone[data-theme="flat"] .nav span { color: #9AA5B1; border-radius: 0; } .slide[data-screen="13"] .phone[data-theme="flat"] .nav span.on { background: none; color: #2F80ED; } /* 6. Material design (M3) : surfaces tonales violettes, chips, FAB avec élévation, barre de nav à pilule */ .slide[data-screen="13"] .phone[data-theme="mat"] { --p-bg: #FEF7FF; --p-fg: #1D1B20; --p-muted: #49454F; --p-card: #F3EDF7; --p-card2: #F3EDF7; --p-acc: #EADDFF; --p-acc-fg: #21005D; --p-tile-a: #E8DEF8; --p-line: transparent; --p-lw: 0px; --p-r: 16px; --p-r-sm: 12px; --p-name: 17px; --p-shadow: none; --p-font: Roboto, system-ui, sans-serif; --p-weight: 500; --p-track: 0; --p-frame: #6750A4; } .slide[data-screen="13"] .phone[data-theme="mat"] .screen { grid-template-areas: "status" "head" "hero" "feats" "sec" "list"; } .slide[data-screen="13"] .phone[data-theme="mat"] .status { font-weight: 500; } .slide[data-screen="13"] .phone[data-theme="mat"] .island { background: #1D1B20; } .slide[data-screen="13"] .phone[data-theme="mat"] .app-head { padding: 4px 0; } .slide[data-screen="13"] .phone[data-theme="mat"] .avatar { background: #6750A4; color: #fff; font-weight: 500; } .slide[data-screen="13"] .phone[data-theme="mat"] .bell { background: transparent; color: #49454F; } .slide[data-screen="13"] .phone[data-theme="mat"] .hero small { color: #6750A4; opacity: 1; text-transform: none; letter-spacing: 0; font-size: 9px; font-weight: 500; } .slide[data-screen="13"] .phone[data-theme="mat"] .hero-btn { width: 30px; height: 30px; border-radius: 10px; background: #6750A4; color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3), 0 3px 6px 2px rgb(0 0 0 / .12); } .slide[data-screen="13"] .phone[data-theme="mat"] .feats { flex-wrap: wrap; gap: 5px; } .slide[data-screen="13"] .phone[data-theme="mat"] .ft { flex: 0 0 auto; flex-direction: row; gap: 4px; padding: 4px 8px 4px 5px; border-radius: 8px; border: 1px solid #79747E; background: transparent; font-size: 8.5px; font-weight: 500; } .slide[data-screen="13"] .phone[data-theme="mat"] .ft-ic { width: 14px; height: 14px; background: transparent; color: #6750A4; } .slide[data-screen="13"] .phone[data-theme="mat"] .ft-ic svg { width: 11px; } .slide[data-screen="13"] .phone[data-theme="mat"] .sec { font-size: 10px; font-weight: 500; } .slide[data-screen="13"] .phone[data-theme="mat"] .list { gap: 0; } .slide[data-screen="13"] .phone[data-theme="mat"] .list li { background: transparent; border-radius: 0; padding: 6px 4px; border-bottom: 1px solid #E7E0EC; font-weight: 500; } .slide[data-screen="13"] .phone[data-theme="mat"] .li-ic { color: #21005D; } .slide[data-screen="13"] .phone[data-theme="mat"] .list em { color: #6750A4; font-weight: 500; } .slide[data-screen="13"] .phone[data-theme="mat"] .nav { left: 0; right: 0; bottom: 0; height: 58px; border-radius: 0; padding-bottom: 6px; } .slide[data-screen="13"] .phone[data-theme="mat"] .nav span { width: 44px; height: 24px; border-radius: 12px; } .slide[data-screen="13"] .phone[data-theme="mat"] .nav span.on { background: #E8DEF8; color: #1D1B20; } /* 7. Néobrutalisme : contours noirs 2 px, ombres dures décalées, tuiles de couleurs franches */ .slide[data-screen="13"] .phone[data-theme="neob"] { --p-bg: #FFF7E0; --p-fg: #111; --p-muted: #3b3b3b; --p-card: #fff; --p-card2: #fff; --p-acc: #FF5A36; --p-acc-fg: #111; --p-tile-a: #fff; --p-line: #111; --p-lw: 2px; --p-r: 16px; --p-r-sm: 12px; --p-name: 18px; --p-shadow: 3px 3px 0 #111; --p-weight: 850; --p-track: -.02em; --p-frame: #111; } .slide[data-screen="13"] .phone[data-theme="neob"] .screen { grid-template-areas: "status" "head" "hero" "feats"; padding-bottom: 64px; } .slide[data-screen="13"] .phone[data-theme="neob"] .status { font-weight: 800; } .slide[data-screen="13"] .phone[data-theme="neob"] .st-bat { border-width: 2px; border-radius: 2px; } .slide[data-screen="13"] .phone[data-theme="neob"] .st-bat i { background: #2BB673; } .slide[data-screen="13"] .phone[data-theme="neob"] .bell { background: #FFD23F; } .slide[data-screen="13"] .phone[data-theme="neob"] .hero { padding: 10px 12px; } .slide[data-screen="13"] .phone[data-theme="neob"] .hero .blob { display: block; position: absolute; right: -14px; top: -14px; width: 54px; height: 54px; border-radius: 50%; background: #FFD23F; border: 2px solid #111; } .slide[data-screen="13"] .phone[data-theme="neob"] .hero-btn { border: 2px solid #111; background: #fff; color: #111; } .slide[data-screen="13"] .phone[data-theme="neob"] .feats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .slide[data-screen="13"] .phone[data-theme="neob"] .ft { align-items: flex-start; justify-content: space-between; min-height: 76px; padding: 9px; font-size: 11.5px; font-weight: 850; text-align: left; } .slide[data-screen="13"] .phone[data-theme="neob"] .ft:nth-child(1) { background: #7CC6FF; } .slide[data-screen="13"] .phone[data-theme="neob"] .ft:nth-child(2) { background: #FFD23F; } .slide[data-screen="13"] .phone[data-theme="neob"] .ft:nth-child(3) { background: #FF9CC0; } .slide[data-screen="13"] .phone[data-theme="neob"] .ft:nth-child(4) { background: #7EE0A0; } .slide[data-screen="13"] .phone[data-theme="neob"] .ft-ic { width: 28px; height: 28px; border: 2px solid #111; } .slide[data-screen="13"] .phone[data-theme="neob"] .ft-ic svg { width: 14px; } .slide[data-screen="13"] .phone[data-theme="neob"] .ft-t small { display: block; color: #111; opacity: .7; } .slide[data-screen="13"] .phone[data-theme="neob"] .sec, .slide[data-screen="13"] .phone[data-theme="neob"] .list { display: none; } .slide[data-screen="13"] .phone[data-theme="neob"] .nav { left: 0; right: 0; bottom: 0; height: 54px; border-radius: 0; border-width: 2px 0 0; box-shadow: none; padding-bottom: 6px; } .slide[data-screen="13"] .phone[data-theme="neob"] .nav span.on { border-radius: 10px; border: 2px solid #111; } /* 8. Brutalisme : brut de décoffrage — monospace, capitales, filets 1 px, aucun arrondi, lien bleu souligné */ .slide[data-screen="13"] .phone[data-theme="brut"] { --p-bg: #EDEDED; --p-fg: #000; --p-muted: #000; --p-card: #fff; --p-card2: #fff; --p-acc: #000; --p-acc-fg: #fff; --p-tile-a: #fff; --p-line: #000; --p-lw: 1px; --p-r: 0px; --p-r-sm: 0px; --p-name: 15px; --p-shadow: none; --p-font: "Courier New", Courier, monospace; --p-weight: 700; --p-track: 0; --p-frame: #000; } .slide[data-screen="13"] .phone[data-theme="brut"] .screen { grid-template-areas: "status" "head" "hero" "sec" "list"; gap: 0; padding: 7px 8px 56px; } .slide[data-screen="13"] .phone[data-theme="brut"] .status { border-bottom: 1px solid #000; margin: 0 0 8px; padding: 0 2px; height: 22px; } .slide[data-screen="13"] .phone[data-theme="brut"] .island, .slide[data-screen="13"] .phone[data-theme="brut"] .st-bat, .slide[data-screen="13"] .phone[data-theme="brut"] .st-bat::after, .slide[data-screen="13"] .phone[data-theme="brut"] .st-bat i { border-radius: 0; } .slide[data-screen="13"] .phone[data-theme="brut"] .app-head { border: 1px solid #000; background: #fff; padding: 5px; gap: 6px; } .slide[data-screen="13"] .phone[data-theme="brut"] .avatar { border-radius: 0; } .slide[data-screen="13"] .phone[data-theme="brut"] .hello small { text-transform: uppercase; font-size: 8px; } .slide[data-screen="13"] .phone[data-theme="brut"] .name { text-transform: uppercase; } .slide[data-screen="13"] .phone[data-theme="brut"] .pen { color: #0000EE; } .slide[data-screen="13"] .phone[data-theme="brut"] .bell { border-radius: 0; } .slide[data-screen="13"] .phone[data-theme="brut"] .hero { margin-top: -1px; padding: 8px 8px 10px; gap: 2px; } .slide[data-screen="13"] .phone[data-theme="brut"] .hero small { opacity: 1; color: #fff; font-family: inherit; letter-spacing: 0; } .slide[data-screen="13"] .phone[data-theme="brut"] .hero small::before { content: "// "; } .slide[data-screen="13"] .phone[data-theme="brut"] .hero strong { font-size: 12px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 2px; } .slide[data-screen="13"] .phone[data-theme="brut"] .hero-btn { border-radius: 0; width: 22px; height: 22px; right: 8px; bottom: 8px; } .slide[data-screen="13"] .phone[data-theme="brut"] .feats { display: none; } .slide[data-screen="13"] .phone[data-theme="brut"] .sec { margin: 8px 0 0; padding: 3px 5px; border: 1px solid #000; border-bottom: 0; background: #000; color: #fff; text-transform: uppercase; font-size: 9px; letter-spacing: .1em; } .slide[data-screen="13"] .phone[data-theme="brut"] .list { gap: 0; } .slide[data-screen="13"] .phone[data-theme="brut"] .list li { margin-top: -1px; padding: 6px 5px; font-size: 10px; text-transform: uppercase; } .slide[data-screen="13"] .phone[data-theme="brut"] .li-t small { text-transform: none; } .slide[data-screen="13"] .phone[data-theme="brut"] .li-ic { width: 20px; height: 20px; border-radius: 0; border: 1px solid #000; } .slide[data-screen="13"] .phone[data-theme="brut"] .li-ic svg { width: 11px; } .slide[data-screen="13"] .phone[data-theme="brut"] .list em { color: #0000EE; text-decoration: underline; } .slide[data-screen="13"] .phone[data-theme="brut"] .nav { left: 0; right: 0; bottom: 0; height: 46px; border-radius: 0; border-width: 1px 0 0; } .slide[data-screen="13"] .phone[data-theme="brut"] .nav span { width: 25%; height: 46px; border-radius: 0; color: #000; border-right: 1px solid #000; } .slide[data-screen="13"] .phone[data-theme="brut"] .nav span:last-child { border-right: 0; } .slide[data-screen="13"] .phone[data-theme="brut"] .nav span.on { background: #000; color: #fff; } /* 9. Maximalisme : trop, c'est juste assez — motifs, couleurs qui claquent, serif italique, cartes penchées, ombres empilées */ .slide[data-screen="13"] .phone[data-theme="max"] { --p-bg: #FFE3F2; --p-fg: #2B0B3F; --p-muted: #7A2A8E; --p-card: #FFF7B3; --p-card2: #FF3D7F; --p-acc: #5B2A86; --p-acc-fg: #FFD400; --p-tile-a: #00C2A8; --p-line: #2B0B3F; --p-lw: 2px; --p-r: 18px 4px 18px 4px; --p-r-sm: 12px 3px 12px 3px; --p-name: 21px; --p-shadow: 4px 4px 0 #FF3D7F, 8px 8px 0 #FFD400; --p-font: "Iowan Old Style", "Palatino Linotype", Georgia, serif; --p-weight: 900; --p-track: -.01em; --p-frame: #FFD400; } .slide[data-screen="13"] .phone[data-theme="max"] .screen { grid-template-areas: "status" "head" "hero" "feats"; gap: 12px; padding: 7px 14px 62px; background: repeating-linear-gradient(45deg, transparent 0 9px, rgb(255 61 127 / .12) 9px 11px), radial-gradient(circle at 82% 18%, #FFD400 0 16px, transparent 17px), radial-gradient(circle at 10% 64%, #00C2A8 0 11px, transparent 12px), #FFE3F2; } .slide[data-screen="13"] .phone[data-theme="max"] .grain { opacity: 1; background: radial-gradient(circle, rgb(91 42 134 / .16) 0 1.2px, transparent 1.5px) 0 0 / 9px 9px; } .slide[data-screen="13"] .phone[data-theme="max"] .status { font-style: italic; font-weight: 900; } .slide[data-screen="13"] .phone[data-theme="max"] .island { background: #5B2A86; box-shadow: 0 0 0 2px #FFD400; } .slide[data-screen="13"] .phone[data-theme="max"] .avatar { border-radius: 50% 50% 50% 4px; background: #FF3D7F; color: #fff; box-shadow: 3px 3px 0 #2B0B3F; } .slide[data-screen="13"] .phone[data-theme="max"] .hello small { font-style: italic; text-transform: uppercase; letter-spacing: .12em; font-size: 8px; } .slide[data-screen="13"] .phone[data-theme="max"] .name { font-style: italic; } .slide[data-screen="13"] .phone[data-theme="max"] .bell { background: #FFD400; box-shadow: 3px 3px 0 #2B0B3F; } .slide[data-screen="13"] .phone[data-theme="max"] .hero { min-height: 100px; justify-content: flex-end; margin: 2px 8px 8px 2px; transform: rotate(-1.2deg); background: linear-gradient(135deg, #5B2A86, #8E3FBF 60%, #FF3D7F); box-shadow: 4px 4px 0 #FFD400, 8px 8px 0 #00C2A8; } .slide[data-screen="13"] .phone[data-theme="max"] .hero .blob { display: block; position: absolute; right: -16px; top: -16px; width: 70px; height: 70px; border-radius: 50%; border: 2px solid #2B0B3F; background: repeating-radial-gradient(circle, #FFD400 0 5px, #FF3D7F 5px 10px); animation: s13-spin 14s linear infinite; } .slide[data-screen="13"] .phone[data-theme="max"] .hero small { color: #FFD400; opacity: 1; } .slide[data-screen="13"] .phone[data-theme="max"] .hero strong { font-size: 15px; font-style: italic; color: #fff; text-shadow: 2px 2px 0 #FF3D7F; } .slide[data-screen="13"] .phone[data-theme="max"] .hero-btn { background: #FFD400; color: #2B0B3F; border: 2px solid #2B0B3F; } .slide[data-screen="13"] .phone[data-theme="max"] .feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 2px 8px 4px 2px; } .slide[data-screen="13"] .phone[data-theme="max"] .ft { align-items: flex-start; min-height: 60px; padding: 8px; font-size: 10.5px; text-align: left; font-style: italic; } .slide[data-screen="13"] .phone[data-theme="max"] .ft:nth-child(1) { background: #FFD400; transform: rotate(1.5deg); } .slide[data-screen="13"] .phone[data-theme="max"] .ft:nth-child(2) { background: #00C2A8; transform: rotate(-1.5deg); } .slide[data-screen="13"] .phone[data-theme="max"] .ft:nth-child(3) { background: #FF3D7F; color: #fff; transform: rotate(-1deg); } .slide[data-screen="13"] .phone[data-theme="max"] .ft:nth-child(4) { background: #B8F5FF; transform: rotate(1deg); } .slide[data-screen="13"] .phone[data-theme="max"] .ft-ic { background: #2B0B3F; color: #FFD400; border: 2px solid #FFD400; } .slide[data-screen="13"] .phone[data-theme="max"] .ft-t small { display: block; font-style: normal; color: inherit; opacity: .8; } .slide[data-screen="13"] .phone[data-theme="max"] .sec, .slide[data-screen="13"] .phone[data-theme="max"] .list { display: none; } .slide[data-screen="13"] .phone[data-theme="max"] .nav { background: linear-gradient(90deg, #FF3D7F, #FFD400, #00C2A8, #8E3FBF); box-shadow: 3px 3px 0 #2B0B3F; } .slide[data-screen="13"] .phone[data-theme="max"] .nav span { color: #2B0B3F; } .slide[data-screen="13"] .phone[data-theme="max"] .nav span.on { background: #2B0B3F; color: #FFD400; } /* 10. Rétro (années 70) : crème, orange, moutarde, bandes coucher de soleil, contours bruns épais, serif ronde */ .slide[data-screen="13"] .phone[data-theme="retro"] { --p-bg: #F6E9CF; --p-fg: #4A2C17; --p-muted: #9A6B3E; --p-card: #FBF3E3; --p-card2: #4A2C17; --p-acc: #FBF3E3; --p-acc-fg: #4A2C17; --p-tile-a: #E4B23A; --p-line: #4A2C17; --p-lw: 2px; --p-r: 14px; --p-r-sm: 999px; --p-name: 20px; --p-shadow: 0 3px 0 #4A2C17; --p-font: "Iowan Old Style", "Palatino Linotype", Georgia, serif; --p-weight: 800; --p-track: .01em; --p-frame: #E8772E; } .slide[data-screen="13"] .phone[data-theme="retro"] .screen { grid-template-areas: "status" "head" "hero" "feats" "sec" "list"; background: linear-gradient(180deg, #FBF3E3, #F6E9CF); } .slide[data-screen="13"] .phone[data-theme="retro"] .grain { opacity: 1; background: radial-gradient(circle, rgb(74 44 23 / .07) 0 1px, transparent 1.3px) 0 0 / 5px 5px; } .slide[data-screen="13"] .phone[data-theme="retro"] .status { font-style: italic; letter-spacing: .04em; } .slide[data-screen="13"] .phone[data-theme="retro"] .island { background: #4A2C17; border-radius: 4px; } .slide[data-screen="13"] .phone[data-theme="retro"] .avatar { border-radius: 9px; background: #E4B23A; color: #4A2C17; } .slide[data-screen="13"] .phone[data-theme="retro"] .hello small { text-transform: uppercase; letter-spacing: .16em; font-size: 8px; font-weight: 700; } .slide[data-screen="13"] .phone[data-theme="retro"] .bell { border-radius: 9px; background: #FBF3E3; } .slide[data-screen="13"] .phone[data-theme="retro"] .hero { min-height: 90px; justify-content: flex-end; padding: 10px 12px 12px; box-shadow: 0 4px 0 #4A2C17; background: linear-gradient(180deg, #E8772E 0 10px, #E4B23A 10px 20px, #C94A6B 20px 30px, #2E8B85 30px 34px, #FBF3E3 34px); } .slide[data-screen="13"] .phone[data-theme="retro"] .hero .blob { display: block; position: absolute; right: 12px; top: 8px; width: 34px; height: 34px; border-radius: 50%; background: #FFF4DF; border: 2px solid #4A2C17; box-shadow: 0 0 0 4px #E8772E, 0 0 0 6px #4A2C17; } .slide[data-screen="13"] .phone[data-theme="retro"] .hero small { color: #E8772E; opacity: 1; letter-spacing: .16em; font-weight: 700; margin-top: 26px; } .slide[data-screen="13"] .phone[data-theme="retro"] .hero strong { font-size: 15px; } .slide[data-screen="13"] .phone[data-theme="retro"] .hero-btn { background: #4A2C17; color: #FFF4DF; } .slide[data-screen="13"] .phone[data-theme="retro"] .feats { gap: 5px; } .slide[data-screen="13"] .phone[data-theme="retro"] .ft { padding: 6px 2px; font-size: 7.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } .slide[data-screen="13"] .phone[data-theme="retro"] .ft-ic { color: #4A2C17; border: 2px solid #4A2C17; } .slide[data-screen="13"] .phone[data-theme="retro"] .ft:nth-child(2) .ft-ic { background: #E8772E; } .slide[data-screen="13"] .phone[data-theme="retro"] .ft:nth-child(3) .ft-ic { background: #C94A6B; color: #FFF4DF; } .slide[data-screen="13"] .phone[data-theme="retro"] .ft:nth-child(4) .ft-ic { background: #2E8B85; color: #FFF4DF; } .slide[data-screen="13"] .phone[data-theme="retro"] .sec { text-transform: uppercase; letter-spacing: .16em; font-size: 9px; color: #E8772E; } .slide[data-screen="13"] .phone[data-theme="retro"] .list { gap: 0; } .slide[data-screen="13"] .phone[data-theme="retro"] .list li { border: 0; border-bottom: 2px dotted #4A2C17; background: transparent; border-radius: 0; padding: 6px 2px; box-shadow: none; } .slide[data-screen="13"] .phone[data-theme="retro"] .li-ic { width: 20px; height: 20px; background: transparent; border: 2px solid #4A2C17; color: #E8772E; } .slide[data-screen="13"] .phone[data-theme="retro"] .list em { font-style: italic; color: #E8772E; font-size: 11px; } .slide[data-screen="13"] .phone[data-theme="retro"] .nav { border: 0; box-shadow: 0 3px 0 #2A1608; } .slide[data-screen="13"] .phone[data-theme="retro"] .nav span { color: #F6E9CF; } .slide[data-screen="13"] .phone[data-theme="retro"] .nav span.on { background: #E4B23A; color: #4A2C17; } /* 11. Éditorial : magazine — serif de titre, kickers capitales espacées, filets fins, citation, colonnes */ .slide[data-screen="13"] .phone[data-theme="edito"] { --p-bg: #FBFAF6; --p-fg: #111; --p-muted: #666; --p-card: transparent; --p-card2: #FBFAF6; --p-acc: transparent; --p-acc-fg: #111; --p-tile-a: transparent; --p-line: #111; --p-lw: 0px; --p-r: 0px; --p-r-sm: 0px; --p-name: 26px; --p-shadow: none; --p-font: "Iowan Old Style", "Palatino Linotype", Georgia, serif; --p-weight: 400; --p-track: -.02em; --p-frame: #1a1a1a; } .slide[data-screen="13"] .phone[data-theme="edito"] .screen { grid-template-areas: "status" "head" "hero" "feats" "sec" "list"; gap: 7px; padding: 7px 13px 56px; } .slide[data-screen="13"] .phone[data-theme="edito"] .status { font-family: system-ui, sans-serif; font-weight: 500; font-size: 9px; letter-spacing: .04em; } .slide[data-screen="13"] .phone[data-theme="edito"] .island { background: #111; } .slide[data-screen="13"] .phone[data-theme="edito"] .app-head { margin-top: 8px; border-top: 2px solid #111; padding-top: 6px; align-items: flex-start; } .slide[data-screen="13"] .phone[data-theme="edito"] .avatar, .slide[data-screen="13"] .phone[data-theme="edito"] .bell { display: none; } .slide[data-screen="13"] .phone[data-theme="edito"] .hello small { font-family: system-ui, sans-serif; text-transform: uppercase; letter-spacing: .22em; font-size: 7.5px; font-weight: 600; color: #111; } .slide[data-screen="13"] .phone[data-theme="edito"] .name { line-height: 1; padding-top: 2px; } .slide[data-screen="13"] .phone[data-theme="edito"] .hero { border-top: 1px solid #111; border-bottom: 1px solid #111; padding: 8px 0 8px 16px; gap: 3px; } .slide[data-screen="13"] .phone[data-theme="edito"] .hero::before { content: "“"; position: absolute; left: -1px; top: 2px; font-size: 40px; line-height: 1; font-style: italic; color: #111; } .slide[data-screen="13"] .phone[data-theme="edito"] .hero small { font-family: system-ui, sans-serif; letter-spacing: .2em; font-size: 7.5px; color: #666; opacity: 1; } .slide[data-screen="13"] .phone[data-theme="edito"] .hero strong { font-size: 15px; font-style: italic; font-weight: 400; letter-spacing: -.01em; } .slide[data-screen="13"] .phone[data-theme="edito"] .hero-btn { display: none; } .slide[data-screen="13"] .phone[data-theme="edito"] .feats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .slide[data-screen="13"] .phone[data-theme="edito"] .ft { flex-direction: row; align-items: baseline; gap: 4px; padding: 5px 6px 5px 0; border-bottom: 1px solid rgb(0 0 0 / .2); font-family: system-ui, sans-serif; font-size: 7.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; text-align: left; } .slide[data-screen="13"] .phone[data-theme="edito"] .ft:nth-child(odd) { border-right: 1px solid rgb(0 0 0 / .2); } .slide[data-screen="13"] .phone[data-theme="edito"] .ft:nth-child(even) { padding-left: 6px; } .slide[data-screen="13"] .phone[data-theme="edito"] .ft-ic { display: none; } .slide[data-screen="13"] .phone[data-theme="edito"] .ft-t small { display: block; text-transform: none; letter-spacing: 0; font-family: var(--p-font); font-style: italic; font-size: 8.5px; font-weight: 400; color: #444; } .slide[data-screen="13"] .phone[data-theme="edito"] .sec { margin: 4px 0 0; padding-bottom: 3px; border-bottom: 2px solid #111; font-family: system-ui, sans-serif; text-transform: uppercase; letter-spacing: .22em; font-size: 7.5px; font-weight: 600; color: #111; } .slide[data-screen="13"] .phone[data-theme="edito"] .list { gap: 0; } .slide[data-screen="13"] .phone[data-theme="edito"] .list li { padding: 5px 0; border-bottom: 1px solid rgb(0 0 0 / .2); font-weight: 400; font-size: 11px; } .slide[data-screen="13"] .phone[data-theme="edito"] .li-ic { display: none; } .slide[data-screen="13"] .phone[data-theme="edito"] .li-t small { font-family: system-ui, sans-serif; font-size: 7.5px; text-transform: uppercase; letter-spacing: .1em; } .slide[data-screen="13"] .phone[data-theme="edito"] .list em { font-style: italic; font-size: 12px; font-weight: 400; } .slide[data-screen="13"] .phone[data-theme="edito"] .nav { left: 0; right: 0; bottom: 0; height: 44px; border-radius: 0; border-top: 1px solid #111; } .slide[data-screen="13"] .phone[data-theme="edito"] .nav span { width: 44px; height: 44px; border-radius: 0; color: #999; } .slide[data-screen="13"] .phone[data-theme="edito"] .nav span.on { background: none; color: #111; box-shadow: inset 0 2px 0 #111; } /* 12. Fait main : carnet ligné, post-it, onglets à droite */ .slide[data-screen="13"] .phone[data-theme="main"] { --p-bg: #F4EAD8; --p-fg: #3a2a1c; --p-muted: #8a6f55; --p-card: transparent; --p-card2: #FBF4E6; --p-acc: #D9653B; --p-acc-fg: #FFF6E6; --p-tile-a: transparent; --p-line: #3a2a1c; --p-lw: 1.5px; --p-r: 4px; --p-r-sm: 0; --p-name: 20px; --p-shadow: none; --p-font: "Iowan Old Style", "Palatino Linotype", Georgia, serif; --p-weight: 700; --p-track: 0; --p-frame: #6b4f38; } .slide[data-screen="13"] .phone[data-theme="main"] .screen { grid-template-areas: "status" "head" "hero" "sec" "list"; padding-right: 38px; padding-left: 26px; background: repeating-linear-gradient(180deg, transparent 0 21px, rgb(58 42 28 / .13) 21px 22px), #F4EAD8; } .slide[data-screen="13"] .phone[data-theme="main"] .grain { opacity: 1; background: linear-gradient(90deg, transparent 18px, rgb(217 101 59 / .5) 18px 19.5px, transparent 19.5px), radial-gradient(circle at 80% 70%, rgb(156 197 161 / .18), transparent 45%), repeating-radial-gradient(circle at 30% 40%, rgb(58 42 28 / .04) 0 1px, transparent 1px 4px); } .slide[data-screen="13"] .phone[data-theme="main"] .status { margin: 0 -27px 0 -15px; font-style: italic; } .slide[data-screen="13"] .phone[data-theme="main"] .st-pct { display: inline; } .slide[data-screen="13"] .phone[data-theme="main"] .st-bat { border-radius: 4px 2px 5px 3px; transform: rotate(-3deg); } .slide[data-screen="13"] .phone[data-theme="main"] .avatar, .slide[data-screen="13"] .phone[data-theme="main"] .bell { display: none; } .slide[data-screen="13"] .phone[data-theme="main"] .hello small { font-style: italic; } .slide[data-screen="13"] .phone[data-theme="main"] .name { font-style: italic; } .slide[data-screen="13"] .phone[data-theme="main"] .hero { background: #F2C45A; color: #3a2a1c; border: 0; border-radius: 2px 3px 2px 4px; transform: rotate(-2deg); margin: 6px 4px 2px; box-shadow: 2px 4px 0 rgb(58 42 28 / .2); } .slide[data-screen="13"] .phone[data-theme="main"] .hero .blob { display: block; position: absolute; left: 50%; top: -5px; width: 46px; height: 13px; margin-left: -23px; background: rgb(255 250 235 / .7); transform: rotate(3deg); } .slide[data-screen="13"] .phone[data-theme="main"] .hero-btn { background: #3a2a1c; color: #F2C45A; } .slide[data-screen="13"] .phone[data-theme="main"] .feats { display: none; } .slide[data-screen="13"] .phone[data-theme="main"] .sec { font-size: 12px; font-style: italic; color: #D9653B; text-decoration: underline wavy rgb(217 101 59 / .5); text-underline-offset: 3px; } .slide[data-screen="13"] .phone[data-theme="main"] .list { gap: 0; } .slide[data-screen="13"] .phone[data-theme="main"] .list li { border: 0; border-bottom: 1.5px dashed rgb(58 42 28 / .3); padding: 7px 0; font-size: 11px; } .slide[data-screen="13"] .phone[data-theme="main"] .li-ic { width: 16px; height: 16px; border: 1.5px solid #3a2a1c; border-radius: 3px 5px 2px 4px; transform: rotate(-4deg); } .slide[data-screen="13"] .phone[data-theme="main"] .li-ic svg { width: 9px; } .slide[data-screen="13"] .phone[data-theme="main"] .nav { left: auto; right: 0; top: 70px; bottom: auto; height: auto; flex-direction: column; gap: 6px; background: transparent; border: 0; box-shadow: none; border-radius: 0; } .slide[data-screen="13"] .phone[data-theme="main"] .nav span { width: 26px; height: 44px; border-radius: 10px 0 0 10px; color: #3a2a1c; border: 1.5px solid #3a2a1c; border-right: 0; } .slide[data-screen="13"] .phone[data-theme="main"] .nav span:nth-child(1) { background: #D9653B; color: #FFF6E6; } .slide[data-screen="13"] .phone[data-theme="main"] .nav span:nth-child(2) { background: #9CC5A1; } .slide[data-screen="13"] .phone[data-theme="main"] .nav span:nth-child(3) { background: #F2C45A; } .slide[data-screen="13"] .phone[data-theme="main"] .nav span:nth-child(4) { background: #8FB3D9; } .slide[data-screen="13"] .phone[data-theme="main"] .nav span.on { width: 32px; } /* 13. Terracotta : arche en haut, serif, puces arrondies, nav brune */ .slide[data-screen="13"] .phone[data-theme="terra"] { --p-bg: #F6E7D8; --p-fg: #4A2418; --p-muted: #9A6A55; --p-card: #FFF5EC; --p-card2: #FFF5EC; --p-acc: #C8553D; --p-acc-fg: #FFF5EC; --p-tile-a: #F2C9B0; --p-line: transparent; --p-lw: 0px; --p-r: 22px; --p-r-sm: 16px; --p-name: 20px; --p-shadow: 0 6px 14px -6px rgb(120 50 30 / .3); --p-font: "Iowan Old Style", "Palatino Linotype", Georgia, serif; --p-weight: 700; --p-track: -.01em; --p-frame: #8A3E2B; } .slide[data-screen="13"] .phone[data-theme="terra"] .screen { grid-template-areas: "status" "hero" "head" "feats" "sec" "list"; } .slide[data-screen="13"] .phone[data-theme="terra"] .hero { min-height: 126px; margin: 4px 14px 0; align-items: center; justify-content: flex-end; text-align: center; padding: 12px 10px 14px; border-radius: 999px 999px 18px 18px; background: linear-gradient(180deg, #EBAE84, #C8553D 85%); } .slide[data-screen="13"] .phone[data-theme="terra"] .hero .blob { display: block; position: absolute; left: 50%; top: 16px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: #F8D9AE; box-shadow: 0 0 0 7px rgb(248 217 174 / .3); } .slide[data-screen="13"] .phone[data-theme="terra"] .hero-btn { display: none; } .slide[data-screen="13"] .phone[data-theme="terra"] .avatar { display: none; } .slide[data-screen="13"] .phone[data-theme="terra"] .app-head { text-align: center; } .slide[data-screen="13"] .phone[data-theme="terra"] .hello { justify-items: center; } .slide[data-screen="13"] .phone[data-theme="terra"] .name { text-align: center; font-style: italic; } .slide[data-screen="13"] .phone[data-theme="terra"] .bell { display: none; } .slide[data-screen="13"] .phone[data-theme="terra"] .feats { flex-wrap: wrap; justify-content: center; gap: 5px; } .slide[data-screen="13"] .phone[data-theme="terra"] .ft { flex: 0 0 auto; flex-direction: row; gap: 5px; padding: 4px 9px 4px 4px; border-radius: 999px; font-size: 9.5px; } .slide[data-screen="13"] .phone[data-theme="terra"] .ft-ic { width: 18px; height: 18px; color: #C8553D; } .slide[data-screen="13"] .phone[data-theme="terra"] .ft-ic svg { width: 10px; } .slide[data-screen="13"] .phone[data-theme="terra"] .sec { font-style: italic; color: #C8553D; } .slide[data-screen="13"] .phone[data-theme="terra"] .li-ic { color: #C8553D; } .slide[data-screen="13"] .phone[data-theme="terra"] .nav { background: #4A2418; } .slide[data-screen="13"] .phone[data-theme="terra"] .nav span { color: #E9C9B5; } /* 14. Pastel bento : grille asymétrique, très gras, pilule noire flottante */ .slide[data-screen="13"] .phone[data-theme="pastel"] { --p-bg: #ffffff; --p-fg: #0B0B0C; --p-muted: #6b6f76; --p-card: #EEF0F3; --p-card2: #EEF0F3; --p-acc: #0B0B0C; --p-acc-fg: #fff; --p-tile-a: #fff; --p-r: 22px; --p-r-sm: 16px; --p-shadow: none; --p-weight: 850; --p-track: -.06em; --p-name: 23px; --p-frame: #d9dbe0; } .slide[data-screen="13"] .phone[data-theme="pastel"] .screen { grid-template-columns: 1.12fr 1fr; gap: 7px; grid-template-areas: "status status" "head head" "f1 f2" "f1 f3" "f4 f4"; } .slide[data-screen="13"] .phone[data-theme="pastel"] .app-head { align-items: flex-start; margin: 8px 0 4px; } .slide[data-screen="13"] .phone[data-theme="pastel"] .avatar { display: none; } .slide[data-screen="13"] .phone[data-theme="pastel"] .hello small { font-size: 10px; } .slide[data-screen="13"] .phone[data-theme="pastel"] .hero, .slide[data-screen="13"] .phone[data-theme="pastel"] .sec, .slide[data-screen="13"] .phone[data-theme="pastel"] .list { display: none; } .slide[data-screen="13"] .phone[data-theme="pastel"] .feats { display: contents; } .slide[data-screen="13"] .phone[data-theme="pastel"] .ft { align-items: flex-start; justify-content: space-between; min-height: 64px; padding: 10px; font-size: 12px; font-weight: 750; letter-spacing: -.02em; text-align: left; } .slide[data-screen="13"] .phone[data-theme="pastel"] .ft:nth-child(1) { grid-area: f1; background: #CFE6FF; min-height: 136px; } .slide[data-screen="13"] .phone[data-theme="pastel"] .ft:nth-child(2) { grid-area: f2; background: #EEF0F3; } .slide[data-screen="13"] .phone[data-theme="pastel"] .ft:nth-child(3) { grid-area: f3; background: #D3F3E2; } .slide[data-screen="13"] .phone[data-theme="pastel"] .ft:nth-child(4) { grid-area: f4; background: #FFF0B3; flex-direction: row; align-items: center; gap: 8px; min-height: 0; } .slide[data-screen="13"] .phone[data-theme="pastel"] .ft-ic { width: 30px; height: 30px; } .slide[data-screen="13"] .phone[data-theme="pastel"] .ft-ic svg { width: 14px; } .slide[data-screen="13"] .phone[data-theme="pastel"] .ft-t small { display: block; letter-spacing: 0; } .slide[data-screen="13"] .phone[data-theme="pastel"] .nav { right: auto; left: 12px; bottom: 12px; height: 40px; padding: 0 4px; gap: 2px; background: #0B0B0C; justify-content: flex-start; } .slide[data-screen="13"] .phone[data-theme="pastel"] .nav span { color: #8d9097; } .slide[data-screen="13"] .phone[data-theme="pastel"] .nav span.on { background: #fff; color: #0B0B0C; } /* 15. Sombre : barre latérale gauche compacte + cartes vert acide */ .slide[data-screen="13"] .phone[data-theme="sombre"] { --p-bg: #0A0B0E; --p-fg: #F2F3F5; --p-muted: #7d818c; --p-card: #15171C; --p-card2: #15171C; --p-acc: #B7FF5A; --p-acc-fg: #0A0B0E; --p-tile-a: #1E2A12; --p-line: #262930; --p-lw: 1px; --p-r: 16px; --p-r-sm: 12px; --p-name: 16px; --p-shadow: none; --p-weight: 700; --p-track: -.01em; --p-frame: #2a2c31; } .slide[data-screen="13"] .phone[data-theme="sombre"] .screen { grid-template-areas: "status" "head" "hero" "sec" "list"; padding-left: 52px; padding-bottom: 14px; } .slide[data-screen="13"] .phone[data-theme="sombre"] .status { margin-left: -41px; } .slide[data-screen="13"] .phone[data-theme="sombre"] .st-time { color: #B7FF5A; } .slide[data-screen="13"] .phone[data-theme="sombre"] .st-pct { display: inline; } .slide[data-screen="13"] .phone[data-theme="sombre"] .st-bat.low i { background: #FF5A5A; } .slide[data-screen="13"] .phone[data-theme="sombre"] .avatar { display: none; } .slide[data-screen="13"] .phone[data-theme="sombre"] .bell { box-shadow: 0 0 0 1px #262930; } .slide[data-screen="13"] .phone[data-theme="sombre"] .hero { background: #111318; color: #F2F3F5; border-color: rgb(183 255 90 / .35); min-height: 96px; justify-content: flex-end; box-shadow: 0 0 22px rgb(183 255 90 / .16), inset 0 0 20px rgb(183 255 90 / .06); } .slide[data-screen="13"] .phone[data-theme="sombre"] .hero strong { color: #B7FF5A; } .slide[data-screen="13"] .phone[data-theme="sombre"] .hero-btn { background: #B7FF5A; color: #0A0B0E; box-shadow: 0 0 14px rgb(183 255 90 / .5); } .slide[data-screen="13"] .phone[data-theme="sombre"] .hero .blob { display: block; position: absolute; right: -20px; top: -20px; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, rgb(183 255 90 / .35), transparent); } .slide[data-screen="13"] .phone[data-theme="sombre"] .feats { display: none; } .slide[data-screen="13"] .phone[data-theme="sombre"] .li-ic { color: #B7FF5A; } .slide[data-screen="13"] .phone[data-theme="sombre"] .list li { padding: 9px; } .slide[data-screen="13"] .phone[data-theme="sombre"] .list em { color: #B7FF5A; } .slide[data-screen="13"] .phone[data-theme="sombre"] .nav { left: 8px; right: auto; top: 36px; bottom: 12px; width: 36px; height: auto; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 8px 0; border-radius: 18px; } .slide[data-screen="13"] .phone[data-theme="sombre"] .nav span { width: 28px; height: 28px; border-radius: 10px; } .slide[data-screen="13"] .phone[data-theme="sombre"] .nav span.on { box-shadow: 0 0 14px rgb(183 255 90 / .45); } /* 16. Néon : fond nuit, halos magenta / cyan, tuiles au contour lumineux */ .slide[data-screen="13"] .phone[data-theme="neon"] { --p-bg: #0B0A1F; --p-fg: #F4F1FF; --p-muted: #9A93C8; --p-card: rgb(255 255 255 / .04); --p-card2: #15122E; --p-acc: #FF2BD6; --p-acc-fg: #0B0A1F; --p-tile-a: rgb(34 230 255 / .12); --p-line: rgb(34 230 255 / .55); --p-lw: 1px; --p-r: 18px; --p-r-sm: 14px; --p-name: 19px; --p-shadow: 0 0 12px rgb(34 230 255 / .22); --p-weight: 800; --p-track: -.01em; --p-frame: #1A1640; } .slide[data-screen="13"] .phone[data-theme="neon"] .screen { grid-template-areas: "status" "head" "hero" "feats"; background: radial-gradient(circle at 15% 8%, rgb(255 43 214 / .28), transparent 42%), radial-gradient(circle at 95% 62%, rgb(34 230 255 / .22), transparent 46%), #0B0A1F; } .slide[data-screen="13"] .phone[data-theme="neon"] .st-time { color: #22E6FF; } .slide[data-screen="13"] .phone[data-theme="neon"] .avatar { background: linear-gradient(135deg, #FF2BD6, #22E6FF); color: #0B0A1F; } .slide[data-screen="13"] .phone[data-theme="neon"] .hero { min-height: 92px; justify-content: flex-end; color: #F4F1FF; border-color: rgb(255 43 214 / .75); background: linear-gradient(135deg, rgb(255 43 214 / .2), rgb(34 230 255 / .12)); box-shadow: 0 0 18px rgb(255 43 214 / .35), inset 0 0 14px rgb(255 43 214 / .15); } .slide[data-screen="13"] .phone[data-theme="neon"] .hero strong { color: #fff; text-shadow: 0 0 8px rgb(255 43 214 / .9); } .slide[data-screen="13"] .phone[data-theme="neon"] .hero-btn { background: #22E6FF; color: #0B0A1F; box-shadow: 0 0 12px #22E6FF; } .slide[data-screen="13"] .phone[data-theme="neon"] .feats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .slide[data-screen="13"] .phone[data-theme="neon"] .ft { align-items: flex-start; min-height: 58px; padding: 8px; font-size: 10.5px; text-align: left; } .slide[data-screen="13"] .phone[data-theme="neon"] .ft-ic { color: #22E6FF; box-shadow: 0 0 10px rgb(34 230 255 / .35); } .slide[data-screen="13"] .phone[data-theme="neon"] .ft-t small { display: block; } .slide[data-screen="13"] .phone[data-theme="neon"] .sec, .slide[data-screen="13"] .phone[data-theme="neon"] .list { display: none; } .slide[data-screen="13"] .phone[data-theme="neon"] .nav { background: rgb(21 18 46 / .92); border-color: rgb(255 43 214 / .5); box-shadow: 0 0 16px rgb(255 43 214 / .35); } .slide[data-screen="13"] .phone[data-theme="neon"] .nav span.on { box-shadow: 0 0 12px #FF2BD6; } /* ---------- Sous le téléphone : bouton « style suivant » + carrousel de vignettes ---------- */ .slide[data-screen="13"] .flip-btn { display: inline-flex; align-items: center; gap: .4rem; margin-top: -.2rem; padding: .45rem .9rem; border-radius: 999px; border: 0; background: transparent; color: inherit; font-size: .85rem; font-weight: 600; opacity: .75; } .slide[data-screen="13"] .flip-btn:hover { opacity: 1; } .slide[data-screen="13"] .flip-btn svg { width: 1rem; height: 1rem; } .slide[data-screen="13"] .flip-n { font-weight: 500; font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; } .slide[data-screen="13"] .flip-n:empty { display: none; } /* Carrousel : une rangée qui défile à l'horizontale (snap), bord à bord ; en grille sur grand écran */ .slide[data-screen="13"] .tabs { position: relative; display: flex; gap: .3rem; width: calc(100% + 2rem); margin: -.3rem -1rem 0; padding: .4rem 1rem .2rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent, #000 .9rem, #000 calc(100% - .9rem), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 .9rem, #000 calc(100% - .9rem), transparent); } .slide[data-screen="13"] .tabs::-webkit-scrollbar { display: none; } .slide[data-screen="13"] .tab { flex: 0 0 auto; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 4.5rem; padding: .3rem .1rem .35rem; border: 0; border-radius: 1rem; background: transparent; color: inherit; font-size: .68rem; font-weight: 600; line-height: 1.15; opacity: .72; transition: opacity .3s, transform .18s cubic-bezier(.34,1.56,.64,1); } .slide[data-screen="13"] .tab:hover, .slide[data-screen="13"] .tab[aria-checked="true"] { opacity: 1; } .slide[data-screen="13"] .tab:focus-visible { outline: 3px solid var(--focus, #2B6BFF); outline-offset: 0; } .slide[data-screen="13"] .tab-l { max-width: 100%; text-wrap: balance; } .slide[data-screen="13"] .tab[aria-checked="true"] .tab-l { font-weight: 800; } .slide[data-screen="13"] .tab[aria-checked="true"] .mini { box-shadow: 0 0 0 2.5px var(--fg, #111), 0 10px 20px -10px rgb(0 0 0 / .5); } /* Mini-aperçu : 5 pièces (barre de titre, héros, deux tuiles, nav) que chaque style rhabille */ .slide[data-screen="13"] .mini { --m-bg: #EEF1F5; --m-fg: #111; --m-acc: #111; --m-card: #fff; --m-card2: #fff; --m-r: 4px; --m-line: transparent; --m-bw: 0px; --m-sh: none; position: relative; width: 3.4rem; height: 4.5rem; border-radius: .75rem; overflow: hidden; flex-shrink: 0; background: var(--m-bg); border: 1px solid rgb(0 0 0 / .12); transition: box-shadow .3s; } .slide[data-screen="13"] .mini i { position: absolute; display: block; border: var(--m-bw) solid var(--m-line); box-shadow: var(--m-sh); } .slide[data-screen="13"] .mini .m-bar { top: 11%; left: 12%; width: 46%; height: 5%; border-radius: 2px; background: var(--m-fg); border: 0; box-shadow: none; } .slide[data-screen="13"] .mini .m-hero { top: 22%; left: 10%; right: 10%; height: 25%; border-radius: var(--m-r); background: var(--m-acc); } .slide[data-screen="13"] .mini .m-t1 { top: 53%; left: 10%; width: 37%; height: 20%; border-radius: var(--m-r); background: var(--m-card); } .slide[data-screen="13"] .mini .m-t2 { top: 53%; right: 10%; width: 37%; height: 20%; border-radius: var(--m-r); background: var(--m-card2); } .slide[data-screen="13"] .mini .m-nav { bottom: 5%; left: 10%; right: 10%; height: 9%; border-radius: 99px; background: var(--m-card); } .slide[data-screen="13"] .mini-glass { --m-fg: #1C2140; --m-acc: rgb(255 255 255 / .45); --m-card: rgb(255 255 255 / .5); --m-card2: rgb(255 255 255 / .5); --m-r: 5px; --m-bw: 1px; --m-line: rgb(255 255 255 / .85); --m-bg: radial-gradient(circle at 20% 20%, #FFB6E1 0, transparent 40%), radial-gradient(circle at 85% 35%, #9DB8FF 0, transparent 45%), radial-gradient(circle at 50% 90%, #B8F0E6 0, transparent 45%), #E6EBFF; background: var(--m-bg); } .slide[data-screen="13"] .mini-mini { --m-bg: #fff; --m-fg: #000; --m-acc: #000; --m-card: #000; --m-card2: #000; --m-r: 0; } .slide[data-screen="13"] .mini-mini .m-hero { left: 0; right: 0; } .slide[data-screen="13"] .mini-mini .m-t1, .slide[data-screen="13"] .mini-mini .m-t2 { left: 10%; right: 10%; width: auto; height: 1.5px; } .slide[data-screen="13"] .mini-mini .m-t2 { top: 66%; } .slide[data-screen="13"] .mini-mini .m-nav { background: transparent; border-top: 1px solid #000; border-radius: 0; left: 0; right: 0; bottom: 0; } .slide[data-screen="13"] .mini-neu { --m-bg: #E4E9F2; --m-fg: #3B4256; --m-acc: #E4E9F2; --m-card: #E4E9F2; --m-card2: #E4E9F2; --m-r: 6px; --m-sh: 2px 2px 4px #C2C8D4, -2px -2px 4px #fff; } .slide[data-screen="13"] .mini-clay { --m-bg: #F1EBFF; --m-fg: #3A2E6E; --m-acc: #A88BFF; --m-card: #FFD1E3; --m-card2: #C9E7FF; --m-r: 7px; --m-sh: inset -2px -2px 4px rgb(90 60 180 / .22), inset 2px 2px 4px rgb(255 255 255 / .85), 3px 4px 6px -3px rgb(90 60 180 / .45); } .slide[data-screen="13"] .mini-clay .m-nav { background: #fff; } .slide[data-screen="13"] .mini-flat { --m-bg: linear-gradient(180deg, #2F80ED 0 36%, #F4F6F9 36%); --m-fg: #fff; --m-acc: #fff; --m-card: #EB5757; --m-card2: #27AE60; --m-r: 2px; background: var(--m-bg); } .slide[data-screen="13"] .mini-flat .m-nav { left: 0; right: 0; bottom: 0; height: 11%; border-radius: 0; background: #fff; border-top: 1px solid #E3E7ED; } .slide[data-screen="13"] .mini-mat { --m-bg: #FEF7FF; --m-fg: #1D1B20; --m-acc: #EADDFF; --m-card: #F3EDF7; --m-card2: #F3EDF7; --m-r: 5px; } .slide[data-screen="13"] .mini-mat .m-nav { left: 0; right: 0; bottom: 0; height: 13%; border-radius: 0; background: #F3EDF7; } .slide[data-screen="13"] .mini-mat .m-t2 { background: #6750A4; width: 24%; height: 16%; top: 56%; right: 12%; border-radius: 5px; box-shadow: 0 2px 4px rgb(0 0 0 / .3); } .slide[data-screen="13"] .mini-neob { --m-bg: #FFF7E0; --m-fg: #111; --m-acc: #FF5A36; --m-card: #7CC6FF; --m-card2: #FFD23F; --m-r: 3px; --m-bw: 1.5px; --m-line: #111; --m-sh: 2px 2px 0 #111; } .slide[data-screen="13"] .mini-neob .m-nav { left: 0; right: 0; bottom: 0; height: 12%; border-radius: 0; border-width: 1.5px 0 0; box-shadow: none; background: #fff; } .slide[data-screen="13"] .mini-brut { --m-bg: #EDEDED; --m-fg: #000; --m-acc: #000; --m-card: #fff; --m-card2: #fff; --m-r: 0; --m-bw: 1px; --m-line: #000; } .slide[data-screen="13"] .mini-brut .m-nav { left: 0; right: 0; bottom: 0; height: 12%; border-radius: 0; border-width: 1px 0 0; } .slide[data-screen="13"] .mini-max { --m-bg: repeating-linear-gradient(45deg, transparent 0 4px, rgb(255 61 127 / .18) 4px 5px), #FFE3F2; --m-fg: #2B0B3F; --m-acc: linear-gradient(135deg, #5B2A86, #FF3D7F); --m-card: #FFD400; --m-card2: #00C2A8; --m-r: 5px 1px; --m-bw: 1.5px; --m-line: #2B0B3F; --m-sh: 2px 2px 0 #FFD400; background: var(--m-bg); } .slide[data-screen="13"] .mini-max .m-hero { transform: rotate(-3deg); background: var(--m-acc); } .slide[data-screen="13"] .mini-max .m-nav { background: linear-gradient(90deg, #FF3D7F, #FFD400, #00C2A8); } .slide[data-screen="13"] .mini-retro { --m-bg: #F6E9CF; --m-fg: #4A2C17; --m-acc: linear-gradient(180deg, #E8772E 0 25%, #E4B23A 25% 50%, #C94A6B 50% 75%, #2E8B85 75%); --m-card: #FBF3E3; --m-card2: #FBF3E3; --m-r: 4px; --m-bw: 1.5px; --m-line: #4A2C17; } .slide[data-screen="13"] .mini-retro .m-hero { background: var(--m-acc); } .slide[data-screen="13"] .mini-retro .m-t1, .slide[data-screen="13"] .mini-retro .m-t2 { border-radius: 99px; } .slide[data-screen="13"] .mini-retro .m-nav { background: #4A2C17; border: 0; } .slide[data-screen="13"] .mini-edito { --m-bg: #FBFAF6; --m-fg: #111; --m-acc: transparent; --m-card: #111; --m-card2: #111; --m-r: 0; } .slide[data-screen="13"] .mini-edito .m-bar { height: 9%; width: 62%; } .slide[data-screen="13"] .mini-edito .m-hero { border-width: 1px 0; border-color: #111; border-radius: 0; height: 22%; top: 25%; } .slide[data-screen="13"] .mini-edito .m-t1, .slide[data-screen="13"] .mini-edito .m-t2 { height: 1px; top: 58%; } .slide[data-screen="13"] .mini-edito .m-t2 { top: 67%; } .slide[data-screen="13"] .mini-edito .m-nav { background: transparent; border-top: 1px solid #111; border-radius: 0; left: 0; right: 0; bottom: 0; } .slide[data-screen="13"] .mini-main { --m-bg: repeating-linear-gradient(180deg, transparent 0 7px, rgb(58 42 28 / .18) 7px 8px), #F4EAD8; --m-fg: #3a2a1c; --m-acc: #F2C45A; --m-card: transparent; --m-card2: transparent; --m-r: 2px; background: var(--m-bg); } .slide[data-screen="13"] .mini-main .m-hero { transform: rotate(-4deg); box-shadow: 1px 2px 0 rgb(58 42 28 / .25); } .slide[data-screen="13"] .mini-main .m-t1, .slide[data-screen="13"] .mini-main .m-t2 { display: none; } .slide[data-screen="13"] .mini-main .m-nav { left: auto; right: 0; top: 28%; bottom: auto; width: 16%; height: 34%; border-radius: 4px 0 0 4px; background: #D9653B; } .slide[data-screen="13"] .mini-terra { --m-bg: #F6E7D8; --m-fg: #4A2418; --m-acc: linear-gradient(180deg, #EBAE84, #C8553D); --m-card: #FFF5EC; --m-card2: #FFF5EC; --m-r: 99px; } .slide[data-screen="13"] .mini-terra .m-hero { top: 9%; left: 22%; right: 22%; height: 34%; border-radius: 99px 99px 5px 5px; background: var(--m-acc); } .slide[data-screen="13"] .mini-terra .m-bar { top: 48%; left: 27%; width: 46%; } .slide[data-screen="13"] .mini-terra .m-t1, .slide[data-screen="13"] .mini-terra .m-t2 { top: 60%; height: 14%; } .slide[data-screen="13"] .mini-terra .m-nav { background: #4A2418; } .slide[data-screen="13"] .mini-pastel { --m-bg: #fff; --m-fg: #0B0B0C; --m-acc: #CFE6FF; --m-card: #D3F3E2; --m-card2: #FFF0B3; --m-r: 6px; } .slide[data-screen="13"] .mini-pastel .m-hero { right: 52%; height: 51%; } .slide[data-screen="13"] .mini-pastel .m-t1 { left: 53%; top: 22%; } .slide[data-screen="13"] .mini-pastel .m-t2 { top: 48%; } .slide[data-screen="13"] .mini-pastel .m-nav { right: 40%; background: #0B0B0C; } .slide[data-screen="13"] .mini-sombre { --m-bg: #0A0B0E; --m-fg: #B7FF5A; --m-acc: #111318; --m-card: #15171C; --m-card2: #15171C; --m-r: 4px; --m-bw: 1px; --m-line: #262930; border-color: rgb(255 255 255 / .14); } .slide[data-screen="13"] .mini-sombre .m-hero { border-color: rgb(183 255 90 / .4); left: 26%; box-shadow: 0 0 6px rgb(183 255 90 / .25); } .slide[data-screen="13"] .mini-sombre .m-t1 { left: 26%; width: 64%; height: 12%; } .slide[data-screen="13"] .mini-sombre .m-t2 { left: 26%; width: 64%; height: 12%; top: 70%; } .slide[data-screen="13"] .mini-sombre .m-nav { left: 8%; right: auto; top: 22%; bottom: 8%; width: 12%; height: auto; border-radius: 4px; } .slide[data-screen="13"] .mini-neon { --m-fg: #22E6FF; --m-acc: rgb(255 43 214 / .25); --m-card: rgb(255 255 255 / .05); --m-card2: rgb(255 255 255 / .05); --m-r: 4px; --m-bw: 1px; --m-line: rgb(34 230 255 / .6); --m-sh: 0 0 5px rgb(34 230 255 / .5); --m-bg: radial-gradient(circle at 15% 10%, rgb(255 43 214 / .5), transparent 45%), radial-gradient(circle at 95% 65%, rgb(34 230 255 / .4), transparent 50%), #0B0A1F; background: var(--m-bg); border-color: rgb(255 255 255 / .14); } .slide[data-screen="13"] .mini-neon .m-hero { border-color: rgb(255 43 214 / .8); box-shadow: 0 0 6px rgb(255 43 214 / .7); } .slide[data-screen="13"] .mini-autre { display: grid; place-items: center; border: 1.5px dashed currentColor; background: none; } .slide[data-screen="13"] .mini .m-plus { position: relative; width: 1rem; height: 1rem; border: 0; } .slide[data-screen="13"] .mini .m-plus::before, .slide[data-screen="13"] .mini .m-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; margin: -1px 0 0 -.5rem; background: currentColor; border-radius: 1px; } .slide[data-screen="13"] .mini .m-plus::after { transform: rotate(90deg); } /* Autre style : champ libre */ .slide[data-screen="13"] .libre { width: 100%; max-width: 26rem; display: grid; gap: .35rem; text-align: left; } .slide[data-screen="13"] .libre[hidden] { display: none; } .slide[data-screen="13"] .libre-l { font-size: .82rem; font-weight: 600; opacity: .75; padding-left: .3rem; } .slide[data-screen="13"] .libre textarea { width: 100%; min-height: 4.2rem; resize: vertical; padding: .75rem 1rem; border-radius: 1.1rem; border: 1.5px solid rgb(127 127 127 / .45); background: rgb(255 255 255 / .8); color: #111; line-height: 1.35; } .slide[data-screen="13"][data-theme="sombre"] .libre textarea, .slide[data-screen="13"][data-theme="neon"] .libre textarea { background: rgb(255 255 255 / .08); color: inherit; } /* Logo / captures de la DA */ .slide[data-screen="13"] .logo-zone { width: 100%; max-width: 26rem; display: grid; gap: .5rem; text-align: left; } .slide[data-screen="13"] .logo-btn { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem .75rem .75rem; cursor: pointer; border: 1.5px dashed rgb(127 127 127 / .55); border-radius: 1.2rem; background: rgb(255 255 255 / .5); transition: border-color .2s, background .2s; } .slide[data-screen="13"][data-theme="sombre"] .logo-btn, .slide[data-screen="13"][data-theme="neon"] .logo-btn { background: rgb(255 255 255 / .05); } .slide[data-screen="13"] .logo-btn:hover { border-color: currentColor; } .slide[data-screen="13"] .logo-file:focus-visible + .logo-btn { outline: 3px solid var(--focus, #2B6BFF); outline-offset: 3px; } .slide[data-screen="13"] .logo-plus { width: 2.3rem; height: 2.3rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--fg, #111); color: var(--bg, #fff); transition: background .6s, color .6s; } .slide[data-screen="13"] .logo-plus svg { width: 1.05rem; height: 1.05rem; } .slide[data-screen="13"] .logo-txt { display: grid; gap: .1rem; min-width: 0; } .slide[data-screen="13"] .logo-txt strong { font-size: .9rem; line-height: 1.2; } .slide[data-screen="13"] .logo-txt small { font-size: .74rem; opacity: .65; } .slide[data-screen="13"] .logo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .slide[data-screen="13"] .logo-list:empty { display: none; } .slide[data-screen="13"] .logo-item { display: flex; align-items: center; gap: .6rem; padding: .35rem .4rem; border-radius: .9rem; background: rgb(255 255 255 / .75); color: #111; } .slide[data-screen="13"] .logo-th { width: 2.6rem; height: 2.6rem; flex-shrink: 0; overflow: hidden; border-radius: .6rem; background: #eee; } .slide[data-screen="13"] .logo-th img { width: 100%; height: 100%; object-fit: cover; } .slide[data-screen="13"] .logo-th.is-file { display: grid; place-items: center; background: #111; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .05em; } .slide[data-screen="13"] .logo-name { flex: 1; min-width: 0; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slide[data-screen="13"] .logo-del { width: 2.1rem; height: 2.1rem; flex-shrink: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .07); color: #111; font-size: 1.2rem; line-height: 1; } .slide[data-screen="13"] .logo-del:hover { background: rgb(0 0 0 / .14); } .slide[data-screen="13"] .logo-note { margin: 0; font-size: .8rem; opacity: .75; } .slide[data-screen="13"] .logo-note:empty { display: none; } .slide[data-screen="13"] .next { position: sticky; bottom: 0; width: 100%; max-width: 22rem; border: 0; border-radius: 999px; padding: 1rem; background: var(--fg, #111); color: var(--bg, #fff); font-weight: 700; font-size: 1.05rem; box-shadow: 0 12px 28px rgb(0 0 0 / .25); transition: background .6s, color .6s, transform .18s cubic-bezier(.34,1.56,.64,1); } @keyframes s13-ping { 0% { transform: scale(.5); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes s13-rip { to { transform: scale(9); opacity: 0; } } @keyframes s13-bob { 50% { transform: translateY(-5px) rotate(6deg); } } @keyframes s13-spin { to { transform: rotate(360deg); } } @keyframes s13-nudge { 0%, 100% { transform: none; } 20% { transform: rotate(-18deg); } 40% { transform: rotate(12deg); } 60% { transform: none; } } @media (min-width: 768px) { .slide[data-screen="13"] .phone { width: 272px; } .slide[data-screen="13"] .tabs { flex-wrap: wrap; justify-content: center; gap: .4rem .35rem; width: 100%; max-width: 44rem; margin: 0; padding: .4rem 0 .2rem; overflow: visible; scroll-snap-type: none; mask-image: none; -webkit-mask-image: none; } .slide[data-screen="13"] .tab { width: 4.75rem; font-size: .72rem; } .slide[data-screen="13"] .mini { width: 3.6rem; height: 4.8rem; } } @media (max-height: 740px) and (max-width: 767px) { .slide[data-screen="13"] .phone { width: min(52vw, 198px); } } @media (prefers-reduced-motion: reduce) { .slide[data-screen="13"] .tap-ring, .slide[data-screen="13"] .pen, .slide[data-screen="13"] .blob { animation: none !important; } .slide[data-screen="13"] .tap-ring { opacity: .35; } .slide[data-screen="13"] .tabs { scroll-behavior: auto; } }