/* ========================================================================== Mean Jesse — company site (brand: "Mean Jesse"; legal entity: "Mean Jesses LLC") Plain CSS. No build step. Edit, save, refresh the browser. Design idea: a machine shop's drawing sheet for legal software. Default look = drafting paper (cream sheet, hunter-green linework, one copper signal color). Optional look = "Cutting mat" (medium green mat, pale grid and linework, yellow print), switched on by the button in the top bar. Two typefaces: Archivo (headings + body; headings use its wide cut) and IBM Plex Mono (labels, part numbers, status lines). CONTENTS 1. Design tokens (colors, fonts, sizes) <- change the look here 2. Base elements 3. Layout helpers, top bar 4. Hero 5. Section headers 6. Founder 7. Spec plates (products, open source) 8. Workshop (Sloane drawing) 9. Notes, contact, footer title block 10. Moving parts (every animation lives here) 11. Reduced motion ========================================================================== */ /* 1. Design tokens --------------------------------------------------------- */ :root { color-scheme: light; /* Drafting paper (default for every visitor) */ --paper: #F6F1E4; /* the sheet */ --panel: #ECE6D2; /* tinted paper for plates and panels */ --ink: #1C4A33; /* hunter green: text and linework */ --ink-soft: #41624F; /* secondary text */ --grid: rgba(28, 74, 51, 0.11); /* graph-paper lines */ --sheet-grid: transparent; /* grid over the whole page (cutting mat only) */ --signal: #C0681A; /* copper, for shapes (lamps, check marks, underlines) */ --signal-text: #8F4A12; /* darker copper, used wherever the accent is TEXT */ --font-text: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --step--1: 0.8125rem; --step-0: 1.0625rem; --step-1: 1.3125rem; --step-2: 1.75rem; --step-3: 2.375rem; --gutter: 1.25rem; --measure: 40rem; --stroke: 1.5px; } /* Cutting mat: switched on by script.js, which sets data-theme="mat" on */ :root[data-theme="mat"] { color-scheme: dark; --paper: #2A6E4E; /* the mat */ --panel: #246244; /* plates sit slightly darker than the mat */ --ink: #FBF8EC; --ink-soft: #DCEBDF; --grid: rgba(251, 248, 236, 0.20); --sheet-grid: rgba(251, 248, 236, 0.07); --signal: #FFD24D; /* the yellow print on a real cutting mat */ --signal-text: #FFDD7A; } /* 2. Base elements --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--paper); /* whole-page grid: invisible on paper, faint on the cutting mat */ background-image: linear-gradient(var(--sheet-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sheet-grid) 1px, transparent 1px); background-size: 40px 40px; color: var(--ink); font-family: var(--font-text); font-size: var(--step-0); line-height: 1.6; } h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 0.22em; overflow-wrap: anywhere; } a:hover { text-decoration-thickness: 4px; } :focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--ink); color: var(--paper); } /* Small mono label, used all over the sheet */ .sec-no, .plate__no, .spec dt, .readout__title, .legend__title, .titleblock dt, .links__label, .topbar__brand, .site-nav, .switch, .prompt, .drawing figcaption, .rev-switch button, .tools__title, .tool__meta, .reel__label { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; } .skip-link { position: absolute; left: var(--gutter); top: -5rem; z-index: 10; padding: 0.5rem 0.9rem; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0.5rem; } /* indicator lamp: filled = live, hollow = not live yet */ .lamp { position: relative; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.6em; border-radius: 50%; box-shadow: 0 0 0 var(--stroke) var(--ink); vertical-align: 0.05em; } .lamp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--signal); } .lamp--off::after { display: none; } /* 3. Layout helpers, top bar ---------------------------------------------- */ .wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); } .section { padding-top: 4rem; scroll-margin-top: 0; } .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding-block: 1rem; } .topbar__brand { font-weight: 600; margin-right: auto; display: none; } /* small screens: switches on the first row, jump links underneath (the big wordmark is right below) */ .site-nav { order: 3; flex-basis: 100%; } .switches { display: flex; flex-wrap: wrap; gap: 0.5rem; } @media (min-width: 40rem) { .topbar__brand { display: block; } } @media (min-width: 64rem) { .site-nav { order: 0; flex-basis: auto; } } .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; } .site-nav a { display: inline-block; padding-block: 0.4rem; text-decoration-color: transparent; } .site-nav a:hover { text-decoration-color: var(--signal); text-decoration-thickness: 2px; } .switch { padding: 0.45rem 0.7rem; border: var(--stroke) solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink); cursor: pointer; } .switch--mat::before { /* small swatch showing the other sheet color */ content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.55em; background: #2A6E4E; box-shadow: 0 0 0 var(--stroke) var(--ink); } :root[data-theme="mat"] .switch--mat::before { background: #F6F1E4; } .switch:hover { background: var(--panel); } .switch[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .switch--mat[aria-pressed="true"] { background: transparent; color: var(--ink); } @media (min-width: 48rem) { :root { --gutter: 2.5rem; } .section { padding-top: 6rem; } } /* 4. Hero ------------------------------------------------------------------ */ .hero { position: relative; margin-top: 0.75rem; padding: 1.75rem 1.25rem 2rem; border: var(--stroke) solid var(--ink); /* graph paper, used only here and behind the Sloane drawing */ background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px; background-position: -1px -1px; } /* registration marks on the four corners of the hero frame */ .reg { position: absolute; width: 19px; height: 19px; border: var(--stroke) solid var(--ink); border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 27px var(--stroke) no-repeat, linear-gradient(var(--ink), var(--ink)) center / var(--stroke) 27px no-repeat, var(--paper); } .reg--tl { top: -10px; left: -10px; } .reg--tr { top: -10px; right: -10px; } .reg--bl { bottom: -10px; left: -10px; } .reg--br { bottom: -10px; right: -10px; } .gears { display: none; } .gears .g-ln { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; } .gears .g-fill { fill: none; } /* outlines only, so the meshing teeth stay visible */ .gears .g-thin { stroke-width: 1.1; } .gear { transform-box: fill-box; transform-origin: center; } @media (min-width: 76rem) { /* sits beside the wordmark, clear of the status readout below it */ .gears { display: block; position: absolute; top: 1.9rem; right: 3.5rem; width: 10.5rem; height: auto; } } .prompt { color: var(--ink-soft); text-transform: none; letter-spacing: 0.02em; } .prompt--end { margin-top: 1.5rem; } .cursor { display: inline-block; width: 0.62em; height: 1.1em; background: var(--signal); vertical-align: text-bottom; } .brand { margin-top: 1.25rem; font-weight: 900; font-stretch: 125%; /* one line, "MEAN JESSE", about 8.34em wide. Sized so it always fits inside the hero frame (screen width minus gutters, padding and borders, divided by the wordmark's width), and capped at 5.25rem so it leads the hero without taking over the sheet */ font-size: min(calc((100vw - 5.4rem) / 8.45), 5.25rem); white-space: nowrap; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; } .hero__cols { margin-top: 1.75rem; display: grid; gap: 2rem; } .lead { max-width: 26em; font-weight: 500; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); line-height: 1.3; letter-spacing: -0.005em; } .hero__about { margin-top: 1rem; max-width: var(--measure); color: var(--ink-soft); } .readout { align-self: end; padding: 1rem 1.1rem 1.1rem; border: var(--stroke) solid var(--ink); background: var(--paper); font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.4; } .readout__title { padding-bottom: 0.6rem; margin-bottom: 0.7rem; border-bottom: var(--stroke) solid var(--ink); font-weight: 600; } .readout li { display: flex; align-items: baseline; gap: 0.5rem; } .readout li + li { margin-top: 0.45rem; } .readout a { font-weight: 600; white-space: nowrap; text-decoration-thickness: 1px; } .readout__dots { flex: 1; min-width: 0.75rem; border-bottom: 2px dotted var(--ink-soft); transform: translateY(-0.25em); opacity: 0.6; } .readout__val { text-align: right; text-transform: uppercase; letter-spacing: 0.04em; } @media (min-width: 48rem) { .hero { padding: 2.5rem 2.5rem 2.75rem; } .brand { font-size: min(calc((100vw - 10.4rem) / 8.45), 5.25rem); } .hero__cols { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: 3rem; margin-top: 2.5rem; } } @media (min-width: 72rem) { .hero { padding: 3rem 3.5rem 3.5rem; } } /* 5. Section headers -------------------------------------------------------- */ .sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-bottom: 2rem; } .sec-no { color: var(--signal-text); font-weight: 600; } .sec-head h2 { font-weight: 800; font-stretch: 125%; font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.005em; text-transform: uppercase; } /* a dimension line: rule with a tick at each end */ .dim { flex: 1; min-width: 3rem; height: 0.8rem; border-inline: var(--stroke) solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) center / 100% var(--stroke) no-repeat; align-self: center; } @media (min-width: 48rem) { .sec-head { margin-bottom: 2.75rem; } .sec-head h2 { font-size: var(--step-3); } } /* 6. Founder ---------------------------------------------------------------- */ .founder__name { font-weight: 700; font-stretch: 112%; font-size: var(--step-2); line-height: 1.15; letter-spacing: -0.01em; } .founder__name span { white-space: nowrap; } .founder__story { margin-top: 1rem; max-width: var(--measure); } @media (min-width: 64rem) { .founder { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, var(--measure)); gap: 3rem; } .founder__story { margin-top: 0.35rem; } } /* 7. Spec plates (products, open source) ----------------------------------- */ .plates { display: grid; gap: 1.5rem; } .plate { position: relative; padding: 1.75rem 1.5rem 1.6rem; border: var(--stroke) solid var(--ink); border-radius: 6px; background-color: var(--panel); scroll-margin-top: 1.5rem; } /* slotted screw in each corner (they turn when the plate is hovered; see section 10) */ .screw { position: absolute; width: 13px; height: 13px; border: var(--stroke) solid var(--ink); border-radius: 50%; background: linear-gradient(var(--ink), var(--ink)) center / 100% var(--stroke) no-repeat, var(--paper); transform: rotate(-25deg); } .screw--tl { top: 7px; left: 7px; } .screw--tr { top: 7px; right: 7px; transform: rotate(40deg); } .screw--bl { bottom: 7px; left: 7px; transform: rotate(10deg); } .screw--br { bottom: 7px; right: 7px; transform: rotate(-60deg); } .plate__no { color: var(--ink-soft); } .plate__name { margin-top: 0.35rem; font-weight: 800; font-stretch: 112%; font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.015em; overflow-wrap: anywhere; } .spec { margin-top: 1.1rem; } .spec > div { padding-block: 0.85rem; border-top: var(--stroke) solid var(--ink); } .spec > div:last-child { padding-bottom: 0; } .spec dt { color: var(--ink-soft); margin-bottom: 0.3rem; } .spec dd { font-size: 1rem; line-height: 1.55; } .spec__status { font-family: var(--font-mono); font-size: 0.875rem !important; line-height: 1.55; } /* demo reel: a video set into the plate like an inset on the drawing sheet. aspect-ratio reserves the 16:9 space, so nothing jumps when the poster arrives. */ .reel { margin-top: 1.5rem; } .reel__label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; color: var(--ink-soft); } .reel__frame { /* corner ticks, drawn outside the screen's rule */ --tick: linear-gradient(var(--ink), var(--ink)); padding: 7px; background: var(--tick) top left / 16px var(--stroke) no-repeat, var(--tick) top left / var(--stroke) 16px no-repeat, var(--tick) top right / 16px var(--stroke) no-repeat, var(--tick) top right / var(--stroke) 16px no-repeat, var(--tick) bottom left / 16px var(--stroke) no-repeat, var(--tick) bottom left / var(--stroke) 16px no-repeat, var(--tick) bottom right / 16px var(--stroke) no-repeat, var(--tick) bottom right / var(--stroke) 16px no-repeat; } .reel__screen { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border: var(--stroke) solid var(--ink); /* graph paper shows if a poster ever fails to load, so the plate still looks intended */ background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px; overflow: hidden; } /* sits behind the video: only seen while a poster is loading, or if it fails to load */ .reel__screen::before { content: "Demo reel"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; } .reel--pending .reel__screen::before { content: none; } .reel__screen video { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; } .reel--pending .reel__screen { border-style: dashed; } .reel__stamp { display: grid; gap: 0.1rem; padding: 0.45rem 0.8rem; border: 3px double var(--signal-text); border-radius: 4px; background: var(--paper); color: var(--signal-text); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; text-align: center; transform: rotate(-4deg); } @media (min-width: 64rem) { /* wide screens: each product is a full-width row, spec on the left, demo reel on the right */ .plates .plate { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3rem; align-items: center; padding: 2.25rem 2.5rem; } .plates .reel { margin-top: 0; } } /* open-source "shop tools" strip: one compact row per tool */ .tools { margin-top: 2.25rem; scroll-margin-top: 1.5rem; } .tools__title { color: var(--ink-soft); padding-bottom: 0.6rem; border-bottom: var(--stroke) solid var(--ink); } .tool { display: grid; gap: 0.35rem; padding-block: 0.9rem; border-bottom: var(--stroke) solid var(--ink); font-size: 1rem; line-height: 1.5; } .tool__name { font-weight: 800; font-stretch: 112%; font-size: 1.125rem; letter-spacing: -0.005em; overflow-wrap: anywhere; } .tool__meta { color: var(--ink-soft); white-space: nowrap; } .tool__link { font-size: 0.9375rem; } @media (min-width: 64rem) { .tool { grid-template-columns: 13rem minmax(0, 1fr) auto auto; column-gap: 2rem; align-items: baseline; } } /* 8. Workshop (Sloane drawing) ---------------------------------------------- */ .workshop { display: grid; gap: 2.5rem; } .workshop__text { max-width: var(--measure); } .workshop__name { margin: 0 0 1rem; font-size: var(--step-3); } .workshop__text p + p { margin-top: 1rem; } .legend { margin-top: 1.75rem; padding-top: 1rem; border-top: var(--stroke) solid var(--ink); } .legend__title { color: var(--ink-soft); margin-bottom: 0.75rem; } .legend ol { counter-reset: part; display: grid; gap: 0.55rem; } .legend li { counter-increment: part; display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.35; } .legend li::before { /* a balloon matching the numbered balloons on the drawing */ content: counter(part); flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: var(--stroke) solid var(--ink); border-radius: 50%; background: var(--paper); font-weight: 600; letter-spacing: 0; } .drawing { position: relative; padding: 4.25rem 0.5rem 1rem; /* room at the top for the stamp on small screens */ border: var(--stroke) solid var(--ink); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px; background-position: -1px -1px; } .drawing svg { display: block; width: 100%; max-width: 35rem; height: auto; margin-inline: auto; } .drawing figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 1rem -0.5rem -1rem; padding: 0.7rem 1rem; border-top: var(--stroke) solid var(--ink); background: var(--paper); color: var(--ink-soft); } /* revision switch: two joined buttons, like the revision box on a drawing sheet */ .rev-switch { display: flex; } .rev-switch[hidden] { display: none; } .rev-switch button { padding: 0.4rem 0.65rem; border: var(--stroke) solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; } .rev-switch button + button { border-left: 0; } .rev-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .rev-switch button:focus-visible { position: relative; z-index: 1; } /* which revision is showing (instant swap; section 10 turns the swap into an assembly). Rev A pushes every part away from its seat by the offsets written on it in index.html. */ .drawing .pc { transform-box: fill-box; transform-origin: center; } .drawing[data-rev="a"] .pc { transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px)) rotate(var(--r, 0deg)); } .drawing[data-rev="a"] .only-b, .drawing[data-rev="a"] .leader, .drawing[data-rev="a"] .balloon, .drawing[data-rev="b"] .only-a { opacity: 0; } .drawing.no-anim * { transition: none !important; } /* drawing styles */ .drawing .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .drawing .ln--thin { stroke-width: 1.25; } .drawing .ln--sig { stroke: var(--signal); stroke-width: 4; } .drawing .pt { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; } .drawing .pt--panel{ fill: var(--panel); } .drawing .sig { fill: var(--signal); stroke: var(--ink); stroke-width: 1.5; } .drawing .lbl { fill: var(--ink-soft); font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .drawing .lbl--end { text-anchor: end; } .drawing .lbl--mid { text-anchor: middle; } /* on small screens the part labels would shrink below a readable size, so they are left off (the drawing reads fine without them, and the SVG description still names every part) */ @media (max-width: 34rem) { .drawing .labels { display: none; } } .drawing .dash { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 3 4; } .drawing .cl { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 18 4 3 4; opacity: 0.45; } .drawing .arrow { fill: var(--ink); } .drawing .num { fill: var(--ink); font-family: var(--font-mono); font-size: 17px; font-weight: 600; text-anchor: middle; } .stamp { position: absolute; top: 0.9rem; right: 0.6rem; z-index: 1; display: grid; gap: 0.1rem; padding: 0.45rem 0.7rem; border: 3px double var(--signal-text); border-radius: 4px; background: var(--paper); color: var(--signal-text); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; text-align: center; transform: rotate(-4deg); } @media (min-width: 30rem) { .drawing { padding-top: 1.5rem; } .stamp { font-size: 0.8125rem; top: 1.25rem; right: 1rem; } } @media (min-width: 64rem) { .workshop { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: 4rem; align-items: start; } } /* 9. Notes, contact, footer title block ------------------------------------- */ .notes { counter-reset: note; display: grid; gap: 1.75rem; } .notes li { counter-increment: note; padding-top: 1rem; border-top: var(--stroke) solid var(--ink); } .notes li::before { content: "Note " counter(note); display: block; margin-bottom: 0.6rem; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .notes h3 { font-weight: 700; font-stretch: 112%; font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.005em; margin-bottom: 0.5rem; } .notes p { max-width: 26rem; } @media (min-width: 64rem) { .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } } .links { display: grid; gap: 0.75rem; } .links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 1rem; } .links__label { min-width: 6.5rem; color: var(--ink-soft); } .footer { padding-top: 5rem; padding-bottom: 3rem; } @media (min-width: 48rem) { .footer { padding-top: 7rem; } } .titleblock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--stroke) solid var(--ink); /* cell rules are drawn with a 1.5px gap over an ink background */ gap: var(--stroke); background: var(--ink); } .titleblock > div { padding: 0.7rem 0.9rem 0.8rem; background: var(--paper); } .titleblock dt { color: var(--ink-soft); margin-bottom: 0.15rem; } .titleblock dd { font-weight: 600; line-height: 1.3; } @media (min-width: 48rem) { .titleblock { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .footer__fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 2rem; margin-top: 1rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); } /* 10. Moving parts ------------------------------------------------------------ Every animation on the site is in this section. Rules of the house: - only transform, opacity and stroke-dashoffset are animated; - everything sits inside "prefers-reduced-motion: no-preference", so visitors who ask their system for less motion get a still page in its final state; - anything that starts hidden needs the "motion" class, which script.js puts on . No JavaScript (or motion paused) = nothing is ever hidden. */ @media (prefers-reduced-motion: no-preference) { /* plates: screws give a quarter turn and the plate lifts slightly on hover or keyboard focus */ .plate { transition: transform 0.25s ease; } .screw { transition: transform 0.5s cubic-bezier(0.3, 0, 0.2, 1); } .plate:hover, .plate:focus-within { transform: translateY(-3px); } .plate:hover .screw--tl, .plate:focus-within .screw--tl { transform: rotate(65deg); } .plate:hover .screw--tr, .plate:focus-within .screw--tr { transform: rotate(130deg); } .plate:hover .screw--bl, .plate:focus-within .screw--bl { transform: rotate(100deg); } .plate:hover .screw--br, .plate:focus-within .screw--br { transform: rotate(30deg); } /* hero boot sequence: the DOS command types out once, then the readout rows come up one by one */ .motion .typed span { opacity: 0; animation: appear 1ms linear forwards; animation-delay: calc(0.6s + var(--i) * 70ms); } .motion .readout li { opacity: 0; animation: appear 0.12s linear forwards; animation-delay: calc(1.9s + var(--i) * 0.24s); } .motion .prompt--end { opacity: 0; animation: appear 1ms linear forwards; animation-delay: 3s; } /* the cursor blinks four times, then stays on (nothing blinks for more than 5 seconds) */ .motion .cursor { animation: blink 1.1s steps(1, end) 3s 4; } /* status lamps: slow, shallow pulse */ .motion .lamp::after { animation: pulse 3.6s ease-in-out infinite alternate; } /* hero gears: meshed 16-tooth and 10-tooth gears, so their speeds are in the ratio 10:16 */ .motion .gear--a { animation: turn 120s linear infinite; } .motion .gear--b { animation: turn 75s linear infinite reverse; } /* section rules draw themselves from the left when they scroll into view */ .motion .sec-head .dim { transform: scaleX(0); transform-origin: left center; } .motion .sec-head.in-view .dim { animation: grow 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } /* Sloane drawing: Rev A -> Rev B is an assembly. Each part slides and turns along its guide line into its seat, one after another (--i is its turn), with a small overshoot so it "settles". Then the guide lines fade, the callout leaders draw, the balloons pop and the check mark draws. */ .motion .drawing .pc { transition: transform 0.95s cubic-bezier(0.5, 0, 0.2, 1.12) calc(var(--i) * 0.18s); } .motion .drawing .guides { transition: opacity 0.3s linear 2.4s; } .motion .drawing .labels { transition: opacity 0.25s linear; } .motion .drawing .settle { transition: opacity 0.3s linear 2.7s; } .motion .drawing .leader { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s ease calc(2.8s + var(--n) * 0.2s), opacity 0s linear calc(2.8s + var(--n) * 0.2s); } .motion .drawing .balloon { transform-box: fill-box; transform-origin: center; transition: opacity 0.2s linear, transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1); transition-delay: calc(3.15s + var(--n) * 0.2s); } .motion .drawing .check { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.6s ease 3.9s; } /* going back to Rev A: callouts leave at once, guide lines return at once, labels wait for the parts */ .motion .drawing[data-rev="a"] .guides, .motion .drawing[data-rev="a"] .settle { transition-delay: 0s; } .motion .drawing[data-rev="a"] .labels { transition-delay: 2.5s; } .motion .drawing[data-rev="a"] .leader { stroke-dashoffset: 1; transition-delay: 0s; } .motion .drawing[data-rev="a"] .balloon { transform: scale(0.4); transition-delay: 0s; } .motion .drawing[data-rev="a"] .check { stroke-dashoffset: 1; transition-delay: 0s; } /* small signs of life, slow and shallow: signal arcs always; lens blink and stamp press once assembled */ .motion .signal--1 { animation: signal 4s ease-in-out infinite; } .motion .signal--2 { animation: signal 4s ease-in-out 0.5s infinite; } .motion .drawing[data-rev="b"] .blink { transform-box: fill-box; transform-origin: center; animation: eyeblink 7s ease-in-out 4s infinite; } .motion .drawing[data-rev="b"] .press { animation: press 11s ease-in-out 6s infinite; } } @keyframes appear { to { opacity: 1; } } @keyframes blink { 50% { opacity: 0; } } @keyframes pulse { from { opacity: 1; } to { opacity: 0.45; } } @keyframes turn { to { transform: rotate(360deg); } } @keyframes grow { to { transform: scaleX(1); } } @keyframes signal { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } } @keyframes eyeblink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(0.1); } } @keyframes press { 0%, 88%, 100% { transform: translateY(0); } 92%, 95% { transform: translateY(4px); } } /* 11. Reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } /* nothing to pause, so the pause button is not shown */ #motion-switch { display: none; } }