/* My Color Taste, v14: shared styles for every page (Direction C, "Color Lookbook"). White page, near-black ink, one typeface. The visitor's colors are the only color on the page. Light only: there are no dark-mode rules anywhere. */ /* ---------- fonts, hosted on this site (SIL Open Font License, see /fonts/) ---------- */ @font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Hanken Grotesk';font-style:italic;font-display:swap;font-weight:100 900;src:url(/fonts/hanken-grotesk-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Hanken Grotesk';font-style:italic;font-display:swap;font-weight:100 900;src:url(/fonts/hanken-grotesk-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/jetbrains-mono-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/jetbrains-mono-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/jetbrains-mono-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/jetbrains-mono-latin-ext-500.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------- shared tokens (both builders use exactly these) ---------- */ :root{ color-scheme:light; --bg:#FFFFFF; --ink:#111111; --ink-2:#555555; --ink-3:#707070; --line:#E3E3E3; --soft:#F6F6F4; --action:#1F1F1F; --action-hover:#3A3A3A; --action-ink:#FFFFFF; --radius-ctl:999px; /* things you press are soft (pills, circles); content (cards, swatches, images) stays square */ --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --gut:clamp(16px,4vw,48px); --maxw:1320px; --ease:cubic-bezier(0.23,1,0.32,1); --d-track:-0.045em; --d-wt:500; } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-padding-top:16px;scrollbar-gutter:stable;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);} body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;} [hidden]{display:none !important;} img{max-width:100%;} p{margin:0 0 14px;max-width:62ch;} h1,h2,h3,h4{font-family:var(--sans);font-weight:var(--d-wt);margin:0;} h1{font-size:clamp(40px,4.6vw + 16px,72px);line-height:.95;letter-spacing:var(--d-track);} h2{font-size:32px;line-height:1.05;letter-spacing:-0.03em;} h3{font-size:21px;line-height:1.2;letter-spacing:-0.01em;} :where(a){color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px;} /* zero specificity, so a link styled as a filled button keeps its white text */ :focus-visible{outline:2px solid var(--ink);outline-offset:3px;} .hint{color:var(--ink-2);font-size:15px;} .lede{font-size:clamp(18px,1.4vw + 12px,21px);line-height:1.5;color:var(--ink-2);max-width:46ch;} .kicker{font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0;} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} input[type=file]{position:absolute;width:1px;height:1px;opacity:0;} input[type=range],input[type=checkbox]{accent-color:var(--action);} /* page column: every direct child of
sits in one centred column, as the lookbook's .wrap: --maxw wide including a --gut each side */ body>main{flex:1 0 auto;width:100%;display:flex;flex-direction:column;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));} main>*{width:calc(min(100%,var(--maxw)) - 2*var(--gut));margin-left:auto;margin-right:auto;} main>.footspacer{flex:1 0 clamp(64px,8vw,112px);} /* which page shows which sections (data-page on ) */ html:not([data-page="taste"]) [data-only="taste"],html:not([data-page="palette"]) [data-only="palette"],html:not([data-page="contact"]) [data-only="contact"]{display:none !important;} /* ---------- controls: soft ink pills, sentence case. Zero specificity, so any component class can restyle a button ---------- */ :where(button,.btn){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 22px; border:1px solid var(--action);border-radius:var(--radius-ctl);background:var(--bg);color:var(--action); font:600 15px/1.2 var(--sans);letter-spacing:0;text-transform:none;text-align:center;text-decoration:none; cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 160ms var(--ease);} :where(button.primary,.btn.primary){background:var(--action);color:var(--action-ink);} :where(button,.btn):active{transform:scale(.97);} :where(button):disabled{opacity:.35;cursor:default;transform:none;} :where(.btn):focus-within{outline:2px solid var(--ink);outline-offset:3px;} :where(button.small,.btn.small){min-height:36px;padding:8px 16px;font-size:14px;} @media (hover:hover) and (pointer:fine){ :where(button,.btn):not(:disabled):hover{background:var(--soft);} :where(button.primary,.btn.primary):not(:disabled):hover{background:var(--action-hover);border-color:var(--action-hover);} } .linkbtn{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--ink); font:500 14px/1.4 var(--sans);letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:3px;cursor:pointer;} @media (hover:hover) and (pointer:fine){.linkbtn:hover{background:none;text-decoration-thickness:2px;}} /* segmented controls: a pill track, the chosen option a filled pill inside it */ .seg{display:inline-flex;flex-wrap:nowrap;gap:2px;max-width:100%;padding:3px;margin:0;border:1px solid var(--action);border-radius:var(--radius-ctl);background:var(--bg);} .seg button{min-height:34px;padding:0 14px;border:0;border-radius:var(--radius-ctl);background:transparent;color:var(--action);font-size:14px;white-space:nowrap;} .seg button.on{background:var(--action);color:var(--action-ink);} @media (hover:hover) and (pointer:fine){.seg button:not(.on):hover{background:transparent;text-decoration:underline;text-underline-offset:3px;}} /* sliders with a label and a value */ .countctl{display:inline-flex;align-items:center;gap:10px;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;} .countctl input{width:120px;min-width:80px;margin:0;} .countctl output{min-width:1.5em;font:500 14px/1 var(--sans);letter-spacing:0;font-variant-numeric:tabular-nums;text-align:right;} /* the "Include the photo" switch (hidden in Image to Palette since v6: the photo is always shown) */ .phototoggle{display:none !important;} .switch{position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:999px;background:var(--line);} .switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform 160ms var(--ease);} .phototoggle input:checked+.switch{background:var(--action);} .phototoggle input:checked+.switch::after{transform:translateX(18px);} /* ---------- header ---------- */ .topbar{border-bottom:1px solid var(--ink);background:var(--bg);} .topbar-in{position:relative;width:calc(min(100%,var(--maxw)) - 2*var(--gut));margin:0 auto;min-height:64px;display:flex;align-items:center;gap:10px 24px;} .brand{margin-right:auto;display:inline-flex;align-items:center;gap:.5em;font:600 21px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;} .brand .mark{flex:0 0 auto;width:.95em;height:.95em;fill:currentColor;margin-top:.04em;} /* the site mark: an ink swatch with a pinked bottom (Neli's pick A, 11 Oct 2026); also the tab icon */ .menu{list-style:none;margin:0;padding:0;display:flex;gap:4px 22px;flex-wrap:wrap;} .menu a{display:block;padding:6px 0;font:500 14px/1 var(--sans);color:var(--ink);text-decoration:none;} .menu a[aria-current="page"]{box-shadow:inset 0 -1px 0 var(--ink);} @media (hover:hover) and (pointer:fine){.menu a:hover{box-shadow:inset 0 -1px 0 var(--ink);}} .menu-btn{display:none;} @media (max-width:720px){ .brand{font-size:17px;} .topbar-in{min-height:56px;} .menu-btn{display:inline-flex;min-height:36px;padding:8px 16px;font-size:14px;} .menu{display:none;position:absolute;z-index:50;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:4px 0;margin-top:1px;background:var(--bg);border:1px solid var(--ink);box-shadow:0 12px 32px rgba(0,0,0,.10);} .menu.open{display:flex;} .menu a{padding:14px 16px;font-size:16px;} .menu a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--ink);} } /* ---------- footer ---------- */ .sitefoot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--ink);} .site-credit{margin:0;font-size:14px;color:var(--ink-2);} .site-credit a{color:var(--ink);} .crossnote{margin:0;} .crossnote p{margin:0;} .sitefoot .crossnote .btn{min-height:36px;padding:8px 16px;font-size:14px;} /* ---------- dialogs ---------- */ dialog{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:24px;scroll-padding:24px;border:1px solid var(--ink);border-radius:2px;background:var(--bg);color:var(--ink);box-shadow:0 24px 64px rgba(0,0,0,.16);} dialog::backdrop{background:rgba(17,17,17,.45);} dialog[open]{animation:dlgIn 200ms var(--ease);} @keyframes dlgIn{from{opacity:0;transform:scale(.97);}} dialog h3{font-size:26px;line-height:1.05;letter-spacing:-0.03em;margin:0 0 6px;} dialog .hint{font-size:14px;} .dlg-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;} @media (max-width:480px){dialog{padding:18px;}} .toast{position:fixed;z-index:100;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);max-width:calc(100% - 32px); padding:10px 18px;border-radius:var(--radius-ctl);background:var(--ink);color:#fff;font-size:14px;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease),transform 200ms var(--ease);} .toast.show{opacity:1;transform:translate(-50%,0);} /* crop and check colors */ .cwrap{margin:14px 0 16px;text-align:center;line-height:0;} #cropFrame{display:inline-block;position:relative;overflow:hidden;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;} #cropFrame img{display:block;max-width:100%;max-height:62vh;width:auto;height:auto;} #hiCanvas{position:absolute;display:none;pointer-events:none;} .sel{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.45);pointer-events:none;} #cropFrame.full .sel{display:none;} .cropsw{display:flex;gap:2px;height:40px;margin:0 0 18px;} .cropsw button{position:relative;flex:1 1 0;min-width:16px;min-height:0;height:100%;padding:0;border:0;border-radius:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);} .cropsw button.on{z-index:1;outline:2px solid var(--ink);outline-offset:2px;} .cropsw button.acc::after{content:"";position:absolute;left:50%;bottom:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);} /* the example painting's details */ #artDlg{width:min(480px,calc(100% - 24px));} #artDlg h3{font-size:26px;} .art-kicker{margin:0 0 8px;font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);} .art-artist{margin:0 0 16px;font-size:16px;} .art-artist span{color:var(--ink-2);} .art-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 16px;font-size:14.5px;} .art-facts dt{color:var(--ink-2);} .art-facts dd{margin:0;} .art-about{margin:0 0 14px;font-size:15px;line-height:1.5;} .art-caption{margin:0 0 4px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;} .art-rights{margin:0 0 18px;font-size:12.5px;color:var(--ink-2);} /* share card preview (the card itself is Color Taste's) */ #shareDlg{width:min(460px,calc(100% - 24px));} .shareimg{display:block;width:100%;aspect-ratio:1080/1350;max-height:62vh;margin-top:12px;object-fit:contain;background:var(--soft);} /* ---------- first view: the hero with the Matisse (Color Taste and Image to Palette, before an image is added) ---------- */ .hero{display:none;grid-template-columns:minmax(0,1fr);gap:36px;padding:clamp(32px,5vw,72px) 0 clamp(40px,6vw,88px);} :root[data-page="taste"].fresh .hero:not(.labhero){display:grid;} :root[data-page="palette"] main:has(#lab:not(.has)) .labhero{display:grid;} :root[data-page="palette"] main:has(#lab:not(.has))>#lab{display:none;} .restoring .hero,.restoring .workspace{visibility:hidden;} .hero>div:first-child{min-width:0;} .hero h1{max-width:20ch;margin:0 0 24px;text-wrap:balance;} /* v15: room for "The colors you keep coming back to" on two lines */ .hero .sub{max-width:44ch;margin:0 0 30px;font-size:clamp(18px,1.4vw + 12px,21px);line-height:1.5;color:var(--ink-2);} .hero .sub-short{display:none;} .hero .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;} .hero .ctas .btn{min-height:54px;padding:14px 30px;font-size:16px;} .hero .priv{margin:18px 0 0;font-size:14px;color:var(--ink-2);max-width:none;} @media (max-width:600px){.hero .sub-long{display:none;}.hero .sub-short{display:inline;}} @media (min-width:600px){.hero .priv{white-space:nowrap;}} @media (min-width:900px){ .hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,6vw,96px);align-items:stretch;} /* text column runs from the top of the painting to the bottom of its color squares (the painting's top is lined up with the headline by alignDemo) */ .hero>div:first-child{display:flex;flex-direction:column;} .hero .demo{align-self:start;justify-self:end;} } .demo{position:relative;width:100%;max-width:360px;margin:0;} /* wide screens: the painting and its color squares fit in the first view AND leave room below for what comes next (v15: the top of the example images shows on a normal laptop or desktop screen). Its height is about 1.18 times its width, the squares about 0.23 times plus 18px (no hex codes under them since 10 Oct 2026); 500px covers the header, the padding, the line-up with the headline, the picture's name under the squares (v17 rotation, 40px) and about 270px for the next section's heading and a first look at its images. */ @media (min-width:900px){ .demo{max-width:clamp(260px,calc((100vh - 500px)/1.41),440px);max-width:clamp(260px,calc((100svh - 500px)/1.41),440px);} .hero{padding-top:clamp(24px,min(5vw,6vh),72px);padding-bottom:clamp(28px,4vh,48px);} .hero .sub{max-width:52ch;} } /* shorter screens (most laptops): the hero's type tightens a little so the first view isn't all hero */ @media (min-width:900px) and (max-height:860px){ .hero h1{font-size:clamp(44px,8.4vh,72px);margin-bottom:18px;} .hero .sub{font-size:18px;margin-bottom:22px;} .hero .ctas .btn{min-height:48px;padding:12px 26px;} .hero .priv{margin-top:12px;} } /* v17 (Neli): Color Taste's headline, "Find your / color taste", on two lines and about 25% bigger than the site's h1 */ .hero:not(.labhero) h1{font-size:clamp(50px,5.75vw + 20px,90px);} @media (min-width:900px) and (max-height:860px){.hero:not(.labhero) h1{font-size:clamp(55px,10.5vh,90px);}} @media (max-width:600px){.hero .demo{max-width:280px;margin:0 auto;}} /* phones: a smaller painting, centred (as in v13) */ .demo .stage{position:relative;line-height:0;} .demo canvas.art{display:block;width:100%;height:auto;aspect-ratio:540/636;background:var(--soft);cursor:pointer;} .demo svg.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;} .demo svg.links circle{fill:none;stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));transform-box:fill-box;transform-origin:center;} .demo svg.links line{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3;opacity:0;} /* v17 (Neli): the squares have the pinked (zigzag) bottom of the palettes' swatches (.palsw) and the same 6px gaps. app.js (snapChips) sets --cw and --cg in whole screen pixels and trims the picture's width to match, so every gap is exactly equal */ .demo .chips{display:grid;grid-template-columns:repeat(var(--cn,5),var(--cw,minmax(0,1fr)));column-gap:var(--cg,6px);margin-top:18px;} .demo .chip{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink-2); letter-spacing:0;text-transform:none;transform-origin:50% 0;} .demo .chip b{display:block;margin:0;aspect-ratio:1/1.15;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%; mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%;} @media (hover:hover) and (pointer:fine){.demo .chip:hover{background:transparent;color:var(--ink);}} .artinfo{position:absolute;right:10px;bottom:10px;width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink); font:italic 600 16px/1 var(--sans);letter-spacing:0;text-transform:none;box-shadow:0 1px 4px rgba(0,0,0,.25);} @media (hover:hover) and (pointer:fine){.artinfo:hover{background:#fff;}} /* the painting breaks into its palette: rings, then dotted lines, then the color squares (transform and opacity only) */ .js-anim .demo circle{opacity:0;} .js-anim .demo .chip{opacity:0;transform:translateY(-10px);} .demo.play circle{animation:dotIn 240ms var(--ease) forwards;animation-delay:calc(var(--i)*80ms + 150ms);} .demo.play line{animation:lineIn 240ms var(--ease) forwards;animation-delay:calc(var(--i)*80ms + 350ms);} .demo.play .chip{animation:chipIn 280ms var(--ease) forwards;animation-delay:calc(var(--i)*80ms + 450ms);} .demo.play.settled line{animation:lineIn 240ms var(--ease) forwards,lineOut 280ms var(--ease) forwards;animation-delay:calc(var(--i)*80ms + 350ms),3s;} /* v17 hero rotation (Neli's pick, "A3 Paint dabs"): later pictures' rings and squares are animated from app.js, not by the intro */ .js-anim .demo .links circle.rot,.js-anim .demo .chips .chip.rot{opacity:1;transform:none;animation:none;} .demo.noinfo canvas.art{cursor:default;} /* under the squares: the kind of image (Your own art, Art you love, ...) and a dot for each picture */ .demo .heromet{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;font:400 13px/1.35 var(--sans);color:var(--ink-2);} .demo .heromet .t{min-width:0;transition:opacity .3s var(--ease);} .demo .hdots{display:flex;flex:none;margin-right:-8px;} .demo .hdots button{width:24px;height:24px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;} .demo .hdots button::before{content:"";width:8px;height:8px;box-sizing:border-box;border:1px solid var(--ink);border-radius:50%;} .demo .hdots button[aria-current="true"]::before{background:var(--ink);} @keyframes dotIn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}} @keyframes lineIn{from{opacity:0;}to{opacity:.55;}} @keyframes lineOut{from{opacity:.55;}to{opacity:0;}} @keyframes chipIn{to{opacity:1;transform:none;}} /* the color strip from earlier versions: kept in the markup for the code, not shown */ .fan{display:none !important;} /* ---------- Color Taste: the image bar ---------- */ :root.fresh .tastebar:not(.labbar),:root.fresh .workspace,:root.fresh #spaceSec,:root.fresh #palettes{display:none !important;} .tastebar{width:100%;max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px; padding:10px calc(max(0px,(100% - var(--maxw))/2) + var(--gut));border-bottom:1px solid var(--line);} .tastebar #taste{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0;padding:0;} .tastebar #taste h2{font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;} .tastebar #imgCount{margin:0;font-size:13px;} .tastebar #imgSec{flex:1 1 360px;min-width:0;display:flex;align-items:center;gap:8px 20px;} .tastebar #cropHint{display:none;} .dropzone{border:0;padding:0;margin:0;} .tastebar .dropzone{flex:1 1 auto;min-width:0;} .dropzone.over{outline:1px dashed var(--ink);outline-offset:4px;} .dz-empty{padding:24px 0;text-align:left;color:var(--ink-2);} .dz-empty p{margin:0 0 14px;} .tastebar .clearrow{flex:0 0 auto;margin:0 0 0 auto;max-width:none;} /* v15: the on-page confirm for "Remove all images" */ .askwrap{flex-wrap:wrap !important;} .tastebar .clearrow.asking,.labbar .clearrow.asking{flex-basis:100%;display:flex;justify-content:flex-end;} /* its own line, so the thumbnails keep their room */ .clearask{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 10px;} .clearask .clearq{font:500 14px/1.3 var(--sans);color:var(--ink);} .clearask button{min-height:34px;padding:6px 14px;font-size:14px;} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;} .grid:empty{display:none;} /* the thumbnails scroll sideways with no visible scrollbar; "+ Add more" (the last item) stays pinned at the right end */ .tastebar .grid{display:flex;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 0;scrollbar-width:none;} .tastebar .grid::-webkit-scrollbar{display:none;} .tastebar .grid:empty{display:none;} .tastebar .grid>.addtile{position:sticky;right:0;z-index:2;margin-left:4px;box-shadow:-12px 0 0 var(--bg);} .tile{position:relative;flex:0 0 auto;} .tastebar .tile{width:44px;height:44px;} .thumbbtn{display:block;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:var(--soft);overflow:hidden;} .thumbbtn canvas{display:block;width:100%;height:100%;object-fit:cover;} .tile .strip{display:none;} /* remove: a small square tucked into the thumbnail's top-right corner, always visible (touch users need it) */ .rm{position:absolute;top:2px;right:2px;z-index:1;width:18px;height:18px;min-height:0;padding:0;border:1px solid var(--ink);border-radius:50%;background:var(--bg);color:var(--ink); font:500 14px/1 var(--sans);letter-spacing:0;text-transform:none;} .rm::before{content:"";position:absolute;inset:-5px;} /* a slightly bigger target than it looks */ .addtile{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:36px;padding:0 16px;border:1px solid var(--action);border-radius:var(--radius-ctl);background:var(--bg);color:var(--action); font:600 14px/1 var(--sans);white-space:nowrap;cursor:pointer;transition:transform 160ms var(--ease);} .addtile:active{transform:scale(.97);} .addtile b{font-size:15px;font-weight:500;line-height:1;} @media (hover:hover) and (pointer:fine){.addtile:hover{background:var(--soft);}} @media (max-width:600px){ .tastebar #taste,.tastebar #imgSec{flex-basis:100%;} .tastebar #imgSec{flex-wrap:wrap;gap:0;} .tastebar .dropzone{flex-basis:100%;} .tastebar .tile{width:38px;height:38px;} } /* ---------- Color Taste: the results ---------- taste.js builds the landing and the four chapters (#tasteLanding, #tasteResults: .t-root, with its own .t-wrap column), moves #spaceSec and #palettes into chapter 4 and retires #tasteSec. Those two sections carry their own heads, so they look the same wherever they sit. */ main>.t-root{width:100%;max-width:none;} .workspace{padding-top:clamp(32px,4vw,56px);} .workspace>section+section{margin-top:clamp(48px,6vw,80px);} /* section heads, as in the lookbook: a hairline, then the heading */ #spaceSec,#palettes{border-top:1px solid var(--ink);padding-top:12px;} #palettes{margin-top:clamp(48px,6vw,80px);} .t-slot>#palettes{margin-top:0;} #spaceSec h2,#tasteSec h2,#palettes h2{font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.05;letter-spacing:-0.035em;} /* your color space */ .spacehead{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-bottom:20px;} #space{position:relative;width:100%;height:420px; /* the 3D view keeps the height it starts with (420px when it starts hidden), so the box matches it */ overflow:hidden;touch-action:none;cursor:grab;background:var(--bg);} #space.flat{touch-action:auto;cursor:default;} #flat{position:absolute;inset:0;width:100%;height:100%;display:none;} #space canvas.gl{position:absolute;inset:0;display:block;} #space .enote{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius-ctl);background:var(--bg); font-size:13px;color:var(--ink-2);white-space:nowrap;pointer-events:none;} #space .ph{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;background:var(--bg);color:var(--ink-2);font-size:15px;text-align:center;} /* the color space shows every image at once: no image stepper, no strip, no hint (since v6) */ #spaceSec .nav,.striprow,#spaceHint{display:none !important;} #thumb{display:none;} #tasteNote{margin:16px auto 0;max-width:44ch;text-align:center;font-size:14px;} .tasteshare{margin:20px 0 0;max-width:none;text-align:center;} /* ---------- Palettes for you ---------- */ #palettes h2{margin:0 0 8px;} #mix{margin:0 0 22px;max-width:72ch;font-size:15px;} .palctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;} .palshuf{display:inline-flex;align-items:center;gap:8px;} /* v16: Shuffle, top right above the palette */ .palshuf[hidden]{display:none;} .palctl .palcount input{width:120px;} #pickBox{margin-top:18px;} .pickrow{display:flex;align-items:center;gap:10px;} input[type=color]{width:46px;height:46px;padding:3px;border:1px solid var(--ink);border-radius:12px;background:var(--bg);cursor:pointer;} #pickHex{width:128px;min-height:46px;padding:10px 16px;border:1px solid #CFCFCF;border-radius:var(--radius-ctl);background:var(--bg);color:var(--ink);font:400 15px/1 var(--mono);text-transform:uppercase;} #pickHex:focus{border-color:var(--ink);} #pickHex[aria-invalid=true]{border-color:#B3261E;} #pickBox .hint{font-size:14px;} .quick{display:flex;flex-wrap:wrap;gap:6px;} .quick button{width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);} .quick button.on{outline:2px solid var(--ink);outline-offset:2px;} #palettes .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;} #shuffle{min-height:36px;padding:8px 16px;font-size:14px;} #keepNote{color:var(--ink-2);} #pals{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px;} @media (min-width:600px){#pals{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (min-width:1000px){#pals{grid-template-columns:repeat(3,minmax(0,1fr));}} /* a palette: its name, the swatch (or mosaic), its kind, keep and export */ .pc{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:14px 14px 12px;border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--ink);text-align:left;cursor:pointer;} .pc .t{order:-1;margin:0 0 10px;font:600 15px/1.3 var(--sans);} .pc .swcard{margin:0;padding:10px 0 6px;border:0;} .pc .mosaic.palmosaic{margin:0;max-width:none;max-height:none;aspect-ratio:3/2;border-width:0;} .pc .s{min-height:34px;padding:14px 92px 0 0;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);} .pc.kept{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);} .pckeep,.pcsave,.pcshuf{position:absolute;bottom:10px;width:36px;height:36px;min-height:0;padding:0;border:1px solid var(--action);border-radius:50%;background:var(--bg);color:var(--action);} .pcsave{right:12px;} .pckeep,.pcshuf{right:54px;} .pckeep[aria-pressed="true"]{background:var(--action);color:var(--action-ink);} /* v15: generated palettes as small pinked swatches, the same edge as The Collection's */ .palsw{display:flex;gap:6px;height:72px;margin:0 0 4px;} .palsw i{flex:1 1 0;min-width:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%; mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/10px 100%;} #palDlg .palsw{height:120px;} .palsw.prop i{min-width:14px;} /* in proportion (Neli, 11 Oct): an accent stays a visible swatch on a phone */ @media (hover:hover) and (pointer:fine){.pc:hover{border-color:var(--ink);}.pckeep[aria-pressed="true"]:hover{background:var(--action-hover);}} /* palette details */ #palDlg{width:min(560px,calc(100% - 24px));} @media (min-width:820px){#palDlg{width:min(780px,calc(100% - 24px));}} #palDlg h3{font-size:clamp(26px,3vw,34px);letter-spacing:-0.035em;margin:0 0 6px;} #palBody:focus{outline:none;} /* it takes the first focus, so the window opens at its top */ #palDlg .why{margin:0 0 16px;font-size:15px;color:var(--ink-2);} .rows{width:100%;border-top:1px solid var(--ink);} .row{display:grid;grid-template-columns:22px 44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.25;} .row .d{width:22px;height:22px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);} .row .pc2{font-weight:600;font-variant-numeric:tabular-nums;} .row .nm small{display:block;font-size:12px;color:var(--ink-2);line-height:1.3;} .row .nm small.mine{color:var(--ink);font-weight:600;} .row .hx{font:400 13px/1 var(--mono);color:var(--ink-2);} .filebtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .filebtns button{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:54px;padding:8px 20px;border-radius:28px;text-align:left;} .filebtns small{font:400 12px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-2);} /* export */ #expDlg .seg{display:flex;} #expDlg .seg button{flex:1 1 auto;white-space:normal;line-height:1.2;padding:6px 12px;font-size:13px;} /* Save palette dialog: "Include the photo" as a switch, on by default (sharing rules, Neli, 11 Oct; was an "Exclude the photo" tick box) */ .expphoto{position:relative;display:flex;align-items:center;gap:10px;margin:4px 0 14px;font-size:15px;cursor:pointer;} .expphoto[hidden]{display:none;} .expphoto input{position:absolute;opacity:0;width:1px;height:1px;margin:0;} .expphoto input:checked+.switch{background:var(--action);} .expphoto input:checked+.switch::after{transform:translateX(18px);} .expphoto input:focus-visible+.switch{outline:2px solid var(--ink);outline-offset:3px;} #expImage{min-height:48px;} /* color codes and text contrast (palette details and Image to Palette) */ .codes{margin-top:32px;padding-top:12px;border-top:1px solid var(--ink);container-type:inline-size;} #palDlg .codes{margin-top:24px;} .codes h3,.codes h4{font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-0.03em;margin:0 0 6px;} .codes h4{margin-top:32px;} .codes .hint{margin:0 0 12px;font-size:14px;} .codes-col,.contrast-col{min-width:0;} .codelist{list-style:none;margin:12px 0 0;padding:0;} .codelist li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);} .codelist .d{width:28px;height:28px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);} .codelist .nm{overflow:hidden;font-size:15px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;} .copy{min-height:32px;padding:6px 12px;border:1px solid transparent;border-radius:var(--radius-ctl);background:transparent;color:var(--ink);font:400 13.5px/1 var(--mono);letter-spacing:0;text-transform:none;white-space:nowrap;} @media (hover:hover) and (pointer:fine){.copy:hover{border-color:var(--line);background:var(--bg);}} .copy.done{border-color:var(--ink);} .codeacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;} .codeacts button{min-height:36px;padding:8px 16px;font-size:14px;} .pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:10px;} .pair{display:flex;flex-direction:column;gap:8px;padding:14px 12px 10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);} .pair .aa{font-size:30px;font-weight:600;line-height:1;letter-spacing:-0.02em;} .pair .tx{font-size:13px;line-height:1.3;} .pair .meta{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:5px 7px;background:var(--bg);color:var(--ink);font-size:12px;} .pair .meta b{font:500 12px/1 var(--mono);} .oneach{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;} .oneach span{display:flex;align-items:center;justify-content:center;width:46px;height:46px;font-size:17px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);} .nopairs{margin:8px 0 0;font-size:15px;color:var(--ink-2);} @container (min-width:520px){ .codes-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:start;} .contrast-col>h4:first-child,.codes-col>h4:first-child{margin-top:0;} .contrast-col .pairs{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));} } /* mixing strips (Neli, 11 Oct): a third column beside Color codes | Text contrast when the panel is 960px or wider; narrower, a full-width row under them (stacked on a phone) */ .mixes{margin-top:8px;min-width:0;} @container (min-width:520px){.codes-in>.mixes{grid-column:1/-1;}} @container (min-width:960px){ .codes-in:has(>.mixes){grid-template-columns:repeat(3,minmax(0,1fr));} .codes-in>.mixes{grid-column:auto;margin-top:0;order:1;} /* Neli, 11 Oct: Color codes | Mixing strips | Text contrast */ .codes-in:has(>.mixes)>.contrast-col{order:2;} .codes-in>.mixes>h4:first-child{margin-top:0;} } .mixpick{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px;} .mixpick button{width:36px;height:36px;min-height:0;padding:0;border:0;border-radius:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);} .mixpick button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:3px;} .mixname{margin:0 0 12px;font-size:15px;} .mixname b{font-weight:600;} .mixname .mono{font:400 13px/1 var(--mono);color:var(--ink-2);} .mixrows{display:grid;gap:14px;} .mixl{margin:0 0 6px;font-size:14px;color:var(--ink-2);} .mixl b{font-weight:600;color:var(--ink);} .mixstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:620px;} .mixstrip button{height:40px;min-height:0;padding:0;border:0;border-radius:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);cursor:copy;} .mixstrip button.base{box-shadow:inset 0 0 0 2px #FFFFFF,0 0 0 1px var(--ink);} @supports not (container-type:inline-size){ @media (min-width:700px){.codes-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:start;}.contrast-col>h4:first-child{margin-top:0;}} } /* ---------- palette pictures (the same shapes as the exported images) ---------- */ /* swatch: pills with a blend circle under each */ .swcard{margin-top:4px;padding:22px 14px 18px;background:var(--bg);} .swrow{--g:7px;display:flex;justify-content:center;gap:var(--g);} .swrow[style*="--k"]>.swcol{flex:0 0 calc((100% - (var(--k) - 1)*var(--g))/var(--k));} .swrow.grp{margin-top:22px;} .swrow+.swrow{margin-top:12px;} .swcol{flex:1 1 0;max-width:110px;min-width:0;display:flex;flex-direction:column;align-items:center;container-type:inline-size;} .swpill{width:100%;aspect-ratio:1/2.3;border-radius:999px;box-shadow:0 8px 16px rgba(0,0,0,.10);} .swcard.nocircle .swpill{aspect-ratio:1/1.5;} .swcircle{width:100%;aspect-ratio:1;border-radius:50%;box-shadow:0 8px 16px rgba(0,0,0,.10);} .swhex{margin-top:10px;font:500 min(13px,18cqw)/1 var(--mono);color:var(--ink-2);white-space:nowrap;} @container (max-width:38px){.swhex{visibility:hidden;}} @media (min-width:600px){.swrow{--g:16px;}.swcard{padding:32px 24px 26px;}} /* mosaic: tiles sized by share, white gaps between them */ .mosaic{position:relative;width:100%;max-width:300px;max-height:300px;margin:0 auto 10px;border:4px solid #fff;border-radius:14px;background:#fff;} .mosaic div{position:absolute;border:3px solid #fff;border-radius:9px;} /* ---------- Image to Palette ---------- */ /* working view: a bar with the heading and the image, the settings column, the palette, then the codes */ #lab{padding-top:clamp(24px,3vw,40px);} #lab:not(.has) #labView,#lab:not(.has) #labOrderBox,#lab:not(.has) .labctl,#lab:not(.has) #labPosRow{display:none !important;} #lab.has #labIntro,#lab.has #labDrop,#lab.has .labcur{display:none;} .tastebar.labbar{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;align-items:end;gap:14px 20px; /* Neli, 11 Oct: the image and Replace image on the left, under the header */width:auto;padding:0 0 16px;margin:0;border-bottom:1px solid var(--ink);} .labbar header{min-width:0;margin:0;padding:0;} #lab .labbar h2#h-lab{font-size:clamp(32px,2.4vw + 18px,52px);line-height:.95;letter-spacing:var(--d-track);} .labbar #labName{margin:8px 0 0;overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap;max-width:none;} .labbar .labbar-imgs{display:flex;align-items:center;gap:14px;min-width:0;} #lab .labbar #labGrid{display:flex;gap:10px;overflow:visible;padding:0;} #lab .labbar #labGrid .tile{width:54px;height:54px;} .labbar .clearrow{flex:0 0 auto;margin:0;max-width:none;} .labside{min-width:0;padding-top:24px;} /* Neli, 11 Oct (alignment): a small label above every control, and every control runs the column's full width, so the controls share one left edge and one right edge */ .labside .labctl{display:block;margin:0;} .labside .countctl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;max-width:none;} .labside .countctl>span{grid-column:1/-1;} .labside .countctl input{width:100%;} .labl{display:block;margin:20px 0 8px;} #lab:not(.has) .labl{display:none !important;} #labView,#labOrder,#labPos{display:flex;} #labView button,#labOrder button,#labPos button{flex:1 1 auto;padding:0 10px;} .labopts{display:block;margin-top:20px;} .labpos{display:block;margin:20px 0 0;} .labopts .labpos-l,.labpos .labpos-l,.labtone .labpos-l{display:block;margin:0 0 8px;} .labpos-l{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;} @media (max-width:599px){.labpos{display:none !important;}} /* phones: no Palette position buttons, the palette goes where it fits (posNow() in app.js; Neli) */ /* Painter tools (Neli, 11 Oct, from the Davies book): See it in Color | Gray. It stays on phones. Gray is on screen only */ .labtone{display:block;margin:20px 0 0;} #labTone{display:flex;} #labTone button{flex:1 1 auto;padding:0 10px;} #labOut{transition:filter .25s cubic-bezier(.23,1,.32,1);} #lab.gray #labOut{filter:grayscale(1);} .labvals{margin-top:32px;padding-top:12px;border-top:1px solid var(--line);} .labvals .kicker{margin:0 0 12px;} .vscale{position:relative;height:28px;margin:0 0 16px;} .vbar{position:absolute;left:0;right:0;top:8px;height:12px;display:flex;box-shadow:0 0 0 1px var(--line);} /* the hairline shows where the white end stops */ .vbar span{flex:1 1 0;} .vscale i{position:absolute;top:4px;width:20px;height:20px;margin-left:-10px;border:2px solid #FFFFFF;border-radius:50%;box-shadow:0 0 0 1px var(--ink);} .vlist{list-style:none;display:grid;margin:0;padding:0;font-size:14px;border-top:1px solid var(--line);} /* one color per row, value at the right, like the codes list */ .vlist li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);} .vlist .d{width:18px;height:18px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);} .vlist b{font-weight:600;font-variant-numeric:tabular-nums;} .vsay{margin:14px 0 0;font-size:15px;max-width:62ch;} @media (prefers-reduced-motion:reduce){#labOut{transition:none;}} .labmain{min-width:0;} #labOut .labbody{min-height:0 !important;} /* no space kept free for taller views, so the codes always sit right under the result */ .labrow{padding:24px 0 0;} .labbody{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;} .labbody>.labstrip,.labbody>.swcard{align-self:stretch;} .labtap{cursor:pointer;} .labtap:focus-visible{outline:2px solid var(--ink);outline-offset:4px;} .labbody>.lab-export{position:relative;align-self:center;margin:32px 0 0;} /* nudged to the image's centre by script */ #labExport{min-height:54px;padding:14px 30px;font-size:16px;} .labside>.lab-export{margin:24px 0 0;} /* Neli, 11 Oct (C): at the bottom of the options, the column's full width */ .labside>.lab-export #labExport{width:100%;justify-content:center;} #lab.has #labCodes{min-width:0;} #labCodes .codes{margin-top:40px;} @media (min-width:1000px){ #lab.has{display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:56px;} #lab.has .labbar{grid-column:1/-1;grid-row:1;} /* Neli, 11 Oct: the bar keeps its phone layout, across the full width */ #lab.has .labside{grid-column:1;grid-row:2;} #lab.has .labmain{grid-column:2;grid-row:2/4;} /* the palette starts 24px under the bar, level with the options */ #lab.has .labbody>:first-child{margin-top:0;} #lab.has #labCodes{grid-column:1/-1;grid-row:4;} #lab.has #labCodes .codes-in{grid-template-columns:360px minmax(0,1fr);column-gap:56px;} /* Neli, 11 Oct: the same columns as the options | the palette */ #lab.has #labCodes .codes-in>.mixes{grid-column:1/-1;margin-top:8px;order:3;} /* the strips go under until there's room for a third column (1200px) */ #lab.has #labCodes .codes-in>.mixes>h4{margin-top:32px;} } @media (min-width:1200px){#lab.has{grid-template-columns:380px minmax(0,1fr);column-gap:72px;}#lab.has #labCodes .codes-in{grid-template-columns:380px minmax(0,1fr);column-gap:72px;} #lab.has #labCodes .codes-in:has(>.mixes){grid-template-columns:380px minmax(0,1fr) minmax(0,1fr);column-gap:72px;} /* the middle column starts where the palette does */ #lab.has #labCodes .codes-in>.mixes{grid-column:auto;margin-top:0;order:1;} #lab.has #labCodes .codes-in:has(>.mixes)>.contrast-col{order:2;} #lab.has #labCodes .codes-in>.mixes>h4{margin-top:0;}} @media (max-width:480px){#labView button,#labOrder button,#labPos button{padding:0 8px;font-size:13px;}} /* parts of the empty lab that never show now (the first view replaces them), kept plain */ .labcur{display:flex;align-items:center;gap:10px;margin:16px 0 4px;} .labcur-name{flex:1 1 auto;min-width:0;overflow:hidden;font-size:14px;color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap;} .labcur-x{width:30px;height:30px;min-height:0;padding:0;border-radius:50%;font-size:18px;} #labGrid:empty{display:none;} /* first view, below the hero: an example of what you get, made from the Matisse by app.js (hidden once an image is in) */ #labExample{display:none;} :root[data-page="palette"] main:has(#lab:not(.has)) #labExample{display:block;} .restoring #labExample{visibility:hidden;} .labex{padding-top:14px;border-top:2px solid var(--ink);} /* the big header on the left, the painting's name on the right; then Palettes | Color codes | Text contrast in one row */ .labex-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 32px;margin-bottom:clamp(24px,3vw,36px);} .labex-h h2{margin:0;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.05;letter-spacing:-0.035em;} .labex-h .kicker{color:var(--ink-2);} .labex-row{padding-top:12px;border-top:1px solid var(--ink);} .labex-pal{min-width:0;} .labex-pal h3{font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-0.03em;margin:0 0 6px;} /* as .codes h3 */ .labex-pal .hint{margin:0 0 12px;font-size:14px;} .labex-row>.codes{margin-top:clamp(40px,5vw,56px);} .labex-row .codeacts{display:none;} @media (min-width:1000px){ .labex-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;align-items:start;} .labex-row>.codes{grid-column:2/4;margin:0;padding:0;border:0;} /* its two columns (40px apart) make the second and third thirds */ } /* the stack: four palette cards, each a small white card with its name; set out and sized by app.js */ .labex-stack{position:relative;max-width:440px;margin-top:20px;} .labex-card{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;min-height:0;padding:16px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);text-align:left;box-shadow:0 10px 24px rgba(0,0,0,.08);transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;cursor:pointer;} .labex-card.front{box-shadow:0 16px 36px rgba(0,0,0,.12);} .labex-card .kicker{flex:0 0 auto;font-size:11px;} .labex-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px;} @media (max-width:379px){.labex-card{padding:12px;}} @media (prefers-reduced-motion:reduce){.labex-card{transition:none;}} .labex-fig{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;} .labex-fig>.swcard{width:100%;margin:0;padding:0;} .labex-fig>.mosaic{margin:0;} .labex-fig>.labstrip{width:100%;margin:0;} .labex-formats{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;max-width:none;margin:clamp(32px,4vw,48px) 0 0;padding-top:12px;border-top:1px solid var(--ink);font-size:16px;} .labex-formats .kicker{margin-right:6px;} .labex-formats span:not(.kicker)+span::before{content:"ยท";margin-right:12px;color:var(--ink-3);} .labex-cta{margin:28px 0 0;} .labex-cta .btn{min-height:54px;padding:14px 30px;font-size:16px;} /* v17: Insights, the photo and Color Insights (beside it when there's room, else under it) */ .labbody>.labins{align-self:stretch;} .labins{display:grid;gap:28px;width:100%;} .labins.side{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,48px);align-items:start;} .labins.side.wide{column-gap:24px;} @media (max-width:599px){.labins.side{column-gap:14px;}.labins.side.wide{column-gap:12px;}} /* phones: half the gap (Neli) */ /* a wide photo shrinks the text beside it, so the gap shrinks too (Neli: about the photo's own side space) */ .labins-photo canvas{display:block;width:100%;height:auto;} .labins:not(.side) .labins-photo{max-width:560px;} .labins:not(.side):has(>.labins-photo){max-width:560px;} /* under the photo, the panel is as wide as the photo (Neli); without the photo it keeps the full width */ .labins-panel{font-size:16px;line-height:1.5;} /* beside the photo the panel is exactly as tall as it: app.js scales its type down to fit, and the space left over goes between the parts, so the title sits level with the photo's top and the bars with its bottom */ .labins.side .labins-panel{display:grid;} /* v17: the same block again under Color codes and Text contrast, after a line */ .labins-after{margin-top:clamp(48px,6vw,80px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--ink);} .labins-after .labins{max-width:980px;} .labins-export{display:flex;justify-content:center;margin-top:32px;} /* centred under the Color Insights block (its width set by script) */ .labins-export button{min-height:54px;padding:14px 30px;font-size:16px;} /* as #labExport */ .labins.side .t-ins{align-content:space-between;} /* the palette with the photo: one white card, the palette sized to the photo */ .withphoto{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%;margin-top:4px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:2px;} .labbody>.withphoto{align-self:flex-start;} /* Neli, 11 Oct (alignment): the card starts at its column's left edge */ .wp-photo{max-width:100%;overflow:hidden;line-height:0;border-radius:6px;} .wp-photo canvas{display:block;width:100%;height:100%;object-fit:cover;} .withphoto>.swcard,.withphoto>.mosaic,.withphoto>.chips2{margin:0;border-radius:6px;} .withphoto>.chips2{padding:0;border:0;} .withphoto>.swcard{padding:14px 0 8px;} .swcard.under .swpill{max-height:136px;} /* under the photo: pills no taller than this (SW_UNDER_MAXH in app.js; Neli) */ /* phones, under the photo: pills and circles a little smaller inside their columns, so there is more space between them (Neli, round 7); the white below the palette as deep as above it, about 20px (round 8) */ .swcard.under.small .swpill{width:82%;} .swcard.under.small .swcircle{width:70%;} .withphoto>.swcard.under.small{padding-bottom:13px;} .withphoto>.labstrip{margin:0;border-radius:6px;} /* mosaic next to a photo: each tile has a 3px white edge, so pull it out by 3px and the outer colors line up with the photo */ .withphoto>.mosaic{width:calc(100% + 6px) !important;max-width:none !important;margin:-3px !important;border:0 !important;} .withphoto .sidearea>.mosaic{margin:-3px !important;border:0 !important;} .withphoto.side{flex-direction:row;align-items:flex-start;} .sidearea{flex:0 0 auto;display:flex;justify-content:center;align-items:flex-start;min-width:0;} .cardside,.mosaicside{flex-direction:row;align-items:stretch;} /* swatch beside a tall photo: horizontal pills, each with its blend circle */ .sidepills{display:flex;flex-direction:column;padding:2px 14px 2px 16px;} .sidepills.fat{container-type:inline-size;} /* two columns, read top to bottom; a shorter right column (7 or 9 colors) sits centred against the left (Neli) */ .sidepills.two{flex-direction:row;column-gap:10px;} .spcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;} .spcol>.sprow{flex:0 0 calc(100% / var(--rows));} .sprow{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:4px;} .spline{display:flex;align-items:center;gap:10px;height:clamp(14px,56%,44px);} .sidepills.fat .spline{height:clamp(14px,min(64%,36cqw),58px);} .sidepills.two.r4 .spline{height:clamp(14px,60%,64px);} /* 7 and 8 colors: fatter pills (Neli) */ /* 6 colors: two rows of three upright pills, each with its blend circle under it (sizes set by app.js) */ .sidesix{display:grid;grid-template-rows:1fr 1fr;width:100%;padding:2px 14px 2px 16px;} .sixrow{display:flex;justify-content:space-between;align-items:center;} .sixcol{display:flex;flex-direction:column;align-items:center;} .sixpill{border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.10);} .sixcirc{flex:0 0 auto;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,.10);} .sppill{flex:1;min-width:0;height:100%;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.10);} .spcircle{flex:0 0 auto;height:100%;aspect-ratio:1;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,.10);} /* strip */ .labstrip{display:flex;height:44px;margin-bottom:8px;overflow:hidden;border-radius:3px;} .labstrip div{height:100%;min-width:4px;} .labstrip.vstrip{flex-direction:column;margin:0;} .labstrip.vstrip div{width:100%;height:auto;min-width:0;min-height:4px;} .stripcard .wp-photo{flex:0 0 auto;} .stripcard>.labstrip{flex:0 0 auto;margin:0;border-radius:6px;} /* paint chips */ .chips2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:2px;} .labbody>.chips2{align-self:stretch;} .chips2 .chip,.chipbox .chip{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border-radius:4px;line-height:1.2;} .chips2 .chip{min-height:66px;padding:8px 10px;} .chip b{margin:1px 0 3px;font-size:13px;font-weight:700;} .chip .cmeta{font-size:10px;opacity:.85;} @media (min-width:600px){.chips2 .chip{min-height:92px;padding:12px 14px;}.chip b{font-size:15px;}.chip .cmeta{font-size:11px;}} .chipbox{display:grid;gap:4px;} .chipbox .chip{min-height:0;padding:6px 8px;line-height:1.15;} .chipbox .chip b{margin:1px 0 0;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap;} .chipphoto.portrait{flex-direction:row;align-items:stretch;} .chipphoto.portrait .chipbox{grid-auto-rows:1fr;} .chipphoto.portrait .chipbox .chip{padding:4px 7px;} .chipphoto.portrait.two .chipbox{grid-template-columns:1fr 1fr;grid-auto-flow:column;} .chipphoto.landscape .chipbox{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;} .chipphoto.landscape .chipbox .chip{height:62px;} @media (min-width:600px){.chipphoto.landscape .chipbox .chip{height:90px;padding:10px 12px;}.chipbox .chip b{font-size:14px;}} /* squares with their hex codes */ /* rows of squares (widths set by script); a shorter last row sits in the middle, so the margins stay even */ .sqgrid{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:6px;max-width:100%;} .sqi{display:flex;flex-direction:column;flex:0 0 auto;min-width:0;} .sqi b{display:block;width:100%;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);} .sqi span{height:22px;overflow:hidden;font-family:var(--mono);font-size:11.5px;line-height:22px;color:var(--ink-2);text-align:center;white-space:nowrap;} .sqphoto.landscape{display:flex;flex-direction:column;align-items:center;} .sqphoto.landscape .sqgrid{margin-top:8px;} .sqphoto.portrait .sidearea{display:flex;align-items:center;justify-content:flex-start;} /* centred: 9 colors fall short of the photo's height (Neli) */ .sqgrid.sqcols{flex-wrap:nowrap;align-items:center;} .sqcol{display:flex;flex-direction:column;gap:6px;} /* ---------- Contact ---------- */ #contact{padding:clamp(32px,5vw,72px) 0 0;} #h-contact{margin:0 0 20px;} #contact>.hint{max-width:46ch;margin:0;font-size:clamp(18px,1.4vw + 12px,21px);line-height:1.5;color:var(--ink-2);} .cform{display:grid;gap:6px;max-width:560px;margin-top:clamp(28px,3vw,40px);padding-top:4px;} .cform label{margin-top:14px;font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;} .cform .opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2);font-size:13px;} .cform input,.cform select,.cform textarea{width:100%;min-height:48px;padding:11px 16px;border:1px solid #CFCFCF;border-radius:12px;background:var(--bg);color:var(--ink);font:400 16px/1.4 var(--sans);} .cform select{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;} .cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--ink);} .cform textarea{min-height:140px;resize:vertical;border-radius:16px;} .cf-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px;} #cfSend{min-height:48px;padding:10px 26px;} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} /* ---------- Guides (the index and each guide link this file; their own