/* ========================================================================== CASSETTE FUTURISM — one page. Loaded on a/cassette-futurism.html. Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted. A rack of beige units: each has an engraved header, a bay number, an LED and one or more amber CRT windows carrying the record's text. The hero unit holds the badge title, a flickering CRT, three snap toggles and a cassette deck whose reels turn. The shell (rail, top bar, community drawer) is never restyled: every rule here is scoped to .cf-hero or .cf-rec; the page ground goes on .cf-page main; page state (power off, green phosphor) lives on as .cf-off / .cf-green. ========================================================================== */ @font-face { font-family: "SpaceMonoX"; src: url("fonts/space-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "DotGothicX"; src: url("fonts/dotgothic16.woff2") format("woff2"); font-weight: 400; font-display: swap; } .cf-page { --cf-beige: #D8CDB6; --cf-beige2: #C9BDA4; --cf-beige3: #E4DAC6; --cf-brown: #4A4234; --cf-crt: #1A1408; --cf-amber: #F5A623; --cf-amber-d: #8A5E14; --cf-khaki: #8A7D62; --cf-ph: #F5A623; --cf-ph-d: #8A5E14; --cf-mono: "SpaceMonoX", "Space Mono", "Courier New", monospace; --cf-dot: "DotGothicX", "DotGothic16", monospace; background: var(--paper); } .cf-page.cf-green { --cf-ph: #6BFF8A; --cf-ph-d: #1f7a37; } .cf-page main { background: var(--cf-beige2); background-image: repeating-linear-gradient(0deg, rgba(74, 66, 52, .05) 0 1px, transparent 1px 3px); color: var(--cf-brown); } /* ---- the rack: both roots share its measure ---- */ .cf-hero, .cf-rec { max-width: 1120px; margin-inline: auto; padding: 0 clamp(10px, 3vw, 24px); font: 400 16px/1.6 var(--cf-mono); color: var(--cf-brown); font-synthesis: weight style; } .cf-hero { margin-top: 24px; } .cf-rec { margin-bottom: 60px; } .cf-hero a, .cf-rec a { color: var(--cf-brown); } .cf-hero :focus-visible, .cf-rec :focus-visible { outline: 3px solid var(--cf-amber); outline-offset: 3px; } .cf-rec p { margin: 0 0 12px; } .cf-rec b { font-weight: 700; } /* ---- a unit ---- */ .cf-unit { position: relative; background: linear-gradient(180deg, var(--cf-beige3), var(--cf-beige) 60%, var(--cf-beige2)); border: 2px solid var(--cf-khaki); border-radius: 6px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(74, 66, 52, .25), 0 4px 0 var(--cf-khaki); padding: 22px clamp(16px, 3vw, 34px) 26px; margin-bottom: 18px; } .cf-unit::before, .cf-unit::after { content: ""; position: absolute; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #efe6d3, #8A7D62); box-shadow: inset 0 0 0 1px #4A4234; } .cf-unit::before { left: 10px; } .cf-unit::after { right: 10px; } .cf-eng { font: 700 12px/1 var(--cf-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cf-brown); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); } .cf-eng--sm { letter-spacing: .12em; } .cf-bayh { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--cf-khaki); } .cf-bayh h2 { margin: 0; font: 700 clamp(16px, 2vw, 20px)/1.2 var(--cf-mono); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); } .cf-no { background: var(--cf-brown); color: var(--cf-beige3); font: 700 12px/1.4 var(--cf-mono); padding: 3px 8px; border-radius: 3px; white-space: nowrap; } .cf-led { width: 12px; height: 12px; border-radius: 50%; background: var(--cf-ph); box-shadow: 0 0 8px var(--cf-ph); margin-left: auto; flex: 0 0 12px; } .cf-off .cf-led { background: #5a4a2a; box-shadow: none; } /* ---- the CRT window ---- */ .cf-crt { position: relative; background: var(--cf-crt); color: var(--cf-ph); border-radius: 14px / 18px; padding: 18px 20px; box-shadow: inset 0 0 0 4px #0c0904, inset 0 0 40px rgba(0, 0, 0, .9), 0 0 0 6px var(--cf-khaki), 0 0 0 8px var(--cf-beige3); font-family: var(--cf-dot); font-size: 17px; line-height: 1.6; text-shadow: 0 0 6px var(--cf-ph); overflow: hidden; } .cf-crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 4px); border-radius: inherit; } .cf-hero .cf-crt a, .cf-rec .cf-crt a { color: var(--cf-ph); } .cf-crt p { margin: 0 0 12px; } .cf-crt p:last-child { margin: 0; } .cf-crt .cf-dim, .cf-crt.cf-dim { color: var(--cf-ph-d); text-shadow: none; } .cf-off .cf-crt { color: transparent; text-shadow: none; } .cf-off .cf-crt * { visibility: hidden; } .cf-off .cf-crt::before { content: "— POWER OFF —"; position: absolute; inset: 0; display: grid; place-items: center; color: #5a4a2a; font-family: var(--cf-dot); visibility: visible; } @media (prefers-reduced-motion: no-preference) { .cf-crt.cf-flick { animation: cf-flick 7s steps(1) infinite; } @keyframes cf-flick { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .7; } 98% { opacity: 1; } 99% { opacity: .82; } } } /* ---- hero ---- */ .cf-hgrid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 26px; align-items: stretch; } .cf-badge { display: inline-block; background: var(--cf-brown); color: var(--cf-beige3); padding: 8px 14px; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--cf-khaki); } .cf-badge h1 { margin: 0; font: 400 clamp(28px, 4.6vw, 52px)/1.05 var(--cf-dot); letter-spacing: .06em; } .cf-stripes { height: 14px; margin: 14px 0; background: linear-gradient(var(--cf-amber) 0 33%, #e07b1a 33% 66%, var(--cf-amber-d) 66%); } .cf-hero .cf-crt { min-height: 170px; font-size: clamp(18px, 2.2vw, 24px); } .cf-cursor { display: inline-block; width: .6em; height: 1em; background: var(--cf-ph); vertical-align: -.1em; } @media (prefers-reduced-motion: no-preference) { .cf-cursor { animation: cf-blink 1s steps(1) infinite; } @keyframes cf-blink { 50% { opacity: 0; } } } .cf-deck { background: var(--cf-brown); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .5); } .cf-cass { position: relative; background: #2b251c; border-radius: 6px; padding: 12px; border: 2px solid #111; } .cf-lbl { background: var(--cf-beige3); color: var(--cf-brown); border-radius: 3px; padding: 6px 10px; font: 700 12px/1.4 var(--cf-mono); letter-spacing: .08em; display: flex; justify-content: space-between; gap: 8px; } .cf-win { margin: 10px auto 0; width: 70%; height: 54px; background: #120e08; border-radius: 28px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; } .cf-reel { width: 40px; height: 40px; border-radius: 50%; background: repeating-conic-gradient(#e4dac6 0 20deg, #2b251c 20deg 60deg); border: 4px solid #e4dac6; } @media (prefers-reduced-motion: no-preference) { .cf-playing .cf-reel { animation: cf-spin 1.2s steps(6) infinite; } @keyframes cf-spin { to { transform: rotate(360deg); } } } .cf-reg { display: flex; align-items: center; gap: 10px; font: 700 12px/1.4 var(--cf-mono); color: var(--cf-beige3); letter-spacing: .12em; } .cf-reg i { width: 22px; height: 16px; border-radius: 2px; background: #5a4a2a; display: grid; place-items: center; font-style: normal; font-size: 12px; letter-spacing: 0; color: #1a1408; } .cf-reg i.cf-on { background: var(--cf-amber); box-shadow: 0 0 8px var(--cf-amber); } /* ---- switches ---- */ .cf-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-top: 20px; } .cf-tog { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; min-width: 44px; padding: 0; } .cf-tog__body { width: 34px; height: 58px; border-radius: 6px; background: #3a3327; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); position: relative; } .cf-tog__lever { position: absolute; left: 9px; width: 16px; height: 30px; border-radius: 8px; background: linear-gradient(90deg, #b5a88d, #efe6d3, #b5a88d); top: 4px; transition: top .08s steps(1); } .cf-tog[aria-pressed="false"] .cf-tog__lever { top: 24px; } .cf-ctlnote { max-width: 22ch; line-height: 1.5; } /* ---- keys (the exits) ---- */ .cf-keys { display: flex; flex-wrap: wrap; gap: 8px; } .cf-rec .cf-key { flex: 1 1 220px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 64px; min-width: 120px; padding: 8px 12px; border-radius: 5px; background: linear-gradient(180deg, #efe6d3, #c9bda4); border: 2px solid var(--cf-khaki); box-shadow: 0 5px 0 var(--cf-khaki); text-decoration: none; color: var(--cf-brown); } .cf-key b { font: 700 13px/1.4 var(--cf-mono); letter-spacing: .14em; text-transform: uppercase; } .cf-key small { font-size: 12px; line-height: 1.5; } .cf-rec .cf-key:active { transform: translateY(5px); box-shadow: 0 0 0 var(--cf-khaki); } .cf-rec .cf-key--amber { background: linear-gradient(180deg, #ffc15c, #F5A623); color: #1a1408; } .cf-mach { font-size: 14px; } /* ---- readouts (the facts) ---- */ .cf-readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; } .cf-readouts div { margin: 0; } .cf-readouts dt { margin-bottom: 6px; } .cf-readouts dd { margin: 0; } .cf-readouts .cf-crt { font-size: 15px; padding: 10px 12px; min-height: 74px; border-radius: 8px; } /* ---- the carries table ---- */ .cf-tw { overflow-x: auto; } .cf-ct { width: 100%; border-collapse: collapse; font-size: 15px; } .cf-ct th, .cf-ct td { text-align: left; padding: 6px 8px; border-bottom: 1px dashed rgba(245, 166, 35, .35); vertical-align: top; } .cf-ct th a { text-decoration: none; } .cf-ct small { display: block; font-size: 12px; } .cf-rec .cf-tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; } .cf-swatch { display: flex; flex-wrap: wrap; gap: 4px; } .cf-swatch span { width: 74px; padding: 18px 4px 3px; font: 12px/1.2 var(--cf-mono); border: 1px solid #000; text-shadow: none; } /* ---- prose beside a CRT (scoped past .cf-rec p) ---- */ .cf-rec .cf-first { margin-top: 0; } .cf-rec .cf-after { margin: 16px 0 0; } .cf-rec .cf-nb { margin: 0 0 12px; } .cf-rec .cf-lead { margin: 0 0 12px; line-height: 1.5; } /* ---- rules ---- */ .cf-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .cf-rule { background: var(--cf-beige3); border: 2px solid var(--cf-khaki); border-radius: 4px; padding: 12px 14px; } .cf-rule h3 { margin: 0 0 6px; font: 700 14px/1.3 var(--cf-mono); letter-spacing: .14em; text-transform: uppercase; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; } .cf-rule h3 span { font-size: 12px; letter-spacing: .04em; text-transform: none; background: var(--cf-brown); color: var(--cf-beige3); padding: 1px 6px; border-radius: 2px; white-space: nowrap; align-self: flex-start; } .cf-rec .cf-rule p { margin: 0; font-size: 15px; } .cf-rule small { display: block; margin-top: 4px; font-size: 12px; color: #6b5f48; font-style: italic; } .cf-rule .cf-ctxnote { margin: 0 0 6px; } .cf-rule--ctx { grid-column: 1 / -1; background: var(--cf-beige2); } /* ---- the research table ---- */ .cf-rt { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 15px; } .cf-rt th, .cf-rt td { text-align: left; padding: 5px 8px; border-bottom: 1px dashed rgba(245, 166, 35, .35); } .cf-rt thead th { border-bottom: 2px solid var(--cf-ph); } /* ---- pairs and the foot ---- */ .cf-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; } .cf-two > .cf-unit, .cf-unit .cf-two { margin-bottom: 0; } .cf-rec .cf-foot { text-align: center; font-size: 14px; margin: 20px 0 0; } @media (max-width: 820px) { .cf-hgrid, .cf-two, .cf-readouts { grid-template-columns: 1fr; } } /* the research table drops its floor on a phone rather than scroll inside the screen */ @media (max-width: 600px) { .cf-rt { min-width: 0; } .cf-rt th, .cf-rt td { padding-inline: 5px; } } @media (prefers-reduced-motion: reduce) { .cf-hero *, .cf-rec * { animation: none !important; transition: none !important; } }