html[data-look="v3"]{color-scheme:light;--cream:#F4F5F7;--warm:#EEF0F3;--green:#15181B;--green-mid:#2A2F35; --orange:#2F46D6;--gray:#5B636B;--line:#E4E7EB;--line-strong:#CFD4DA; --tint-orange:rgba(47,70,214,.10);--tint-green:rgba(21,24,27,.06); --ink-soft:rgba(21,24,27,.45);--on-fill:rgba(255,255,255,.18);--raise:#FFFFFF; --hot:#2F46D6;--hot-ink:#FFFFFF;--accent-ink:#2538C4; --lab:#5B636B;--lab-ink:#FFFFFF; --rail:#FFFFFF;--lift:rgba(21,24,27,.08); --do-lit:#23282E;--do-edge:rgba(255,255,255,.12);--do-cast:rgba(21,24,27,.18); --r:10px;--r-card:16px;--r-pill:999px; --look-1:#7C3AED;--look-1-w:#F1EAFE;--look-2:#5B21B6;--look-2-w:#E9DFFC; --build-1:#B45309;--build-1-w:#FDF1E4;--build-2:#8A4007;--build-2-w:#FBE8D3; --keep-1:#0F766E;--keep-1-w:#E3F4F2;--keep-2:#115E59;--keep-2-w:#D5ECE9; --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B636B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.4 4 4 4-4'/%3E%3C/svg%3E"); --yes:#15803D;--no:#C81E1E;--verdict-ink:#FFFFFF;--tint-yes:rgba(21,128,61,.12); --canvas:#FFFFFF;--chrome:#FFFFFF;--sunken:#F4F5F7; --brand:#15181B;--on-brand:#FFFFFF; --action:#2F46D6;--action-ink:#2538C4;--on-action:#FFFFFF; --ink:#15181B;--ink-muted:#5B636B;--ok:#15803D;--stop:#C81E1E; --ink-faint:#6F7780;--warn:#A14E07;--deep:#E8ECFF; --tint-no:rgba(200,30,30,.10);--tint-warn:rgba(161,78,7,.12); --shadow-float:0 8px 24px rgba(21,24,27,.10),0 1px 2px rgba(21,24,27,.06); --focus:#2F46D6; --sun:#E8701F;--sun-ink:#A54A0C;--sun-wash:#FEF0E6;--sun-deep:#D9641A;--on-sun:#15181B; --gold:#F5C518;--gold-ink:#7A5A00;--gold-wash:#FFF6D6;--on-gold:#15181B; --kmark:url(/assets/img/kontimo-light.png); --zone-wash:#F3EDFE;--zone-ink:#6D28D9;--zone-line:#E4D9FC} @media (prefers-color-scheme: dark){ html[data-look="v3"]:not([data-theme="light"]){color-scheme:dark;--cream:#121417;--warm:#23282E;--green:#F1F3F5;--green-mid:#D9DDE2; --orange:#8E9CFF;--gray:#A6ADB5;--line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.18); --tint-orange:rgba(142,156,255,.16);--tint-green:rgba(241,243,245,.08); --ink-soft:rgba(241,243,245,.5);--on-fill:rgba(18,20,23,.22);--raise:#1B1F24; --hot:#3D4FE6;--hot-ink:#FFFFFF;--accent-ink:#8E9CFF; --lab:#A6ADB5;--lab-ink:#121417; --rail:#16191D;--lift:rgba(0,0,0,.5); --do-lit:#FFFFFF;--do-edge:rgba(255,255,255,.6);--do-cast:rgba(0,0,0,.45); --r:10px;--r-card:16px;--r-pill:999px; --look-1:#C4A6FF;--look-1-w:rgba(196,166,255,.14);--look-2:#A98BF0;--look-2-w:rgba(169,139,240,.16); --build-1:#F2B26B;--build-1-w:rgba(242,178,107,.14);--build-2:#E09C4F;--build-2-w:rgba(224,156,79,.16); --keep-1:#5FD3C7;--keep-1-w:rgba(95,211,199,.14);--keep-2:#3FBDB0;--keep-2-w:rgba(63,189,176,.16); --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A6ADB5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.4 4 4 4-4'/%3E%3C/svg%3E"); --yes:#4ADE80;--no:#FB7185;--verdict-ink:#121417;--tint-yes:rgba(74,222,128,.14); --canvas:#1B1F24;--chrome:#16191D;--sunken:#121417; --brand:#F1F3F5;--on-brand:#121417; --action:#8E9CFF;--action-ink:#8E9CFF;--on-action:#121417; --ink:#F1F3F5;--ink-muted:#A6ADB5;--ok:#4ADE80;--stop:#FB7185; --ink-faint:#8B939C;--warn:#F5A524;--deep:#232A4A; --tint-no:rgba(251,113,133,.14);--tint-warn:rgba(245,165,36,.14); --shadow-float:0 8px 24px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4); --focus:#8E9CFF; --sun:#F28A3F;--sun-ink:#F5A364;--sun-wash:#3D3028;--sun-deep:#E27A2E;--on-sun:#121417; --gold:#F7CF4A;--gold-ink:#F7CF4A;--gold-wash:#3A3829;--on-gold:#121417; --kmark:url(/assets/img/kontimo-dark.png); --zone-wash:#221B33;--zone-ink:#C4B5FD;--zone-line:#3A2E57} } html[data-look="v3"][data-theme="dark"]{color-scheme:dark;--cream:#121417;--warm:#23282E;--green:#F1F3F5;--green-mid:#D9DDE2; --orange:#8E9CFF;--gray:#A6ADB5;--line:rgba(255,255,255,.10);--line-strong:rgba(255,255,255,.18); --tint-orange:rgba(142,156,255,.16);--tint-green:rgba(241,243,245,.08); --ink-soft:rgba(241,243,245,.5);--on-fill:rgba(18,20,23,.22);--raise:#1B1F24; --hot:#3D4FE6;--hot-ink:#FFFFFF;--accent-ink:#8E9CFF; --lab:#A6ADB5;--lab-ink:#121417; --rail:#16191D;--lift:rgba(0,0,0,.5); --do-lit:#FFFFFF;--do-edge:rgba(255,255,255,.6);--do-cast:rgba(0,0,0,.45); --r:10px;--r-card:16px;--r-pill:999px; --look-1:#C4A6FF;--look-1-w:rgba(196,166,255,.14);--look-2:#A98BF0;--look-2-w:rgba(169,139,240,.16); --build-1:#F2B26B;--build-1-w:rgba(242,178,107,.14);--build-2:#E09C4F;--build-2-w:rgba(224,156,79,.16); --keep-1:#5FD3C7;--keep-1-w:rgba(95,211,199,.14);--keep-2:#3FBDB0;--keep-2-w:rgba(63,189,176,.16); --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A6ADB5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.4 4 4 4-4'/%3E%3C/svg%3E"); --yes:#4ADE80;--no:#FB7185;--verdict-ink:#121417;--tint-yes:rgba(74,222,128,.14); --canvas:#1B1F24;--chrome:#16191D;--sunken:#121417; --brand:#F1F3F5;--on-brand:#121417; --action:#8E9CFF;--action-ink:#8E9CFF;--on-action:#121417; --ink:#F1F3F5;--ink-muted:#A6ADB5;--ok:#4ADE80;--stop:#FB7185; --ink-faint:#8B939C;--warn:#F5A524;--deep:#232A4A; --tint-no:rgba(251,113,133,.14);--tint-warn:rgba(245,165,36,.14); --shadow-float:0 8px 24px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4); --focus:#8E9CFF; --sun:#F28A3F;--sun-ink:#F5A364;--sun-wash:#3D3028;--sun-deep:#E27A2E;--on-sun:#121417; --gold:#F7CF4A;--gold-ink:#F7CF4A;--gold-wash:#3A3829;--on-gold:#121417; --kmark:url(/assets/img/kontimo-dark.png); --zone-wash:#221B33;--zone-ink:#C4B5FD;--zone-line:#3A2E57} html[data-look="v3"][data-theme="light"]{color-scheme:light;--cream:#F4F5F7;--warm:#EEF0F3;--green:#15181B;--green-mid:#2A2F35; --orange:#2F46D6;--gray:#5B636B;--line:#E4E7EB;--line-strong:#CFD4DA; --tint-orange:rgba(47,70,214,.10);--tint-green:rgba(21,24,27,.06); --ink-soft:rgba(21,24,27,.45);--on-fill:rgba(255,255,255,.18);--raise:#FFFFFF; --hot:#2F46D6;--hot-ink:#FFFFFF;--accent-ink:#2538C4; --lab:#5B636B;--lab-ink:#FFFFFF; --rail:#FFFFFF;--lift:rgba(21,24,27,.08); --do-lit:#23282E;--do-edge:rgba(255,255,255,.12);--do-cast:rgba(21,24,27,.18); --r:10px;--r-card:16px;--r-pill:999px; --look-1:#7C3AED;--look-1-w:#F1EAFE;--look-2:#5B21B6;--look-2-w:#E9DFFC; --build-1:#B45309;--build-1-w:#FDF1E4;--build-2:#8A4007;--build-2-w:#FBE8D3; --keep-1:#0F766E;--keep-1-w:#E3F4F2;--keep-2:#115E59;--keep-2-w:#D5ECE9; --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235B636B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.4 4 4 4-4'/%3E%3C/svg%3E"); --yes:#15803D;--no:#C81E1E;--verdict-ink:#FFFFFF;--tint-yes:rgba(21,128,61,.12); --canvas:#FFFFFF;--chrome:#FFFFFF;--sunken:#F4F5F7; --brand:#15181B;--on-brand:#FFFFFF; --action:#2F46D6;--action-ink:#2538C4;--on-action:#FFFFFF; --ink:#15181B;--ink-muted:#5B636B;--ok:#15803D;--stop:#C81E1E; --ink-faint:#6F7780;--warn:#A14E07;--deep:#E8ECFF; --tint-no:rgba(200,30,30,.10);--tint-warn:rgba(161,78,7,.12); --shadow-float:0 8px 24px rgba(21,24,27,.10),0 1px 2px rgba(21,24,27,.06); --focus:#2F46D6; --sun:#E8701F;--sun-ink:#A54A0C;--sun-wash:#FEF0E6;--sun-deep:#D9641A;--on-sun:#15181B; --gold:#F5C518;--gold-ink:#7A5A00;--gold-wash:#FFF6D6;--on-gold:#15181B; --kmark:url(/assets/img/kontimo-light.png); --zone-wash:#F3EDFE;--zone-ink:#6D28D9;--zone-line:#E4D9FC} html[data-look="v3"][data-zone="learn"]{--action:#7C3AED;--hot:#7C3AED;--accent-ink:#6D28D9;--action-ink:#6D28D9;--orange:#7C3AED;--deep:#F1EAFE;--tint-orange:rgba(124,58,237,.10);--kmark:url(/assets/img/kontimo-light-learn.png);--cream:#F4EEFF;--zone-head:#EEE5FE} @media (prefers-color-scheme: dark){ html[data-look="v3"][data-zone="learn"]:not([data-theme="light"]){--action:#C4B5FD;--hot:#8B5CF6;--accent-ink:#C4B5FD;--action-ink:#C4B5FD;--orange:#C4B5FD;--deep:#2E2347;--tint-orange:rgba(196,181,253,.16);--kmark:url(/assets/img/kontimo-dark-learn.png);--cream:#1A1426;--zone-head:#241B38} } html[data-look="v3"][data-zone="learn"][data-theme="dark"]{--action:#C4B5FD;--hot:#8B5CF6;--accent-ink:#C4B5FD;--action-ink:#C4B5FD;--orange:#C4B5FD;--deep:#2E2347;--tint-orange:rgba(196,181,253,.16);--kmark:url(/assets/img/kontimo-dark-learn.png);--cream:#1A1426;--zone-head:#241B38} /* MADE TO BE SEEN (Mathieu, 6 October: "le changement de couleur est quasi invisible, le but étant qu'on comprenne qu'on se retrouve dans un espace spécial"). The accent alone sat on small marks and the eye read the same page; what says a section changed is what covers the most of it. So in the zone the page's ground is a pale violet and the header is tinted, and on every page the rail's Community group stands in a violet block, seen before he enters it. */ html[data-look="v3"][data-zone="learn"] .col-main > .chrome{background:var(--zone-head);border-bottom-color:var(--zone-line)} html[data-look="v3"][data-zone="learn"] .col-side > .brand{background:var(--zone-head)} html[data-look="v3"] .side .s-grp[data-grp="community"]{background:var(--zone-wash);border-radius:14px;padding:6px 6px 4px;margin:16px -6px 0} html[data-look="v3"] .side .s-grp[data-grp="community"] > .s-cap{margin-top:4px;color:var(--zone-ink)} html[data-look="v3"] .side .s-grp[data-grp="community"] .row:hover{background:var(--canvas)} html[data-look="v3"] .side .s-grp[data-grp="community"] .row[aria-current="page"]{background:var(--canvas)} @media(max-width:900px){html[data-look="v3"] .side .s-grp[data-grp="community"]{background:none;padding:0;margin:0}} html[data-look="v3"] body{font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased} html[data-look="v3"] main{font-variant-numeric:tabular-nums} /* HEADINGS: ink, semi-bold, tight. Orange titles were the first look's one decoration; a bank sets its titles in the same ink as the page and lets size and weight do the work. */ html[data-look="v3"] h1{font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--ink)} html[data-look="v3"] h2{font-weight:600;font-size:17px;letter-spacing:-.012em;color:var(--ink);margin:28px 0 8px} html[data-look="v3"] h3{font-weight:600;letter-spacing:-.01em;color:var(--ink)} html[data-look="v3"] .lede,html[data-look="v3"] .hint{color:var(--ink-muted)} html[data-look="v3"] .quiet-h,html[data-look="v3"] .tgroup,html[data-look="v3"] .side .s-cap,html[data-look="v3"] .prod-kick,html[data-look="v3"] .prod-cap{letter-spacing:.08em;font-weight:700;color:var(--ink-faint)} /* THE FRAME: a white rail with a hairline, a white head, a cool page under the room. */ html[data-look="v3"] .col-side{background:var(--chrome);border-right:1px solid var(--line)} html[data-look="v3"] .col-main{background:var(--cream)} /* The ground runs the whole column: the shell paints nothing of its own, so a short page and a long one stand on the same cool page, and every card is white paper on it. */ html[data-look="v3"] .col-main .shell{background:transparent} /* A solid head, no blur behind it: a backdrop filter on a sticky bar is re-blurred on every frame of a scroll, and on a phone or a laptop that reads as a slow page (Mathieu, 4 October: "l'espace client est redevenu lent"). The banks' own heads are solid. */ html[data-look="v3"] .col-main > .chrome{background:var(--canvas);border-bottom:1px solid var(--line)} html[data-look="v3"] .col-main > .chrome.is-under,html[data-look="v3"] .col-side > .brand.is-under{box-shadow:none} html[data-look="v3"] .chrome-where{font-weight:600;font-size:20px;letter-spacing:-.015em;color:var(--ink)} html[data-look="v3"] .chrome-titleline{align-items:center} html[data-look="v3"] .chrome-restaurant{color:var(--ink-muted)} html[data-look="v3"] .chrome-brand{font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-.04em;color:var(--ink)} html[data-look="v3"] .chrome-brand:hover{color:var(--ink)} /* The zone's word beside the mark (account-shell.js, brandMark): a thin rule, then the word in the zone's ink, sized from the mark's own em so it follows the header on a phone. */ html[data-look="v3"] .chrome-brand.has-zone{align-items:center} html[data-look="v3"] .kzone{display:inline-flex;align-items:center;gap:.6em;margin-left:.6em;font-family:var(--body);font-weight:650;font-size:.63em;letter-spacing:-.01em;line-height:1;color:var(--accent-ink);white-space:nowrap} html[data-look="v3"] .kzone::before{content:'';width:1.5px;height:1.18em;border-radius:1px;background:var(--line-strong)} html[data-look="v3"] .dot{background:var(--orange)} html[data-look="v3"] .col-side > .brand{background:var(--chrome)} html[data-look="v3"] .col-side > .who{background:var(--chrome);border-top:1px solid var(--line)} html[data-look="v3"] .col-side > .who.is-current{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)} html[data-look="v3"] .col-side > .who.is-current::before{background:var(--orange)} html[data-look="v3"] .dock{background:var(--chrome);border-top:1px solid var(--line);color:var(--ink-muted)} /* THE RAIL'S ROWS: a label in the second ink, the room he is on in the accent's wash with the accent's own ink, a bar down its edge. One mark of "here", read three ways (ground, ink, bar). */ html[data-look="v3"] .side a{padding:9px 12px;border-radius:var(--r);color:var(--ink-muted)} html[data-look="v3"] .side .s-label{font-size:13.5px;font-weight:600;letter-spacing:-.005em} html[data-look="v3"] .side .row .s-label{color:var(--ink)} html[data-look="v3"] .side .s-note{color:var(--ink-faint);opacity:1} html[data-look="v3"] .side a:hover,html[data-look="v3"] .side .row:hover{background:var(--warm);color:var(--ink)} html[data-look="v3"] .side a[aria-current="page"],html[data-look="v3"] .side .row[aria-current="page"]{background:var(--deep);color:var(--accent-ink); font-weight:600;box-shadow:inset 3px 0 0 var(--orange)} html[data-look="v3"] .side .row[aria-current="page"] .s-label{color:var(--accent-ink)} html[data-look="v3"] .side a[aria-current="page"] .i{color:var(--orange);opacity:1} html[data-look="v3"] .side a[aria-current="page"]::after{display:none} html[data-look="v3"] .side .i{opacity:.8} html[data-look="v3"] .side .s-cap{margin:22px 0 6px;font-size:10.5px} html[data-look="v3"] .side .s-tag{border-radius:var(--r-pill);padding:1px 7px;font-size:9px;letter-spacing:.08em} html[data-look="v3"] .side .s-tag-tips{color:var(--accent-ink)} html[data-look="v3"] .side .s-tag-results,html[data-look="v3"] .side .s-tag-marketing,html[data-look="v3"] .side .s-tag-offers{color:var(--ink-faint)} html[data-look="v3"] .side .n{background:var(--tint-orange);color:var(--accent-ink);font-weight:700} html[data-look="v3"] .side .n.plain{background:var(--sunken);color:var(--ink-muted)} html[data-look="v3"] .side .s-opt{background:var(--tint-orange);color:var(--accent-ink)} /* THE PRODUCT'S DOOR: a white card with a hairline, the accent on its kicker and its bar, never a frame in the accent. */ html[data-look="v3"] .prod{border:1px solid var(--line);border-radius:var(--r);background:var(--canvas); box-shadow:0 1px 2px rgba(21,24,27,.04)} html[data-look="v3"] .prod.on{border-color:var(--line-strong)} html[data-look="v3"] .prod.on>.prod-row{background:var(--deep)} html[data-look="v3"] .prod.on::before{background:var(--orange)} html[data-look="v3"] .prod-kick{color:var(--accent-ink);font-size:9.5px} html[data-look="v3"] .prod-name{font-size:15.5px;font-weight:600;letter-spacing:-.01em} html[data-look="v3"] .prod-tog{border-color:var(--line);border-radius:8px;color:var(--ink-muted)} html[data-look="v3"] .prod-due{background:var(--orange);color:#fff} html[data-look="v3"] .prod-tick{color:var(--orange)} /* THE STANDING ACTIONS AND THE GRAB CHIP */ html[data-look="v3"] .act{color:var(--ink-muted);border-radius:var(--r)} html[data-look="v3"] .act:hover,html[data-look="v3"] .act.is-here{background:var(--warm);color:var(--ink)} html[data-look="v3"] .act-n{background:var(--orange);color:#fff;font-weight:700} html[data-look="v3"] .act-n.is-plain{background:var(--ink);color:var(--canvas)} html[data-look="v3"] .act-sep{background:var(--line)} html[data-look="v3"] .gc{border-color:var(--line);color:var(--ink-muted);background:var(--canvas)} html[data-look="v3"] .gc:hover{background:var(--warm);color:var(--ink)} html[data-look="v3"] .gc-l b{color:var(--ink);font-weight:600} html[data-look="v3"] .gc-dot{background:var(--ink-faint);box-shadow:0 0 0 2px var(--canvas)} html[data-look="v3"] .gc.is-waiting .gc-dot{background:var(--orange)} html[data-look="v3"] .gc.is-waiting{border-color:rgba(47,70,214,.35)} html[data-look="v3"] .gc.is-problem .gc-dot{background:var(--warn)} html[data-look="v3"] .gc.is-problem{border-color:color-mix(in srgb,var(--warn) 45%,transparent)} /* THE ACCOUNT MENU AND THE POPOVERS: white, hairline, one soft shadow, the only shadow in the account (they float). */ html[data-look="v3"] .pop-panel,html[data-look="v3"] .prefs-pop,html[data-look="v3"] .who-panel,html[data-look="v3"] .tr-panel,html[data-look="v3"] .pop-ask{border-radius:var(--r);border:1px solid var(--line); background:var(--canvas);box-shadow:var(--shadow-float)} html[data-look="v3"] .pop-ask{background:var(--ink);color:var(--canvas)} html[data-look="v3"] .pref-btn{color:var(--ink-muted);font-weight:600} html[data-look="v3"] .prefs[open] .pref-btn,html[data-look="v3"] .pref-btn:hover{background:var(--warm);color:var(--ink)} html[data-look="v3"] .pp-k{color:var(--ink-muted)} html[data-look="v3"] .theme{background:var(--sunken);border-color:var(--line);border-radius:var(--r)} html[data-look="v3"] .theme-b{border-radius:8px;color:var(--ink-muted)} html[data-look="v3"] .theme-b[aria-pressed="true"]{background:var(--canvas);color:var(--ink);box-shadow:0 1px 2px rgba(21,24,27,.08)} html[data-look="v3"] .txt-b{font-weight:600} /* CARDS: white paper on the cool page, a hairline, the card radius, and no shadow at rest. The warm fill the first look used for a card is a surface nobody can see the edge of on a page nearly the same colour. */ html[data-look="v3"] .card,html[data-look="v3"] .report-card,html[data-look="v3"] .all-clear,html[data-look="v3"] .home .card,html[data-look="v3"] .h-tips,html[data-look="v3"] .blank{background:var(--canvas); border:1px solid var(--line);border-radius:var(--r-card)} html[data-look="v3"] .card,html[data-look="v3"] .report-card{padding:22px 24px} html[data-look="v3"] .all-clear{color:var(--ink-muted)} html[data-look="v3"] .h-tips:hover{border-color:var(--line-strong);background:var(--canvas)} html[data-look="v3"] .h-tips svg,html[data-look="v3"] .h-tips b,html[data-look="v3"] .h-tips .h-tips-go{color:var(--ink)} html[data-look="v3"] .h-tips .h-tips-go{color:var(--accent-ink)} html[data-look="v3"] .warn{background:var(--tint-warn);border-left-color:var(--warn);border-radius:0 var(--r) var(--r) 0} html[data-look="v3"] .said{border-left-color:var(--line-strong)} html[data-look="v3"] .said-us{border-left-color:var(--orange)} /* THE HOME'S TASKS */ html[data-look="v3"] .home .task{padding:15px 18px} html[data-look="v3"] .home .t-title{color:var(--ink);font-weight:600} html[data-look="v3"] .home .task.done .t-title{color:var(--ink-muted);font-weight:500} html[data-look="v3"] .home .t-meta{color:var(--ink-muted)} html[data-look="v3"] .home .t-meta b{color:var(--accent-ink);font-weight:600} html[data-look="v3"] .home .tick.you{border-color:var(--orange)} html[data-look="v3"] .home .tick.you i{background:var(--orange)} html[data-look="v3"] .home .tick.us{border-color:var(--line-strong)} html[data-look="v3"] .home .tick.ok{background:var(--yes);color:#fff} html[data-look="v3"] .home .link{height:36px;border-radius:var(--r);border:1px solid var(--line-strong);font-weight:600;color:var(--ink);background:var(--canvas)} html[data-look="v3"] .home .link:hover{background:var(--warm);border-color:var(--line-strong)} html[data-look="v3"] .h-lede,html[data-look="v3"] .prog-n,html[data-look="v3"] .section-note{color:var(--ink-muted)} html[data-look="v3"] .prog-bar{background:var(--warm)} html[data-look="v3"] .prog-bar i{background:var(--orange)} html[data-look="v3"] .tgroup::after{background:var(--line)} html[data-look="v3"] .ask-do{background:var(--ink);color:var(--canvas);border-radius:var(--r)} html[data-look="v3"] .ask-do:hover{background:var(--green-mid)} html[data-look="v3"] .waiting svg{color:var(--orange)} /* PILLS AND BADGES: the one capsule, a status the way every bank app marks one: a wash, its ink, a dot. */ html[data-look="v3"] .pill,html[data-look="v3"] .badge,html[data-look="v3"] .pill-quiet{border-radius:var(--r-pill);font-weight:600;letter-spacing:0} html[data-look="v3"] .pill{background:var(--warm);color:var(--ink-muted);padding:4px 10px 4px 9px;font-size:12px} html[data-look="v3"] .pill.idle{background:var(--sunken);color:var(--ink-muted);box-shadow:inset 0 0 0 1px var(--line)} html[data-look="v3"] .pill.you{background:var(--tint-orange);color:var(--accent-ink)} html[data-look="v3"] .pill.us{background:var(--tint-green);color:var(--ink)} html[data-look="v3"] .pill.done{background:var(--tint-yes);color:var(--yes)} html[data-look="v3"] .pill-quiet{border-color:var(--line);color:var(--ink-muted)} html[data-look="v3"] .badge{background:var(--tint-orange);color:var(--accent-ink);text-transform:none;letter-spacing:0;font-size:11.5px;padding:3px 9px} html[data-look="v3"] .badge.quiet{background:var(--sunken);color:var(--ink-muted)} html[data-look="v3"] .o-name{color:var(--ink);font-weight:600} html[data-look="v3"] .o-where,html[data-look="v3"] .o-since,html[data-look="v3"] .empty{color:var(--ink-muted)} html[data-look="v3"] .tabs button{color:var(--ink-muted);font-weight:600} html[data-look="v3"] .tabs button:hover{color:var(--ink)} html[data-look="v3"] .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--orange)} /* FIELDS: one height, a hairline, the accent's ring on focus. */ html[data-look="v3"] label{color:var(--ink-muted);font-weight:600;font-size:12.5px} html[data-look="v3"] input[type=email],html[data-look="v3"] input[type=text],html[data-look="v3"] input[type=number],html[data-look="v3"] input[type=date], html[data-look="v3"] input[type=password],html[data-look="v3"] input[type=tel],html[data-look="v3"] input[type=url],html[data-look="v3"] select,html[data-look="v3"] textarea{ border:1px solid var(--line-strong);border-radius:var(--r);background:var(--canvas);color:var(--ink); padding:9px 12px;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease} html[data-look="v3"] select:hover,html[data-look="v3"] input:hover,html[data-look="v3"] textarea:hover{border-color:var(--ink-faint)} html[data-look="v3"] input:focus-visible,html[data-look="v3"] select:focus-visible,html[data-look="v3"] textarea:focus-visible{outline:none; border-color:var(--orange);box-shadow:0 0 0 3px var(--tint-orange)} html[data-look="v3"] :focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* PRESSES: flat, one fill, one height. The lit gradient and its three shadows were the first look's object; a bank's press is a plain dark rectangle that darkens under the pointer and sinks a fraction when pressed. The primary is the ink; the one press that means "the work that remains" (.made) is the accent. */ html[data-look="v3"] .do{background:var(--ink);color:var(--canvas);border-radius:var(--r);box-shadow:none; font-weight:600;font-size:13.5px;letter-spacing:0;padding:10px 18px; transition:background .15s ease,scale .15s ease-out,box-shadow .15s ease} html[data-look="v3"] .do:hover,html[data-look="v3"] .do[disabled]:hover{background:var(--green-mid);box-shadow:none} /* THE WORDS ON A DARK PRESS STAY WHITE UNDER THE POINTER (Mathieu, 9 October, the review: they turned blue, the colour a link takes on hover in some rooms, which outranked the press). Every dark press, everywhere; the quiet and the accent ones keep their own. */ html[data-look="v3"] a.do:not(.is-quiet):not(.made):not(.is-soon):hover,html[data-look="v3"] a.do:not(.is-quiet):not(.made):not(.is-soon):focus-visible, html[data-look="v3"] button.do:not(.is-quiet):not(.made):not(.is-soon):hover,html[data-look="v3"] .do:not(.is-quiet):not(.made):not(.is-soon):hover *{color:var(--canvas)} /* And the other dark presses, named one by one (the note opened again: the connection strip's and the rooms' own dark presses still turned blue). */ html[data-look="v3"] .fp-go:hover,html[data-look="v3"] .fp-go:focus-visible,html[data-look="v3"] .fp-go:hover *,html[data-look="v3"] .gcx-go:hover,html[data-look="v3"] .gcx-go:focus-visible,html[data-look="v3"] .gcx-go:hover *,html[data-look="v3"] .rg-go:hover,html[data-look="v3"] .rg-go:focus-visible,html[data-look="v3"] .rg-go:hover *,html[data-look="v3"] .sd-go:hover,html[data-look="v3"] .sd-go:focus-visible,html[data-look="v3"] .sd-go:hover *,html[data-look="v3"] .r3-done:hover,html[data-look="v3"] .r3-done:focus-visible,html[data-look="v3"] .r3-done:hover *,html[data-look="v3"] .ask-do:hover,html[data-look="v3"] .ask-do:focus-visible,html[data-look="v3"] .ask-do:hover *,html[data-look="v3"] form.card button:hover,html[data-look="v3"] form.card button:focus-visible,html[data-look="v3"] form.card button:hover *,html[data-look="v3"] .upl button:hover,html[data-look="v3"] .upl button:focus-visible,html[data-look="v3"] .upl button:hover *,html[data-look="v3"] .jump a.on:hover,html[data-look="v3"] .jump a.on:focus-visible,html[data-look="v3"] .jump a.on:hover *,html[data-look="v3"] .then-go:hover,html[data-look="v3"] .then-go:focus-visible,html[data-look="v3"] .then-go:hover *{color:var(--canvas)} html[data-look="v3"] .do:active{scale:.98;box-shadow:none} html[data-look="v3"] .do[disabled]{opacity:.45} html[data-look="v3"] .do.made,html[data-look="v3"] .do.made:hover{background:var(--orange);color:#fff;box-shadow:none;filter:none} html[data-look="v3"] .do.made:hover{background:var(--accent-ink)} html[data-look="v3"] .do.made:active{background:var(--accent-ink);box-shadow:none} html[data-look="v3"] .do.is-quiet{background:var(--canvas);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)} html[data-look="v3"] .do.is-quiet:hover{background:var(--warm)} html[data-look="v3"] form.card button,html[data-look="v3"] .upl button{background:var(--ink);color:var(--canvas);border-radius:var(--r);font-weight:600} html[data-look="v3"] form.card button:hover,html[data-look="v3"] .upl button:hover{background:var(--green-mid)} html[data-look="v3"] .dock-acts .do{height:40px;font-size:14px} html[data-look="v3"] .yn button:hover,html[data-look="v3"] .inline button:hover,html[data-look="v3"] .opt:hover{border-color:var(--ink);color:var(--ink)} html[data-look="v3"] .opt-b.on{background:var(--ink);border-color:var(--ink);color:var(--canvas)} html[data-look="v3"] .tick input:checked{background:var(--orange);border-color:var(--orange)} /* LINKS: the accent, underlined only under the pointer. */ html[data-look="v3"] :where(main a:not(.do):not(.ask-do):not(.tips-switch):not(.tips-tab)):hover{color:var(--accent-ink)} html[data-look="v3"] .tr-a,html[data-look="v3"] .crumb a,html[data-look="v3"] .out a{color:var(--ink-muted)} html[data-look="v3"] .tr-a:hover{color:var(--ink)} html[data-look="v3"] .fixture,html[data-look="v3"] .miss{color:var(--accent-ink)} /* THE OFFER CARDS AND THE TRAIL OF STEPS keep their drawing and take the tokens; what they still wrote in the first look's own hues is said again here. */ html[data-look="v3"] .st-done .st-dot,html[data-look="v3"] .st-done::before,html[data-look="v3"] .st-done::after,html[data-look="v3"] .st-now::before{background:var(--yes);border-color:var(--yes)} html[data-look="v3"] .rs-bar span,html[data-look="v3"] .rs-col-bar,html[data-look="v3"] .rv-bar i{background:var(--orange)} html[data-look="v3"] .rs-p.on,html[data-look="v3"] .rs-tab.on,html[data-look="v3"] .jump a.on,html[data-look="v3"] .pk-4{background:var(--ink);border-color:var(--ink);color:var(--canvas)} /* MANGO'S BUBBLE: white, a hairline, the float shadow. */ html[data-look="v3"] .mgf-btn{border-color:var(--line);background:var(--canvas);box-shadow:var(--shadow-float)} html[data-look="v3"] .mgf-n{background:var(--orange);box-shadow:0 0 0 3px var(--canvas)} html[data-look="v3"] .mgf-card{border-color:var(--line);background:var(--canvas);border-radius:var(--r-card);box-shadow:var(--shadow-float)} html[data-look="v3"] .mgf-x{color:var(--ink-muted)} html[data-look="v3"] .mgf-x:hover{background:var(--warm);color:var(--ink)} html[data-look="v3"] .mgf-av{background:var(--sunken)} html[data-look="v3"] .mgf-who b,html[data-look="v3"] .mgf-h{color:var(--ink)} html[data-look="v3"] .mgf-who small{color:var(--ink-muted)} html[data-look="v3"] .mgf-l{color:var(--ink-muted)} html[data-look="v3"] .mgf-go{background:var(--orange);color:#fff;border-radius:var(--r)} html[data-look="v3"] .mgf-go:hover{background:var(--accent-ink);color:#fff} html[data-look="v3"] .mgf-tease{background:var(--canvas);border-color:var(--line);box-shadow:var(--shadow-float)} html[data-look="v3"] .mgf-btn:focus-visible{outline-color:var(--focus)} /* THE DETAIL PASS (Mathieu, 4 October: "la base est excellente, maintenant les détails"). What was read, and the rule taken from each piece, is in docs/design-authority.md ("Look v3, the details"). THREE COLOURS, THREE JOBS. Indigo is what the page does (a link, the room he is in, the focus, the progress). Orange is what waits on HIM (the counter in the rail, the bell, the dot on a task, a Needed tag, the one press that is the work remaining): warm, because it is a hand on the shoulder and not an alarm, and it sits on the ink as the brand's own pairing. Yellow is the tips and nothing else: a bulb. Green stays finished, and Grab's. */ /* PRESSES: three levels and one height. Primary is the ink; the one press that means "the work that remains" is orange with ink words (7:1), the way Wise sets dark words on its lime; secondary is outlined; a text press is a link. 40px, 14px semi-bold, 10px corners, an icon 8px from its word, 150ms on every state, a 2px indigo ring from the keyboard. */ html[data-look="v3"] .do{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px; font-size:14px;line-height:1.2} html[data-look="v3"] .do:focus-visible{outline:2px solid var(--focus);outline-offset:2px} html[data-look="v3"] .do.made,html[data-look="v3"] .do.made:hover{background:var(--sun);color:var(--on-sun)} html[data-look="v3"] .do.made:hover{background:var(--sun-deep)} html[data-look="v3"] .do.made:active{background:var(--sun-deep)} html[data-look="v3"] .do.is-quiet{box-shadow:inset 0 0 0 1px var(--line-strong)} html[data-look="v3"] .do.is-quiet:hover{background:var(--warm);box-shadow:inset 0 0 0 1px var(--ink-faint)} html[data-look="v3"] .rp-mcbtn,html[data-look="v3"] .rp-mangocard:hover .rp-mcbtn{background:var(--sun);color:var(--on-sun);border-radius:var(--r)} html[data-look="v3"] .rp-mangocard:hover .rp-mcbtn{background:var(--sun-deep)} html[data-look="v3"] .rp-mcbtn svg{color:var(--on-sun)} html[data-look="v3"] .home .link{height:36px;padding:0 14px;font-size:13px} html[data-look="v3"] .home .link:hover{border-color:var(--ink-faint)} /* WHAT WAITS ON HIM, IN ORANGE */ html[data-look="v3"] .side .n{background:var(--sun-wash);color:var(--sun-ink)} /* THE "!" OF OPTIONAL QUESTIONS LEFT, IN THE SITE'S INDIGO (Mathieu, 9 October, the review: not the orange of what waits on him; it is not an error, only questions he may still answer). In the rail and on the tabs. */ html[data-look="v3"] .side .s-opt,html[data-look="v3"] .rm-tabs .s-opt{background:var(--deep,#E8ECFF);color:var(--accent-ink,#3F52A0)} html[data-look="v3"] .act-n{background:var(--sun);color:var(--on-sun)} html[data-look="v3"] .prod-due{background:var(--sun);color:var(--on-sun)} html[data-look="v3"] .pill.you{background:var(--sun-wash);color:var(--sun-ink)} html[data-look="v3"] .badge{background:var(--sun-wash);color:var(--sun-ink)} html[data-look="v3"] .home .tick.you{border-color:var(--sun)} html[data-look="v3"] .home .tick.you i{background:var(--sun)} html[data-look="v3"] .home .t-meta b{color:var(--sun-ink)} html[data-look="v3"] .waiting svg{color:var(--sun)} html[data-look="v3"] .rp2-who.wait{background:var(--sun);color:var(--on-sun)} html[data-look="v3"] .ms-tag,html[data-look="v3"] .ms-panel-body .q-tag{border-color:transparent;background:var(--sun-wash);color:var(--sun-ink)} html[data-look="v3"] .ms-card.is-empty:hover{border-color:var(--sun)} html[data-look="v3"] .mgf-n{background:var(--sun);color:var(--on-sun)} html[data-look="v3"] .say.waiting{color:var(--sun-ink)} html[data-look="v3"] .say.waiting .say-dot{color:var(--sun)} html[data-look="v3"] .rp2-turn .y{color:var(--sun-ink)} html[data-look="v3"] .rm-decide{border-color:var(--sun);background:var(--sun-wash)} html[data-look="v3"] .rm-decide-h{color:var(--sun-ink)} html[data-look="v3"] .rm-dec-h .n{background:var(--sun-wash);color:var(--sun-ink)} html[data-look="v3"] .warn{background:var(--sun-wash);border-left-color:var(--sun)} /* THE TIPS, IN YELLOW: the bulb, its count, the row on the Home. */ html[data-look="v3"] .act-n.is-plain{background:var(--gold);color:var(--on-gold)} html[data-look="v3"] .h-tips{background:var(--gold-wash);border-color:transparent} html[data-look="v3"] .h-tips:hover{border-color:var(--gold);background:var(--gold-wash)} html[data-look="v3"] .h-tips svg{color:var(--gold-ink)} html[data-look="v3"] .act.is-here{background:var(--gold-wash);color:var(--ink)} /* TABS: two kinds, said apart. A row of SECTIONS is an underline (the restaurant's three tabs, the results' views, the report's three); a FILTER is a segmented control on a sunken track whose chosen segment is raised white (the tips' three lists, the results' period). Counts sit in a small grey capsule. */ html[data-look="v3"] .rt-tabs{gap:0;margin:0 0 18px;padding:0;border-bottom:1px solid var(--line);overflow-x:auto} html[data-look="v3"] .rt-tab{padding:10px 14px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent; color:var(--ink-muted);font-weight:600;font-size:14px} html[data-look="v3"] .rt-tab:hover{color:var(--ink);border-color:transparent} html[data-look="v3"] .rt-tab.on{background:transparent;color:var(--ink);border-bottom-color:var(--orange)} html[data-look="v3"] .rs-tabs{gap:0;margin:16px 0 0;border-bottom:1px solid var(--line)} html[data-look="v3"] .rs-tab{padding:10px 14px 10px 30px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent; color:var(--ink-muted);font-weight:600;position:relative} html[data-look="v3"] .rs-tab::before{left:12px} html[data-look="v3"] .rs-tab:hover{color:var(--ink);border-color:transparent;border-bottom-color:var(--line-strong)} html[data-look="v3"] .rs-tab.on{background:transparent;color:var(--ink);border-bottom-color:var(--orange)} html[data-look="v3"] .rs-period{gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunken);display:inline-flex} html[data-look="v3"] .rs-p{border:0;background:transparent;color:var(--ink-muted);border-radius:8px;padding:5px 12px 5px 26px} html[data-look="v3"] .rs-p:hover{color:var(--ink)} html[data-look="v3"] .rs-p.on{background:var(--canvas);color:var(--ink);box-shadow:0 1px 2px rgba(21,24,27,.10)} html[data-look="v3"] .tp-page .tips-tabs{padding:3px;border-color:var(--line);border-radius:var(--r);background:var(--sunken)} html[data-look="v3"] .tp-page .tips-tab{height:34px;border-radius:8px;color:var(--ink-muted)} html[data-look="v3"] .tp-page .tips-tab:hover{color:var(--ink);background:transparent} html[data-look="v3"] .tp-page .tips-tab.on{background:var(--canvas);color:var(--ink);box-shadow:0 1px 2px rgba(21,24,27,.10)} html[data-look="v3"] .tabs .n,html[data-look="v3"] .rm-tabs .n,html[data-look="v3"] .tips-tab .n,html[data-look="v3"] .rs-tab .n,html[data-look="v3"] .rt-tab .n{display:inline-flex;align-items:center;justify-content:center; min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--sunken);color:var(--ink-muted);font-size:11.5px;font-weight:700} html[data-look="v3"] .tips-tab.on .n,html[data-look="v3"] .rs-tab.on .n{background:var(--warm);color:var(--ink)} /* THE RAIL: the room he is in is a quiet grey block, ink words, the icon and a 3px bar in indigo. Not a coloured row: a sidebar that is always in the eye's field must not shout (UX Movement). Hover is one shade lighter than the block. The product's door at the top is a card: a hairline, the name in ink, the kicker faint, and the same block and bar when its page is the one open. */ html[data-look="v3"] .side a{padding:8px 12px;min-height:38px;align-items:center} html[data-look="v3"] .side .i{opacity:.75;width:18px;height:18px} html[data-look="v3"] .side .i svg{width:18px;height:18px} html[data-look="v3"] .side a:hover,html[data-look="v3"] .side .row:hover{background:var(--sunken);color:var(--ink)} html[data-look="v3"] .side a[aria-current="page"],html[data-look="v3"] .side .row[aria-current="page"]{background:var(--warm);color:var(--ink); font-weight:600;box-shadow:inset 3px 0 0 var(--orange)} html[data-look="v3"] .side .row[aria-current="page"] .s-label{color:var(--ink)} html[data-look="v3"] .side a[aria-current="page"] .i{color:var(--orange);opacity:1} html[data-look="v3"] .side .s-cap{margin:20px 0 4px;font-size:10px;letter-spacing:.1em} html[data-look="v3"] .prod{margin:14px 12px 10px;box-shadow:none} html[data-look="v3"] .prod-row{min-height:50px} html[data-look="v3"] .prod-kick{color:var(--ink-faint);font-size:9.5px;letter-spacing:.1em} html[data-look="v3"] .prod-name{font-size:15px} html[data-look="v3"] .prod.on{border-color:var(--line)} html[data-look="v3"] .prod.on>.prod-row{background:var(--warm)} html[data-look="v3"] .prod-tog{width:30px;height:30px;border-radius:8px;border-color:var(--line);background:var(--canvas)} html[data-look="v3"] .prod-cb:checked+.prod-row .prod-tog{background:var(--canvas);color:var(--ink);border-color:var(--ink-faint)} html[data-look="v3"] .col-side > .who{padding:0 12px} html[data-look="v3"] .col-side .who > summary{border-radius:var(--r)} html[data-look="v3"] .col-side .who > summary:hover{background:var(--sunken)} html[data-look="v3"] .col-side > .who.is-current{background:var(--warm);box-shadow:none} html[data-look="v3"] .col-side > .who.is-current::before{background:var(--orange);left:0;height:24px;border-radius:0 3px 3px 0} /* THE HEAD'S ACTIONS: 40px targets, a quiet hover, the Grab chip as a capsule, the bell's count in orange, the tips' in yellow. */ html[data-look="v3"] .act{width:40px;height:40px;border-radius:var(--r)} html[data-look="v3"] .act:hover{background:var(--sunken);color:var(--ink)} html[data-look="v3"] .gc{height:36px;padding:0 12px 0 9px;font-size:12.5px;font-weight:600} html[data-look="v3"] .gc:hover{border-color:var(--line-strong);background:var(--canvas)} /* THE DOCK: the foot of every page, white on a hairline; the display control an outlined capsule; the work on the right at 40px. */ html[data-look="v3"] .dock{height:60px;padding:0 20px 0 14px;gap:16px} html[data-look="v3"] .pref-btn{height:36px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--line);background:var(--canvas);color:var(--ink-muted);font-weight:600;font-size:12.5px} html[data-look="v3"] .prefs[open] .pref-btn,html[data-look="v3"] .pref-btn:hover{background:var(--sunken);color:var(--ink);border-color:var(--line-strong)} html[data-look="v3"] .dock-acts{gap:12px;font-weight:500;color:var(--ink-muted)} html[data-look="v3"] .dock-acts .do{min-height:40px} /* FIELDS, CARDS, SMALL THINGS */ html[data-look="v3"] .card:has(> .do):hover,html[data-look="v3"] .h-tips,html[data-look="v3"] .home .link{transition:border-color .15s ease,background .15s ease} html[data-look="v3"] .chip{border-radius:var(--r)} html[data-look="v3"] .prog-bar{height:6px} html[data-look="v3"] .blank-mark{background:var(--tint-yes);color:var(--yes)} html[data-look="v3"] ::selection{background:var(--deep);color:var(--ink)} html[data-look="v3"] hr{border:0;border-top:1px solid var(--line)} /* THE PHONE: the strip of rooms under the head wears the same marks. */ @media(max-width:900px){ html[data-look="v3"] .col-side{background:transparent;border-right:0} html[data-look="v3"] .chrome-brand{font-size:24px} html[data-look="v3"] .col-main > .chrome{background:var(--canvas)} html[data-look="v3"] .dock{height:auto;min-height:60px;padding:8px 16px calc(8px + env(safe-area-inset-bottom))} } html[data-look="v3"] .ms-room{--ms-cream:var(--cream);--ms-cream-light:var(--canvas);--ms-cream-warm:var(--warm); --ms-green:var(--ink);--ms-green-deep:var(--ink);--ms-orange:var(--orange); --ms-tint-green:var(--tint-green);--ms-ink:var(--ink);--ms-gray:var(--ink-muted);--ms-line:var(--line);--ms-r:var(--r)} html[data-look="v3"] .mn-room{--mn-cream:var(--cream);--mn-cream-light:var(--canvas);--mn-cream-warm:var(--warm); --mn-green:var(--ink);--mn-green-deep:var(--ink);--mn-orange:var(--orange); --mn-tint-green:var(--tint-green);--mn-ink:var(--ink);--mn-gray:var(--ink-muted);--mn-line:var(--line);--mn-r:var(--r)} html[data-look="v3"] .op-room{--or-cream:var(--cream);--or-cream-light:var(--canvas);--or-cream-warm:var(--warm); --or-green:var(--ink);--or-green-deep:var(--ink);--or-orange:var(--orange); --or-tint-green:var(--tint-green);--or-ink:var(--ink);--or-gray:var(--ink-muted);--or-line:var(--line);--or-r:var(--r)} html[data-look="v3"] .ms-card{background:var(--canvas);border-color:var(--line);border-radius:var(--r-card)} html[data-look="v3"] .ms-card:hover{border-color:var(--line-strong);box-shadow:0 6px 18px rgba(21,24,27,.06)} html[data-look="v3"] .ms-card:focus-visible{outline-color:var(--focus)} /* What waits on him is orange here too (the detail pass): the Needed tag, the owed card's frame, the empty card under the pointer. */ html[data-look="v3"] .ms-card.is-empty:hover{border-color:var(--sun);background:var(--canvas)} html[data-look="v3"] .ms-card.is-owed{border-color:var(--sun);box-shadow:inset 3px 0 0 var(--sun)} html[data-look="v3"] .ms-tag,html[data-look="v3"] .ms-panel-body .q-tag{border-color:transparent;background:var(--sun-wash);color:var(--sun-ink);border-radius:var(--r-pill);padding:2px 9px} html[data-look="v3"] .ms-tag.is-collecting{border-color:transparent;background:var(--tint-orange);color:var(--accent-ink)} html[data-look="v3"] .ms-tag.is-not-on-grab{border-color:var(--line-strong);background:var(--sunken);color:var(--ink-muted)} html[data-look="v3"] .ms-collect-i{background:var(--tint-orange);color:var(--accent-ink)} /* THE WALK: a pale indigo spine under the dragon, white paper, the accent on its marks. It was near-black until 7 October; Mathieu found it "très limite" and the reading agreed (docs/design-authority.md, "The walk's spine"): black reads as luxury and power where this screen has to say simple and looked after, it is the colour of mourning in Thailand, and it was the one dark pane in an account that is light everywhere else. The pale indigo is the accent's own hue taken down to a wash, the way the Community zone is a wash of its violet, so Mango stands out in colour and the words are the page's ink. At night the spine is a deep indigo under light words, so it still reads as a column apart from the paper. */ html[data-look="v3"] .gd,html[data-look="v3"] .guide,html[data-look="v3"] [class*="gd-"]{--gd-spine:#EDF0FD;--gd-spine-lit:#E1E6FB;--gd-on:#15181B; --gd-on-soft:#535C66;--gd-on-faint:rgba(21,24,27,.24);--gd-here:#FFFFFF; --gd-scene-op:.09;--gd-scene-filter:grayscale(1);--gd-paper:#FFFFFF; --gd-accent:var(--orange);--gd-fill:var(--orange);--gd-ink-accent:var(--accent-ink); --gd-scrim:rgba(21,24,27,.55);--gd-cast:0 4px 12px rgba(21,24,27,.10),0 24px 64px rgba(21,24,27,.18)} @media (prefers-color-scheme: dark){ html[data-look="v3"]:not([data-theme="light"]) .gd,html[data-look="v3"]:not([data-theme="light"]) .guide,html[data-look="v3"]:not([data-theme="light"]) [class*="gd-"]{--gd-spine:#1A2142;--gd-spine-lit:#232C56;--gd-on:#F1F3F5;--gd-on-soft:rgba(241,243,245,.66);--gd-on-faint:rgba(241,243,245,.30);--gd-here:rgba(241,243,245,.10);--gd-scene-op:.14;--gd-scene-filter:grayscale(1) brightness(2.4);--gd-paper:var(--canvas)} } html[data-look="v3"][data-theme="dark"] .gd,html[data-look="v3"][data-theme="dark"] .guide,html[data-look="v3"][data-theme="dark"] [class*="gd-"]{--gd-spine:#1A2142;--gd-spine-lit:#232C56;--gd-on:#F1F3F5;--gd-on-soft:rgba(241,243,245,.66);--gd-on-faint:rgba(241,243,245,.30);--gd-here:rgba(241,243,245,.10);--gd-scene-op:.14;--gd-scene-filter:grayscale(1) brightness(2.4);--gd-paper:var(--canvas)} /* RESULTS AND MARKETING, BEFORE THE ACCOUNT IS CONNECTED: white cards on the page, the state said by the tag and the dots, not by a wash. */ html[data-look="v3"] .rg,html[data-look="v3"] .rg.is-none,html[data-look="v3"] .rg.is-held,html[data-look="v3"] .rg.is-waiting{background:var(--canvas);border-color:var(--line);border-radius:var(--r-card)} html[data-look="v3"] .rg.is-waiting{border-color:rgba(47,70,214,.32)} html[data-look="v3"] .rg-see li{background:var(--sunken);border-color:transparent} html[data-look="v3"] .rh-tile{background:var(--sunken);border-color:transparent} /* THE FIGURES THAT COME FROM GRAB (Mathieu, 4 October): the bars of Results are drawn in Grab's own green (#00B14F, its master logo's RGB value), never in the account's ink or accent, so the colour says where the figure comes from. Marks only, never words: that green clears 4.5:1 on nothing light. */ html[data-look="v3"] .gr-col path{fill:#00B14F} html[data-look="v3"] .gr-hatch-bg{fill:#D9F3E3} html[data-look="v3"] .gr-hatch-ln{stroke:#00B14F} /* THE ROAD */ html[data-look="v3"] .rp2-coll{border-color:var(--orange);background:var(--tint-orange);color:var(--accent-ink);border-radius:var(--r-pill)} html[data-look="v3"] .rp-mangocard:hover .rp-mcbtn{background:var(--sun-deep)}