/* ================================================================= tarín OS — Platinum-flavoured desktop shell Static demo. Chrome only; content lives in js/content.js ================================================================= */ :root{ --face:#e8e5dd; --face-hi:#ffffff; --face-sh:#a9a59b; --face-sh2:#6e6b63; --ink:#1b1b1b; --ink-soft:#5d5a52; --sel:#3a5f7d; --accent:#ea005f; --desk-a:#5c6b6f; --desk-b:#39474c; --menubar-h:22px; --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace; --ui:"Lucida Grande","Geneva","Helvetica Neue",Helvetica,Arial,sans-serif; } *{box-sizing:border-box;} html,body{height:100%;margin:0;} body{ font-family:var(--ui); font-size:12px; color:var(--ink); /* Chrome is furniture, not text. Documents opt back in below. */ user-select:none;-webkit-user-select:none; -webkit-tap-highlight-color:transparent; /* Kenzo, dithered to four tones and tiled — a desktop pattern, not a photo. Vignette on top keeps the corners readable behind icon labels. */ background-color:var(--wall-base,#322251); background-image: radial-gradient(125% 115% at 50% 18%,rgba(255,255,255,.05),rgba(0,0,0,.32) 78%), repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px), var(--wall,url("../assets/desktop/kenzo-grape.png")); background-size:cover,auto,128px 128px; background-repeat:no-repeat,repeat,repeat; overflow:hidden; -webkit-font-smoothing:antialiased; } img{-webkit-user-drag:none;user-select:none;} /* Set by an inline script in ; the shell removes it once it knows whether sign-in comes first. Without it a slow stylesheet or a slow script can let the bare desktop paint for a frame. */ html.booting #menubar, html.booting #desktop{visibility:hidden !important;} /* ------------------------------ boot ---------------------------- The Mac OS 9 startup screen: a Platinum dialog over the desktop pattern, and extensions marching in along the bottom left. ---------------------------------------------------------------- */ #boot{ position:fixed;inset:0;z-index:9000; display:flex;align-items:center;justify-content:center; transition:opacity .3s ease; } #boot.gone{opacity:0;pointer-events:none;} .b-dialog{ width:376px;padding:14px 14px 18px; background:#d6d3cb; border:1px solid #000; box-shadow: 1px 1px 0 rgba(255,255,255,.9) inset, -1px -1px 0 rgba(0,0,0,.22) inset, 0 6px 18px rgba(0,0,0,.4); } .b-panel{ background:#fff;border:1px solid #7e7a72; padding:24px 20px 20px;text-align:center; box-shadow:1px 1px 0 rgba(0,0,0,.14) inset; } .b-mark{ width:72px;height:63px;margin:0 auto 14px; background:#7f8ad6;color:#12163a; display:flex;align-items:center;justify-content:center; } .b-mark svg{transform:scale(1.5) translateY(1px);} .b-word{ font-family:"Palatino","Book Antiqua","Times New Roman",serif; font-size:36px;line-height:1;letter-spacing:.005em;color:#111; } .b-status{text-align:center;font-size:11.5px;color:#1b1b1b;margin:13px 0 7px;} .b-bar{ height:14px;margin:0 44px;background:#efeee9; border:1px solid #6f6b63; box-shadow:1px 1px 0 rgba(0,0,0,.16) inset; overflow:hidden; } .b-bar i{ display:block;height:100%;width:0; background:linear-gradient(#7d86d8,#4a54ad); border-right:1px solid #33398a; animation:fill 1.5s linear forwards; } @keyframes fill{to{width:100%;}} /* the extension parade */ .b-ext{ position:absolute;left:10px;bottom:10px; display:flex;align-items:flex-end;gap:4px; } .b-ext span{ width:30px;height:30px;display:flex;align-items:center;justify-content:center; background:#e8e5dd;border:1px solid #55524b; box-shadow:1px 1px 0 rgba(255,255,255,.8) inset,0 1px 2px rgba(0,0,0,.35); color:#2b3038; animation:extin .18s ease-out backwards; } @keyframes extin{ 0%{opacity:0;transform:translateY(5px) scale(.86);} 100%{opacity:1;transform:none;} } /* ------------------------------ login --------------------------- Mac OS 9 multi-user sign-in, with a name field instead of a list. Log In doubles as the gesture that unlocks audio. ---------------------------------------------------------------- */ #login{ position:fixed;inset:0;z-index:8800;display:none; align-items:center;justify-content:center; transition:opacity .28s ease; } #login.on{display:flex;} #login.gone{opacity:0;pointer-events:none;} .lg-dialog{ width:352px;padding:20px 22px 18px;text-align:center; background:#d6d3cb;border:1px solid #000; box-shadow: 1px 1px 0 rgba(255,255,255,.9) inset, -1px -1px 0 rgba(0,0,0,.22) inset, 0 8px 26px rgba(0,0,0,.45); } .lg-mark{display:flex;justify-content:center;color:#1a1c3a;margin-bottom:10px;} .lg-hello{ font-family:"Palatino","Book Antiqua","Times New Roman",serif; font-size:21px;color:#2a2a2a;line-height:1.1; } .lg-host{ font-family:"Palatino","Book Antiqua","Times New Roman",serif; font-size:31px;color:#111;line-height:1.15;margin-bottom:16px; } .lg-panel{ background:#fff;border:1px solid #7e7a72; box-shadow:1px 1px 0 rgba(0,0,0,.14) inset; padding:14px 16px 16px;text-align:left;margin-bottom:16px; } .lg-panel label{ display:block;font-size:11px;color:var(--ink-soft);margin-bottom:5px; } .lg-panel input{ width:100%;font-family:var(--ui);font-size:15px;padding:5px 7px;color:var(--ink); background:#fff;border:1px solid #a9a59b; border-top-color:#7e7a72;border-left-color:#7e7a72;border-radius:2px;outline:none; user-select:text;-webkit-user-select:text; } .lg-panel input:focus{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel);} .lg-btns{display:flex;justify-content:center;gap:34px;} .lg-btns button{ display:flex;flex-direction:column;align-items:center;gap:5px; background:transparent;border:0;font-family:var(--ui);font-size:11.5px; color:var(--ink);cursor:pointer;padding:2px 6px; } .lg-btns .ic{ width:38px;height:38px;display:flex;align-items:center;justify-content:center; background:linear-gradient(#fbfaf7,#d9d6cd); border:1px solid #7e7a72;border-radius:3px; box-shadow:1px 1px 0 rgba(255,255,255,.8) inset,0 1px 2px rgba(0,0,0,.28); color:#2b3038; } .lg-btns button.default .ic{box-shadow:0 0 0 2px #6d6960,1px 1px 0 rgba(255,255,255,.8) inset;} .lg-btns button:active .ic{background:#bfbbb2;box-shadow:0 1px 3px rgba(0,0,0,.4) inset;} /* ---------------------------- console --------------------------- */ #console{ position:fixed;inset:0;z-index:9600;display:none; background:#070907;color:#3f6; font-family:var(--mono);font-size:13.5px;line-height:1.65; padding:30px 26px;overflow:auto;cursor:text; text-shadow:0 0 6px rgba(51,255,102,.35); } #console.on{display:block;} #console::after{ content:"";position:fixed;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px); } #console .out{white-space:pre-wrap;user-select:text;-webkit-user-select:text;} #console .dimline{color:#2a7a44;} #console .cur{ display:inline-block;width:8px;height:14px;background:#3f6; vertical-align:-2px;margin-left:1px;animation:blink 1.05s steps(1) infinite; } @keyframes blink{50%{opacity:0;}} /* ---------------------------- menubar --------------------------- */ #menubar{ position:fixed;top:0;left:0;right:0;height:var(--menubar-h);z-index:800; background:linear-gradient(#fdfdfc,#dcd9d0); border-bottom:1px solid #9e9a91; display:flex;align-items:center;padding:0 8px;gap:2px; box-shadow:0 1px 0 rgba(255,255,255,.6) inset; user-select:none; } /* the "at" ligature, inheriting menu-bar colour so it inverts when open */ #menubar .mono-mark{ display:flex;align-items:center;padding:2px 9px; border-radius:2px;cursor:default;color:#1a1c3a; } #menubar .mono-mark:hover,#menubar .mono-mark.open{background:var(--sel);color:#fff;} #menubar .mi{padding:2px 9px;border-radius:2px;cursor:default;font-size:12px;} #menubar .mi:hover,#menubar .mi.open{background:var(--sel);color:#fff;} #menubar .right{margin-left:auto;display:flex;align-items:center;gap:11px;padding-right:4px;} #menubar .appname{ font-size:11.5px;font-weight:600;color:#3b3831;cursor:default; padding:1px 8px;border-left:1px solid #c2beb5; } #menubar .clock{font-variant-numeric:tabular-nums;font-size:11.5px;cursor:default;} /* --------------------------- dropdowns -------------------------- */ .dd{ position:fixed;z-index:9500;min-width:190px;padding:3px 0; background:#f6f4ef;border:1px solid #7e7a72;border-radius:0 0 4px 4px; box-shadow:0 7px 20px rgba(0,0,0,.35); } .dd .item{padding:4px 18px 4px 22px;font-size:12px;cursor:default;white-space:nowrap;position:relative;} .dd .item:hover{background:var(--sel);color:#fff;} .dd .item.dim{color:#a9a59b;} .dd .item.dim:hover{background:transparent;color:#a9a59b;} .dd .item .tick{position:absolute;left:8px;} .dd .sep{height:1px;background:#cfcbc2;margin:3px 0;} /* context menus pop at the pointer, so they get corners all round */ .dd.ctx{border-radius:4px;min-width:158px;} /* inline rename field */ .rename{ font:inherit;font-size:11px;text-align:center;width:80px;padding:1px 3px; border:1px solid var(--sel);border-radius:2px;background:#fff;color:var(--ink); outline:none;user-select:text;-webkit-user-select:text; } .flist .rename{text-align:left;width:170px;font-size:12px;} /* ---------------------------- desktop --------------------------- */ #desktop{position:fixed;top:var(--menubar-h);left:0;right:0;bottom:0;overflow:hidden;} .dicon{ position:absolute;width:86px;padding:5px 3px;border-radius:3px; display:flex;flex-direction:column;align-items:center;gap:5px; cursor:default;user-select:none;text-align:center; } .dicon .glyph{filter:drop-shadow(1px 2px 2px rgba(0,0,0,.5));} /* An icon that's a picture rather than a drawing. Transparent outside the circle, so the same drop-shadow lands on the rim and not on a box. */ .dicon .glyph .appicon{display:block;} .dicon .lbl{ font-size:11px;line-height:1.25;color:#fff;padding:1px 4px;border-radius:2px; text-shadow:0 1px 2px rgba(0,0,0,.85);max-width:84px; } .dicon.sel .lbl{background:var(--sel);text-shadow:none;box-shadow:0 0 0 1px rgba(255,255,255,.35);} .dicon.sel .glyph{filter:drop-shadow(1px 2px 2px rgba(0,0,0,.5)) brightness(1.12);} /* the disk riding out of the drive, and being drawn back in */ .dicon.ejecting{animation:eject .34s ease-in forwards;pointer-events:none;} @keyframes eject{ 0%{transform:translateY(0);opacity:1;} 35%{transform:translateY(7px);opacity:1;} 100%{transform:translateY(26px) scale(.94);opacity:0;} } /* the menu bar dropping in during the startup sequence */ #menubar.dropin{animation:mbdrop .34s cubic-bezier(.2,.9,.3,1.05) backwards;} @keyframes mbdrop{ 0%{transform:translateY(-100%);opacity:0;} 100%{transform:translateY(0);opacity:1;} } .dicon.mounting{animation:mountin .42s cubic-bezier(.2,.9,.3,1.2) backwards;} @keyframes mountin{ 0%{transform:translateY(22px) scale(.94);opacity:0;} 100%{transform:translateY(0) scale(1);opacity:1;} } /* Finder zoom rects. White + difference blend reproduces the XOR outline the original drew straight onto the screen. */ .zoomrect{ position:absolute;pointer-events:none;z-index:9999; border:1px solid #fff;border-radius:4px; mix-blend-mode:difference; } /* ---------------------------- windows --------------------------- */ .win{ position:absolute;display:flex;flex-direction:column;overflow:hidden; min-width:280px;min-height:130px; background:var(--face); border:1px solid #55524b;border-radius:5px 5px 3px 3px; box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 16px 40px rgba(0,0,0,.42),0 3px 9px rgba(0,0,0,.3); } .win.shaded > *:not(.titlebar){display:none !important;} .win.shaded{min-height:0;height:auto !important;box-shadow:0 10px 22px rgba(0,0,0,.35);} .titlebar{ flex:0 0 auto;height:22px;display:flex;align-items:center;gap:6px;padding:0 6px;cursor:move; background:linear-gradient(#fbfaf7,#d6d3ca);border-bottom:1px solid #a9a59b; box-shadow:0 1px 0 rgba(255,255,255,.8) inset; } .win:not(.focused) .titlebar{background:linear-gradient(#f1efe9,#e6e3db);} .win:not(.focused){box-shadow:0 9px 22px rgba(0,0,0,.3);} .win:not(.focused) .ttl{color:#95918a;} .win:not(.focused) .wbox{opacity:.4;} .wbox{ width:12px;height:12px;flex:0 0 auto;border:1px solid #6d6960;border-radius:2px; background:linear-gradient(#fcfbf8,#cbc7bd); box-shadow:0 1px 0 rgba(255,255,255,.7) inset;cursor:default; display:flex;align-items:center;justify-content:center; } .wbox:hover{background:linear-gradient(#fff,#b9b5ab);} .wbox:active{background:#a8a49a;} .wbox i{width:6px;height:1.5px;background:#5c584f;display:block;} .wbox.shade i{height:5px;width:6px;border:1px solid #5c584f;background:none;border-width:1.5px 0 0 0;} .wbox.zoom i{width:6px;height:6px;border:1.5px solid #5c584f;background:none;} .pinstripe{flex:1;height:100%;display:flex;align-items:center;gap:0;overflow:hidden;justify-content:center;} .ttl{ font-size:12px;font-weight:600;color:#3b3831;white-space:nowrap;padding:0 9px; overflow:hidden;text-overflow:ellipsis;max-width:100%; } .stripes{flex:1;height:9px;min-width:0; background:repeating-linear-gradient(0deg,#a9a59b 0 1px,transparent 1px 2px);opacity:.55;} .win:not(.focused) .stripes{opacity:0;} .wbody{flex:1;overflow:auto;background:#fff;position:relative;} .wbody.plat{background:var(--face);} .wstatus{ flex:0 0 auto;height:19px;display:flex;align-items:center;padding:0 9px;gap:10px; background:var(--face);border-top:1px solid #bfbbb2; font-size:10.5px;color:var(--ink-soft); } .grip{position:absolute;right:0;bottom:0;width:15px;height:15px;cursor:nwse-resize;z-index:6;} .grip::after{ content:"";position:absolute;right:2px;bottom:2px;width:9px;height:9px; background:linear-gradient(135deg,transparent 42%,#a9a59b 42% 56%,transparent 56% 70%,#a9a59b 70% 84%,transparent 84%); } .wbody::-webkit-scrollbar{width:13px;height:13px;} .wbody::-webkit-scrollbar-track{background:#eeebe4;border-left:1px solid #cfcbc2;} .wbody::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#fdfcfa,#c6c2b8);border:1px solid #a09c93;border-radius:6px;} /* ------------------------- folder listing ----------------------- */ .flist{width:100%;border-collapse:collapse;font-size:12px;} .flist thead th{ position:sticky;top:0;text-align:left;font-weight:400;font-size:10.5px;color:#5d5a52; background:linear-gradient(#f5f3ee,#e6e3db);border-bottom:1px solid #bfbbb2; padding:3px 10px;border-right:1px solid #d5d1c8; } .flist td{padding:4px 10px;border-bottom:1px solid #f0eee9;white-space:nowrap;} .flist tr{cursor:default;} .flist tr:hover td{background:#f4f2ed;} .flist tr.sel td{background:var(--sel);color:#fff;} .flist tr.sel td .dim{color:#cddbe6;} .flist .nm{width:100%;display:flex;align-items:center;gap:7px;} .flist .dim{color:#8d8a82;} /* ------------------- folder window: chrome & panes --------------- A folder window is a fixed toolbar over a pane that splits into the listing and, optionally, a preview. Only the inner columns scroll. ---------------------------------------------------------------- */ .wbody.fhost{overflow:hidden;display:flex;} .fview{flex:1;min-width:0;display:flex;flex-direction:column;} .fpane{flex:1;min-height:0;display:flex;} .fmain{flex:1;min-width:0;overflow:auto;background:#fff;} .fmain::-webkit-scrollbar{width:13px;height:13px;} .fmain::-webkit-scrollbar-track{background:#eeebe4;border-left:1px solid #cfcbc2;} .fmain::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#fdfcfa,#c6c2b8);border:1px solid #a09c93;border-radius:6px;} /* toolbar — Platinum bevelled buttons on a brushed strip */ .ftool{ flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:4px; padding:5px 8px;background:linear-gradient(#f7f5f1,#e4e1d9); border-bottom:1px solid #bfbbb2;user-select:none; } .ftool .tlbl{font-size:10.5px;color:#5d5a52;margin-right:1px;} .ftool .tgrp{display:flex;} .ftool .tsep{width:1px;height:15px;background:#c6c2b8;margin:0 6px; box-shadow:1px 0 0 rgba(255,255,255,.8);} .tbtn{ font:inherit;font-size:10.5px;line-height:1;padding:3px 8px; border:1px solid #8d8a82;border-radius:3px;background:linear-gradient(#fdfcfa,#ddd9d0); box-shadow:0 1px 0 rgba(255,255,255,.8) inset;color:var(--ink);cursor:default; } .ftool .tgrp .tbtn+.tbtn{margin-left:-1px;} .tbtn:hover{background:linear-gradient(#fff,#d2cec5);} .tbtn:active{background:#c2beb5;box-shadow:0 1px 2px rgba(0,0,0,.22) inset;} .tbtn.on{ background:linear-gradient(#bfbbb2,#d8d4cb);color:#1c1a16; box-shadow:0 1px 3px rgba(0,0,0,.28) inset;border-color:#7e7a72; } .tbtn.off,.tbtn:disabled{ color:#aaa69d;border-color:#c2beb5;background:linear-gradient(#f6f4f0,#e7e4dc); box-shadow:none;text-shadow:0 1px 0 rgba(255,255,255,.9); } .tbtn.off:hover,.tbtn:disabled:hover{background:linear-gradient(#f6f4f0,#e7e4dc);} /* thumbnails view — large icons, the images doing the work */ .fgrid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); gap:6px;padding:12px;align-content:start; } .gitem{ display:flex;flex-direction:column;align-items:center;gap:6px; padding:8px 4px 6px;border-radius:4px;cursor:default;text-align:center; } .gitem .gshot{ width:112px;height:76px;display:flex;align-items:center;justify-content:center; border:1px solid #ddd9d1;border-radius:2px;background:#f4f2ed;overflow:hidden; } .gitem .gshot img{width:100%;height:100%;object-fit:cover;display:block;} .gitem .gshot .gph{filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));} .gitem .glbl{font-size:11px;line-height:1.3;max-width:118px;} .gitem .glbl .nm{padding:1px 4px;border-radius:2px;display:inline-block;word-break:break-word;} .gitem:hover .glbl .nm{background:#f0eee9;} .gitem.sel .glbl .nm{background:var(--sel);color:#fff;} .gitem.sel .gshot{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel);} /* divider */ .fsplit{ flex:0 0 5px;cursor:col-resize;background:linear-gradient(90deg,#cfcbc2,#efece6 40%,#cfcbc2); border-left:1px solid #bfbbb2;border-right:1px solid #bfbbb2; } .fsplit:hover{background:linear-gradient(90deg,#c2beb5,#e6e3db 40%,#c2beb5);} body.colresize,body.colresize *{cursor:col-resize !important;} /* preview pane */ .fprev{ flex:0 0 auto;width:244px;min-width:160px;display:flex;flex-direction:column; background:var(--face); } .fpbody{flex:1;min-height:0;overflow:auto;padding:12px 13px 14px;} .fpbody::-webkit-scrollbar{width:11px;} .fpbody::-webkit-scrollbar-track{background:#eeebe4;border-left:1px solid #cfcbc2;} .fpbody::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#fdfcfa,#c6c2b8);border:1px solid #a09c93;border-radius:6px;} .fpshot{ width:100%;aspect-ratio:4/3;margin-bottom:10px;overflow:hidden; border:1px solid #a9a59b;border-radius:2px;background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.16) inset; } .fpshot img{width:100%;height:100%;object-fit:cover;display:block;} .fpshot.glyphonly{display:flex;align-items:center;justify-content:center;background:#f4f2ed;} .fpname{font-size:12.5px;font-weight:600;line-height:1.3;margin-bottom:2px;} .fpkind{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase; color:#8d8a82;margin-bottom:10px;} .fpcopy,.fpcopy *{user-select:text;-webkit-user-select:text;} .fpcopy p{font-size:11px;line-height:1.62;margin:0 0 9px;color:#3a382f;} .fpcopy .fplead{color:var(--ink-soft);font-style:italic;} .fpcopy .fploading,.fpnone{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;color:#a09c93;} .fpfoot{ flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:7px 12px; background:linear-gradient(#f2efe9,#e4e1d9);border-top:1px solid #bfbbb2; } .fpfoot .fpcount{font-size:10px;color:var(--ink-soft);line-height:1.25;} /* --------------------------- document --------------------------- */ /* Real content: selectable and copyable, the way a text viewer should be. */ .doc, .doc *{user-select:text;-webkit-user-select:text;} .doc{padding:22px 26px 30px;max-width:660px;} .doc h1{font-size:21px;font-weight:600;margin:0 0 3px;letter-spacing:-.015em;} .doc .sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 18px;} /* header with a portrait: photo left, identity right */ .doc .head{display:flex;gap:20px;align-items:flex-start;margin-bottom:20px;} .doc .head .idcol{flex:1;min-width:0;} .doc .head .sub{margin-bottom:14px;} .doc .head .metatbl{margin-bottom:0;} /* Platinum portrait: raised bezel around an inset well */ .avatar{ flex:0 0 auto;width:118px;height:118px;border-radius:50%;padding:4px; background:linear-gradient(145deg,#fbfaf7 0%,#e2ded5 45%,#bdb9b0 100%); box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, -1px -1px 0 rgba(0,0,0,.18) inset, 0 2px 4px rgba(0,0,0,.28); } .avatar .well{ display:block;width:100%;height:100%;border-radius:50%;padding:2px; background:linear-gradient(145deg,#9a968c 0%,#c6c2b9 50%,#fdfcfa 100%); } .avatar img{ width:100%;height:100%;border-radius:50%;display:block;object-fit:cover; background:#d8d4cb; } .doc .metatbl{width:100%;border-collapse:collapse;margin:0 0 20px; border-top:1px solid #ddd9d1;border-bottom:1px solid #ddd9d1;} .doc .metatbl th{ text-align:left;font-weight:400;vertical-align:top;white-space:nowrap; font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase; color:#8d8a82;padding:6px 16px 6px 0;width:1px; } .doc .metatbl td{padding:6px 0;font-size:12px;vertical-align:top;} .doc p{font-size:13px;line-height:1.72;margin:0 0 13px;color:#2c2a25;} .doc .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;margin-top:20px;} .doc .gal img{width:100%;height:135px;object-fit:cover;display:block; border:1px solid #ddd9d1;border-radius:2px;background:#f4f2ed;cursor:pointer;} .doc .gal img:hover{border-color:var(--accent);} .doc video{width:100%;margin-top:20px;border:1px solid #ddd9d1;border-radius:2px;background:#000;} .doc .lnk{color:var(--accent);text-decoration:none;} .doc .lnk:hover{text-decoration:underline;} /* link buttons — Platinum push buttons, not chips */ .doc .linkrow{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px;} .doc .lbtn{ display:inline-flex;align-items:center;gap:6px; font-size:11.5px;line-height:1;padding:5px 12px;border-radius:10px; border:1px solid #7e7a72;background:linear-gradient(#fdfcfa,#dcd8cf); box-shadow:0 1px 0 rgba(255,255,255,.75) inset; color:var(--ink);text-decoration:none;white-space:nowrap; } .doc .lbtn:hover{background:linear-gradient(#fff,#d2cec5);border-color:#6d6960;} .doc .lbtn:active{background:#c2beb5;box-shadow:0 1px 2px rgba(0,0,0,.2) inset;} .doc .lbtn svg{display:block;flex:0 0 auto;opacity:.75;} .doc .lbtn:hover svg{opacity:1;} /* About box: the mark in its magenta, beside the name */ .doc.about{padding:20px 22px 18px;} .doc.about .abhead{display:flex;align-items:center;gap:16px;margin-bottom:16px; border-bottom:1px solid #ddd9d1;padding-bottom:14px;} .doc.about .abmark{flex:0 0 auto;color:var(--accent);} .gamebox{ height:100%;display:flex;align-items:center;justify-content:center; padding:8px;background:var(--face); } .gamebox canvas{ display:block;border:1px solid #7e7a72; box-shadow:1px 1px 0 rgba(0,0,0,.18) inset; image-rendering:pixelated; } /* ------------------------ modal dialogs ------------------------- */ /* z-index is assigned inline from the same counter the windows use, so the veil always lands directly beneath its own dialog and above everything else */ .veil{position:absolute;inset:0;background:rgba(20,22,20,.20);} .win.dlg{border-width:2px;box-shadow:0 18px 46px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.35);} .win.dlg .grip{display:none;} .dform{padding:15px 16px 16px;} .dform .lead{font-size:11.5px;color:var(--ink-soft);margin:0 0 13px;} .dform .field{margin-bottom:10px;} .dform label{display:block;font-size:11.5px;margin-bottom:3px;} .dform label .opt{color:#8d8a82;} .dform input,.dform textarea{ width:100%;font-family:var(--ui);font-size:12px;padding:4px 6px;color:var(--ink); background:#fff;border:1px solid #a9a59b;border-top-color:#7e7a72;border-left-color:#7e7a72; border-radius:2px;outline:none; user-select:text;-webkit-user-select:text; } .dform textarea{height:86px;line-height:1.5;resize:none;} .dform input:focus,.dform textarea:focus{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel);} .dform input.bad,.dform textarea.bad{border-color:#a32d2d;box-shadow:0 0 0 1px rgba(163,45,45,.35);} .dform .err{color:#a32d2d;font-size:10.5px;margin-top:3px;} .dform .btnrow{display:flex;justify-content:flex-end;align-items:center;gap:9px; margin-top:14px;border-top:1px solid #cfcbc2;padding-top:12px;} /* Platinum default button: the extra ring, not a colour change */ .pbtn.default{box-shadow:0 0 0 2px #6d6960,0 1px 0 rgba(255,255,255,.8) inset;font-weight:600;} .dform .sent{padding:18px 4px 6px;text-align:center;} .dform .sent b{display:block;font-size:13px;margin-bottom:6px;} .dform .sent span{font-size:11.5px;color:var(--ink-soft);} /* ---------------- Desktop Patterns control panel ---------------- */ .cpanel{padding:13px 14px 14px;} .cpanel .hint{font-size:11px;color:var(--ink-soft);margin:0 0 11px;} .wallgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;} .swatch{cursor:default;} .swatch .sw{ height:72px;border:1px solid #8f8b82;border-radius:2px; background-repeat:repeat;background-size:56px 56px; box-shadow:0 1px 2px rgba(0,0,0,.25) inset; } .swatch.on .sw{box-shadow:0 0 0 2px var(--sel);} .swatch .nm{ font-size:11px;text-align:center;margin-top:4px;padding:1px 4px;border-radius:2px; } .swatch.on .nm{background:var(--sel);color:#fff;} .cpanel .foot{ display:flex;align-items:center;gap:9px;margin-top:14px; border-top:1px solid #cfcbc2;padding-top:11px; } .pbtn{ font:inherit;font-size:11.5px;padding:3px 13px;border-radius:9px; border:1px solid #7e7a72;background:linear-gradient(#fdfcfa,#dcd8cf); box-shadow:0 1px 0 rgba(255,255,255,.75) inset;cursor:default;color:var(--ink); } .pbtn:hover{background:linear-gradient(#fff,#d2cec5);} .pbtn:active{background:#c2beb5;} .cpanel .cur{margin-left:auto;font-size:11px;color:var(--ink-soft);} /* ------------------------ Kenzo Navigator ----------------------- Address bar over a frame. The bar is Platinum chrome; everything below it belongs to somebody else's website, so it gets a hard edge and nothing else. ---------------------------------------------------------------- */ .nav{height:100%;display:flex;flex-direction:column;background:var(--face);} .navbar{ flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 8px; background:linear-gradient(#f7f5f1,#e4e1d9);border-bottom:1px solid #bfbbb2; } .navbar .navmark{display:flex;color:#6e6b63;flex:0 0 auto;padding-left:2px;} .navurl{ flex:1;min-width:0;font-family:var(--mono);font-size:11px; padding:4px 8px;color:var(--ink);background:#fff; border:1px solid #a9a59b;border-top-color:#7e7a72;border-left-color:#7e7a72; border-radius:2px;outline:none; user-select:text;-webkit-user-select:text; } .navurl:focus{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel);} .navurl::placeholder{color:#a9a59b;} .navbtn{ flex:0 0 auto;font:inherit;font-size:10.5px;line-height:1;padding:4px 9px; border:1px solid #8d8a82;border-radius:3px;background:linear-gradient(#fdfcfa,#ddd9d0); box-shadow:0 1px 0 rgba(255,255,255,.8) inset;color:var(--ink);cursor:default; } .navbtn:hover{background:linear-gradient(#fff,#d2cec5);} .navbtn:active{background:#c2beb5;box-shadow:0 1px 2px rgba(0,0,0,.22) inset;} .navbtn.navout{display:flex;align-items:center;padding:4px 7px;color:#3a3833;} .navview{flex:1;min-height:0;position:relative;background:#fff;overflow:hidden;} .navframe{ position:absolute;inset:0;width:100%;height:100%; border:0;display:block;background:#fff;visibility:hidden; } .navframe.on{visibility:visible;} .navmsg{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; padding:26px;background:#fff;overflow:auto; } .naverr{max-width:430px;} .naverr, .naverr *{user-select:text;-webkit-user-select:text;} .naverr-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;} .naverr-i{display:flex;color:#a09c93;transform:scale(1.6);transform-origin:left center;margin-right:6px;} .naverr h2{font-size:15px;font-weight:600;margin:0;letter-spacing:-.01em;} .naverr p{font-size:12px;line-height:1.7;margin:0 0 11px;color:#3a382f;} .naverr code{font-family:var(--mono);font-size:10.5px;background:#f0eee9;padding:1px 4px;border-radius:2px;} .naverr-b{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:16px; border-top:1px solid #ddd9d1;padding-top:15px;} .naverr-u{font-family:var(--mono);font-size:10px;color:#8d8a82;overflow-wrap:anywhere;} /* --------------------------- phone:kenzo ------------------------ The call screen, shared by both machines. Dark, because every video call is dark, and because it makes the Navigator's chrome read as a window onto something else. ---------------------------------------------------------------- */ .callui,.p-call{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:#14161b;overflow:hidden; } .p-call{position:relative;flex:1;min-height:0;} .call-card{display:flex;flex-direction:column;align-items:center;text-align:center;} .call-card.pulse .call-face{animation:callpulse 1.6s ease-out;} @keyframes callpulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.42),0 0 0 0 rgba(255,255,255,.24);} 100%{box-shadow:0 0 0 22px rgba(255,255,255,0),0 0 0 40px rgba(255,255,255,0);} } .call-face{ width:120px;height:120px;border-radius:50%;overflow:hidden;display:block; border:2px solid #3a3f49;background:#000;margin-bottom:16px; } .call-face img{width:100%;height:100%;display:block;} .call-name{color:#f2f1ee;font-size:19px;letter-spacing:.01em;margin-bottom:5px;} .call-state{ font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:#8b929e;margin-bottom:15px; } .call-dots{display:flex;gap:8px;} .call-dots i{width:7px;height:7px;border-radius:50%;background:#333944;transition:background .18s;} .call-dots i.on{background:#5ac36a;} .callvid{ position:absolute;inset:0;width:100%;height:100%; display:block;background:#000; /* `contain`, not `cover`: the clips are portrait and the window is wide, so cover would crop a phone video down to a leg. Black bars around a portrait call on a desktop is what a real call looks like anyway. */ object-fit:contain; /* Shot at 244p on purpose — let it stay soft rather than pretend. */ image-rendering:auto; } .call-badge{ position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px; padding:5px 11px;border-radius:12px;background:rgba(12,14,18,.72); color:#e8e6e1;font-size:10.5px;letter-spacing:.02em; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .call-badge .dot{width:7px;height:7px;border-radius:50%;background:#5ac36a;flex:0 0 auto;} /* image viewer */ .iview{background:#1e1e1c;min-height:100%;display:flex;align-items:center;justify-content:center;padding:14px;} .iview img{max-width:100%;max-height:100%;display:block;} /* loading states — content arrives only when opened */ .loading{ font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:#a09c93;padding:26px 2px; } .loading.light{color:#7d7a72;} .wstatus .dim{color:#a09c93;} /* ========================== PALM OS 4.1 ========================= Mobile is a different machine: a colour Palm. Title bar is white with a coloured badge only as wide as the app name; tapping it opens the app menu. Hardware buttons across the bottom. ================================================================ */ /* The handheld runs on the real thing: Damien Guard's "Palm OS", built on FontStruct and licensed CC BY-SA 3.0. Both weights, 8 KB total. See assets/fonts/palm-os/ for the licences and what was changed. */ @font-face{font-family:"Palm OS";src:url("../assets/fonts/palm-os/palm-os-400.woff2") format("woff2"); font-weight:400;font-display:swap;} @font-face{font-family:"Palm OS";src:url("../assets/fonts/palm-os/palm-os-700.woff2") format("woff2"); font-weight:700;font-display:swap;} #palm{display:none;} @media (max-width:900px), (pointer:coarse) and (max-width:1100px){ html,body{height:100%;overflow:hidden;overscroll-behavior:none;} #boot,#menubar,#desktop,#console{display:none !important;} #palm{ --pb:#360b99; --pb2:#2a0879; --ptxt:#000; /* One dial for the whole handheld. Every size below is written as calc(Npx * var(--ps)), so the device scales as a unit: type, icons, padding, the silkscreen keys, all of it. N is the size at 1×. Borders stay hairlines on purpose — scaling them turns a Palm into a cartoon. */ --ps:1.5; /* One face for everything — the device only ever had one. --px is copy, --pxc is chrome; they differ in weight and case, not in family. Palm OS sits small in its em: it's drawn on a 16-module grid and spends only 7 of them on cap height (0.44em, where a normal face uses ~0.70). So every size in this block is about 1.5× what you'd set for an ordinary font. Don't "fix" them. */ --px:"Palm OS",Arial,Helvetica,sans-serif; --pxc:"Palm OS",Arial,Helvetica,sans-serif; display:flex;flex-direction:column; position:fixed;inset:0;height:100dvh; background:#fff;color:var(--ptxt); font-family:var(--px); /* the whole point: no smoothing anywhere */ -webkit-font-smoothing:none;-moz-osx-font-smoothing:unset;font-smooth:never; text-rendering:optimizeSpeed; } /* SVG marks lose their anti-aliasing too, so the chrome is uniformly hard-edged */ #palm svg{shape-rendering:crispEdges;} #palm img.shot,#palm .avatar img{image-rendering:auto;} /* --- title bar: white, with a badge only as wide as the name --- */ .p-title{ flex:0 0 auto;display:flex;align-items:stretch; height:calc(30px * var(--ps));background:#fff;border-bottom:2px solid var(--pb); padding-top:env(safe-area-inset-top); height:calc(30px * var(--ps) + env(safe-area-inset-top)); } .p-badge{ display:flex;align-items:center;gap:calc(6px * var(--ps)); background:var(--pb);color:#fff; border-radius:0 calc(9px * var(--ps)) calc(9px * var(--ps)) 0; padding:0 calc(11px * var(--ps)) 0 calc(9px * var(--ps)); margin-right:calc(9px * var(--ps));border:0; font-family:var(--pxc);font-size:calc(17px * var(--ps));font-weight:700;letter-spacing:0; white-space:nowrap;cursor:pointer; } .p-badge:active{background:#000;} .p-badge .caret{font-size:calc(11px * var(--ps));opacity:.85;} .p-title .fill{flex:1;min-width:0;display:flex;align-items:center; gap:calc(9px * var(--ps));padding-right:calc(9px * var(--ps));} .p-title .cat{ margin-left:auto;font-family:var(--pxc);font-size:calc(15px * var(--ps));font-weight:700; display:flex;align-items:center;gap:calc(5px * var(--ps));color:var(--pb2);white-space:nowrap; } .batt{width:calc(24px * var(--ps));height:calc(11px * var(--ps));flex:0 0 auto; border:1px solid #000;border-radius:1px;position:relative;background:#fff;} .batt::after{content:"";position:absolute;right:calc(-4px * var(--ps));top:calc(3px * var(--ps)); width:calc(3px * var(--ps));height:calc(5px * var(--ps));background:#000;} .batt i{position:absolute;inset:1px;width:74%;background:var(--pb);display:block;} /* --- app menu, dropped from the badge --- */ .p-menu{ position:absolute;top:calc(30px * var(--ps) + env(safe-area-inset-top));left:0;z-index:60; background:#fff;border:1px solid #000;border-top:0;min-width:calc(196px * var(--ps)); box-shadow:2px 2px 0 rgba(0,0,0,.35); } .p-menu button{ display:block;width:100%;text-align:left;background:#fff;border:0; font-family:var(--px);font-size:calc(22px * var(--ps));color:#000; padding:calc(9px * var(--ps)) calc(15px * var(--ps));cursor:pointer; } .p-menu button:active{background:var(--pb);color:#fff;} .p-menu hr{border:0;border-top:1px solid #b8b8b8;margin:2px 0;} .p-scrim{position:absolute;inset:0;z-index:50;} /* --- body: screen + scrollbar --- */ .p-body{flex:1;min-height:0;display:flex;position:relative;} .p-screen{ flex:1;min-width:0;overflow-y:auto;-webkit-overflow-scrolling:touch; overscroll-behavior:contain;scrollbar-width:none; padding:calc(12px * var(--ps)) calc(12px * var(--ps)) calc(20px * var(--ps)); } .p-screen::-webkit-scrollbar{display:none;} .p-bar{flex:0 0 calc(14px * var(--ps));display:flex;flex-direction:column; border-left:1px solid #000;background:#fff;} .p-bar.off{visibility:hidden;} .p-bar button{ flex:0 0 calc(14px * var(--ps));border:0;border-bottom:1px solid #000;background:#fff;padding:0; display:flex;align-items:center;justify-content:center;cursor:pointer; } .p-bar button:last-child{border-bottom:0;border-top:1px solid #000;} .p-bar button:active{background:#000;} .p-bar button:active svg{fill:#fff;} .p-track{flex:1;position:relative;min-height:0;} .p-thumb{position:absolute;left:2px;right:2px;top:0;background:#000;} /* --- launcher --- */ .p-grid{display:grid;grid-template-columns:repeat(3,1fr); gap:calc(2px * var(--ps)) 0;padding:calc(5px * var(--ps)) 0 calc(2px * var(--ps));} .p-app{ display:flex;flex-direction:column;align-items:center;gap:calc(5px * var(--ps)); padding:calc(8px * var(--ps)) calc(2px * var(--ps)) calc(6px * var(--ps)); text-decoration:none;color:inherit; -webkit-tap-highlight-color:transparent; } .p-app:active{background:#000;color:#fff;} .p-app .ic{ width:calc(50px * var(--ps));height:calc(50px * var(--ps));border-radius:50%; flex:0 0 auto;display:flex;align-items:center;justify-content:center; background:#8ea0d0;border:2px solid #1d2a55;color:#12193a; } /* One app is a photograph rather than a line drawing. It keeps the ring every other icon has, so it sits in the grid instead of on top of it. */ .p-app .ic.photo{background:#fff;padding:0;overflow:hidden;} .p-app .ic.photo img{width:100%;height:100%;display:block;border-radius:50%;} .p-app .lb{font-family:var(--pxc);font-size:calc(15px * var(--ps));font-weight:400; text-align:center;line-height:calc(19px * var(--ps));} /* --- lists --- */ .p-cat{font-family:var(--pxc);font-size:calc(15px * var(--ps));font-weight:700;color:var(--pb2); margin:calc(14px * var(--ps)) calc(2px * var(--ps)) calc(6px * var(--ps));} .p-list{border-top:1px solid #000;} .p-row{ display:flex;align-items:center;gap:calc(8px * var(--ps)); padding:calc(12px * var(--ps)) calc(3px * var(--ps)); border-bottom:1px solid #c0c0c0;text-decoration:none;color:inherit; -webkit-tap-highlight-color:transparent; } .p-row:active{background:var(--pb);color:#fff;} .p-row .n{flex:1;font-size:calc(22px * var(--ps));line-height:calc(26px * var(--ps));} .p-row .y{font-family:var(--pxc);font-size:calc(15px * var(--ps));color:#555;white-space:nowrap;} .p-row:active .y{color:#cfc9e6;} .p-row .ch{font-size:calc(17px * var(--ps));color:#888;} /* --- documents --- */ .p-doc,.p-doc *{user-select:text;-webkit-user-select:text;} .p-doc h1{font-size:calc(30px * var(--ps));font-weight:700; margin:calc(2px * var(--ps)) 0 calc(6px * var(--ps));line-height:calc(34px * var(--ps));} .p-doc .sub{font-size:calc(19px * var(--ps));color:#4a4a4a; margin:0 0 calc(14px * var(--ps));line-height:calc(24px * var(--ps));} /* half the screen width, centred — square so the circle stays a circle */ .p-doc .avatar{ display:block;width:50%;height:auto;aspect-ratio:1; padding:calc(3px * var(--ps));margin:0 auto calc(14px * var(--ps)); background:#c9c9c9;border:1px solid #000;border-radius:50%;box-shadow:none; } .p-doc .avatar .well{padding:calc(2px * var(--ps));background:#8a8a8a;} .p-meta{border-top:1px solid #000;border-bottom:1px solid #000;margin:0 0 calc(13px * var(--ps));} .p-meta div{display:flex;gap:calc(8px * var(--ps)); padding:calc(7px * var(--ps)) calc(2px * var(--ps)); font-size:calc(19px * var(--ps));line-height:calc(24px * var(--ps));border-bottom:1px solid #d5d5d5;} .p-meta div > span{min-width:0;overflow-wrap:anywhere;} .p-doc,.p-doc p,.p-row .n{overflow-wrap:anywhere;} .p-meta div:last-child{border-bottom:0;} /* The label column is sized to the longest label, not to a round number — at 1.5× every extra pixel here comes straight out of the value column, which is what wraps. */ .p-meta b{flex:0 0 calc(78px * var(--ps));font-family:var(--pxc);font-weight:400; font-size:calc(15px * var(--ps));color:var(--pb2); padding-top:calc(3px * var(--ps));line-height:calc(20px * var(--ps));} .p-doc p{font-size:calc(22px * var(--ps));line-height:calc(28px * var(--ps)); margin:0 0 calc(15px * var(--ps));} .p-doc .lnk,.p-meta .lnk{color:var(--pb);text-decoration:underline;text-underline-offset:2px;} .p-doc img.shot{width:100%;margin-top:calc(8px * var(--ps));border:1px solid #000;display:block;} .p-doc video{width:100%;margin-top:calc(11px * var(--ps));background:#000;border:1px solid #000;} .p-btns{display:flex;flex-wrap:wrap;gap:calc(6px * var(--ps));margin:calc(2px * var(--ps)) 0 calc(14px * var(--ps));} .p-btn{ display:inline-flex;align-items:center;gap:calc(5px * var(--ps)); font-family:var(--pxc);font-size:calc(15px * var(--ps)); padding:calc(7px * var(--ps)) calc(15px * var(--ps));border-radius:calc(14px * var(--ps)); border:1px solid #000;background:#fff;color:#000; text-decoration:none;cursor:pointer; } .p-btn:active{background:var(--pb);color:#fff;border-color:var(--pb);} .p-lede{font-size:calc(19px * var(--ps));line-height:calc(26px * var(--ps));margin:0 0 calc(4px * var(--ps));} .p-note{font-size:calc(19px * var(--ps));color:#555;line-height:calc(26px * var(--ps)); margin-top:calc(20px * var(--ps));border-top:1px solid #c0c0c0;padding-top:calc(14px * var(--ps));} /* --- form --- */ .p-field{margin-bottom:calc(11px * var(--ps));} .p-field label{display:block;font-family:var(--pxc);font-size:calc(15px * var(--ps)); color:var(--pb2);margin-bottom:calc(5px * var(--ps));} .p-field input,.p-field textarea{ width:100%;font-family:var(--px);font-size:calc(22px * var(--ps)); padding:calc(6px * var(--ps)) calc(2px * var(--ps));color:#000; background:transparent;border:0;border-bottom:1px dotted #000;border-radius:0; outline:none;-webkit-appearance:none; } .p-field textarea{height:calc(100px * var(--ps));line-height:1.5;resize:none; border:1px solid #000;padding:calc(7px * var(--ps));} .p-field input:focus,.p-field textarea:focus{background:#ece6ff;} .p-field .err{font-size:calc(18px * var(--ps));color:#a11;margin-top:calc(5px * var(--ps));} .p-field .bad{border-color:#a11;} /* --- phone:kenzo, handheld --- */ /* The call takes the whole screen area, so it escapes .p-screen's padding and scrolling — a call is not a document. */ .p-callbar{ font-family:var(--pxc);font-size:calc(13px * var(--ps));color:var(--pb2); padding:0 0 calc(7px * var(--ps));border-bottom:1px solid #000; margin-bottom:calc(10px * var(--ps)); } /* Capped against the viewport as well as the scale — a call you have to scroll to see is not a call. */ .p-call{ height:min(calc(360px * var(--ps)), calc(100dvh - 290px));border:1px solid #000; display:flex;align-items:center;justify-content:center; } .p-call .call-face{ width:calc(84px * var(--ps));height:calc(84px * var(--ps)); margin-bottom:calc(14px * var(--ps)); } .p-call .call-name{font-family:var(--px);font-size:calc(20px * var(--ps));margin-bottom:calc(4px * var(--ps));} .p-call .call-state{ font-family:var(--pxc);font-size:calc(11px * var(--ps));letter-spacing:.1em; margin-bottom:calc(12px * var(--ps)); } .p-call .call-dots{gap:calc(7px * var(--ps));} .p-call .call-dots i{width:calc(6px * var(--ps));height:calc(6px * var(--ps));} .p-call .call-badge{ left:calc(9px * var(--ps));bottom:calc(9px * var(--ps)); font-family:var(--pxc);font-size:calc(11px * var(--ps)); padding:calc(4px * var(--ps)) calc(9px * var(--ps)); border-radius:calc(11px * var(--ps)); } .p-call .call-badge .dot{width:calc(6px * var(--ps));height:calc(6px * var(--ps));} /* --- snake: board on top, pad underneath --- */ .p-game{display:flex;flex-direction:column;height:100%;gap:calc(8px * var(--ps));} .p-board{ flex:1 1 50%;min-height:0;display:flex;align-items:center;justify-content:center; } .p-board canvas{display:block;border:1px solid #000;image-rendering:pixelated;} .p-score{ flex:0 0 auto;text-align:center;font-family:var(--pxc);font-size:calc(15px * var(--ps));color:var(--pb2); } .p-pad{ flex:1 1 50%;min-height:0; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8px * var(--ps)); } .p-pad .row{display:flex;gap:calc(56px * var(--ps));} .p-pad button{ width:calc(62px * var(--ps));height:calc(62px * var(--ps));border-radius:50%; display:flex;align-items:center;justify-content:center; background:#dcdad3;border:1px solid #96948c;color:#33322e; padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent; } .p-pad button:active{background:#360b99;border-color:#360b99;color:#fff;} /* --- silkscreen buttons --- Flat, the way the Graffiti pad was: one plastic tone, thin outlines, no gradients and no shadows. Every key the same size. */ .p-hw{ flex:0 0 auto;display:flex;align-items:center; background:#c4c2bb;border-top:1px solid #8b8a84;gap:calc(8px * var(--ps)); padding:calc(9px * var(--ps)) calc(10px * var(--ps)) calc(9px * var(--ps) + env(safe-area-inset-bottom)); } .p-hw button{ flex:1 1 0;min-width:0; /* all four exactly equal */ display:flex;flex-direction:column;align-items:center;gap:calc(5px * var(--ps)); background:transparent;border:0;padding:0; color:#33322e;font-family:var(--pxc);font-size:calc(14px * var(--ps));letter-spacing:0; cursor:pointer;-webkit-tap-highlight-color:transparent; } .p-hw .k{ width:calc(40px * var(--ps));height:calc(40px * var(--ps));border-radius:50%; display:flex;align-items:center;justify-content:center; background:#dcdad3;border:1px solid #96948c;color:#4a4945; } .p-hw button:active .k{background:#33322e;border-color:#33322e;color:#dcdad3;} .p-hw button:active{color:#33322e;} .p-hw button svg{display:block;} /* PALMICON writes its own width/height attributes, which CSS has to override or every glyph would stay at 1× inside a scaled shell. */ #palm .p-app .ic svg{width:calc(24px * var(--ps));height:calc(24px * var(--ps));} #palm .p-hw .k svg{width:calc(17px * var(--ps));height:calc(17px * var(--ps));} #palm .p-pad button svg{width:calc(20px * var(--ps));height:calc(20px * var(--ps));} #palm .p-bar button svg{width:calc(9px * var(--ps));height:calc(9px * var(--ps));} #palm .p-btn svg{width:calc(12px * var(--ps));height:calc(12px * var(--ps));flex:0 0 auto;} }