/* Theme Name: IFMX Theme URI: https://ifmx.co Author: Intergalactic FM Description: The IFMX shop. Analogue retro-futurist, printed and packed in The Hague. The design is the one signed off in the clickable prototype, carried over unchanged so the site and the specification cannot drift apart. Version: 1.0.0 Requires at least: 6.4 Requires PHP: 8.1 License: Proprietary Text Domain: ifmx */ /* ------------------------------------------------------------------------- */ /* Everything below is the prototype's stylesheet, carried over as it stands. */ /* It has been measured clean at 1280, 820 and 375, and every colour in it is */ /* checked on every build by the contrast suite in the harness. Change it */ /* there first, then bring it here, or the two will disagree. */ /* ------------------------------------------------------------------------- */ :root{ /* ground and ink */ --paper:#FAF9F7; --paper2:#F4F2EF; --ink:#0D1017; --ink2:#161B24; /* THE DARK FRAME (the bar at the top, the headline, the footer, the notes) is its own colour, and what sits on the inverted controls is its own too, so the page's text colour can be chosen on Layout without the header or a button turning pale (Berk, 27 Sep) */ --frame:#0D1017; --on-ink:#fff; /* THE ACCENTS AS TEXT (--red-ink, --blue-ink, and --ok, --bad, --warn): themselves on the shop's own paper; with colours chosen on Layout, made as much lighter or darker as it takes to read on the page and on a card (theme inc/colours.php) */ --red:#E42312; --amber:#FEC200; --sky:#519BD4; --green:#4BAD32; --crt-red:#FF0000; --crt-cyan:#00FFFF; --crt-yellow:#FFFF00; --grey:#6B7076; --line:#D4D2CE; --land:#C3C0B9; --line2:#E7E5E1; --soft:#F2F1EE; --panel:#FFFFFF; --ok:#3D8F2A; --warn:#A8730B; --bad:#C31E0F; --body:'Archivo',system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --pix:'Press Start 2P','Courier New',monospace; --r:3px; --halftone:radial-gradient(circle at center, rgba(13,16,23,.16) .9px, transparent 1.1px); --scan:repeating-linear-gradient(to bottom, rgba(255,255,255,.055) 0 1px, transparent 1px 3px); } *{box-sizing:border-box} html,body{background:var(--paper)} body{background-image:radial-gradient(circle at center, rgba(13,16,23,.055) .7px, transparent .8px);background-size:20px 20px} body{margin:0;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{margin:0;font-weight:800;font-stretch:118%;text-transform:uppercase;letter-spacing:.012em;line-height:1.06;text-wrap:balance} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--red);outline-offset:2px} .mono,.num,td.n,th.n,.tile .v,.size,.price{font-variant-numeric:tabular-nums} .lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase} /* test-card colour bar, the station's own furniture */ .bars{display:flex;height:4px;width:100%} .bars i{flex:1;display:block} .bars i:nth-child(1){background:var(--sky)}.bars i:nth-child(2){background:var(--green)} .bars i:nth-child(3){background:var(--amber)}.bars i:nth-child(4){background:var(--red)} .bars i:nth-child(5){background:var(--sky)}.bars i:nth-child(6){background:var(--green)} .bars i:nth-child(7){background:var(--amber)} /* ---------- prototype chrome ---------- */ #proto{position:relative;z-index:60;background:#000;color:#CFCFCF;display:flex;gap:2px;align-items:center;flex-wrap:wrap;padding:0 10px;font-family:var(--mono)} #proto .tag{font-size:10px;letter-spacing:.2em;padding-right:10px;color:var(--red-ink,var(--red));text-transform:uppercase} #proto a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 11px;opacity:.55;border-bottom:2px solid transparent} #proto a:hover{opacity:1} #proto a.on{opacity:1;color:#fff;border-bottom-color:var(--red)} #proto .sp{flex:1} #proto .staff{font-size:10px;letter-spacing:.09em;color:#7C7C7C;text-transform:uppercase;padding-right:10px} #proto .reset{background:none;border:1px solid #33363B;color:#9A9A9A;font-family:var(--mono);font-size:10px; letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;margin:5px 0;cursor:pointer;border-radius:var(--r)} #proto .reset:hover{border-color:var(--red);color:#fff} /* ---------- shop ---------- */ .wrap{max-width:1200px;margin:0 auto;padding-inline:20px} .shop-top{position:sticky;top:0;z-index:40;background:var(--frame);color:#F2F1EE; background-image:var(--scan),radial-gradient(120% 220% at 12% 50%, rgba(228,35,18,.22), transparent 60%);} .shop-top .bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap; /* the caption hangs low, so the bar carries a little more ground under the content */ padding-block:13px 17.6px} .brandnav{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;min-width:0} .logo{display:flex;align-items:baseline;gap:12px;line-height:1} .logo img{height:29.7px;width:auto;display:block;align-self:baseline;position:relative; /* Measured: centres the tiles on the cap height of SHOP, not on the line box. The mark sits on the baseline and is then pushed down, so its middle is (baseline + top - height/2). Growing it 10%, from 27px to 29.7px, moves that middle up by 1.35px unless top follows, which is why these two numbers change together: 8.6 + 1.35 = 9.95. Changing the height alone lifts the logo off the wordmark. */ top:9.95px} .logo b{font-size:14px;font-weight:800;font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;color:#EFEDE9;line-height:1} .shop-nav{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;line-height:1} .shop-nav a{padding-bottom:3px;border-bottom:2px solid transparent;color:#CFCDC8} .shop-nav a:hover,.shop-nav a.on{border-bottom-color:var(--red);color:#fff} .headright{display:flex;align-items:center;justify-content:flex-end;gap:12px 18px;flex-wrap:wrap-reverse;margin-left:auto;min-width:0} /* the clock only drops under the buttons when it genuinely runs out of room. .measuring holds everything on one line for a frame so the real width can be read, .stack2 is what fitHeader() switches on when that width will not fit. */ .shop-top.measuring .bar{flex-wrap:nowrap} .shop-top.measuring .brandnav,.shop-top.measuring .shop-nav, .shop-top.measuring .headright,.shop-top.measuring .basket{flex-wrap:nowrap;min-width:max-content} .shop-top.stack2 .headright{flex-direction:column-reverse;flex-wrap:wrap;align-items:flex-end;gap:10px} .timeblock{display:flex;align-items:center;gap:10px;position:relative;top:5.3px} .globe{display:block;width:23.4px;height:23.4px;flex:none;color:#FF2A16; filter:drop-shadow(0 0 1.75px rgba(255,42,22,.56))} .globe circle,.globe ellipse,.globe path,.globe line{fill:none;stroke:currentColor;stroke-width:1.2; vector-effect:non-scaling-stroke} .clock{display:flex;align-items:center;gap:8px;white-space:nowrap;position:relative; /* the caption hangs below the box, so the whole group is what gets centred, then the pair drops onto the centre line of the logo tiles */ margin-bottom:14.4px} .citcap{position:absolute;left:0;right:0;top:calc(100% + 7px);display:block;white-space:nowrap; font-family:var(--mono);font-weight:500;font-size:8.8px;line-height:1;text-transform:uppercase;letter-spacing:0; color:#FF2A16;opacity:.9; text-shadow:0 0 5px rgba(255,42,22,.75),0 0 1.5px rgba(255,42,22,.9); transform:scaleY(.74);transform-origin:top left;overflow:visible} .clock canvas{display:block;height:15px;width:78px} .clock b{font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.16em;color:#7E838B;text-transform:uppercase; padding-left:8px;border-left:1px solid #2A303A;line-height:1} .basket{display:flex;gap:8px;align-items:center;position:relative;top:5.3px; font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase} .basket a{border:1px solid #3A3F49;border-radius:var(--r);padding:7px 12px;color:#E6E4E0} .basket a:hover{border-color:var(--red);color:#fff} .basket a.cart{background:var(--red);border-color:var(--red);color:#fff} #tickerhost{display:none} .ticker{background:var(--red);color:#0B0B0B;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 0;overflow:hidden;white-space:nowrap} .ticker div{display:inline-block;animation:slide 52s linear infinite;will-change:transform} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker div{animation:none}} /* inside the dark frame the red is the shop's own, whatever the page around it */ .shop-top,.masthead,.foot,.cbar,.ticker,.ifmx-told,#toast,.ifmx-working,.maptip,.loginwrap{--red-ink:var(--red)} .masthead{background:var(--frame);color:#EFEDE9;background-image:var(--scan), radial-gradient(120% 200% at 88% 120%, rgba(228,35,18,.24), transparent 55%), radial-gradient(80% 160% at 10% -20%, rgba(81,155,212,.20), transparent 60%)} /* HALF THE ROOM ABOVE AND BELOW, because this is on every page now and a headline that was right as a front page opening is too tall as a header. align-items:center is what keeps INSTANT HAPPINESS on the same line as the tuner and centred against it, so as the box gets shorter the two stay level with each other rather than one riding high. */ .masthead .in{display:flex;align-items:center;justify-content:space-between;gap:24px 30px;padding-block:12px;flex-wrap:wrap} .masthead h1{font-family:var(--pix);font-size:clamp(15px,2.05vw,26px);line-height:1.5;color:var(--head-1,var(--crt-red)); letter-spacing:.01em;font-weight:400;font-stretch:100%; text-shadow:-3px 0 0 rgba(0,255,255,.85), 3px 0 0 rgba(255,0,0,.55), 0 0 18px rgba(255,0,0,.35)} .masthead h1 em{font-style:normal;color:var(--head-2,var(--crt-cyan)); text-shadow:-3px 0 0 rgba(255,0,0,.9), 3px 0 0 rgba(0,255,255,.5), 0 0 18px rgba(0,255,255,.35)} .masthead h1 span{display:inline} .masthead h1 em{margin-left:.6em} .masthead .in>div:not(.scope){min-width:0;max-width:100%} .masthead h1{position:relative;display:inline-block;max-width:100%} .masthead .sub span{display:inline-block} .masthead h1 .gsrc{display:inline-block} .masthead h1.tearing .gsrc{visibility:hidden} .masthead h1 .gsl{position:absolute;left:0;top:0;display:inline-block;white-space:nowrap; will-change:transform;pointer-events:none} .masthead .sub{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9AA0A8;margin-top:10px} /* a tenth thinner, all three numbers together so the box keeps its proportions: it is one size that grows and shrinks between two ends, not three separate settings */ .scope{min-width:288px;flex:1 1 288px;max-width:387px} .scope .frame{position:relative;border:1px solid #2A303A;background:#05070B;overflow:hidden} .scope canvas{width:100%;height:64px;display:block} .scope .cap{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6F757D;margin-top:8px} .tune{display:flex;align-items:center;gap:16px;min-width:0} .tune button{flex:none;width:74px;text-align:center;background:var(--red);border:1px solid var(--red);color:#fff; font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 0;cursor:pointer;line-height:1.4} .tune button.off{background:transparent;border-color:#3A404A;color:#AEB3BA} .tune button.off:hover{border-color:var(--red);color:#fff} .tune select{flex:0 1 172px;width:172px;min-width:92px;background:#0A0D13;border:1px solid #2A303A;color:#C9CDD3;font-family:var(--mono); font-size:10px;letter-spacing:.06em;padding:5px 22px 5px 6px;text-transform:uppercase;line-height:1.4; /* SAFARI DRAWS ITS OWN SELECT unless it is told not to, and ignores the background, the border and the radius while it does. The dark flat box above is what Chrome showed and what the design is; on Safari the same markup came out as the grey rounded macOS control with the double arrow. Turning the native appearance off makes both browsers draw the box we asked for, and the arrow is then ours to draw. The prototype has this same gap: it was only ever looked at in one browser. */ -webkit-appearance:none;appearance:none;border-radius:0; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C9CDD3' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 7px center;background-size:9px 6px; background-color:#0A0D13} .tune select:focus-visible{outline:2px solid var(--red);outline-offset:1px} .onair{flex:1;min-width:0;display:flex;align-items:center;gap:7px;color:#8C9198;height:15px;overflow:hidden;padding-right:7px} .onair>i{width:7px;height:7px;flex:none;background:#4A5058;border-radius:50%;display:inline-block} .airwin{flex:1;min-width:0;overflow:hidden;position:relative;height:13px} .airtxt{display:inline-block;white-space:nowrap;position:absolute;left:0;top:0;line-height:13px;will-change:transform} .airone{display:inline-block;padding-right:30px} .airsep{display:inline-block;width:1px;height:8px;background:var(--red);margin:0 9px; vertical-align:middle;opacity:.9} @keyframes airmarquee{from{transform:translateX(0)}to{transform:translateX(var(--shift,0px))}} @media (prefers-reduced-motion:reduce){.airtxt{animation:none!important}} .onair.live>i{background:var(--red);animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){.onair.live>i{animation:none}} /* festival band */ .fest{display:block;position:relative;background:#000} .fest .win{display:block;height:clamp(132px,17vw,208px);overflow:hidden;position:relative} .fest .win:after{content:"";position:absolute;inset:0;background:var(--scan);opacity:.5;pointer-events:none} .fest img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block} .fest .strap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 12px;color:#DEDCD8;background:var(--strap-bg,var(--frame))} .fest .strap .t{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--strap-ink,#8C9198)} .fest .strap .go{margin-left:auto} .sec{padding-block:30px;border-bottom:1px solid var(--line2)} .sec:last-of-type{border-bottom:0} .sec-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap} .sec-head h2{font-size:23px} .sec-head .note{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);line-height:1;padding:0 0 0 13px;border-left:2px solid var(--red)} .sec-head .more{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);line-height:1;border-bottom:2px solid var(--red);padding-bottom:3px} .sec-head .more:hover{color:var(--red-ink,var(--red))} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(234px,1fr));gap:18px} .card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);display:flex;flex-direction:column;overflow:hidden; transition:box-shadow .28s cubic-bezier(.2,.7,.3,1),border-color .2s} .card:hover{border-color:var(--red); box-shadow:0 0 0 1px var(--red), 0 0 26px -6px rgba(0,255,255,.55), 0 16px 34px -20px rgba(13,16,23,.5)} .card .shot canvas,.card .shot .shotimg{transition:transform .5s cubic-bezier(.2,.7,.3,1)} .card:hover .shot canvas,.card:hover .shot .shotimg{transform:scale(1.05)} .shot:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;z-index:1; background:linear-gradient(90deg,transparent,rgba(228,35,18,.9),transparent)} .card:hover .shot:after{animation:scan .85s cubic-bezier(.3,.6,.3,1)} @keyframes scan{0%{top:0;opacity:0}12%{opacity:.95}88%{opacity:.5}100%{top:100%;opacity:0}} /* A LABEL'S PANEL ON THE BRANDS PAGE, which behaves like a design's card: the whole thing is the way to its shelf, and it answers the mouse the same way so it reads as the same kind of object. The link inside it is the real one and stretches over the panel; the designs on the shelf sit above that, so each still opens itself. */ .brandcard{position:relative;transition:box-shadow .28s cubic-bezier(.2,.7,.3,1),border-color .2s} .brandcard:hover{border-color:var(--red); box-shadow:0 0 0 1px var(--red), 0 0 26px -6px rgba(0,255,255,.55), 0 16px 34px -20px rgba(13,16,23,.5)} .brandcard h3{transition:color .2s} .brandcard:hover h3{color:var(--red-ink,var(--red))} .brandcard .stretch:after{content:"";position:absolute;inset:0;z-index:0} /* only the designs themselves are lifted above the stretched link, never the grid they sit in: lifting the grid put its gaps above the link as well, and a click in the space between two designs then landed on nothing at all */ .brandcard .grid .card,.brandcard p{position:relative;z-index:1} /* the same line that sweeps a design's picture, across the panel */ .brandcard:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;z-index:2; background:linear-gradient(90deg,transparent,rgba(228,35,18,.9),transparent)} .brandcard:hover:before{animation:scan .85s cubic-bezier(.3,.6,.3,1)} @media (prefers-reduced-motion:reduce){.brandcard:hover:before{animation:none}} .card .nm{transition:color .2s} .card:hover .nm{color:var(--red-ink,var(--red))} @media (prefers-reduced-motion:reduce){.card:hover .shot canvas{transform:none}.card:hover .shot:after{animation:none}} .shot{aspect-ratio:4/5;border-bottom:1px solid var(--line2);position:relative;overflow:hidden; background: radial-gradient(115% 78% at 50% 118%, rgba(254,194,0,.26), rgba(254,194,0,0) 62%), radial-gradient(85% 55% at 50% -12%, rgba(81,155,212,.22), rgba(81,155,212,0) 65%), var(--halftone) 0 0/6px 6px, var(--paper2);} .shot canvas,.shot .shotimg{width:100%;height:100%;display:block;position:relative;object-fit:cover} .badges{position:absolute;top:9px;left:9px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2} .badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;padding:3px 7px; border:1px solid var(--ink);background:var(--paper);color:var(--ink)} .badge.red{background:var(--red);border-color:var(--red);color:#fff} .badge.warnb{background:var(--amber);border-color:#C79A17;color:#3A2B00} .badge.seller{background:var(--paper);border-color:var(--red);color:var(--red-ink,var(--red))} .badge.ghost{background:var(--paper);color:var(--blue-ink,#1D6FB2);border-color:var(--blue-ink,#1D6FB2)} .card .info{padding:12px 13px 14px;display:flex;flex-direction:column;gap:4px;flex:1} .card .brandline{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey)} .card .nm{font-size:17px;font-weight:800;font-stretch:116%;text-transform:uppercase;line-height:1.14; /* three lines reserved, so no product name is cut and no card is shorter */ min-height:calc(3 * 1.14em);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .brandcard .nm{font-size:20px;line-height:1.14; /* two lines, as agreed, so brand tiles never disagree on height */ min-height:calc(2 * 1.14em);-webkit-line-clamp:2} .card .row{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:8px} .price{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--red-ink,var(--red))} .strike{color:var(--grey);text-decoration:line-through;font-size:12px;font-weight:400} .swatches{display:flex;gap:4px;margin-left:auto} .sw{width:15px;height:15px;border:1px solid var(--line);display:block;cursor:pointer;transition:transform .12s,box-shadow .12s} .sw:hover{transform:scale(1.22);box-shadow:0 0 0 1px var(--ink)} .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px} .chip{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:7px 12px;cursor:pointer; font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase} .chip:not(.on):hover{border-color:var(--red);color:var(--red-ink,var(--red))} .chip.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)} .sel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:7px 10px; font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase} /* product page */ .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;padding-block:28px} .pdp .gal{display:flex;flex-direction:column;gap:10px} .pdp .big{border:1px solid var(--line);border-radius:var(--r);aspect-ratio:4/5;position:relative;overflow:hidden; background: radial-gradient(115% 78% at 50% 118%, rgba(254,194,0,.26), rgba(254,194,0,0) 62%), radial-gradient(85% 55% at 50% -12%, rgba(81,155,212,.22), rgba(81,155,212,0) 65%), var(--halftone) 0 0/7px 7px, var(--paper2);} .pdp .big canvas{width:100%;height:100%;display:block} .thumbs{display:flex;gap:8px} .thumbs div{width:58px;aspect-ratio:4/5;border:1px solid var(--line);cursor:pointer} .thumbs div.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red)} .pdp h1{font-size:31px;margin-top:6px} .opt-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:20px 0 9px} .sizes{display:flex;gap:6px;flex-wrap:wrap} .size{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);min-width:56px;padding:10px 6px;text-align:center; font-family:var(--mono);font-size:12px;cursor:pointer;position:relative} .size:not(.on):not(.out):hover{border-color:var(--red);color:var(--red-ink,var(--red))} .size.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)} .size.out{color:var(--grey);border-color:var(--line2);cursor:not-allowed;background:var(--soft)} .size.out:after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 47.5%,var(--line) 47.5%,var(--line) 52.5%,transparent 52.5%)} .size small{display:block;font-size:9px;color:var(--warn);letter-spacing:.04em} .size.on small{color:var(--amber)} .colors{display:flex;gap:8px;flex-wrap:wrap} .color{width:32px;height:32px;border:1px solid var(--line);cursor:pointer;padding:0} .color.on{outline:2px solid var(--red);outline-offset:2px} .buy{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap} .btn{border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--on-ink);padding:12px 22px; font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer} /* A LINK DRAWN AS A BUTTON IS THE SAME HEIGHT AS A BUTTON. A link is inline and takes the page's line height, a button is a box with its own, so "Find it" and "Or sign in" side by side came out two pixels apart, and a link's top margin did nothing at all. */ .btn{display:inline-block;line-height:1.3;vertical-align:middle} .btn[hidden]{display:none} .btn:hover{background:#000} .btn.go{background:var(--red);border-color:var(--red);color:#fff} .btn.go:hover{background:#D8221C;border-color:#D8221C} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn.ghost:hover{background:transparent;border-color:var(--red);color:var(--red-ink,var(--red))} .btn.sm{padding:7px 12px;font-size:10.5px;letter-spacing:.11em} .ship{margin-top:18px;border-top:1px solid var(--line2);padding-top:15px;font-size:13.5px;color:var(--grey);display:flex;flex-direction:column;gap:7px} .ship b{color:var(--ink)} .dl{border-top:1px solid var(--line2);margin-top:18px;padding-top:15px;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:13.5px} .dl dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);margin:0;align-self:center} .dl dd{margin:0} /* ---------- the pages the law asks for ---------- */ .pagebody h3{font-size:19px;margin:26px 0 8px} .pagebody h3:first-child{margin-top:0} .pagebody p{margin:0 0 12px;max-width:68ch;font-size:14.5px;line-height:1.6} .pagebody .ptlist{margin:0 0 15px;padding-left:18px;display:grid;gap:6px;max-width:68ch;font-size:14.5px} .pagebody .ptlist li{line-height:1.55} #cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:250;display:none;padding:0 20px} #cookiebar.on{display:block} .cbar{max-width:1200px;margin:0 auto 14px;background:var(--frame);border:1px solid var(--red);border-radius:var(--r); padding:14px 16px;display:flex;gap:18px;align-items:center;flex-wrap:wrap} .cbar p{margin:0;font-size:13px;line-height:1.5;color:#C7C5C1;max-width:62ch} .cbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto} /* both answers are the same button, because a refusal that is harder to press is not a refusal */ .cbtns .btn{background:var(--panel);color:var(--ink);border-color:var(--panel)} .cbtns .btn:hover{background:#fff;border-color:#fff} .cmore{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase; color:#C7C5C1;border-bottom:1px solid var(--red);padding-bottom:2px} .cmore:hover{color:#fff} @media (max-width:640px){#cookiebar{padding:0}.cbar{margin:0;border-left:0;border-right:0;border-radius:0} .cbtns{margin-left:0;width:100%}.cbtns .btn{flex:1}} /* on a phone the two answers stack, each the whole width and still the same button: side by side at 111 pixels their words broke over three lines */ @media (max-width:480px){.cbtns .btn{flex:1 1 100%}} .cmt{border:1px solid var(--line2);border-left:2px solid var(--line);padding:12px 14px;background:var(--panel);margin-top:8px} .cmt .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);margin-bottom:6px} /* generic blocks */ .panelbox{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:17px} .panelbox>h3{margin-bottom:14px;font-size:17px} .two{display:grid;grid-template-columns:1fr 1fr;gap:18px} .three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .stack{display:flex;flex-direction:column;gap:18px} .muted{color:var(--grey)} .small{font-size:13px} .tiny{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey)} .upload{border:1px dashed var(--line);border-radius:var(--r);padding:32px 20px;text-align:center; background:radial-gradient(110% 80% at 50% 120%, rgba(254,194,0,.20), transparent 62%),var(--soft)} .upload .big{font-size:19px;font-weight:800;font-stretch:116%;text-transform:uppercase} .upload.over{border-style:solid;border-color:var(--ink)} /* a delivery way and its price (basket): one line in a row, the price at the right edge when stacked */ .wl{min-width:0}.wp{white-space:nowrap}.wd{font-style:normal} /* !important against the phone rule that centres every row of choices (a long :has() selector further down outweighs any plain one): here the price belongs at the edge */ .seg.stacked button[data-bhow]{display:flex;justify-content:space-between !important;text-align:left !important;align-items:baseline;gap:8px;padding-left:10px;padding-right:10px;letter-spacing:.06em} .seg.stacked button[data-bhow] .wd{display:none}.seg.stacked button[data-bhow] .wp{flex:none} /* the regions the shop sells to (Settings): two to a row, the same width, one where a name does not fit */ .seg.regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} /* footer */ .foot{background:var(--frame);color:#DEDCD8;background-image:var(--scan),radial-gradient(90% 180% at 80% 0%, rgba(81,155,212,.20), transparent 60%)} .foot .fhead{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block:30px 24px} .foot .quote{margin-left:auto;font-size:clamp(19px,2.4vw,27px);font-weight:800;font-stretch:118%;text-transform:uppercase;color:var(--head-1,#fff);white-space:nowrap} .foot .quote em{font-style:normal;color:var(--head-2,var(--red))} .foot .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-bottom:30px;align-items:start} .foot .col{display:flex;flex-direction:column;gap:9px;min-width:0} .foot .hd{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7C828A; padding-bottom:9px;border-bottom:1px solid #262C36;margin-bottom:3px} .foot .col a,.foot .col span{font-size:13.5px;color:#C7C5C1;line-height:1.35} .foot .col a:hover{color:var(--red-ink,var(--red))} /* the mail list, asked for at the bottom of every page */ .foot .newsrow{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;border-top:1px solid #262C36;padding-block:18px 22px} .foot .newsrow .hd{display:block;margin-bottom:6px} .foot .newsrow form{display:flex;gap:8px;flex:1 1 320px;max-width:470px;margin-left:auto;position:relative} .foot .newsrow .inp{flex:1 1 auto;min-width:0;max-width:none;height:auto} .foot .newsrow .btn{flex:0 0 auto;white-space:nowrap} @media (max-width:620px){.foot .newsrow form{margin-left:0;max-width:none}} .foot .mark{display:flex;align-items:center;gap:11px;margin-bottom:4px} .foot .mark img{height:30px;width:auto;display:block} .foot .mark b{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9AA0A8} .foot p{margin:0;color:#8C9198;font-size:13px;max-width:34ch;line-height:1.5} .foot .mark{margin-bottom:0} .foot .base{border-top:1px solid #262C36;padding-block:13px;display:flex;gap:18px;flex-wrap:wrap; font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6E747C} @media (max-width:860px){.foot .cols{grid-template-columns:1fr 1fr;gap:24px}} @media (max-width:520px){.foot .cols{grid-template-columns:1fr}} /* ---------- admin ---------- */ .admin{display:grid;grid-template-columns:216px 1fr;align-content:start; min-height:calc(100vh - var(--chrome,38px)); background:linear-gradient(to right,var(--ink) 0 216px,transparent 216px)} .rail{background:var(--frame);color:#E9E7E3;padding:14px 0 24px;position:sticky;top:0; height:calc(100vh - var(--chrome,38px));overflow:auto;align-self:start;background-image:var(--scan)} .rail .who{padding:0 16px 13px;border-bottom:1px solid #262C36;margin-bottom:8px;text-align:center} .rail .who .n{font-size:19px;font-weight:800;font-stretch:116%;text-transform:uppercase; line-height:1.08;overflow-wrap:anywhere;word-break:normal;margin-bottom:3px} /* THE SIZE IS MEASURED, NOT COUNTED. ifmx_name_size() sets a starting size from the length so the first paint is close and a browser with no JavaScript still gets a name that fits; the fitter in the rail then measures what the text actually came out and scales it to the width it has. Counting characters cannot be right on its own: fourteen W's are half as wide again as fourteen I's, which is how an address that was counted as short ended up broken across two lines with its last letter on its own. */ .rail .who .n.oneline{white-space:nowrap} .rail .who .r{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--red-ink,var(--red));text-transform:uppercase} .rail a{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:13.5px;color:#C9C7C3;border-left:2px solid transparent} .rail a:hover{color:#fff;background:#1A1F28} .rail a.on{color:#fff;border-left-color:var(--red);background:#1A1F28;font-weight:700} .rail .grp{padding:14px 16px 5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#6E747C} .rail a .cnt{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--red);color:#fff;padding:1px 6px} .main{padding:24px 26px 64px;min-width:0} .ah{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px} .ah h1{font-size:25px} .ah .sub{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);line-height:1;padding:0 0 0 13px;border-left:2px solid var(--red)} .ah .act{margin-left:auto;display:flex;gap:8px;align-items:center} /* a screen's own head is one height with or without buttons: 26.5px alone, 29.6 with a small button, 34.5 with the till's, so everything under it moved a few pixels from screen to screen. 35 holds the tallest single row. */ .ah.pagehead{min-height:35px} .hint{color:var(--grey);font-size:13.5px;margin:0 0 20px;max-width:78ch} /* an admin screen's explanation runs the width of the screen it explains. Berk: "the text is cut in half towards left. it should spread nicely ... horizontally." At 78 letters it sat in the left half of a wide page with the right half empty. */ .main .hint{max-width:none} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px;margin-bottom:22px} .tiles.n5{grid-template-columns:repeat(5,minmax(0,1fr))} @media (max-width:1180px){.tiles.n5{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:620px){.tiles.n5{grid-template-columns:minmax(0,1fr)}} .tiles.n6{grid-template-columns:repeat(3,minmax(0,1fr))} @media (min-width:1400px){.tiles.n6{grid-template-columns:repeat(6,minmax(0,1fr))}} @media (max-width:620px){.tiles.n6{grid-template-columns:minmax(0,1fr)}} .tiles.n8{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:900px){.tiles.n8{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:420px){.tiles.n8{grid-template-columns:minmax(0,1fr)}} .tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;position:relative;overflow:hidden} .tile:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--line)} .tile .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey)} .tile .v{font-size:27px;font-weight:800;font-stretch:112%;line-height:1.16;margin-top:3px} /* a figure is one word: breaking 222,45 across two lines reads as two numbers */ .tile .v{white-space:nowrap} @media (max-width:1180px){.tile .v{font-size:23px}} .tile .d{font-family:var(--mono);font-size:10.5px;color:var(--grey);letter-spacing:.04em} /* a tile that opens its own page looks like one you can press */ /* NEW ORDERS POP UP in the corner of any admin page (assets/ifmx-pulse.js) */ .pulses{position:fixed;right:16px;bottom:16px;z-index:9999;display:grid;gap:10px;width:min(360px,calc(100vw - 32px))} .pulse{position:relative;display:grid;gap:6px;background:var(--panel);color:var(--ink);border:1px solid var(--ink);border-left:4px solid var(--red); border-radius:var(--r);padding:12px 38px 12px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:pulsein .25s ease-out} .pulse b{font-size:15px} .pulse span{font-size:13px;color:var(--grey)} .pulse .btn{justify-self:start} .pulse .x{position:absolute;top:6px;right:8px;background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--grey)} .pulse .ask{background:none;border:0;padding:0;text-align:left;font-size:11px;text-decoration:underline;cursor:pointer;color:var(--grey)} @keyframes pulsein{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){.pulse{animation:none}} a.tile{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:border-color .12s} a.tile:hover,a.tile:focus-visible{border-color:var(--red)} a.tile:hover:before,a.tile:focus-visible:before{background:var(--red)} /* the Open on a box that opens something: on a line of its own at the foot of the box, in the same place on every box, so it never pushes the name or the figure out of line with the boxes beside it (a row of boxes is one height, the grid stretches them) */ a.tile{padding-bottom:40px} .tile .go{position:absolute;left:14px;bottom:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; border:1px solid var(--line);border-radius:var(--r);padding:3px 8px;color:var(--ink);background:var(--panel);line-height:1.3} a.tile:hover .go,a.tile:focus-visible .go{border-color:var(--red);color:var(--red-ink,var(--red))} /* two buttons side by side, one width each, the words centred */ .btnpair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px} .btnpair .btn{width:100%;text-align:center} .up{color:var(--ok)} .down{color:var(--bad)} table{width:100%;border-collapse:collapse;font-size:13.5px} .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)} th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey); padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:500;background:var(--soft)} td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle} tr:last-child td{border-bottom:0} td.n,th.n{text-align:right} tbody tr:hover{background:var(--soft)} .pill{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:2px 7px; border:1px solid currentColor;display:inline-block} [hidden]{display:none!important} .tickcol{width:34px;text-align:center;padding-left:10px;padding-right:0} .tickbox{accent-color:var(--red);width:15px;height:15px;cursor:pointer;vertical-align:middle;margin:0} .selnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red-ink,var(--red))} .ticklist{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);max-width:440px; max-height:268px;overflow-y:auto;margin-top:8px;padding:0 10px 8px} .ticklist .check{padding:5px 0;cursor:pointer} .tickhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0 8px; border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--panel);margin-bottom:3px} .noticebox{font-family:var(--mono);font-size:12px;line-height:1.65;white-space:pre-wrap;background:var(--soft); border:1px solid var(--line2);border-radius:var(--r);padding:14px;margin:0;overflow-x:auto} .p-new{color:var(--red-ink,var(--red))} .p-ok{color:var(--ok)} .p-warn{color:var(--warn)} .p-bad{color:var(--bad)} .p-mut{color:var(--grey)} .meter{height:7px;background:var(--soft);position:relative;min-width:60px;overflow:hidden;display:block;border:1px solid var(--line2)} .meter i{position:absolute;inset:0 auto 0 0;background:var(--red);display:block} .formrow{display:grid;grid-template-columns:196px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line2)} .formrow>*{min-width:0} /* on a phone the label cannot keep a column of its own, or the form runs off the screen */ @media (max-width:620px){.formrow{grid-template-columns:1fr;gap:7px}} .formrow>label{font-weight:700;font-size:13.5px} .formrow .help{display:block;font-weight:400;color:var(--grey);font-size:12px;margin-top:3px} .inp{width:100%;max-width:440px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:9px 10px} .inp.s{max-width:180px} /* A DROPDOWN IS THE SAME BOX AS THE FIELD BESIDE IT. Safari draws its own grey rounded select, shorter than an .inp and ignoring its border, padding and background, so on a row of fields the dropdowns sat lower and smaller than the boxes next to them (Berk, 27 Sep, the gift card form). Its own drawing is turned off and the arrow is drawn here. */ /* and the date box is the same height as the rest: its own calendar parts made it 2px taller */ input.inp[type=date],select.inp{height:calc(1.5em + 20px)} /* A ROW THAT OPENS A DOCUMENT looks it: the hand, the row lit under it, and the number underlined as a link (Invoices, assets/ifmx-stay.js) */ tr[data-href]{cursor:pointer} tr[data-href]:hover > td{background:var(--line2)} a.doclink{border-bottom:1px solid currentColor} a.doclink:hover{color:var(--red-ink,var(--red))} /* the rate on a Brands row: the box and its per cent sign on one line, Save under them */ /* THE RATE ON A BRANDS ROW: the box and Save one width, one under the other, the per cent sign beside the box, and "house" on the house's row in the same place as the boxes (Berk, 27 Sep: "align these, I hate to find unaligned things") */ .rateform{display:inline-grid;grid-template-columns:64px auto;column-gap:6px;row-gap:6px;align-items:center;vertical-align:middle} .rateform .inp.qty{grid-column:1;grid-row:1;width:64px;max-width:64px;margin:0} .rateform .pct{grid-column:2;grid-row:1} .rateform .btn{grid-column:1;grid-row:2;width:100%;padding-left:0;padding-right:0;text-align:center} .rateform .ratehouse{grid-column:1;grid-row:1;text-align:center} .rateform .ratehouse + .pct{visibility:hidden} select.inp{-webkit-appearance:none;appearance:none;padding-right:30px;line-height:inherit;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px} /* the back in stock form: the size and the address share a row and fill it, so their edges meet the column's at every width, and the button sits under them */ #notifybox form.buy .inp.s{flex:1 1 140px;max-width:none} .seg{display:flex;flex-wrap:wrap;gap:6px} /* :not(.btn) so a real button dropped into a segmented row keeps its own colours. Without it this rule outranks .btn on specificity, takes the white panel background, and leaves .btn's white text on top of it. That shipped once. */ .seg button:not(.btn){border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:8px 12px; font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer} .seg button:not(.on):not(.btn):hover{border-color:var(--red);color:var(--red-ink,var(--red))} .seg button.on:not(.btn){background:var(--ink);color:var(--on-ink);border-color:var(--ink)} /* The prototype's segmented rows are buttons because it re-renders itself. Here a span of time is a page of its own, so the same row is links, and a link in a seg has to look like the button beside it or the row comes apart. */ .seg a:not(.btn){border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:8px 12px; font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer; color:var(--ink);text-decoration:none;line-height:1.1;display:inline-block} .seg a:not(.on):not(.btn):hover{border-color:var(--red);color:var(--red-ink,var(--red))} .seg a.on:not(.btn){background:var(--ink);color:var(--on-ink);border-color:var(--ink)} .check{display:flex;align-items:center;gap:8px;font-size:13.5px} .check input{accent-color:var(--red);width:15px;height:15px} .inp.qty{width:56px;max-width:56px;padding:5px 6px;text-align:right;font-family:var(--mono);font-size:12px} .bad{color:var(--bad);font-size:12px;margin-top:6px} .inp.wrong,.wrong .inp{border-color:var(--bad)} .loginwrap{min-height:calc(100vh - var(--chrome,38px));display:flex;align-items:center;justify-content:center;padding:28px 18px; background:var(--frame);background-image:var(--scan),radial-gradient(120% 160% at 20% 0%,rgba(228,35,18,.22),transparent 60%)} .loginbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;max-width:420px;width:100%} .logintop{display:flex;align-items:baseline;gap:11px} .logintop img{height:24px;width:auto;display:block;position:relative;top:7px} .logintop b{font-size:12px;font-weight:800;font-stretch:118%;letter-spacing:.18em;text-transform:uppercase} .loginnote{margin-top:22px;padding-top:16px;border-top:1px solid var(--line2)} .qtybox{display:inline-flex;align-items:center;gap:8px} /* :not(.btn) for the same reason as .seg: a real button dropped in here would lose its background to this rule and keep its own text colour. */ .qtybox button:not(.btn){width:24px;height:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel); cursor:pointer;font-size:14px;line-height:1;padding:0} .qtybox button:hover{border-color:var(--red);color:var(--red-ink,var(--red))} /* THE COUNT AND THE PRICE KEEP THEIR PLACE. Berk, 27 Sep: the quantity moved a little to the left at three. Nothing was wrong with it: the price beside it went from €78,00 to €117,00, one figure wider, the table gave that column more room and took it from the rest. The two columns have a width of their own now, and figures are all one width. */ .qtybox b{min-width:2ch;text-align:center;font-variant-numeric:tabular-nums} .btable{font-variant-numeric:tabular-nums} @media (min-width:701px){ .btable th:nth-child(4),.btable td:nth-child(4){width:8.5em;white-space:nowrap} .btable th:nth-child(5),.btable td:nth-child(5){width:7.5em;white-space:nowrap} } .phot{position:relative;display:inline-block;line-height:0} .phot img{width:46px;height:58px;object-fit:cover;border:1px solid var(--line);display:block} .phot button{position:absolute;top:-6px;right:-6px;width:17px;height:17px;border-radius:50%;border:1px solid var(--line); background:var(--panel);color:var(--bad);font-size:12px;line-height:1;cursor:pointer;padding:0} .phot button:hover{background:var(--bad);color:#fff;border-color:var(--bad)} .mapwrap{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px;position:relative; background-image:var(--halftone);background-size:7px 7px} #map,#cmap{width:100%;display:block;position:relative} .maptip{position:absolute;pointer-events:none;background:var(--frame);color:#fff;font-family:var(--mono);font-size:11px; padding:6px 9px;display:none;z-index:5;white-space:nowrap;letter-spacing:.04em} .legend{display:flex;gap:18px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-top:11px;flex-wrap:wrap;align-items:center} .legend i{width:8px;height:8px;background:var(--red);border-radius:50%;display:inline-block;margin-right:7px} .flow{display:flex;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow-x:auto;overflow-y:hidden} .step{flex:1 0 126px;padding:12px 14px;border-right:1px solid var(--line2)} .step:last-child{border-right:0} .step.done{background:var(--soft)} .step.now{background:var(--ink);color:var(--on-ink)} .step .s{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)} .step.now .s{color:var(--amber)} .step .t{font-size:16px;font-weight:800;font-stretch:114%;text-transform:uppercase} .split{display:grid;grid-template-columns:1.35fr .65fr;gap:22px;align-items:start} /* the side column came down to 260px at 1024 and its tables ran off the page (Analytics' Countries, 27 Sep): below 1200 the two stack */ @media (max-width:1200px){.split{grid-template-columns:minmax(0,1fr)}} /* a mail being written: the boxes, and the mail at the width it is read at on a computer */ .mlgo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center} .mlgo .inp{max-width:none;width:100%;min-width:0} .mlgo .btn{justify-self:stretch;text-align:center} .split.mailsplit{grid-template-columns:minmax(0,1fr) minmax(0,660px)} @media (max-width:1200px){.split.mailsplit{grid-template-columns:minmax(0,1fr)}} .slipsheet{display:flex;flex-direction:column;gap:18px} .slip{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px} .sliphead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:14px} .sliphead img{height:24px;width:auto;vertical-align:middle} .sliphead b{font-size:12px;font-weight:800;font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;margin-left:8px} .slipno{text-align:right} .slipno .no{font-family:var(--mono);font-size:19px;font-weight:600} /* THE BARCODE, drawn on the server (ifmx-shop/inc/barcode.php) at 0.4mm a module with its own white quiet zone, and the same code in letters under it. Sized by the SVG itself, so nothing here squeezes the bars below what a phone can read; it only gives way on a screen narrower than the code. */ .slipbarbox{display:inline-block;text-align:center;margin-top:8px;max-width:100%} .slipbar{display:block;margin-left:auto;margin-top:6px;max-width:100%;height:auto} .slipbarbox .slipbar{margin:0 auto} .slipcode{font-family:var(--mono);font-size:11px;letter-spacing:.24em;margin-top:2px} .slipcols{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:14px 0 6px} .addr{margin:5px 0 0;font-size:14px;line-height:1.5} .sliptable{margin-top:8px} .sliptable th{background:transparent;border-bottom:1px solid var(--ink)} .sliptable td{border-bottom:1px solid var(--line2)} /* THE TICK BOX. Berk: "what is this half done square, and where is the tick?" The box was the table cell itself, made a block with a border, and the table's own row rule (.sliptable td, then tr:last-child td) took its bottom side away. The square is its own span now, inside an ordinary cell, so no table rule can reach any of its four sides. */ .sliptable td.tick{width:26px;padding-right:0;vertical-align:middle} .tickbox-print{display:block;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:0;background:#fff} /* a custom print on a slip: the artwork, where it goes and what they asked for (customBrief) */ .custbrief{display:flex;gap:10px;align-items:flex-start;margin-top:7px;padding:8px;border:1px solid var(--line);background:var(--soft)} .custbrief img{width:46px;height:46px;object-fit:contain;background:#fff;border:1px solid var(--line2);flex:none} .custbrief .pill{flex:none} .custbrief .tiny{text-transform:none;letter-spacing:0;line-height:1.45} .slipnote{margin:12px 0 0;font-size:13px;border-left:2px solid var(--red);padding-left:10px} .slipfoot{margin:16px 0 0;font-size:11.5px;color:var(--grey);line-height:1.5;border-top:1px solid var(--line2);padding-top:10px} @media print{ #proto,#tickerhost,#toast,#ask,#cookiebar,.rail,.hint,.noprint,.ah .act{display:none!important} body{background:#fff} .admin{display:block;min-height:0} .main{padding:0} .ah{margin:0 0 10px} .slipsheet{gap:0} .slip{border:0;border-radius:0;padding:0 0 18px;page-break-after:always;break-after:page} .slip:last-child{page-break-after:auto;break-after:auto} } /* PRINTING THE PACKING SLIPS, AND NOTHING ELSE. Berk: "we dont need to print the entire website, we need to print the selected shipping slips." The rules above hide the parts of the page they know by name, so anything they did not name still reached the paper. These name nothing. On a page that holds the slip sheet, every element that is not the sheet, not inside it and not one of its ancestors is left off the paper, and each ancestor is flattened to a plain block with no padding, so the first slip starts at the top of page one. That holds whatever the admin shell, the shop's own front end or another plugin puts on the page. One slip to a page, black on white. Scoped to .packslips, so an invoice or a statement prints as it did. A browser too old for :has() drops the three rules that use it and keeps the rest: the ones above, the screen's .noprint wrapper, and the two plain rules below, which take off everything outside the admin frame and everything after the sheet. */ @media print{ body.ifmx-admin > :not(.admin){display:none!important} .packslips ~ *{display:none!important} html:has(.packslips),body:has(.packslips){background:#fff!important;margin:0!important;padding:0!important; height:auto!important;min-height:0!important;overflow:visible!important} body:has(.packslips) :not(.packslips):not(.packslips *):not(:has(.packslips)){display:none!important} body:has(.packslips) :has(.packslips){display:block!important;position:static!important;float:none!important; margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important; width:auto!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important; overflow:visible!important;transform:none!important} .packslips{display:block!important;margin:0!important} /* AS MANY TO A PAGE AS FIT. Berk: "when we have 3 slips, all 3 should fit the same page". A slip is never split over two pages, and a dashed line between two slips is where the scissors go. */ .packslips .slip{background:#fff;border:0;border-radius:0;padding:0 0 7mm;margin:0 0 7mm;box-shadow:none; border-bottom:1px dashed #000!important; break-inside:avoid;page-break-inside:avoid;break-after:auto;page-break-after:auto} .packslips .slip:last-child{border-bottom:0!important;margin-bottom:0;padding-bottom:0} .packslips .sliphead{padding-bottom:8px} .packslips .slipcols{padding:8px 0 2px} .packslips .slipfoot{margin-top:8px;padding-top:6px;font-size:9.5px} .packslips .slip,.packslips .slip *{color:#000!important} .packslips .sliphead,.packslips .sliptable th{border-bottom-color:#000} .packslips .sliptable td{border-bottom-color:#8C8C8C} .packslips .slipnote{border-left-color:#000} .packslips .slipfoot{border-top-color:#8C8C8C} .packslips .tickbox-print{border:1.5px solid #000} } /* on a phone the code and its barcode go under the shop's name rather than beside it */ @media (max-width:520px){ .packslips .sliphead{flex-wrap:wrap} .packslips .slipno{margin-left:auto} } #ask{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(13,16,23,.55);padding:20px} #ask.on{display:flex} .askbox{background:var(--panel);border:1px solid var(--ink);border-radius:var(--r);max-width:440px;width:100%;padding:20px} .askbox h3{font-size:19px;margin-bottom:10px} .askbox p{margin:0 0 16px;color:var(--grey);font-size:13.5px;line-height:1.5} .askrow{display:flex;gap:8px;justify-content:flex-end} .toastundo{background:none;border:1px solid var(--red);color:#fff;font-family:var(--mono);font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;margin-left:12px;cursor:pointer;border-radius:var(--r)} .toastundo:hover{background:var(--red)} #toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);background:var(--frame);color:#fff; padding:11px 18px;border:1px solid var(--red);border-radius:var(--r);font-family:var(--mono);font-size:11.5px; letter-spacing:.09em;text-transform:uppercase;z-index:200;opacity:0;pointer-events:none; transition:opacity .16s ease,transform .16s ease;max-width:min(92vw,520px);text-align:center} #toast.on{opacity:1;transform:translateX(-50%) translateY(0)} #toast.act{pointer-events:auto} #toast.act .toastundo{display:block;margin:10px auto 0;padding:7px 12px;font-size:11px} .note{border-left:2px solid var(--red);padding:10px 0 10px 13px;font-size:13.5px;color:var(--grey)} .note b{color:var(--ink)} /* grid and flex children must be allowed to shrink, or wide tables push the page sideways */ .split>*,.two>*,.three>*,.stack>*,.admin>*,.pdp>*,.ah,.sec-head{min-width:0} .panelbox{min-width:0} .panelbox table{width:100%} .panelbox th{white-space:normal} .seg button{max-width:100%} /* harmless for .btn too: it sets no colour */ .dl dd,.dl dt{min-width:0;overflow-wrap:anywhere} .tile .v{overflow-wrap:anywhere} @media (max-width:760px){ .shop-top .bar{display:grid;grid-template-columns:1fr auto;gap:12px 14px;align-items:center} .brandnav{grid-column:1;flex-direction:column;align-items:flex-start;gap:14px} /* FLEX-WRAP MUST BE RESET WITH THE DIRECTION. The wide rule sets flex-wrap:wrap-reverse on a ROW, which is right there. This rule turns the box into a column and that wrap-reverse carries over, and in a column wrap-reverse reverses the CROSS axis, so align-items:flex-end stops meaning right and starts meaning left. The clock then sat 46px short of the basket above it, and only below 760px, which is why it looked like the clock drifted when the window narrowed. The .stack2 rule further up already sets wrap; this one had been left out. */ .shop-top.stack2 .headright,.headright{grid-column:2;justify-self:end;margin-left:0; flex-direction:column-reverse;flex-wrap:wrap;align-items:flex-end;gap:12px} .timeblock{top:0} .basket{top:0} .shop-nav{gap:10px 14px} } @media (max-width:1050px){ .two{grid-template-columns:1fr} .formrow{grid-template-columns:168px 1fr} } @media (max-width:470px){ .brandnav{gap:18px} .shop-nav{gap:7px 14px} .shop-top.stack2 .headright,.headright{gap:14px} } /* measured at 375px: the lockup is 188px and the left track is 126px, so it has to be allowed to give way. Nothing in the header may be wider than the track it sits in. */ @media (max-width:430px){ .shop-top .bar{gap:10px} .brandnav,.logo,.shop-nav{min-width:0;max-width:100%} .logo{gap:8px;flex-wrap:wrap} .logo img{height:24.2px;top:7.9px;max-width:100%} /* the same 10%, and the same 1.1px follow-up */ .logo b{font-size:12px;letter-spacing:.12em} .shop-nav{font-size:10.5px;letter-spacing:.07em} .basket a{font-size:10.5px} } @media (max-width:900px){ .pdp,.two,.three,.split{grid-template-columns:1fr} .admin{grid-template-columns:1fr} .rail{position:static;height:auto;max-height:none;display:flex;gap:2px;overflow-x:auto;padding:8px;align-items:center} .admin{min-height:0;background:none} .rail .who,.rail .grp{display:none} .rail a{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:8px 11px;font-size:12.5px} .rail a.on{border-left:0;border-bottom-color:var(--red)} .formrow{grid-template-columns:1fr;gap:6px} .main{padding:18px 15px 52px} } /* ------------------------------------------------------------------ the analytics maps */ /* Straight from the prototype. The canvas sizes itself in JS, so all the CSS does is give it a frame, a halftone ground and somewhere for the hover label to sit. */ .mapwrap{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px;position:relative; background-image:var(--halftone);background-size:7px 7px} #map,#cmap{width:100%;display:block;position:relative} .maptip{position:absolute;pointer-events:none;background:var(--frame);color:#fff;font-family:var(--mono);font-size:11px; padding:6px 9px;display:none;z-index:5;white-space:nowrap;letter-spacing:.04em} .legend{display:flex;gap:18px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-top:11px;flex-wrap:wrap;align-items:center} .legend i{width:8px;height:8px;background:var(--red);border-radius:50%;display:inline-block;margin-right:7px} /* --------------------------------------------------------- pointing at the banner crop */ /* The focus picker. The picture is the control: a mark on it says where the crop is centred, and the crop beside it moves as the mark does. */ .focusrow{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start} .focuspick{position:relative;display:block;width:420px;max-width:100%;cursor:crosshair; border:1px solid var(--line);background:#000;line-height:0;touch-action:none} .focuspick:focus-visible{outline:2px solid var(--red);outline-offset:2px} .focuspick-img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none} .focuspick-dot{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%; border:2px solid #fff;box-shadow:0 0 0 2px var(--red),0 1px 5px rgba(0,0,0,.55);pointer-events:none} .focuspick-dot::after{content:"";position:absolute;inset:7px;background:var(--red);border-radius:50%} .focuspick-read{font-family:var(--mono)} /* the admin runs on the same stylesheet as the shop, so the body carries a name the page can be recognised by: print rules and anything else that has to tell the two apart hang off this rather than off guessing from what is inside */ body.ifmx-admin{background:var(--paper)} /* NO GAP UNDER THE FRAME (Berk, 28 Sep: "there should be never a gap in any pages"). The admin has nothing above it, so it is the whole window and the rail reaches the bottom edge; it was sized "window less 38px" for a top bar only the prototype had. dvh follows Safari's toolbar. */ body.ifmx-admin{--chrome:0px} @media (min-width:901px){ @supports (height:100dvh){ body.ifmx-admin .admin{min-height:100dvh} body.ifmx-admin .rail{height:100dvh} } } /* and a short page on the shop keeps its footer at the bottom of the window, not above a strip */ body:not(.ifmx-admin){min-height:100vh;display:flex;flex-direction:column} body:not(.ifmx-admin)>#app{flex:1 0 auto} @media print{ body.ifmx-admin .rail,body.ifmx-admin .noprint{display:none} } /* THE PREVIEW HAS TO BE THE SAME SHAPE AS THE BANNER. Berk: "the banner adjust shows image 4 but we are getting image 5 on the website." Of course it did. The preview was a fixed 420x76 box, about 5.5:1, and the real banner is the page's full width at clamp(132px,17vw,208px), which is about 6.9:1 on a computer and about 2.9:1 on a phone. object-fit:cover keeps the middle of a DIFFERENT rectangle at a different ratio, so the same two numbers genuinely produce two different pictures. A preview that is not the right shape is not a preview, it is a second opinion. These ratios are the real rule solved at the widths that matter: 1440 / 208 for a computer, 390 / 132 for a phone. tools/bannercheck.php reads both the rule and these numbers and fails the build if they ever drift apart. */ .focuscrop{display:block;max-width:100%;overflow:hidden;border:1px solid var(--line);background:#000; aspect-ratio:1440/208} .focuscrop.phone{aspect-ratio:390/132} .focuscrop img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:720px){ .focuspick{width:100%} } /* ---- picking the colours a design comes in ---- There used to be one box of comma separated words here, which is why adding a colour was impossible from the chart, from the existing ones, or at all. */ .colorchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:34px} .colorchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line); border-radius:var(--r);padding:4px 6px 4px 5px;background:var(--panel);font-size:13px} .colorchip i{width:18px;height:18px;border:1px solid var(--line);display:block;flex:none} .colorchip b{font-weight:600} .colorchip .x{border:0;background:none;cursor:pointer;font-size:16px;line-height:1; padding:0 2px;color:var(--grey)} .colorchip .x:hover{color:var(--bad)} .colorchart{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} .colorchart .swatch{width:44px;height:44px;border:1px solid var(--line);cursor:pointer; padding:0;position:relative;border-radius:var(--r)} .colorchart .swatch span{position:absolute;left:0;right:0;bottom:-17px;font-size:9.5px; text-align:center;color:var(--grey);letter-spacing:.04em;white-space:nowrap} .colorchart .swatch.on{outline:2px solid var(--red);outline-offset:2px} .colorchart{margin-bottom:20px} /* ---- a design, and what staff may do to it, as ONE cell ---- The buttons used to be printed after the card and loose in the grid, so the grid counted them as the next item and gave them a column of their own: they appeared BESIDE the design, stretched down its whole height. The wrapper is the grid item now, the card fills it, and the buttons sit under the card at exactly its width. Only somebody who may change the design is shown any of this, and because it lives inside the cell, a customer's grid and an owner's grid have the same columns and the same card widths. An owner's cell is simply taller. */ .cardcell{display:flex;flex-direction:column;min-width:0} .cardcell .card{flex:1 1 auto} .cardedit{margin-top:8px} /* three in a row, sharing the card's width exactly: the first flush with its left edge, the last flush with its right */ .ownerbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:stretch} .ownerbtns .btn{width:100%;text-align:center;white-space:nowrap;padding-inline:6px} .ownerbtns form{display:contents} .ownerbtns .btn.danger{color:var(--bad);border-color:var(--bad)} .ownerbtns .btn.danger:hover{background:var(--bad);color:#fff} /* on a narrow card three across stops being readable, so they go two then one */ @media (max-width:420px){ .ownerbtns{grid-template-columns:repeat(2,1fr)} .ownerbtns .btn:last-child{grid-column:1 / -1} } /* ---- buttons at the end of a table row ---- Loose in the cell they wrap on top of each other on a narrow column. */ /* A ROW'S BUTTONS, one under the other, all as wide as the widest, the words centred, and the stack against the right edge of its cell on every row (Brands) */ .rowbtncell{text-align:right} .rowbtns{display:inline-grid;grid-auto-rows:auto;gap:6px;vertical-align:middle;text-align:center} .rowbtns .btn{width:100%;text-align:center;white-space:nowrap} /* ---- the pictures already on a design, each saying which colour it is filed under ---- Four could land on Black without anybody being shown that they had. */ .photogrid{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} .photoone{width:96px} .photoone img{width:96px;height:96px;object-fit:cover;border:1px solid var(--line);display:block} .photoone .sel{width:96px;margin-top:4px;font-size:11px;padding:3px 4px} /* a photo whose colour is coming off the design goes with it, and looks like it */ .photoone.gone img{opacity:.35;filter:grayscale(1)} .photoone.gone .sel{border-color:var(--bad);color:var(--bad)} /* ---- the product editor's add rows: a box and its button on one line, as tall as each other; on a phone the box and the button each take the whole line, the same width ---- */ .seg.newrow{flex-wrap:nowrap;align-items:stretch;gap:8px} .seg.newrow > label{flex:0 1 220px;min-width:0;display:flex} .seg.newrow > label > .inp{width:100%;max-width:none} .seg.newrow.short > label{flex-basis:84px} .seg.newrow > .btn{flex:0 0 auto;white-space:nowrap} .seg.newrow > .colourpick{min-height:0} /* the three measurements, each with its name above its box */ .seg.dims{gap:10px} .seg.dims > label{flex:0 0 104px} .seg.dims .inp{width:100%;max-width:none} /* the two buttons at the foot of the form are a pair: equal boxes */ .seg.formbtns{margin-top:2px} @media (max-width:700px){ .seg.newrow{flex-wrap:wrap} .seg.newrow > label,.seg.newrow > .btn{flex:1 1 100%} .seg.newrow > .btn{white-space:normal;text-align:center} .seg.newrow > .colourpick{flex:0 0 54px;min-height:38px} .seg.newrow > .colourpick + label{flex:1 1 calc(100% - 62px) !important} .seg.dims > label{flex:1 1 30% !important;min-width:0} } /* ---- a running order you can drag ---- Names only: it is an order, and an order reads faster as a list than a wall of cards. */ .dragsort{list-style:none;margin:0;padding:0;display:grid;gap:5px} .dragsort li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--panel); border:1px solid var(--line);border-radius:var(--r);cursor:grab} .dragsort li.dragging{opacity:.4;cursor:grabbing} .dragsort li.over{border-color:var(--red)} .dragsort .grip{color:var(--grey);letter-spacing:-2px;font-size:13px;line-height:1;user-select:none} .dragsort .tiny{margin-left:auto;color:var(--grey)} .dragsort li:focus-visible{outline:2px solid var(--red);outline-offset:1px} .shelfsort li{cursor:grab;padding:6px 10px} .shelfsort img{width:36px;height:36px;object-fit:cover;border:1px solid var(--line);background:#fff;flex:0 0 auto} /* the colour scale beside the name box */ .colourpick{width:54px;height:auto;min-height:38px;align-self:stretch;padding:2px;cursor:pointer;flex:0 0 auto} /* THE GAP BETWEEN TWO COLOURS BELONGS TO THEM. Each square's hover area reaches halfway across the gap on either side, so the mouse is always over one colour or the other on its way along the row and the picture never flicks back to the default in between. The gap looks exactly as it did. (ifmx-front.js puts the picture back only when the mouse leaves the whole row.) */ .swatches .sw,.colors .color{position:relative} .swatches .sw::after{content:"";position:absolute;top:-5px;bottom:-5px;left:-3px;right:-3px} .colors .color::after{content:"";position:absolute;top:-5px;bottom:-5px;left:-5px;right:-5px} .thumbs[data-allshots]{flex-wrap:wrap} .thumbs div:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* BUTTONS THAT BELONG TOGETHER ARE THE SAME SIZE. Berk: "align the button boxes to be the same size... we dont wanna have different size button boxes looking ugly." A column of actions in a table row is one block: every button as wide as the widest, one per line, the words on one line and centred. A form inside it (Mark paid) lays out as if it were not there, so its button lines up with the rest. */ .btnstack{display:inline-grid;grid-auto-rows:auto;gap:4px;min-width:150px} .btnstack > .btn,.btnstack > form > .btn,.btnstack > form > button{width:100%;text-align:center;white-space:nowrap;justify-content:center} .btnstack > form{display:contents} /* REVENUE AND PAYOUTS: twelve columns in one table. With every heading and button on one line it was 1263px wide, past the edge of a laptop screen, and the buttons hid behind a sideways scroll (Berk, 26 Sep: "the text doesnt fit the boxes"). Headings, the cycle buttons, the pills and the row's buttons now fold onto a second line only when the screen needs it, so it fits from about 1110px wide. */ .paytbl th,.paytbl td{padding-left:7px;padding-right:7px} .paytbl th{white-space:normal;vertical-align:bottom} .paytbl .seg.cyclepick{display:flex;flex-wrap:wrap;width:auto;max-width:190px} .paytbl .seg.cyclepick > button{flex:1 1 64px} .paytbl .seg.cyclepick .cyclesay{flex:1 1 100%;white-space:normal} .paytbl .pill{white-space:normal;text-align:center} .paytbl .btnstack{display:grid;min-width:0;width:auto} .paytbl .btnstack > .btn,.paytbl .btnstack > form > button{white-space:normal;line-height:1.25} /* EVERY COLUMN STARTS ON ONE LINE (Berk: "these dont align nicely"). Centred, each cell sat in the middle of its own height, so a name, a two line "Bank transfer", the cycle buttons and a number all began at different heights. On the baseline, the first line of each, the buttons' labels included, is one line across the row. A pill is as wide as its words, not the column. */ .paytbl td{vertical-align:baseline} .paytbl td .pill{width:max-content} /* THE PRODUCTS LIST (screens/products.php) has eleven columns, and at 1280 wide they did not fit: its presses sat half outside the box, cut off at "E" and "HI". A little less air between the columns, and the presses one block as wide as the longest of them in any row, so Edit and Hide are the same size in every row and line up down the list. */ .plist th,.plist td{padding-left:7px;padding-right:7px} .plist th:first-child,.plist td:first-child{padding-left:12px} .plist th:last-child,.plist td:last-child{padding-right:12px} .plist td:last-child .btnstack{display:grid;min-width:0;width:100%} .plist td:last-child{width:1%} /* as narrow as its longest press, never stretched to fill */ /* flags sit side by side and wrap between pills, never inside one */ .pflags{display:flex;flex-wrap:wrap;gap:4px} /* a name wraps between its words and never inside one: on a phone "T-shirt" broke at its hyphen and "6-Panel" came out as "6-" over "Panel" */ .plist .word{white-space:nowrap} /* a colour square in a list is a reading, not a control: it does not grow under the mouse */ .pswatch .sw{cursor:default} .pswatch .sw:hover{transform:none;box-shadow:none} /* A PAIR OF CHOICES WITH ITS LINE UNDERNEATH (a label's pay cycle): as wide as the line, each choice half of it, so the buttons' edges meet the words' edges. */ .seg.cyclepick{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;flex-wrap:nowrap;width:max-content} /* width:max-content: the table cell is narrower than the sentence, and a grid left to the cell stopped at the buttons while the words ran on past them */ .seg.cyclepick > button{width:100%;text-align:center} .seg.cyclepick .cyclesay{grid-column:1 / -1;white-space:nowrap;font-size:inherit;letter-spacing:inherit;margin-top:2px} /* the categories as a menu on a phone, as chips on anything wider */ .filters .chipmenu{display:none} @media (max-width:700px){ .filters .chip,.filters .chipgap{display:none} .filters .chipmenu{display:block;flex:1 1 100%;max-width:none} .filters select.sel{flex:1 1 45%;max-width:none} } /* a tile whose value is a name wraps instead of being cut off at the tile's edge */ .tile .v.words{white-space:normal;font-size:19px;line-height:1.2;overflow-wrap:anywhere} /* THE PRODUCT PAGE PHOTO FILLS ITS FRAME, as the cards' photos already do. Only the drawn artwork had a size here, so a square photo sat at the top of the 4:5 frame with a strip of empty halftone under it, and a tall one ran off the bottom. */ .pdp .big .shotimg{width:100%;height:100%;display:block;object-fit:cover} /* a quantity button that cannot do anything looks it */ .qtybox button:disabled{opacity:.35;cursor:not-allowed} /* a button that cannot be pressed yet looks it (the mail screens: no address, no sign-in app) */ .btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed} .qtybox button:disabled:hover{border-color:var(--line);color:inherit} /* A BUTTON OR A STATUS IN A TABLE KEEPS ITS WORDS ON ONE LINE. In a narrow cell they broke mid-phrase ("Track box" with its "1" underneath, "Waiting / for / payment" on three lines); the table sits in a sideways-scrolling box, so a wider cell costs nothing. */ td .btn,td .pill{white-space:nowrap} /* CHOICES IN EQUAL BOXES. Berk: "we dont wanna have different size botton boxes looking ugly". A row of choices used to wrap wherever the words ran out, so the product editor's "Printed already, on the shelf" missed its partner's line by three pixels and the two sat one above the other at different widths, and on a phone the three ways of delivery came out as three boxes of three different widths. A PAIR is two equal boxes, as wide as the longer of the two, at any width. ON A PHONE every row of choices is a grid of two equal columns; an odd one out at the end takes the whole row, so nothing sits alone in half a line. A row with anything else in it (a field, a sentence) keeps its own layout. */ .seg:not(.cyclepick):has(> button:nth-of-type(2)):not(:has(> button:nth-of-type(3))):not(:has(> :is(a,select,textarea,label,span,div,input:not([type=hidden])))), .seg:not(.cyclepick):has(> a:nth-of-type(2)):not(:has(> a:nth-of-type(3))):not(:has(> :is(button,select,textarea,label,span,div,input:not([type=hidden])))){ display:inline-grid;grid-template-columns:1fr 1fr;max-width:100%;vertical-align:top} .seg:not(.cyclepick):has(> button:nth-of-type(2)):not(:has(> button:nth-of-type(3))):not(:has(> :is(a,select,textarea,label,span,div,input:not([type=hidden])))) > button, .seg:not(.cyclepick):has(> a:nth-of-type(2)):not(:has(> a:nth-of-type(3))):not(:has(> :is(button,select,textarea,label,span,div,input:not([type=hidden])))) > a{ white-space:normal;text-align:center;justify-content:center} @media (max-width:700px){ .seg:not(.cyclepick):has(> :is(button,a):nth-of-type(2)):not(:has(> :is(select,textarea,label,span,div,input:not([type=hidden])))){ display:grid;grid-template-columns:1fr 1fr;width:100%} .seg:not(.cyclepick):has(> :is(button,a):nth-of-type(2)):not(:has(> :is(select,textarea,label,span,div,input:not([type=hidden])))) > :is(button,a){ white-space:normal;text-align:center;justify-content:center;width:100%;max-width:none} .seg:not(.cyclepick):has(> :is(button,a):nth-of-type(2)):not(:has(> :is(select,textarea,label,span,div,input:not([type=hidden])))) > :is(button,a):nth-of-type(odd):last-of-type{ grid-column:1 / -1} } /* FIVE CARDS, FIVE ACROSS. The worst sellers are five by definition, and a grid that fits four put the fifth alone on a row of its own. Where there is room, five go on one line. */ @media (min-width:1180px){ .grid:has(> .card:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))} } /* the banner previews on Layout fit a phone's screen instead of running off its side */ .focusrow > div{min-width:0;max-width:100%} /* a short row of choices whose labels do not all fit side by side: one per line, full width, all the same size (ifmx-front.js decides, by measuring) */ .seg.stacked{display:grid !important;grid-template-columns:minmax(0,1fr) !important;width:100%} .seg.stacked > :is(button,a){width:100%;max-width:none;text-align:center;justify-content:center;grid-column:auto !important} /* a button right after a field is as tall as the field: "Use it" beside the code box was a 30 pixel button floating in the middle of a 43 pixel box */ :is(.inp,select.sel) + button.btn{align-self:stretch} /* A FORM IN THE NARROW COLUMN PUTS ITS LABELS ABOVE ITS FIELDS. My account's side column is a third of the page, and a 196 pixel label column beside each field left the field 124 pixels: the name read "Marieke de" and the postcode pushed the town off its line. */ .split > :last-child .formrow{grid-template-columns:minmax(0,1fr);gap:6px} /* ON A PHONE, A ROW OF FIELDS SHARES THE WIDTH. "Which night" and "Paid how" at the Merch Stand wrapped at their own widths, one long and one short, one above the other. */ @media (max-width:700px){ .seg > label{flex:1 1 140px;min-width:0} .seg > label > :is(.inp,select,input:not([type=checkbox]):not([type=radio])){width:100%;max-width:none} } /* an order number, an invoice number or a date and time is one thing: it does not break in the middle ("IFMX-" on one line and "2451" on the next) */ td.mono,td .mono{white-space:nowrap} /* THE BASKET ON A PHONE: each line is a small block, not a table row. As a table it ran off the right edge, so the price and "Take it out" were only there after a sideways scroll. Name and price on top, colour and size under the name, the count and the remove button at the bottom. */ @media (max-width:700px){ .btable thead{display:none} .btable,.btable tbody{display:block} .btable tr{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"name name price" "col size size" "qty qty out"; gap:6px 12px;padding:12px 14px;border-bottom:1px solid var(--line2);align-items:center} .btable tr:last-child{border-bottom:0} .btable td{display:block;padding:0;border:0} .btable td:nth-child(1){grid-area:name} .btable td:nth-child(2){grid-area:col} .btable td:nth-child(3){grid-area:size} .btable td:nth-child(4){grid-area:qty;text-align:left} .btable td:nth-child(5){grid-area:price;text-align:right;align-self:start;font-weight:600} .btable td:nth-child(6){grid-area:out;text-align:right} } /* the colour chart's names have room under their squares: rows 8 pixels apart put each name against the square below it, and the red ring of the chosen one cut through it */ .colorchart{row-gap:26px;padding-bottom:20px} .colorchart .swatch span{bottom:-20px} /* a screen's own buttons at its top keep their words whole and move to a second line instead: on a phone "Save as a draft" came out as three lines inside one button */ .ah .act{flex-wrap:wrap} .ah .act .btn{white-space:nowrap} /* and on a phone each takes the whole line, so a stack of them is one clean column rather than buttons of four different widths (Orders, Read the labels, Print run, Stock count) */ @media (max-width:520px){ .ah .act{width:100%;margin-left:0} .ah .act > form{display:contents} .ah .act > .btn,.ah .act > form > .btn,.ah .act > button{flex:1 1 100%;text-align:center;justify-content:center} } /* on a phone every field in a row of fields takes the whole line (the fields carry their own desktop widths inline, hence the weight) */ @media (max-width:700px){ .seg > label{flex:1 1 100% !important;width:auto !important;max-width:none !important} } @media (max-width:700px){ /* and the button after them lines up with them */ .seg:has(> label) > .btn{flex:1 1 100%;text-align:center} } /* "Pick a size first": the sizes that can still be picked are outlined until one is */ .sizes.need .size:not(.out):not([disabled]){border-color:var(--red);box-shadow:0 0 0 1px var(--red)} /* THREE SLIPS TO AN A4 PAGE. Printed, each slip is made compact: a lower barcode (still well above what a phone needs to read it), smaller type, and less air between the parts. About 80 mm a slip, so three fit with a dashed line between them. */ @media print{ .packslips .slip{padding:0 0 4mm;margin:0 0 4mm} .packslips .sliphead{padding-bottom:5px;gap:12px} .packslips .sliphead img{height:16px} .packslips .sliphead b{font-size:10px} .packslips .sliphead .tiny{font-size:8px;margin-top:3px!important} .packslips .slipno .no{font-size:14px;line-height:1.1} .packslips .slipbarbox{margin-top:3px} .packslips .slipbar{height:9mm!important;width:auto} .packslips .slipcode{font-size:8px;margin-top:1px} .packslips .slipcols{gap:12px;padding:5px 0 0} .packslips .slipcols .tiny{font-size:8px} .packslips .addr{font-size:11px;line-height:1.3;margin:2px 0 0} .packslips .sliptable{margin-top:4px} .packslips .sliptable th{font-size:8px;padding:3px 6px} .packslips .sliptable td{font-size:11px;padding:3px 6px} .packslips .sliptable td .tiny{font-size:8px} .packslips .tickbox-print{width:14px;height:14px} .packslips .slipnote{font-size:10px;margin-top:5px} .packslips .slipfoot{font-size:8px;line-height:1.3;margin-top:5px;padding-top:4px} } /* a size never entered for the colour on show is not there at all (not "sold out") */ .sizes [data-size][hidden]{display:none!important} /* the printed page itself, outside any @media block, where every browser reads it */ @page{size:A4;margin:10mm} /* the admin says it is working when a press takes more than a moment (assets/ifmx-stay.js) */ .ifmx-working{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:250;background:var(--frame);color:#fff; border:1px solid var(--red);border-radius:var(--r);padding:10px 16px;font-family:var(--mono);font-size:11px; letter-spacing:.1em;text-transform:uppercase;max-width:min(92vw,520px);text-align:center} .ifmx-working[hidden]{display:none} /* a photo just uploaded, with its Take it off under it, the width of the photo */ .photoone .btn{display:block;width:96px;margin-top:4px;padding:5px 2px;font-size:9.5px;letter-spacing:.06em;text-align:center} /* the gap between two photos belongs to the photos on either side of it, half each, so moving across the row never leaves one photo without arriving on the next */ .thumbs[data-allshots] [data-shot]{position:relative} .thumbs[data-allshots] [data-shot]::after{content:"";position:absolute;inset:-5px -5px} /* THE DASHBOARD'S PERIOD (ifmx-shop inc/dashrange.php): the buttons, the two date boxes of a custom period, and the two calendars that pop up under them (assets/ifmx-stay.js) */ .dashpick{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px} /* one row with the period buttons, every box and button the buttons' 30px */ .dashcustom{align-items:center} .dashcustom[hidden]{display:none} .dashcustom > label{display:flex;align-items:center;gap:6px} .dashcustom input.inp[type=date]{width:150px;height:30px;padding:0 8px;font-size:13px} .dashcustom > .btn{height:30px} .dashcal{position:absolute;top:calc(100% + 8px);left:0;z-index:30;display:grid;grid-template-columns:repeat(2,248px);gap:22px; padding:16px 18px 18px;background:var(--panel);border:1px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--ink)} .dashmonthhead{display:flex;flex-direction:column;gap:6px;margin-bottom:8px} .dashmonthnav{display:grid;grid-template-columns:32px 1fr 32px;align-items:center;text-align:center} .dashmonthnav button{height:32px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);font:inherit;font-size:18px;line-height:1;cursor:pointer;color:var(--ink)} .dashmonthnav button:hover:not(:disabled){border-color:var(--red);color:var(--red-ink,var(--red))} .dashmonthnav button:disabled{opacity:.35;cursor:default} .dashdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .dashdow{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);text-align:center;padding:4px 0} .dashdays button{height:32px;border:1px solid transparent;border-radius:var(--r);background:none;font:inherit;font-size:13px; font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;padding:0} .dashdays button:hover:not(:disabled){border-color:var(--red);color:var(--red-ink,var(--red))} .dashdays button:focus-visible{outline:2px solid var(--red);outline-offset:1px} .dashdays button:disabled{color:var(--line);cursor:default} .dashdays button.now{border-color:var(--line)} .dashdays button.in{background:var(--soft)} .dashdays button.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)} @media (max-width:620px){ .dashcal{grid-template-columns:1fr;right:0;gap:18px} .dashcustom:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%} .dashcustom > label{flex-direction:column;align-items:stretch;gap:3px} .dashcustom input.inp[type=date]{width:100%;min-width:0} .dashcustom > .btn{grid-column:1 / -1} } /* THE LASER MAP (ifmx-shop assets/ifmx-laser.js). Berk, 27 Sep: "make that world map more laser, 3D and 80s", then: no sun, no perspective, red borders, the squares green at 20%, then: "this yellow line is too much", and a country opened on the map itself. The world face on as a vector screen's red lines of light over a green grid, and a thin beam up out of every country people came from: cyan for visits, a soft yellow where something sold. One world, the same in either theme: a screen is dark. */ .laser{--lline:#FF2E4D;--llinea:rgba(255,46,77,.35);--lcyan:var(--crt-cyan);--lcyana:rgba(0,255,255,.22); --lsold:#F2D24B;--lsolda:rgba(242,210,75,.22);--lsoldc:#FF8A1F;--lgrid:rgba(57,255,20,.2);--ltext:#E9E6FF; position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r);min-height:180px;background-color:#05040c; background-image:linear-gradient(var(--lgrid) 1px,transparent 1px),linear-gradient(90deg,var(--lgrid) 1px,transparent 1px); background-size:var(--cell,40px) var(--cell,40px);background-position:center center} .laser::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none; background:var(--scan),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55))} .laserstage{position:absolute;inset:0} .laserfloor{position:absolute;left:50%;top:var(--ftop,60px);width:var(--fw,800px);height:var(--fh,392px);transform:translateX(-50%)} .laserland{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .laserland path{vector-effect:non-scaling-stroke;stroke-linejoin:round;transition:stroke-opacity .4s,fill-opacity .4s} .laserglow path{fill:none;stroke:var(--lline);stroke-opacity:.16;stroke-width:5} .laserglow path.seen{stroke-opacity:.34} /* a country something sold in is orange over the world (Berk, 27 Sep: "make it orange or darker red if we have sales there"); yellow is kept for the sold beams inside it */ .laserglow path.sold{stroke:var(--lsoldc);stroke-opacity:.3} .laserline path{fill:var(--lline);fill-opacity:0;stroke:var(--lline);stroke-opacity:.7;stroke-width:1;pointer-events:all;cursor:pointer} .laserline path.seen{stroke-opacity:1} .laserline path.sold{fill:var(--lsoldc);stroke:var(--lsoldc);stroke-opacity:.95} .laserline path:hover{stroke:#fff;fill:#fff;stroke-opacity:1;fill-opacity:.24!important} /* A COUNTRY OPENED: its own outline bright red, the rest of the world dimmed behind it */ .laser.zoomed .laserline path{stroke-opacity:.2;fill-opacity:0!important} .laser.zoomed .laserglow path{stroke-opacity:.05} .laser.zoomed .laserline path.on{stroke:var(--lline);stroke-opacity:1;stroke-width:1.6;fill:var(--lline);fill-opacity:.07!important} .laser.zoomed .laserglow path.on{stroke:var(--lline);stroke-opacity:.42;stroke-width:8} .laser.zoomed .laserline path:not(.on):hover{stroke:#fff;stroke-opacity:.7;fill:#fff;fill-opacity:.08!important} .laserbeam,.laserring,.lasertown,.laserhit{position:absolute;display:block;pointer-events:none} .laserbeam{--c:var(--lcyan);--ca:var(--lcyana);width:2px;transform:translate(-50%,-100%);border-radius:1px;opacity:.85; background:linear-gradient(to top,var(--c) 0%,var(--ca) 55%,transparent 100%);box-shadow:0 0 3px var(--ca); animation:laserrise .9s cubic-bezier(.2,.8,.2,1) both} .laserbeam::after{content:'';position:absolute;left:50%;top:-2px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%; background:var(--c);box-shadow:0 0 4px var(--c)} .laserbeam.sold,.laserring.sold{--c:var(--lsold);--ca:var(--lsolda)} /* a town with both stands its two beams side by side, visits left, sold right */ .laserbeam.seen.pair{transform:translate(calc(-50% - 2.5px),-100%)} .laserbeam.sold.pair{transform:translate(calc(-50% + 2.5px),-100%)} @keyframes laserrise{from{height:0}} .laserring{--c:var(--lcyan);width:calc(var(--fw,800px) * .012);aspect-ratio:1;border:1px solid var(--c);border-radius:50%; box-shadow:0 0 5px var(--ca);animation:laserpulse 2.8s ease-out infinite} .laser.zoomed .laserring{width:calc(var(--fw,800px) * .016)} /* the place under the pointer: its hover target, and its name, which answer the same */ .laserhit{width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:auto;z-index:2} @keyframes laserpulse{0%{transform:translate(-50%,-50%) scale(.35);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}} /* a town's name beside its beam, when a country is open; a name that would land on another is left out (lasermap tidy) */ .lasertown{transform:translate(9px,-50%);white-space:nowrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em; color:var(--ltext);text-shadow:0 0 6px #05040c,0 0 2px #05040c;opacity:0;transition:opacity .25s} .lasertown.shown{opacity:1;pointer-events:auto} .lasertown.hover{opacity:1;z-index:3} .lasertown b{margin-left:6px;font-weight:600} .lasertown b.v{color:#8AF7FF} .lasertown b.o{color:var(--lsold)} .laserhud{position:absolute;left:14px;top:13px;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:calc(100% - 140px); font-family:var(--pix);font-size:8px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--ltext)} .laserhud span{display:flex;align-items:center;gap:7px} /* the key says what the view shows: over the world a visited country is lit red, once one is open its towns stand as cyan beams */ .laserhud i{display:inline-block;width:9px;height:9px;box-sizing:border-box;border:1px solid var(--lline);background:rgba(255,46,77,.4);box-shadow:0 0 6px var(--llinea)} .laser.zoomed .laserhud i{border:0;background:var(--lcyan);box-shadow:0 0 6px var(--lcyan)} .laserhud i.sold{border:0;background:var(--lsoldc);box-shadow:0 0 6px var(--lsoldc)} .laser.zoomed .laserhud i.sold{border:0;background:var(--lsold);box-shadow:0 0 6px var(--lsold)} .laseropenname{color:#fff} .laseropenname:empty{display:none} .laserback{position:absolute;right:12px;top:9px;z-index:4;height:26px;padding:0 12px;border:1px solid var(--lline);border-radius:var(--r); background:rgba(5,4,12,.85);color:var(--ltext);font-family:var(--pix);font-size:8px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer; box-shadow:0 0 8px var(--llinea)} .laserback:hover{background:var(--lline);color:#fff} .laserback:focus-visible{outline:2px solid #fff;outline-offset:2px} .laserback[hidden]{display:none} .lasertip{position:absolute;z-index:5;display:none;pointer-events:none;max-width:240px;padding:8px 10px;background:rgba(5,4,12,.92); border:1px solid var(--lline);color:var(--ltext);font-family:var(--mono);font-size:11px;line-height:1.55;box-shadow:0 0 14px var(--llinea)} .lasertip b{color:#fff;font-family:var(--pix);font-size:9px;letter-spacing:.06em;text-transform:uppercase} .laseropen{display:block;margin-top:3px;color:var(--lcyan)} /* the country's panel under the map while its figures are fetched */ #ancountry{transition:opacity .2s} #ancountry.loading{opacity:.45} @media (prefers-reduced-motion:reduce){.laserbeam,.laserring{animation:none}.laserring{transform:translate(-50%,-50%);opacity:.7}.lasertown{transition:none}} /* TEN OF EACH ON ANALYTICS, the rest on a page of its own (ifmx-shop inc/analytics.php ifmx_an_see_all): "See all 23" under a list that was cut */ .seeall{margin:10px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase} .seeall a{color:var(--red-ink,var(--red));text-decoration:none;border-bottom:1px solid transparent} .seeall a:hover{border-bottom-color:var(--red)} .anlist{margin-top:4px} .anlist > table,.anlist > .tbl-wrap{margin-top:0} /* THE BRANDS TABLE (ifmx-shop screens/brands.php). It came to 1230px with five buttons in its last column, wider than the page at 1440 and far wider at 1280 (27 Sep): the buttons were cut off. The headings may break over two lines, the cells sit closer, the share bar is short, and each label's buttons are a row of their own under it, one width each. */ .brandtbl th{white-space:normal;vertical-align:bottom} .brandtbl th,.brandtbl td{padding-left:8px;padding-right:8px} .brandtbl .sharecell{min-width:86px} .brandtbl .sharecell .meter{min-width:0;width:64px;margin-bottom:4px} .brandtbl tr.hasacts td{border-bottom:0;padding-bottom:4px} .brandtbl tr.brandacts td{padding-top:4px;padding-bottom:14px} .rowbtns.across{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));width:100%;gap:8px} /* WHAT WAS REFUSED, bottom right (ifmx-shop inc/shell.php and assets/ifmx-stay.js): one note, gone by itself after six seconds or when clicked (Berk, 27 Sep: "just give a notification") */ .ifmx-told{position:fixed;right:22px;bottom:22px;z-index:120;max-width:min(380px,calc(100vw - 44px));padding:13px 16px; background:var(--frame);color:#fff;border-left:4px solid var(--red);border-radius:var(--r);box-shadow:0 10px 30px rgba(13,16,23,.28); font-size:13.5px;line-height:1.45;cursor:pointer;animation:toldin .25s ease-out;transition:opacity .35s,transform .35s} .ifmx-told.going{opacity:0;transform:translateY(8px)} @keyframes toldin{from{opacity:0;transform:translateY(8px)}} @media (prefers-reduced-motion:reduce){.ifmx-told{animation:none;transition:none}} /* the application's VAT and KVK numbers with their notes: one column each, notes one width */ .appchk{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .appchk .appnum{flex:0 0 16ch} .appchk .pill{flex:0 0 auto;min-width:210px;justify-content:center;text-align:center;box-sizing:border-box} /* page through a long list (Customers, 50 to a page) */ .pager{display:inline-flex;gap:8px;align-items:center} /* STAFF AND ROLES (ifmx-shop screens/staff.php): the job boxes full width, the label box only for a Brand, the hire row's headings on one line */ .stafftbl .jobcell{min-width:180px} .stafftbl .jobcell select{display:block;width:100%;max-width:230px} .stafftbl .jobcell .labelpick{margin-top:6px} .stafftbl .ownerfixed{display:block;padding:8px 0 2px;font-weight:600} .stafftbl .jobcell:not(:has(option[value="brand"]:checked)) .labelpick{display:none} .seeticks{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:8px;flex:0 0 100%} .seeticks .check{display:flex;align-items:center;gap:6px} .seeticks .tiny{flex:0 0 100%;text-transform:none;letter-spacing:0} .stafftbl .jobcell:has(option[value="brand"]:checked) .seeticks,.stafftbl .jobcell:has(option[value="user"]:checked) .seeticks, .stafftbl .jobcell:has(option[value="owner"]:checked) .seeticks{display:none} .hirerow > label > .tiny{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stafftbl td:first-child{min-width:150px} .stafftbl .staffname{display:block;width:100%;max-width:200px} /* Settings, Delivery: the carriers' own price above each box, struck through where the shop has typed its own instead */ .carrierprice{display:block;margin-bottom:4px;white-space:nowrap;text-transform:none;letter-spacing:0;color:var(--grey)} .carrierprice.over{text-decoration:line-through} /* Layout: the colours, a picker with its code and its way back, and a preview in them */ .colrow{align-items:center;gap:10px} .colpick{width:52px;height:34px;padding:2px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);cursor:pointer} .colpreview{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:560px} .colpreview .pv-top{background:#0D1017;padding:12px 14px;font-family:var(--mono);font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.06em} .colpreview .pv-h1{color:var(--pv-head_1)} .colpreview .pv-h2{color:var(--pv-head_2)} .colpreview .pv-strap{background:var(--pv-strap_bg);color:var(--pv-strap_text);padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase} .colpreview .pv-page{background:var(--pv-page_bg);color:var(--pv-page_text);padding:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px} .colpreview .pv-page b{text-transform:uppercase;font-weight:800} .colpreview .pv-btn{margin-left:auto;background:var(--pv-page_text);color:var(--pv-page_bg);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:var(--r)} /* Layout: the banner picture chosen on the screen, a file box and its two buttons in a row */ .bannerpick{flex-wrap:wrap;gap:8px} .bannerpick input[type=file]{max-width:320px;font-size:13px;padding:7px 9px;cursor:pointer} .stafftbl .rowbtncell{width:1%} /* every button in the column as wide as the widest one on any row: a fixed 118px let "Send sign-in link" run out of the table (Berk, 19 Oct: "looks glitchy") */ .stafftbl .rowbtncell{white-space:nowrap} .stafftbl .rowbtns{display:grid;width:100%;min-width:118px} .stafftbl .mailunder{display:none} @media (max-width:1200px){ .stafftbl th,.stafftbl td{padding-left:9px;padding-right:9px} .stafftbl th:nth-child(2),.stafftbl td:nth-child(2){display:none} .stafftbl .mailunder{display:block;margin-top:3px} } /* THE METAL HORNS (inc/horns.php): half a horn to 10 devil horns on every design (Berk, 27 Sep). Berk's own 11 by 15 pixel hand: 22.5px tall under the price and in the picker (a quarter smaller than the first 30, Berk, 27 Sep), 15px on a card. A dark row with a lit row over it cut at the average; the picker is twenty half horns, lit up to the half under the pointer; on a card one horn and the average, on the brand's line, never beside the price. */ .horn{display:block;flex:0 0 auto} .hornsum{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;color:var(--ink);text-decoration:none} .hornsays{white-space:nowrap} .hornsum .tiny{text-transform:none;letter-spacing:0} .hornsbar{position:relative;display:inline-block;vertical-align:middle;line-height:0} .hornsrow{display:flex;gap:var(--hg,4px)} .hornsrow.dark{color:var(--line)} .hornsrow.lit{position:absolute;left:0;top:0;overflow:hidden;color:var(--red-ink,var(--red))} .hornform{margin:0} .hornpick{display:flex;flex-wrap:nowrap;margin:2px 0 0 -3px} .hornpick button,.hornpick > span{border:0;background:none;padding:5px 0;cursor:pointer;color:var(--line);line-height:0;border-radius:0;transition:color .12s,transform .12s} .hornpick button.hl,.hornpick > span{padding-left:3px} .hornpick button.hr,.hornpick > span{padding-right:3px} .hornpick button.on{color:var(--red-ink,var(--red))} .hornpick:hover button{color:var(--line)} .hornpick button:hover,.hornpick button:has(~ button:hover){color:var(--red-ink,var(--red))} .hornpick button.hl:hover,.hornpick button.hl:has(+ .hr:hover),.hornpick button.hr:hover,.hornpick button.hl:hover + .hr{transform:translateY(-2px)} /* a keyboard's place is a line under the half it is on, never a box: a box round half a hand looked like a mistake (Berk, 27 Sep) */ .hornpick button:focus{outline:none} .hornpick button:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--red)} .hornpick.off > span{cursor:default} .hornsay{margin:6px 0 0;text-transform:none;letter-spacing:0} .linkbtn{border:0;background:none;padding:0;margin-left:6px;font:inherit;color:var(--red-ink,var(--red));border-bottom:1px solid var(--red);cursor:pointer} /* on a card: the name and the horns in one row, the horns one name-line tall so they sit level with the name's first line however many lines it takes */ .card .nmrow{display:flex;align-items:flex-start;gap:10px} .card .nmrow .nm{flex:1 1 auto;min-width:0} .horncard{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;color:var(--red-ink,var(--red));font-family:var(--mono);font-size:10px;letter-spacing:.04em} .card .nmrow .horncard{height:calc(17px * 1.14)} .horncard b{font-weight:600;color:var(--ink)} .horncard .of{color:var(--grey)} @media (prefers-reduced-motion:reduce){.hornpick button{transition:none}.hornpick button:hover,.hornpick button:has(+ .hr:hover),.hornpick button.hl:hover + .hr{transform:none}} /* ============================================================================ EVENTS Nights, parties and festivals (page-events.php, the front page's Events row, the admin's Events screens). A flyer is words as much as a picture, so it is always shown whole (contain, on the dark frame), never cropped to fit a box. */ .evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px} .evcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s} .evcard:hover{border-color:var(--red)} .evcard .evflyer{display:flex;align-items:center;justify-content:center;aspect-ratio:5/7;background:var(--frame);overflow:hidden} .evcard .evflyer img{width:100%;height:100%;object-fit:contain;display:block} .evcard .evflyer b{color:var(--on-ink);font-size:20px;font-weight:800;font-stretch:118%;text-transform:uppercase;text-align:center;padding:18px;line-height:1.1} .evcard .info{padding:12px 13px 14px;display:flex;flex-direction:column;gap:4px;flex:1;align-items:flex-start} .evcard .brandline{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--red-ink,var(--red))} .evcard .nm{font-size:17px;font-weight:800;font-stretch:116%;text-transform:uppercase;line-height:1.14;color:var(--ink)} .evcard a.nm:hover{color:var(--red-ink,var(--red))} .evcard .tiny{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey)} .evcard .btn{margin-top:auto;align-self:stretch;text-align:center} .evcard .info>.nm,.evcard .info>.tiny{margin-bottom:6px} .evgrid.been .evcard{opacity:.78} .evgrid.been .evcard:hover{opacity:1} .evbanner{display:block;position:relative;border-radius:var(--r);overflow:hidden;background:var(--frame)} .evsec .evbanner{margin-bottom:18px} .evbanner img{display:block;width:100%;height:clamp(150px,21vw,300px);object-fit:cover} .evbanner-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:26px 18px 14px; background:linear-gradient(to top,rgba(13,16,23,.86),rgba(13,16,23,0));color:#fff} .evbanner-cap .brandline{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#FEC200} .evbanner-cap b{font-size:clamp(20px,3.2vw,34px);font-weight:800;font-stretch:118%;text-transform:uppercase;line-height:1.04} .evbanner-cap .tiny{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#DEDCD8} a.evbanner:hover .evbanner-cap b{color:#FF5A4A} .evtop{background:var(--frame)} .evtop img{display:block;width:100%;height:clamp(150px,24vw,380px);object-fit:cover} .evpage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,48px);align-items:start} .evpage.noflyer{grid-template-columns:minmax(0,1fr);max-width:760px} .evpage-flyer{display:block;background:var(--frame);border-radius:var(--r);overflow:hidden} .evpage-flyer img{display:block;width:100%;height:auto} .evpage-info{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:62ch} .evpage-info .brandline{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink,var(--red))} .evtitle{font-size:clamp(30px,5vw,56px);line-height:1} .evfacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:4px 0 0;width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0} .evfacts dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding-top:3px} .evfacts dd{margin:0;font-weight:700;font-size:16px} .evmap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;margin-left:8px;border-bottom:2px solid var(--red)} .evwords p{margin:0 0 12px} .evwords a{border-bottom:1px solid} .evbeen{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--grey)} .evstand{margin:0;padding:10px 12px;border-left:3px solid var(--red);background:var(--soft);font-size:14px} .evstand a{border-bottom:1px solid} .evpage-info .more{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:3px;margin-top:6px} @media (max-width:760px){.evpage{grid-template-columns:minmax(0,1fr)}.evpage-flyer{max-width:420px}} /* the admin: the event editor's two columns, its day-and-time rows, the thumbnails */ .split.evsplit{grid-template-columns:minmax(0,1fr) minmax(0,320px)} @media (max-width:1100px){.split.evsplit{grid-template-columns:minmax(0,1fr)}} .evpreview{position:sticky;top:12px} .evtime{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:8px} .evtime .inp{max-width:none;width:100%;min-width:0} .evbtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .evthumb{display:block;width:44px;height:58px;background:var(--frame);border-radius:var(--r);overflow:hidden} .evthumb img{width:100%;height:100%;object-fit:cover;display:block} .evpic-flyer{display:block;width:140px;height:auto;border:1px solid var(--line);background:var(--frame)} .evpic-banner{display:block;width:100%;max-width:420px;height:auto;border:1px solid var(--line)} @media (max-width:520px){.evgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.evcard .nm{font-size:14px}.evcard .info{padding:10px 10px 12px}} /* LINKS SET ON LAYOUT: the red line and the headline can be links, and look the same */ a.ticker{display:block;text-decoration:none;color:#0B0B0B} a.ticker:hover div{text-decoration:underline} .headlink{display:inline-block;max-width:100%;text-decoration:none;color:inherit} /* THE MAIL'S LIVE PICTURE (ifmx-mail.js): the new picture is drawn behind the old one and swapped in once loaded, so it never flashes white; a small word says it is being redrawn */ .mlpreview .mlframe{position:relative} .mlpreview .mlframe iframe+iframe{position:absolute;left:0;top:0;visibility:hidden} .mlpreview .mllive{float:right;color:var(--grey);opacity:0;transition:opacity .15s} .mlpreview.updating .mllive{opacity:1} /* the picture's size, from the PTF mailer: a phone, a mail program, wide; short or tall */ .mlsize{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line2)} .mlsize .seg button{padding:5px 10px;font-size:12px} .split.mailsplit.size-phone{grid-template-columns:minmax(0,1fr) minmax(0,420px)} /* Automatic mails: the design being written for is lit in the list (22 Oct) */ .amtbl tr.on td{background:var(--soft,#F2F1EE)} .amtbl .rowbtncell{white-space:nowrap;text-align:right} .split.mailsplit.size-phone .mlframe{width:375px;max-width:100%;margin:0 auto} .split.mailsplit.size-wide{grid-template-columns:minmax(0,2fr) minmax(0,3fr)} .split.mailsplit.height-tall .mlframe iframe{height:1700px!important} @media (max-width:1200px){.split.mailsplit.size-phone,.split.mailsplit.size-wide{grid-template-columns:minmax(0,1fr)}} .mllint{margin-top:12px} .mllint h3{margin-bottom:10px} .mllint td{vertical-align:top} .mlnote{display:flex;flex-direction:column;gap:4px} .mlnote[hidden],[data-notesnone][hidden]{display:none} /* ============================================================================ MARKETING (7 Oct) The category menu, the Top 100's places, the basket's suggestions, the pop-up, reviews, the logos on a custom print, and the Marketing screen's own parts. */ .catmenu{background:var(--panel);border-bottom:1px solid var(--line)} .catmenu-in{display:flex;gap:6px;flex-wrap:wrap;padding-block:12px} @media (max-width:700px){.catmenu-in{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.catmenu-in::-webkit-scrollbar{display:none}.catmenu .chip{flex:0 0 auto}} .chip-up,.chip-top{border-color:var(--red)} .ranked .rankcell{position:relative;min-width:0} .rankcell .rank{position:absolute;z-index:2;top:-8px;right:-8px;min-width:34px;height:34px;padding:0 6px;display:flex;align-items:center;justify-content:center; background:var(--ink);color:var(--on-ink);font-family:var(--mono);font-weight:700;font-size:14px;border-radius:var(--r);pointer-events:none} .rankcell:nth-child(-n+3) .rank{background:var(--red);color:#fff} .sec.suggest{padding-top:0} .revfig{margin:4px 0 10px;font-size:15px} .revfig .tiny{margin-left:6px;text-transform:none;letter-spacing:0} .rev{border-top:1px solid var(--line2);padding:10px 0} .rev .who{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--grey);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .rev p{margin:6px 0 0} .revform{margin-top:12px;display:flex;flex-direction:column;gap:8px} .revrow{display:flex;align-items:center;gap:10px} .revbtns{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .ratings dt a{border-bottom:1px solid var(--line)} .culogos{display:flex;flex-direction:column;gap:8px} .culogo{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,160px);gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:8px;background:var(--panel)} .culogo-pic{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:var(--r);overflow:hidden} .culogo-pic img{max-width:100%;max-height:100%;object-fit:contain;display:block} .culogo-name{display:flex;flex-direction:column;gap:2px;min-width:0} .culogo-name .tiny{text-transform:none;letter-spacing:0} .culogo .sel{width:100%;max-width:none} @media (max-width:520px){.culogo{grid-template-columns:48px minmax(0,1fr)}.culogo .sel{grid-column:1/-1}} /* the pop-up: a card in the middle, the page dimmed behind it */ .ifmxpop{position:fixed;inset:0;z-index:400;background:rgba(13,16,23,.62);display:flex;align-items:center;justify-content:center;padding:16px;animation:ifmxpopin .18s ease-out} @keyframes ifmxpopin{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.ifmxpop{animation:none}} .ifmxpop-card{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);color:var(--ink);border-radius:var(--r);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.35)} .ifmxpop-img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover;background:var(--frame)} .ifmxpop-body{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;align-items:flex-start} .ifmxpop-title{font-size:24px;font-weight:800;font-stretch:118%;text-transform:uppercase;line-height:1.05} .ifmxpop-sub{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--red-ink,var(--red))} .ifmxpop-words{margin:4px 0 0;white-space:pre-line} .ifmxpop-go{margin-top:6px} .ifmxpop-x{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;background:rgba(13,16,23,.72);color:#fff;font-size:20px;line-height:1;cursor:pointer} .ifmxpop-x:focus-visible{outline:2px solid var(--red);outline-offset:2px} /* the Marketing screen */ .mkjump{margin-bottom:16px} .mkpart{margin-bottom:16px;scroll-margin-top:16px} .split.mksplit{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:start} @media (max-width:1100px){.split.mksplit{grid-template-columns:minmax(0,1fr)}} .mkpreview{position:static;width:100%;box-shadow:none} .mkpair{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .mkpair .inp{flex:1 1 160px;max-width:none} .mkpair .inp.qty{flex:0 0 auto} .mkrow{display:flex;gap:6px;align-items:center;flex-wrap:nowrap} .mklogo{display:flex;width:48px;height:48px;align-items:center;justify-content:center;background:var(--soft);border-radius:var(--r);overflow:hidden} .mklogo img{max-width:100%;max-height:100%;object-fit:contain} .mkhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .mkhead h3{margin:0} .mkhead .tiny{text-transform:none;letter-spacing:0} /* THE INBOX (7 Oct): the shop's addresses read and answered, here and in the IFMX Mail app. Three columns as every mail program has them; on a phone one at a time. */ .ib{display:grid;grid-template-columns:200px minmax(260px,360px) minmax(0,1fr);gap:16px;align-items:start} .ib.wide{grid-template-columns:200px minmax(0,1fr)} .ib-side{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px;min-width:0} .ib-boxes,.ib-folders{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden} .ib-box,.ib-folder{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;font-size:14px;border-bottom:1px solid var(--line2);color:inherit;text-decoration:none;min-width:0} .ib-box:last-child,.ib-folder:last-child{border-bottom:0} .ib-box:not(.on):hover,.ib-folder:not(.on):hover{background:var(--soft)} .ib-box.on,.ib-folder.on{background:var(--ink);color:var(--on-ink)} .ib-addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .ib-box .cnt,.ib-folder .cnt{flex:0 0 auto;font-family:var(--mono);font-size:10px;background:var(--red);color:#fff;padding:1px 6px} .ib-fresh .btn{width:100%;justify-content:center} .ib-app{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:10px 12px} .ib-app p{margin:0} .ib-app .btn{justify-content:center} .ib-list{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;min-width:0} .ib-find{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line2);margin:0} .ib-find .inp{flex:1 1 auto;min-width:0;max-width:none} .ib-rows{display:flex;flex-direction:column;max-height:calc(100vh - 220px);overflow-y:auto} .ib-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 12px 10px 14px;border-bottom:1px solid var(--line2);color:inherit;text-decoration:none} .ib-row:last-child{border-bottom:0} .ib-row:hover{background:var(--soft)} .ib-row.on{background:var(--paper2)} .ib-row.unseen{box-shadow:inset 3px 0 0 var(--red)} .ib-row.unseen .ib-name,.ib-row.unseen .ib-subj{font-weight:800} .ib-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;min-width:0} .ib-when{font-family:var(--mono);font-size:11px;color:var(--grey);white-space:nowrap;padding-top:2px} .ib-subj{grid-column:1/-1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .ib-tags{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap} .ib-tags:empty{display:none} .ib-tag{font-family:var(--mono);font-size:10px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--r);padding:0 5px;color:var(--grey)} .ib-tag.read{border-color:var(--ok);color:var(--ok)} .ib-tag.flag{border-color:var(--red);color:var(--red)} .ib-pages{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;margin:0;border-top:1px solid var(--line2)} .ib-pages a{text-decoration:underline} .ib-none{padding:14px 12px;margin:0} .ib-err{padding:12px;color:var(--bad)} .ib-read,.ib-wide{min-width:0} .ib-back{display:none} .ib-mail,.ib-compose{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:16px 18px} .ib-title{font-size:20px;line-height:1.2;margin:0 0 12px;text-wrap:balance;overflow-wrap:anywhere} .ib-meta{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 12px;margin:0 0 14px;font-size:13px} .ib-meta dt{color:var(--grey);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding-top:3px} .ib-meta dd{margin:0;overflow-wrap:anywhere} .ib-acts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} .ib-acts .ib-del{margin-left:auto} .ib-held{margin:0 0 10px;padding:8px 10px;border:1px dashed var(--line);border-radius:var(--r)} .ib-held a,.ib-files a{text-decoration:underline} .ib-files{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px} .ib-files li{display:flex;gap:8px;align-items:baseline;border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;font-size:13px;max-width:100%;overflow-wrap:anywhere} .ib-frame{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:#fff} .ib-frame iframe{display:block;width:100%;height:600px;border:0;background:#fff} .ib-empty{border:1px dashed var(--line);border-radius:var(--r);padding:48px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px} .ib-said{margin:0 0 14px;padding:9px 11px;border:1px solid var(--ok);border-radius:var(--r);color:var(--ok)} .ib-said a{text-decoration:underline;color:inherit} .ib-fields{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 12px;align-items:center;margin:0 0 12px} .ib-fields label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)} .ib-fields .inp{max-width:none;width:100%;min-width:0} .ib-tools{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px} .ib-tools[hidden],.ib-edit[hidden],.ib-html[hidden]{display:none} .ib-tools button{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:5px 10px;font-size:12px;cursor:pointer;color:inherit} .ib-tools button:hover{border-color:var(--red);color:var(--red)} .ib-edit{min-height:280px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fff;color:#111;font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;overflow-wrap:anywhere} .ib-edit:focus{outline:2px solid var(--ink);outline-offset:1px} .ib-edit blockquote{margin:0 0 0 .4em;padding-left:.8em;border-left:3px solid var(--line);color:#444} .ib-edit img{max-width:100%;height:auto} .ib-html{display:block;max-width:none;width:100%;min-height:280px;font-family:var(--mono);font-size:13px} .ib-keep,.ib-attach{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:12px} .ib-attach .inp{max-width:none;flex:1 1 260px;min-width:0} .ib-send{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:14px} .ib-go{display:flex;gap:8px;margin-left:auto} .ib-sig{margin-top:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:10px 14px} .ib-sig summary{cursor:pointer} .ib-sig form{display:flex;flex-direction:column;gap:8px;margin-top:10px;align-items:flex-start} .ib-who{position:absolute;z-index:40;margin:0;padding:4px 0;list-style:none;background:var(--panel);border:1px solid var(--ink);border-radius:var(--r);box-shadow:0 8px 24px rgba(13,16,23,.16);max-height:280px;overflow-y:auto} .ib-who[hidden]{display:none} .ib-who li{display:flex;flex-direction:column;padding:6px 10px;cursor:pointer;font-size:13px} .ib-who li span{font-size:12px;color:var(--grey)} .ib-who li.on,.ib-who li:hover{background:var(--soft)} @media (max-width:1180px){ .ib,.ib.wide{grid-template-columns:minmax(240px,320px) minmax(0,1fr)} .ib-side{grid-column:1/-1;position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start} .ib-boxes,.ib-folders{flex-direction:row;flex-wrap:wrap} .ib-box,.ib-folder{border-bottom:0;border-right:1px solid var(--line2)} .ib-fresh{margin-left:auto} .ib.wide .ib-wide{grid-column:1/-1} } @media (max-width:820px){ .ib,.ib.wide{grid-template-columns:minmax(0,1fr)} .ib.reading .ib-list,.ib.reading .ib-side{display:none} .ib:not(.reading) .ib-read{display:none} .ib-back{display:inline-block;margin:0 0 10px;text-decoration:underline} .ib-rows{max-height:none} .ib-fields{grid-template-columns:minmax(0,1fr)} .ib-acts .ib-del{margin-left:0} } /* THE TOP SCORES (14 Oct): the UFO invasion's boards, in the shop's pixel face */ .scoreboards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} .scoreboards h3{font-family:var(--pix);font-size:13px;line-height:1.5;margin:0 0 12px} .scores{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)} .scores li{display:grid;grid-template-columns:3ch minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--line2);font-family:var(--pix);font-size:11px;line-height:1.6} .scores li:last-child{border-bottom:0} .scores li:first-child{background:var(--ink);color:var(--on-ink)} .scores li:first-child .pt{color:var(--amber)} .scores .rk{color:var(--grey)} .scores .nk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .scores .pt{font-variant-numeric:tabular-nums} /* THE GATEWAY'S OWN INSTRUCTIONS on the page after paying (page-done.php): WooCommerce's bank details, in the shop's type rather than a bulleted list under a giant heading */ .payhow h2,.payhow h3{font-size:15px;margin:8px 0 4px;letter-spacing:.02em} .payhow ul{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:3px} .payhow p{margin:0 0 6px} /* ABOVE A NEW PASSWORD (functions.php ifmx_the_password_help, 22 Oct): Berk's warning, the rules ticked off as they are met, and Make one for me */ .pwhelp{margin:4px 0 12px;display:grid;gap:10px} .pwwarn{margin:0;padding:10px 12px;border:2px solid var(--red);border-radius:var(--r);color:var(--red);font-weight:800;letter-spacing:.02em;line-height:1.35} .pwrules{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 14px;font-size:13px;color:var(--grey)} .pwrules li{display:flex;gap:7px;align-items:baseline} .pwrules li::before{content:"";flex:0 0 9px;height:9px;border:1.5px solid var(--grey);border-radius:50%;transform:translateY(1px)} .pwrules li.ok{color:var(--ok)} .pwrules li.ok::before{background:var(--ok);border-color:var(--ok)} .pwmake{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .pwmake code{font-size:14px;font-weight:600;user-select:all;word-break:break-all} /* THE CODE AFTER THE PASSWORD (ifmx-shop inc/twostep.php) */ .codebox{font:600 26px/1 var(--mono,monospace);letter-spacing:.35em;text-align:center;max-width:none} .twostep .qr{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .twostep .qr svg{flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r);background:#fff} .twostep .key{font:600 15px/1.5 var(--mono,monospace);letter-spacing:.06em;user-select:all;word-break:break-all}