/* ============================================================ v6 machines — the five hardware frames, pure CSS, no images. Frame anatomy: #frame.m-.dev- > #rig > #screen + #frame-deck The engine keeps --scr-px on #frame equal to #screen's width. ============================================================ */ #rig { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; } #rig.swap { animation: rig-in .55s ease; } @keyframes rig-in { from { transform: translateY(7px); } } #frame.morph #frame-deck, #frame.morph #dev-badge { animation: deck-in .65s ease backwards; } @keyframes deck-in { from { opacity: 0; } } #screen { position: relative; overflow: hidden; width: 100%; height: auto; aspect-ratio: 4 / 3; max-width: min(var(--scr-w, 1000px), 100%); max-height: calc(100% - var(--deck-h, 0px)); background: #000; min-height: 0; transition: border-width .55s ease, border-color .55s ease, border-radius .55s ease, outline-width .55s ease, outline-color .55s ease, max-width .55s ease, aspect-ratio .55s ease, box-shadow .55s ease; } #frame-deck { flex: none; position: relative; transition: width .55s ease, height .55s ease, border-radius .55s ease; } .m-crt { --deck-h: 44px; } .m-lcd { --deck-h: 78px; } .m-laptop { --deck-h: 28px; } .m-alu { --deck-h: 19px; } .m-glass { --deck-h: 0px; } /* ============ MACHINE: CRT (1992–2000) ============ */ #frame.m-crt { background: radial-gradient(120% 130% at 50% -10%, #2b2620, #17151250 60%), #131110; } .m-crt #screen { border-radius: 20px; border: 15px solid #d3ccba; outline: 4px solid #aaa390; box-shadow: inset 0 0 70px rgba(0, 0, 0, .9), 0 26px 70px rgba(0, 0, 0, .6), inset 0 0 3px rgba(255, 255, 255, .25); } .m-crt #screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 60; border-radius: 8px; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .42) 100%); } .dev-crt-a #screen { --scr-w: 820px; aspect-ratio: 4 / 3.15; } .dev-crt-b #screen { --scr-w: 1010px; aspect-ratio: 4 / 3; border-color: #cdc8b8; } .m-crt #frame-deck { width: calc(var(--scr-px, 700px) * .96); height: 40px; background: linear-gradient(180deg, #cfc8b5, #b3ac99); border-radius: 3px 3px 10px 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .55); margin-top: 2px; } .m-crt #frame-deck::before { content: ""; position: absolute; left: 18px; top: 11px; width: 130px; height: 18px; background: repeating-linear-gradient(90deg, #9a937f 0 3px, transparent 3px 7px); border-radius: 2px; opacity: .8; } .m-crt #frame-deck::after { content: "DANTRON"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 600 9px/1 var(--mono); letter-spacing: .3em; color: #6d6754; } .m-crt #frame-deck .led { position: absolute; right: 92px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: #4bd05e; box-shadow: 0 0 9px #4bd05e; } /* the TURBO button — every proper beige tower had one */ #turbo-btn { display: none; position: absolute; left: 162px; top: 50%; transform: translateY(-50%); height: 24px; padding: 0 9px; align-items: center; gap: 7px; font: 700 8.5px/1 var(--mono); letter-spacing: .2em; color: #57524a; background: linear-gradient(180deg, #c9c2b0, #a9a28f); border: 1px solid #8f8875; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 3px rgba(0, 0, 0, .3); cursor: pointer; } .m-crt #turbo-btn { display: flex; } #turbo-btn i { width: 7px; height: 7px; border-radius: 50%; background: #6d675a; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); transition: background .2s, box-shadow .2s; } #turbo-btn.on i { background: #ffb347; box-shadow: 0 0 8px #ffb347; } #turbo-btn:active { box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3); transform: translateY(calc(-50% + 1px)); } /* silkscreen credit — etched into the case, like all honest hardware */ #deck-etch { display: none; } .m-crt #deck-etch { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 7.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #857e6a; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); white-space: nowrap; pointer-events: none; } @media (max-width: 980px) { #deck-etch { display: none !important; } } /* ============ MACHINE: LCD (2001–2006) ============ */ #frame.m-lcd { background: radial-gradient(120% 130% at 50% -10%, #232830, #14161a 65%), #101216; } .m-lcd #screen { --scr-w: 900px; aspect-ratio: 5 / 4; border-radius: 10px; border: 13px solid #c7cad0; outline: 3px solid #989ca4; box-shadow: inset 0 0 26px rgba(0, 0, 0, .55), 0 22px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .8); } .m-lcd #frame-deck { width: var(--scr-px, 700px); height: 76px; } .m-lcd #frame-deck::before { content: ""; position: absolute; left: 50%; top: -2px; transform: translateX(-50%); width: 52px; height: 52px; background: linear-gradient(90deg, #9ea2aa, #d4d7dc 50%, #9ea2aa); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); } .m-lcd #frame-deck::after { content: ""; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 220px; height: 16px; border-radius: 99px; background: linear-gradient(180deg, #c9ccd2, #8f939b); box-shadow: 0 12px 26px rgba(0, 0, 0, .55); } /* ============ MACHINE: WHITE LAPTOP (2007–2012) ============ */ #frame.m-laptop { background: radial-gradient(120% 130% at 50% -10%, #26282c, #151619 65%), #111214; } .m-laptop #screen { --scr-w: 1080px; aspect-ratio: 16 / 10; border-radius: 16px 16px 4px 4px; border: 14px solid #eef0f3; outline: 2px solid #c6cad0; box-shadow: inset 0 0 22px rgba(0, 0, 0, .5), 0 18px 55px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .9); } .m-laptop #screen::before { content: ""; position: absolute; left: 50%; top: -10px; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #aeb4bc; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); z-index: 70; } .m-laptop #frame-deck { width: calc(var(--scr-px, 800px) * 1.14); height: 26px; background: linear-gradient(180deg, #f4f5f7, #d5d9de 70%, #b9bec5); border-radius: 2px 2px 18px 18px; box-shadow: 0 16px 36px rgba(0, 0, 0, .55), inset 0 1px 0 #fff; } .m-laptop #frame-deck::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 110px; height: 9px; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #c3c8ce, #dde0e4); } /* ============ MACHINE: ALUMINUM (2013–2023) ============ */ #frame.m-alu { background: radial-gradient(120% 130% at 50% -10%, #1e2024, #121316 65%), #0e0f11; } .m-alu #screen { --scr-w: 1180px; aspect-ratio: 16 / 10; border-radius: 12px 12px 3px 3px; border: 11px solid #101114; outline: 2px solid var(--alu-edge, #c9ccd2); box-shadow: inset 0 0 18px rgba(0, 0, 0, .6), 0 16px 50px rgba(0, 0, 0, .6); } .m-alu #frame-deck { width: calc(var(--scr-px, 900px) * 1.12); height: 17px; background: linear-gradient(180deg, var(--alu-a, #d2d5da), var(--alu-b, #a7abb2)); border-radius: 2px 2px 12px 12px; box-shadow: 0 14px 32px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5); } .m-alu #frame-deck::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 96px; height: 7px; border-radius: 0 0 9px 9px; background: rgba(0, 0, 0, .18); } .dev-alu-a { --alu-a: #d5d8dd; --alu-b: #aaaeb5; --alu-edge: #cdd0d6; } .dev-alu-b { --alu-a: #85888f; --alu-b: #5f6269; --alu-edge: #8a8d94; } .dev-alu-c { --alu-a: #4a4d55; --alu-b: #33363d; --alu-edge: #565962; } /* ============ MACHINE: GLASS (2024+) ============ */ #frame.m-glass { background: radial-gradient(70% 60% at 50% 30%, rgba(94, 232, 216, .05), transparent 70%), #060708; } .m-glass #screen { --scr-w: 880px; aspect-ratio: 4 / 3.2; border-radius: 26px; border: 9px solid rgba(22, 26, 31, .96); outline: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 70px rgba(94, 232, 216, .05); animation: glass-fade 4s ease 3s forwards; } .m-glass #screen::before { content: ""; position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .16); z-index: 70; } @keyframes glass-fade { to { outline-color: rgba(255, 255, 255, .05); border-color: rgba(14, 16, 19, .9); } } .m-glass #frame-deck { display: none; } /* ============ badge ============ */ #dev-badge { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: #999da6; text-transform: uppercase; white-space: nowrap; display: flex; align-items: center; gap: 10px; pointer-events: none; } #dev-badge .led { width: 7px; height: 7px; border-radius: 50%; background: #46d05a; box-shadow: 0 0 8px #46d05a; } .m-glass #dev-badge .led { background: #5ee8d8; box-shadow: 0 0 8px #5ee8d8; } /* ============ minimal-frames tweak ============ */ body.frames-min #frame-deck, body.frames-min #dev-badge { display: none; } body.frames-min #screen { border-width: 4px !important; outline-width: 1px !important; border-radius: 12px !important; } /* ============ small screens: frame slims to a hint ============ */ @media (max-width: 720px), (max-height: 540px) { #frame { padding: 8px !important; } #screen { aspect-ratio: auto !important; height: 100%; max-width: 100% !important; border-width: 5px !important; outline-width: 2px !important; border-radius: 12px !important; } #frame-deck, #dev-badge { display: none; } #rig { height: 100%; } } @media (prefers-reduced-motion: reduce) { #rig.swap { animation: none; } .m-glass #screen { animation: none; } #screen, #frame-deck { transition: none; } }