/* What's in my bag? · a flat lay of everything I carry, drawn like stickers */ :root { --cream: #FAF1EF; --paper: #FFFBF8; --ink: #3A2626; --ink-2: #5E4A45; --muted: #76625C; /* 5.1:1 on cream, 5.6:1 on paper (WCAG AA) */ --plum: #76344E; --plum-deep: #3B1524; --rose: #F2C6C8; --pink: #F4A7B9; --lilac: #D9C8F0; --mint: #CDE6D0; --butter: #F8E7A9; --sky: #CFE3F3; --gold: #D9A441; --lv-brown: #5A3A26; --lv-red: #B3263E; --burnt: #BF5700; --line: rgba(58, 38, 38, .14); --serif: "Bodoni Moda", Didot, Georgia, serif; --sans: "Instrument Sans", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --hand: "Caveat", "Bradley Hand", cursive; --ease: cubic-bezier(.2, .8, .2, 1); } * { box-sizing: border-box; } body { margin: 0; min-height: 100svh; background: var(--cream); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body::before { /* paper grain */ content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .45; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .46 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; } .mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; } .hand { font-family: var(--hand); } .link { background: none; border: 0; padding: 0; color: var(--plum); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; } /* ---------- header & intro ---------- */ .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px clamp(16px, 4vw, 48px); position: relative; z-index: 2; } .top .me { font-family: var(--serif); font-size: 1.2rem; text-decoration: none; } .top .me i { color: var(--plum); } .top p { margin: 0; color: var(--muted); } .intro { text-align: center; padding: clamp(12px, 3vw, 32px) 16px 0; position: relative; z-index: 2; } .intro h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 8vw, 6.4rem); line-height: .95; letter-spacing: -.02em; } .intro h1 .q { font-family: var(--hand); font-weight: 700; color: var(--plum); font-size: .7em; letter-spacing: 0; } .intro h1 em { color: var(--pink); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; } .lede { max-width: 46ch; margin: 14px auto 0; color: var(--ink-2); } /* ---------- the stage: a flat lay ---------- */ .stage { position: relative; z-index: 2; width: min(1180px, calc(100% - 32px)); aspect-ratio: 16 / 13.5; /* everything on the table is drawn to one real-world scale: the backpack (~32 cm) is 30% wide */ margin: clamp(16px, 3vw, 32px) auto 0; } .doodles { position: absolute; inset: 0; pointer-events: none; } .doodles svg { position: absolute; opacity: .7; } .bag { position: absolute; left: 50%; top: 47%; width: 30%; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; z-index: 3; transition: width .7s var(--ease), top .7s var(--ease); } .bag-art { display: block; filter: drop-shadow(0 18px 18px rgba(59, 21, 36, .18)); animation: bob 2.6s ease-in-out infinite; } .bag-art { animation-duration: 3.4s; } .bag:focus-visible { outline: none; } .bag:focus-visible .bag-art { outline: 3px dashed var(--plum); outline-offset: 10px; border-radius: 30px; } .bag-hint { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font-size: 1.6rem; color: var(--plum); margin-top: 6px; } @keyframes bob { 50% { transform: translateY(-8px) rotate(-1deg); } } @keyframes wiggle { 0% { transform: rotate(-2deg); } 100% { transform: rotate(2deg); } } /* ---------- the things that fall out ---------- */ .items { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; } .item { --l: 50%; --t: 50%; --w: 12%; --r: 0deg; position: absolute; left: var(--l); top: var(--t); width: var(--w); transform: translate(-50%, -50%) rotate(var(--r)); opacity: 0; pointer-events: none; z-index: 2; } .item.out { pointer-events: auto; } .item.out { opacity: 1; } .item button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; } .item .art { filter: drop-shadow(0 12px 10px rgba(59, 21, 36, .18)); transition: transform .35s var(--ease); } .item button:hover .art, .item button:focus-visible .art { animation: boil .36s steps(2) infinite; transform: translateY(-8px) scale(1.05); } .item button:focus-visible { outline: none; } .item button:focus-visible .art { outline: 3px dashed var(--plum); outline-offset: 8px; border-radius: 12px; } @keyframes boil { 0% { rotate: -1.6deg; } 100% { rotate: 1.6deg; } } .item .tag { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%) rotate(calc(var(--r) * -1)); white-space: nowrap; pointer-events: none; font-family: var(--hand); font-size: clamp(1rem, 1.5vw, 1.35rem); color: var(--ink); background: var(--paper); padding: 1px 10px 3px; border-radius: 999px; box-shadow: 0 4px 10px -6px rgba(0,0,0,.3); opacity: 0; transition: opacity .25s; } .item button:hover .tag, .item button:focus-visible .tag { opacity: 1; } .after { text-align: center; color: var(--muted); margin: 18px 0 0; position: relative; z-index: 2; } /* the bag charm (my hand sanitizer holder) hangs off the bag */ .charm { position: absolute; left: -4%; top: 44%; width: 19%; z-index: 4; transform-origin: 50% 0; animation: swing 3s ease-in-out infinite; cursor: pointer; } .charm svg { filter: drop-shadow(0 6px 6px rgba(59, 21, 36, .25)); } .charm:focus-visible { outline: 3px dashed var(--plum); outline-offset: 4px; border-radius: 12px; } @keyframes swing { 50% { transform: rotate(8deg); } } /* ---------- sheet ---------- */ dialog.sheet { width: min(760px, calc(100vw - 24px)); max-height: calc(100svh - 32px); padding: 0; border: 3px solid var(--ink); border-radius: 26px; background: var(--paper); color: var(--ink); overflow: auto; box-shadow: 10px 12px 0 var(--ink); } dialog.sheet::backdrop { background: rgba(59, 21, 36, .3); backdrop-filter: blur(4px); } dialog.sheet[open] { animation: pop .42s var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.96) rotate(-1deg); } } .sheet-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 2px solid var(--ink); position: sticky; top: 0; background: var(--paper); z-index: 3; } .x { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); background: var(--rose); cursor: pointer; font-size: 1.1rem; line-height: 1; } .x:hover { background: var(--ink); color: var(--cream); } .sheet-body { padding: clamp(18px, 3vw, 30px); } .sheet-body h2 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.05; } .sheet-body h2 em { color: var(--plum); } .sheet-body .note { margin: 0 0 18px; font-family: var(--hand); font-size: 1.45rem; color: var(--plum); line-height: 1.15; } .sheet-body p { color: var(--ink-2); } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); text-decoration: none; font-weight: 500; font-size: .9rem; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s; } .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); } .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } .btn.solid { background: var(--pink); } .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; } .stats div { border: 2px solid var(--ink); border-radius: 16px; padding: 12px; background: var(--cream); } .stats b { display: block; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; line-height: 1; color: var(--plum); } .stats span { font-size: .8rem; color: var(--ink-2); } .shot { border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; margin: 12px 0; } .todo { background: var(--butter); border-radius: 4px; padding: 0 4px; font-family: var(--mono); font-size: .8em; } /* headphones: equalizer */ .eq { display: flex; gap: 5px; align-items: flex-end; height: 42px; margin: 6px 0 14px; } .eq i { flex: 1; background: var(--pink); border: 2px solid var(--ink); border-radius: 4px 4px 0 0; animation: eq 1s steps(4) infinite; } .eq i:nth-child(2n) { animation-duration: .8s; background: var(--lilac); } .eq i:nth-child(3n) { animation-duration: 1.3s; background: var(--mint); } @keyframes eq { 0% { height: 20%; } 50% { height: 100%; } 100% { height: 40%; } } /* lipstick: loves & skips */ .lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .lists > div { border: 2px solid var(--ink); border-radius: 18px; padding: 14px 16px; } .lists .love { background: var(--rose); } .lists .skip { background: var(--cream); } .lists h3 { margin: 0 0 6px; font-family: var(--hand); font-size: 1.6rem; } .lists ul { margin: 0; padding-left: 18px; } .lipstick-big { width: 120px; margin: 0 auto 8px; } .lipstick-big .cap { transition: transform .9s var(--ease); } /* the cap lifts straight up, then sets down beside the tube, upright */ .lipstick-big.off .cap { transform: translate(76px, 102px); } /* ---------- the wallet: flap opens, cards pop out like folders ---------- */ .wallet-scene { display: grid; place-items: center; padding: clamp(190px, 40vw, 260px) 0 8px; perspective: 900px; } .wallet { position: relative; width: min(340px, 80%); aspect-ratio: 1.45; } .wallet .body, .wallet .flap { position: absolute; inset: 0; border-radius: 14px; border: 3px solid var(--ink); } .wallet .body { background: var(--lv-red); box-shadow: inset 0 0 0 10px rgba(0,0,0,.08); } .wallet .flap { background-color: var(--lv-brown); background-image: radial-gradient(circle at 50% 50%, #C99A5B 0 2px, transparent 2.5px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='%23B98A4E' opacity='.9'%3E%3Cpath d='M23 9c2 5 2 5 7 7-5 2-5 2-7 7-2-5-2-5-7-7 5-2 5-2 7-7z'/%3E%3Ccircle cx='23' cy='16' r='1.6' fill='%235A3A26'/%3E%3C/g%3E%3C/svg%3E"); background-size: 12px 12px, 46px 46px; transform-origin: 50% 0; transition: transform .9s var(--ease); z-index: 3; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); } .wallet .snap { position: absolute; left: 50%; top: 84%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F6DB94, #B8862F); border: 3px solid var(--ink); z-index: 4; transition: opacity .3s; } .wallet .name { position: absolute; left: 0; right: 0; top: 30%; text-align: center; z-index: 4; font-family: var(--serif); font-weight: 600; letter-spacing: .32em; font-size: clamp(.9rem, 2.4vw, 1.2rem); color: #E8C36A; text-shadow: 0 1px 0 rgba(0,0,0,.4); transition: opacity .3s; } .wallet.open .flap { transform: rotateX(172deg); z-index: 1; filter: brightness(.8); } .wallet.open .cards { z-index: 5; } .wallet.open .snap, .wallet.open .name { opacity: 0; } .wallet .inside-name { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; font-family: var(--serif); letter-spacing: .3em; font-size: .8rem; color: #E8C36A; } .cards { position: absolute; left: 6%; right: 6%; top: 8%; height: 90%; z-index: 2; } .card { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1.586; border-radius: 12px; border: 3px solid var(--ink); padding: 8% 7%; display: flex; flex-direction: column; justify-content: space-between; text-align: left; cursor: pointer; transform: translateY(6%); transition: transform .7s var(--ease), box-shadow .3s; box-shadow: 0 -2px 0 rgba(0,0,0,.05); } .card .chip { width: 18%; aspect-ratio: 1.3; border-radius: 5px; background: linear-gradient(135deg, #F3D98E, #C79A3E); border: 2px solid var(--ink); } .card .t { font-family: var(--mono); font-size: clamp(.55rem, 1.4vw, .72rem); letter-spacing: .12em; text-transform: uppercase; } .card .big { font-family: var(--serif); font-size: clamp(1rem, 3vw, 1.5rem); line-height: 1; } .card .foot { display: flex; justify-content: space-between; align-items: end; font-family: var(--mono); font-size: clamp(.5rem, 1.2vw, .66rem); letter-spacing: .1em; } .wallet.open .card { transform: translateY(calc(-62% - var(--i) * 13%)) rotate(calc((var(--i) - 2) * 3deg)); } .wallet.open .card:hover { transform: translateY(calc(-70% - var(--i) * 13%)) rotate(calc((var(--i) - 2) * 3deg)); } .card.picked { box-shadow: 0 0 0 4px var(--gold); } .card-detail { min-height: 110px; margin-top: 18px; border-top: 2px dashed var(--line); padding-top: 14px; } .card-detail h3 { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; } .card-detail .m { font-family: var(--mono); font-size: .76rem; color: var(--plum); } /* student ID */ .card.id { background: #fff; } .card.id .band { position: absolute; left: 0; right: 0; top: 0; height: 26%; background: var(--burnt); border-radius: 8px 8px 0 0; } .card.id .band span { position: absolute; left: 7%; top: 50%; transform: translateY(-50%); color: #fff; font-family: var(--serif); font-size: clamp(.55rem, 1.5vw, .8rem); letter-spacing: .02em; } .card.id .who { display: flex; gap: 8%; align-items: center; margin-top: 18%; } .card.id .who img { width: 26%; aspect-ratio: 1; border-radius: 8px; border: 2px solid var(--ink); object-fit: cover; } /* ---------- pencil pouch: unzip, stationery fans out ---------- */ .pouch-scene { display: grid; place-items: center; padding: 10px 0; } .pens { position: relative; width: min(520px, 100%); height: 230px; margin-top: -10px; } .pen { position: absolute; left: 50%; bottom: 20px; width: 34px; height: 190px; margin-left: -17px; border: 0; padding: 0; background: none; cursor: pointer; transform-origin: 50% 100%; transform: rotate(0) translateY(60px); opacity: 0; transition: transform .7s var(--ease), opacity .4s; } .pens.open .pen { opacity: 1; transform: rotate(calc((var(--i) - var(--mid)) * var(--step, 11deg))); } .pens.open .pen:hover, .pens.open .pen:focus-visible { transform: rotate(calc((var(--i) - var(--mid)) * var(--step, 11deg))) translateY(-18px); z-index: 2; } .pen svg { width: 100%; height: 100%; } .pens.many { height: 330px; width: min(640px, 100%); margin-bottom: -40px; } .pens.many .pen { width: 24px; height: 230px; margin-left: -12px; bottom: 0; transform-origin: 50% 165%; } .pens.many .pen .lbl { font-size: .58rem; top: 40px; font-weight: 500; } .pen .lbl { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); writing-mode: vertical-rl; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); pointer-events: none; } .pouch-front { width: min(300px, 70%); margin-top: -46px; position: relative; z-index: 2; } .pen-note { min-height: 48px; text-align: center; font-family: var(--hand); font-size: 1.5rem; color: var(--plum); } /* ---------- sketchbook ---------- */ .spread { display: grid; grid-template-columns: 1fr 1fr; background: #F7F1E6; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; } .spread .l { padding: 22px; display: grid; place-items: center; border-right: 2px dashed var(--line); } .spread .l img { max-height: 340px; width: auto; transform: rotate(-1.5deg); border: 2px solid var(--ink); } .spread .r { padding: 22px; background-image: repeating-linear-gradient(transparent 0 31px, rgba(118,52,78,.13) 31px 32px); } .spread .r h3 { margin: 0 0 6px; font-family: var(--hand); font-size: 2.2rem; line-height: 1; color: var(--plum); } .spread .r p { font-family: var(--hand); font-size: 1.4rem; line-height: 1.3; } .flip { animation: flip .4s steps(4); } @keyframes flip { from { opacity: .2; transform: translateX(12px) rotate(1deg); } } /* ---------- sunglasses: the whole page gets tinted ---------- */ .tint { position: fixed; inset: 0; pointer-events: none; z-index: 50; background: linear-gradient(180deg, rgba(30, 20, 20, .38), rgba(90, 80, 80, .12)); opacity: 0; transition: opacity .6s ease; } body.shades .tint { opacity: 1; } .shades-note { font-family: var(--hand); font-size: 1.4rem; color: var(--plum); } /* ---------- keys ---------- */ .fob { width: 220px; margin: 0 auto; } .fob-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0; } .record { border: 2px solid var(--ink); border-radius: 16px; padding: 14px 18px; background: var(--cream); } .record li { margin: 4px 0; } .shake { animation: shake .4s steps(3) 2; } @keyframes shake { 0% { transform: translateX(-4px); } 100% { transform: translateX(4px); } } /* ---------- laptop: projects as folders ---------- */ .folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; margin-top: 10px; } .folder { position: relative; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; } .folder .f { position: relative; aspect-ratio: 1.3; border: 2px solid var(--ink); border-radius: 4px 12px 12px 12px; background: var(--c); transition: transform .3s var(--ease); } .folder .f::before { content: ""; position: absolute; left: -2px; top: -14px; width: 42%; height: 14px; background: var(--c); border: 2px solid var(--ink); border-bottom: 0; border-radius: 8px 8px 0 0; } .folder .f img { position: absolute; left: 8%; right: 8%; top: -8%; height: 70%; width: 84%; object-fit: cover; border: 2px solid var(--ink); border-radius: 4px; transform: rotate(-3deg); transition: transform .4s var(--ease); } .folder:hover .f img { transform: rotate(-6deg) translateY(-16px); } .folder b { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: 1.05rem; line-height: 1.15; } .folder small { display: block; font-family: var(--mono); font-size: .66rem; color: var(--plum); letter-spacing: .06em; text-transform: uppercase; } /* ---------- Sitara chat ---------- */ .chat { display: flex; flex-direction: column; gap: 10px; min-height: 180px; } .msg { display: flex; gap: 8px; align-items: flex-end; } .msg img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; } .msg .b { max-width: 80%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--rose); border: 2px solid var(--ink); } .msg.me { justify-content: flex-end; } .msg.me .b { background: var(--paper); border-radius: 16px 16px 4px 16px; } .caret::after { content: "▍"; color: var(--plum); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 60; background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 8px 18px; border-radius: 999px; font-size: 1.4rem; transition: transform .45s var(--ease); max-width: calc(100vw - 32px); text-align: center; } .toast { opacity: 0; visibility: hidden; } .toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; } .foot { text-align: center; padding: clamp(60px, 8vw, 110px) 16px 30px; position: relative; z-index: 2; color: var(--muted); } .foot .hand { font-size: 1.5rem; color: var(--plum); margin: 0 0 8px; } /* ---------- phones: the bag sits on top, everything falls into a tidy grid ---------- */ @media (max-width: 760px) { .stage { aspect-ratio: auto; min-height: 380px; } .bag { position: relative; left: auto; top: auto; transform: none; width: 64%; margin: 30px auto 0; display: block; } .items { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px 16px; padding: 30px 8px 40px; } .item { position: relative; left: auto; top: auto; width: auto; transform: rotate(var(--r)); display: none; } .item.out { display: block; } .item .art { max-width: 150px; margin: 0 auto; } .item .tag { opacity: 1; font-size: 1.15rem; } .stats, .lists { grid-template-columns: 1fr; } .spread { grid-template-columns: 1fr; } .spread .l { border-right: 0; border-bottom: 2px dashed var(--line); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* sweater on: everything gets a little warmer and cozier */ body.cozy { background: #FBE6EC; } body.cozy::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 49; box-shadow: inset 0 0 120px 30px rgba(222, 120, 150, .28); } /* laptop lid: the stickers are buttons */ .lid-wrap { max-width: 340px; margin: 6px auto 0; text-align: center; } .lid-big .stk { cursor: pointer; outline: none; } .lid-big .stk-in { transition: transform .3s var(--ease); transform-box: fill-box; transform-origin: center; } .lid-big .stk:hover .stk-in, .lid-big .stk:focus-visible .stk-in { transform: scale(1.14) rotate(-4deg); } .lid-big .stk:focus-visible .stk-in { filter: drop-shadow(0 0 3px var(--plum)); } .stk-label { font-size: 1.35rem; color: var(--plum); min-height: 1.6em; margin: 8px 0 0; } /* the binder: pages clipped into rings */ .binder-open { position: relative; background: #F4C9D2; border: 3px solid var(--ink); border-radius: 16px; padding: 18px 18px 18px 58px; } .rings { position: absolute; left: 18px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; } .rings i { width: 26px; height: 14px; border: 4px solid #B9BCC2; border-radius: 10px; background: transparent; } .bpages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bpage { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 14px 14px 30px; border: 2px solid var(--ink); border-radius: 6px; background: #FFFDF9; cursor: pointer; transform: rotate(calc((var(--i) - 1.5) * .8deg)); transition: transform .3s var(--ease), box-shadow .3s; } .bpage:hover { transform: translateY(-4px) rotate(0); box-shadow: 4px 4px 0 var(--ink); } .bpage b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.1; } .bpage img { margin-top: 6px; border-radius: 4px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border: 1.5px solid var(--line); } .bpage .bignum { margin-top: 6px; font-family: var(--serif); font-size: 2.4rem; color: var(--plum); line-height: 1; } .bpage .holes { position: absolute; left: 9px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; } .bpage .holes i { width: 10px; height: 10px; border-radius: 50%; background: #F4C9D2; border: 1.5px solid var(--line); } @media (max-width: 760px) { .bpages { grid-template-columns: 1fr; } } /* two notebooks, each opening to a lined page */ .ec-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ec-one { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start; } .ec-page { border: 2px solid var(--ink); border-radius: 6px; padding: 10px 14px; min-height: 100%; background: #FFFDF9 repeating-linear-gradient(transparent 0 25px, rgba(94,116,134,.25) 25px 26px); } .ec-h { margin: 0 0 4px; font-size: 1.6rem; color: var(--plum); } .ec-page ul { margin: 0; padding-left: 18px; font-size: 1.22rem; line-height: 26px; } @media (max-width: 760px) { .ec-pair { grid-template-columns: 1fr; } } /* the BIC mechanical pencils tucked in with the gel pens */ .in-pencil { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 14px 16px; border: 2px dashed var(--line); border-radius: 16px; } .pencils { display: flex; gap: 5px; } .pencils i { width: 10px; height: 64px; border: 2px solid var(--ink); border-radius: 3px; opacity: .75; position: relative; } .pencils i::before { content: ""; position: absolute; left: -2px; right: -2px; top: -12px; height: 10px; background: #FFFDF9; border: 2px solid var(--ink); border-radius: 2px; } /* the McCombs keychain hangs on the right side */ .charm.mccombs { left: 56%; right: auto; top: 2%; width: 10%; animation-delay: -1.2s; } /* zippers: teeth, the gap that opens behind the pull, and the pull itself */ .bag { cursor: default; } .zips .teeth { fill: none; stroke: #6B6870; stroke-width: 3; stroke-dasharray: 2 3; cursor: pointer; } .zips .gap { fill: none; stroke: #0B0A0C; stroke-width: 9; stroke-linecap: round; pointer-events: stroke; cursor: pointer; } .zips .pull { cursor: pointer; outline: none; } .zips .pull rect { fill: #C9CCD2; stroke: #3A2626; stroke-width: 2.2; } .zips .pull circle { fill: #D23B3B; } .zips .pull:hover rect, .zips .pull:focus-visible rect { fill: #F4A7B9; } .zips .pull:focus-visible rect { stroke: var(--plum); stroke-width: 3.5; } .zips g:not(.open) .pull { animation: tug 2.4s ease-in-out infinite; } .zips g:nth-child(2) .pull { animation-delay: .4s; } .zips g:nth-child(3) .pull { animation-delay: .8s; } .zips g:nth-child(4) .pull { animation-delay: 1.2s; } @keyframes tug { 0%, 80%, 100% { translate: 0 0; } 88% { translate: 3px 1px; } } .all { margin: 14px 0 0; } /* iPad apps, passport stamps */ .apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 22px; border: 3px solid var(--ink); border-radius: 22px; background: #F7E9EC; } .app { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; font-size: .78rem; text-align: center; } .app .icon { width: 64px; height: 64px; border-radius: 16px; border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--mono); font-size: 1.1rem; transition: transform .2s; } .app:hover .icon { transform: translateY(-4px) rotate(-3deg); } .stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px; border-radius: 14px; background: #F3EEE2 repeating-linear-gradient(transparent 0 28px, rgba(34,50,90,.08) 28px 29px); border: 2px solid var(--ink); } .stamp { aspect-ratio: 1.3; border: 3px dashed rgba(34,50,90,.4); border-radius: 50%; display: grid; place-items: center; transform: rotate(var(--r)); } @media (max-width: 760px) { .apps { grid-template-columns: repeat(2, 1fr); } .stamps { grid-template-columns: repeat(2, 1fr); } } /* real passport stamps: ink color per country, slightly faded and tilted */ .stamp.real { border: 0; border-radius: 0; aspect-ratio: auto; } .stamp.real svg { width: 100%; fill: none; stroke: var(--c); stroke-width: 2.6; opacity: .85; mix-blend-mode: multiply; } .stamp.real text { fill: var(--c); stroke: none; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 1.5px; } .stamp.real text.small { font-size: 7px; letter-spacing: 2px; } .stamp.real:hover svg { opacity: 1; } .stamp.real text.small.yr { font-size: 10px; letter-spacing: 3px; font-weight: 500; } /* the mascara wand pulls out of the tube */ .mascara-big { width: 140px; margin: -20px auto 0; } /* the wand twists (a quick spin, drawn as a squeeze) while it pulls straight up, clears the tube, then sets down beside it */ .mascara-big .wand { transform-box: fill-box; transform-origin: 50% 50%; } .mascara-big.out .wand { animation: wandOut 2.4s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes wandOut { 0% { transform: translate(0, 0) scaleX(1); } 7% { transform: translate(0, -6px) scaleX(.12); } 14% { transform: translate(0, -14px) scaleX(1); } 21% { transform: translate(0, -22px) scaleX(.12); } 28% { transform: translate(0, -30px) scaleX(1); } 55% { transform: translate(0, -150px) scaleX(1); } 72% { transform: translate(-52px, -150px); } 92% { transform: translate(-52px, 10px); } 96% { transform: translate(-52px, 2px); } 100% { transform: translate(-52px, 6px); } } @media (prefers-reduced-motion: reduce) { .mascara-big.out .wand { animation: none; transform: translate(-52px, 6px); } } .mascara-big .tube { transform: translate(26px, 0); } .mascara-big .wand { translate: 26px 0; } /* thin things (mascara, lipstick) get a wider invisible tap area */ .item button::before { content: ""; position: absolute; inset: -6px -14px; } /* the phone: pink case, a home screen with three apps */ .phone-big { width: 230px; margin: 0 auto; padding: 12px; border-radius: 40px; background: #F2C6C8; border: 3px solid var(--ink); } .phone-big .screen { position: relative; height: 420px; border-radius: 30px; border: 2px solid var(--ink); overflow: hidden; background: linear-gradient(160deg, #F7E9EC, #E9DDF3); padding: 14px; } .phone-big .clock { text-align: center; margin: 4px 0 26px; font-size: 1.6rem; letter-spacing: .02em; text-transform: none; color: var(--ink); } .home { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; } .papp { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-size: .7rem; text-decoration: none; color: var(--ink); } .papp .ic { width: 52px; height: 52px; border-radius: 14px; border: 2px solid var(--ink); display: grid; place-items: center; transition: transform .2s; } .papp:hover .ic { transform: translateY(-3px); } .papp .ic svg { width: 78%; } .ic-photos { background: #fff; } .ic-ig { background: linear-gradient(45deg, #F7B23B, #E84393 55%, #8E44AD); } .ic-li { background: #2E6FB7; } .app-view { position: absolute; inset: 0; background: #fff; padding: 12px; overflow: auto; } .app-view .back { background: none; border: 0; padding: 0; cursor: pointer; color: #2E6FB7; text-transform: none; font-size: .8rem; } .app-view .apptitle { margin: 8px 0 10px; font-size: .9rem; text-transform: none; color: var(--ink); } .app-view .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .app-view .grid img { aspect-ratio: 1; object-fit: cover; width: 100%; } .ig-todo { margin-top: 30px; text-align: center; } /* the notepad under my Paper Mate pouch: pick a pen, write anything */ .pad { margin: 6px auto 0; max-width: 520px; border: 2px solid var(--ink); border-radius: 6px; background: #FFFDF9 repeating-linear-gradient(transparent 0 33px, rgba(46,134,222,.18) 33px 34px); box-shadow: 4px 4px 0 var(--ink); } .pad textarea { display: block; width: 100%; min-height: 136px; padding: 4px 16px; border: 0; background: transparent; resize: vertical; font-family: var(--hand); font-size: 1.7rem; line-height: 34px; color: #E63F7A; caret-color: #E63F7A; outline: none; } .pad textarea::placeholder { color: rgba(58,38,38,.35); } /* visible to screen readers only */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the laptop, open: my pink desktop with blue folders */ .desktop { border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #F0D5CF; padding-bottom: 18px; } .menubar { display: flex; justify-content: space-between; padding: 6px 14px; background: rgba(255,255,255,.55); backdrop-filter: blur(6px); text-transform: none; font-size: .72rem; color: var(--ink); } .menubar span:first-child::before { content: "● File Edit View"; letter-spacing: .04em; } .dfolders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 10px; padding: 26px 18px 6px; } .dfolder { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 6px; border-radius: 10px; cursor: pointer; } .dfolder svg { width: 84px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.12)); transition: transform .2s; } .dfolder span { font-family: -apple-system, system-ui, sans-serif; font-weight: 600; font-size: .82rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); text-align: center; line-height: 1.2; } .dfolder:hover, .dfolder:focus-visible { background: rgba(255,255,255,.25); outline: none; } .dfolder:hover svg { transform: translateY(-3px); } .mbp-screen .dfolder { touch-action: none; user-select: none; position: relative; } .dfolder.dragging { z-index: 5; cursor: grabbing; background: rgba(255,255,255,.3); } .dfolder.dragging svg { transform: scale(1.06); } @media (max-width: 760px) { .dfolders { grid-template-columns: repeat(2, 1fr); } } /* my (joke) driver license */ .card.dl { background: linear-gradient(120deg, #EAF2FB 0%, #FBEFF3 55%, #F7DCE4 100%); color: var(--ink); padding: 5% 6%; gap: 2%; } .dl-head { display: flex; justify-content: space-between; align-items: center; } .dl-state { display: inline-flex; align-items: center; gap: 4px; font-family: var(--serif); font-weight: 600; font-size: clamp(.8rem, 2.4vw, 1.15rem); color: #2E4A7A; } .dl-state svg { width: 1.1em; } .dl-body { display: flex; gap: 6%; align-items: center; } .dl-body img { width: 24%; aspect-ratio: .82; object-fit: cover; border-radius: 6px; border: 2px solid var(--ink); filter: grayscale(.2); } .dl-fields { display: flex; flex-direction: column; gap: 1px; font-family: var(--mono); font-size: clamp(.42rem, 1.15vw, .62rem); line-height: 1.35; text-align: left; } .dl-fields i { font-style: normal; color: #B83280; text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; } .dl-fine { font-family: var(--hand); font-size: clamp(.6rem, 1.6vw, .85rem); color: var(--muted); text-align: right; } /* every card keeps real card proportions, no matter what's printed on it */ .card { overflow: hidden; min-height: 0; height: auto; } .card.id .who { margin-top: 14%; } /* the card you tap slides to the front and lifts up so you can read it */ .wallet.open .card.picked, .wallet.open .card.picked:hover { z-index: 30 !important; transform: translateY(-88%) rotate(-2deg); box-shadow: 0 0 0 4px var(--gold), 0 18px 30px -12px rgba(0,0,0,.35); } /* my Bank of America card: silver, no numbers on it */ .card.bofa { background: linear-gradient(115deg, #DADDE2 0%, #F4F5F7 38%, #C9CDD3 60%, #EEF0F3 100%); color: #3A3F47; } .bofa-top { display: flex; justify-content: space-between; align-items: center; } .card.bofa .chip { width: 18%; } .bofa-top .tap { width: 9%; } .bofa-bank { font-family: var(--sans); font-weight: 600; letter-spacing: .14em; font-size: clamp(.55rem, 1.6vw, .8rem); color: #2E3B57; } .card.bofa .foot { color: #3A3F47; } .visa { font-family: var(--sans); font-size: clamp(.5rem, 1.3vw, .7rem); text-transform: none; letter-spacing: 0; } .visa b { font-style: italic; font-weight: 800; font-size: 1.4em; color: #1A2E6E; margin-right: 2px; } /* my two Amex cards (no numbers, no logos copied) */ .card.amexgold { background: linear-gradient(120deg, #B8954A 0%, #E7CB86 40%, #C9A55A 70%, #E2C47C 100%); color: #3B2E14; position: relative; } .card .facet { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .amex-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; } .amex-word { font-family: var(--sans); font-weight: 700; letter-spacing: .06em; font-size: clamp(.5rem, 1.4vw, .72rem); } .amex-word.big { font-size: clamp(.7rem, 2.1vw, 1.05rem); line-height: 1.05; text-align: right; color: #fff; } .sky { font-family: var(--sans); letter-spacing: .12em; font-size: clamp(.5rem, 1.4vw, .72rem); color: #2E3B57; } .card.amexgold .chip, .card.amexgold .foot { position: relative; } .card.amexblue { background: radial-gradient(120% 140% at 25% 30%, #A9D3F5 0%, #4F9BE0 45%, #1E5FB8 100%); color: #fff; } .card.amexblue .foot { color: #fff; } .amex-mid { display: flex; justify-content: space-between; align-items: center; } .ribbon { font-family: var(--serif); font-size: clamp(.45rem, 1.2vw, .62rem); letter-spacing: .12em; padding: 2px 8px; border: 1.5px solid #fff; border-radius: 3px; transform: rotate(-4deg); } .ribbon b { font-weight: 400; } #card-go { margin-top: 6px; } /* my UT Austin student ID, the good-photo version */ .card.id { background: #FBFAF7; color: var(--ink); display: grid; grid-template-columns: 1fr 30%; grid-template-rows: 1fr auto; gap: 4% 5%; padding: 6% 6% 5%; } .card.id .band, .card.id .who { display: none; } .ut-left { display: flex; flex-direction: column; text-align: left; min-width: 0; } .ut-word { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 3.4vw, 1.7rem); line-height: 1; color: #BF5700; letter-spacing: .02em; } .ut-sub { font-family: Georgia, serif; font-size: clamp(.38rem, 1vw, .55rem); color: #BF5700; margin-top: 2px; } .ut-name { margin-top: 10%; font-family: var(--sans); font-weight: 700; font-size: clamp(.5rem, 1.5vw, .78rem); color: #BF5700; letter-spacing: .02em; } .ut-role { font-family: var(--sans); font-size: clamp(.48rem, 1.4vw, .72rem); letter-spacing: .04em; } .ut-photo { grid-row: 1; grid-column: 2; background: #5AA7E8; border-radius: 2px; overflow: hidden; aspect-ratio: .8; align-self: start; } .ut-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .ut-bars { grid-column: 1 / -1; height: 16%; min-height: 12px; background: repeating-linear-gradient(90deg, #222 0 2px, transparent 2px 4px, #222 4px 5px, transparent 5px 8px, #222 8px 11px, transparent 11px 12px); opacity: .85; } /* Instagram on my phone: hi from hani, sized to fit the screen */ .ig { font-family: -apple-system, system-ui, sans-serif; color: #111; } .ig-handle { margin: 6px 0 10px; font-weight: 700; font-size: .9rem; } .ig-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .ig-top img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; padding: 2px; background: linear-gradient(45deg, #F7B23B, #E84393, #8E44AD); } .ig-name { font-weight: 600; font-size: .82rem; } .ig-btn { display: block; text-align: center; padding: 6px; border-radius: 8px; background: #EFEFEF; color: #111; font-size: .75rem; font-weight: 600; text-decoration: none; margin-bottom: 10px; } .ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .ig-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .app-view { box-sizing: border-box; } .app-view img { max-width: 100%; } /* LinkedIn on my phone: a profile preview */ .li { font-family: -apple-system, system-ui, sans-serif; color: #111; position: relative; margin: 8px -12px 0; } .li-banner { height: 70px; background: linear-gradient(120deg, #F2C6C8, #D9C8F0 60%, #BFD7F0); } .li-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; margin: -36px 0 0 14px; display: block; } .li-name { margin: 6px 14px 0; font-weight: 700; font-size: .95rem; } .li-head { margin: 2px 14px 0; font-size: .72rem; line-height: 1.35; color: #333; } .li-loc { margin: 4px 14px 0; font-size: .66rem; color: #777; } .li-url { margin: 2px 14px 0; font-size: .66rem; color: #0A66C2; } .li-btn { display: block; margin: 12px 14px 0; padding: 7px; border-radius: 999px; background: #0A66C2; color: #fff; text-align: center; font-size: .78rem; font-weight: 600; text-decoration: none; } /* more apps: Spotify, YouTube, Netflix, Prime */ .ic-sp { background: #191414; } .ic-yt { background: #E62117; } .ic-nf { background: #111; } .ic-pv { background: #0F171E; } .sp { font-family: -apple-system, system-ui, sans-serif; background: linear-gradient(#1F3F2B, #121212 60%); color: #fff; margin: 8px -12px -12px; padding: 14px; min-height: 360px; } .sp-h { margin: 0 0 12px; font-weight: 800; font-size: 1rem; } .sp-card { background: rgba(255,255,255,.08); border-radius: 8px; padding: 10px; margin-bottom: 8px; } .sp-card b { display: block; font-size: 1.3rem; color: #1ED760; } .sp-card span { font-size: .7rem; color: #CFCFCF; } .sp-btn { display: block; margin-top: 8px; padding: 8px; border-radius: 999px; background: #1ED760; color: #111; text-align: center; font-size: .75rem; font-weight: 700; text-decoration: none; } .sp-btn.ghost { background: transparent; color: #fff; border: 1px solid #727272; } .stream { font-family: -apple-system, system-ui, sans-serif; margin: 8px -12px -12px; padding: 14px 12px; min-height: 360px; color: #fff; } .stream.nf { background: #141414; } .stream.pv { background: #0F171E; } .stream-h { margin: 0 0 10px; font-weight: 700; font-size: .85rem; } .posters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .posters img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; } .card.bofadebit { background: linear-gradient(115deg, #B3192E 0%, #DC3545 45%, #A3122A 100%); color: #fff; } .card.bofadebit .bofa-bank, .card.bofadebit .foot, .card.bofadebit .visa, .card.bofadebit .visa b { color: #fff; } /* headings on the dark phone apps stay readable */ .sheet-body .sp-h, .sheet-body .stream-h { color: #fff; } .sheet-body .sp-card span { color: #CFCFCF; } /* the makeup pouch: unzip it and the lipstick, mascara and brushes pop up out of it */ .mbag { position: relative; width: min(340px, 90%); margin: 0 auto; padding-top: 170px; } .mbag-inside { position: absolute; left: -20px; right: -20px; bottom: 60px; height: 230px; display: flex; justify-content: center; align-items: flex-end; gap: 14px; pointer-events: none; } .mk { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; transform: translateY(150px); opacity: 0; transition: transform .7s var(--ease) var(--d), opacity .3s var(--d); } .mk svg { height: 150px; width: auto; } .mk.brushes svg { height: 165px; } .mk span { font-family: var(--hand); font-size: 1.15rem; color: var(--plum); white-space: nowrap; } .mbag.open .mbag-inside { pointer-events: auto; } .mbag.open .mk { transform: none; opacity: 1; } .mbag.open .mk:hover svg { transform: translateY(-6px); } .mk svg { transition: transform .25s; } .mbag-front { position: relative; z-index: 2; cursor: pointer; } .mbag-front .mgap { stroke-dasharray: 244; stroke-dashoffset: 244; transition: stroke-dashoffset .7s steps(8); } .mbag.open .mbag-front .mgap { stroke-dashoffset: 0; } .mpull { position: absolute; top: 12%; left: 6%; width: 22px; height: 36px; border: 0; padding: 0; background: none; cursor: pointer; transition: left .7s steps(8); } .mpull span { display: block; width: 100%; height: 100%; border-radius: 6px; background: #D9A441; border: 2.5px solid var(--ink); } .mbag.open .mpull { left: calc(90% - 22px); } .mpull:focus-visible span { outline: 3px dashed var(--plum); outline-offset: 3px; } /* the keyring: tap the BMW fob, the apartment fob, or my सुहानी keychain */ .keyring .kpart { cursor: pointer; transition: transform .25s; transform-box: fill-box; transform-origin: 50% 0; } .keyring .kpart:hover { transform: rotate(-4deg); } /* the iPad: Pinterest, Procreate, and a folder of things I built */ .ipad-big { padding: 14px; border-radius: 26px; background: #2A2629; border: 3px solid var(--ink); } .ipad-screen { position: relative; height: 380px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #F7E9EC, #E9DDF3); } .ipad-home { display: flex; gap: 28px; padding: 40px 34px; } .ipad-home .papp .ic { width: 64px; height: 64px; border-radius: 16px; } .ipad-home .papp { font-size: .78rem; } .folder-ic { background: rgba(255,255,255,.6) !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px; } .folder-ic i { border-radius: 4px; border: 1px solid var(--ink); } .ipad-view { position: absolute; inset: 0; overflow: auto; padding: 12px 14px; background: #fff; } .ipad-view.procreate { background: #1B1B1F; } .ipad-homebar { position: absolute; left: 50%; bottom: 0; z-index: 3; transform: translateX(-50%); width: 46%; padding: 10px 0 8px; border: 0; background: none; cursor: pointer; } .ipad-homebar span { display: block; height: 5px; border-radius: 99px; background: rgba(27,27,31,.55); transition: background .2s, transform .2s var(--ease); } .ipad-homebar:hover span, .ipad-homebar:focus-visible span { background: rgba(27,27,31,.85); transform: scaleY(1.3); } .ipad-homebar:focus-visible { outline: 2px solid #2E6FB7; outline-offset: -2px; border-radius: 8px; } .ipad-view.procreate ~ .ipad-homebar span, .ipad-view.nf ~ .ipad-homebar span, .ipad-view.pv ~ .ipad-homebar span, .ipad-view.tv ~ .ipad-homebar span { background: rgba(255,255,255,.6); } .ipad-view:not([hidden]) { padding-bottom: 28px; } .ipad-view .back { background: none; border: 0; padding: 0; cursor: pointer; color: #2E6FB7; text-transform: none; font-size: .8rem; } .ip-title { margin: 6px 0 10px; font-family: -apple-system, system-ui, sans-serif; font-weight: 700; font-size: 1rem; color: #111; } .ip-title.dark { color: #fff; } .pins { columns: 3; column-gap: 8px; } .pin { break-inside: avoid; margin-bottom: 10px; font-family: -apple-system, system-ui, sans-serif; } .pin-img { position: relative; overflow: hidden; border-radius: 14px; background: #F1ECEE; } .pin-img img { display: block; width: 100%; height: auto; transition: filter .2s; } .pin-img.square { aspect-ratio: 1; } .pin-img.portrait { aspect-ratio: 4 / 5; } .pin-img.tall { aspect-ratio: 2 / 3; } .pin-img.xtall { aspect-ratio: 9 / 16; } .pin-img[class*=" "] img { height: 100%; object-fit: cover; } .pin-save { position: absolute; top: 8px; right: 8px; padding: 6px 11px; border-radius: 999px; background: #E60023; color: #fff; font-size: .68rem; font-weight: 700; text-decoration: none; opacity: 0; transform: translateY(-3px); transition: opacity .18s, transform .18s; } .pin-img:hover img { filter: brightness(.82); } .pin-img:hover .pin-save, .pin-save:focus-visible { opacity: 1; transform: none; } .pin-cap { margin: 5px 4px 0; font-size: .7rem; font-weight: 600; line-height: 1.3; color: #111; } .pin-tabs { display: flex; justify-content: center; gap: 6px; margin: 0 0 12px; font-family: -apple-system, system-ui, sans-serif; } .pin-tabs button { padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: #111; font: 600 .78rem -apple-system, system-ui, sans-serif; cursor: pointer; } .pin-tabs button[aria-selected="true"] { background: #111; color: #fff; } .pin-tabs button:focus:not(:focus-visible) { outline: none; } .pin-tabs button:focus-visible { outline: 2px solid #111; outline-offset: 2px; } .pin-tabs button:not([aria-selected="true"]):hover { background: #EFEFEF; } .pin-board { margin: 0 0 12px; font-family: -apple-system, system-ui, sans-serif; text-align: center; } .pin-board b { display: block; font-size: 1.05rem; color: #111; } .pin-board small { font-size: .7rem; color: #767676; } .canvases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .canvas { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; } .canvas img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.4); } .canvas span { display: block; margin-top: 4px; font-family: -apple-system, system-ui, sans-serif; font-size: .66rem; color: #ddd; } @media (max-width: 760px) { .pins { columns: 2; } .canvases { grid-template-columns: repeat(2, 1fr); } } /* the notepad is for writing by hand now (finger, stylus or mouse) */ .pad { position: relative; } .pad canvas { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; } .pad-hint { position: absolute; left: 16px; top: 6px; font-family: var(--hand); font-size: 1.7rem; color: rgba(58,38,38,.32); pointer-events: none; } .pad-clear { position: absolute; right: 10px; bottom: 8px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: .62rem; } /* the highlighter reveal: the class name gets highlighted across a notebook line */ .hl-line { display: block; padding: 4px 0 6px; border-bottom: 1.5px solid rgba(46,134,222,.25); max-width: 520px; margin: 0 auto; } .hl { font-family: var(--hand); font-size: 2rem; color: var(--ink); padding: 0 6px; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 60% / 0% 72%; animation: swipe .55s cubic-bezier(.3,.7,.3,1) forwards; border-radius: 3px; } @keyframes swipe { to { background-size: 100% 72%; } } .hl-sub { display: block; margin-top: 6px; color: var(--muted); font-size: .66rem; } @media (prefers-reduced-motion: reduce) { .hl { animation: none; background-size: 100% 72%; } } .mk svg { height: 130px; } .mk.brushes svg { height: 150px; } /* things pop fully out of the makeup pouch, labels on top */ .mbag { padding-top: 230px; } .mbag-inside { bottom: 150px; } .mk { flex-direction: column-reverse; } /* YouTube on my phone: GRWM, TED talks, self-improvement */ .yt { font-family: -apple-system, system-ui, sans-serif; color: #0F0F0F; } .yt-logo { margin: 6px 0 8px; font-weight: 800; font-size: .95rem; letter-spacing: -.02em; } .yt-logo span { display: inline-grid; place-items: center; width: 22px; height: 16px; border-radius: 5px; background: #FF0033; color: #fff; font-size: .55rem; margin-right: 2px; } .yt-chips { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .yt-chips button { flex: none; border: 0; border-radius: 8px; padding: 4px 9px; background: #F2F2F2; font: 600 .66rem -apple-system, system-ui, sans-serif; cursor: pointer; color: #0F0F0F; } .yt-chips button.on { background: #0F0F0F; color: #fff; } .yt-row { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; padding: 5px 0; text-decoration: none; color: inherit; } .yt-thumb { width: 74px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; } .yt-thumb.grwm { display: grid; place-items: center; background: linear-gradient(135deg, #F4A7B9, #F7E06B); font-family: var(--hand); font-size: 1rem; color: #3A2626; } .yt-row b { display: block; font-size: .7rem; line-height: 1.25; font-weight: 600; } .yt-row small { display: block; margin-top: 2px; font-size: .6rem; color: #606060; } /* before any zipper is pulled, the backpack is the star: big, and right up front */ .stage.idle .bag { width: 40%; top: 36%; } .stage .bag { transition: width .7s var(--ease), top .7s var(--ease); } /* Pinterest profile header */ .pin-head { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-family: -apple-system, system-ui, sans-serif; } .pin-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .pin-head b { display: block; font-size: .9rem; color: #111; } .pin-head small { font-size: .7rem; color: #767676; } .pin-btn { margin-left: auto; padding: 7px 12px; border-radius: 999px; background: #E60023; color: #fff; font-size: .72rem; font-weight: 700; text-decoration: none; } /* Apple Pencil: a blank Procreate-style canvas with swatches */ .swatches { display: flex; gap: 8px; justify-content: center; margin: 4px 0 12px; } .swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; } .swatches button.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); } .procreate-pad { background: #fff; } .procreate-pad canvas { height: 280px; } .mk.brushes svg { height: 165px; } .mbag-inside { gap: 10px; left: -40px; right: -40px; } .mk svg { height: 116px; } .mk.brushes svg { height: 140px; } .mbag-inside { gap: 8px; left: -60px; right: -60px; } .mk span { font-size: 1rem; } /* license: one line per field, text scales with the card so nothing wraps */ .card.dl { container-type: inline-size; } .dl-body img { width: 22%; } .dl-fields { font-size: 2.7cqw; line-height: 1.3; gap: 0; min-width: 0; } .dl-fields > span { white-space: nowrap; } .dl-fields i { margin-right: 1.2cqw; } .dl-fine { font-size: 3.4cqw; white-space: nowrap; } .dl-fields { line-height: 1.18; } .card.dl { padding-top: 4%; padding-bottom: 3.5%; } /* license photo + signature, and ten one-line fields */ .dl-body { align-items: flex-start; gap: 5%; } .dl-photo { width: 24%; flex: none; display: flex; flex-direction: column; align-items: center; } .dl-photo img, .dl-body .dl-photo img { width: 100%; } .dl-sig { margin-top: 2cqw; font-family: var(--hand); font-size: 4.4cqw; line-height: 1; color: #1F2D5A; white-space: nowrap; border-bottom: 1px solid rgba(31,45,90,.35); padding: 0 1cqw .4cqw; transform: rotate(-3deg); } .dl-fields { font-size: 2.45cqw; line-height: 1.14; } .card.dl { gap: 1%; padding-top: 3.5%; padding-bottom: 3%; } .dl-fine { font-size: 3cqw; } /* ---------- the Victorine, open: raspberry trifold, cards tucked in the slots ---------- */ .vw { position: relative; width: min(680px, 100%); margin: 8px auto 0; aspect-ratio: 2.15; } .vw-closed { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .35s, transform .5s var(--ease); z-index: 3; } .vw-closed svg { width: 100%; filter: drop-shadow(0 10px 10px rgba(59,21,36,.2)); } .vw.open .vw-closed { opacity: 0; transform: translate(-50%, -50%) scale(.85); pointer-events: none; } .vw-open { position: absolute; inset: 0; display: grid; grid-template-columns: 2.5% 30% 7% 30% 30.5%; filter: drop-shadow(0 14px 14px rgba(59,21,36,.22)); } .vw-open > * { transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: transform .6s var(--ease), opacity .3s; } .vw.open .vw-open > * { transform: none; opacity: 1; } .vw.open .vw-open > :nth-child(2) { transition-delay: .08s; } .vw.open .vw-open > :nth-child(3) { transition-delay: .16s; } .vw.open .vw-open > :nth-child(4) { transition-delay: .24s; } .vw.open .vw-open > :nth-child(5) { transition-delay: .32s; } .vzip { background: #4A2E22; border: 2.5px solid var(--ink); border-right: 0; border-radius: 8px 0 0 8px; position: relative; } .vzip::after { content: ""; position: absolute; left: 30%; top: 10%; bottom: 10%; width: 40%; background: repeating-linear-gradient(#D9A441 0 3px, #8A6A2A 3px 5px); } .vpanel, .vgusset, .vflap { background: #8E1B45; border: 2.5px solid var(--ink); border-left: 0; position: relative; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.04) 0 2px, transparent 2px 5px); } .vgusset { background-color: #8E1D44; box-shadow: inset 6px 0 10px -6px rgba(0,0,0,.35), inset -6px 0 10px -6px rgba(0,0,0,.35); } .vflap { clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%); border-right: 0; } .vsnap { position: absolute; right: 26%; top: 50%; width: 9%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F6DB94, #B8862F); border: 2px solid var(--ink); } .vpanel { overflow: hidden; } .vstamp { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-family: var(--serif); font-size: .62rem; letter-spacing: .2em; color: #E8C36A; line-height: 1.3; } .vstamp small { font-size: .8em; } /* each slot: the card's top edge peeks out above the pocket line */ .vslot { position: absolute; left: 0; right: 0; top: calc(10% + var(--n) * 14%); bottom: 0; } .vslot .card { position: absolute; left: 8%; right: 8%; top: -18%; width: auto; transform: none; transition: transform .45s var(--ease), box-shadow .2s; box-shadow: none; z-index: 1; padding: 6% 6%; } .vslot .card:hover { transform: translateY(-8%); } .vslot .card.picked { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--gold); } .vslot .pocket { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2; pointer-events: none; background: inherit; background-color: #8E1B45; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px); border-top: 1.5px solid rgba(40,8,18,.55); box-shadow: 0 -2px 4px -2px rgba(0,0,0,.4); } .vslot .pocket::before, .vslot .pocket::after { content: ""; position: absolute; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: #2A0A14; } .vslot .pocket::before { left: 5%; } .vslot .pocket::after { right: 5%; } /* the card you picked, big enough to read */ .vread { display: grid; place-items: center; min-height: 0; } .vread.show { min-height: 230px; margin-bottom: 10px; } .vread .card.big { position: relative; width: min(360px, 92%); transform: none; animation: liftout .45s var(--ease); box-shadow: 0 18px 30px -12px rgba(0,0,0,.35); cursor: default; } @keyframes liftout { from { opacity: 0; transform: translateY(40px) scale(.6); } } /* cards really sit in the slots: only the top edge peeks out until you tap */ .vslot .card { z-index: 1 !important; top: 0; transform: translateY(-36%); } .vslot .card:hover { transform: translateY(-46%); } .vslot .card.picked { transform: translateY(-72%); } /* zip pocket: rupees and dollars fan up out of it */ .vzip { padding: 0; cursor: pointer; overflow: visible; z-index: 4; } .vzip:focus-visible { outline: 3px dashed var(--plum); outline-offset: 2px; } .cash { position: absolute; left: 50%; bottom: 40%; width: 0; height: 0; pointer-events: none; } .note-bill { position: absolute; left: 0; bottom: 0; width: 120px; height: 56px; margin-left: -10px; border-radius: 4px; border: 2px solid var(--ink); background: var(--bg); background-image: radial-gradient(circle at 70% 50%, rgba(255,255,255,.35) 0 14px, transparent 15px), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 6px); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font-family: var(--serif); color: var(--ink); transform-origin: 10px 50px; transform: rotate(90deg) scale(.3); opacity: 0; transition: transform .6s var(--ease), opacity .3s; transition-delay: calc(var(--i) * 70ms); } .note-bill b { font-size: 1rem; font-weight: 600; } .note-bill i { font-style: normal; font-size: .62rem; letter-spacing: .1em; font-family: var(--mono); } .note-bill em { font-style: normal; font-size: .7rem; opacity: .7; } .vw.cash-out .note-bill { opacity: 1; transform: rotate(calc(-80deg + var(--i) * 12deg)) translateX(18px); } /* each slot is its own layer, lower slots in front, so every card peeks out of its own pocket */ .vslot { z-index: calc(var(--n) + 1); } /* the water bottle pocket on the side of my backpack, with my Stanley in it */ .bottle { position: absolute; right: -6%; bottom: 3%; width: 19%; z-index: 4; cursor: pointer; transform: rotate(4deg); transform-origin: 50% 100%; transition: transform .3s var(--ease); } .bottle svg { width: 100%; filter: drop-shadow(0 8px 8px rgba(59,21,36,.2)); } .bottle:hover, .bottle:focus-visible { transform: rotate(4deg) translateY(-6%); outline: none; } .bottle:focus-visible svg { outline: 3px dashed var(--plum); outline-offset: 4px; } .holder { position: absolute; left: -14%; right: -14%; bottom: -3%; height: 44%; border: 2.5px solid #3A2626; border-top-width: 3px; border-radius: 6px 6px 14px 14px; background-color: rgba(28, 26, 30, .86); background-image: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.6px), radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1.6px); background-size: 6px 6px, 6px 6px; background-position: 0 0, 3px 3px; box-shadow: inset 0 3px 0 #4A474F; } .holder::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 1.5px dashed rgba(255,255,255,.35); } /* ---------- makeup pouch: true-to-life sizes, and everything fans up out of the pouch ---------- */ .mbag { padding-top: 300px; width: min(340px, 86%); } .mbag .mbag-inside { position: absolute; left: 50%; right: auto; bottom: 120px; width: 0; height: 0; display: block; z-index: 1; } .mbag .mk { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; transform-origin: 50% 100%; transform: translateX(-50%) rotate(calc(var(--a) * .2)) translateY(70%); opacity: 0; transition: transform .8s cubic-bezier(.2,.9,.25,1.15) var(--d), opacity .3s var(--d); } .mbag .mk svg, .mbag .mk.brushes svg { height: var(--h); width: auto; } .mbag .mk span { font-size: .95rem; white-space: nowrap; } .mbag.open .mk { opacity: 1; transform: translateX(-50%) rotate(var(--a)) translateY(0); } .mbag.open .mk:hover { transform: translateX(-50%) rotate(var(--a)) translateY(-14px); } .mbag-front { z-index: 2; } @media (max-width: 760px) { .mbag { transform: scale(.82); transform-origin: 50% 100%; } } /* each piece rises from its own spot along the zipper, then leans out into the fan */ .mbag .mk { transform: translateX(calc(-50% + var(--x, 0px))) rotate(calc(var(--a) * .2)) translateY(70%); } .mbag.open .mk { transform: translateX(calc(-50% + var(--x, 0px))) rotate(var(--a)) translateY(0); } .mbag.open .mk:hover { transform: translateX(calc(-50% + var(--x, 0px))) rotate(var(--a)) translateY(-14px); } /* the water bottle sleeve is part of the backpack: same black fabric, attached to its side, bottle sunk deep in it */ .bottle { right: -1%; bottom: 4%; width: 18%; transform: none; } .bottle:hover, .bottle:focus-visible { transform: translateY(-5%); } .holder { left: -45%; right: -16%; bottom: -2%; height: 58%; border-radius: 4px 14px 22px 8px; border: 2.5px solid #3A2626; border-left: 0; background-color: #232126; background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.6px); background-size: 5px 5px; box-shadow: inset 0 4px 0 #34313A, -6px 0 0 #232126; } /* elastic edge along the top */ .holder::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%; border-top: none; background: repeating-linear-gradient(90deg, #2E2B33 0 3px, #1C1A1E 3px 5px); border-bottom: 1.5px solid #3A2626; } /* compression strap and buckle */ .holder::after { content: ""; position: absolute; left: -2%; right: -6%; top: 46%; height: 11%; background: #1A181C; border-top: 1.5px solid #3A2626; border-bottom: 1.5px solid #3A2626; box-shadow: inset -26px 0 0 -8px #4A474F; } .holder { left: -26%; } /* only the drawn shapes are tappable, so neighbors in the fan don't steal each other's taps */ .mbag .mk { pointer-events: none; } .mbag.open .mk svg { pointer-events: none; } .mbag.open .mk svg * { pointer-events: visiblePainted; cursor: pointer; } .mbag.open .mk span { pointer-events: auto; cursor: pointer; } .mbag.open .mk { transform: translateX(calc(-50% + var(--x, 0px))) rotate(var(--a)) translateY(var(--rise, 0px)); } .mbag.open .mk:hover { transform: translateX(calc(-50% + var(--x, 0px))) rotate(var(--a)) translateY(calc(var(--rise, 0px) - 14px)); } /* foundation: the tube squeezes and my shade swipes out */ .mbag .mk.squeeze svg { animation: squeeze .5s ease; transform-origin: 50% 100%; } @keyframes squeeze { 40% { transform: scaleX(.82) scaleY(1.03); } } .swatch { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 0; height: 0; overflow: hidden; transition: height .3s; } .swatch.on { height: 64px; } .swatch svg { width: 200px; } .swatch #swipe { stroke-dasharray: 260; stroke-dashoffset: 260; } .swatch.on #swipe { animation: swipe-on .9s cubic-bezier(.3,.7,.3,1) .15s forwards; } @keyframes swipe-on { to { stroke-dashoffset: 0; } } .swatch span { font-size: 1.35rem; color: var(--plum); opacity: 0; transition: opacity .4s .6s; } .swatch.on span { opacity: 1; } /* items in the fan keep their real width (the global max-width was squeezing the brushes) */ .mbag .mk { width: max-content; } .mbag .mk svg { max-width: none; } /* Google Calendar on my phone */ .ic-cal { background: #fff; } .gcal { font-family: -apple-system, system-ui, sans-serif; color: #202124; } .gcal-h { margin: 6px 0 0; display: flex; align-items: baseline; gap: 6px; } .gcal-h b { font-size: 1rem; } .gcal-h span { font-size: .75rem; color: #5F6368; } .gcal-sub { margin: 2px 0 10px; font-family: var(--hand); font-size: 1.05rem; color: var(--plum); } .gcal-ev { display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-items: center; margin-bottom: 7px; } .gcal-ev .t { font-size: .6rem; color: #5F6368; text-align: right; } .gcal-ev .e { padding: 7px 8px; border-radius: 6px; color: #fff; font-size: .7rem; font-weight: 600; } /* Duolingo on my phone */ .ic-duo { background: #58CC02; } .duo { font-family: -apple-system, system-ui, sans-serif; color: #3C3C3C; text-align: center; } .duo-streak { margin: 6px 0 2px; font-weight: 800; color: #FF9600; } .duo-h { margin: 0 0 14px; font-size: .78rem; font-weight: 700; } .duo-path { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-left: 50px; } .duo-node { width: 46px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #E5E5E5; color: #AFAFAF; font-size: .9rem; box-shadow: 0 5px 0 #CECECE; } .duo-node.done { background: #FFC800; color: #fff; box-shadow: 0 5px 0 #E5A800; } .duo-node.now { background: #58CC02; color: #fff; box-shadow: 0 5px 0 #46A302; } /* the card you pick is big and readable */ .vread .card.big { width: min(500px, 96%); } .vread.show { min-height: 330px; } .vread .card.big .dl-fields { font-size: 2.9cqw; line-height: 1.22; } .vread .card.big .dl-fine { font-size: 3.2cqw; } .vread .card.big .dl-state { font-size: 5cqw; } .vread .card.big .t { font-size: 3cqw; } /* the real lid is landscape */ .lid-wrap { max-width: 480px; } /* pens: a typing notepad where every pen types in its own color */ .pad-text { min-height: 136px; padding: 4px 16px; font-family: var(--hand); font-size: 1.7rem; line-height: 34px; outline: none; color: #3A2626; } .pad-text:empty::before { content: attr(data-placeholder); color: rgba(58,38,38,.32); } /* pencils: an erasable sketch pad */ .in-pencil { display: block; } .pencil-top { display: flex; gap: 16px; align-items: center; } .sketch-tools { display: flex; gap: 6px; margin: 12px 0 8px; } .sketch-tools button { padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); cursor: pointer; font: 500 .8rem var(--sans); } .sketch-tools button.on { background: var(--ink); color: var(--cream); } .pencil-pad { background: #FDFBF7; } .pencil-pad canvas { height: 150px; } /* closing the trifold: left folds in, the flap folds over, then it snaps shut */ .vw-open { perspective: 1400px; } .vw .vsnap { cursor: pointer; } .vw.fold-left .vzip { opacity: 0; transition: opacity .2s; } .vw.fold-left .p1 { transform-origin: 100% 50%; transform: rotateY(178deg); filter: brightness(.8); transition: transform .6s cubic-bezier(.5,0,.3,1), filter .6s; transition-delay: 0s; backface-visibility: visible; z-index: 3; } .vw.fold-right .vflap { transform-origin: 0 50%; transform: rotateY(-178deg); filter: brightness(.85); transition: transform .6s cubic-bezier(.5,0,.3,1), filter .6s; transition-delay: 0s; z-index: 4; } .vw.fold-right .vgusset, .vw.fold-right .p2 { transition-delay: 0s; } .vw.no-anim .vw-open > *, .vw.no-anim .vw-closed { transition: none !important; } .vw.snapped .vw-closed { animation: snapshut .45s cubic-bezier(.3,1.6,.5,1); } @keyframes snapshut { 0% { transform: translate(-50%, -50%) scale(.88); } 100% { transform: translate(-50%, -50%) scale(1); } } /* the picked card slides straight up out of its slot and rises above the wallet (no copies) */ .vpanel { overflow: visible; } .vw { transition: margin-top .55s cubic-bezier(.2,.8,.2,1); } .vw.has-pick { margin-top: clamp(190px, 30vw, 250px); } .vslot .card { transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .2s; } .vslot .card.picked { box-shadow: 0 0 0 3px var(--gold), 0 18px 30px -12px rgba(0,0,0,.35); } .vread { display: none; } /* closing: as each side turns over you see the outside, the monogram canvas */ .vw.p1-back .p1 > * { visibility: hidden; } .vw.p1-back .p1 { background-color: #5A3A26; background-image: radial-gradient(circle at 50% 50%, #C99A5B 0 2px, transparent 2.5px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='%23B98A4E' opacity='.9'%3E%3Cpath d='M23 9c2 5 2 5 7 7-5 2-5 2-7 7-2-5-2-5-7-7 5-2 5-2 7-7z'/%3E%3Ccircle cx='23' cy='16' r='1.6' fill='%235A3A26'/%3E%3C/g%3E%3C/svg%3E"); background-size: 12px 12px, 46px 46px; } .vw.flap-back .vflap { background-color: #5A3A26; background-image: radial-gradient(circle at 50% 50%, #C99A5B 0 2px, transparent 2.5px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='%23B98A4E' opacity='.9'%3E%3Cpath d='M23 9c2 5 2 5 7 7-5 2-5 2-7 7-2-5-2-5-7-7 5-2 5-2 7-7z'/%3E%3Ccircle cx='23' cy='16' r='1.6' fill='%235A3A26'/%3E%3C/g%3E%3C/svg%3E"); background-size: 12px 12px, 46px 46px; } .vw.flap-back .vflap .vsnap { visibility: hidden; } /* the zipper: gold pull slides down, teeth open into a gap */ .vzip::after { transition: opacity .3s; } .zgap { position: absolute; left: 22%; width: 56%; top: 8%; height: 0; background: #1A0A10; border-radius: 3px; transition: height .45s cubic-bezier(.4,0,.2,1); z-index: 1; } .zpull { position: absolute; left: 50%; top: 6%; width: 150%; height: 26px; transform: translateX(-50%); z-index: 2; border-radius: 4px; background: radial-gradient(circle at 35% 30%, #F6DB94, #B8862F); border: 1.5px solid #3A2626; transition: top .45s cubic-bezier(.4,0,.2,1); } .zpull::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 4px; height: 16px; transform: translateX(-50%); background: #8E1B45; border-radius: 2px; } .vw.zip-open .zgap { height: 82%; } .vw.zip-open .zpull { top: 84%; } .cash { z-index: 3; } /* the Stanley comes out of the sleeve, and its lid opens */ .bottle svg { transition: transform .6s cubic-bezier(.2,.9,.25,1.1); position: relative; } .bottle.out svg { transform: translateY(-46%); } .bottle svg { overflow: visible; } .bottle .holder { z-index: 2; cursor: pointer; } /* one tap and the Stanley goes back in its pocket */ .bottle-back { position: absolute; left: 50%; bottom: 46%; z-index: 5; transform: translateX(-50%) scale(.6); opacity: 0; pointer-events: none; white-space: nowrap; padding: 4px 11px; border: 2px solid var(--ink); border-radius: 999px; background: #FBE3EA; color: var(--plum); font-size: 1rem; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: opacity .25s .5s, transform .3s cubic-bezier(.3,1.5,.5,1) .5s; } .bottle.out .bottle-back { opacity: 1; transform: translateX(-50%); pointer-events: auto; } .bottle-back:hover { background: #F7CFDC; } .bottle .lid { transform-box: view-box; transform-origin: 21px 25px; transition: transform .45s cubic-bezier(.3,1.4,.5,1); cursor: pointer; } .bottle.lid-open .lid { animation: unscrew .7s ease-out forwards; } .bottle .lid.closing { animation: rescrew .6s ease-in forwards; } @keyframes unscrew { 0% { transform: none; } 15% { transform: translateX(1px) scaleY(.96); } 30% { transform: scaleX(1); } 45% { transform: translateX(1px) scaleY(.96); } 60% { transform: translateY(-6px); } 100% { transform: translate(-6px, -16px) rotate(-35deg); } } @keyframes rescrew { 0% { transform: translate(-6px, -16px) rotate(-35deg); } 50% { transform: translateY(-6px); } 70% { transform: translateX(1px) scaleY(.96); } 85% { transform: scaleX(1); } 100% { transform: none; } } .bottle.out:hover, .bottle.out:focus-visible { transform: none; } /* vertical flip key in the keys sheet; the Pencil clings to the iPad's top edge */ #fob.fob { width: 96px; } .pencil-on { pointer-events: visiblePainted; } .pencil-on { cursor: pointer; transition: transform .2s; } .pencil-on:hover { transform: translate(0, 4px); } .keyring .kpart[data-part="pencil"] { transform-origin: 50% 50%; } /* a picked card slides straight up, no flip, no zoom */ .vw.has-pick { margin-top: 70px; } .vslot .card.picked { transform: translateY(-88%); } /* the rom-com: the cover opens to chapter one... and closes again */ .rc-wrap { display: grid; place-items: center; perspective: 900px; margin: 10px 0; } .rc { position: relative; width: 170px; aspect-ratio: 110/160; } .rc-page { position: absolute; inset: 4% 3% 4% 6%; background: #FFFDF6; border: 2px solid var(--ink); border-radius: 3px; padding: 14px 12px; display: flex; flex-direction: column; gap: 7px; } .rc-page p { margin: 0 0 4px; font-size: 1.2rem; } .rc-page span { height: 3px; background: #D8CFC6; border-radius: 2px; } .rc-page span:nth-of-type(odd) { width: 86%; } .rc-cover { position: absolute; inset: 0; transform-origin: 9% 50%; transition: transform .8s cubic-bezier(.4,0,.2,1); backface-visibility: hidden; } .rc.open .rc-cover { transform: rotateY(-150deg); } .rc-stats { text-align: center; font-size: .82rem; color: var(--muted); } /* hair: one little head, try on each thing */ .hair-stage { display: grid; place-items: center; } .hairdo { width: min(260px, 80%); } .hairdo g[class^="h-"] { opacity: 0; transition: opacity .35s; } .hairdo[data-state="pony"] .h-up, .hairdo[data-state="pony"] .h-pony, .hairdo[data-state="claw"] .h-up, .hairdo[data-state="claw"] .h-claw, .hairdo[data-state="comb"] .h-down, .hairdo[data-state="comb"] .h-comb, .hairdo[data-state="comb"] .h-spark { opacity: 1; } .hairdo .h-pony { transform-box: fill-box; transform-origin: 50% 0; } .hairdo[data-state="pony"] .h-pony { animation: swingpony 1.6s ease-in-out 2; } @keyframes swingpony { 50% { transform: rotate(5deg); } } .hairdo[data-state="comb"] .combmove { animation: combdown 1.4s ease-in-out 2; } @keyframes combdown { 0% { transform: translateY(40px); } 100% { transform: translateY(250px); opacity: 0; } } .hairdo .combmove { transform: translateY(250px); opacity: 0; } .hair-btns { flex-wrap: wrap; justify-content: center; } /* student ID, matched to the real card (number and barcode masked on purpose) */ .ut-photo { background: #ECEBEA; } .ut-num { font-family: var(--mono); font-size: clamp(.42rem, 1.2vw, .64rem); letter-spacing: .08em; margin-top: 2px; color: #3A3A3A; } .ut-word { font-family: Georgia, "Times New Roman", serif; color: #B5562A; } .ut-name, .ut-sub { color: #B5562A; } /* driver license: same background and layout as my real (learner) Texas license, sassier answers. No real number, birthday, address or barcode, on purpose. */ .card.dl.tx { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: auto auto 1fr auto auto; column-gap: 4%; row-gap: 1.2cqw; padding: 3.5% 4.5% 3.5%; overflow: hidden; container-type: inline-size; background: linear-gradient(115deg, #DDE4F7 0%, #EEE6F3 40%, #F9D9DF 75%, #F5C4CC 100%); color: #1E1E24; text-align: left; } .tx > :not(svg) { position: relative; z-index: 1; } .tx-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .tx-seal { position: absolute; right: 3%; top: 3%; width: 17%; z-index: 0; opacity: .85; } .tx-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.4cqw; } .tx-flag { position: relative; width: 7cqw; height: 4.6cqw; flex: none; border: .3cqw solid #1E1E24; overflow: hidden; background: #fff; } .tx-flag b { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: #2B3F8C; color: #fff; font-size: 2.6cqw; display: grid; place-items: center; line-height: 1; font-weight: 400; } .tx-flag i:last-child { position: absolute; left: 34%; right: 0; bottom: 0; height: 50%; background: #C8323C; } .tx-word { font-family: var(--sans); font-weight: 700; font-size: 7.6cqw; line-height: .9; color: #3B3F8F; letter-spacing: -.01em; display: inline-flex; align-items: flex-start; gap: .6cqw; } .tx-word small { font-size: 2.2cqw; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .1em; font-weight: 600; } .tx-kind { font-family: var(--sans); font-weight: 600; font-size: 2.9cqw; line-height: 1.1; color: #2E2E36; letter-spacing: .02em; margin-left: auto; margin-right: 18%; text-align: center; } .tx-banner { grid-column: 2; justify-self: start; background: #2A2A2E; color: #fff; font: 700 2.8cqw/1 var(--sans); letter-spacing: .06em; padding: 1cqw 2.4cqw; border-radius: .4cqw; } .tx-photo { grid-column: 1; grid-row: 2 / 4; display: flex; flex-direction: column; align-items: center; } .tx-photo img { width: 100%; aspect-ratio: .82; object-fit: cover; object-position: 50% 25%; border-radius: .6cqw; border: none; filter: none; } .tx-sig { margin-top: 1cqw; font-family: var(--hand); font-size: 4.2cqw; line-height: 1; color: #1F1F3A; transform: rotate(-4deg); white-space: nowrap; } .tx-fields { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; gap: .3cqw; } .tx i { font-style: normal; font-family: var(--sans); font-size: 2.1cqw; color: #3A3A44; } .tx b { font-family: var(--sans); font-weight: 700; font-size: 3cqw; color: #1E1E24; letter-spacing: .01em; } .tx-fields > span, .tx-who > span, .tx-foot > span { white-space: nowrap; font-size: 2.4cqw; line-height: 1.25; } .tx-who { grid-column: 1 / -1; display: flex; gap: 3cqw; flex-wrap: wrap; } .tx-foot { grid-column: 1 / -1; display: flex; gap: 2.6cqw; flex-wrap: wrap; } .vslot .card.dl.tx { padding: 3.5% 4.5%; } .card.dl.tx { grid-template-rows: auto auto auto auto 1fr; row-gap: .8cqw; } .tx-photo { grid-row: 2 / 6; } .tx-who { grid-column: 2; grid-row: 4; flex-direction: column; gap: 0; } .tx-foot { grid-column: 2; grid-row: 5; gap: 0 2cqw; align-self: end; } .tx b { font-size: 2.6cqw; } .tx-fields > span, .tx-who > span, .tx-foot > span { font-size: 2.2cqw; line-height: 1.2; } .tx-sig { font-size: 4.8cqw; margin-top: 1.4cqw; } /* Medici regulars card: tucked in the zip pocket, slides out with the cash */ .medici-card { display: grid; grid-template-rows: auto 1fr auto; width: 100%; aspect-ratio: 1.75; background: #F6F0E4; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; color: #9C3328; container-type: inline-size; text-align: center; } .m-top { display: flex; align-items: baseline; justify-content: center; gap: 4cqw; padding: 4cqw 4cqw 1cqw; font: 600 3.6cqw/1 var(--sans); letter-spacing: .14em; } .m-top b { font: 800 8cqw/1 var(--sans); letter-spacing: .04em; } .m-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1cqw 3cqw; padding: 1cqw 8cqw; color: #C9C3B8; align-content: center; } .m-slot { position: relative; display: grid; place-items: center; } .m-slot svg { width: 9cqw; } .m-slot.on { color: #2E2A33; } .m-slot.on svg { transform: rotate(-12deg) scale(1.08); } .m-slot i { position: absolute; font-style: normal; font-size: 3.6cqw; color: #9C3328; right: 20%; top: -6%; } .m-band { background: #9C3328; color: #F6F0E4; font: 600 3.6cqw/1 var(--sans); letter-spacing: .3em; padding: 3cqw 0; } .medici-peek { position: absolute; left: 0; bottom: 56%; width: 25%; padding: 0; border: 0; background: none; cursor: pointer; z-index: 5; opacity: 0; pointer-events: none; transform: translate(10%, 60%) rotate(4deg) scale(.6); transform-origin: 0 100%; transition: transform .6s var(--ease), opacity .3s; transition-delay: .25s; } .vw.cash-out .medici-peek { opacity: 1; pointer-events: auto; transform: translate(-30%, -40%) rotate(-10deg); } .medici-peek:hover { filter: brightness(1.03); } .medici-big { width: min(420px, 100%); margin: 10px auto; } /* McCombs strap and the frappuccino PocketBac share one carabiner on the side of the bag */ .charm.mccombs { left: -6%; top: 39%; width: 9%; z-index: 3; animation-delay: -.25s; transform-origin: 50% 4%; } .charm:not(.mccombs) { z-index: 5; } .m-top span { white-space: nowrap; font-size: 3cqw; } /* passport: held sideways, the cover flips up like the real one, top page = signature, bottom = data page. Nothing real on it: no number, birthday, birthplace or machine-readable lines. */ .pp-wrap { width: min(440px, 100%); margin: 6px auto 4px; perspective: 1400px; } .pp { position: relative; display: grid; grid-template-rows: 1fr 1fr; aspect-ratio: 150 / 220; } .pp-page { position: relative; overflow: hidden; border: 2px solid var(--ink); border-radius: 10px; background: linear-gradient(180deg, #DCE3F6, #E9E3F2 60%, #E2E7F7); container-type: inline-size; color: #22264A; text-align: left; } .pp-guil { position: absolute; inset: 0; opacity: .5; pointer-events: none; background: repeating-radial-gradient(circle at 70% 55%, transparent 0 6px, rgba(110,130,210,.18) 6px 7px), repeating-linear-gradient(115deg, transparent 0 9px, rgba(150,120,200,.12) 9px 10px); } .pp-data { grid-row: 2; border-top-left-radius: 2px; border-top-right-radius: 2px; display: grid; grid-template-columns: 30% 1fr; grid-template-rows: auto 1fr auto; gap: 1.5cqw 4cqw; padding: 4cqw 5cqw 3cqw; } .pp-data > * { position: relative; } .pp-hd { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; } .pp-word { font: 600 3.6cqw/1 var(--sans); letter-spacing: .05em; display: flex; flex-direction: column; } .pp-word small { font-size: 1.8cqw; letter-spacing: .04em; font-weight: 400; margin-top: .5cqw; } .pp-us { font-family: var(--serif); font-weight: 600; font-size: 4.6cqw; letter-spacing: .02em; color: #2C2F6E; white-space: nowrap; } .pp-usa { position: absolute; left: 5cqw; top: 13cqw; font: 800 6cqw/1 var(--sans); color: #C8404A; opacity: .75; letter-spacing: .06em; } .pp-photo { grid-column: 1; grid-row: 2; align-self: end; } .pp-photo img { width: 100%; aspect-ratio: .8; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) contrast(1.05); border-radius: 2px; opacity: .92; mix-blend-mode: multiply; } .pp-fields { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: .4cqw; } .pp-fields > span { display: flex; flex-direction: column; line-height: 1.05; } .pp-fields i { font: italic 400 1.9cqw/1.1 var(--sans); color: #4A4E7A; } .pp-fields b { font: 600 3cqw/1.15 var(--sans); letter-spacing: .02em; color: #1C1F3F; } .pp-trail { grid-column: 1 / -1; font: 500 2.6cqw/1 var(--mono); letter-spacing: .12em; color: #2C2F6E; border-top: 1px dashed rgba(44,47,110,.35); padding-top: 2cqw; white-space: nowrap; overflow: hidden; } .pp-flip { grid-row: 2; grid-column: 1; position: relative; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transform-origin: 50% 0; transition: transform .9s cubic-bezier(.45,.05,.25,1); z-index: 2; } .pp.open .pp-flip { transform: rotateX(180deg); } .pp-front, .pp-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pp-front { border-radius: 10px; background: #1E2A4A; border: 2px solid var(--ink); overflow: hidden; box-shadow: 0 14px 24px -14px rgba(0,0,0,.5); } .pp-front svg { position: absolute; left: 50%; top: 50%; width: 73.3%; max-width: none; transform: translate(-50%, -50%) rotate(-90deg); } .pp-back { transform: rotateX(180deg); display: block; padding: 4cqw 5cqw; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .pp-endorse { position: absolute; top: 4cqw; left: 0; right: 0; text-align: center; font: italic 400 2.6cqw/1 var(--serif); color: #4A4E7A; } .pp-ghost { position: absolute; left: 5cqw; top: 14cqw; width: 26%; } .pp-ghost img { width: 100%; aspect-ratio: .8; object-fit: cover; object-position: 50% 25%; opacity: .55; filter: saturate(.6); mix-blend-mode: multiply; border-radius: 2px; } .pp-sig { position: absolute; left: 40%; bottom: 13cqw; font-family: var(--hand); font-size: 8cqw; color: #1C1F3F; transform: rotate(-6deg); } .pp-sigline { position: absolute; left: 36%; right: 5cqw; bottom: 8cqw; border-top: 1.5px solid #1C1F3F; padding-top: 1cqw; font: 600 1.9cqw/1 var(--sans); letter-spacing: .06em; color: #2C2F6E; } .pp-hint { text-align: center; margin: 0 0 12px; color: var(--plum); font-size: 1.15rem; } @media (prefers-reduced-motion: reduce) { .pp-flip { transition: none; } } .pp { grid-template-columns: 1fr; } .pp-data, .pp-flip { grid-column: 1; } .pp-hd { grid-row: 1; } .pp-trail { grid-row: 3; } .pp-photo { align-self: start; } /* the real Victorine: closed it's portrait, flap from the right with the snap on its point, pink pull tab at the bottom. It opens in the same order it closes, just backwards. */ .vw-closed { left: 47.5%; width: 30.5%; } .vw .vw-open > .p1 { transform-origin: 100% 50%; } .vw .vw-open > .vflap { transform-origin: 0 50%; } .vw.open .vw-open > .p1, .vw.open .vw-open > .vflap { transition: transform .6s cubic-bezier(.5,0,.3,1), filter .6s, opacity .2s; transition-delay: 0s; } .vw.p1-back .p1::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F6DB94, #B8862F); border: 2px solid var(--ink); } .vstamp small { letter-spacing: .12em; font-size: .7em; } /* the rom-com: pages riffle when you open it, like flipping through the real paperback */ .rc-leaf { position: absolute; inset: 3% 2% 3% 7%; background: #FBF7EE; border: 1.5px solid #CFC6B8; border-radius: 2px; transform-origin: 2% 50%; transition: transform .5s cubic-bezier(.4,0,.2,1); transition-delay: calc((5 - var(--k)) * 60ms); z-index: 1; background-image: repeating-linear-gradient(transparent 0 9px, rgba(60,50,40,.12) 9px 10px); background-size: 80% 100%; background-position: 50% 30%; background-repeat: no-repeat; } .rc-cover { z-index: 3; } .rc.open .rc-leaf { transform: rotateY(-160deg); transition-delay: calc(.35s + var(--k) * 110ms); } /* one real-world scale for everything (0.94% of the table width per cm; the 32 cm backpack is 30%). To scale, a binder or padfolio is almost as wide as the backpack, so the table is taller once it's open. */ .stage { aspect-ratio: 16 / 22; transition: aspect-ratio .6s var(--ease); } .stage.idle { aspect-ratio: 16 / 13.5; } .stage:not(.idle) .bag { top: 50%; } .bottle { width: 22%; } /* the padfolio, open: black leatherette, résumé stack in the left pocket, pen loop, legal pad */ .pf { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #1D1D21; border: 3px solid var(--ink); border-radius: 14px; padding: 14px; aspect-ratio: 1.55; max-width: 640px; margin: 10px auto; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); } .pf-left { position: relative; border-right: 2px solid #0E0E11; padding: 14px 18px 0 10px; overflow: hidden; } .pf-stack span { position: absolute; left: 6%; right: 16%; top: 10px; bottom: 30%; background: #F7F6F2; border: 1px solid #CFCAC0; transform: rotate(-4deg); } .pf-stack span + span { transform: rotate(-1.5deg); top: 14px; } .pf-resume { position: absolute; left: 7%; right: 15%; top: 18px; bottom: 30%; background: #FFFFFF; border: 1px solid #CFCAC0; padding: 10px 10px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: #1D1D21; transform: rotate(1deg); transition: transform .3s var(--ease); } .pf-resume:hover, .pf-resume:focus-visible { transform: translateY(-10px) rotate(-1deg); } .pf-resume b { font: 600 .7rem/1 var(--serif); letter-spacing: .12em; text-align: center; margin-bottom: 4px; } .pf-resume i { height: 3px; background: #D9D6CF; border-radius: 2px; } .pf-resume i.s { width: 40%; background: #8B8880; } .pf-take { margin-top: auto; align-self: center; font: 500 .9rem var(--hand); color: var(--plum); } .pf-left::after { content: ""; position: absolute; left: 0; right: 10%; bottom: 0; height: 34%; background: #232328; border-top: 2px solid #0E0E11; border-radius: 0 0 0 8px; } .pf-pen { position: absolute; right: 3%; top: 16%; width: 8px; height: 58%; background: linear-gradient(90deg, #111 0 40%, #333 60%, #111); border-radius: 4px; z-index: 2; box-shadow: 0 0 0 4px #121215; } .pf-right { padding: 12px 14px 12px 18px; } .pf-legal { height: 100%; background: #FFFFFF; border: 1px solid #D8D8D8; border-top: 22px solid #FFFFFF; outline: none; overflow: auto; padding: 0 10px 0 34px; font: 400 1.05rem/22px var(--hand); color: #24304F; background-image: linear-gradient(90deg, transparent 26px, rgba(220,80,90,.55) 26px 27.5px, transparent 27.5px), repeating-linear-gradient(transparent 0 21px, rgba(110,150,210,.45) 21px 22px); } .pf-legal:empty::before { content: "take a note…"; color: #A9B2C6; } @media (max-width: 760px) { .pf { aspect-ratio: auto; grid-template-columns: 1fr; } .pf-left { min-height: 220px; border-right: 0; border-bottom: 2px solid #0E0E11; } .pf-right { min-height: 200px; } } /* each makeup swatch is written in its own shade */ .swatch { flex-direction: column; gap: 0; } .swatch.on { height: 104px; } .swatch span { font-size: 1.6rem; font-weight: 700; line-height: 1.1; text-align: center; } .swatch-more { text-align: center; margin: 0 0 4px; min-height: 1.4em; } .pp-usa { top: 15cqw; left: 6cqw; } .pp-data .pp-photo { margin-top: 9cqw; } .hairdo { width: min(280px, 82%); } .hairdo .h-pony { transform-origin: 50% 34%; transform-box: view-box; } @keyframes combdown { 0% { transform: translateY(30px); opacity: 1; } 100% { transform: translateY(230px); opacity: 0; } } /* passport as a real little book: portrait pages, the spine in the middle, pages turn right to left */ .pb-wrap { width: min(520px, 100%); margin: 8px auto 6px; perspective: 1800px; } .pb { position: relative; width: 100%; aspect-ratio: 176 / 125; transition: transform .6s var(--ease); transform: translateX(-25%); outline: none; } .pb.open { transform: none; } .pb.back { transform: translateX(25%); } .pb-leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.45,.05,.25,1); cursor: pointer; } .pb-leaf.turned { transform: rotateY(-180deg); } .pb-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pb-backface { transform: rotateY(180deg); } .pb-page { position: absolute; inset: 0; overflow: hidden; border: 2px solid var(--ink); background: linear-gradient(180deg, #E4E9F7, #EEE6F1 55%, #F4E4EA); color: #22264A; container-type: inline-size; text-align: left; } .pb-front .pb-page { border-radius: 2px 10px 10px 2px; box-shadow: inset 8px 0 10px -8px rgba(0,0,0,.25); } .pb-backface .pb-page { border-radius: 10px 2px 2px 10px; box-shadow: inset -8px 0 10px -8px rgba(0,0,0,.25); } .pb-cover { background: #1E2A4A; display: grid; place-items: center; box-shadow: 0 16px 24px -14px rgba(0,0,0,.55) !important; } .pb-cover svg { width: 112%; max-width: none; margin: -6% 0; } .pb-back { background: #1E2A4A; } .pb-small { position: absolute; top: 5cqw; left: 0; right: 0; text-align: center; font: italic 400 4.4cqw var(--serif); color: #4A4E7A; } .pb-ghost { position: absolute; left: 10cqw; top: 20cqw; width: 42%; } .pb-ghost img, .pb-photo img { width: 100%; aspect-ratio: .8; object-fit: cover; object-position: 50% 25%; border-radius: 3px; mix-blend-mode: multiply; } .pb-ghost img { opacity: .5; } .pb-sig { position: absolute; left: 8cqw; bottom: 22cqw; font-family: var(--hand); font-size: 12cqw; color: #1C1F3F; transform: rotate(-6deg); } .pb-sigline { position: absolute; left: 8cqw; right: 8cqw; bottom: 14cqw; border-top: 1.5px solid #1C1F3F; padding-top: 1.5cqw; font: 600 3.2cqw var(--sans); letter-spacing: .06em; } .pb-data { padding: 6cqw 7cqw; display: flex; flex-direction: column; gap: 2cqw; } .pb-hd { font: 600 4.2cqw/1.1 var(--sans); letter-spacing: .06em; display: flex; flex-direction: column; gap: 1cqw; position: relative; } .pb-hd b { font: 600 5.6cqw/1.05 var(--serif); color: #2C2F6E; letter-spacing: .01em; } .pb-usa { font: 800 9cqw/1 var(--sans); color: #C8404A; opacity: .8; letter-spacing: .06em; position: relative; } .pb-photo { width: 44%; position: absolute; right: 7cqw; top: 26cqw; } .pb-photo img { filter: grayscale(1); } .pb-fields { display: flex; flex-direction: column; gap: 1cqw; position: relative; width: 52%; } .pb-fields > span { display: flex; flex-direction: column; } .pb-fields i { font: italic 400 3cqw/1.1 var(--sans); color: #4A4E7A; } .pb-fields b { font: 600 4.2cqw/1.15 var(--sans); color: #1C1F3F; } .pb-trail { margin-top: auto; font: 500 3.6cqw var(--mono); letter-spacing: .1em; border-top: 1px dashed rgba(44,47,110,.4); padding-top: 2cqw; position: relative; } .visa { background-color: #EEF0F8; } .visa.scene-waves { background-image: repeating-linear-gradient(170deg, rgba(214,90,110,.13) 0 14px, transparent 14px 30px), linear-gradient(180deg, #EAF0FA, #F5E6EC); } .visa.scene-peaks { background-image: linear-gradient(160deg, transparent 55%, rgba(110,130,190,.18) 55% 70%, transparent 70%), linear-gradient(200deg, transparent 50%, rgba(110,130,190,.22) 50% 68%, transparent 68%), linear-gradient(180deg, #F4E2E8, #E6EBF7); } .visa.scene-sun { background-image: radial-gradient(circle at 50% 38%, rgba(240,190,120,.35) 0 22%, transparent 23%), repeating-radial-gradient(circle at 50% 38%, transparent 0 14px, rgba(214,120,90,.08) 14px 15px), linear-gradient(180deg, #F6E6DC, #EAE8F6); } .pb-visas { position: absolute; top: 8cqw; left: 0; right: 0; text-align: center; font: italic 600 6cqw var(--serif); color: #2C2F6E; } .pb-num { position: absolute; bottom: 4cqw; left: 0; right: 0; text-align: center; font: 700 8cqw var(--serif); color: transparent; -webkit-text-stroke: 1px #6C5A8E; } .pb-note { position: absolute; left: 8cqw; right: 8cqw; bottom: 18cqw; text-align: center; font: 500 5cqw var(--hand); color: var(--plum); } .pb-page .stamp { position: absolute; width: 52%; transform: rotate(var(--r)); } .pb-ctrl { justify-content: center; align-items: center; gap: 14px; } .pb-ctrl .hand { min-width: 9em; text-align: center; color: var(--plum); font-size: 1.2rem; } @media (prefers-reduced-motion: reduce) { .pb-leaf, .pb { transition: none; } } /* the frappuccino PocketBac + McCombs strap clip to a webbing loop up on the shoulder, not a zipper */ .bag .strap-loop { position: absolute; left: 3%; top: 9%; width: 5%; height: 6%; border: 3px solid #1A181C; border-right-color: #2B282E; border-radius: 6px 2px 2px 6px; background: transparent; z-index: 3; pointer-events: none; } .charm { left: -7%; top: 12%; } .charm.mccombs { left: -11%; top: 9%; } /* the bottle pocket is on the side: it sits behind the bag, only peeking out */ .bag-art { position: relative; z-index: 2; } .bottle { right: -13%; bottom: 6%; width: 22%; z-index: 1; } .bottle .holder { left: -6%; right: -18%; } .bag .strap-loop { left: -1.5%; top: 9%; width: 6%; height: 5%; border-color: #55505A; border-width: 4px; z-index: 3; } .charm { left: -5%; top: 12.5%; } .charm.mccombs { left: -8.5%; top: 10%; } .bottle { right: -10%; } /* each panel keeps its cards inside its own layer, so a folding panel always covers the cards below it */ .vpanel, .vgusset { isolation: isolate; } .vw.fold-left .p1 { z-index: 6; } .vw.fold-right .vflap { z-index: 7; } /* passport data page: bigger, readable type; photo under the header */ .pb-hd b { font-size: 6.4cqw; } .pb-photo { top: 34cqw; width: 40%; } .pb-usa { font-size: 10cqw; } .pb-fields { width: 50%; gap: 1.6cqw; } .pb-fields i { font-size: 3.8cqw; } .pb-fields b { font-size: 5.2cqw; } .pb-trail { font-size: 4.2cqw; } /* vertical-design cards lie sideways in the slots, just like the real ones */ .card.vert { padding: 0 !important; overflow: hidden; background: #ccc; container-type: size; } .card.vert .vface { position: absolute; left: 50%; top: 50%; width: 100cqh; height: 100cqw; transform: translate(-50%, -50%) rotate(-90deg); } .card.vert .vface svg { display: block; width: 100%; height: 100%; max-width: none; } .vslot .card.picked { transform: translateY(-52%); } .vw.has-pick { margin-top: 30px; } /* tap the Medici card: it comes all the way out; tap again and it tucks back into the zip pocket */ .vw.cash-out.medici-out .medici-peek { transform: translate(-6%, -92%) rotate(-3deg) scale(1.25); z-index: 9; } /* the bill compartment sits behind the flap; the notes peek over its top edge */ .vflap { z-index: 1; } .vw-open > .vbills { position: absolute; left: 70.5%; width: 21%; top: -9%; height: 40%; padding: 0; border: 0; background: none; cursor: pointer; z-index: 0; overflow: visible; } .vw.open .vw-open > .vbills { transform: none; } .vw.fold-left .vbills, .vw.fold-right .vbills { opacity: 0 !important; transition: opacity .15s; } .bill { position: absolute; left: calc(4% + var(--k) * 8%); bottom: 0; width: 62%; height: 100%; border: 2px solid var(--ink); border-radius: 3px; background: var(--bg); background-image: radial-gradient(circle at 70% 30%, rgba(255,255,255,.35) 0 10px, transparent 11px), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 5px); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; padding: 4px 6px; transform: rotate(calc(-6deg + var(--k) * 3deg)) translateY(52%); transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--k) * 50ms); } .bill b { font: 600 .82rem/1 var(--serif); } .bill i { font-style: normal; font-size: .42rem; line-height: 1.2; opacity: .75; margin-top: 2px; } .vw.bills-out .bill { transform: rotate(calc(-14deg + var(--k) * 7deg)) translateY(-8%); } .vbills:hover .bill { transform: rotate(calc(-6deg + var(--k) * 3deg)) translateY(44%); } .vw.bills-out .vbills:hover .bill { transform: rotate(calc(-14deg + var(--k) * 7deg)) translateY(-12%); } .vw.has-pick, .vw.bills-out { margin-top: 70px; } /* the monogram canvas, closer to the real one */ .vw.p1-back .p1, .vw.flap-back .vflap { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Crect%20width%3D%2244%22%20height%3D%2244%22%20fill%3D%22%234E3424%22/%3E%3Cg%20fill%3D%22%23C29A5B%22%3E%3Ctext%20x%3D%223%22%20y%3D%2217%22%20font-family%3D%22Georgia%2C%20serif%22%20font-size%3D%2213%22%20font-style%3D%22italic%22%3EL%3C/text%3E%3Ctext%20x%3D%227.5%22%20y%3D%2217%22%20font-family%3D%22Georgia%2C%20serif%22%20font-size%3D%2213%22%3EV%3C/text%3E%3Cpath%20d%3D%22M33%204%20l2.2%204.4%204.4%202.2%20-4.4%202.2%20-2.2%204.4%20-2.2%20-4.4%20-4.4%20-2.2%204.4%20-2.2z%22/%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2233%22%20r%3D%226%22%20fill%3D%22none%22%20stroke%3D%22%23C29A5B%22%20stroke-width%3D%221.2%22/%3E%3Cpath%20d%3D%22M11%2029%20a2%202%200%200%201%200%204%20a2%202%200%200%201%200%20-4z%20M7%2033%20a2%202%200%200%201%204%200%20a2%202%200%200%201%20-4%200z%20M11%2037%20a2%202%200%200%201%200%20-4%20a2%202%200%200%201%200%204z%20M15%2033%20a2%202%200%200%201%20-4%200%20a2%202%200%200%201%204%200z%22/%3E%3Cpath%20d%3D%22M33%2026%20c3%200%205%202%205%207%20c-5%200%20-5%200%20-5%200%20c0%200%200%200%200%20-7z%20M33%2026%20c-3%200%20-5%202%20-5%207%20c5%200%205%200%205%200z%20M33%2040%20c3%200%205%20-2%205%20-7%20c-5%200%20-5%200%20-5%200z%20M33%2040%20c-3%200%20-5%20-2%20-5%20-7%20c5%200%205%200%205%200z%22/%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%2233%22%20r%3D%221.2%22%20fill%3D%22%234E3424%22/%3E%3C/g%3E%3C/svg%3E") !important; background-size: 44px 44px !important; background-color: #4E3424; } /* passport stays portrait when open; the signature + data pages are printed sideways, like the real one */ .pb-plain { container-type: size; background: #E4E9F7; } .pb-rot { position: absolute; left: 50%; top: 50%; width: 100cqh; height: 100cqw; transform: translate(-50%, -50%) rotate(-90deg); } .pb-rot > .pp-page { position: absolute; inset: 0; border: 0; border-radius: 0; } .pb-rot > .pp-data { display: grid; grid-template-columns: 30% 1fr; grid-template-rows: auto 1fr auto; } .pp-sign-l .pp-endorse { top: 4cqw; } .pp-sign-l .pp-ghost { top: 12cqw; } /* padfolio: the legal pad wraps instead of stretching */ .pf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pf-right, .pf-legal { min-width: 0; } .pf-legal { overflow-wrap: anywhere; word-break: break-word; overflow-x: hidden; } /* padfolio v2: fixed size, real résumé, handwritten notes, black Paper Mate */ .pf { aspect-ratio: 1.45; width: min(640px, 100%); } .pf-left, .pf-right { min-height: 0; overflow: hidden; } .pf-resume { padding: 0; overflow: hidden; } .pf-resume img { width: 100%; height: auto; display: block; } .pf-take { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; background: rgba(255,255,255,.85); padding: 2px 0; } .pf-pen { width: 14px; height: 70%; top: 12%; background: none; box-shadow: none; } .pf-pen svg { width: 100%; height: 100%; display: block; } .pf-legal { height: 100%; max-height: 100%; overflow: hidden; padding: 0 10px 0 36px; font: 600 1.25rem/22px var(--hand); color: #1F2D5A; cursor: default; } .pf-legal p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-legal p:first-child { text-decoration: underline; text-decoration-thickness: 1px; } .pf-legal .pf-u { color: #A3204F; margin-top: 22px; white-space: normal; } @media (max-width: 760px) { .pf { aspect-ratio: auto; } .pf-left { min-height: 260px; } .pf-right { height: 200px; } } .bp-big { width: min(560px, 100%); margin: 10px auto; } .zips .pull { cursor: grab; } .zips .pull:active { cursor: grabbing; } .vzip, .mpull { cursor: grab; } /* the rom-com opens on tap (cover swings, pages fan) and closes on the next tap */ .rc { width: 200px; } .rc-cover { transition: transform .9s cubic-bezier(.45,.05,.25,1); } .rc.open .rc-cover { transform: rotateY(-165deg); } .rc-leaf { transition: transform .7s cubic-bezier(.45,.05,.25,1); } .rc.open .rc-leaf { transform: rotateY(calc(-150deg + var(--k) * 4deg)); transition-delay: calc(.25s + var(--k) * 90ms); } .rc-wrap { padding-left: 120px; } @media (max-width: 760px) { .rc-wrap { padding-left: 90px; } .rc { width: 150px; } } /* the sweater, laid flat: sleeves fold in, the bottom folds up; unfold it again */ .sw { position: relative; width: 340px; max-width: 100%; height: 330px; margin: 14px auto 6px; perspective: 1000px; } .sw > * { position: absolute; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2228%22%20viewBox%3D%220%200%2040%2028%22%3E%3Crect%20width%3D%2240%22%20height%3D%2228%22%20fill%3D%22%23F3A9BB%22/%3E%3Cpath%20d%3D%22M6%200%20C14%207%2014%207%206%2014%20C14%2021%2014%2021%206%2028%20M14%200%20C6%207%206%207%2014%2014%20C6%2021%206%2021%2014%2028%22%20fill%3D%22none%22%20stroke%3D%22%23D9849C%22%20stroke-width%3D%222.6%22/%3E%3Cpath%20d%3D%22M30%200%20L38%2014%20L30%2028%20M30%200%20L22%2014%20L30%2028%22%20fill%3D%22none%22%20stroke%3D%22%23DE8CA2%22%20stroke-width%3D%222.2%22/%3E%3Cpath%20d%3D%22M19%200%20v28%22%20stroke%3D%22%23E395A9%22%20stroke-width%3D%221.6%22%20stroke-dasharray%3D%222%202%22/%3E%3C/svg%3E"); background-size: 40px 28px; border: 3px solid var(--ink); } .sw-top { left: 90px; top: 20px; width: 160px; height: 140px; border-radius: 26px 26px 0 0; border-bottom: 0; z-index: 2; } .sw-bot { left: 90px; top: 160px; width: 160px; height: 140px; border-top: 0; transform-origin: 50% 0; transition: transform .7s cubic-bezier(.45,.05,.25,1) .55s; z-index: 3; transform-style: preserve-3d; } .sw-bot::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -3px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%3E%3Crect%20width%3D%226%22%20height%3D%2210%22%20fill%3D%22%23E996AB%22/%3E%3Cpath%20d%3D%22M3%200%20v10%22%20stroke%3D%22%23D27C93%22%20stroke-width%3D%222%22/%3E%3C/svg%3E"); background-size: 6px 10px; border: 3px solid var(--ink); border-radius: 0 0 6px 6px; } .sw-sl { top: 26px; width: 64px; height: 230px; border-radius: 20px 20px 8px 8px; transition: transform .6s cubic-bezier(.45,.05,.25,1); z-index: 4; } .sw-sl::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -3px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%3E%3Crect%20width%3D%226%22%20height%3D%2210%22%20fill%3D%22%23E996AB%22/%3E%3Cpath%20d%3D%22M3%200%20v10%22%20stroke%3D%22%23D27C93%22%20stroke-width%3D%222%22/%3E%3C/svg%3E"); background-size: 6px 10px; border: 3px solid var(--ink); border-radius: 0 0 6px 6px; } .sw-sl.l { left: 30px; transform-origin: 100% 0; transform: rotate(14deg); } .sw-sl.r { left: 246px; transform-origin: 0 0; transform: rotate(-14deg); } .sw-neck { left: 132px; top: 17px; width: 76px; height: 78px; background: none; border: 0; z-index: 5; } .sw-pony { left: 196px; top: 60px; width: 18px; height: 16px; background: none; border: 0; z-index: 5; } .sw.folded .sw-sl.l { transform: rotateY(-180deg) translateX(-2px); } .sw.folded .sw-sl.r { transform: rotateY(180deg) translateX(2px); } .sw.folded .sw-bot { transform: rotateX(180deg); transition-delay: .55s; } .sw:not(.folded) .sw-sl { transition-delay: .7s; } .sw:not(.folded) .sw-bot { transition-delay: 0s; } .sw.folded .sw-sl.l { transform: rotateY(-180deg) translateX(-2px) scaleY(.55); } .sw.folded .sw-sl.r { transform: rotateY(180deg) translateX(2px) scaleY(.55); } .sw.folded { height: 190px; transition: height .5s ease .9s; } .sw { transition: height .5s ease; } #item-notebooks { z-index: 3; } /* my business card, tucked in the padfolio's card slot; tap to flip */ .bc { position: absolute; left: 9%; bottom: 7%; width: 46%; aspect-ratio: 1.75; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; z-index: 3; transform: rotate(-3deg); } .bc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.45,.05,.25,1); } .bc.flip .bc-in { transform: rotateY(180deg); } .bc-f, .bc-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1.5px solid var(--ink); border-radius: 4px; background: #FFF9F4; display: flex; flex-direction: column; justify-content: center; padding: 6px 10px; text-align: left; container-type: inline-size; } .bc-b { transform: rotateY(180deg); background: #F4C6D2; gap: 1px; } .bc-f b { font: 600 10cqw/1 var(--serif); color: var(--ink); } .bc-f i { font: 400 5.4cqw/1.3 var(--sans); font-style: normal; color: var(--plum); margin-top: 3px; } .bc-f em, .bc-b em { font: 600 7cqw/1.1 var(--hand); color: #A3204F; font-style: normal; margin-top: 3px; } .bc-heart { position: absolute; right: 8px; top: 4px; color: #E0568F; font-size: 9cqw; } .bc-b span { font: 500 5.6cqw/1.35 var(--mono); color: #3A2626; } .bag .strap-loop { display: none; } .charm { transform-origin: 50% 0; } /* hanging off the third zipper pull, swinging out to the side so the front pocket's pull stays free */ @keyframes dangle { 0%, 100% { transform: rotate(28deg); } 50% { transform: rotate(36deg); } } .charm { animation: dangle 3.2s ease-in-out infinite; z-index: 5; } .charm.mccombs { z-index: 4; animation-delay: -.4s; } @media (prefers-reduced-motion: reduce) { .charm { animation: none; transform: rotate(30deg); } } .charm.mccombs { z-index: 6; } .pf-pen { width: 22px; height: 46%; top: 22%; right: 1%; } /* the Stanley can be carried anywhere and dropped back into its pocket */ .bottle svg { cursor: grab; } .bottle.free { z-index: 7; } .bottle.free .holder { z-index: -1; } .bottle.dragging svg { transition: none; cursor: grabbing; filter: drop-shadow(0 14px 14px rgba(59,21,36,.25)); } .bottle.free:not(.dragging) svg { transition: transform .4s cubic-bezier(.2,.9,.25,1.1); } /* phone: Contacts */ .ic-ct { background: linear-gradient(180deg, #B9BEC6, #8D939C); } .ct { padding: 4px 2px 10px; text-align: center; font-family: var(--sans); } .ct-me { display: flex; flex-direction: column; align-items: center; gap: 2px; } .ct-me img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .ct-me b { font-size: 1rem; margin-top: 4px; } .ct-me span { font-size: .68rem; color: #8A8A8E; } .ct-ask { font: 600 1.15rem/1.15 var(--hand); color: var(--plum); margin: 10px 0 8px; } .ct-ask small { font-size: .9rem; color: #8A6A74; } .ct-form { display: flex; flex-direction: column; gap: 6px; text-align: left; background: #fff; border-radius: 12px; padding: 8px 10px; } .ct-form label { display: flex; flex-direction: column; font-size: .62rem; color: #8A8A8E; letter-spacing: .02em; border-bottom: 1px solid #ECECEF; padding-bottom: 4px; } .ct-form label span { font-size: .58rem; } .ct-form input { border: 0; outline: none; font: 500 .85rem var(--sans); color: #1C1C1E; padding: 2px 0; background: none; min-width: 0; } .ct-add { margin-top: 4px; border: 0; border-radius: 10px; background: #E0568F; color: #fff; font: 600 .82rem var(--sans); padding: 8px; cursor: pointer; } .ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .ct-fine { font-size: .6rem; color: #8A8A8E; margin: 6px 0 2px; } .ct-save { border: 0; background: none; color: #2E6FD8; font: 500 .75rem var(--sans); cursor: pointer; } /* phone home: live clock, date and Austin weather up top; apps fit on one screen */ .phone-big .clock { margin: 2px 0 0; font-size: 1.7rem; } .pdate { text-align: center; margin: 0 0 8px; font: 500 .72rem var(--sans); color: #6B5A62; } .wx { display: flex; align-items: center; gap: 8px; margin: 0 2px 12px; padding: 7px 10px; border-radius: 14px; background: rgba(255,255,255,.65); border: 1.5px solid rgba(58,38,38,.15); font-family: var(--sans); } .wx-ic { font-size: 1.3rem; line-height: 1; } .wx-t { font-weight: 600; font-size: 1.05rem; } .wx-d { font-size: .62rem; color: #6B5A62; line-height: 1.2; } .phone-big .home { gap: 10px 6px; } .phone-big .papp .ic { width: 46px; height: 46px; border-radius: 12px; } .papp { font-size: .64rem; min-width: 0; } .plabel { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ic-gcal { background: #fff; } .phone-big .screen { height: 468px; } /* Stanley All Day Slim (~7 cm wide, ~26 cm tall) next to the backpack */ .bottle { width: 16%; right: -7%; } /* the pen, real size against the page (~14.5 cm, about half the page) */ .pf-pen { width: 46px; height: auto; top: 12%; right: -10px; z-index: 4; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); } .pf-pen svg { width: 100%; height: auto; } /* perfume: spritz sends a little mist out of the nozzle */ .pf-bottle { position: relative; width: 170px; margin: 30px auto 10px; } .mist { position: absolute; left: 28%; top: 4%; width: 0; height: 0; pointer-events: none; } .mist i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(242,166,142,.55), rgba(242,166,142,0) 70%); opacity: 0; } .mist.go i { animation: mist 1.1s ease-out forwards; animation-delay: calc(var(--k) * 25ms); } @keyframes mist { 0% { opacity: .9; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(calc(-40px - var(--k) * 5px), calc((var(--k) - 7) * 5px - 10px)) scale(calc(2 + var(--k) * .25)); } } /* hair: comb out the tangles yourself; braid it twist by twist */ .hairdo[data-state="braid"] .h-up, .hairdo[data-state="braid"] .h-braid { opacity: 1; } .hairdo[data-state="comb"] .h-tangle { opacity: 1; } .hairdo .h-tangle { transition: opacity .4s; } .hairdo .h-spark { opacity: 0 !important; transition: opacity .4s; } .hairdo.smooth[data-state="comb"] .h-spark { opacity: 1 !important; } .hairdo .combmove { transform: none; opacity: 1; animation: none !important; } .hairdo[data-state="comb"] { cursor: grab; } .hairdo[data-state="braid"] { cursor: pointer; } #braid .seg { opacity: 0; transition: opacity .25s, transform .25s; } #braid .seg.on { opacity: 1; } #braid .braid-tie, #braid .braid-end { opacity: 0; transition: opacity .3s; } .hairdo.braided #braid .braid-tie, .hairdo.braided #braid .braid-end { opacity: 1; } .hair-hint { min-height: 1.4em; margin: 0; text-align: center; color: var(--plum); font-size: 1.15rem; } /* Chanel compact: drag the lid open and closed; the inside of the lid is a mirror too */ .cp-lid { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; cursor: grab; } .cp-out, .cp-in { position: absolute; inset: 0; border-radius: 22%; border: 3px solid var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .cp-out { background: #141011; display: grid; place-items: center; } .cp-out svg { width: 46%; } .cp-in { transform: rotateX(180deg); background: #141011; padding: 10px; } .cp-in span { display: block; width: 100%; height: 100%; border-radius: 18%; background: linear-gradient(135deg, #F4F6F8 0%, #C9CED4 45%, #EEF1F4 60%, #B9BFC6 100%); } .cp-hint { position: absolute; top: -206px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--plum); font-size: 1.05rem; margin: 0; opacity: .8; } /* perfume: the chrome cap comes off, then the nozzle sprays */ .pf-bottle { width: 190px; margin: 50px auto 6px; } .pf-bottle .pcap { transition: transform .6s cubic-bezier(.3,1.3,.5,1); transform-box: view-box; } .pf-bottle.capoff .pcap { transform: translate(78px, 40px) rotate(18deg); } .pf-hint { text-align: center; color: var(--plum); margin: 0; font-size: 1.1rem; } .notes3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } .notes3 div { border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; background: #FCE8E5; } .notes3 b { display: block; font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--plum); } .notes3 span { font-size: .85rem; } @media (max-width: 760px) { .notes3 { grid-template-columns: 1fr; } } /* the braid: its own pulled-back hair, plaits cross down from the nape */ .hairdo[data-state="braid"] .h-up { opacity: 0 !important; } .hairdo .h-braid { opacity: 0; } .hairdo[data-state="braid"] .h-braid { opacity: 1; } #braid .seg { opacity: 0; transform-box: fill-box; transition: opacity .3s; } #braid .seg.on { opacity: 1; } #braid .loose { transition: opacity .4s; } .hairdo.braided #braid .loose { opacity: 0; } /* fix: plaits keep their own SVG transforms */ #braid .seg { transform-box: view-box; } /* combing: each pass clears one layer (frizz, then knots, then flyaways) */ #tangle g { transition: opacity .5s; } #tangle[data-p="1"] .t1, #tangle[data-p="2"] .t1, #tangle[data-p="2"] .t2, #tangle[data-p="3"] g { opacity: 0; } .comb-dots { display: none; justify-content: center; gap: 6px; margin: 2px 0 0; } .hairdo-wrap { position: relative; } .comb-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--plum); } .comb-dots[data-p="1"] i:nth-child(1), .comb-dots[data-p="2"] i:nth-child(-n+2), .comb-dots[data-p="3"] i { background: var(--plum); } /* zipping the makeup pouch closed: the rightmost thing goes back in first, then leftward with the pull */ .mbag:not(.open) .mk { transition-delay: calc(450ms - var(--d)) !important; } /* wallet: tap the bottom-left of the open wallet to fold it closed */ .vw.open .p1 { cursor: pointer; } .vw.open .p1 .vslot .card { cursor: pointer; } /* a picked card comes most of the way out of its slot */ .vslot .card.picked { transform: translateY(-88%); } .vw.has-pick { margin-top: clamp(90px, 14vw, 130px); } /* the zip edge belongs to the left panel: it folds over with it (hinge = the left panel's right edge) */ .vw .vw-open > .vzip { transform-origin: 1300% 50%; } .vw.open .vw-open > .vzip { transition: transform .6s cubic-bezier(.5,0,.3,1), opacity .2s; transition-delay: 0s; } .vw.fold-left .vzip { opacity: 1 !important; transform: rotateY(178deg); z-index: 6; } .vw.fold-left .vzip .zpull, .vw.fold-left .vzip .zgap { visibility: hidden; } /* résumé: tap to pull it out of the pocket, in front of the sleeve and the business card */ .pf-resume { cursor: pointer; transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .3s; } .pf.res-out .pf-left { overflow: visible; z-index: 5; } .pf.res-out .pf-resume { z-index: 9; bottom: auto; transform: translate(6%, -10%) rotate(-1.5deg) scale(1.12); box-shadow: 0 24px 40px -16px rgba(0,0,0,.55); } .pf-take { pointer-events: none; } .pf-open { display: none; position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font: 500 .72rem var(--sans); padding: 5px 10px; border-radius: 999px; text-decoration: none; } .pf.res-out .pf-open { display: block; } .bc-b a { font: 500 5.6cqw/1.45 var(--mono); color: #3A2626; text-decoration: underline; text-decoration-color: rgba(163,32,79,.45); text-underline-offset: 2px; pointer-events: none; } .bc.flip .bc-b a { pointer-events: auto; } .bc-b a:hover { color: #A3204F; } /* items glide to their new spots when more pockets open */ .item.out { transition: left .6s cubic-bezier(.2,.8,.2,1), top .6s cubic-bezier(.2,.8,.2,1); } .stage { transition: aspect-ratio .6s; } /* ideas & thoughts journal */ .jr { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; max-width: 520px; margin: 10px auto; } .jr-page { aspect-ratio: 125 / 176; max-height: 320px; background: #FFFBF6; border: 2px solid var(--ink); border-radius: 4px 10px 10px 4px; padding: 26px 14px 10px 34px; overflow: hidden; overflow-wrap: anywhere; outline: none; font: 600 1.15rem/24px var(--hand); color: #1F2D5A; background-image: linear-gradient(90deg, transparent 26px, rgba(226,106,141,.5) 26px 27.5px, transparent 27.5px), repeating-linear-gradient(transparent 0 23px, rgba(110,150,210,.35) 23px 24px); background-position: 0 2px; } .jr-page:empty::before { content: "an idea…"; color: #B9B2C6; } @media (max-width: 760px) { .jr { grid-template-columns: 110px 1fr; } } /* the telescopic Mildliner pouch: the white sleeve slides down over the corduroy and the pens pop up */ .tele-front { width: 190px; margin-top: -120px; } .tele .tele-sleeve { transition: transform .7s cubic-bezier(.3,1.2,.5,1); } .tele-front.down .tele-sleeve { transform: translateY(66px); } .pens.open .pen { transition-delay: calc(.25s + var(--i) * 12ms); } /* iPad on the Magic Keyboard: closed flat with the Pencil on top, lifts and floats open like the real one */ .mk-wrap { perspective: 1400px; padding: 10px 0 0; } .mk-stage { position: relative; width: min(560px, 100%); margin: 0 auto; transform-style: preserve-3d; } .mk-base { position: relative; z-index: 1; background: #1E1E21; border: 3px solid var(--ink); border-radius: 14px; padding: 16px 18px 14px; transform: rotateX(28deg); transform-origin: 50% 0; box-shadow: 0 18px 24px -14px rgba(0,0,0,.5); } .mk-keys { display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px; } .mk-keys i { height: 18px; border-radius: 4px; background: #2C2C30; box-shadow: inset 0 -2px 0 #141416; } .mk-pad { width: 44%; height: 70px; margin: 12px auto 0; border-radius: 8px; background: #26262A; border: 1px solid #111; } .mk-lid { position: relative; z-index: 2; transform-style: preserve-3d; transform-origin: 50% 100%; transform: translateY(100%) rotateX(-90deg) translateY(0); transition: transform 1.3s cubic-bezier(.4,0,.2,1); } .mk-wrap.open .mk-lid { transform: rotateX(12deg); } .mk-front, .mk-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .mk-back { position: absolute; inset: 0; transform: rotateY(180deg) rotateZ(180deg); background: #232326; border: 3px solid var(--ink); border-radius: 22px; } .mk-back::after { content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 2px; background: #333; } .mk-cam { position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; background: #2E2E32; border: 2px solid #444; } .mk-front { position: relative; } .mk-front .ipad-big { border-radius: 22px; background: #1B1B1E; } .mk-pencil { position: absolute; left: 22%; right: 26%; top: -11px; height: 11px; border-radius: 6px 3px 3px 6px; background: linear-gradient(#FFFFFF, #E9E9E6); border: 2px solid var(--ink); z-index: 3; } .mk-pencil::before { content: ""; position: absolute; left: -12px; top: 1px; border: 3.5px solid transparent; border-right: 10px solid #F2F2EF; } .mk-wrap:not(.open) .ipad-screen > * { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .mk-lid { transition: none; } } /* closed: the iPad folds forward and lies flat on the keyboard, back up, Pencil along the top edge */ .mk-lid { transform: rotateX(-150deg); } .mk-wrap.open .mk-lid { transform: rotateX(12deg); } .mk-back .mk-pencil-b { position: absolute; left: 24%; right: 22%; bottom: -12px; height: 11px; border-radius: 3px 6px 6px 3px; background: linear-gradient(#FFFFFF, #E9E9E6); border: 2px solid var(--ink); } .mk-wrap:not(.open) .mk-front .mk-pencil { visibility: hidden; } /* the lid is my real photo; stickers are tap targets on top of it */ .lid-big .stk .stk-in { transition: fill-opacity .2s, stroke-opacity .2s; stroke: var(--plum); stroke-width: 2; stroke-opacity: 0; stroke-dasharray: 4 3; } .lid-big .stk:hover .stk-in, .lid-big .stk:focus-visible .stk-in { fill-opacity: .12; stroke-opacity: .9; transform: none; filter: none; } /* the journal: spiral on top, the cover flips up and over the rings; the page has a date box, checkboxes and lines */ .jb { --jw: min(200px, 40vw); position: relative; width: var(--jw); aspect-ratio: 125 / 176; margin: 14px auto 0; perspective: 1600px; transition: transform .9s cubic-bezier(.45,.05,.25,1); } .jb.open { transform: translateX(50%); } .jb-page { position: absolute; inset: 0; background: #FFFBF6; border: 2px solid var(--ink); border-radius: 2px 8px 8px 2px; overflow: hidden; box-shadow: inset 10px 0 12px -10px rgba(58,38,38,.35); } .jb-date { position: absolute; right: 12px; top: 13px; padding: 1px 6px; border: 1px solid #C3CCDD; border-radius: 2px; font: 600 .58rem/1.3 "JetBrains Mono", monospace; letter-spacing: 1px; color: #8A93A8; pointer-events: none; } .jb-lines { position: absolute; inset: 0; padding: 34px 12px 8px 16px; outline: none; overflow: hidden; overflow-wrap: anywhere; font: 600 1.05rem/22px var(--hand); color: #1F2D5A; background-image: repeating-linear-gradient(transparent 0 21px, rgba(110,150,210,.35) 21px 22px); background-position: 0 12px; } .jb-lines:empty::before { content: "an idea…"; color: #B9B2C6; } .jb-cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.45,.05,.25,1); z-index: 3; } .jb.open .jb-cover { transform: rotateY(-180deg); } .jb-front, .jb-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; cursor: pointer; } .jb-front svg { width: 100%; height: 100%; display: block; } .jb-back { transform: rotateY(180deg); box-sizing: border-box; border: 2px solid var(--ink); border-radius: 8px 2px 2px 8px; background: repeating-linear-gradient(125deg, #F3D3DD 0 14px, #F8E3EA 14px 22px); box-shadow: inset -10px 0 12px -10px rgba(58,38,38,.35); } .jb-corner { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font: 600 .8rem var(--hand); color: #FFF6F2; background: rgba(0,0,0,.15); padding: 1px 8px; border-radius: 999px; white-space: nowrap; } @keyframes nudge { 50% { transform: translate(2px, 2px); } } /* sweater v2: one connected garment; fold = sleeves cross over the chest, then the bottom folds up */ .sw2 { display: block; width: min(360px, 100%); margin: 10px auto 6px; overflow: visible; } .sw2 .sl, .sw2 .bot { transform-box: view-box; transition: transform .7s cubic-bezier(.45,.05,.25,1); } .sw2 .sl-l { transform-origin: 100px 54px; } .sw2 .sl-r { transform-origin: 260px 54px; } .sw2 .bot { transform-origin: 180px 167px; } .sw2.folded .sl-l { transform: rotate(-68deg) scale(.66); } .sw2.folded .sl-r { transform: rotate(68deg) scale(.66); } .sw2.folded .bot { transform: scaleY(-1); transition-delay: .6s; } .sw2:not(.folded) .sl { transition-delay: .6s; } /* Mildliners: class names show on hover/tap, not on every pen */ .pens.many .pen .lbl { opacity: 0; transition: opacity .2s; } .pens.many .pen:hover .lbl, .pens.many .pen:focus-visible .lbl { opacity: 1; } .pens.many .pen { width: 20px; margin-left: -10px; } /* CICIMELON pouch: the pull runs along the top to unzip; the top opens back and pens fan out */ .cc-front svg { overflow: visible; } .cc-front .cc-pull { transition: transform .6s cubic-bezier(.4,0,.2,1); } .cc-front.unzipped .cc-pull { transform: translateX(-176px); } .cc-front path[stroke-dasharray="1.6 1.6"] { transition: stroke .3s .3s; } .cc-front.unzipped path[stroke-dasharray="1.6 1.6"] { stroke: #3A2626; } .pens:not(.many) .pen { transition-delay: calc(.35s + var(--i) * 20ms); } /* each Erin Condren opens on its own: the cover swings back over the spiral, the page shows */ .ecb-row { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; perspective: 1600px; margin: 10px 0; } .ecb { position: relative; width: 190px; aspect-ratio: 170 / 220; cursor: pointer; transition: margin-left .9s cubic-bezier(.45,.05,.25,1); } .ecb.open { margin-left: 190px; } .ecb-page { position: absolute; inset: 0; margin: 0; overflow: hidden; } .ecb-cover { position: absolute; inset: 0; transform-origin: 6% 50%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45,.05,.25,1); z-index: 2; } .ecb.open .ecb-cover { transform: rotateY(-178deg); } .ecb-front, .ecb-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .ecb-front svg { width: 100%; height: 100%; display: block; } .ecb-back { transform: rotateY(180deg); background: #FBF7F1 repeating-linear-gradient(transparent 0 21px, rgba(110,150,210,.25) 21px 22px); border: 2px solid var(--ink); border-radius: 8px 2px 2px 8px; } @media (max-width: 760px) { .ecb { width: 150px; } .ecb.open { margin-left: 150px; } } /* Stanley All Day Slim: ~27 cm tall next to the 32 cm backpack (a bit taller than the padfolio) */ .bottle { width: 22.5%; } /* the backpack stays big when it's open */ .stage .bag, .stage.idle .bag { width: 40%; } /* Stanley: a bit taller than the padfolio; its pocket is sewn onto the backpack's side seam */ .bottle { width: 22%; right: -5%; bottom: 5%; z-index: 1; } .bottle .holder { left: -34%; right: -14%; border-left: 2.5px solid #3A2626; border-radius: 4px 14px 20px 6px; } .bottle .holder::before { box-shadow: -6px 0 0 -2px #1A181C; } .bag-art { z-index: 2; } /* Chanel Miroir Double Facettes: glossy black cushion-square, CC medallion, regular mirror in the lid, magnifying below */ .cp-base, .cp-out, .cp-in { border-radius: 24% / 24%; } .cp-base { position: absolute; inset: 0; background: linear-gradient(135deg, #2F2D30, #0E0D0F 40%, #1A191C); border: 3px solid var(--ink); padding: 9px; box-shadow: 0 16px 24px -14px rgba(0,0,0,.6); } .cp-out { background: linear-gradient(140deg, #444246 0%, #121113 32%, #050506 70%, #1E1D20 100%); } .cp-out svg { width: 34%; } .cp-out::before { content: ""; position: absolute; left: 8%; top: 6%; width: 50%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.28), transparent 60%); } .cp-in { padding: 9px; background: #0E0D0F; } .cp-in span { display: none; } .cp-glass { position: relative; width: 100%; height: 100%; border-radius: 20% / 20%; overflow: hidden; background: #E9ECEF; box-shadow: inset 0 0 0 1.5px #6E7378; } .cp-glass img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.85) brightness(1.05); opacity: .9; } .cp-glass.mag img { transform: scale(1.9); transform-origin: 50% 35%; } .cp-shine { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 70%, rgba(255,255,255,.25)); } .cp-tag { position: absolute; right: 16px; bottom: 14px; font: 600 .7rem var(--mono); color: #fff; background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 999px; } .sg-big { width: min(420px, 90%); margin: 6px auto 12px; } #after { display: none !important; } /* Morphe brushes: white handles, taupe bristles; tap one and it lifts */ .mbrs { display: flex; justify-content: center; align-items: flex-end; gap: 6px; padding: 30px 6px 6px; flex-wrap: wrap; } .mbr { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 54px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .35s cubic-bezier(.3,1.4,.5,1); } .mbr svg { width: 46px; height: auto; max-width: none; } .mbr span { font: 500 .58rem/1.15 var(--sans); color: var(--muted); text-align: center; min-height: 2.3em; } .mbr:hover, .mbr.up { transform: translateY(-22px) rotate(-4deg); } .mbr.up span { color: var(--plum); font-weight: 700; } .mbr-note { text-align: center; color: var(--plum); font-size: 1.15rem; min-height: 2.6em; } .mbr-note small { font-size: .9rem; color: var(--muted); } /* the dump: the backpack tips over before everything spills */ @keyframes tip { 0% { transform: translate(-50%, -50%) rotate(0); } 35% { transform: translate(-50%, -50%) rotate(-16deg); } 60% { transform: translate(-50%, -50%) rotate(8deg); } 80% { transform: translate(-50%, -50%) rotate(-3deg); } 100% { transform: translate(-50%, -50%) rotate(0); } } .bag.tip { animation: tip .9s cubic-bezier(.3,1.3,.5,1); } /* snoop progress + the ending */ .snoop { text-align: center; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; } .ending { text-align: center; padding: 24px 16px 10px; } .end-big { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 4px; } .end-line { font-size: 1.35rem; color: var(--plum); margin: 0 0 14px; } .big-obj { width: min(300px, 80%); margin: 6px auto 10px; } .big-obj svg { width: 100%; height: auto; display: block; } .big-obj.hugged { animation: hug .6s cubic-bezier(.3,1.6,.5,1); } @keyframes hug { 40% { transform: scale(.88, 1.06); } 70% { transform: scale(1.04, .97); } } /* amaira's cards: crayon-y, one at a time */ .kc { display: grid; place-items: center; margin: 8px 0; perspective: 900px; } .kc-card { width: min(320px, 90%); aspect-ratio: 1.3; border: 2px solid var(--ink); border-radius: 4px; padding: 16px 18px 10px; box-shadow: 0 14px 22px -14px rgba(0,0,0,.4); transform: rotate(-2deg); display: flex; flex-direction: column; } .kc-card.in { animation: kcin .5s cubic-bezier(.3,1.3,.5,1); } @keyframes kcin { from { transform: rotateY(-70deg) rotate(-2deg); opacity: 0; } } .kc-t { font: 700 1.5rem/1.15 "Caveat", cursive; color: #B13A6A; margin: 0; } .kc-card svg { width: 100%; margin-top: auto; } .kc-from { font: 600 1.1rem "Caveat", cursive; color: #6A4FB0; text-align: right; margin: 0; } /* phone: Notes */ .ic-notes { background: #fff; } .nt { font-family: var(--sans); padding: 2px; } .nt-h { font-weight: 700; font-size: 1.3rem; margin: 2px 0 8px; } .nt-row { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #ECECEF; padding: 8px 10px; cursor: pointer; font-family: var(--sans); } .nt-row:first-of-type { border-radius: 10px 10px 0 0; } .nt-row:last-of-type { border-radius: 0 0 10px 10px; } .nt-row b { font-size: .82rem; color: #1C1C1E; } .nt-row span { font-size: .7rem; color: #8A8A8E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-new { margin-top: 10px; border: 0; background: none; color: #D9A200; font: 600 .82rem var(--sans); cursor: pointer; } .nt-page { background: #FFFDF6; border-radius: 10px; padding: 12px; min-height: 260px; font-family: var(--sans); } .nt-title { font-weight: 700; font-size: 1.05rem; margin: 0 0 8px; outline: none; } .nt-body { font-size: .85rem; line-height: 1.5; color: #2A2A2E; outline: none; min-height: 180px; } .nt-page [contenteditable]:empty::before { content: attr(data-ph); color: #B5B5BA; } /* the to-do list: a crumpled ball that you smooth out (and crumple back) */ .crumple { position: relative; width: min(300px, 80%); aspect-ratio: 110 / 120; margin: 6px auto 10px; cursor: pointer; } .crumple > div { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .6s cubic-bezier(.3,1.3,.5,1), opacity .35s; } .crumple svg { width: 100%; height: auto; } .cr-ball svg { width: 46%; } .cr-flat { opacity: 0; transform: scale(.35) rotate(-30deg); } .crumple.open .cr-flat { opacity: 1; transform: none; transition-delay: .1s; } .crumple.open .cr-ball { opacity: 0; transform: scale(1.6) rotate(40deg); } .crumple:not(.open):hover .cr-ball { transform: rotate(-8deg) scale(1.04); } /* a picked card comes all the way out of its slot */ .vslot .card.picked { transform: translateY(-128%); } .vw.has-pick { transition: margin-top .55s cubic-bezier(.2,.8,.2,1); } .vslot .card { cursor: grab; } /* the perfume cap comes off and lies on its side next to the bottle (no clipping) */ .pf-bottle svg { overflow: visible; } .pf-bottle .pcap { transform-box: fill-box; transform-origin: 50% 50%; } .pf-bottle.capoff .pcap { transform: translate(92px, 116px) rotate(90deg); } #unzip-all[hidden] { display: none !important; } /* "pull me" points at the first zipper pull and works as a button */ .bag .bag-hint { left: auto; right: 104%; top: 21%; transform: none; margin: 0; background: none; border: 0; padding: 0; cursor: pointer; color: var(--plum); font-size: 1.5rem; white-space: nowrap; animation: nudge2 1.6s ease-in-out infinite; z-index: 6; } .bag .bag-hint:empty { display: none; } @keyframes nudge2 { 50% { transform: translateX(6px); } } @media (max-width: 760px) { .bag .bag-hint { right: auto; left: 50%; top: 102%; transform: translateX(-50%); animation: none; } } .kc-card.kc-real { padding: 8px; background: #fff; aspect-ratio: auto; width: min(340px, 90%); } .kc-real img { width: 100%; max-height: 420px; object-fit: contain; display: block; border-radius: 2px; } /* hair: real-looking illustrations of my hair, one per style; drag the comb through */ .hair-pic { position: relative; width: min(300px, 80%); aspect-ratio: 388 / 984; max-height: 520px; margin: 4px auto 10px; overflow: hidden; border-radius: 14px; cursor: grab; background: #fff; } .hair-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s; } .hair-pic[data-state="pink"] img[data-k="pink"], .hair-pic[data-state="brown"] img[data-k="brown"], .hair-pic[data-state="pony"] img[data-k="pony"], .hair-pic[data-state="braid"] img[data-k="braid"] { opacity: 1; } .hp-comb { position: absolute; left: 50%; top: 4%; width: 34%; margin-left: -17%; transform: rotate(-45deg); transition: transform .4s; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); } .hp-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(170deg, transparent 30%, rgba(255,240,220,.45) 45%, transparent 60%); opacity: 0; } .hair-pic.shiny .hp-shine { animation: shine 1s ease-out; } @keyframes shine { 0% { opacity: 1; transform: translateY(-60%); } 100% { opacity: 0; transform: translateY(60%); } } /* braiding in progress: the loose ponytail underneath, the braid revealed from the top down */ @property --p { syntax: ''; inherits: false; initial-value: 0%; } .hair-pic[data-state="braiding"] img[data-k="brown"], .hair-pic[data-state="braiding"] img[data-k="braid"] { opacity: 1; } .hair-pic[data-state="braiding"] img[data-k="braid"] { z-index: 1; transition: --p .7s ease, opacity .3s; -webkit-mask-image: linear-gradient(#000 calc(var(--p) - 8%), transparent var(--p)); mask-image: linear-gradient(#000 calc(var(--p) - 8%), transparent var(--p)); } /* center the backpack + its side bottle sleeve as one shape */ @media (min-width: 761px) { .stage .bag { margin-left: -1.2%; } } /* laptop dock + a way back from a folder */ .dock { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 16px auto 0; padding: 7px 10px; width: fit-content; max-width: 100%; border-radius: 16px; background: rgba(255,255,255,.55); border: 1px solid rgba(58,38,38,.15); backdrop-filter: blur(6px); } .dock-app { position: relative; border: 0; background: none; padding: 0; cursor: pointer; transition: transform .2s; } .dock-app span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.18); overflow: hidden; } .dock-app svg { width: 100%; height: 100%; } .dock-app i { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); font: 500 .62rem var(--sans); font-style: normal; white-space: nowrap; background: #2A2224; color: #fff; padding: 2px 6px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; } .dock-app:hover { transform: translateY(-6px) scale(1.12); } .dock-app:hover i { opacity: 1; } .dock-app.bounce { animation: dockb .6s ease; } @keyframes dockb { 30% { transform: translateY(-14px); } 60% { transform: translateY(0); } 80% { transform: translateY(-5px); } } .back-desk { display: inline-block; margin: 0 0 10px; border: 1.5px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: .78rem; } /* MacBook opening: the screen swings up from the hinge over the keyboard deck */ .mbp { perspective: 1600px; margin: 6px auto 0; width: 100%; } .mbp-screen { transform-origin: 50% 100%; transform: rotateX(-92deg); transition: transform 1.1s cubic-bezier(.3,1.05,.4,1); border: 10px solid #1B1B1E; border-radius: 14px 14px 0 0; background: #1B1B1E; box-shadow: 0 -2px 0 #C9CDD2 inset; } .mbp.open .mbp-screen { transform: rotateX(0); } .mbp-screen .desktop { border-radius: 4px; opacity: 0; transition: opacity .5s .55s; } .mbp.open .mbp-screen .desktop { opacity: 1; } .mbp-base { position: relative; height: 16px; margin: 0 -4%; background: linear-gradient(#E3E6EA, #B9BEC4); border: 2px solid var(--ink); border-radius: 0 0 16px 16px; box-shadow: 0 12px 20px -12px rgba(0,0,0,.45); } .mbp-notch { position: absolute; left: 50%; top: -2px; width: 16%; height: 6px; transform: translateX(-50%); background: #A9AEB5; border-radius: 0 0 8px 8px; } @media (prefers-reduced-motion: reduce) { .mbp-screen { transition: none; } } /* while folding, nothing shows through: cash and the medici card stay tucked, panels are solid */ .vw.fold-left .vbills, .vw.fold-right .vbills, .vw.fold-left .medici-peek, .vw.fold-right .medici-peek, .vw.p1-back .vbills, .vw.flap-back .vbills { visibility: hidden; } .vw .vw-open > .p1, .vw .vw-open > .vflap { background-color: #8E1B45; } .vw.p1-back .p1, .vw.flap-back .vflap { opacity: 1 !important; } /* the cash slot behind the flap: notes always peek out of the top; tap to fan them out */ .vw-open > .vbills { left: 72%; width: 19%; top: -12%; height: 36%; z-index: 0; } .bill { transform: rotate(calc(-5deg + var(--k) * 2.5deg)) translateY(34%); } .vbills:hover .bill { transform: rotate(calc(-5deg + var(--k) * 2.5deg)) translateY(24%); } .vw.bills-out .bill { transform: rotate(calc(-16deg + var(--k) * 8deg)) translateY(-28%); } .vw:not(.open) .vbills { visibility: hidden; } .vw-open > .vbills { top: -24%; } .vw:not(.settled) .vbills { visibility: hidden !important; } /* iPad: the back panel must not swallow taps on the screen */ .mk-back, .mk-base { pointer-events: none; } .mk-wrap.open .mk-front { pointer-events: auto; } .mk-wrap:not(.open) .mk-front { pointer-events: none; } /* ---------- sunglasses: the same moment, romanticized through the lenses ---------- */ .rz { position: relative; aspect-ratio: 5 / 3; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; cursor: grab; touch-action: none; user-select: none; margin: 4px 0 10px; } .rz:active { cursor: grabbing; } .rz-scene { position: absolute; inset: 0; } .rz-scene svg { display: block; width: 100%; height: 100%; } .rz .rom { opacity: 0; transition: opacity 1.1s ease; } .rz .meh { transition: opacity .8s ease; } .rz-base { filter: saturate(.35) contrast(.92) brightness(1.02); transition: filter 1.2s ease; } .rz-lens .rom, .rz.on .rom { opacity: 1; } .rz-lens .meh, .rz.on .meh { opacity: 0; } .rz.on .rz-base { filter: saturate(1.15) brightness(1.04); } .rz.on .rz-base::after, .rz-lens::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(255, 214, 170, .18), rgba(120, 50, 70, .22)); } .rz-rig { position: absolute; left: 0; top: 0; width: 46%; display: flex; align-items: center; pointer-events: none; transition: opacity .5s ease; filter: drop-shadow(0 6px 10px rgba(40, 20, 20, .35)); } .rz-lens { position: relative; flex: 1; aspect-ratio: 1.35; overflow: hidden; border: 7px solid #141010; outline: 3px solid #D9B48F; outline-offset: -10px; border-radius: 18px; } .rz-lens .rz-scene { right: auto; bottom: auto; filter: saturate(1.15); } .rz-bridge { width: 9%; height: 9px; margin-top: -30%; background: #141010; border-radius: 6px; } .rz.on .rz-rig { opacity: 0; } .rz-hint { position: absolute; right: 12px; bottom: 8px; font-size: 1.3rem; color: #fff; background: rgba(58, 38, 38, .55); padding: 0 10px; border-radius: 99px; pointer-events: none; } .rz.swap .rz-scene { opacity: 0; transition: opacity .2s; } .rz .tw { animation: rz-tw 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .rz .fl { animation: rz-fl 3s ease-in-out infinite; } @keyframes rz-tw { 50% { opacity: .25; transform: scale(.6); } } @keyframes rz-fl { 50% { transform: translateY(-5px); } } .rz-caps { display: grid; gap: 2px; margin-bottom: 12px; } .rz-cap { margin: 0; transition: all .8s ease; } .rz-cap.plain { font-family: var(--mono); font-size: .85rem; color: var(--ink-2); } .rz-cap.rom { font-size: 1.6rem; color: var(--plum); line-height: 1.15; opacity: .35; } .rz.on + .rz-caps .plain { text-decoration: line-through; opacity: .45; } .rz.on + .rz-caps .rom, .rz.peek + .rz-caps .rom { opacity: 1; } body.shades .tint { background: linear-gradient(180deg, rgba(244, 166, 190, .22), rgba(255, 200, 150, .14)); } @media (prefers-reduced-motion: reduce) { .rz .tw, .rz .fl { animation: none; } } /* iPad, flat and to scale: landscape ~1.43:1 screen, pencil docked on top, no 3D tilt to eat taps */ .ipad-flat { position: relative; width: min(600px, 100%); margin: 26px auto 6px; } .ipad-flat .ipad-big { padding: 12px; border-radius: 22px; background: #1B1B1E; } .ipad-flat .ipad-screen { height: auto; aspect-ratio: 1.43; } .ipad-pencil { position: absolute; left: 24%; right: 28%; top: -11px; height: 11px; border-radius: 6px 3px 3px 6px; background: linear-gradient(#FFFFFF, #E9E9E6); border: 2px solid var(--ink); z-index: 1; } .ipad-pencil::before { content: ""; position: absolute; left: -12px; top: 1px; border: 3.5px solid transparent; border-right: 10px solid #F2F2EF; } .ipad-flat .ipad-view { padding-top: 0; } .ipad-flat .ipad-view .back { position: sticky; top: 0; z-index: 2; display: block; width: calc(100% + 28px); margin: 0 -14px 8px; padding: 10px 14px; text-align: left; font-size: .9rem; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(0,0,0,.08); } .ipad-flat .ipad-view.procreate .back { background: rgba(27,27,31,.92); color: #8FB8F0; border-bottom-color: rgba(255,255,255,.1); } @media (max-width: 760px) { .ipad-home { gap: 20px; padding: 24px 20px; } .ipad-home .papp .ic { width: 54px; height: 54px; } } /* the Stanley has to sit above the bag artwork, or the bag swallows every tap and drag */ .bottle { z-index: 3; } .bottle.free { z-index: 7; } /* MacBook Pro 14", to scale: 1.55:1 screen, thin black bezel with a notch, a wider silver deck under it */ .mbp { width: min(640px, 100%); margin: 8px auto 0; } .mbp-screen { position: relative; border-width: 8px 8px 10px; border-radius: 16px 16px 4px 4px; } .mbp-screen::before { content: ""; position: absolute; left: 50%; top: -8px; width: 13%; height: 12px; transform: translateX(-50%); background: #1B1B1E; border-radius: 0 0 6px 6px; z-index: 2; } .mbp-screen .desktop { position: relative; display: flex; flex-direction: column; aspect-ratio: 1.55; padding-bottom: 0; border: 0; border-radius: 8px 8px 2px 2px; } .mbp-screen .menubar { padding: 4px 12px; font-size: .62rem; } .mbp-screen .dfolders { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 10px 6px; padding: 14px 12px 4px; } .mbp-screen .dfolder { padding: 4px; gap: 4px; } .mbp-screen .dfolder svg { width: 52px; } .mbp-screen .dfolder span { font-size: .66rem; } .mbp-screen .dock { margin: 0 auto 8px; padding: 4px 6px; gap: 4px; border-radius: 12px; } .mbp-screen .dock-app span { width: 26px; height: 26px; border-radius: 7px; } .mbp-base { height: 14px; margin: 0 -7%; border-radius: 2px 2px 18px 18px / 2px 2px 12px 12px; } .mbp-notch { top: 0; width: 18%; height: 5px; } @media (max-width: 760px) { .mbp-screen .dfolders { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px 6px 2px; } .mbp-screen .dfolder svg { width: 34px; } .mbp-screen .dfolder span { font-size: .5rem; } .mbp-screen .dock-app span { width: 18px; height: 18px; border-radius: 5px; } .mbp-base { margin: 0 -4%; } } .mbp-screen .dfolder svg { width: 60px; } .mbp-screen .dfolder span { font-size: .72rem; } @media (max-width: 760px) { .mbp-screen .dfolder svg { width: 34px; } .mbp-screen .dfolder span { font-size: .5rem; } } /* the real state of my desktop: icons everywhere, overlapping, popping in when the lid opens */ .mbp-screen .dmess { position: relative; display: block; flex: 1; padding: 0; margin: 4px 6px 0; } .mbp-screen .dmess .dfolder { position: absolute; width: 11.5%; padding: 2px; gap: 1px; transform: scale(0); opacity: 0; } .mbp-screen .dmess .dfolder.popped { animation: dpop .32s cubic-bezier(.3,1.7,.5,1) forwards; } @keyframes dpop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .mbp-screen .dmess .dclut { z-index: 1; } .mbp-screen .dmess .dreal { z-index: 2; } .mbp-screen .dmess .dfolder.dragging { z-index: 6; } .mbp-screen .dmess .dfolder { transition: left .55s cubic-bezier(.3,1.2,.5,1), top .55s cubic-bezier(.3,1.2,.5,1), background .15s; } .mbp-screen .dmess .dfolder.gone { display: none; } #lap-clean { margin-right: 8px; } .mbp-screen .dmess .dfolder svg { width: 70%; height: auto; } .mbp-screen .dmess .dfolder img { width: 52%; aspect-ratio: 1; object-fit: cover; border: 2px solid #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .mbp-screen .dmess .dclut svg[viewBox="0 0 40 48"] { width: 40%; } .mbp-screen .dmess .dfolder span { font-size: .56rem; font-weight: 600; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 760px) { .mbp-screen .dmess .dmore { display: none; } .mbp-screen .dmess .dfolder { width: 13%; } .mbp-screen .dmess .dfolder span { font-size: .38rem; } } @media (prefers-reduced-motion: reduce) { .mbp-screen .dmess .dfolder { transform: none; opacity: 1; } .mbp-screen .dmess .dfolder.popped { animation: none; } } /* inside a laptop folder: a sticky Finder title bar, so the way back is always right there */ .finder-bar { position: sticky; top: -1px; z-index: 5; display: flex; align-items: center; gap: 12px; margin: -6px 0 16px; padding: 9px 12px; background: #ECE7E8; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 6px 14px -10px rgba(0,0,0,.4); font: 600 .82rem -apple-system, system-ui, sans-serif; } .finder-bar .tl { display: flex; gap: 6px; padding: 2px; border: 0; background: none; cursor: pointer; } .finder-bar .tl i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; border: 1px solid rgba(0,0,0,.18); } .finder-bar .tl i:nth-child(2) { background: #FEBC2E; } .finder-bar .tl i:nth-child(3) { background: #28C840; } .finder-bar .finder-back { border: 1.5px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; } .finder-bar .finder-back:hover { background: var(--rose, #F4C6D2); } .finder-bar span { color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Victorine: the cash lives in the bill compartment behind the right-hand card slots, peeking over the top of them */ .vw-open > .vbills { left: 43%; width: 24%; top: -30%; height: 44%; z-index: 0; } .vw-open > .p2 { z-index: 1; } .vw.has-pick .vbills { visibility: hidden; } .vw { margin-top: 56px; } /* perfume: each spritz reveals a layer of me */ .pf-me > div { transition: opacity .5s, transform .5s var(--ease), background .5s; opacity: .45; } .pf-me > div em { display: block; margin-top: 6px; font-style: normal; font-size: 1.2rem; line-height: 1.2; color: var(--plum); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s, opacity .6s; } .pf-me > div.on { opacity: 1; transform: translateY(-4px); } .pf-me > div.on em { max-height: 8em; opacity: 1; } /* hair salon: illustrated back-of-head, styles cross-fade, the scrunchie takes whatever color you pick */ .salon { position: relative; width: min(320px, 86%); aspect-ratio: 300 / 380; margin: 4px auto 10px; overflow: hidden; border-radius: 18px; border: 2px solid var(--ink); background: linear-gradient(#FBEFF2, #F6E1E7); cursor: grab; } .salon-svg { display: block; width: 100%; height: 100%; } .salon .hs { opacity: 0; transition: opacity .45s; } .salon[data-style="down"] .hs[data-s="down"], .salon[data-style="pony"] .hs[data-s="pony"], .salon[data-style="braid"] .hs[data-s="braid"], .salon[data-style="half"] .hs[data-s="half"] { opacity: 1; } .salon .scr circle { fill: var(--scr); stroke: var(--scr-d); stroke-width: 1.2; transition: fill .3s, stroke .3s; } .salon.weave .bl { animation: weave .35s calc(var(--k) * .12s) both cubic-bezier(.3,1.4,.5,1); transform-box: fill-box; transform-origin: center; } @keyframes weave { from { opacity: 0; transform: scale(.4); } } .salon.shiny .hp-shine { animation: shine 1s ease-out; } .salon-ctrl { text-align: center; } .salon-ctrl .mono { margin: 10px 0 6px; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; } .scr-pick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); cursor: pointer; font: inherit; } .scr-pick span { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid rgba(0,0,0,.25); box-shadow: inset 0 0 0 4px rgba(255,255,255,.25); } .scr-pick[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--gold, #D9B45A); } .salon .hp-comb { left: auto; right: 4%; margin-left: 0; width: 30%; top: 3%; } /* sweater: one fold per tap. 1 = left sleeve in, 2 = right sleeve in, 3 = bottom folded up */ .sw2 { cursor: pointer; outline: none; } .sw2 .sl, .sw2 .bot { transition-delay: 0s !important; } .sw2[data-f="1"] .sl-l, .sw2[data-f="2"] .sl-l, .sw2[data-f="3"] .sl-l { transform: rotate(-68deg) scale(.66); } .sw2[data-f="2"] .sl-r, .sw2[data-f="3"] .sl-r { transform: rotate(68deg) scale(.66); } .sw2[data-f="3"] .bot { transform: scaleY(-1); } .sw-hint { text-align: center; color: var(--plum); font-size: 1.2rem; margin: 0 0 8px; } /* gift cards: real card proportions (85.6 × 54 mm), fanned; tap to flip, scratch the back for the balance */ .gcs { position: relative; display: flex; justify-content: center; gap: 0; padding: 26px 0 18px; perspective: 1200px; flex-wrap: wrap; } .gc { position: relative; width: min(240px, 72vw); aspect-ratio: 85.6 / 54; margin: 0 -40px; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transform: rotate(calc((var(--k) - 1) * 9deg)) translateY(calc(var(--k) * 10px - 10px)); transition: transform .6s cubic-bezier(.3,1.2,.4,1), z-index 0s .3s; z-index: calc(var(--k) + 1); } .gc:hover { transform: rotate(calc((var(--k) - 1) * 9deg)) translateY(-10px); } .gc.up { z-index: 10; transition: transform .6s cubic-bezier(.3,1.2,.4,1); } .gc.flip { transform: translateY(-18px) rotateY(180deg) scale(1.12); } .gc-face { position: absolute; inset: 0; border-radius: 11px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 10px 22px -10px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.18); display: grid; place-items: center; } .gc-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 46%, transparent 60%); pointer-events: none; } .gc-chip-txt { position: absolute; left: 7%; bottom: 8%; font: 600 .5rem var(--sans, system-ui); letter-spacing: .18em; opacity: .7; } .gc-word { position: relative; z-index: 1; } .gc-aritzia .gc-front { background: radial-gradient(120% 90% at 30% 20%, #F1EBE1, #DED4C5); color: #2A2426; } .gc-aritzia .gc-word { font: 400 1.35rem/1 Georgia, 'Times New Roman', serif; letter-spacing: .32em; margin-left: .32em; } .gc-chanel .gc-front { background: linear-gradient(160deg, #1A1A1D, #050506 70%); color: #F5F3EF; } .gc-chanel .gc-word { font: 700 1.45rem/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .34em; margin-left: .34em; } .gc-sub { position: absolute; top: 64%; font: 500 .52rem 'Helvetica Neue', Arial, sans-serif; letter-spacing: .5em; color: #CFCBC4; } .gc-sephora .gc-front { background: #0B0B0C; color: #0B0B0C; } .gc-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #0B0B0C 0 9px, #FAFAFA 9px 18px); } .gc-sephora .gc-word { background: #FAFAFA; padding: 7px 14px 7px 18px; font: 700 1.05rem/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .4em; box-shadow: 0 0 0 2px #0B0B0C; } .gc-sephora .gc-chip-txt { color: #0B0B0C; background: #FAFAFA; padding: 2px 5px; opacity: 1; } .gc-back { transform: rotateY(180deg); background: #F7F5F1; color: #2A2426; align-items: start; justify-items: stretch; grid-template-rows: auto 1fr; } .gc-chanel .gc-back { background: #121214; color: #EEE; } .gc-stripe { display: block; height: 18%; margin-top: 7%; background: linear-gradient(#1B1B1B, #2E2E2E); } .gc-bk { display: flex; flex-direction: column; gap: 3px; padding: 6px 9px 8px; text-align: left; font: 500 .55rem var(--sans, system-ui); } .gc-bk b { font-size: .55rem; letter-spacing: .12em; } .gc-bk small { font-size: .55rem; opacity: .85; } .gc-scratch { position: relative; display: block; height: 28px; border-radius: 4px; overflow: hidden; background: #fff; color: #2A2426; border: 1px dashed rgba(0,0,0,.25); } .gc-bal { position: absolute; inset: 0; display: grid; place-items: center; font: 600 .62rem var(--sans, system-ui); } .gc-foil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; transition: opacity .5s; } .gc-scratch.done .gc-foil { opacity: 0; pointer-events: none; } .gc-bar { display: block; height: 14px; width: 70%; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 6px, currentColor 6px 7px, transparent 7px 10px); opacity: .85; } .gc-tally { text-align: center; color: var(--plum); font-size: 1.25rem; margin: 6px 0 0; } @media (max-width: 760px) { .gcs { flex-direction: column; align-items: center; } .gc { margin: -42px 0 0; } .gc:first-child { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .gc { transition: none; } } /* pen pouch: the zipper drives the fan, one pen at a time */ .pens.zipdrive .pen { transition: transform .45s cubic-bezier(.3,1.3,.5,1), opacity .25s; transition-delay: 0s !important; } .pens.zipdrive .pen.out { opacity: 1; transform: rotate(calc((var(--i) - var(--mid)) * var(--step, 11deg))); } .pens.zipdrive .pen.out:hover, .pens.zipdrive .pen.out:focus-visible, .pens.zipdrive .pen.held { transform: rotate(calc((var(--i) - var(--mid)) * var(--step, 11deg))) translateY(-18px); z-index: 2; } .pens.zipdrive .pen.held svg { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 4px var(--gold, #D9B45A)); } .cc-front .cc-pull { transition: none; } .cc-front.unzipped .cc-pull { transform: none; } /* the notebook page + my tools */ .desk { margin-top: 16px; } .desk-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; } .dtool { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; font: 500 .7rem var(--mono); color: var(--muted); transition: transform .2s; } .dtool svg { width: 92px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.15)); } .dtool:hover { transform: translateY(-3px) rotate(-3deg); } .dtool.on { border-color: var(--ink); background: var(--paper); color: var(--ink); } .desk-clear { border: 0; background: none; text-decoration: underline; cursor: pointer; font: 500 .78rem var(--sans); color: var(--muted); } .desk-pad { position: relative; max-width: 600px; } .desk-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .desk-pad { height: 220px; } #graphite-canvas { touch-action: none; } .desk-now { text-align: center; font-size: .72rem; color: var(--muted); margin: 8px 0 0; } .desk-erase[hidden] { display: none; } /* backup lipstick: my dry natural lips, and you put it on me */ .lipwrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px auto 4px; max-width: 520px; } .lip-stick { width: 54px; flex: none; transform: rotate(-18deg); } .lipface { width: min(380px, 78%); border-radius: 18px; border: 2px solid var(--ink); cursor: crosshair; box-shadow: 4px 4px 0 var(--ink); } .lipface .lp-happy { opacity: 0; transition: opacity .6s; } .lipface.happy .lp-happy { opacity: 1; } .lipface.happy .lp-color, .lipface.happy .lp-natural { opacity: 0; transition: opacity .6s; } .lip-say { text-align: center; color: var(--plum); font-size: 1.35rem; margin: 10px 0 4px; } /* ---------- boarding pass: a real scan ---------- */ .bp-gate { position: relative; overflow: hidden; border-radius: 10px; } .bp-laser { position: absolute; top: 4%; bottom: 4%; left: 0; width: 3px; background: #FF3B4E; box-shadow: 0 0 12px 4px rgba(255, 59, 78, .55); opacity: 0; pointer-events: none; } .bp-gate.scanning .bp-laser { opacity: 1; animation: bp-sweep .65s ease-in-out 2 alternate; } @keyframes bp-sweep { from { left: 2%; } to { left: 97%; } } .bp-stamp { position: absolute; right: 26%; top: 34%; padding: 4px 14px; border: 3px solid #1E8E3E; border-radius: 8px; color: #1E8E3E; font: 700 1.5rem var(--mono, monospace); letter-spacing: .08em; transform: rotate(-12deg) scale(2.2); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; mix-blend-mode: multiply; } .bp-gate.scanned .bp-stamp { opacity: .9; transform: rotate(-12deg) scale(1); } .bp-light { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: #D93025; vertical-align: middle; margin-left: 10px; box-shadow: 0 0 8px rgba(217, 48, 37, .5); } .bp-light.ok { background: #34C759; box-shadow: 0 0 10px rgba(52, 199, 89, .7); } /* Stanley: the lid unscrews, lifts all the way off and lands on the table next to the bottle. tap it to screw it back on */ @keyframes unscrew-off { 0% { transform: none; } 12% { transform: rotate(-8deg); } 24% { transform: rotate(6deg); } 36% { transform: translateY(-4px) rotate(-8deg); } 55% { transform: translateY(-30px); } 75% { transform: translate(34px, -20px) rotate(18deg); } 100% { transform: translate(52px, 209px); } } @keyframes rescrew-on { 0% { transform: translate(52px, 209px); } 30% { transform: translate(34px, -20px) rotate(18deg); } 55% { transform: translateY(-30px); } 75% { transform: translateY(-4px) rotate(-8deg); } 88% { transform: rotate(6deg); } 100% { transform: none; } } .bottle.lid-open .lid { animation: unscrew-off .9s cubic-bezier(.45,.05,.4,1) forwards; } .bottle .lid.closing { animation: rescrew-on .8s cubic-bezier(.45,.05,.4,1) forwards; } .bottle svg { overflow: visible; } /* wallet: the cash lies flat across the whole wallet, behind every card slot, and slides straight up */ .vw-open > .vbills { left: 3%; width: 72%; top: -12%; height: 58%; z-index: 0; } .bill { left: 0; width: 100%; height: 100%; bottom: 0; border-radius: 4px; transform: translateY(calc(var(--k) * 5%)); transform-origin: 50% 50%; padding: 6px 10px; } .bill b { font-size: 1.1rem; } .bill i { font-size: .55rem; } .vbills:hover .bill { transform: translateY(calc(-4% + var(--k) * 5%)); } .vw.bills-out .bill, .vw.bills-out .vbills:hover .bill { transform: translateY(calc(-34% + var(--k) * 9%)); } /* a picked card just comes straight up. no flip, no tilt, no zoom */ .vslot .card.picked, .wallet.open .card.picked, .wallet.open .card.picked:hover { rotate: none !important; scale: none !important; } /* cap: tap it and it lands on my head. tap again, it's too hot */ .capfit { position: relative; width: min(340px, 78%); margin: 30px auto 18px; } .capfit img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 2.5px solid var(--ink); border-radius: 18px; } .capfit-cap { position: absolute; left: 74%; top: 70%; width: 42%; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(10deg); transition: left .7s cubic-bezier(.3,1.25,.5,1), top .7s cubic-bezier(.3,1.25,.5,1), width .7s, transform .7s cubic-bezier(.3,1.25,.5,1); filter: drop-shadow(0 8px 10px rgba(40,20,20,.3)); } .capfit-cap svg { display: block; width: 100%; height: auto; } .capfit-cap:hover { transform: rotate(6deg) translateY(-4px); } .capfit.on .capfit-cap { left: 27%; top: -6%; width: 52%; transform: rotate(-6deg); filter: drop-shadow(0 4px 4px rgba(40,20,20,.25)); } .capfit.on .capfit-cap:hover { transform: rotate(-6deg) translateY(-3px); } /* ---------- going from one thing to another: a stacked page with a way back ---------- */ .nav-back { position: sticky; top: -1px; z-index: 20; display: block; width: calc(100% + 2 * clamp(18px, 3vw, 30px)); margin: calc(-1 * clamp(18px, 3vw, 30px)) calc(-1 * clamp(18px, 3vw, 30px)) 16px; padding: 12px clamp(18px, 3vw, 30px); text-align: left; border: 0; border-bottom: 2px solid var(--ink); background: #F8E3EA; color: var(--plum); cursor: pointer; font-size: .85rem; letter-spacing: .04em; } .nav-back:hover { background: #F4D2DE; } #sheet-body.nav-in { animation: nav-in .38s cubic-bezier(.2,.8,.2,1); } #sheet-body.nav-out { animation: nav-out .38s cubic-bezier(.2,.8,.2,1); } @keyframes nav-in { from { opacity: 0; transform: translateX(40px); } } @keyframes nav-out { from { opacity: 0; transform: translateX(-40px); } } @media (prefers-reduced-motion: reduce) { #sheet-body.nav-in, #sheet-body.nav-out { animation: none; } } /* my own sites, opened right inside the bag */ .web { border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: #fff; } .web-bar { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; background: #F2EEEC; border-bottom: 1.5px solid var(--ink); font-size: .72rem; text-transform: none; } .web-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .web-bar a { color: var(--plum); white-space: nowrap; } .web iframe { display: block; width: 100%; height: min(70vh, 640px); border: 0; } /* ---------- every app answers a question ---------- */ .appq { margin: 4px 0 8px; font-size: 1.15rem; line-height: 1.1; color: var(--plum); } .ipad-view .appq { font-size: 1.35rem; } .phone-big .home { grid-template-columns: repeat(4, 1fr); gap: 10px 2px; max-height: 330px; overflow-y: auto; scrollbar-width: none; } .phone-big .home::-webkit-scrollbar { display: none; } .phone-big .papp .ic { width: 40px; height: 40px; border-radius: 11px; } .phone-big .papp { font-size: .56rem; } .phone-big .papp .plabel { max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ipad-home { flex-wrap: wrap; gap: 22px 28px; align-content: flex-start; } .app-view, .ipad-view { font-size: .8rem; color: #1C1C1E; } .app-view button, .ipad-view button { font: inherit; } /* maps */ .mp-search, .gm-search { padding: 7px 10px; border-radius: 10px; background: #EFEFF2; color: #8A8A8E; margin-bottom: 8px; } .mp-map { position: relative; height: 210px; border-radius: 12px; overflow: hidden; border: 1px solid #ddd; } .mp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .mp-pin { position: absolute; transform: translate(-50%, -100%); background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; } .mp-pin i { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .2s; } .mp-pin span { font-size: .55rem; font-weight: 600; background: rgba(255,255,255,.9); padding: 0 4px; border-radius: 4px; margin-top: 3px; white-space: nowrap; } .mp-pin.on i, .mp-pin:hover i { transform: rotate(-45deg) scale(1.3); } .mp-card { margin-top: 8px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.1); display: grid; gap: 3px; } .mp-card a { color: #1A73E8; font-weight: 600; text-decoration: none; } /* messages */ .msg-h, .clk-h, .wl-h, .fm-h, .st-h, .cv-h { font-weight: 700; font-size: 1.25rem; margin: 2px 0 8px; } .msg-row { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid #eee; background: none; text-align: left; cursor: pointer; } .msg-row > span:last-child { display: grid; min-width: 0; } .msg-row small { color: #8A8A8E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; } .blur { filter: blur(3.5px); user-select: none; } .msg-open { margin: 10px 0; padding: 10px; border-radius: 14px; background: #F2F2F7; text-align: center; } .msg-open p { margin: 0 0 6px; } .msg-btn, .gm-btn, .cv-btns button { border: 0; border-radius: 999px; padding: 6px 12px; background: #007AFF; color: #fff; cursor: pointer; } .msg-world { display: block; margin-top: 12px; color: #007AFF; text-decoration: none; } /* the laptop's Messages: pinned up top, chats down the side, the open one on the right */ .fwin-main:has(> .imsg) { padding: 0; overflow: hidden; } .imsg { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; height: 100%; font: 400 .74rem/1.3 -apple-system, system-ui, sans-serif; color: #1C1C1E; } .im-side { display: flex; flex-direction: column; min-height: 0; background: #F2F0EF; border-right: 1px solid #E2E0DE; } .im-search { margin: 8px 8px 4px; padding: 4px 8px; border-radius: 6px; background: #E4E2E1; color: #8A8A8E; } .im-pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 6px 8px; } .im-pin { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-size: .64rem; color: #6E6E73; } .im-pin span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .im-list { overflow-y: auto; padding: 0 6px 8px; } .im-row { display: flex; gap: 8px; align-items: center; width: 100%; padding: 7px 6px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; color: inherit; } .im-row > span:last-child { display: grid; grid-template-columns: 1fr auto; column-gap: 6px; min-width: 0; flex: 1; } .im-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .im-row em { font-style: normal; font-size: .64rem; color: #8A8A8E; } .im-row small { grid-column: 1 / -1; color: #6E6E73; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .im-row.on, .im-pin.on { background: #0A84FF; color: #fff; } .im-row.on small, .im-row.on em { color: rgba(255,255,255,.85); } .im-av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .8rem; background-image: linear-gradient(rgba(255,255,255,.25), rgba(0,0,0,.05)); } .im-av.big { width: 46px; height: 46px; font-size: 1.15rem; } .im-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; } .im-chat header { display: flex; align-items: center; gap: 5px; padding: 7px 12px; border-bottom: 1px solid #ECEAE9; color: #8A8A8E; } .im-chat header b { color: #1C1C1E; font-weight: 500; } .im-back { display: none; border: 0; background: none; color: #0A84FF; font-size: 1.3rem; line-height: 1; padding: 0 6px 0 0; cursor: pointer; } .im-log { flex: 1; overflow-y: auto; display: flex; min-height: 0; flex-direction: column; gap: 3px; padding: 8px 12px 12px; } .im-log > * { flex: none; } .im-t { align-self: center; margin: 10px 0 4px; font-size: .64rem; color: #8A8A8E; } .im-note { align-self: center; margin: 2px 0 6px; font-size: .64rem; color: #8A8A8E; text-align: center; } .im-note.right { align-self: flex-end; margin-top: 0; } .im-b { position: relative; max-width: 72%; padding: 6px 11px; border-radius: 16px; background: #E9E9EB; align-self: flex-start; overflow-wrap: anywhere; } .im-b.me { align-self: flex-end; background: #0A84FF; color: #fff; } .im-tap { position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #E9E9EB; color: #FF2D78; font-size: .62rem; border: 2px solid #fff; } .im-b:has(.im-tap) { margin-top: 8px; margin-right: 8px; } .im-voice { display: flex; align-items: center; gap: 7px; min-width: 150px; } .im-voice button { flex: none; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #0A84FF; color: #fff; font-size: .5rem; cursor: pointer; padding: 0; } .im-voice.me button { background: #fff; color: #0A84FF; } .im-wave { display: flex; align-items: center; gap: 1.5px; height: 18px; flex: 1; } .im-wave i { flex: 1; min-width: 1.5px; border-radius: 1px; background: currentColor; opacity: .55; } .im-voice:not(.me) .im-wave i { background: #0A84FF; } .im-voice.playing .im-wave i { animation: im-play 1s ease-in-out infinite alternate; } .im-voice.playing .im-wave i:nth-child(3n) { animation-delay: -.4s; } .im-voice.playing .im-wave i:nth-child(3n+1) { animation-delay: -.7s; } @keyframes im-play { to { opacity: 1; transform: scaleY(.45); } } .im-voice small { font-size: .62rem; opacity: .8; font-variant-numeric: tabular-nums; } .im-img { padding: 0; background: none; overflow: hidden; width: 46%; } .im-img img { display: block; width: 100%; max-height: 150px; object-fit: cover; border-radius: 16px; } .im-link { display: grid; text-decoration: none; padding: 8px 12px; } .im-link small { opacity: .8; font-size: .64rem; } .im-cards { align-self: center; margin-top: 10px; } .im-in { padding: 6px 10px 8px; } .im-in input { width: 100%; padding: 5px 12px; border: 1px solid #DCDAD8; border-radius: 999px; font: inherit; outline: none; background: #fff; color: inherit; } .im-in input:focus { border-color: #0A84FF; } @media (max-width: 760px) { .imsg { grid-template-columns: 1fr; } .imsg.chatting .im-side, .imsg:not(.chatting) .im-chat { display: none; } .im-back { display: block; } } @media (prefers-reduced-motion: reduce) { .im-voice.playing .im-wave i { animation: none; opacity: 1; } } /* on the phone: one screen at a time, list first */ .imsg.phone { grid-template-columns: 1fr; height: 400px; margin: 0 -4px; border-radius: 12px; overflow: hidden; } .imsg.phone.chatting .im-side, .imsg.phone:not(.chatting) .im-chat { display: none; } .imsg.phone .im-side { background: #fff; border-right: 0; } .imsg.phone .im-back { display: block; } .imsg.phone .im-b { max-width: 82%; } .imsg.phone .im-img { width: 64%; } .imsg.phone .im-voice { min-width: 0; width: 76%; } /* gmail */ .gm-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eee; } .gm-row > span:nth-child(2) { flex: 1; display: grid; } .gm-row small { color: #8A8A8E; } .gm-row em { font-style: normal; font-weight: 700; font-size: .7rem; } .lap-app { padding: 4px 8px; } .fwin.app .fwin-side { display: none; } .fwin.app .fwin-body { grid-template-columns: 1fr; } .lap-notes { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; height: 100%; } .lap-notes nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: #FBF7E8; border-right: 1px solid #EDE6CC; } .lap-notes nav button { text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px; font: inherit; font-size: .72rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lap-notes nav button.on { background: #F8D85A; font-weight: 600; } .lap-notes .ftext { padding: 10px 14px; } .lap-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; padding: 6px; } .lap-photos button { padding: 0; border: 0; background: none; cursor: pointer; } .lap-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; border-radius: 3px; } .lap-photos img[src$="/saree.jpg"] { object-position: 52% 16%; } .lap-h { margin: 2px 0 6px; font-size: .7rem; color: #8A8A8E; } .lap-mail { width: 100%; border: 0; border-bottom: 1px solid #eee; background: none; text-align: left; cursor: pointer; font: inherit; } .lap-mail.on { background: #EEF4FF; } .lap-read { text-align: left; } .lap-rem { display: flex; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid #eee; cursor: pointer; } .lap-rem input { width: 18px; height: 18px; accent-color: #FF9500; } .lap-rem input:checked + span { color: #8A8A8E; text-decoration: line-through; } .dock-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: rgba(58,38,38,.2); } .gm-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; } .gm-btn { margin-top: 12px; background: #E8EAED; color: #1C1C1E; } .gm-compose { display: inline-block; margin: 12px 0 0 6px; padding: 8px 14px; border-radius: 14px; background: #C2E7FF; color: #001D35; text-decoration: none; font-weight: 600; } /* camera */ .app-view:has(.cam) { background: #000; color: #fff; } .cam-vf { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; } .cam-vf img { width: 100%; height: 100%; object-fit: cover; } .cam-grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 33%, rgba(255,255,255,.35) 33% calc(33% + 1px), transparent 0 66%, rgba(255,255,255,.35) 66% calc(66% + 1px), transparent 0), linear-gradient(transparent 33%, rgba(255,255,255,.35) 33% calc(33% + 1px), transparent 0 66%, rgba(255,255,255,.35) 66% calc(66% + 1px), transparent 0); } .cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; } .cam-flash.go { animation: cam-flash .35s ease-out; } @keyframes cam-flash { 0% { opacity: 1; } 100% { opacity: 0; } } .cam-modes { display: flex; justify-content: center; gap: 12px; margin: 8px 0; font-size: .6rem; color: #aaa; } .cam-modes b { color: #F5C542; } .cam-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .cam-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; border: 1.5px solid #fff; } .cam-shutter { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 4px solid #000; box-shadow: 0 0 0 3px #fff; cursor: pointer; } .cam-shutter:active { transform: scale(.92); } .app-view:has(.cam) .back, .app-view:has(.cam) .appq { color: #F5C542; } /* clock */ .app-view:has(.clk) { background: #000; color: #fff; } .clk-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #333; } .clk-row span { display: grid; } .clk-row small { color: #8A8A8E; } .clk-row b { font-size: 1.05rem; font-weight: 500; } .clk-row em { font-style: normal; font-size: 1.8rem; font-weight: 300; } .app-view:has(.clk) .appq { color: #F29B38; } /* wallet */ .app-view:has(.wl) { background: #F2F2F7; } .wl-pass { display: grid; width: 100%; text-align: left; margin-bottom: -26px; padding: 12px 14px 34px; border: 0; border-radius: 14px; background: var(--c); color: #fff; cursor: pointer; box-shadow: 0 -2px 8px rgba(0,0,0,.15); transition: transform .2s; } .wl-pass:hover { transform: translateY(-6px); } .wl-pass b { font-size: .95rem; } .wl-pass span { opacity: .85; font-size: .7rem; } .wl-fine { margin-top: 40px; color: #8A8A8E; text-align: center; font-size: .65rem; } /* find my */ .fm-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eee; } .fm-art { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: #F2F2F7; border-radius: 50%; } .fm-art svg { max-width: 24px; max-height: 26px; } .fm-row > span:nth-child(2) { flex: 1; display: grid; min-width: 0; } .fm-row small { color: #8A8A8E; } .fm-row button { border: 0; border-radius: 999px; padding: 4px 10px; background: #2BB24C; color: #fff; cursor: pointer; } /* life360: the starbucks lovers circle, dark map like the real app */ .l3 { font-family: -apple-system, system-ui, sans-serif; color: #1C1C1E; } .l3-map { position: relative; height: 240px; border-radius: 14px; overflow: hidden; background: #26314A; } .l3-map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .l3-top { position: absolute; top: 8px; left: 6px; right: 6px; display: flex; align-items: center; gap: 6px; } .l3-circle { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 5px 9px; background: #fff; color: #2B2350; font-weight: 500; font-size: .66rem; overflow: hidden; cursor: pointer; display: flex; justify-content: space-between; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); } .l3-circle span { color: #7B3FF2; font-weight: 700; } .l3-zone { position: absolute; left: 50%; top: 56%; width: 88%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(123,63,242,.45); border: 1px solid #8E5BFF; } .l3-poi { position: absolute; transform: translateX(-50%); font-size: .52rem; font-weight: 600; line-height: 1.15; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; } .l3-poi.cine { color: #E9A6FF; text-align: left; } .l3-pin { position: absolute; width: 34px; height: 34px; padding: 0; transform: translate(-50%, -100%); border: 3px solid #fff; border-radius: 40%; background: #fff; overflow: visible; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.35); } .l3-pin img { width: 100%; height: 100%; object-fit: cover; border-radius: 36%; display: block; } .l3-pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; translate: -50% 0; border: 5px solid transparent; border-top: 5px solid #fff; } .l3-ago { position: absolute; padding: 2px 6px; border-radius: 8px; background: #fff; font-size: .55rem; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); } .l3-sheet { margin-top: 10px; } .l3-h { margin: 0 0 4px; font-weight: 700; font-size: 1rem; } .l3-h small { white-space: nowrap; font-weight: 400; color: #8A8A8E; font-size: .7rem; } .l3-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 0; border: 0; border-bottom: 1px solid #eee; background: none; text-align: left; cursor: pointer; color: inherit; } .l3-row img { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--c); } .l3-row > span { flex: 1; display: grid; min-width: 0; } .l3-row small { color: #8A8A8E; } .l3-row em { font-style: normal; font-size: .68rem; color: #8A8A8E; } .l3-note { margin: 10px 0 0; text-align: center; color: var(--plum); font-size: 1.1rem; } /* settings */ .app-view:has(.st) { background: #F2F2F7; } .st-me { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #fff; margin-bottom: 12px; } .st-me img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .st-me span { display: grid; } .st-me small { color: #8A8A8E; font-size: .62rem; } .st-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; background: #fff; border-bottom: 1px solid #eee; cursor: pointer; } .st-row:first-of-type { border-radius: 12px 12px 0 0; } .st-row:last-of-type { border-radius: 0 0 12px 12px; border-bottom: 0; } .st-row input { position: absolute; opacity: 0; pointer-events: none; } .st-row i { width: 36px; height: 22px; flex: none; border-radius: 999px; background: #E5E5EA; position: relative; transition: background .2s; } .st-row i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; } .st-row input:checked + i { background: #34C759; } .st-row input:checked + i::after { transform: translateX(14px); } /* safari */ .sf-h { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 10px; font-size: 1rem; } .sf-h button { border: 0; background: none; color: #007AFF; cursor: pointer; } .sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .sf-tab { display: grid; gap: 3px; padding: 6px; border-radius: 12px; background: #F2F2F7; text-decoration: none; color: inherit; transition: transform .2s; } .sf-tab:hover { transform: translateY(-3px); } .sf-prev { height: 70px; border-radius: 8px; } .sf-tab b { font-size: .72rem; line-height: 1.2; } .sf-tab small { font-size: .58rem; color: #8A8A8E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-fine { color: #8A8A8E; font-size: .7rem; margin-top: 10px; } /* chatgpt */ .gpt { display: flex; flex-direction: column; min-height: 260px; } .gpt-log { flex: 1; display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; padding: 4px 0; } .gpt-hi { text-align: center; font-size: 1.1rem; font-weight: 600; margin: 18px 0; } .gpt-me { align-self: flex-end; max-width: 75%; margin: 0; padding: 8px 12px; border-radius: 16px; background: #F0F0F0; } .gpt-ai { align-self: flex-start; max-width: 90%; margin: 0; line-height: 1.45; } .gpt-ai a { color: #10A37F; } .gpt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .gpt-chips button { border: 1px solid #E3E3E3; border-radius: 999px; padding: 5px 10px; background: #fff; cursor: pointer; font-size: .7rem; } .gpt-chips button:hover { background: #F7F7F8; } .gpt-in { display: flex; gap: 6px; padding: 6px 6px 6px 14px; border: 1px solid #E3E3E3; border-radius: 999px; } .gpt-in input { flex: 1; border: 0; outline: 0; font: inherit; background: none; } .gpt-in button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #000; color: #fff; cursor: pointer; } /* canvas */ .cv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cv-card { display: grid; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.15); background: #fff; padding-bottom: 8px; } .cv-card span { height: 70px; background: var(--c); margin-bottom: 6px; } .cv-card b, .cv-card small { padding: 0 10px; } .cv-card b { color: var(--c); } .cv-card small { color: #6B7780; font-size: .65rem; } .cv-btns { display: flex; gap: 8px; margin: 14px 0; } .cv-btns button { background: #E72429; } .cv-link { color: #2D3B45; font-weight: 600; } /* ---------- my laptop's finder ---------- */ .fwin { position: absolute; left: 5%; right: 5%; top: 10%; bottom: 18%; z-index: 5; display: flex; flex-direction: column; border-radius: 10px; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.15); overflow: hidden; font-size: .78rem; color: #1C1C1E; animation: fwin-in .25s ease-out; } .fwin[hidden] { display: none; } @keyframes fwin-in { from { opacity: 0; transform: scale(.94); } } .fwin-bar { display: flex; align-items: center; gap: 12px; padding: 7px 10px; background: #F4F2F1; border-bottom: 1px solid #E2E0DE; } .fwin-tl { display: flex; gap: 6px; } .fwin-tl button, .fwin-tl i { width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0; background: #FEBC2E; display: block; } .fwin-tl button { background: #FF5F57; cursor: pointer; } .fwin-tl i:last-child { background: #28C840; } .fwin-body { flex: 1; display: grid; grid-template-columns: minmax(96px, 26%) 1fr; min-height: 0; } .fwin-side { display: flex; flex-direction: column; gap: 1px; padding: 8px 6px; background: #F7F5F4; border-right: 1px solid #E2E0DE; overflow-y: auto; } .fwin-side button { text-align: left; border: 0; background: none; padding: 5px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fwin-side button::before { content: "▪ "; color: #4E9BE0; } .fwin-side button.on { background: #DCDAD8; font-weight: 600; } .fwin-main { overflow-y: auto; padding: 10px; } .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 6px; } .ffile { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: center; } .ffile:hover, .ffile:focus-visible { background: #E7EEF9; outline: none; } .ffile img { width: 52px; height: 44px; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .ffile img[src$="/saree.jpg"] { object-position: 52% 16%; } .ffile svg { width: 36px; height: 44px; } .ffile span { font-size: .66rem; line-height: 1.2; word-break: break-word; } .ftrash-bar { display: flex; align-items: center; justify-content: space-between; margin: -10px -10px 10px; padding: 6px 10px; background: #F4F2F1; border-bottom: 1px solid #E2E0DE; } .ftrash-bar button { font: inherit; font-size: .7rem; padding: 2px 12px; border: 1px solid #C9C7C5; border-radius: 5px; background: #fff; cursor: pointer; } .ftrash-bar button:hover:not(:disabled) { background: #F0EEEC; } .ftrash-bar button:disabled { color: #B5B3B1; cursor: default; } .ftrash-ask { position: absolute; left: 50%; top: 34px; translate: -50% 0; z-index: 2; width: min(290px, 86%); padding: 14px 16px 12px; border-radius: 10px; background: #FBFAF9; box-shadow: 0 10px 30px rgba(0,0,0,.28); border: 1px solid rgba(0,0,0,.12); text-align: center; animation: fwin-in .2s ease-out; } .ftrash-ask p { margin: 0 0 6px; line-height: 1.35; } .ftrash-ask p + p { color: #6E6E73; font-size: .72rem; } .ftrash-ask div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .ftrash-ask button { font: inherit; font-size: .72rem; padding: 5px 0; border: 1px solid #C9C7C5; border-radius: 6px; background: #fff; cursor: pointer; } .ftrash-ask [data-yes] { background: #0A66D8; border-color: #0A66D8; color: #fff; } .dock-app.empty .trash-full { display: none; } .fcount { margin-top: 10px; text-align: center; color: #8A8A8E; font-size: .6rem; text-transform: none; } .fempty { margin: 40px 0; text-align: center; color: #8A8A8E; } .fempty .hand { font-size: 1.2rem; color: var(--plum); } .fback { border: 0; background: none; padding: 0 0 8px; color: #2E6FB7; cursor: pointer; text-transform: none; } .ftext b { display: block; margin-bottom: 6px; } .ftext pre { margin: 0; font: 1rem/1.4 var(--hand); color: var(--plum); white-space: pre-wrap; } .fql img { display: block; max-width: 100%; max-height: 190px; margin: 0 auto; border-radius: 6px; } .fql-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; } .fql-nav button { border: 1px solid #ddd; background: #fff; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; } .fql-nav span { text-transform: none; font-size: .65rem; color: #8A8A8E; } .desktop { position: relative; } /* business card back: four links, each on one line, arrow included */ .bc-b a { white-space: nowrap; font-size: 5cqw; line-height: 1.5; } /* holding the eraser or whiteout: its spot in the tray is empty */ .dtool.on svg { opacity: .15; } .dtool.on { border-style: dashed !important; } /* padfolio: a pen you can pick up and a legal pad whose pages flip up over the top */ button.pf-pen { border: 0; padding: 0; background: none; cursor: pointer; transition: transform .25s, opacity .25s; } button.pf-pen:hover { transform: translateY(-4px) rotate(-3deg); } .pf.pen-held button.pf-pen { opacity: .18; } .pf-pad { position: relative; height: 100%; perspective: 1400px; } .pf-pad::before { content: ""; position: absolute; left: -3px; right: -3px; top: 0; height: 20px; z-index: 25; border-radius: 4px 4px 2px 2px; background: linear-gradient(#F4B6C8, #E79AB2); border-bottom: 2px solid #C97D96; box-shadow: 0 2px 3px rgba(0,0,0,.18); pointer-events: none; } .pf-sheet { position: absolute; inset: 20px 0 0; z-index: var(--z); background: #fff; transform-origin: 50% 0; transition: transform .75s cubic-bezier(.45,.05,.3,1), opacity .75s; backface-visibility: hidden; } .pf-sheet .pf-legal { height: 100%; } .pf-sheet.up { transform: rotateX(-172deg); opacity: 0; pointer-events: none; } .pf-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; } .pf.pen-held .pf-sheet:not(.up) .pf-ink { pointer-events: auto; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg transform='rotate(40 17 17)'%3E%3Crect x='14' y='0' width='7' height='24' rx='3' fill='%23F9C4D3' stroke='%233A2626' stroke-width='1.3'/%3E%3Cpath d='M14 24 L17.5 32 L21 24Z' fill='%23F9C4D3' stroke='%233A2626' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 6 30, crosshair; } .pf-curl { position: absolute; right: 0; bottom: 0; z-index: 20; width: 64px; height: 44px; border: 0; padding: 14px 4px 0 0; text-align: right; cursor: pointer; font: 600 .95rem var(--hand); color: var(--plum); background: linear-gradient(135deg, transparent 50%, #EDE6E8 50%, #F7F1F3 70%, #fff); border-top-left-radius: 14px; box-shadow: -2px -2px 4px rgba(0,0,0,.08); } .pf-curl:hover { width: 72px; height: 50px; } .pf-curl[hidden] { display: none; } .pf-prev { position: absolute; left: 8px; top: 2px; z-index: 26; border: 0; padding: 0; background: none; color: #5E1D38; cursor: pointer; font-size: .68rem; line-height: 16px; text-transform: none; } .pf-curl:focus:not(:focus-visible), .pf-prev:focus:not(:focus-visible) { outline: none; } .pf-curl:focus-visible { outline: 2px solid var(--plum); outline-offset: -2px; } .dtool[data-tool="whiteout"] svg { width: 150px; } /* chargers: pull the top cable out first */ .chg-svg { display: block; width: min(740px, 100%); margin: 0 auto; touch-action: none; user-select: none; } .chg-grab { fill: transparent; cursor: grab; } .chg-grab:hover { fill: rgba(242,141,180,.25); } .chg.done .chg-grab, .chg-svg .chg.done ~ .chg-grab { cursor: default; } .chg-lbl { font: 600 13px var(--hand); fill: var(--plum); } .chg-note { text-align: center; font-size: 1.4rem; color: var(--plum); min-height: 1.6em; } .chg-svg.nope { animation: chg-nope .35s; } @keyframes chg-nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* backup lipstick, to scale: about as tall as my lips are wide. pick it up; the bullet tip is what paints */ .lipwrap { max-width: 600px; gap: 22px; } .lip-slot { position: relative; flex: none; width: min(120px, 22%); aspect-ratio: 70 / 150; } .lip-stick { position: absolute; left: 0; top: 0; width: 100%; padding: 0; border: 0; background: none; cursor: grab; transform: rotate(-14deg); transform-origin: 50% 3%; transition: left .5s cubic-bezier(.3,1.2,.5,1), top .5s cubic-bezier(.3,1.2,.5,1), transform .3s; z-index: 5; filter: drop-shadow(0 6px 8px rgba(40,20,20,.25)); } .lip-stick svg { display: block; width: 100%; height: auto; } .lip-stick:hover { transform: rotate(-10deg) translateY(-4px); } .lip-stick.held { position: absolute; transition: transform .2s; transform: rotate(-38deg); cursor: grabbing; z-index: 30; } .lipwrap { position: relative; } .lipface { cursor: default; } /* dragging things around the table */ .item.out { touch-action: none; } .item.dragging { transition: none !important; cursor: grabbing; filter: drop-shadow(0 16px 18px rgba(59,21,36,.28)); } .item.dragging button { pointer-events: none; } /* makeup pouch: zip it as slowly as you like */ .mbag.scrub .mk.peek { transform: none; opacity: 1; transition-delay: 0s !important; } .mbag.scrub .mk { transition-delay: 0s !important; } .mbag.scrub .mk.peek { opacity: 1 !important; transform: translateX(calc(-50% + var(--x, 0px))) rotate(var(--a)) translateY(var(--rise, 0px)) !important; transition: transform .45s var(--ease), opacity .2s !important; } /* wallet, matched to the real one: cash lives behind every panel and only peeks over the top */ .vw-open > .p1, .vw-open > .vgusset, .vw-open > .vzip { z-index: 1; } .vw-open > .p2, .vw-open > .vflap { z-index: 2; } /* my name, hot-stamped in gold on the middle panel */ .vstamp { bottom: 7%; font: 600 clamp(.9rem, 2.1vw, 1.25rem)/1.25 var(--serif); letter-spacing: .14em; color: #E2BC5E; text-shadow: 0 1px 0 rgba(0,0,0,.25); z-index: 0; } .vstamp small { display: block; margin-top: 2px; font: 500 clamp(.38rem, .8vw, .5rem)/1.35 var(--sans, sans-serif); letter-spacing: .14em; } /* the license's age band, like the real one */ .tx-kind { letter-spacing: .06em; } .vpanel.p2 .vstamp { z-index: 8; pointer-events: none; } /* perfume: past five sprays the nozzle won't budge */ #pf-bottle.nope { animation: chg-nope .35s; } /* the hand sanitizer in my charm: squeeze it */ .sani { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 6px 0 4px; } .sani-charm { width: 120px; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 20%; } .sani-charm svg { display: block; width: 100%; height: auto; } .sani-charm.squeeze { animation: sani-sq .45s ease; } @keyframes sani-sq { 30% { transform: scale(1.06, .9); } 60% { transform: scale(.96, 1.05); } } .sani-hand { width: min(320px, 86%); margin-top: 22px; transform-origin: 30% 100%; filter: drop-shadow(0 8px 10px rgba(120, 70, 50, .12)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); } .sani-hand.rub { animation: sani-rub .9s ease-in-out; } @keyframes sani-rub { 15%, 55% { transform: translateX(-8px) rotate(-3deg); } 35%, 75% { transform: translateX(8px) rotate(3deg); } } .sani-hand ellipse { transition: rx .3s, ry .3s; } .sani-drop { position: absolute; width: 14px; height: 18px; margin-left: -7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #fff, #DDF0FF 55%, #B9D6EC); border: 1.5px solid #9EC3DE; animation: sani-fall .52s cubic-bezier(.5,0,.9,.6) forwards; pointer-events: none; } @keyframes sani-fall { 0% { transform: scale(.3); } 25% { transform: scale(1, 1.2); } 100% { transform: translateY(var(--fall)) scale(1.1, .8); } } /* the Stanley in its own sheet: the lid unscrews and sets down next to the bottle */ .stan-big { width: 84px; margin: 10px auto 0; cursor: pointer; padding-right: 60px; box-sizing: content-box; } .stan-big svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 8px rgba(59,21,36,.2)); } .stan-big .lid { transform-box: view-box; transform-origin: 21px 25px; } .stan-big.lid-open .lid { animation: unscrew-off .9s cubic-bezier(.45,.05,.4,1) forwards; } .stan-big .lid.closing { animation: rescrew-on .8s cubic-bezier(.45,.05,.4,1) forwards; } .stan-say { text-align: center; color: var(--plum); font-size: 1.3rem; margin: 6px 0 10px; } /* comb and scrunchies: just the thing itself */ .solo { width: min(300px, 70%); margin: 10px auto 18px; } .solo svg { display: block; width: 100%; height: auto; } /* the speeding ticket flips over: $350 */ .tk { position: relative; display: block; width: min(440px, 88%); aspect-ratio: 220 / 150; margin: 6px auto 4px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1000px; } .tk-f, .tk-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s cubic-bezier(.3,1.1,.5,1); display: grid; place-items: center; } .tk-f svg, .tk-b svg { width: 100%; height: 100%; display: block; } .tk-b { transform: rotateY(180deg); } .tk.flip .tk-f { transform: rotateY(-180deg); } .tk.flip .tk-b { transform: rotateY(0); } .tk-say { text-align: center; color: var(--plum); font-size: 1.3rem; margin: 6px 0 10px; } /* skincare pouch: tap something to use it. caps lift, pumps press, a little product appears */ .mbag.skin .mk .top { transition: transform .45s cubic-bezier(.3,1.3,.5,1); transform-box: view-box; } .mbag.skin .mk .dab { opacity: 0; transition: opacity .3s .15s; } .mbag.skin .mk.use .dab { opacity: 1; } .mbag.skin .mk[data-sk="dropper"].use .top, .mbag.skin .mk[data-sk="lamer"].use .top, .mbag.skin .mk[data-sk="sisley"].use .top { transform: translateY(-26px) rotate(-6deg); } .mbag.skin .mk[data-sk="pinkpump"].use .top, .mbag.skin .mk[data-sk="goldpump"].use .top { transform: translateY(6px); } .mbag.skin .mk[data-sk="patches"].use .top { transform: translateY(-40px) scale(1.15); } .mbag.skin .mk svg { overflow: visible; } /* skincare: my bare face, and everything you put on it */ .face { position: relative; width: min(420px, 92%); margin: 6px auto 18px; border: 2.5px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 4px 4px 0 var(--ink); transition: box-shadow .2s, transform .2s; } .face img { display: block; width: 100%; height: auto; transition: filter .8s; } .face svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .face .fx { opacity: 0; transition: opacity .9s ease; } .face .fx.on { opacity: 1; } .face.target { box-shadow: 0 0 0 4px #F28DB4, 4px 4px 0 var(--ink); transform: scale(1.01); } .face.pop { animation: face-pop .5s ease; } @keyframes face-pop { 40% { transform: scale(1.015); } } .face-hint { position: absolute; left: 10px; bottom: 8px; padding: 0 10px; border-radius: 99px; background: rgba(255,255,255,.85); color: var(--plum); font-size: 1.15rem; } .sk-ghost { position: fixed; z-index: 100; pointer-events: none; transform: translate(-50%, -60%) rotate(-12deg); filter: drop-shadow(0 10px 12px rgba(40,20,20,.3)); } .sk-ghost svg { display: block; width: 100%; height: auto; overflow: visible; } .mbag.skin .mk[data-sk] { touch-action: none; } .mbag.skin .mk[data-sk="laneige"].use .top { transform: translateY(-20px) rotate(-8deg); } /* the mailbox: turn the key, the door swings open, a letter from amaira */ .mbx { width: min(300px, 80%); margin: 8px auto 12px; cursor: pointer; perspective: 800px; } .mbx svg { display: block; width: 100%; height: auto; overflow: visible; } .mbx .mbx-lock { transform-box: fill-box; transform-origin: center; transition: transform .45s; } .mbx.turn .mbx-lock { transform: rotate(90deg); } .mbx .mbx-door { transform-box: view-box; transform-origin: 30px 90px; transition: transform .8s cubic-bezier(.3,1.1,.5,1); } .mbx.open .mbx-door { transform: perspective(600px) rotateY(-105deg); } .mbx .mbx-env { transition: transform .6s, opacity .6s; } .mbx.taken .mbx-env { transform: translateY(-40px); opacity: 0; } .lc { margin: 14px auto 6px; width: min(520px, 100%); animation: lc-in .6s cubic-bezier(.2,.8,.2,1); } @keyframes lc-in { from { opacity: 0; transform: translateY(20px) rotate(-2deg) scale(.95); } } .lc-paper { position: relative; padding: 18px 22px 16px 56px; background-color: #FFFEFB; background-image: linear-gradient(90deg, transparent 44px, #E9A1A9 44px 45.5px, transparent 45.5px), repeating-linear-gradient(transparent 0 27px, #BCCBE6 27px 28px); background-position: 0 0, 0 12px; border: 1.5px solid #D9D3CA; border-radius: 3px; box-shadow: 0 10px 24px -10px rgba(59,21,36,.35); transform: rotate(-.8deg); font-family: "Kalam", var(--hand); color: #2E2A2C; } .lc-holes { position: absolute; left: 14px; top: 10%; bottom: 10%; display: flex; flex-direction: column; justify-content: space-between; } .lc-holes i { width: 14px; height: 14px; border-radius: 50%; background: #E9E4DE; box-shadow: inset 1px 1px 2px rgba(0,0,0,.25); } .lc-name { margin: 0; font-size: .78rem; line-height: 28px; color: #6B6460; } .lc-title { margin: 0; text-align: center; font: 400 1.6rem/56px "Kalam", var(--hand); } .lc-body { margin: 0; font-size: 1.12rem; line-height: 28px; } .lc-draw { display: block; width: 46%; margin: 8px auto 0; } .lc-say { text-align: center; color: var(--plum); font-size: 1.35rem; margin: 14px 0 0; } /* eye patches on: i close my eyes (the real photo) */ .face .face-closed { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease .2s; } .face.asleep .face-closed { opacity: 1; } /* the gold mailbox key: slides in, turns, unlocks */ .mbx .mbx-key { transform: translateX(70px); opacity: 0; transition: transform .6s cubic-bezier(.3,1.1,.5,1), opacity .3s; } .mbx.insert .mbx-key { transform: none; opacity: 1; } .mbx .mbx-key-turn { transform-box: view-box; transform-origin: 164px 96px; transition: transform .5s ease; } .mbx.turn .mbx-key-turn { transform: rotate(90deg); } /* peel the eye patches off my face */ .face [data-fx="patches"].on path { pointer-events: auto; cursor: pointer; } .face [data-fx="patches"] { transition: opacity .9s ease, transform .45s ease; transform-box: view-box; } .face [data-fx="patches"].peel { transform: translate(-14px, -26px) rotate(-6deg); opacity: 0 !important; transition: transform .45s ease, opacity .45s ease; } /* eye patches: the real photo of me in them, then i doze off */ .face .face-patched { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s ease; } .face.patched .face-patched { opacity: 1; } .face [data-fx="patches"].on { opacity: 0; } .face.asleep [data-fx="patches"].on { opacity: 1; } .face.asleep [data-fx="lips"] { transform: translate(1px, -3px); transform-box: view-box; } .mbag.skin .mk[data-sk="lash"].use .top { transform: translateY(-46px) rotate(-8deg); } .face.asleep [data-fx="lashes"], .face.patched [data-fx="lashes"] { opacity: 0 !important; } /* pads: a wrapped pad with a little folded note taped on. unfold the note, read it, fold it, then peel the pad open. */ .pd { position: relative; width: min(300px, 82%); aspect-ratio: .78; margin: 8px auto 6px; perspective: 900px; } .pd-pad { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; } .pd-back, .pd-flap { position: absolute; inset: 0; border: 2.5px solid var(--ink); border-radius: 18px; } .pd-back { background: #FBE3EA; box-shadow: 5px 5px 0 var(--ink); } .pd-inside { position: absolute; inset: 7% 18%; z-index: 1; transition: transform .6s cubic-bezier(.3,1.4,.5,1) .25s; } .pd-inside svg { width: 100%; height: 100%; display: block; } .pd-flap { z-index: 2; transform-origin: 50% 100%; background: linear-gradient(transparent 31%, rgba(233,149,175,.7) 31% 32%, transparent 32% 68%, rgba(233,149,175,.7) 68% 69%, transparent 69%), #F4B6CA; transition: transform .7s cubic-bezier(.5,0,.3,1), opacity .3s .45s; backface-visibility: hidden; } .pd-flap::before { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(233,149,175,.9); border-radius: 12px; } .pd-tab { position: absolute; left: 50%; top: -2px; transform: translate(-50%, -50%); padding: 3px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #FFF6F8; font: 600 .62rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--plum); } .pd.opened .pd-flap { transform: rotateX(-82deg); opacity: 0; } .pd.opened .pd-inside { transform: none; } /* the note: folded, it's a little square taped to the corner; unfolded, it's still smaller than the pad */ .pd-note { position: absolute; z-index: 3; right: -6%; top: 10%; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(9deg); transition: all .5s cubic-bezier(.4,1.3,.5,1); } .pd-folded, .pd-open { position: absolute; border: 2px solid var(--ink); background: #FFF1F5; color: var(--plum); box-shadow: 3px 3px 0 var(--ink); } .pd-folded { inset: 0; display: grid; place-items: center; font-size: 1.4rem; border-radius: 3px; background: linear-gradient(135deg, #FFF1F5 49%, #F6D3DE 50%); transition: opacity .2s; } .pd-tape { position: absolute; left: 50%; top: -9px; width: 46px; height: 16px; margin-left: -23px; background: rgba(242,141,180,.55); transform: rotate(-4deg); } .pd-open { left: 0; top: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 10px; text-align: left; font-family: var(--hand); color: #3A2626; border-radius: 3px; transform-origin: 100% 0; transform: scale(.2, .1); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.4,1.3,.5,1), opacity .2s; } .pd-l { display: block; font-size: clamp(.98rem, 3.6vw, 1.12rem); line-height: 1.18; } .pd-hi { font-size: 1.3rem; color: var(--plum); } .pd-sig { text-align: right; color: var(--plum); } .pd.reading .pd-note { right: 9%; top: 6%; width: 82%; height: auto; transform: rotate(-1.5deg); } .pd.reading .pd-folded { opacity: 0; } .pd.reading .pd-open { position: relative; transform: none; opacity: 1; } /* read it, folded it: it tucks itself up into the corner so the pad can open */ .pd.read:not(.reading) .pd-note { right: -9%; top: -6%; transform: rotate(16deg) scale(.85); } .pd-note.nudge { animation: pd-nudge .5s; } @keyframes pd-nudge { 25% { transform: rotate(18deg) scale(1.12); } 60% { transform: rotate(2deg) scale(1.05); } } .pd-say { text-align: center; color: var(--plum); font-size: 1.35rem; margin: 14px 0 4px; min-height: 1.4em; } @media (prefers-reduced-motion: reduce) { .pd-flap, .pd-inside, .pd-note, .pd-open { transition: none; } .pd-note.nudge { animation: none; } } .pad-more { text-align: center; color: var(--ink-2); font-size: .92rem; } .pad-more a { color: var(--plum); } /* la mer's little spoon: only goes under my eyes */ .lm-spoon { position: absolute; right: 10px; bottom: 10px; width: 26px; padding: 0; border: 0; background: rgba(255,255,255,.85); border-radius: 12px; cursor: grab; touch-action: none; animation: lm-nudge 1.4s ease-in-out infinite; z-index: 3; } .lm-spoon svg { display: block; width: 100%; height: auto; padding: 4px 3px; } .lm-spoon.held { opacity: .2; animation: none; } @keyframes lm-nudge { 50% { transform: translateY(-6px) rotate(-6deg); } } .lm-ghost { width: 26px; transform: translate(-50%, -8%) rotate(-28deg); transform-origin: 50% 8%; } /* amaira's cards, redrawn */ .kc-dig svg { display: block; width: 100%; height: auto; max-height: 440px; } /* netflix / prime: my favorites, with titles */ .stream-sub { margin: -4px 0 10px; font-size: .62rem; line-height: 1.35; color: #B3B3B3; font-style: italic; } .posters figure { margin: 0; } .posters figcaption b { display: block; margin-top: 4px; font-size: .62rem; line-height: 1.2; color: #fff; } .posters figcaption small { font-size: .55rem; color: #9A9A9A; } .stream-more { display: inline-block; margin-top: 12px; font-size: .65rem; color: #E5E5E5; } .yt-why { margin: -2px 0 8px; font: italic .66rem/1.3 var(--serif); color: #606060; } /* the rom-com: every chapter is another book */ .rcx { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: start; width: min(560px, 100%); margin: 14px auto 6px; padding: 14px; background: #FFFDF6; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); } .rcx[hidden] { display: none; } .rcx img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.4); } .rcx-ch { margin: 0; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; } .rcx h3 { margin: 4px 0 0; font: 400 1.5rem/1.1 var(--serif); } .rcx-a { margin: 2px 0 8px; color: var(--plum); font-size: .9rem; } .rcx-s { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-2); } .rcx.turn > * { animation: rcx-turn .45s ease; } @keyframes rcx-turn { from { opacity: 0; transform: translateX(14px); } } .rcx-say { text-align: center; color: var(--plum); font-size: 1.25rem; margin: 10px 0 4px; } @media (max-width: 760px) { .rcx { grid-template-columns: 80px 1fr; } } /* onward: my business shelf, pull a book off */ .bz-shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 8px; padding: 10px 10px 16px; margin: 10px 0; background: linear-gradient(transparent calc(50% - 6px), #B98962 calc(50% - 6px) calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(transparent calc(100% - 8px), #B98962 calc(100% - 8px)); border-radius: 6px; } .bz-book { padding: 0; border: 0; background: none; cursor: pointer; transition: transform .35s cubic-bezier(.3,1.3,.5,1); } .bz-book img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; box-shadow: 2px 4px 8px -3px rgba(0,0,0,.4); } .bz-book:hover { transform: translateY(-5px); } .bz-book.out { transform: translateY(-14px) scale(1.18) rotate(-3deg); z-index: 2; } .bz-say { text-align: center; color: var(--plum); font-size: 1.35rem; min-height: 1.5em; } @media (max-width: 760px) { .bz-shelf { grid-template-columns: repeat(4, 1fr); background: none; } } /* procreate: stacks, like the real gallery */ .stacks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; padding: 6px 2px; } .stack { display: grid; gap: 4px; justify-items: start; padding: 0; border: 0; background: none; color: #EDEDED; cursor: pointer; text-align: left; } .stack-pile { position: relative; width: 100%; aspect-ratio: 4 / 3; } .stack-pile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.5); } .stack-pile img:nth-child(1) { transform: rotate(-5deg) scale(.92); } .stack-pile img:nth-child(2) { transform: rotate(4deg) scale(.95); } .stack:hover .stack-pile img:nth-child(1) { transform: rotate(-8deg) scale(.92) translateX(-6px); } .stack b { font-size: .72rem; } .stack small { font-size: .6rem; color: #9A9AA0; } .stack-sub { margin: -4px 0 10px; font-size: .68rem; color: #B9B9C0; } .stack-sub a { color: #8FB8F0; } .pc-full img { display: block; max-width: 100%; max-height: 300px; margin: 0 auto; border-radius: 4px; } .pc-nav { display: grid; grid-template-columns: 30px 1fr 30px; gap: 8px; align-items: center; margin-top: 8px; color: #EDEDED; } .pc-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #555; background: #2A2A30; color: #fff; cursor: pointer; } .pc-nav b { display: block; font-size: .75rem; } .pc-nav small { display: block; font-size: .62rem; color: #B9B9C0; line-height: 1.35; margin-top: 2px; } @media (max-width: 760px) { .stacks { grid-template-columns: repeat(2, 1fr); } } /* stanley vs backpack, matched to the photo: about 4/5 the height of the bag, top just under the bag's top */ .bottle { width: 25%; right: -6%; bottom: 6%; } .bottle .lid { transform-origin: 32px 31px; } .stan-big .lid { transform-origin: 32px 31px; } /* the side pocket only holds the bottom of the bottle, like the real bag */ .bottle .holder { height: 30%; left: -22%; right: -12%; } .bottle .holder::after { top: 40%; height: 14%; } /* the boarding pass peeking out of the passport */ .pb-tucked { display: flex; align-items: center; gap: 12px; margin: 14px auto 0; padding: 0; border: 0; background: none; cursor: pointer; } .pb-tucked svg { width: 150px; height: auto; transform: rotate(-4deg); transition: transform .3s cubic-bezier(.3,1.3,.5,1); filter: drop-shadow(0 6px 8px rgba(40,20,20,.2)); } .pb-tucked:hover svg { transform: rotate(-4deg) translate(6px, -6px); } .pb-tucked .hand { font-size: 1.3rem; color: var(--plum); text-align: left; } .bp-where { text-align: center; color: var(--plum); font-size: 1.25rem; margin: 16px 0 0; } /* skincare: the products first, then my night routine in order */ .mbag.skin { padding-top: 240px; margin-top: -10px; } .routine-h { margin: 22px 0 0; font: 400 1.6rem var(--serif); text-align: center; } .routine-sub { text-align: center; color: var(--plum); font-size: 1.3rem; margin: 2px 0 10px; } /* the pouch and my face side by side, so i can do my skincare without scrolling back and forth */ dialog.sheet:has(.skin-layout) { width: min(1180px, calc(100vw - 24px)); } /* overflow-x: hidden would turn the body into its own scroller and break the sticky face; clip doesn't */ #sheet-body:has(.skin-layout), #sheet-body:has(.bl) { overflow-x: clip; } .skin-layout { display: grid; grid-template-columns: minmax(520px, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; } .skin-layout .routine { margin-top: 6px; } .skin-right { position: sticky; top: 72px; } .skin-right .face { margin: 0; width: 100%; } .routine { margin: 0; padding-left: 22px; font-size: .82rem; line-height: 1.35; color: var(--muted); } .routine li { padding: 5px 4px; border-radius: 6px; } .routine li.now { color: var(--ink); font-weight: 600; background: #FBE3EB; } .routine li.done { color: var(--plum); text-decoration: line-through; text-decoration-color: rgba(118,52,78,.5); } .routine li.done::after { content: " ✓"; text-decoration: none; } @media (max-width: 1000px) { .skin-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; } /* phones: my face rides along at the top while you scroll through the pouch */ .skin-right { order: -1; top: var(--bar-h, 58px); z-index: 2; padding: 6px 0 10px; background: var(--paper); } .skin-right .face { width: min(100%, calc(34svh * 900 / 719)); margin: 0 auto; } } /* the cash: rupees, and five $100s with the blue security ribbon */ .bill { transform: translateY(calc(var(--k) * 3.4%)); } .vbills:hover .bill { transform: translateY(calc(-4% + var(--k) * 3.4%)); } .vw.bills-out .bill, .vw.bills-out .vbills:hover .bill { transform: translateY(calc(-36% + var(--k) * 6%)); } .bill.usd100 { background-color: #DCE4D6; background-image: linear-gradient(90deg, transparent 47%, #3B6FD8 47% 50%, transparent 50%), radial-gradient(circle at 74% 46%, rgba(255,255,255,.55) 0 14%, transparent 15%), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 5px); } .bill.usd100 b { color: #2C4A2A; } .bill.usd100::after { content: "100"; position: absolute; right: 8px; bottom: 4px; font: 700 1.2rem var(--serif); color: #C7883A; opacity: .85; } .vw.bills-out { margin-top: 120px; transition: margin-top .45s ease; } /* the mailbox, flooded: amaira's cards spill out into a pile */ .mf { position: relative; height: 0; transition: height .6s ease; } .mf.out { height: 250px; } .mf-card { position: absolute; left: 50%; top: 0; width: 120px; padding: 4px; border: 0; background: #fff; border-radius: 3px; box-shadow: 0 6px 14px -6px rgba(40,20,20,.45); cursor: pointer; opacity: 0; transform: translate(-50%, -150px) scale(.3) rotate(0deg); transition: transform .7s cubic-bezier(.25,1.35,.45,1), opacity .3s; transition-delay: calc(var(--k) * 70ms); z-index: calc(10 + var(--k)); } .mf-card img { display: block; width: 100%; height: 90px; object-fit: cover; border-radius: 2px; } .mf.out .mf-card { opacity: 1; transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r)); } .mf.out .mf-card:hover { transform: translate(calc(-50% + var(--x)), calc(var(--y) - 8px)) rotate(var(--r)) scale(1.06); z-index: 40; } .mf-view { position: relative; width: min(460px, 100%); margin: 10px auto; padding: 12px; background: #fff; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--ink); text-align: center; } .mf-view img { display: block; max-width: 100%; max-height: 380px; margin: 0 auto; border-radius: 3px; } .mf-view .hand { color: var(--plum); font-size: 1.3rem; margin: 10px 0 6px; } .mf-x { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; } @media (max-width: 760px) { .mf-card { width: 86px; } .mf-card img { height: 64px; } .mf.out { height: 220px; } } /* a hidden button stays hidden (button styles were overriding the hidden attribute) */ .btn[hidden], button[hidden] { display: none !important; } /* a real open book: cover (drawn) on the left, chapter + synopsis on the right */ .bk { position: relative; width: min(660px, 100%); margin: 14px auto 6px; perspective: 1600px; } .bk-closed { display: block; width: 200px; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .3s; filter: drop-shadow(0 12px 16px rgba(40,20,20,.3)); } .bk-closed svg { display: block; width: 100%; height: auto; } .bk-closed:hover { transform: rotate(-2deg) translateY(-4px); } .bk-open { display: none; position: relative; grid-template-columns: 1fr 1fr; aspect-ratio: 1.45; background: #EFE6D6; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 0 18px 30px -16px rgba(40,20,20,.5); padding: 6px; } .bk.open .bk-closed { display: none; } .bk.open .bk-open { display: grid; animation: bk-in .5s cubic-bezier(.2,.8,.2,1); } @keyframes bk-in { from { opacity: 0; transform: rotateY(-25deg) scale(.9); } } .bk-page { position: relative; background: #FFFCF4; padding: 18px 20px; overflow: hidden; } .bk-l { border-radius: 4px 0 0 4px; box-shadow: inset -14px 0 18px -14px rgba(0,0,0,.35); display: grid; place-items: center; } .bk-r { border-radius: 0 4px 4px 0; box-shadow: inset 14px 0 18px -14px rgba(0,0,0,.35); } .bk-art { width: 72%; padding: 8px; background: #fff; border: 1.5px solid #3A2626; border-radius: 2px; transform: rotate(-2deg); box-shadow: 3px 3px 0 rgba(58,38,38,.15); } .bk-art img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; filter: url(#drawn) saturate(1.1); } .bk-ch { margin: 0; font: 600 1.35rem var(--hand); color: var(--plum); } .bk-r h3 { margin: 2px 0 0; font: 400 clamp(1.05rem, 2.2vw, 1.4rem)/1.15 var(--serif); } .bk-a { margin: 2px 0 10px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .bk-s { margin: 0; font: 400 clamp(.82rem, 1.6vw, .95rem)/1.55 var(--serif); color: #3A2E2A; } .bk-leaf { position: absolute; top: 6px; bottom: 6px; left: 50%; right: 6px; background: #FFFCF4; border-radius: 0 4px 4px 0; transform-origin: 0 50%; opacity: 0; pointer-events: none; box-shadow: inset 10px 0 14px -10px rgba(0,0,0,.3); } .bk-leaf.go.fwd { animation: bk-turn .55s ease-in-out; } .bk-leaf.go.back { animation: bk-turn-back .55s ease-in-out; } @keyframes bk-turn { 0% { opacity: 1; transform: rotateY(0); } 100% { opacity: 1; transform: rotateY(-180deg); } } @keyframes bk-turn-back { 0% { opacity: 1; transform: rotateY(-180deg); } 100% { opacity: 1; transform: rotateY(0); } } @media (max-width: 760px) { .bk-open { aspect-ratio: auto; grid-template-columns: 1fr; } .bk-l { min-height: 220px; } } /* my little jewelry box: the lid lifts, the necklaces lift out and swing */ .jw { position: relative; width: min(520px, 100%); margin: 70px auto 10px; cursor: pointer; perspective: 900px; } .jw-lid { position: absolute; left: 0; right: 0; top: -14px; height: 60%; z-index: 3; background: #F6C9D4; border: 2.5px solid var(--ink); border-radius: 18px; transform-origin: 50% 0; transition: transform .8s cubic-bezier(.3,1.1,.5,1); box-shadow: inset 0 -10px 0 rgba(255,255,255,.3); } .jw-lid::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 34px; height: 22px; margin-left: -17px; background: #E2B24A; border: 2.5px solid var(--ink); border-radius: 5px; } .jw.open .jw-lid { transform: rotateX(-110deg); } .jw-base { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; background: #7A2E46; border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: inset 0 6px 14px rgba(0,0,0,.35), 0 14px 22px -14px rgba(40,20,20,.5); } .jw-slot { position: relative; padding: 6px; border: 0; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #A44A66, #8A3854); box-shadow: inset 0 2px 6px rgba(0,0,0,.4); cursor: pointer; transition: transform .45s cubic-bezier(.3,1.3,.5,1), box-shadow .3s; } .jw-slot svg { display: block; width: 100%; height: auto; overflow: visible; } .jw:not(.open) .jw-slot { pointer-events: none; } .jw-slot.up { transform: translateY(-46px) scale(1.25); z-index: 4; background: transparent; box-shadow: none; } .jw-slot.up svg { animation: jw-swing 1.6s ease-in-out infinite; transform-origin: 50% 0; filter: drop-shadow(0 8px 8px rgba(40,20,20,.3)); } @keyframes jw-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } .jw-say { text-align: center; color: var(--plum); font-size: 1.3rem; min-height: 2.6em; } .jw { perspective: none; } .jw.open .jw-lid { transform: translateY(-62%) rotate(-5deg); } .jw-lid { transition: transform .7s cubic-bezier(.3,1.25,.5,1); } #sheet-body { overflow-x: hidden; } .jw { margin-top: 110px; } .jw-base { position: relative; z-index: 2; } .jw.open .jw-lid { transform: translateY(-96%) rotate(-3deg); z-index: 1; } /* jewelry box v2: a quilted lid that covers the whole box and swings up on its hinge */ .jw { perspective: 1400px; margin-top: 150px; } .jw-lid { inset: 0; height: auto; top: 0; z-index: 3; border-radius: 16px; background-color: #F4C3CF; background-image: repeating-linear-gradient(45deg, transparent 0 13px, #E7A9B9 13px 14px), repeating-linear-gradient(-45deg, transparent 0 13px, #E7A9B9 13px 14px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 10px 18px -10px rgba(40,20,20,.4); transform-origin: 50% 0; transition: transform .9s cubic-bezier(.3,1.05,.4,1); transform-style: preserve-3d; } .jw-lid::after { left: 50%; top: auto; bottom: -11px; width: 38px; height: 24px; margin-left: -19px; border-radius: 6px; background: #E2B24A radial-gradient(circle at 50% 55%, #9C7420 0 3px, transparent 3.5px); } .jw-lid::before { content: ""; position: absolute; left: 14px; right: 14px; top: 8px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.6); } .jw.open .jw-lid { transform: rotateX(105deg); z-index: 1; } .jw-base { z-index: 2; } .jw:not(.open) .jw-base { visibility: hidden; } .jw:not(.open) { min-height: 180px; } /* skincare pouch: products line up in routine order. the next one glows and bobs */ .mbag.skin.open .mk.later { opacity: 0; transform: translateX(calc(-50% + var(--x, 0px))) rotate(calc(var(--a) * .2)) translateY(70%); pointer-events: none; } .mbag.skin.open .mk.later svg *, .mbag.skin.open .mk.later span { pointer-events: none; } .mbag.skin.open .mk.next svg { filter: drop-shadow(0 0 10px rgba(230, 63, 122, .55)); animation: sk-bob 1.4s ease-in-out infinite; } .mbag.skin.open .mk.next span { font-weight: 700; } @keyframes sk-bob { 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .mbag.skin.open .mk.next svg { animation: none; } } /* the rotating line under the title fades between lines */ #lede { transition: opacity .35s ease, transform .35s ease; } #lede.swap { opacity: 0; transform: translateY(4px); } /* la mer's spoon: keep it out of the face overlay's full-size svg rule so it's actually grabbable */ .face .lm-spoon { width: 34px; } .face .lm-spoon svg { position: static; inset: auto; width: 100%; height: auto; pointer-events: none; } /* drag something back onto the backpack: it lights up to say "drop it here" */ #bag.drop-here { filter: drop-shadow(0 0 18px rgba(230, 63, 122, .55)); } #bag.drop-here #bag-art { transform: scale(1.03); transition: transform .2s; } /* headphones: drag them onto me while i study */ .study-wrap { position: relative; display: flex; align-items: flex-end; gap: 14px; margin: 6px 0 4px; } .study { position: relative; flex: 1; max-width: 420px; margin-left: auto; border: 2.5px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 4px 4px 0 var(--ink); cursor: default; transition: box-shadow .2s, transform .2s; } .study img { display: block; width: 100%; height: auto; } .study .study-on { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; } .study.on .study-on { opacity: 1; } .study.on { cursor: pointer; } .study.target { transform: scale(1.02); box-shadow: 4px 4px 0 var(--ink), 0 0 0 4px #F4A7B9; } .study-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 2px 12px; border-radius: 999px; background: rgba(255,251,246,.9); color: var(--plum); font-size: 1.15rem; white-space: nowrap; pointer-events: none; transition: opacity .3s; } .study.on .study-hint { opacity: 0; } .study-hp { flex: 0 0 110px; margin-right: auto; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; animation: lm-nudge 1.4s ease-in-out infinite; } .study-hp svg { display: block; width: 100%; height: auto; pointer-events: none; } .study-hp.held { opacity: .25; animation: none; } .study-say { text-align: center; color: var(--plum); font-size: 1.3rem; margin: 8px 0 14px; } @media (max-width: 560px) { .study-wrap { flex-direction: column-reverse; align-items: center; } .study-hp { flex-basis: auto; width: 90px; margin: 0; } .study { margin: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { .study-hp { animation: none; } } /* the sunglasses you drag around: chunky black square frames with a cream edge, brown gradient lenses */ .rz-lens { border: 12px solid #141010; outline: none; box-shadow: 0 0 0 2.5px #EFE3CF; border-radius: 12px; } .rz-lens::after { background: linear-gradient(180deg, rgba(46, 24, 18, .42), rgba(178, 110, 72, .16)); } .rz-bridge { width: 8%; height: 14px; margin-top: -26%; background: #141010; border-top: 2.5px solid #EFE3CF; border-radius: 10px 10px 4px 4px; } /* sweater: the folded bottom edge only shows once the hem is tucked up behind */ .sw2 .sw-edge { opacity: 0; transition: opacity .3s; } .sw2[data-f="3"] .sw-edge { opacity: 1; transition-delay: .5s; } /* books: the synopsis fills the right page, and both pages are numbered */ .bk-r { display: flex; flex-direction: column; padding-bottom: 30px; } .bk-l { padding-bottom: 30px; } .bk-s { flex: 1; line-height: 1.5; } .bk-pg { position: absolute; bottom: 9px; font-size: .68rem; color: var(--muted); letter-spacing: .04em; } .bk-pg.l { left: 18px; } .bk-pg.r { right: 18px; } /* skincare: brighter under-eyes after la mer, then the eye mask photo as the last step */ .face .face-lamer, .face .face-mask { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; } .face.lamer .face-lamer, .face.masked .face-mask { opacity: 1; } .face.masked [data-fx="lashes"] { opacity: 0 !important; } /* makeup pouch: bibbidi bobbidi boo, before and after */ .bbb { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 4px auto 8px; } .bbb-photo { position: relative; width: min(300px, 82%); aspect-ratio: 720 / 867; border-radius: 18px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--rose); background: var(--plum-deep); } .bbb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s .25s, filter .5s .25s; } .bbb-after { opacity: 0; } .bbb.after .bbb-after { opacity: 1; } .bbb.poof .bbb-photo img { animation: bbb-flash .8s ease; } @keyframes bbb-flash { 35% { filter: brightness(1.7) saturate(.6) blur(2px); } } .bbb-tag { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 251, 248, .88); color: var(--plum); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } .bbb-dust { position: absolute; inset: 0; pointer-events: none; } .bbb-dust i { position: absolute; left: 50%; top: 40%; width: 14px; height: 14px; margin: -7px; opacity: 0; background: radial-gradient(circle, #fff 0 20%, var(--butter) 35%, transparent 70%); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } .bbb.poof .bbb-dust i { animation: bbb-spark 1.1s var(--ease) var(--d) both; } @keyframes bbb-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 3), calc(var(--y) * 3)) scale(var(--s)) rotate(180deg); } } .bbb-wand, .bbb-zoom { display: inline-flex; align-items: center; gap: 8px; } .bbb-zoom svg { width: 16px; height: 16px; } .bbb-photo img { transform-origin: 48% 37%; transition: opacity .5s .25s, filter .5s .25s, transform .8s var(--ease); } .bbb.zoom .bbb-photo img { transform: scale(2.4); } .bbb-wand svg { width: 18px; height: 18px; transition: transform .4s var(--ease); } .bbb-wand:hover svg, .bbb.poof .bbb-wand svg { transform: rotate(-24deg); } .bbb-cap { margin: 0; font-size: 1.6rem; color: var(--plum); text-align: center; } .kshop { margin-top: 22px; } .kshop .bbb-photo { aspect-ratio: 1000 / 1250; background: #fff; } .kshop-photo img { opacity: 0; } .kshop-photo[data-step="0"] img[data-s="0"], .kshop-photo[data-step="1"] img[data-s="1"], .kshop-photo[data-step="2"] img[data-s="2"], .kshop-photo[data-step="3"] img[data-s="3"] { opacity: 1; } .kshop .bbb-photo img { object-fit: contain; } .kshop .bbb-tag { text-transform: none; letter-spacing: .04em; } @media (prefers-reduced-motion: reduce) { .bbb.poof .bbb-dust i, .bbb.poof .bbb-photo img { animation: none; } } /* the comb: drag it down through my hair, frizz above turns to smooth waves */ .hair { --comb: 0; position: relative; width: min(300px, 80%); aspect-ratio: 570 / 1040; margin: 6px auto 8px; border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 6px 6px 0 var(--rose); cursor: grab; user-select: none; } .hair.dragging { cursor: grabbing; } .hair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; } .hair-after { clip-path: inset(0 0 calc((1 - var(--comb)) * 100%) 0); transition: clip-path .5s var(--ease); } .hair.dragging .hair-after, .hair.dragging .hair-comb { transition: none; } .hair-comb { position: absolute; left: 50%; top: calc(7% + var(--comb) * 88%); width: 46%; padding: 0; border: 0; background: none; cursor: inherit; transform: translate(-50%, -50%) rotate(-45deg); transition: top .5s var(--ease); filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); } .hair-comb svg { display: block; width: 100%; height: auto; } .hair .hair-braid { opacity: 0; transition: opacity .7s ease; } .hair.braided .hair-braid { opacity: 1; } .hair.braided { cursor: default; } .hair.braided .hair-comb { opacity: 0; pointer-events: none; } .hair-comb { transition: top .5s var(--ease), opacity .4s; } .hair-tag { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 251, 248, .88); color: var(--plum); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } .bbb-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* reading glasses: the note is a blur until you put them on */ .rg-big { width: min(340px, 80%); margin: 6px auto 14px; transition: transform .6s var(--ease), opacity .6s; } .rg-big img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); } .rg-big.worn { transform: translateY(-8px) scale(.9); opacity: .55; } .rg-text { max-width: 30ch; margin: 0 auto 16px; text-align: center; font: 600 1.45rem/1.3 var(--hand); color: var(--plum); filter: blur(4px); transition: filter .7s ease; user-select: none; } .rg-text.sharp { filter: none; user-select: text; } /* the sound toggle, top right */ .sound-btn { padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .72rem; letter-spacing: .06em; cursor: pointer; } .sound-btn.off { color: var(--muted); border-color: var(--muted); text-decoration: line-through; } .top { align-items: center; } .top > p.mono { margin-left: auto; } /* headphones: a little ariana */ .ari { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 14px; } .ari-now { margin: 0; min-height: 1.2em; font-size: .72rem; color: var(--ink-2); text-align: center; } .ari-now a { color: var(--plum); } /* apartment fob: tap it on the reader on the door handle and the door swings open */ .apt { position: relative; width: min(360px, 100%); height: 270px; margin: 10px auto 4px; transition: height .7s cubic-bezier(.5,0,.25,1); } .apt-frame { position: absolute; left: 6%; top: 0; bottom: 0; width: 56%; border: 3px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; background: #E9D7C9; padding: 8px 8px 0; perspective: 700px; box-shadow: 4px 0 0 var(--ink); } .apt-frame::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: 0; height: 3px; background: var(--ink); } .apt-in { position: absolute; inset: 8px 8px 0; overflow: hidden; border-radius: 2px; } .apt-in img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 30% 60%; } .apt-door { position: absolute; inset: 8px 8px 0; background: #8E4A62; border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0; transform-origin: 0 50%; transition: transform .8s cubic-bezier(.5,0,.25,1); display: flex; flex-direction: column; gap: 9%; padding: 14% 14% 0; } .apt-panel { display: block; height: 32%; border: 2px solid rgba(58,38,38,.55); border-radius: 3px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.08); } .apt-num { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); font-size: .7rem; color: #F6E3B4; letter-spacing: .1em; } .apt-lock { position: absolute; right: 9%; top: 44%; width: 22px; height: 64px; border: 2px solid var(--ink); border-radius: 11px; background: linear-gradient(#E4E6EA, #B9BDC4); display: flex; flex-direction: column; align-items: center; padding-top: 5px; } .apt-reader { width: 13px; height: 13px; border-radius: 50%; background: #2B2B30; display: grid; place-items: center; } .apt-reader i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #6A8FD8; transition: background .15s, border-color .15s, box-shadow .15s; } .apt.ok .apt-reader i { background: #4FD27A; border-color: #4FD27A; box-shadow: 0 0 10px 3px rgba(79,210,122,.75); } .apt-handle { position: absolute; top: 34px; right: 7px; width: 34px; height: 8px; border: 2px solid var(--ink); border-radius: 4px; background: linear-gradient(#EDEEF0, #A9ADB4); transform-origin: 100% 50%; transition: transform .2s .1s; } .apt.open .apt-handle { transform: rotate(-24deg); } .apt.open .apt-door { transform: rotateY(68deg); } .apt-fob { position: absolute; right: 6%; bottom: 18%; width: 72px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 3; transition: transform .5s cubic-bezier(.4,1.2,.5,1); animation: apt-bob 2.4s ease-in-out infinite; } .apt-fob svg { width: 100%; height: auto; display: block; } .apt-fob[style*="translate"] { animation: none; } @keyframes apt-bob { 50% { translate: 0 -5px; } } .apt-say { text-align: center; color: var(--plum); font-size: 1.35rem; margin: 12px 0 2px; min-height: 1.4em; } @media (max-width: 760px) { .stats b { font-size: 1.35rem; } } @media (prefers-reduced-motion: reduce) { .apt-door, .apt-fob, .apt-handle { transition: none; animation: none; } } /* book corners: tap the bottom right to turn forward, bottom left to go back. they curl up a little when you hover. */ .bk-corner { position: absolute; bottom: 6px; z-index: 2; width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer; } .bk-corner.r { right: 6px; } .bk-corner.l { left: 6px; } .bk-corner::after { content: ""; position: absolute; bottom: 0; width: 18px; height: 18px; transition: width .2s, height .2s; box-shadow: -2px -2px 5px rgba(0,0,0,.12); } .bk-corner.r::after { right: 0; border-radius: 6px 0 0 0; background: linear-gradient(135deg, #F3EAD8 50%, #EFE6D6 50%); } .bk-corner.l::after { left: 0; border-radius: 0 6px 0 0; background: linear-gradient(225deg, #F3EAD8 50%, #EFE6D6 50%); box-shadow: 2px -2px 5px rgba(0,0,0,.12); } .bk-corner:hover::after, .bk-corner:focus-visible::after { width: 30px; height: 30px; } .bk-corner:focus-visible { outline: 2px dashed var(--plum); outline-offset: -4px; } /* sketchbook: closed, it's the pink strathmore cover; open, a spiral-bound spread with a piece on each page and my notes underneath */ .skb { width: min(680px, 100%); margin: 10px auto 4px; perspective: 1600px; } .skb-cover { display: block; width: min(250px, 66%); margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .25s; } .skb-cover:hover { transform: rotate(-2deg) translateY(-3px); } .skb-cover svg { width: 100%; height: auto; display: block; } .skb-open { display: none; position: relative; grid-template-columns: 1fr 22px 1fr; background: #F6C5D2; border: 2.5px solid var(--ink); border-radius: 8px; padding: 7px; box-shadow: 0 18px 30px -16px rgba(40,20,20,.5); } .skb.open .skb-cover { display: none; } .skb.open .skb-open { display: grid; animation: bk-in .5s cubic-bezier(.2,.8,.2,1); } .skb-page { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 380px; padding: 16px 14px 30px; background: #FBF8F1; background-image: radial-gradient(rgba(120,90,60,.05) 1px, transparent 1.2px); background-size: 6px 6px; } .skb-page.l { border-radius: 4px 0 0 4px; box-shadow: inset -12px 0 16px -12px rgba(0,0,0,.3); } .skb-page.r { border-radius: 0 4px 4px 0; box-shadow: inset 12px 0 16px -12px rgba(0,0,0,.3); } .skb-page.blank > * { visibility: hidden; } .skb-art { position: relative; margin: 6px 0 12px; } .skb-art img { display: block; max-width: 100%; max-height: 230px; width: auto; height: auto; border: 1.5px solid rgba(58,38,38,.35); box-shadow: 2px 3px 0 rgba(58,38,38,.12); } .skb-page.l .skb-art { transform: rotate(-1.6deg); } .skb-page.r .skb-art { transform: rotate(1.4deg); } .skb-tape { position: absolute; left: 50%; top: -9px; width: 54px; height: 16px; margin-left: -27px; background: rgba(242,141,180,.5); transform: rotate(-3deg); } .skb-t { margin: 0; font-family: var(--hand); font-size: clamp(1.25rem, 3.6vw, 1.7rem); line-height: 1; color: var(--plum); text-align: center; } .skb-n { margin: 6px 0 0; font-family: var(--hand); font-size: clamp(.95rem, 2.8vw, 1.2rem); line-height: 1.2; color: #3A2626; text-align: center; transform: rotate(-.6deg); } .skb-pg { position: absolute; bottom: 9px; font-size: .66rem; color: var(--muted); } .skb-page.l .skb-pg { left: 14px; } .skb-page.r .skb-pg { right: 14px; } .skb-spiral { background: repeating-linear-gradient(transparent 0 7px, #9EA3AA 7px 10px, transparent 10px 16px); border-left: 2px dotted rgba(58,38,38,.35); border-right: 2px dotted rgba(58,38,38,.35); background-color: #EDE6DA; } .skb-leaf { position: absolute; top: 7px; bottom: 7px; left: calc(50% + 11px); right: 7px; background: #FBF8F1; border-radius: 0 4px 4px 0; transform-origin: -11px 50%; opacity: 0; pointer-events: none; box-shadow: inset 10px 0 14px -10px rgba(0,0,0,.3); z-index: 1; } .skb-leaf.go.fwd { animation: bk-turn .55s ease-in-out; } .skb-leaf.go.back { animation: bk-turn-back .55s ease-in-out; } .skb-open .bk-corner.r { right: 7px; bottom: 7px; } .skb-open .bk-corner.l { left: 7px; bottom: 7px; } .skb-open .bk-corner.r::after { background: linear-gradient(135deg, #EFE9DD 50%, #F6C5D2 50%); } .skb-open .bk-corner.l::after { background: linear-gradient(225deg, #EFE9DD 50%, #F6C5D2 50%); } .skb-say { text-align: center; color: var(--plum); font-size: 1.3rem; margin: 12px 0 0; } @media (max-width: 760px) { .skb-open { grid-template-columns: 1fr 14px 1fr; padding: 5px; } .skb-page { min-height: 300px; padding: 12px 8px 26px; } .skb-art img { max-height: 150px; } .skb-leaf { left: calc(50% + 7px); transform-origin: -7px 50%; } } @media (prefers-reduced-motion: reduce) { .skb-leaf.go { animation: none; } .skb.open .skb-open { animation: none; } } /* walking in: the doorway grows into the whole frame, you walk toward the bed, and land on it */ .apt.inside { height: min(540px, 140vw); } .apt-walk { position: absolute; inset: 0; z-index: 5; overflow: hidden; border: 3px solid var(--ink); border-radius: 16px; background: #EFE6DC; opacity: 0; pointer-events: none; clip-path: inset(0 38% 0 6% round 6px); transition: clip-path .7s cubic-bezier(.5,0,.25,1), opacity .25s; } .apt.inside .apt-walk { opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0 round 16px); } .apt-walk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .aw-room { object-position: 30% 60%; transform-origin: 32% 62%; transition: transform 1.5s cubic-bezier(.45,0,.6,1) .3s, opacity .6s 1.2s; } .apt.inside .aw-room { transform: scale(2.2); opacity: 0; } .aw-bed { opacity: 0; transform: scale(1.15); transition: opacity .7s 1.1s, transform 1.4s ease-out 1.1s; } .apt.inside .aw-bed { opacity: 1; transform: none; } .apt.cuddled .aw-bed { animation: apt-snug 1.2s ease-in-out; } @keyframes apt-snug { 40% { transform: scale(1.04) translateY(4px); } } @media (prefers-reduced-motion: reduce) { .apt, .apt-walk, .aw-room, .aw-bed { transition: none; } .apt.cuddled .aw-bed { animation: none; } } /* the comb, drawn: canvas hair that takes a few strokes to smooth out */ .hair canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hair:not(.dragging) .hair-comb:not([style*="top"]) { animation: comb-hint 2.4s ease-in-out infinite; } .hair .hair-comb { top: 30%; transition: opacity .4s; } .hair.dragging .hair-comb { transition: none; } .hair-comb.snag { animation: comb-snag .45s; } @keyframes comb-hint { 0%, 100% { top: 30%; } 50% { top: 40%; } } @keyframes comb-snag { 20% { translate: -6px -3px; } 40% { translate: 6px 2px; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } } .hair-meter { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 6px; border-radius: 99px; background: rgba(255,251,248,.6); overflow: hidden; } .hair-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--plum); transition: width .3s; } .hair.braided .hair-meter { opacity: 0; } @media (prefers-reduced-motion: reduce) { .hair .hair-comb, .hair-comb.snag { animation: none !important; } } /* tap to pay: a little terminal, an approved chime, and a running receipt */ .tap { display: grid; justify-items: center; gap: 10px; margin-top: 12px; } .tap-term { position: relative; width: 150px; height: 92px; border: 2.5px solid var(--ink); border-radius: 14px; background: #2B2B30; box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; } .tap-scr { padding: 6px 12px; border-radius: 6px; background: #C9E7D2; color: #1F3B2A; font-size: .78rem; min-width: 96px; text-align: center; transition: background .2s; } .tap-ico { position: absolute; right: 10px; top: 4px; color: #9EA3AA; font-size: .8rem; letter-spacing: -2px; transform: rotate(-90deg); } .tap.tapping .tap-term { animation: tap-bump .6s ease-in-out; } .tap.paid .tap-scr { background: #7FD69B; } @keyframes tap-bump { 40% { transform: translateY(-4px) rotate(-2deg); } } .tap-head { margin: 4px 0 0; font-size: .7rem; color: var(--muted); } .tap-log { list-style: none; margin: 0; padding: 0; width: min(340px, 100%); max-height: 180px; overflow: auto; } .tap-log li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 2px; border-bottom: 1px dashed rgba(58,38,38,.2); font-size: .85rem; animation: tap-in .35s ease-out; } .tap-log b { font: 500 .8rem var(--mono); } @keyframes tap-in { from { opacity: 0; transform: translateY(-6px); } } .tap-sum { margin: 0; } @media (prefers-reduced-motion: reduce) { .tap.tapping .tap-term, .tap-log li { animation: none; } } /* medici: go get her a coffee, and there she is with it */ .medici-pic { position: relative; width: min(260px, 78%); margin: 14px auto 4px; padding: 10px 10px 8px; background: #FFFDF8; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-2deg); } .medici-pic img { display: block; width: 100%; height: auto; } .medici-pic figcaption { margin-top: 6px; text-align: center; font-size: 1.3rem; color: var(--plum); } .medici-cup { position: absolute; left: 50%; bottom: 40%; font-size: 2rem; opacity: 0; pointer-events: none; } .medici-pic.drop { animation: medici-drop .6s cubic-bezier(.3,1.4,.5,1) both; } .medici-pic.drop .medici-cup { animation: medici-carry .9s ease-in-out both; } @keyframes medici-drop { from { opacity: .2; transform: translateY(-24px) rotate(6deg) scale(.9); } } @keyframes medici-carry { 0% { opacity: 1; transform: translate(-260px, -60px) rotate(-12deg); } 70% { opacity: 1; transform: translate(-50%, 0) rotate(4deg); } 100% { opacity: 0; transform: translate(-50%, 10px); } } /* speeding ticket: exhibit A, me on my first set of wheels */ .tk-pic { width: min(240px, 72%); margin: 16px auto 4px; padding: 10px 10px 8px; background: #FFFDF8; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(2deg); } .tk-pic img { display: block; width: 100%; height: auto; } .tk-pic figcaption { margin-top: 6px; text-align: center; font-size: 1.25rem; line-height: 1.1; color: var(--plum); } /* iPad: Netflix and Prime Video, both mid-way through couch potato hani */ .ipad-view.tv { color: #F2F2F2; } .ipad-view.nf { background: #141414; } .ipad-view.pv { background: #0F171E; } .ipad-view.tv .back { color: #9CC3FF; } .ipad-flat .ipad-view.tv .back { background: rgba(20,20,20,.92); border-bottom-color: rgba(255,255,255,.1); } .tv-who { margin: 28px 0 14px; text-align: center; font-size: 1.2rem; } .tv-prof { display: grid; justify-items: center; gap: 6px; margin: 0 auto; padding: 0; border: 0; background: none; color: #ccc; cursor: pointer; font-size: .85rem; } .tv-prof span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 6px; background: #F28DB2; color: #fff; font: 700 1.8rem var(--hand); } .tv-prof:hover span { outline: 2px solid #fff; } .ipad-view.tv .tv-head, .ipad-view.tv .tv-who, .ipad-view.tv .tv-t { color: #F2F2F2; } .tv-head { margin: 10px 0 6px; font-weight: 600; font-size: .85rem; } .tv-card { position: relative; display: grid; gap: 4px; width: 150px; padding: 0; border: 0; background: none; color: #eee; text-align: left; cursor: pointer; font: inherit; } .tv-card img { width: 150px; height: 96px; object-fit: cover; object-position: 50% 30%; border-radius: 4px; display: block; } .tv-card b { font-weight: 500; font-size: .75rem; } .tv-prog, .tv-bar { display: block; height: 3px; background: rgba(255,255,255,.25); border-radius: 2px; } .tv-prog i, .tv-bar i { display: block; width: 37%; height: 100%; border-radius: inherit; background: #E50914; } .pv .tv-prog i, .pv .tv-bar i { background: #1A98FF; } .tv-play { position: relative; } .tv-play img { width: 100%; max-height: 230px; object-fit: contain; background: #000; border-radius: 6px; display: block; } .tv-play .tv-bar { margin-top: 6px; } .tv-t { margin: 10px 0 2px; font: 600 1rem var(--sans, system-ui); } .tv-s { margin: 0; font-size: .75rem; color: #aaa; } /* wallet: every card stands upright in its slot, long side down, like mine really do. the card turns 90°, so the bank cards (vertical designs) read upright and the license + ID sit sideways. sliding "up" is the card's own -x now. */ .vw .vslot .card { rotate: 90deg; transform-origin: 50% 50%; transform: translateX(calc(-5% * var(--dir, 1))); } .vw .vslot .card:hover { transform: translateX(-12%); } .vw .vslot .card.picked, .vw .vslot .card.picked:hover { rotate: 90deg !important; } /* wallet, closer to the real one: deeper raspberry leather with a fine grain, crisp pocket edges, and the cards only peek a little */ .vpanel, .vgusset, .vflap { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px) !important; } .vslot .pocket { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.14), 0 -3px 6px -3px rgba(0,0,0,.45); } .vw .vslot .card { transform: translateX(-1%); } .vw .vslot .card:hover { transform: translateX(-9%); } /* sketchbook: opening it doesn't change its size. it stays exactly as tall as the cover and gets twice as wide (two pages + the spiral). */ .skb { --w: min(250px, 42vw); --sp: 18px; width: auto; } .skb-cover { width: var(--w); } .skb-open { width: calc(var(--w) * 2 + var(--sp)); height: calc(var(--w) * 356 / 280); margin: 0 auto; grid-template-columns: 1fr var(--sp) 1fr; grid-template-rows: 100%; padding: 5px; box-sizing: border-box; } .skb-page { min-height: 0; height: 100%; overflow: hidden; padding: calc(var(--w) * .06) calc(var(--w) * .05) calc(var(--w) * .1); } .skb-art { margin: 4px 0 calc(var(--w) * .035); } .skb-art img { max-height: calc(var(--w) * .62); } .skb-tape { width: calc(var(--w) * .2); height: calc(var(--w) * .06); margin-left: calc(var(--w) * -.1); top: calc(var(--w) * -.035); } .skb-t { font-size: calc(var(--w) * .085); } .skb-n { font-size: calc(var(--w) * .056); margin-top: 3px; } .skb-pg { font-size: calc(var(--w) * .042); bottom: calc(var(--w) * .03); } .skb-leaf { top: 5px; bottom: 5px; right: 5px; left: calc(50% + var(--sp) / 2); transform-origin: calc(var(--sp) / -2) 50%; } .skb-open .bk-corner { width: calc(var(--w) * .2); height: calc(var(--w) * .2); } .skb-open .bk-corner.r { right: 5px; bottom: 5px; } .skb-open .bk-corner.l { left: 5px; bottom: 5px; } @media (max-width: 760px) { .skb { --sp: 12px; } .skb-open { grid-template-columns: 1fr var(--sp) 1fr; padding: 4px; } .skb-page { min-height: 0; } .skb-art img { max-height: calc(var(--w) * .6); } .skb-leaf { left: calc(50% + var(--sp) / 2); transform-origin: calc(var(--sp) / -2) 50%; } } /* T.D.: the polaroid of him with amaira */ .td-pola { width: min(240px, 70%); margin: 18px auto 6px; padding: 10px 10px 4px; background: #fff; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--rose); transform: rotate(-3deg); } .td-pola img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } .td-pola figcaption { margin: 6px 0 2px; text-align: center; font-size: 1.4rem; color: var(--plum); } /* streaming apps: poster rows, plus couch potato hani as a picture-in-picture mini player */ .tv-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(92px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .tv-row::-webkit-scrollbar { display: none; } .tv-poster { flex: none; width: 100%; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #222; cursor: pointer; transition: transform .2s; } .tv-poster img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; } .tv-poster:hover { transform: scale(1.06); } .tv-yr { font-weight: 400; font-size: .75rem; color: #999; } .tv-pip-wrap { position: sticky; bottom: 14px; z-index: 4; height: 0; } .tv-pip { position: absolute; right: 4px; bottom: 0; width: min(46%, 300px); border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 14px 36px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); animation: tv-pip-in .45s cubic-bezier(.3,1.3,.5,1) both; } @keyframes tv-pip-in { from { transform: translateY(14px) scale(.92); opacity: 0; } } .tv-pip-go { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .tv-pip-go img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: 50% 30%; border-radius: 0; } .tv-pip b { position: absolute; left: 10px; bottom: 9px; margin: 0; font: 600 .62rem system-ui, sans-serif; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); } .tv-pip .tv-prog { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0; } .tv-pip-go::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; } .tv-pip-go b { z-index: 1; } .tv-pip-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: .9rem; line-height: 24px; cursor: pointer; } /* photo tiles: keep faces in frame. most of my photos are portraits with the face in the top third */ .app-view .grid img, .ig-grid img, .cam-vf img, .cam-thumb { object-position: 50% 18%; } /* clock: 100 alarms, 9:00 to 10:39, all on, none of them work */ .app-view:has(.clk) .clk-h { color: #fff; } .clk-row em { white-space: nowrap; } .clk-count { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: #F29B38; color: #000; font-size: .75rem; vertical-align: middle; } .clk-note { margin: -4px 0 6px; font-size: .72rem; color: #8A8A8E; } .clk-alarms { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #333; } .clk-al { display: flex; justify-content: space-between; align-items: center; padding: 7px 2px; border-bottom: 1px solid #262628; } .clk-al span { display: grid; } .clk-al em { font-style: normal; font-size: 1.6rem; font-weight: 300; line-height: 1.1; } .clk-al em small { margin-left: 3px; font-size: .9rem; } .clk-al > span > small { font-size: .7rem; color: #8A8A8E; } .clk-tg { position: relative; flex: none; width: 42px; height: 25px; padding: 0; border: 0; border-radius: 99px; background: #34C759; cursor: pointer; } .clk-tg::after { content: ""; position: absolute; top: 2px; right: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .clk-tg.nope { animation: clk-nope .4s; } @keyframes clk-nope { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } .clk-end { margin: 10px 0 4px; text-align: center; font-size: .72rem; color: #8A8A8E; } /* gift cards: the hidden face must not catch touches, or the foil can't be scratched */ /* gift cards, take two: one big flat card, flips in 2D so the foil always works */ .g2 { display: grid; justify-items: center; gap: 14px; margin: 14px 0 4px; } .g2-stage { perspective: 900px; padding: 8px 0; } .g2-card { --rx: 0deg; --ry: 0deg; --sx: 50%; --sy: 30%; position: relative; display: block; width: min(330px, 84vw); aspect-ratio: 85.6 / 54; padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out, scale .18s ease-in; filter: drop-shadow(0 18px 22px rgba(58,38,38,.28)) drop-shadow(0 3px 4px rgba(58,38,38,.18)); } .g2-card.flipping { scale: 0 1; } .g2-card.is-back { transform: none; cursor: default; } .g2-card:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; } .g2-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; overflow: hidden; } .g2-front::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15); z-index: 3; pointer-events: none; } .g2-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--sx) var(--sy), rgba(255,255,255,.75), transparent 45%), linear-gradient(115deg, transparent 30%, rgba(255,214,235,.35) 45%, rgba(190,230,255,.3) 55%, transparent 70%); } .g2-chip { position: absolute; left: 7%; bottom: 8%; z-index: 1; font: 600 .55rem var(--sans, system-ui); letter-spacing: .18em; opacity: .7; } .g2-word { position: relative; z-index: 1; } .g2-tag { position: absolute; z-index: 1; top: 64%; font-size: .55rem; letter-spacing: .45em; } /* aritzia: warm cream card stock with a pink satin ribbon */ .g2-aritzia .g2-face { background: radial-gradient(130% 100% at 25% 15%, #FBF6EE, #E9DDCC); color: #2A2426; } .g2-aritzia .g2-word { font: 400 1.6rem/1 Georgia, 'Times New Roman', serif; letter-spacing: .34em; margin-left: .34em; } .g2-aritzia .g2-tag { font: italic 400 .62rem Georgia, serif; letter-spacing: .12em; color: #8C7B6B; } .g2-bow { position: absolute; right: -6%; top: 0; height: 100%; z-index: 1; } /* chanel: black quilted leather and a white camellia */ .g2-chanel .g2-face { background: linear-gradient(160deg, #1C1C20, #060607 75%); color: #F5F3EF; } .g2-quilt { position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(45deg, transparent 0 21px, rgba(255,255,255,.07) 21px 22px), repeating-linear-gradient(-45deg, transparent 0 21px, rgba(255,255,255,.07) 21px 22px); } .g2-chanel .g2-word { font: 700 1.7rem/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .34em; margin-left: .34em; } .g2-chanel .g2-tag { font-family: 'Helvetica Neue', Arial, sans-serif; color: #CFCBC4; } .g2-camellia { position: absolute; right: 7%; top: 9%; width: 22%; z-index: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); } /* sephora: glossy black and white stripes */ .g2-sephora .g2-face { background: #0B0B0C; color: #0B0B0C; } .g2-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #0B0B0C 0 12px, #FAFAFA 12px 24px); } .g2-stripes::after { content: ""; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(255,255,255,.35), transparent 40%); } .g2-sephora .g2-word { background: #FAFAFA; padding: 9px 18px 9px 24px; font: 700 1.25rem/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .42em; box-shadow: 0 0 0 2px #0B0B0C; } .g2-sephora .g2-chip { color: #0B0B0C; background: #FAFAFA; padding: 2px 6px; opacity: 1; } /* the back */ .g2-back { display: grid; grid-template-rows: auto 1fr; place-items: stretch; background: #FAF7F3; color: #2A2426; } .g2-chanel .g2-back { background: #141416; color: #EEE; } .g2-mag { display: block; height: 20%; margin-top: 6%; background: linear-gradient(#1B1B1B, #34343A); } .g2-bk { display: flex; flex-direction: column; gap: 5px; padding: 8px 14px 10px; text-align: left; font: 500 .62rem var(--sans, system-ui); } .g2-bk b { font-size: .62rem; letter-spacing: .14em; } .g2-bk small { opacity: .8; } .g2-scratch { position: relative; display: block; height: 42px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #FFF4F7, #FDE3EC); color: #7A2E4A; border: 1px dashed rgba(122,46,74,.35); } .g2-chanel .g2-scratch { background: linear-gradient(135deg, #2A2A2E, #1A1A1D); color: #F4D9E3; border-color: rgba(255,255,255,.2); } .g2-bal { position: absolute; inset: 0; display: grid; place-items: center; font: 600 .8rem var(--hand); font-size: 1.15rem; } .g2-foil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='11' fill='%23E9C46A' stroke='%23A8842E' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='6.5' fill='none' stroke='%23C9A24A' stroke-width='1.2'/%3E%3C/svg%3E") 14 14, crosshair; transition: opacity .5s; } .g2-scratch.done .g2-foil { opacity: 0; pointer-events: none; } .g2-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .g2-row .gc-bar { width: 58%; } .g2-sparks { position: absolute; left: 50%; top: 50%; pointer-events: none; } .g2-sparks i { position: absolute; width: 8px; height: 8px; margin: -4px; background: #F4B6C8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: g2-spark .9s ease-out var(--d) forwards; } .g2-sparks i:nth-child(odd) { background: #F2D27A; } @keyframes g2-spark { from { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 1; } to { transform: rotate(var(--a)) translateY(-46px) scale(1); opacity: 0; } } /* the little cards underneath */ .g2-picks { display: flex; gap: 12px; } .g2-pick { position: relative; width: 78px; aspect-ratio: 85.6 / 54; padding: 0; border: 0; border-radius: 7px; background: none; cursor: pointer; opacity: .55; transform: translateY(0); transition: opacity .2s, transform .2s; box-shadow: 0 4px 8px rgba(58,38,38,.2); } .g2-pick .g2-face { border-radius: 7px; font-size: 26%; } .g2-pick .g2-word { font-size: .5rem !important; padding: 2px 5px 2px 7px !important; } .g2-pick .g2-tag, .g2-pick .g2-camellia { display: none; } .g2-pick:hover { opacity: .85; transform: translateY(-3px); } .g2-pick.on { opacity: 1; transform: translateY(-4px); outline: 2px solid var(--plum); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .g2-card { transition: none; } .g2-sparks { display: none; } } .g2 { user-select: none; -webkit-user-select: none; } /* the student ID is a horizontal card: turn it the other way so it faces right like my real one */ .vw .vslot .card.id, .vw .vslot .card.id.picked, .vw .vslot .card.id.picked:hover { rotate: -90deg !important; --dir: -1; } /* closed and open are the same height: opening only makes it longer, like the real trifold */ .vw-closed { top: 0; bottom: 0; width: auto; height: 100%; transform: translateX(-50%); } .vw-closed svg { width: auto; height: 100%; display: block; } .vw.open .vw-closed { transform: translateX(-50%) scale(.96); } /* nudge: the zip pocket is easy to miss */ .vzip-hint { position: absolute; left: -1%; top: -34px; z-index: 6; white-space: nowrap; font-size: 1.15rem; color: var(--plum); opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; pointer-events: none; } .vzip-hint span { display: inline-block; animation: vzip-bob 1.1s ease-in-out infinite; } .vw.settled:not(.zip-open) .vzip-hint { opacity: 1; transform: none; } .vw.settled:not(.zip-open) .zpull { animation: vzip-tug 1.6s ease-in-out infinite; } @keyframes vzip-bob { 50% { transform: translateY(4px); } } @keyframes vzip-tug { 0%, 60%, 100% { translate: 0 0; } 75% { translate: 0 5px; } } @media (prefers-reduced-motion: reduce) { .vzip-hint span, .vw.settled:not(.zip-open) .zpull { animation: none; } } /* pink notebook: self-help notes */ .ecb-notes { width: 240px; } .ecb-notes.open { margin-left: 240px; } .sh-page { padding: 10px 12px 26px 36px; display: flex; flex-direction: column; gap: 2px; text-align: left; } .sh-n { margin: 0; font-size: .55rem; color: #9C8F95; text-align: right; } .sh-t { margin: 0; font-size: 1.25rem; line-height: 1.1; color: var(--ink); } .sh-t span { background: linear-gradient(transparent 55%, var(--hl) 55%); } .sh-a { margin: 0 0 4px; font: 500 .58rem var(--sans, system-ui); letter-spacing: .06em; text-transform: uppercase; color: #8A7C82; } .sh-page ul { margin: 0; padding-left: 14px; font-size: .92rem; line-height: 1.12; color: #2C3E7A; } .sh-page li { margin: 2px 0; } .sh-me { margin: 4px 0 0; font-size: .95rem; line-height: 1.1; color: #C2366F; } .sh-nav { position: absolute; right: 8px; bottom: 6px; display: flex; gap: 4px; } .sh-nav button { width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font-size: .9rem; line-height: 1; cursor: pointer; } .sh-nav button:hover { background: #FBE6EC; } .sh-toc { padding: 12px 12px 10px 18px; display: flex; flex-direction: column; text-align: left; } .sh-toc ol { margin: 4px 0 0; padding-left: 16px; font-size: 1rem; line-height: 1.15; color: #2C3E7A; } .sh-toc li { margin: 3px 0; } .sh-toc button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted rgba(44,62,122,.4); } .sh-sig { margin: auto 0 0; font-size: .9rem; color: #C2366F; } @media (max-width: 760px) { .ecb-notes { width: min(44vw, 230px); } .ecb-notes.open { margin-left: min(44vw, 230px); } .sh-page { padding: 8px 9px 26px 34px; } .sh-page ul { font-size: .8rem; } .sh-t { font-size: 1rem; } .sh-me { font-size: .8rem; } .sh-toc ol { font-size: .85rem; } } .ecb-notes .sh-page { overflow-y: auto; scrollbar-width: none; } .scribble { position: relative; text-decoration: none; } .scribble::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 7px; transform: translateY(-50%) rotate(-4deg); background: repeating-linear-gradient(170deg, transparent 0 1px, currentColor 1px 3px); border-radius: 3px; } .apt.near .apt-reader i { border-color: #F28DB4; box-shadow: 0 0 10px 3px rgba(242,141,180,.7); } /* trunk flipbook sits on top of the photo while it plays */ .kshop-anim, .kshop-anim-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0 !important; pointer-events: none; background: #fff; } .kshop-photo.animating .kshop-anim, .kshop-photo.animating .kshop-anim-base { opacity: 1 !important; } .kshop-anim { z-index: 2; } .kshop-anim-base { z-index: 1; } .kshop-photo .bbb-tag { z-index: 3; } /* pads: the note is big and centered, front and center. folded, it slides off to the side. */ .pd.reading .pd-note { left: 6%; right: 6%; top: 4%; width: auto; transform: rotate(-1.2deg); } .pd-l { font-size: clamp(1.05rem, 3.9vw, 1.25rem); } .pd.read:not(.reading) .pd-note { right: -16%; top: 6%; left: auto; width: 118px; height: 118px; } .pd.read:not(.reading) .pd-folded { font-size: 2.4rem; } /* a real pad wrapper: same size as the pad, folded in thirds into a little square. top third unfolds first, then the bottom. */ .pd-back, .pd-flap { display: none; } .pd-tri { position: absolute; inset: 3% 16%; z-index: 2; perspective: 900px; pointer-events: none; } .pd-f { position: absolute; left: 0; right: 0; height: 33.4%; border: 2.5px solid var(--ink); backface-visibility: visible; transition: transform .55s cubic-bezier(.5,0,.3,1); background: repeating-linear-gradient(90deg, #F39A6B 0 14px, #F7B48C 14px 22px, #EE8A58 22px 30px); } .pd-f::before { content: ""; position: absolute; inset: 5px; border: 2px dashed rgba(255,255,255,.55); border-radius: 6px; } .pd-f1 { top: 0; border-radius: 22px 22px 4px 4px; transform-origin: 50% 100%; transform: rotateX(-180deg); z-index: 3; } .pd-f2 { top: 33.3%; border-radius: 6px; z-index: 1; box-shadow: 4px 4px 0 var(--ink); background: linear-gradient(160deg, #1E3A7A, #2F5BB0); } /* the little label on the folded packet: "take care", along the bottom. it goes away once you start unfolding */ .pd-label { position: absolute; left: 0; right: 0; top: 33.3%; height: 33.4%; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6%; font: italic 700 1.3rem Georgia, serif; color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(120,50,20,.35); transition: opacity .2s; pointer-events: none; } .pd.unfold1 .pd-label, .pd.opened .pd-label { opacity: 0; } .pd-f3 { bottom: 0; border-radius: 4px 4px 22px 22px; transform-origin: 50% 0; transform: rotateX(180deg); z-index: 2; } .pd .pd-tab { top: -2px; z-index: 4; } /* the pad is the full size of the open wrapper and stuck flat onto it */ .pd-inside { inset: 3% 16%; opacity: 0; transition: opacity .3s; z-index: 3; } .pd.unfold1 .pd-f1 { transform: rotateX(0deg); } .pd.opened .pd-f3 { transform: rotateX(0deg); } .pd.unfold1 .pd-f2, .pd.opened .pd-f2 { background: repeating-linear-gradient(90deg, #F39A6B 0 14px, #F7B48C 14px 22px, #EE8A58 22px 30px); box-shadow: none; } .pd.opened .pd-inside { opacity: 1; transition-delay: .45s; } .pd.reading .pd-tri { opacity: .35; } /* dyson airstrait */ .as-stage { position: relative; display: grid; place-items: center; margin: 6px 0 4px; } .as-big { width: min(124px, 32vw); } .dy-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; margin: 6px 0 8px; } .dy-zoom { display: grid; justify-items: center; gap: 6px; } .dy-cap, .dy-read { margin: 0; font-size: .68rem; color: var(--muted); text-align: center; } .as-zoom { width: min(118px, 34vw); } .aw-zoom { width: min(190px, 52vw); } .as-zoom svg, .aw-zoom svg { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 2px 10px rgba(59,21,36,.18); } .as-btn, .aw-btn { cursor: pointer; outline: none; } .as-btn circle:first-child { transition: fill .15s; } .as-btn:hover circle:first-child, .as-btn:focus-visible circle:first-child { fill: #FBE1DA; } .as-btn:focus-visible circle:first-child, .aw-btn:focus-visible rect:nth-child(2) { stroke: var(--plum); stroke-width: 1.6; } .as-btn:active, .aw-btn:active { opacity: .8; } .as-btn.pulse circle:first-child { animation: as-pulse 1s ease-in-out infinite; } @keyframes as-pulse { 50% { fill: #FFF3EF; stroke: #F0703F; stroke-width: 1.6; } } .as-ask { animation: as-blink 1.1s steps(2, start) infinite; } @keyframes as-blink { to { opacity: .35; } } .as-spin { animation: as-spin .5s linear infinite; } @keyframes as-spin { to { transform: rotate(360deg); } } .aw-glow { animation: as-pulse-o 1.4s ease-in-out infinite; } /* the power button slides up its slot to turn on, and back down to turn off */ .aw-pw.slid-up { animation: aw-slide-up .28s cubic-bezier(.3,1.4,.5,1); } .aw-pw.slid-down { animation: aw-slide-down .28s cubic-bezier(.3,1.4,.5,1); } @keyframes aw-slide-up { from { transform: translateY(12px); } } @keyframes aw-slide-down { from { transform: translateY(-12px); } } @keyframes as-pulse-o { 50% { opacity: .35; } } .as-stage.blowing .as-air i { animation-duration: var(--blow, 1s); } .as-stage[data-heat="0"] .as-air i { background: linear-gradient(transparent, rgba(240,96,62,.6), transparent); } .as-stage[data-heat="1"] .as-air i { background: linear-gradient(transparent, rgba(242,150,120,.55), transparent); } .as-stage[data-heat="2"] .as-air i { background: linear-gradient(transparent, rgba(90,150,230,.6), transparent); } @media (prefers-reduced-motion: reduce) { .as-ask, .as-spin, .aw-glow, .as-btn.pulse circle:first-child { animation: none; } } .as-big svg { display: block; width: 100%; height: auto; } .as-big .as-arm { transition: transform .45s cubic-bezier(.3,1.3,.5,1); } .as-air { position: absolute; left: 50%; top: 4%; width: 120px; height: 60%; transform: translateX(-50%); pointer-events: none; } .as-air i { position: absolute; left: calc(var(--k, 0) * 1%); width: 2px; height: 34px; border-radius: 2px; background: linear-gradient(transparent, rgba(56,224,210,.55), transparent); opacity: 0; } .as-air i:nth-child(1) { left: 6%; } .as-air i:nth-child(2) { left: 16%; top: 20%; } .as-air i:nth-child(3) { left: 26%; top: 50%; } .as-air i:nth-child(4) { left: 74%; } .as-air i:nth-child(5) { left: 84%; top: 25%; } .as-air i:nth-child(6) { left: 94%; top: 55%; } .as-air i:nth-child(7) { left: 10%; top: 70%; } .as-air i:nth-child(8) { left: 90%; top: 78%; } .as-air i:nth-child(9) { left: 20%; top: 85%; } .as-stage.blowing .as-air i { animation: as-blow var(--blow, 1s) linear infinite; } .as-air i:nth-child(odd) { animation-delay: .35s !important; } .as-air i:nth-child(3n) { animation-delay: .7s !important; } @keyframes as-blow { 0% { opacity: 0; transform: translateY(20px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } } @media (prefers-reduced-motion: reduce) { .as-stage.blowing .as-air i { animation: none; opacity: .6; } } /* dyson airwrap */ .aw-big { width: min(80px, 22vw); } .aw-big svg { display: block; width: 100%; height: auto; } .aw-big.snap svg { animation: aw-snap .35s cubic-bezier(.3,1.6,.5,1); } @keyframes aw-snap { 0% { transform: translateY(-8px); } 100% { transform: none; } } .aw-heads { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 10px; } .aw-head { width: 56px; height: 64px; padding: 4px; border: 2px solid var(--line, #E6D8DC); border-radius: 12px; background: #fff; cursor: pointer; transition: transform .15s, border-color .15s; } .aw-head svg { width: 100%; height: 100%; display: block; } .aw-head:hover { transform: translateY(-2px); } .aw-head.on { border-color: var(--plum); box-shadow: 0 0 0 2px #F4C9D6; } .sunnies-pic { transform: rotate(-2deg); width: min(260px, 74%); } /* my actual chanels: chunky black square frames with clipped corners, a cream rim all the way around, cream CC on the temples */ .rz-fr { position: relative; flex: 1; padding: 3px; background: #EFE3CF; clip-path: polygon(9% 0, 91% 0, 100% 14%, 100% 86%, 91% 100%, 9% 100%, 0 86%, 0 14%); } .rz-fr::before { content: ""; position: absolute; inset: 3px; background: linear-gradient(160deg, #2A2222, #0C0A0A 55%, #1C1616); clip-path: polygon(9% 0, 91% 0, 100% 14%, 100% 86%, 91% 100%, 9% 100%, 0 86%, 0 14%); } .rz-fr .rz-lens { position: relative; margin: 11%; flex: none; border: 0; outline: 0; box-shadow: none; border-radius: 4px; clip-path: polygon(6% 0, 94% 0, 100% 10%, 100% 90%, 94% 100%, 6% 100%, 0 90%, 0 10%); } .rz-fr .rz-lens::after { background: linear-gradient(180deg, rgba(62, 30, 18, .55), rgba(150, 92, 58, .22) 70%, rgba(205, 150, 105, .12)); } .rz-fr::after { content: ""; position: absolute; left: 14%; top: 7%; width: 30%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); } .rz-bridge { width: 7%; height: 12px; margin-top: -24%; background: #0E0B0B; border-top: 2.5px solid #EFE3CF; border-radius: 8px 8px 3px 3px; flex: none; } .rz-temple { width: 9%; height: 16px; margin-top: -24%; background: #0E0B0B; border-top: 2px solid #EFE3CF; border-bottom: 2px solid #EFE3CF; display: grid; place-items: center; flex: none; } .rz-tl { border-radius: 6px 0 0 6px; border-left: 2px solid #EFE3CF; } .rz-tr { border-radius: 0 6px 6px 0; border-right: 2px solid #EFE3CF; } .rz-cc { width: 90%; height: auto; } .rz-rig { width: 54%; } /* the zipper pulls, on their own layer above the Stanley and the charms (same box, same bob as the bag) */ .zip-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; animation: bob 3.4s ease-in-out infinite; } .zip-layer svg { display: block; width: 100%; height: 100%; overflow: visible; } .zip-layer .pull { pointer-events: auto; } #bag.drop-here .zip-layer { transform: scale(1.03); transition: transform .2s; } @media (prefers-reduced-motion: reduce) { .zip-layer { animation: none; } } /* the gift cards, tucked in the wallet's zip pocket next to the Medici card */ .gc-peek { position: absolute; left: 14%; bottom: 52%; width: 21%; padding: 0; border: 0; background: none; cursor: pointer; z-index: 4; opacity: 0; pointer-events: none; transform: translate(10%, 60%) rotate(-4deg) scale(.6); transform-origin: 0 100%; transition: transform .6s var(--ease), opacity .3s; transition-delay: .35s; } .gc-peek svg { width: 100%; display: block; filter: drop-shadow(0 4px 5px rgba(59,21,36,.25)); } .vw.cash-out .gc-peek { opacity: 1; pointer-events: auto; transform: translate(-6%, -46%) rotate(8deg); } .gc-peek:hover { filter: brightness(1.04); } .gc-peek:focus-visible { outline: 3px dashed var(--plum); outline-offset: 3px; border-radius: 8px; } .vw.medici-out .gc-peek, .vw.fold-left .gc-peek, .vw.fold-right .gc-peek { visibility: hidden; } /* pads lead with the why: Cadence */ .pad-why { max-width: 52ch; margin: 4px 0 14px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 14px; background: #FBE3EA; font-size: .92rem; line-height: 1.45; } .pad-why a { color: var(--plum); } .ca { position: relative; width: min(460px, 100%); margin: 10px auto 0; padding-top: 120px; } .ca-pouch { position: relative; z-index: 2; pointer-events: none; } .ca-pouch svg { display: block; width: 100%; } .ca-things { position: absolute; left: 8%; right: 8%; top: 0; z-index: 1; display: flex; justify-content: space-around; align-items: flex-end; height: 200px; } .ca-thing { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer; animation: ca-up .6s var(--ease) both; animation-delay: calc(var(--k) * 90ms + 150ms); } .ca-thing .ca-art { display: block; width: 74px; transition: transform .25s var(--ease); } .ca-thing .ca-art svg { width: 100%; display: block; } .ca-thing .hand { font-size: 1.05rem; color: var(--plum); white-space: nowrap; } .ca-thing:hover .ca-art, .ca-thing:focus-visible .ca-art { transform: translateY(-10px) rotate(-3deg); } .ca-thing:focus-visible { outline: none; } .ca-thing:focus-visible .ca-art { outline: 3px dashed var(--plum); outline-offset: 4px; border-radius: 8px; } @keyframes ca-up { from { transform: translateY(90px); opacity: 0; } } .rcpts { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 18px 0; } .rcpt { width: 190px; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 22px; background: #FBFAF6; border: 2px solid var(--ink); font: 400 .74rem/1.4 var(--mono); color: var(--ink); transform: rotate(var(--r)); box-shadow: 0 10px 18px -12px rgba(59,21,36,.5); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; } .rcpt b { font: 700 .95rem var(--mono); letter-spacing: .2em; text-align: center; } .rcpt small { text-align: center; color: var(--muted); margin-bottom: 8px; border-bottom: 1.5px dashed var(--line); padding-bottom: 8px; } .rcpt i { margin-top: 8px; text-align: center; font: 600 1rem var(--hand); color: var(--plum); } .rcpt .link { margin-top: 8px; font: 600 .78rem var(--mono); color: var(--plum); text-decoration: underline; background: none; border: 0; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .ca-thing { animation: none; } } .ca-pouch .ca-peek { display: none; } .ca { padding-top: 150px; } .ca-things { height: 236px; left: 4%; right: 4%; } .ca-thing .ca-art { width: 96px; } .ca-thing[data-ca="todo"] .ca-art { width: 84px; } .rcpt span { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--line); padding-bottom: 2px; } .rcpt span em { font-style: normal; } .rcpt span em + em { text-align: right; white-space: nowrap; } /* panic: the car shakes and the lights flash with every honk */ .kshop-photo.panic img { animation: car-panic .62s steps(4) infinite; } .kshop-photo.panic::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse 20% 7% at 20% 47%, rgba(255,60,30,.85), transparent 70%), radial-gradient(ellipse 20% 7% at 80% 47%, rgba(255,60,30,.85), transparent 70%), radial-gradient(ellipse 50% 40% at 50% 55%, rgba(255,190,60,.18), transparent 75%); animation: car-lights .62s steps(1) infinite; } @keyframes car-panic { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-6px, 1px) rotate(-.8deg); } 50% { transform: translate(5px, -1px) rotate(.7deg); } 75% { transform: translate(-3px, 0) rotate(-.4deg); } } @keyframes car-lights { 0% { opacity: 1; } 55% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .kshop-photo.panic img { animation: none; } .kshop-photo.panic::after { animation: none; opacity: .8; } } /* the pad doesn't fade: it's stuck to the wrapper, so each flap uncovers (and covers) its third of it */ .pd-inside { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.5,0,.3,1); } .pd.unfold1 .pd-inside { clip-path: inset(0 0 66.6% 0); } .pd.opened .pd-inside { opacity: 1; clip-path: inset(0 0 0 0); transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .pd-inside { transition: none; } } /* the pad wrapper, take three: it folds sideways in thirds like my LV wallet. closed it's a square (the right flap on top, tape tab on its edge). tap: the right flap swings open. tap again: the left one does. the pad is stuck to the wrapper, so each flap carries its third of it */ .pd { aspect-ratio: auto; width: min(560px, 96%); min-height: 300px; } .pd .pd-pad { inset: auto 0; top: 50%; transform: translateY(-50%); height: auto; } .pd .pd-tri, .pd .pd-inside { display: none; } .pdw { position: relative; display: block; width: 100%; aspect-ratio: 3 / 1.1; perspective: 1100px; } .pdw-p { position: absolute; top: 0; bottom: 0; width: 33.4%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.5,0,.3,1); } .pdw-l { left: 0; transform-origin: 100% 50%; transform: rotateY(180deg); z-index: 2; } .pdw-m { left: 33.3%; z-index: 1; } .pdw-r { right: 0; transform-origin: 0 50%; transform: rotateY(-180deg); z-index: 3; } .pdw-in, .pdw-out { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 2.5px solid var(--ink); overflow: hidden; } .pdw-in { background: repeating-radial-gradient(circle at 30% 70%, #FBE4E2 0 10px, #F7D6D4 10px 12px); } .pdw-l .pdw-in { border-radius: 10px 0 0 10px; border-right-width: 1px; } .pdw-r .pdw-in { border-radius: 0 10px 10px 0; border-left-width: 1px; } .pdw-m .pdw-in { border-left-width: 1px; border-right-width: 1px; } .pdw-in svg, .pdw-out svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .pdw-out { transform: rotateY(180deg); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); } .pdw-tab { position: absolute; left: -2px; top: 38%; width: 34%; height: 13%; background: #FFFFFF; border: 1.5px solid #CFCAC0; border-left: 0; border-radius: 0 3px 3px 0; } .pd.unfold1 .pdw-r { transform: rotateY(0deg); } .pd.opened .pdw-l { transform: rotateY(0deg); } .pd:not(.unfold1) .pdw { filter: drop-shadow(4px 4px 0 var(--ink)); } .pd.reading .pdw { opacity: .35; } @media (prefers-reduced-motion: reduce) { .pdw-p { transition: none; } } .pd.read.unfold1:not(.reading) .pd-note { top: -22%; right: -10%; } /* "pull to unzip" sits on its own little pill so it never gets lost against the cash peeking out */ .vzip-hint { top: -40px; padding: 2px 12px 3px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); z-index: 8; } /* the strategy deck on my ipad: keynote, but make it mine */ .ipad-view.deckv { background: #2A2629; padding: 0 0 28px; display: flex; flex-direction: column; } .ipad-view.deckv .back { color: #F4C6D2; background: rgba(42,38,41,.92) !important; border-bottom-color: rgba(255,255,255,.08) !important; } .ipad-view.deckv .appq { color: #F4C6D2; margin: 6px 14px 0; font-size: 1rem; } .ipad-view.deckv ~ .ipad-homebar span { background: rgba(255,255,255,.6); } .deck { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 6px 14px 0; outline: none; container-type: inline-size; } .deck-bar { display: flex; justify-content: space-between; font-size: .66rem; color: rgba(255,255,255,.55); letter-spacing: .06em; } .deck-stage { --u: 1cqw; position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--paper); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); cursor: pointer; container-type: inline-size; } .sl { position: absolute; inset: 0; padding: calc(var(--u) * 5.5) calc(var(--u) * 6.5); display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); color: var(--ink); opacity: 0; transform: translateX(4%); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; overflow: hidden; } .sl.past { transform: translateX(-4%); } .sl.on { opacity: 1; transform: none; pointer-events: auto; } .sl-k { margin: 0; font: 500 calc(var(--u) * 1.7)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--plum); } .sl-h { margin: 0; font: 400 calc(var(--u) * 4.6)/1.08 var(--serif); letter-spacing: -.01em; } .sl-h em { color: var(--plum); } .sl-sub { margin: 0; font: 600 calc(var(--u) * 2.5)/1.25 var(--hand); color: var(--plum); } .sl-list { margin: .6cqw 0 0; padding-left: calc(var(--u) * 2.6); display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); font: 400 calc(var(--u) * 2.05)/1.35 var(--sans); } .sl-list li::marker { color: #E0568F; } .sl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 1.6); margin-top: .6cqw; } .sl-grid div { position: relative; padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.6) calc(var(--u) * 6.4); border: .3cqw solid var(--ink); border-radius: calc(var(--u) * 1.6); background: color-mix(in srgb, var(--c) 45%, #fff); display: flex; flex-direction: column; gap: .3cqw; } .sl-grid b { position: absolute; left: calc(var(--u) * 1.8); top: calc(var(--u) * 1.4); font: 600 calc(var(--u) * 3.2)/1 var(--serif); color: var(--plum); } .sl-grid strong { font: 600 calc(var(--u) * 2.3)/1.1 var(--serif); } .sl-grid span { font: 600 calc(var(--u) * 2.2)/1.15 var(--hand); color: var(--plum); } .sl-grid small { font: 400 calc(var(--u) * 1.45)/1.3 var(--sans); color: var(--ink-2); } .sl-table { width: 100%; border-collapse: collapse; font: 400 calc(var(--u) * 1.75)/1.3 var(--sans); margin-top: .6cqw; } .sl-table th { text-align: left; font: 500 calc(var(--u) * 1.4) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--plum); padding: 0 calc(var(--u) * 1) calc(var(--u) * 1) 0; border-bottom: .25cqw solid var(--ink); } .sl-table td { padding: calc(var(--u) * 1.3) calc(var(--u) * 1.2) calc(var(--u) * 1.3) 0; border-bottom: .15cqw dashed var(--line); vertical-align: top; } .sl-table td:first-child { font: 600 calc(var(--u) * 2)/1.2 var(--serif); } .sl-stats { display: flex; gap: calc(var(--u) * 2); } .sl-stats span { flex: 1; display: flex; flex-direction: column; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); border: .3cqw solid var(--ink); border-radius: calc(var(--u) * 1.4); background: #FBE3EA; font: 500 calc(var(--u) * 1.4) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--plum); } .sl-stats b { font: 600 calc(var(--u) * 4.4)/1 var(--serif); color: var(--ink); letter-spacing: 0; text-transform: none; } .sl-cover { justify-content: center; background: radial-gradient(circle at 85% 18%, #FBE3EA 0 16%, transparent 16.5%), radial-gradient(circle at 92% 90%, #D9C8F0 0 10%, transparent 10.5%), var(--paper); } .sl-cover .sl-h { font-size: calc(var(--u) * 7.4); } .sl-cover .sl-sub { font-size: calc(var(--u) * 3.2); } .sl-foot { margin: auto 0 0; font: 500 calc(var(--u) * 1.6) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .sl-links { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1.4); } .sl-links a { padding: calc(var(--u) * 1) calc(var(--u) * 2.2); border: .3cqw solid var(--ink); border-radius: 99px; background: #FBE3EA; box-shadow: .5cqw .5cqw 0 var(--ink); font: 500 calc(var(--u) * 2) var(--sans); color: var(--ink); text-decoration: none; } .sl-links a:hover { background: #F7CFDC; } .deck-nav { display: flex; align-items: center; justify-content: center; gap: 12px; } .deck-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: none; color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; } .deck-btn:disabled { opacity: .3; cursor: default; } .deck-btn:focus-visible, .deck-dot:focus-visible { outline: 2px solid #F4A7B9; outline-offset: 2px; } .deck-dots { display: flex; gap: 6px; } .deck-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.3); cursor: pointer; } .deck-dot[aria-current="true"] { background: #F4A7B9; transform: scale(1.3); } @media (prefers-reduced-motion: reduce) { .sl { transition: none; transform: none; } } /* fit the whole slide + controls inside the ipad screen, whatever its size */ .ipad-view.deckv { container-type: size; overflow: hidden; } .ipad-view.deckv .appq { display: none; } .ipad-view.deckv .deck-stage { width: min(100%, calc((100cqh - 128px) * 1.6)); align-self: center; } .ipad-view.deckv .deck-bar { width: min(100%, calc((100cqh - 128px) * 1.6)); align-self: center; } .sl-cover .sl-foot { position: absolute; left: calc(var(--u) * 6.5); bottom: calc(var(--u) * 5); margin: 0; } .deck-bar { align-items: center; gap: 10px; } .deck-bar span:first-child { margin-right: auto; } .deck-play { padding: 3px 10px; border: 1.5px solid #F4A7B9; border-radius: 99px; background: #F4A7B9; color: #2A2629; font: 600 .66rem var(--mono); letter-spacing: .06em; cursor: pointer; } .deck-play:hover { background: #F7CFDC; } /* presenting: full screen (or a full-window overlay where fullscreen isn't allowed) */ .deck.presenting { position: fixed; inset: 0; z-index: 1000; padding: 16px max(16px, 3vw) 20px; background: #1E1B1E; justify-content: center; gap: 14px; } .deck.presenting .deck-stage, .deck.presenting .deck-bar { width: min(100%, calc((100vh - 120px) * 1.6)) !important; align-self: center; } .deck.presenting .deck-bar { font-size: .78rem; } .deck:fullscreen { background: #1E1B1E; } /* presenting on a phone: the slide turns portrait and the type roughly doubles, so it's readable in your hand */ @media (max-width: 640px) { .deck.presenting .deck-stage { --u: 1.6cqw; aspect-ratio: 10 / 17; } .deck.presenting .sl { padding: calc(var(--u) * 7) calc(var(--u) * 6); } .deck.presenting .deck-stage, .deck.presenting .deck-bar { width: min(100%, calc((100vh - 120px) * .625)) !important; } .deck.presenting .sl-grid { grid-template-columns: 1fr; } .deck.presenting .sl-stats { flex-wrap: wrap; } .deck.presenting .sl-stats span { flex: 1 1 40%; } } /* nothing on the table (a tilted dyson, a name tag) should ever make the page wider than the phone */ html, body { overflow-x: clip; } /* a size container traps position: fixed, so let go of it while presenting */ .ipad-view.deckv:has(.deck.presenting) { container-type: normal; overflow: visible; } /* the brand lens: a teardown card on top of each branded thing */ .lens-btn { margin-left: 8px; } .lens-btn.on { background: var(--plum); border-color: var(--plum); color: var(--paper); } .brand-card { margin: 0 0 18px; padding: 14px 16px 12px; border: 2px solid var(--ink); border-radius: 14px; background: linear-gradient(135deg, #FBE3EA, #F3ECFA); box-shadow: 4px 4px 0 var(--ink); } .brand-card p { margin: 0; } .bc-k { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); } .bc-sig { margin-top: 6px !important; font: 400 1.25rem/1.2 var(--serif); color: var(--ink); } .bc-sig .mono { display: block; margin-bottom: 2px; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .bc-body { margin-top: 6px !important; font-size: .9rem; line-height: 1.5; color: var(--ink-2); } .bc-attr { margin-top: 10px !important; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .bc-attr b { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 99px; background: var(--plum); color: var(--paper); font-weight: 500; letter-spacing: .08em; } /* the header on a phone: name and major on one row, the two toggles on their own row under it */ .sound-btn { white-space: nowrap; } @media (max-width: 600px) { .top { flex-wrap: wrap; align-items: center; row-gap: 8px; } .top p { flex: 1; text-align: right; font-size: .66rem; } .top .sound-btn { font-size: .64rem; padding: 4px 9px; } .top .sound-btn:not(.lens-btn) { margin-left: auto; } } @media (max-width: 600px) { .top p { flex: 1 1 50%; } .top .sound-btn:not(.lens-btn) { order: 3; margin-left: auto; } .top .lens-btn { order: 4; margin-left: 0; } } /* deck: the brand wheel (eight slices) and the palette */ .sl-wheel { list-style: none; margin: calc(var(--u) * .6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.2); } .sl-wheel li { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * .3); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4); border: calc(var(--u) * .3) solid var(--ink); border-radius: calc(var(--u) * 1.4); background: #FBE3EA; } .sl-wheel li:nth-child(4n+2) { background: #F3ECFA; } .sl-wheel li:nth-child(4n+3) { background: #FBF3DA; } .sl-wheel li:nth-child(4n) { background: #E9F3EA; } .sl-wheel b { font: 600 calc(var(--u) * 2.6)/1 var(--serif); color: var(--plum); } .sl-wheel strong { font: 600 calc(var(--u) * 1.9)/1.1 var(--serif); } .sl-wheel span { font: 600 calc(var(--u) * 1.75)/1.15 var(--hand); color: var(--plum); } .sl-sw { display: flex; gap: calc(var(--u) * 1.4); margin: calc(var(--u) * 1) 0; } .sl-sw span { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * .6); font: 500 calc(var(--u) * 1.4) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .sl-sw i { display: block; height: calc(var(--u) * 7); border: calc(var(--u) * .3) solid var(--ink); border-radius: calc(var(--u) * 1.2); } @media (max-width: 640px) { .deck.presenting .sl-wheel { grid-template-columns: repeat(2, 1fr); } .deck.presenting .sl-sw { flex-wrap: wrap; } .deck.presenting .sl-sw span { flex: 1 1 28%; } } .sl-wheel small { margin-top: calc(var(--u) * .4); font: 400 calc(var(--u) * 1.45)/1.35 var(--sans); color: var(--ink-2); } @media (max-width: 640px) { .deck.presenting .sl-wheel[style] { grid-template-columns: 1fr !important; } } /* the note on the pad is a real sticky note: baby pink, square, a lot smaller than the pad, stuck on at a tilt */ .pd-folded, .pd-open { background: #FFDCE6; border: 0; box-shadow: 0 1px 0 rgba(0,0,0,.06), 3px 7px 12px -4px rgba(118,52,78,.4); } .pd-folded { background: linear-gradient(#F9C6D5 0 13%, #FFDCE6 13%); color: #C94F78; } .pd-open { background: linear-gradient(#F9C6D5 0 22px, #FFDCE6 22px); } .pd-tape { display: none; } .pd-note { width: 56px; height: 56px; } .pd.reading .pd-note, .pd.reading .pd-note { left: auto; right: 4%; top: 50%; width: min(250px, 50%); height: auto; aspect-ratio: 1; transform: translateY(-50%) rotate(3deg); } .pd.reading .pd-open { height: 100%; gap: 4px; padding: 28px 14px 12px; overflow: hidden; } .pd.reading .pd-l { font-size: clamp(.82rem, 2.6vw, .98rem); line-height: 1.15; } .pd.reading .pd-hi { font-size: clamp(1rem, 3vw, 1.15rem); } .pd.read:not(.reading) .pd-note { right: -4%; top: -10%; width: 64px; height: 64px; transform: rotate(10deg); } .pd.read:not(.reading) .pd-folded { font-size: 1.5rem; } .pd.read.unfold1:not(.reading) .pd-note { top: -14%; right: -4%; } .pd.reading .pdw { opacity: 1; } @media (max-width: 560px) { .pd.reading .pd-note { width: 62%; right: 0; } } /* someday ideas: the smoothed-out page holds a real list you can help with */ .crumple { width: min(400px, 94%); aspect-ratio: 110 / 140; } .crumple .cr-ball { cursor: pointer; } .crumple:not(.open) .cr-flat { pointer-events: none; } .crumple.open .cr-ball { pointer-events: none; } .cr-flat > svg { position: absolute; inset: 0; width: 100%; height: 100%; } .cr-list { position: relative; align-self: stretch; justify-self: stretch; padding: 9% 7% 6% 25%; overflow-y: auto; font-family: var(--hand); color: #2C3E7A; text-align: left; } .cr-h { margin: 0 0 6px; font: 700 1.35rem var(--hand); } .cr-list ul { list-style: none; margin: 0; padding: 0; } .cr-list li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: start; padding: 3px 0; font-size: 1.12rem; line-height: 1.15; } .cr-box { width: 17px; height: 17px; margin-top: 2px; padding: 0; border: 2px solid #2C3E7A; border-radius: 4px; background: transparent; cursor: pointer; position: relative; } .cr-box:hover, .cr-list li.on .cr-box { background: #FBE3EA; border-color: #C2386E; } .cr-list li.done .cr-box::after { content: "✓"; position: absolute; left: 1px; top: -9px; font: 700 1.5rem var(--hand); color: #C2386E; } .cr-list li.done .cr-t { text-decoration: line-through; text-decoration-color: #C2386E; text-decoration-thickness: 2px; opacity: .7; } .cr-a { grid-column: 2; color: #C2386E; font-size: 1.02rem; } .cr-a:empty { display: none; } .cr-help { display: grid; gap: 4px; margin: 2px 0 8px 30px; } .cr-help label { font-size: .62rem; letter-spacing: .08em; color: #C2386E; text-transform: uppercase; } .cr-help span { display: flex; gap: 6px; } .cr-help input { flex: 1; min-width: 0; padding: 4px 2px; border: 0; border-bottom: 2px solid #C2386E; background: transparent; font: 600 1.1rem var(--hand); color: #C2386E; outline: none; } .cr-help button { flex: none; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #F4A7B9; font: 700 .95rem var(--hand); color: var(--ink); cursor: pointer; } .cr-send { display: inline-block; margin-top: 10px; font: 700 1.05rem var(--hand); color: #C2386E; } .cr-fold { display: block; margin-top: 10px; padding: 0; border: 0; background: none; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: #8A8090; text-decoration: underline; cursor: pointer; } @media (max-width: 480px) { .cr-list { padding-left: 22%; } .cr-list li { font-size: 1rem; } } /* canvas: one card per class */ .cv-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } button.cv-card { border: 0; padding: 0 0 8px; text-align: left; font: inherit; cursor: pointer; transition: transform .2s; } button.cv-card:hover { transform: translateY(-2px); } /* google calendar on my laptop: this week */ .gcal { font: 400 .72rem/1.2 system-ui, -apple-system, sans-serif; color: #3C4043; } .gcal-top { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .95rem; } .gcal-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; border: 2px solid #4285F4; border-top-width: 5px; font-size: .6rem; color: #4285F4; } .gcal-today { padding: 3px 10px; border: 1px solid #DADCE0; border-radius: 4px; background: #fff; font: 500 .7rem system-ui; cursor: pointer; } .gcal-top em { font-style: normal; font-size: .8rem; color: #3C4043; } .gcal-grid { display: grid; grid-template-columns: 34px repeat(5, 1fr); grid-template-rows: auto calc(var(--hrs) * 30px); } .gcal-hd { display: grid; justify-items: center; padding-bottom: 4px; border-bottom: 1px solid #DADCE0; font-size: .55rem; color: #70757A; } .gcal-hd b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 400 .95rem system-ui; color: #3C4043; } .gcal-hd.now small { color: #1A73E8; } .gcal-hd.now b { background: #1A73E8; color: #fff; } .gcal-times { display: grid; grid-template-rows: repeat(var(--hrs), 1fr); font-size: .5rem; color: #70757A; } .gcal-times span { transform: translateY(-5px); text-align: right; padding-right: 4px; } .gcal-day { position: relative; border-left: 1px solid #DADCE0; background: repeating-linear-gradient(#0000 0 29px, #E8EAED 29px 30px); } .gcal-day .gcal-ev { position: absolute; left: 2px; right: 3px; display: flex; flex-direction: column; gap: 1px; padding: 2px 4px; overflow: hidden; border: 1px solid #fff; border-radius: 4px; background: var(--c); color: #fff; text-align: left; font: inherit; cursor: pointer; } .gcal-day .gcal-ev b { font-size: .62rem; } .gcal-day .gcal-ev small { font-size: .52rem; opacity: .92; white-space: nowrap; } .gcal-day .gcal-ev:hover { filter: brightness(1.08); } .gcal-free { position: absolute; left: 0; right: 0; top: 40%; margin: 0; text-align: center; font-size: 1rem; color: #C2386E; transform: rotate(-6deg); } /* google docs on my laptop: the real to-do list */ .gdoc { margin: -10px; min-height: calc(100% + 20px); background: #F8F9FA; font-family: Arial, sans-serif; color: #202124; } .gdoc-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fff; border-bottom: 1px solid #E0E0E0; } .gdoc-ic { width: 16px; height: 21px; border-radius: 2px; background: #4285F4 linear-gradient(#fff 0 0) 4px 7px / 8px 1.5px no-repeat; box-shadow: inset 0 0 0 0 #fff; position: relative; } .gdoc-ic::after { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 5px; border-top: 1.5px solid #fff; border-bottom: 1.5px solid #fff; } .gdoc-top span:nth-child(2) { display: flex; flex-direction: column; } .gdoc-top b { font-weight: 400; font-size: .85rem; } .gdoc-top small { font-size: .58rem; color: #5F6368; } .gdoc-top em { margin-left: auto; padding: 4px 12px; border-radius: 999px; background: #C2E7FF; font: 500 .65rem Arial; font-style: normal; } .gdoc-page { width: min(92%, 420px); margin: 12px auto; padding: 22px 26px 28px; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.3); } .gdoc-page h3 { margin: 0 0 6px; font: 400 1.35rem Arial; } .gdoc-page h4 { margin: 12px 0 4px; font: 700 .78rem Arial; text-transform: lowercase; color: #5F6368; } .gdoc-li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .8rem; cursor: pointer; } .gdoc-li input { width: 14px; height: 14px; margin: 0; accent-color: #1A73E8; } .gdoc-li input:checked + span { text-decoration: line-through; color: #80868B; } .cr-flat > svg * { vector-effect: non-scaling-stroke; } .cr-flat > svg > path:first-child { stroke-width: 2.5; } .cr-list { padding-right: 11%; } /* the sticky note stays stuck on the pad's top-right corner, folded or not */ .pd:not(.reading) .pd-note, .pd.read:not(.reading) .pd-note, .pd.read.unfold1:not(.reading) .pd-note { left: auto; right: 7%; top: 13%; width: 62px; height: 62px; transform: rotate(8deg); } /* while it's folded, the pad packet is the big thing and the sticky note is the little thing stuck on it */ .pdw { transition: transform .5s cubic-bezier(.4,1.2,.5,1); } .pd:not(.unfold1) .pdw { transform: scale(1.75); } .pd.reading .pd-note { left: 50%; right: auto; top: 50%; width: min(200px, 54%); transform: translate(-22%, -38%) rotate(4deg); } .pd.reading .pd-open { padding: 24px 12px 10px; } .pd.reading .pd-l { font-size: clamp(.78rem, 2.4vw, .9rem); line-height: 1.1; } .pd.reading .pd-hi { font-size: 1.05rem; } .pd.reading .pd-sig { font-size: .9rem; } .pd:not(.reading):not(.unfold1) .pd-note { right: auto; left: 50%; top: 50%; transform: translate(70%, -150%) rotate(8deg); } .pd { transition: min-height .4s; } .pd:not(.unfold1) { min-height: 330px; } .pd:not(.unfold1) .pdw { transform: scale(1.6); } @media (max-width: 560px) { .pd:not(.unfold1) { min-height: 290px; } .pd:not(.unfold1) .pdw { transform: scale(1.9); } .pd.reading .pd-note { width: 58%; transform: translate(-30%, -40%) rotate(4deg); } } .gcal-day .gcal-ev { padding: 2px 3px; gap: 0; } .gcal-day .gcal-ev b { font-size: .58rem; white-space: nowrap; } .gcal-day .gcal-ev small { font-size: .5rem; overflow: hidden; text-overflow: ellipsis; } /* wallet: every card is the same real card size. the slot cards fill their panel (about 90% of its width, standing upright), and the Medici card + gift cards in the zip pocket match them exactly: long side = 1.42 × a panel = 42.6% of the wallet */ .vslot { container-type: inline-size; } .vw .vslot .card { left: 50%; right: auto; width: 142cqw; margin-left: -71cqw; top: 10cqw; padding: 5% 6%; } .vpanel { clip-path: inset(-400% -40% 0 -40%); } /* tall upright cards stay tucked inside the pocket, never poke out the bottom */ .medici-card { aspect-ratio: 1.586; } .medici-peek { width: 42.6%; left: -1%; bottom: 74%; } .gc-peek { width: 61.7%; left: 24%; bottom: 72%; } .vw.cash-out .medici-peek { transform: translate(-6%, 0) rotate(-6deg); } .vw.cash-out .gc-peek { transform: translate(0, 0) rotate(3deg); } .vw.cash-out.medici-out .medici-peek { transform: translate(-2%, -14%) rotate(-2deg); } .vw.cash-out { margin-top: clamp(130px, 24vw, 210px); } .vslot .pocket { bottom: -2.5px; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.14), inset 0 -2.5px 0 var(--ink), 0 -3px 6px -3px rgba(0,0,0,.45); } /* jewelry box: the little velvet square lifts out with the necklace, like taking the whole tray piece out */ .jw-slot.up { background: radial-gradient(circle at 50% 40%, #A44A66, #8A3854); box-shadow: inset 0 2px 6px rgba(0,0,0,.25), 0 16px 22px -10px rgba(40,20,20,.45); } /* the car, peeling out: rev (squat + shake), burnout smoke out of both exhausts, skid marks, a fishtail, and gone */ .kshop-photo .skid, .kshop-photo .smk { position: absolute; pointer-events: none; opacity: 0; } .kshop-photo .skid { z-index: 1; bottom: 5%; width: 10%; height: 22%; border-radius: 45% 45% 20% 20%; background: linear-gradient(to top, rgba(28,24,26,.55), rgba(28,24,26,.25) 60%, rgba(28,24,26,0)); } .kshop-photo .skid.l { left: 19%; transform: skewX(-10deg); } .kshop-photo .skid.r { right: 19%; transform: skewX(10deg); } .kshop-photo .smk { z-index: 3; top: 58%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(205,203,208,.95) 0, rgba(225,223,228,.6) 42%, rgba(240,240,242,0) 70%); } .kshop-photo .smk.l { left: 0; } .kshop-photo .smk.r { right: 0; } .kshop-photo .smk.m { left: 30%; top: 50%; width: 40%; } .kshop-photo.vroom img[data-s="3"] { z-index: 2; transform-origin: 50% 85%; animation: car-peel 1.6s cubic-bezier(.5,0,.8,.4) forwards; } .kshop-photo.vroom .skid { animation: car-skid 2.8s ease-out .3s forwards; } .kshop-photo.vroom .smk { animation: car-smoke 2.4s ease-out .22s forwards; } .kshop-photo.vroom .smk.r { animation-delay: .28s; } .kshop-photo.vroom .smk.m { animation-delay: .55s; animation-duration: 2.2s; } .kshop-photo.vroom-back img[data-s="3"] { animation: car-back .9s cubic-bezier(.2,.8,.2,1); } @keyframes car-peel { 0% { transform: none; filter: none; opacity: 1; } 6% { transform: translate(-.7%, 1%) scaleY(.982); } 11% { transform: translate(.7%, 1.2%) scaleY(.978); } 16% { transform: translate(-.6%, 1%) scaleY(.982); } 21% { transform: translate(.5%, .8%) scaleY(.985); } 30% { transform: translate(0, -2%) rotate(-3deg) scale(.9); filter: none; } 44% { transform: translate(-7%, -9%) rotate(4deg) scale(.66); filter: blur(.4px); } 60% { transform: translate(6%, -15%) rotate(-2.5deg) scale(.42); filter: blur(1px); } 80% { transform: translate(-2%, -20%) rotate(1deg) scale(.18); filter: blur(1.5px); opacity: 1; } 100% { transform: translate(0, -23%) scale(.03); filter: blur(2px); opacity: 0; } } @keyframes car-back { from { transform: translate(0, -23%) scale(.03); opacity: 0; filter: blur(2px); } 40% { opacity: 1; } to { transform: none; opacity: 1; filter: none; } } @keyframes car-smoke { 0% { opacity: 0; transform: scale(.25); } 12% { opacity: .95; transform: scale(.8); } 40% { opacity: .85; transform: translateY(-10%) scale(2); } 100% { opacity: 0; transform: translateY(-26%) scale(3.4); } } @keyframes car-skid { 0% { opacity: 0; clip-path: inset(100% 0 0 0); } 18% { opacity: 1; clip-path: inset(0); } 70% { opacity: .85; } 100% { opacity: 0; clip-path: inset(0); } } @media (prefers-reduced-motion: reduce) { .kshop-photo.vroom img, .kshop-photo .skid, .kshop-photo .smk { animation: none !important; } } /* my ideas journal, open: self-help books + talks on the inside cover (left), my notes on the page (right). it grows as it opens so both pages read */ .jb { width: var(--jw); transition: transform .9s cubic-bezier(.45,.05,.25,1), width .9s cubic-bezier(.45,.05,.25,1); } .jb.open { --jw: min(310px, 45vw); } .jb-back { cursor: default; padding: 7%; } .jb-sheet { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 8% 6% 5%; background: #FFFBF6; border: 1.5px solid #E2B9C7; border-radius: 3px; box-shadow: 0 2px 4px rgba(58,38,38,.12); container-type: inline-size; overflow: hidden; } .jb-h { margin: 0 0 4cqw; font: 600 3.6cqw/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #C2386E; text-align: center; } .jb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4cqw; overflow-y: auto; min-height: 0; } .jb-list li { display: flex; align-items: center; gap: 2cqw; } .jb-pick { flex: 1; display: flex; align-items: center; gap: 3cqw; min-width: 0; padding: 2.4cqw 3cqw; border: 1.5px solid transparent; border-radius: 3cqw; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s; } .jb-pick:hover, .jb-pick:focus-visible { background: #FBE3EA; outline: none; } .jb-pick.on { background: #FBE3EA; border-color: #C2386E; } .jb-ico { flex: none; width: 8cqw; font-size: 5.4cqw; text-align: center; color: #C2386E; } .jb-pick b { display: block; font: 700 5.4cqw/1.1 var(--hand); color: #1F2D5A; } .jb-pick small { display: block; margin-top: .6cqw; font: 500 3.4cqw/1.2 var(--sans); color: #8A7F90; } .jb-go { flex: none; display: grid; place-items: center; width: 8.5cqw; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--ink); background: #F4A7B9; color: var(--ink); font: 700 4.4cqw/1 var(--sans); text-decoration: none; } .jb-go:hover, .jb-go:focus-visible { background: #C2386E; color: #fff; } .jb-shut { margin: auto auto 0; padding: 1cqw 4cqw; border: 0; background: none; font: 600 3.4cqw var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8A7F90; text-decoration: underline; cursor: pointer; } .jb-page { container-type: inline-size; } .jb-lines { overflow-y: auto; } .jb-lines p { margin: 0; } .jb-lines p + p::before { content: "· "; color: #C2386E; } .jb-nt { font-weight: 700; color: #C2386E; text-decoration: underline; text-decoration-color: #F4A7B9; text-decoration-thickness: 3px; } .jb-empty { color: #B9B2C6; } .jb-link { display: inline-block; margin-top: 4px; font: 700 1rem/22px var(--hand); color: #C2386E; } @media (max-width: 560px) { .jb-lines { font-size: .92rem; line-height: 20px; background-image: repeating-linear-gradient(transparent 0 19px, rgba(110,150,210,.35) 19px 20px); } .jb-link { line-height: 20px; } } .jb-lines p.jb-me { color: #C2386E; } .jb-lines p.jb-me::before { content: none; } .jb-list { flex: 1 1 0; gap: 1.2cqw; align-content: start; } .jb-pick { padding: 1.8cqw 3cqw; } .jb-shut { flex: none; margin-top: 2cqw; } /* ---------- my laptop's chrome: 74 tabs, one of them is playing music ---------- */ #lap-clock.playing::before { content: "♪ "; animation: cnote .6s ease-in-out infinite alternate; display: inline-block; } @keyframes cnote { to { transform: translateY(-2px); } } .cwin { --w: 60%; position: absolute; width: var(--w); left: calc(1% + (98% - var(--w)) * var(--x, .5)); height: 52%; display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.18); box-shadow: 0 12px 30px rgba(0,0,0,.28); font-size: .6rem; color: #1C1C1E; font-family: system-ui, -apple-system, sans-serif; } .cwin-top { display: flex; align-items: flex-end; gap: 8px; padding: 5px 6px 0; background: #DEE1E6; } .cwin-top .fwin-tl { align-self: center; flex-shrink: 0; padding-bottom: 3px; } .cwin-top .fwin-tl button { width: 14px; height: 14px; } .ctabs { display: flex; flex: 1; min-width: 0; overflow: hidden; } .ctab { flex: 1 1 110px; min-width: 15px; max-width: 110px; display: flex; align-items: center; gap: 3px; padding: 3px 4px; border-radius: 6px 6px 0 0; overflow: hidden; white-space: nowrap; } .ctab + .ctab { box-shadow: -1px 0 0 #B9BEC5; } .ctab.on { background: #fff; box-shadow: none; } .ctab i, .cwin-page i { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; color: #fff; font-style: normal; font-size: 5px; font-weight: 700; display: grid; place-items: center; } .ctab b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; } .csnd { flex-shrink: 0; border: 0; padding: 0; background: none; font-size: 9px; line-height: 1; cursor: pointer; } .cwin-url { margin: 0; padding: 3px 8px; border-bottom: 1px solid #E2E0DE; color: #8A8A8E; font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cwin-url span { background: #F1F3F4; border-radius: 10px; padding: 1px 8px; color: #3C4043; } .cwin-page { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .cwin-page b { font-size: .72rem; display: flex; } .cwin-page i { width: 16px; height: 16px; font-size: 7px; } .cwin-page p { margin: 0; height: 6px; border-radius: 3px; background: #ECECEE; } .cwin-page p.short { width: 55%; } @media (max-width: 760px) { .cwin { --w: 74%; height: 48%; font-size: .5rem; } .cwin-page b { font-size: .6rem; } } /* ---------- personal branding 101: four zippers, four lessons, then you pack your own ---------- polished, not pastel: cream paper, black ink, one accent (burgundy). hairlines instead of boxes, no sticker shadows */ .b101-cta { margin: 14px 0 0; } .b101-cta .link { font: italic 400 1.15rem var(--serif); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; } .b101-cta .link:hover { color: var(--plum); border-color: var(--plum); } .bl { --ink: #1E100A; --acc: var(--plum); --rule: #DCBDB6; } /* same espresso, plum and hairline as suhanitiwari.com */ .bl-track { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 30px; border-bottom: 1px solid var(--rule); } .bl-dot { padding: 0 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font-size: .64rem; color: var(--muted); cursor: pointer; } .bl-dot:hover { color: var(--ink); } .bl-dot.done { color: var(--ink); } .bl-dot.done::after { content: " ✓"; color: var(--acc); } .bl-dot[aria-current="step"] { color: var(--ink); border-bottom-color: var(--ink); } .bl-k { margin: 0 0 10px; color: var(--acc); font-size: .64rem; letter-spacing: .16em; } .bl-step h2 { max-width: 18ch; color: var(--ink); } .bl-step h2 em { color: var(--acc); } .bl-rule { margin: 8px 0 22px; max-width: 46ch; font: italic 400 1.2rem/1.45 var(--serif); color: var(--ink-2); } .bl-h { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; color: var(--ink); font-size: .62rem; letter-spacing: .18em; } .bl-h::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .bl-exs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); } .bl-ex { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px 14px; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-radius: 0; background: none; text-align: left; font-size: .86rem; line-height: 1.5; color: var(--ink-2); transition: background .2s; } .bl-ex:nth-child(3n) { border-right: 0; } button.bl-ex { cursor: pointer; } button.bl-ex:hover { background: var(--paper); } .bl-cap { font: italic 400 1rem/1.3 var(--serif); color: var(--ink); text-align: center; } button.bl-ex:hover .bl-cap { color: var(--acc); } .bl-art { width: 100%; height: 86px; display: grid; place-items: center; background: none; } .bl-art svg, .bl-art img { max-height: 72px; width: auto; max-width: 80%; } .bl-sw { width: 100%; height: 86px; display: flex; gap: 6px; align-items: stretch; } .bl-sw i { flex: 1; border: 1px solid var(--rule); } .bl-pal { cursor: default; } .bl-quiz { margin-top: 4px; } .bl-qq { margin: 0 0 14px; font: italic 400 1.3rem/1.35 var(--serif); color: var(--ink) !important; } .bl-opts { display: flex; flex-direction: column; border-top: 1px solid var(--rule); } .bl-opt { display: flex; gap: 14px; align-items: baseline; padding: 13px 4px; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; font-size: .95rem; color: var(--ink); transition: color .15s, padding .2s; } .bl-opt::before { content: counter(opt, upper-alpha); counter-increment: opt; font: 500 .62rem var(--mono); letter-spacing: .1em; color: var(--muted); } .bl-opts { counter-reset: opt; } .bl-opt:not(:disabled):hover { padding-left: 10px; color: var(--acc); } .bl-opt:disabled { cursor: default; color: var(--muted); } .bl-opt.right { color: var(--ink); font-weight: 500; } .bl-opt.right::after { content: "✓"; margin-left: auto; color: var(--acc); } .bl-opt.picked:not(.right) { text-decoration: line-through; text-decoration-color: var(--muted); } .bl-why { margin: 12px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--acc); font: italic 400 1.02rem/1.55 var(--serif); color: var(--ink) !important; } .bl-turn { margin-top: 28px; padding: 18px 0 0; border: 0; border-top: 2px solid var(--ink); background: none; } .bl-turn .bl-h { margin-top: 0; } .bl-turn .bl-h::after { display: none; } .bl-f { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; } .bl-f:last-child { margin-bottom: 0; } .bl-f > .hand { font: italic 400 1.05rem/1.3 var(--serif); color: var(--ink-2); } .bl-f input[type="text"] { width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; font: 400 1.05rem var(--sans); color: var(--ink); } .bl-f input[type="text"]::placeholder { color: #A8999A; } .bl-f input[type="text"]:focus { outline: none; border-bottom: 2px solid var(--acc); padding-bottom: 7px; } .bl-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .bl-col { flex-direction: row; align-items: center; gap: 14px; } .bl-col input { width: 44px; height: 28px; padding: 0; border: 1px solid var(--rule); border-radius: 6px; background: none; cursor: pointer; } .bl-map { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); } .bl-map li { border-bottom: 1px solid var(--rule); } .bl-map li:nth-child(odd) { border-right: 1px solid var(--rule); } .bl-map button { width: 100%; height: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; padding: 18px 16px; border: 0; background: none; text-align: left; cursor: pointer; font: 400 1.12rem/1.3 var(--serif); color: var(--ink); transition: background .2s; } .bl-map button:hover { background: var(--paper); } .bl-map b { grid-row: span 2; font: italic 400 2rem/1 var(--serif); color: var(--acc); } .bl-map .mono { color: var(--muted); font-size: .6rem; letter-spacing: .16em; } .bl-card { margin-top: 10px; padding: 26px 26px 22px; border: 1px solid var(--ink); border-top: 4px solid var(--me, var(--ink)); border-radius: 0; background: var(--paper); box-shadow: none; } .bl-stmt { margin: 8px 0 22px; font: 400 1.4rem/1.45 var(--serif); color: var(--ink) !important; } .bl-empty { font: italic 400 1.1rem/1.5 var(--serif); color: var(--muted) !important; } .bl-pockets { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); } .bl-pockets span { padding: 12px 12px 0 0; font-size: .82rem; line-height: 1.4; color: #A8999A; overflow-wrap: anywhere; } .bl-pockets span + span { padding-left: 12px; border-left: 1px solid var(--rule); } .bl-pockets span.in { color: var(--ink-2); } .bl-pockets b { display: block; margin-bottom: 4px; font: 500 .58rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); } .bl-acts .btn { border-radius: 999px; box-shadow: none; border-width: 1px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; } .bl-acts .btn.solid { background: var(--acc); border-color: var(--acc); color: #fff; } .bl-acts .btn:hover, .bl-acts .btn:active { transform: none; box-shadow: none; } .bl-acts .btn.solid:hover { background: #5E2940; border-color: #5E2940; } .bl-end { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--ink); } .bl-one { margin: 0 0 14px; font: 400 1.5rem/1.35 var(--serif); color: var(--ink) !important; } .bl-one em { color: var(--acc); } .bl-hire { margin: 0; font-size: .9rem; color: var(--ink-2); } .bl-hire a, .bl-hire .link { color: var(--ink); text-decoration-color: var(--acc); } .bl-nav { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 36px calc(clamp(18px, 3vw, 30px) * -1) calc(clamp(18px, 3vw, 30px) * -1); padding: 14px clamp(18px, 3vw, 30px); background: var(--paper); border-top: 1px solid var(--ink); } .bl-nav .btn { border-radius: 999px; box-shadow: none; border-width: 1px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; } .bl-nav .btn.solid { background: var(--acc); border-color: var(--acc); color: #fff; } .bl-nav .btn:hover, .bl-nav .btn:active { transform: none; box-shadow: none; } .bl-nav .btn.solid:hover { background: #5E2940; border-color: #5E2940; } .bl-nav .mono { color: var(--muted); font-size: .6rem; letter-spacing: .16em; text-align: center; } .bl-nav .btn:disabled { opacity: .3; cursor: default; } @media (max-width: 640px) { .bl-track { gap: 0 14px; } .bl-map { grid-template-columns: 1fr; } .bl-ex { padding: 12px 6px 10px; } .bl-art, .bl-sw { height: 56px; } .bl-art svg, .bl-art img { max-height: 50px; } .bl-cap { font-size: .86rem; } .bl-map li:nth-child(odd) { border-right: 0; } .bl-pockets { grid-template-columns: repeat(2, 1fr); } .bl-pockets span + span { padding-left: 0; border-left: 0; } .bl-pockets span:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--rule); } .bl-words { gap: 12px; } .bl-nav .btn { padding: 8px 12px; font-size: .68rem; } .bl-nav .mono { display: none; } .bl-card { padding: 20px 18px 18px; } .bl-stmt { font-size: 1.2rem; } } /* personal branding 101: your color shows up as a little swatch on your brand card */ .bl-me-sw { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--me); } .brand-card[aria-label="Lesson note"] { border: 0; border-left: 2px solid var(--plum); border-radius: 0; background: none; box-shadow: none; padding: 2px 0 2px 16px; } .bl .bl-me-sw { border-radius: 0; border-width: 1px; } /* the read: an outside take on the bag, same paper and ink as branding 101 */ .rd .bl-h { margin-top: 34px; } .rd-p { margin: 0 0 16px; max-width: 60ch; font-size: .98rem; line-height: 1.6; color: var(--ink-2); } .rd-after { margin-top: 16px; font: italic 400 1.05rem/1.5 var(--serif); color: var(--ink); } .rd-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); counter-reset: rd; } .rd-flow li { padding: 14px 14px 14px 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); counter-increment: rd; } .rd-flow li + li { padding-left: 14px; border-left: 1px solid var(--rule); } .rd-flow .mono, .rd-vs .mono, .rd-b .mono { display: block; margin-bottom: 6px; font-size: .58rem; letter-spacing: .16em; color: var(--acc); } .rd-flow .mono::before { content: counter(rd) " → "; } .rd-flow em { font-family: var(--serif); color: var(--ink); } .rd-vs { display: grid; grid-template-columns: 1fr 1.2fr 1fr; margin-top: 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .rd-vs p { margin: 0; padding: 14px 12px; font-size: .86rem; line-height: 1.45; color: var(--muted); } .rd-vs .mono { color: var(--muted); } .rd-vs .rd-me { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); font: italic 400 1.1rem/1.35 var(--serif); color: var(--ink); background: var(--paper); } .rd-vs .rd-me .mono { color: var(--acc); font-style: normal; } .rd-stack, .rd-zips { border-top: 1px solid var(--ink); } .rd-row { width: 100%; display: grid; grid-template-columns: 64px 150px 1fr; gap: 14px; align-items: center; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; transition: background .2s; } .rd-row:hover { background: var(--paper); } .rd-row .bl-art { height: 52px; } .rd-row .bl-art svg, .rd-row .bl-art img { max-height: 46px; } .rd-b b { font: italic 400 1.15rem/1.2 var(--serif); color: var(--ink); } .rd-row:hover .rd-b b { color: var(--acc); } .rd-sig { font-size: .88rem; line-height: 1.5; color: var(--ink-2); } .rd-zip .rd-sig { font: italic 400 1rem/1.45 var(--serif); color: var(--ink); } .rd-pairs { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); } .rd-pair { padding: 14px 12px 16px; border-bottom: 1px solid var(--rule); } .rd-pair:nth-child(odd) { border-right: 1px solid var(--rule); } .rd-two { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; } .rd-it { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; cursor: pointer; } .rd-it .bl-art { height: 60px; } .rd-it .bl-art svg, .rd-it .bl-art img { max-height: 54px; } .rd-it .bl-cap { font-size: .9rem; } .rd-it:hover .bl-cap { color: var(--acc); } .rd-x { font: italic 400 .9rem var(--serif); color: var(--muted); } .rd-line { margin: 10px 0 0; text-align: center; font: italic 400 .98rem/1.4 var(--serif); color: var(--ink); } @media (max-width: 640px) { .rd-flow { grid-template-columns: 1fr; } .rd-flow li { padding: 12px 0; } .rd-flow li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } .rd-vs { grid-template-columns: 1fr; } .rd-vs .rd-me { border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .rd-row { grid-template-columns: 48px 1fr; } .rd-row .rd-sig { grid-column: 1 / -1; } .rd-pairs { grid-template-columns: 1fr; } .rd-pair:nth-child(odd) { border-right: 0; } } .rd-sp { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); } .rd-sp-h { margin: 0; padding: 10px 12px 8px 0; font-size: .58rem; letter-spacing: .16em; color: var(--acc); border-bottom: 1px solid var(--rule); } .rd-sp-h + .rd-sp-h, .rd-sp-it:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--rule); } .rd-sp-h + .rd-sp-h { color: var(--muted); } .rd-sp-it { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; padding: 14px 12px 14px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; font-size: .86rem; line-height: 1.5; color: var(--ink-2); transition: background .2s; } .rd-sp-it:hover { background: var(--paper); } .rd-sp-it .bl-art { height: 48px; } .rd-sp-it .bl-art svg, .rd-sp-it .bl-art img { max-height: 44px; } .rd-sp-it b { display: block; margin-bottom: 3px; font: italic 400 1.05rem/1.25 var(--serif); color: var(--ink); } .rd-sp-it:hover b { color: var(--acc); } .rd-verdict { margin: 22px 0 14px; text-align: center; font: 400 1.3rem/1.4 var(--serif); color: var(--ink); } .rd-verdict em { color: var(--acc); } .rd-why { margin: 0; padding: 0 0 0 20px; font-size: .92rem; line-height: 1.55; color: var(--ink-2); } .rd-why li { margin-bottom: 8px; } .rd-why b { color: var(--ink); font-weight: 500; } @media (max-width: 640px) { .rd-sp-it { grid-template-columns: 1fr; font-size: .8rem; } .rd-sp-it .bl-art { justify-content: start; } }