/* The sign-in page: the only branded surface in this app. Every console below it picks a skin to say WHICH DOOR you are at; this one says whose product it is. IT IS LIGHT IN BOTH SYSTEM THEMES, on purpose. The brand is warm paper, persian blue and cut apricot -- a dark variant of that is not the same brand quietly dimmed, it is a different one, and this page exists to look like the board it came off. `color-scheme: light` is what keeps the browser's own form chrome from re-tinting itself underneath the design. Apricot and slate are FILLS AND RULES, never text: on this ground they measure 1.41:1 and 1.87:1. Text is ink (14.3 on paper, 16.0 on card), blue (6.4 / 7.1) or muted (5.3 / 5.9), or paper on blue (7.1). */ :root{ color-scheme: light; --paper:#f5efe6; --paper-lo:#efe6da; /* the ground, one step down, for the page gradient */ --card:#fffcf7; --blue:#2e52a8; --blue-dk:#22407f; --ink:#221f1c; --muted:#6b6156; --apricot:#efc49e; --apricot-dk:#e0a878; --slate:#a9b3b8; --line:#e2d6c6; --line-2:#d3c3ae; --err:#9c3218; --serif:"EB Garamond",Garamond,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua", Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box} html{height:100%} body{ margin:0;padding:40px 20px;min-height:100%; background:linear-gradient(168deg,var(--paper) 0%,var(--paper-lo) 100%); color:var(--ink); font:16px/1.55 var(--sans); display:grid;place-items:center; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; } /* --- the collage ------------------------------------------------------------------------------- Fixed behind everything and deaf to the pointer. The shapes are torn rather than geometric because that is the whole language of the board this came from: a rectangle with a clean edge is a UI panel, and the same rectangle with a deckle is a piece of paper somebody put there. */ .collage{ position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; } .c-apricot{fill:var(--apricot)} .c-apricot-dk{fill:var(--apricot-dk)} .c-slate{fill:var(--slate)} .c-blue{fill:var(--blue)} .c-card{fill:var(--card)} .c-line{fill:none;stroke:var(--blue);stroke-width:2.5;opacity:.55} .c-grain{opacity:.055;mix-blend-mode:multiply} /* THE COLLAGE DOES NOT SURVIVE A PHONE, and hiding half of it is not the fix. The board is a landscape composition with its shapes at the edges; `slice` on a tall narrow viewport crops to the MIDDLE, which is the one part deliberately left empty for the form. So the whole thing goes and two corner sheets take its place, sized for the screen they are on. Cut edges rather than torn ones here: a deckle at this scale is a few pixels of noise that reads as a rendering fault, not as paper. */ @media (max-width:640px){ .collage{display:none} body::before,body::after{ content:"";position:fixed;z-index:0;pointer-events:none; } body::before{ top:-64px;left:-72px;width:210px;height:170px;background:var(--apricot); transform:rotate(-8deg); clip-path:polygon(3% 7%,40% 1%,73% 10%,100% 4%,96% 48%,100% 95%,60% 100%,24% 92%,0 98%,5% 50%); } body::after{ right:-64px;bottom:-70px;width:236px;height:200px;background:var(--slate); transform:rotate(6deg); clip-path:polygon(4% 6%,38% 0,70% 11%,100% 3%,95% 45%,100% 96%,63% 100%,27% 90%,0 97%,6% 49%); } } @media (prefers-reduced-transparency:reduce){ .c-grain{display:none} } main{position:relative;z-index:1;width:100%;max-width:396px} /* --- the masthead ------------------------------------------------------------------------------ */ .mast{text-align:center;margin:0 0 26px} .mark{ margin:0;font-family:var(--serif);font-weight:400; font-size:clamp(46px,10vw,62px);line-height:1;letter-spacing:-.012em; color:var(--blue); } /* A struck rule with an apricot lozenge at its middle -- the smallest piece of the collage, at the one place the eye is already resting. */ .rule{ display:block;position:relative;width:88px;height:1px;margin:20px auto 0; background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent); } .rule::after{ content:"";position:absolute;left:50%;top:-3.5px;width:8px;height:8px; margin-left:-4px;background:var(--apricot-dk);transform:rotate(45deg); } .lede{ margin:16px 0 0;font-size:11.5px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;padding-left:.2em; color:var(--muted); } /* --- the card ---------------------------------------------------------------------------------- One more sheet on the board, so it carries the same shadow the torn ones do rather than the flat outline a form usually gets. */ .card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:3px; /* nearly square: paper is cut, not rounded */ padding:30px 28px 28px; box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 14px 34px -18px rgba(74,58,42,.34), 0 2px 6px -3px rgba(74,58,42,.18); } /* A second sheet BEHIND the card, a degree off square and a few pixels proud of it on two sides. This is what makes the form part of the collage rather than a white box sitting on a picture of one -- the whole board is paper over paper, and a form with nothing under it is the one object on screen that arrived by a different route. */ .card::before{ content:"";position:absolute;top:8px;left:8px;right:-8px;bottom:-8px;z-index:-2; background:#f2ebdf;border-radius:2px; box-shadow:0 12px 26px -20px rgba(74,58,42,.5); } /* And one torn apricot corner showing past the top left of both. */ .corner{ position:absolute;top:-23px;left:-21px;width:92px;height:68px;z-index:-1; background:var(--apricot);transform:rotate(-7deg); clip-path:polygon(4% 9%,38% 2%,71% 12%,100% 5%,95% 46%,100% 93%,62% 100%,26% 91%,0 98%,6% 48%); } @media (max-width:640px){.corner,.card::before{display:none}} /* --- fields ------------------------------------------------------------------------------------ */ label.field{display:block;margin:0 0 17px} label.field > span{ display:block;margin:0 0 7px; font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; padding-left:.15em;color:var(--muted); } input[type=email],input[type=password]{ width:100%;font:inherit;font-size:16px; /* 16px or iOS zooms the page on focus */ color:var(--ink);background:var(--paper); border:1px solid var(--line-2);border-radius:3px; padding:12px 13px; transition:border-color .12s ease,background .12s ease; } /* 4.5:1 against the field's own ground. A placeholder is exempt from the floor on paper and should not be: it is the only thing in an empty box, and the person who most needs to read it is the one who has not started typing. */ input::placeholder{color:#776859;opacity:1} input[type=email]:hover,input[type=password]:hover{border-color:#c2ae94} input[type=email]:focus,input[type=password]:focus{ outline:2px solid var(--blue);outline-offset:1px; border-color:var(--blue);background:var(--card); } /* --- owner or location ------------------------------------------------------------------------- Radios rather than a