/* ================================================================== ANIME ------------------------------------------------------------------ A desk by a window at night, as an illustration behind the whole page. The other skins draw their world in CSS; this one is a painting with the interface floating on it, so almost everything here is about getting out of the artwork's way - translucent panels, no borders competing with the drawing, and the scene's own lamp and mug left visible down the sides. Everything is driven off the palette below, so the whole skin can be re-tuned from one block instead of hunting hex codes through 400 lines. ================================================================== */ body.skin-anime { /* ---- palette ---- */ --a-night: #1a1638; /* what shows before the artwork loads */ --a-glass: rgba(24,21,54,.60); --a-glass-2: rgba(14,17,42,.78); --a-edge: rgba(168,186,255,.20); --a-edge-lit: rgba(200,216,255,.42); --a-text: #eaf0ff; --a-text-dim: #a6b6e0; --a-paper: #fbf5e9; /* the resume itself */ --a-paper-2: #f2e9d6; --a-ink: #1b2432; --a-ink-2: #4a4a52; --a-ink-dim: #868073; --a-blue: #2f7fd6; /* section rules, links, Edit buttons */ --a-blue-lit: #6c8bff; /* the selected resume, primary actions */ --a-violet: #8b6cf0; --a-pink: #ee6fa8; /* Export PDF, alternating timeline nodes */ --a-gold: #ffd98a; /* the moon, and nothing else */ /* A script face for the handwritten notes pinned around the room. System faces only - nothing here should reach out to a font CDN at page load. Anything without one of these falls back to the browser's cursive, which is close enough for two short lines. */ --a-hand: 'Segoe Script', 'Bradley Hand', 'Snell Roundhand', 'Brush Script MT', 'Comic Sans MS', cursive; /* Drawn decoration, held here so the long data URI is written once and referenced wherever it is needed. --a-sakura is a spray of blossom for the paper's corners; --a-drift is the loose petals tiled sparsely across it. */ --a-sakura: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160' viewBox='0 0 200 160'%3E%3Cg transform='translate(150,44) rotate(14) scale(1.25)'%3E%3Cg transform='rotate(0)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f5bdd2'/%3E%3C/g%3E%3Cg transform='rotate(72)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23fbd3e0'/%3E%3C/g%3E%3Cg transform='rotate(144)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f5bdd2'/%3E%3C/g%3E%3Cg transform='rotate(216)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23fbd3e0'/%3E%3C/g%3E%3Cg transform='rotate(288)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f5bdd2'/%3E%3C/g%3E%3Ccircle r='3.4' fill='%23fff3f7'/%3E%3Cg transform='rotate(0)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(186,92) rotate(-28) scale(1.0)'%3E%3Cg transform='rotate(0)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f5bdd2'/%3E%3C/g%3E%3Cg transform='rotate(72)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23fbd3e0'/%3E%3C/g%3E%3Cg transform='rotate(144)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f5bdd2'/%3E%3C/g%3E%3Cg transform='rotate(216)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23fbd3e0'/%3E%3C/g%3E%3Cg transform='rotate(288)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f5bdd2'/%3E%3C/g%3E%3Ccircle r='3.4' fill='%23fff3f7'/%3E%3Cg transform='rotate(0)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(112,96) rotate(40) scale(0.8)'%3E%3Cg transform='rotate(0)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f5bdd2'/%3E%3C/g%3E%3Cg transform='rotate(72)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23fbd3e0'/%3E%3C/g%3E%3Cg transform='rotate(144)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f5bdd2'/%3E%3C/g%3E%3Cg transform='rotate(216)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23fbd3e0'/%3E%3C/g%3E%3Cg transform='rotate(288)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f5bdd2'/%3E%3C/g%3E%3Ccircle r='3.4' fill='%23fff3f7'/%3E%3Cg transform='rotate(0)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Ccircle cy='-5.6' r='1.1' fill='%23e58bb0'/%3E%3C/g%3E%3C/g%3E%3Cg opacity='.85'%3E%3Cg transform='translate(74,42) rotate(35) scale(.85)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f7c6d8'/%3E%3C/g%3E%3Cg transform='translate(122,148) rotate(-50) scale(.7)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f7c6d8'/%3E%3C/g%3E%3Cg transform='translate(178,140) rotate(20) scale(.6)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f7c6d8'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23e9c98a' opacity='.9'%3E%3Cpath d='M64 96 65.4 102 71.4 103.4 65.4 104.8 64 110.8 62.6 104.8 56.6 103.4 62.6 102z'/%3E%3Cpath d='M96 24 97 28.4 101.4 29.4 97 30.4 96 34.8 95 30.4 90.6 29.4 95 28.4z'/%3E%3C/g%3E%3C/svg%3E"); --a-drift: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='340' viewBox='0 0 360 340'%3E%3Cg opacity='.5'%3E%3Cg transform='translate(48,62) rotate(28) scale(.75)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f6c7d9'/%3E%3C/g%3E%3Cg transform='translate(238,132) rotate(-42) scale(.62)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f6c7d9'/%3E%3C/g%3E%3Cg transform='translate(132,246) rotate(64) scale(.7)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f6c7d9'/%3E%3C/g%3E%3Cg transform='translate(322,286) rotate(-15) scale(.55)'%3E%3Cpath d='M0 0 C 6 -3 10 -10 8 -19 C 7.4 -22 5 -24 2.6 -22.6 L0 -20.4 L-2.6 -22.6 C-5 -24 -7.4 -22 -8 -19 C-10 -10 -6 -3 0 0 z' fill='%23f6c7d9'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23e6c489' opacity='.55'%3E%3Cpath d='M300 40 301.1 44.4 305.5 45.5 301.1 46.6 300 51 298.9 46.6 294.5 45.5 298.9 44.4z'/%3E%3Cpath d='M92 176 93.1 180.4 97.5 181.5 93.1 182.6 92 187 90.9 182.6 86.5 181.5 90.9 180.4z'/%3E%3C/g%3E%3C/svg%3E"); background-color: var(--a-night); /* Pages outside the studio paint their own gradient with the background shorthand. Setting only a colour here leaves that gradient sitting on top, so it has to be cancelled explicitly. */ background-image: none; color: var(--a-text); font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; } /* The artwork is a fixed layer of its own rather than a background on the body. background-attachment: fixed is sized against the document on iOS, so a long resume stretched the painting to several screens tall and cropped everything but a strip of desk. A fixed pseudo- element is sized against the viewport, which is what was wanted all along, and it scrolls correctly everywhere. The ?v= is a cache-buster. Overwrite the two .webp files in place and bump the number; without it the old artwork sits in browser caches for as long as the host's expiry header says. */ body.skin-anime:after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url('/resume/images/anime-desk.webp?v=2'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* ---- chrome ------------------------------------------------------ */ body.skin-anime .topbar { background: rgba(20,17,44,.62); border-bottom: 1px solid var(--a-edge); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Room for the tagline underneath the wordmark. */ body.skin-anime .studio .brand { align-items: flex-start; padding: 2px 0; } body.skin-anime .bn { display: inline-block; line-height: 1.15; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: #f4f7ff; } body.skin-anime .bn span { background: linear-gradient(92deg, var(--a-blue-lit) 0%, var(--a-violet) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Written under the name, the way it is on the sign-in art. */ /* Scoped to the studio. The wordmark is shared with every other page, and the dashboard is served for AllyDate as well - a Resume Moon tagline appearing under someone else's brand is not a small bug. */ body.skin-anime.studio .bn:after { content: "Build a brighter you \2726"; display: block; margin-top: 1px; font-family: var(--a-hand); font-size: 12.5px; font-weight: 400; letter-spacing: .01em; color: #cdd8ff; opacity: .85; -webkit-text-fill-color: #cdd8ff; } /* The mark is a real image, so the old CSS crescent was painting behind it and never showed. It only needs the lamp-light around it. No filter beyond the glow, on any skin. The mark stays blue everywhere - tinting it to match a skin's palette was tried and it read as a different product's logo. */ body.skin-anime .logo { background: transparent; border-radius: 50%; filter: drop-shadow(0 0 10px rgba(255,214,140,.55)); } /* ---- buttons ----------------------------------------------------- */ body.skin-anime .ghost, body.skin-anime .act, body.skin-anime .mini, body.skin-anime .go { font-size: 13.5px; font-weight: 600; letter-spacing: .01em; border-radius: 999px; background: rgba(255,255,255,.11); border: 1px solid rgba(200,212,255,.32); color: var(--a-text); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* ---- the look picker ---- */ /* The button is a .ghost, so it is already dressed by the rules below. Only the menu needs its own treatment: the same dark glass the panels use, so it reads as part of the room rather than a system dropdown pasted over it. */ body.skin-anime .skinmenu { background: linear-gradient(180deg, rgba(24,28,60,.97), rgba(14,18,40,.98)); border: 1px solid var(--a-edge); border-radius: 14px; box-shadow: 0 22px 40px -18px rgba(0,0,0,.95); } body.skin-anime .skinmenu-h { color: var(--a-text-dim); letter-spacing: .16em; } body.skin-anime .skinopt { color: var(--a-text); border-radius: 9px; } body.skin-anime .skinopt:hover { background: rgba(255,255,255,.11); } body.skin-anime .skinopt.on { background: linear-gradient(135deg, var(--a-blue-lit) 0%, var(--a-violet) 100%); color: #fff; } body.skin-anime .tick { color: #fff; } body.skin-anime .sw i { border-color: rgba(255,255,255,.3); } body.skin-anime .ghost:hover, body.skin-anime .act:hover, body.skin-anime .mini:hover, body.skin-anime .go:hover { background: rgba(255,255,255,.2); border-color: var(--a-edge-lit); } /* Primary actions take the same blue-to-violet as the selected resume, so one colour means "this is the live thing" everywhere on the page. */ body.skin-anime .act.key, body.skin-anime .act.live, body.skin-anime .go, body.skin-anime .mini.key { background: linear-gradient(135deg, var(--a-blue-lit) 0%, var(--a-violet) 100%); border-color: rgba(190,205,255,.75); color: #0e1330; box-shadow: 0 6px 18px -6px rgba(120,140,255,.75); } /* Export PDF is the one warm button in the bar. */ body.skin-anime .act.pdf { background: linear-gradient(135deg, #f78fc0 0%, #e0559a 100%); border-color: rgba(255,190,220,.8); color: #400f28; box-shadow: 0 6px 18px -6px rgba(224,85,154,.6); } body.skin-anime .act.danger { background: rgba(120,40,54,.55); border-color: rgba(255,150,170,.5); color: #ffc2cc; } body.skin-anime .acts-note { color: var(--a-text-dim); font-size: 13px; } /* ---- manga captions over the four actions ------------------------ Drawn in CSS on the real buttons rather than added to the markup, so no other skin has to know about them. Each bubble takes the colour of the button it belongs to instead of all four being comic-book red, which was the one loud thing left on a page that had otherwise gone quiet. One shared rule reads the colour from --a-bubble, so recolouring a bubble is a one-line change in the block just below. */ /* Only the padding, to make headroom for the bubbles. The bubbles are positioned against each button, not against this row, so it needs no position of its own - and setting one here is what stopped the action bar going fixed to the bottom of the phone. The base stylesheet does that inside a media query, which this rule out-specified at every width. */ body.skin-anime .acts { padding-top: 34px; } body.skin-anime #btnImprove, body.skin-anime #btnTailor, body.skin-anime #btnVoice, body.skin-anime .acts .pdf { position: relative; overflow: visible; } body.skin-anime #btnImprove { --a-bubble: #5b78ef; } body.skin-anime #btnTailor { --a-bubble: #8b6cf0; } body.skin-anime #btnVoice { --a-bubble: #2f96c8; } body.skin-anime .acts .pdf { --a-bubble: #d94f92; } body.skin-anime #btnImprove:before, body.skin-anime #btnTailor:before, body.skin-anime #btnVoice:before, body.skin-anime .acts .pdf:before { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); background: #fffdf7; color: var(--a-bubble); border: 2.5px solid var(--a-bubble); border-radius: 50% / 46%; padding: 3px 12px 4px; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.25; /* A soft drop instead of the hard offset block - the sharp shadow belonged with the red outline. */ box-shadow: 0 3px 8px -2px rgba(10,14,40,.55); } /* The tail: a small circle overlapping the bubble's lower edge. */ body.skin-anime #btnImprove:after, body.skin-anime #btnTailor:after, body.skin-anime #btnVoice:after, body.skin-anime .acts .pdf:after { content: ""; position: absolute; top: -8px; left: 38%; width: 11px; height: 11px; background: #fffdf7; border: 2.5px solid var(--a-bubble); border-radius: 50%; transform: rotate(20deg); } body.skin-anime #btnImprove:before { content: "\6539\5584"; } body.skin-anime #btnTailor:before { content: "\6C42\4EBA"; } body.skin-anime #btnVoice:before { content: "\58F0"; } body.skin-anime .acts .pdf:before { content: "\5370\5237"; } /* Nothing to hang a bubble on when the bar is fixed to the bottom of a phone, and the short labels say the same thing. */ @media (max-width: 860px) { body.skin-anime #btnImprove:before, body.skin-anime #btnTailor:before, body.skin-anime #btnVoice:before, body.skin-anime .acts .pdf:before, body.skin-anime #btnImprove:after, body.skin-anime #btnTailor:after, body.skin-anime #btnVoice:after, body.skin-anime .acts .pdf:after { display: none; } body.skin-anime .acts { padding-top: 10px; } } /* The bar the base stylesheet fixes to the foot of a phone is white, which is right for plain and wrong here. Given as its own block so it stays with the bubbles it belongs beside. */ @media (max-width: 860px) { body.skin-anime .acts { background: rgba(16,13,38,.94); border-top: 1px solid var(--a-edge); } body.skin-anime .acts .act { background: rgba(255,255,255,.11); border: 1px solid rgba(200,212,255,.32); } body.skin-anime .acts .act.key { background: linear-gradient(135deg, var(--a-blue-lit) 0%, var(--a-violet) 100%); border-color: rgba(190,205,255,.75); } body.skin-anime .acts .act.pdf { background: linear-gradient(135deg, #f78fc0 0%, #e0559a 100%); border-color: rgba(255,190,220,.8); } body.skin-anime .acts .act.danger { background: rgba(120,40,54,.7); border-color: rgba(255,150,170,.5); } } /* ---- the rail: sticky notes on the desk -------------------------- Small notes with the room showing between them - the point of the column is that it does not become a solid panel over the artwork. Colour cycles per resume, not per row: keying off :nth-child within a group made every card come out the same pink. */ body.skin-anime .rail { max-width: 232px; background: none; border: none; box-shadow: none; padding-right: 2px; } body.skin-anime .rail-h { color: var(--a-gold); letter-spacing: .18em; font-size: 11.5px; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.9); } /* Each group carries its own paper colour as variables, so the note, its lighter version notes and the stack under the open one all stay in the same family without repeating three gradients per colour. Colour cycles per resume, not per row: keying off :nth-child within a group made every card come out the same pink. */ body.skin-anime .rgroup { background: none; border: none; box-shadow: none; overflow: visible; --n1: #ffe37a; --n2: #ffd34a; --n3: #f5c231; --n-ink: #3d2c00; --ns1: #fff6c6; --ns2: #ffefa4; --ns3: #ffe680; --ns-ink: #4a3a05; --n-tilt: -.5deg; } body.skin-anime .rgroup:nth-of-type(3n) { --n1: #9ed6ff; --n2: #6cbcfb; --n3: #3f9ce6; --n-ink: #06263f; --ns1: #d8eeff; --ns2: #b9e0ff; --ns3: #93cdf7; --ns-ink: #06304f; --n-tilt: .6deg; } body.skin-anime .rgroup:nth-of-type(3n+1) { --n1: #ffb3d2; --n2: #ff92c0; --n3: #f56ba4; --n-ink: #4b0d2b; --ns1: #ffdcea; --ns2: #ffc4dd; --ns3: #ffa6c9; --ns-ink: #5a1234; --n-tilt: -.35deg; } body.skin-anime .v { position: relative; border-radius: 3px; margin-bottom: 7px; padding: 9px 12px; /* The paper is held in a variable so the open and hovered states can reuse it instead of restating three colour stops each. */ --n-bg: linear-gradient(168deg, var(--n1) 0%, var(--n2) 60%, var(--n3) 100%); background: var(--n-bg); color: var(--n-ink); box-shadow: 0 8px 16px -9px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.6); transform: rotate(var(--n-tilt)); /* Which colour the pile under an open note is drawn in. Overridden on .sub so a version's pile is its own lighter paper. */ --n-stack: var(--n3); } body.skin-anime .v .n { font-size: 13.5px; font-weight: 700; } body.skin-anime .v .d { font-size: 11px; font-weight: 600; opacity: .72; } body.skin-anime .rgroup .v:hover { filter: brightness(1.08); } /* The open resume is a note lifted off the desk and set down on a pad of them. Nothing else on the page has a stack under it, so it reads at a glance without needing colour or a border to carry the message - and it is the one note lying straight while the rest sit askew. The pile is box-shadow, which takes no layout space, so the note below has to be pushed clear by hand with the larger margin. */ /* The open note keeps its own paper in every state. Without these the base stylesheet's .v.on:hover and .v.on .n take over - three classes each, which out-specify a plain body.skin-anime .v - and the note turns near-white with blue text the moment the pointer touches it. The extra .rgroup in the selector is what wins that. */ body.skin-anime .rgroup .v.on, body.skin-anime .rgroup .v.on:hover, body.skin-anime .rgroup .v.sub.on, body.skin-anime .rgroup .v.sub.on:hover { background: var(--n-bg); } body.skin-anime .rgroup .v.on .n, body.skin-anime .rgroup .v.on .d { color: inherit; } body.skin-anime .v.on, body.skin-anime .rgroup .v.on:hover { transform: rotate(0deg) scale(1.035); margin-bottom: 30px; z-index: 2; filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 0 -1px var(--n-stack), 0 5px 2px -1px rgba(0,0,0,.30), 0 8px 0 -2px var(--n-stack), 0 9px 2px -2px rgba(0,0,0,.27), 0 12px 0 -3px var(--n-stack), 0 13px 2px -3px rgba(0,0,0,.24), 0 16px 0 -4px var(--n-stack), 0 17px 3px -4px rgba(0,0,0,.21), 0 20px 0 -5px var(--n-stack), 0 21px 3px -5px rgba(0,0,0,.18), 0 26px 22px -10px rgba(0,0,0,.85); } /* Versions: the same paper a few shades lighter, stepped in under the resume they belong to. */ body.skin-anime .v.sub { margin-left: 36px; padding: 8px 11px; border-top: none; --n-bg: linear-gradient(168deg, var(--ns1) 0%, var(--ns2) 60%, var(--ns3) 100%); background: var(--n-bg); color: var(--ns-ink); --n-stack: var(--ns3); } body.skin-anime .v.sub .n { font-size: 12.5px; } /* The arrow says "this one hangs off the note above". As a text glyph it was a hairline over a busy painting and disappeared; this is a drawn one instead - thick gold stroke inside a dark ink outline, with a sparkle at the tip, the way an arrow is drawn in a panel rather than typed. Inline SVG, so there is no image file to upload and nothing to go missing. It lives in the margin the note is stepped in by, not outside it - the rail scrolls on its own on desktop, so anything hanging off the left edge would either be clipped or push a sideways scrollbar. */ body.skin-anime .v.sub:before { content: ""; left: -34px; top: 0; width: 32px; height: 29px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='34' viewBox='0 0 38 34'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 V19 H21' stroke='%232b1b47' stroke-width='11'/%3E%3Cpath d='M15 10 L28 19 L15 28 Z' fill='%232b1b47' stroke='%232b1b47' stroke-width='7'/%3E%3Cpath d='M8 3 V19 H20' stroke='%23ffd45c' stroke-width='4.5'/%3E%3Cpath d='M17 13 L25 19 L17 25 Z' fill='%23ffd45c' stroke='none'/%3E%3C/g%3E%3Cpath d='M32 2 33.1 6.4 37.5 7.5 33.1 8.6 32 13 30.9 8.6 26.5 7.5 30.9 6.4z' fill='%23fff3c4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left top; background-size: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.85)); } /* Still dashed - it makes a new thing rather than opening one - but on a solid enough panel to be seen. A 1px dash at half opacity over the painting was the quietest item in the column. */ body.skin-anime .v-add { background: rgba(20,24,54,.62); border: 2px dashed var(--a-blue-lit); border-radius: 8px; color: #dce4ff; font-weight: 700; } body.skin-anime .v-add:hover { background: rgba(40,46,96,.72); border-color: #fff; color: #fff; border-style: solid; } /* A line of handwriting at the foot of the list, the way it is pinned to the wall in the artwork. Decorative, so it goes away as soon as the column does. */ body.skin-anime .rail:after { content: "Good resumes, brighter futures."; display: block; margin: 18px 6px 0; font-family: var(--a-hand); font-size: 14.5px; line-height: 1.45; color: #cdd8ff; opacity: .8; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.9); } /* ---- controls: a panel floating over the room -------------------- */ /* No backdrop-filter here. With the artwork on a fixed layer behind it, iOS Safari composites a blurred panel as a plain white rectangle that clips straight through whatever text is under it. The panel is 88-93% opaque anyway, so the blur was buying almost nothing. */ body.skin-anime .panel { background: linear-gradient(180deg, rgba(22,26,56,.88), rgba(13,16,38,.93)); border: 1px solid var(--a-edge); border-radius: 16px; box-shadow: 0 26px 46px -22px rgba(0,0,0,.95); } body.skin-anime .dochead { border-bottom-color: rgba(150,175,255,.18); } body.skin-anime .dh-t { font-size: 19px; font-weight: 600; color: #f2f5ff; } body.skin-anime .dh-s { color: var(--a-text-dim); } body.skin-anime .pencil, body.skin-anime .subact { color: #cdd8ff; } body.skin-anime .dh-t:hover .pencil, body.skin-anime .subact:hover { background: rgba(140,160,255,.2); border-color: var(--a-blue-lit); color: #fff; } body.skin-anime .state, body.skin-anime .undo { border-radius: 999px; padding: 7px 14px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; background-image: none; box-shadow: none; text-shadow: none; } body.skin-anime .state { background: rgba(30,90,70,.6); color: #8fffcf; border: 1px solid rgba(143,255,207,.45); } body.skin-anime .state.busy { background: rgba(84,64,20,.6); color: var(--a-gold); border-color: rgba(255,217,138,.45); } body.skin-anime .state.bad { background: rgba(90,30,40,.6); color: #ffb3ba; border-color: rgba(255,179,186,.45); } body.skin-anime .undo { background: rgba(255,255,255,.1); color: #dbe4ff; border: 1px solid rgba(200,212,255,.3); } body.skin-anime .toggle { background: rgba(255,255,255,.1); border: 1px solid rgba(200,212,255,.3); border-radius: 999px; } body.skin-anime .tg-label, body.skin-anime .tg-word { color: #dbe4ff; text-shadow: none; } body.skin-anime .tg-track { background: rgba(10,14,32,.8); border-radius: 999px; box-shadow: none; } body.skin-anime .tg-knob { background-image: linear-gradient(180deg, #eaf0ff, #b9c8ff); border-radius: 50%; } body.skin-anime .toggle[aria-pressed="true"] .tg-knob { background-image: linear-gradient(180deg, #fff, var(--a-blue-lit)); box-shadow: 0 0 12px rgba(120,140,255,.9); } /* ---- the document: a page taped to the screen -------------------- */ body.skin-anime .sheet { background: none; border: none; padding: 0; box-shadow: none; font-family: 'Segoe UI', -apple-system, sans-serif; color: var(--a-ink); } /* The page is slightly see-through, so the room reads through it and it sits in the scene rather than on top of it. Not blurred: the same iOS compositing bug that hit the panel applies here, and a blurred sheet of paper the height of a resume is the most expensive thing on the page to repaint while scrolling. */ body.skin-anime .tube { position: relative; /* Layer order is top-down: the two blossom sprays sit on the paper, the loose petals tile over it, and the paper itself is the last layer underneath. */ background-image: var(--a-sakura), var(--a-sakura), var(--a-drift), linear-gradient(180deg, rgba(251,245,233,.90) 0%, rgba(242,233,214,.93) 100%); background-repeat: no-repeat, no-repeat, repeat, no-repeat; background-position: right -14px top -10px, right 6px bottom 40px, left 30px top 120px, 0 0; background-size: 210px 168px, 150px 120px, 360px 340px, auto; border-radius: 4px; box-shadow: 0 22px 40px -16px rgba(0,0,0,.9); } /* Washi tape across the top edge. */ body.skin-anime .tube:before { content: ""; position: absolute; top: -11px; left: 50%; margin-left: -58px; width: 116px; height: 24px; z-index: 2; background: repeating-linear-gradient(135deg, rgba(126,200,255,.9) 0px, rgba(126,200,255,.9) 7px, rgba(180,225,255,.9) 7px, rgba(180,225,255,.9) 14px); transform: rotate(-1.4deg); box-shadow: 0 2px 5px rgba(0,0,0,.28); } /* The frame: two thin rules a few millimetres apart, the way a certificate or a bookplate is ruled. box-shadow draws the inner one, so it is still a single element. */ body.skin-anime .tube:after { content: ""; position: absolute; inset: 11px; z-index: 1; pointer-events: none; border-radius: 2px; border: 1px solid rgba(196,157,103,.55); box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(196,157,103,.34); } /* A small star at each corner of the frame, outside it. Four background layers on one element rather than four elements. */ body.skin-anime .sheet { position: relative; } body.skin-anime .sheet:before { content: ""; position: absolute; inset: 4px; z-index: 2; pointer-events: none; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 0 10.5 7.5 18 9 10.5 10.5 9 18 7.5 10.5 0 9 7.5 7.5z' fill='%23d3ab74'/%3E%3C/svg%3E"), url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 0 10.5 7.5 18 9 10.5 10.5 9 18 7.5 10.5 0 9 7.5 7.5z' fill='%23d3ab74'/%3E%3C/svg%3E"), url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 0 10.5 7.5 18 9 10.5 10.5 9 18 7.5 10.5 0 9 7.5 7.5z' fill='%23d3ab74'/%3E%3C/svg%3E"), url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 0 10.5 7.5 18 9 10.5 10.5 9 18 7.5 10.5 0 9 7.5 7.5z' fill='%23d3ab74'/%3E%3C/svg%3E"); background-size: 15px 15px; background-position: left top, right top, left bottom, right bottom; opacity: .85; } /* The name is the one serif thing on the page, the way it is set on a printed resume, with a sparkle after it. */ body.skin-anime .cname { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: #131a22; text-transform: none; } body.skin-anime .cname:after { content: "\2726"; font-family: 'Segoe UI', sans-serif; font-size: 19px; margin-left: 10px; vertical-align: 4px; color: var(--a-blue-lit); } body.skin-anime .cmeta { color: var(--a-ink-dim); } /* Section headings: a four-point star, the label in blue caps, and the rule running out to the button. The rule is the base stylesheet's own border-bottom on a flex:1 heading - it only ever needed a colour. */ body.skin-anime .sec-h h2 { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: 11.5px; letter-spacing: .2em; color: var(--a-blue); font-weight: 700; /* The rule is a gradient, so it has to be a background rather than a border - fading from the heading's blue to the pink the timeline ends in, which ties the two together down the page. */ border-bottom: none; background-image: linear-gradient(90deg, #7aa8ff 0%, #f79ec8 100%); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 2px; padding-bottom: 7px; } body.skin-anime .sec-h h2:before { content: "\2726"; font-size: 13px; letter-spacing: 0; color: var(--a-blue-lit); line-height: 1; flex-shrink: 0; } body.skin-anime .card p, body.skin-anime .jbul li, body.skin-anime .jpara { color: #35302a; font-size: 15px; font-weight: 400; } body.skin-anime .jt { font-size: 17px; font-weight: 700; color: #171512; text-transform: none; letter-spacing: 0; } body.skin-anime .je { color: var(--a-ink-dim); } body.skin-anime .jd { color: #8a8474; } /* A timeline down the jobs and schools: a gradient spine with a node at each entry, alternating blue and pink so a long history reads as a sequence rather than a wall. */ body.skin-anime .card { position: relative; } /* Each entry gets its own panel, a shade lighter than the paper, so a long history reads as a stack of cards rather than one column of text. The negative margin is the base stylesheet's; it has to be cancelled or the panel hangs off both edges of the page. */ body.skin-anime #viewJobs .card, body.skin-anime #viewEducation .card { margin: 0 0 12px; padding: 13px 16px 13px 36px; background: rgba(255,252,245,.72); border: 1px solid rgba(224,208,178,.7); border-radius: 12px; } body.skin-anime #viewJobs .card:before, body.skin-anime #viewEducation .card:before { content: ""; position: absolute; left: 18px; top: 26px; bottom: 14px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--a-blue-lit) 0%, var(--a-pink) 100%); } /* An open ring on the line - a hollow node reads as a point on a line, where a filled dot reads as a bullet. It sits below the job title and the employer rather than beside them: at the head of the card it landed on the first letter of the title, and a title that wraps to two lines made that worse. */ body.skin-anime #viewJobs .card:after, body.skin-anime #viewEducation .card:after { content: ""; position: absolute; left: 9px; top: 56px; width: 15px; height: 15px; border-radius: 50%; background: transparent; border: 3px solid var(--a-blue-lit); box-shadow: 0 0 0 3px rgba(255,252,245,.9); } body.skin-anime .card:hover { background: rgba(126,200,255,.09); } body.skin-anime .card.editing { background: #fdf6e6; border-color: #e0d5bb; } body.skin-anime .chip { background: #e6f2fd; border: 1px solid #bfdff8; color: #17537f; border-radius: 999px; font-weight: 600; } body.skin-anime .jbul li:before { color: var(--a-blue-lit); } body.skin-anime .empty { color: var(--a-ink-dim); } /* Edit, Add and Remove become soft pills on the page instead of bare blue words - it is the one place the interface is allowed to sit on top of the paper, so it may as well look deliberate. */ body.skin-anime .edit, body.skin-anime .contact-edit, body.skin-anime .card-tools button { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 650; color: var(--a-blue); background: #eaf4ff; border: 1px solid #b9d8f5; border-radius: 999px; padding: 6px 15px; box-shadow: 0 1px 2px rgba(30,50,80,.08); } body.skin-anime .edit:hover, body.skin-anime .contact-edit:hover, body.skin-anime .card-tools button:hover { background: #f2f8ff; border-color: #9fc9ee; } body.skin-anime .card-tools button.danger { color: #d1436b; background: #fff0f4; border-color: #f6c3d2; } body.skin-anime .card-tools button.danger:hover { background: #ffe3ec; border-color: #eda3bd; } /* Save and Cancel live inside the sheet, where the dark glass pills the rest of the skin uses would be a hole punched in the paper. */ body.skin-anime .sheet .mini { background: #fff; border: 1px solid #cfe3f7; color: var(--a-blue); -webkit-backdrop-filter: none; backdrop-filter: none; } body.skin-anime .sheet .mini:hover { background: #f2f8ff; border-color: #9fc9ee; } body.skin-anime .sheet .mini.key { background: linear-gradient(135deg, var(--a-blue-lit) 0%, var(--a-violet) 100%); border-color: rgba(140,160,240,.9); color: #fff; box-shadow: 0 4px 12px -4px rgba(120,140,255,.8); } body.skin-anime .hintline { color: #7a7365; } body.skin-anime .cedit input, body.skin-anime .cedit textarea, body.skin-anime .editor input, body.skin-anime .editor textarea, body.skin-anime .ask-input { background: #fffdf6; border-color: #ddd2b8; color: var(--a-ink); font-family: inherit; border-radius: 8px; } body.skin-anime .drawer textarea { background: rgba(255,253,246,.95); border-color: #ddd2b8; color: var(--a-ink); } body.skin-anime .drawer { background: rgba(20,26,56,.55); border-bottom-color: rgba(150,175,255,.2); } body.skin-anime .drawer label { color: #cfd9f5; } body.skin-anime .sugg, body.skin-anime .tip { background: #fff6dc; border-color: #e8d9a8; color: #6b5320; } body.skin-anime .tip button { background: #fffdf6; border-color: #e0cf9e; color: #6b5320; } body.skin-anime .tip button.apply { background: #c98a2b; border-color: #c98a2b; color: #fff8e6; } body.skin-anime .notice.good { background: rgba(30,90,70,.75); color: #8fffcf; } body.skin-anime .notice.bad { background: rgba(90,30,40,.75); color: #ffb3ba; } body.skin-anime .working-card, body.skin-anime .ask-card { background: linear-gradient(180deg, rgba(24,28,60,.97), rgba(14,18,40,.98)); border: 1px solid rgba(160,180,255,.3); border-radius: 16px; } body.skin-anime .working-t, body.skin-anime .ask-t { font-family: inherit; color: #f2f5ff; font-size: 17px; text-transform: none; letter-spacing: 0; } body.skin-anime .working-s, body.skin-anime .ask-b { color: var(--a-text-dim); } body.skin-anime .working-bar { background: rgba(10,14,32,.9); } body.skin-anime .working-fill { background: linear-gradient(90deg, var(--a-violet), var(--a-blue-lit)); } /* Sparkles and petals. Four-point stars and a few blossom shapes, tiled and fixed, so they sit over the room without moving when the page scrolls - and behind everything, so nothing has to make room for them. */ body.skin-anime:before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M60 22 62 46 86 48 62 50 60 74 58 50 34 48 58 46z' opacity='.55'/%3E%3Cpath d='M300 90 301.4 106 317 107.5 301.4 109 300 125 298.6 109 283 107.5 298.6 106z' opacity='.4'/%3E%3Cpath d='M180 250 181.8 270 202 271.8 181.8 273.6 180 294 178.2 273.6 158 271.8 178.2 270z' opacity='.45'/%3E%3Cpath d='M370 320 371.2 333 384 334.2 371.2 335.4 370 348 368.8 335.4 356 334.2 368.8 333z' opacity='.35'/%3E%3Cpath d='M92 360 93.4 376 109 377.4 93.4 378.8 92 395 90.6 378.8 75 377.4 90.6 376z' opacity='.5'/%3E%3Cpath d='M248 176 249 187 260 188 249 189 248 200 247 189 236 188 247 187z' opacity='.3'/%3E%3C/g%3E%3Cg fill='%23ffc8de'%3E%3Cpath d='M140 120c5-6 12-5 13 1 1 5-4 9-9 8-4-1-6-5-4-9z' opacity='.3'/%3E%3Cpath d='M336 232c5-6 12-5 13 1 1 5-4 9-9 8-4-1-6-5-4-9z' opacity='.22'/%3E%3Cpath d='M44 288c5-6 12-5 13 1 1 5-4 9-9 8-4-1-6-5-4-9z' opacity='.26'/%3E%3Cpath d='M262 372c5-6 12-5 13 1 1 5-4 9-9 8-4-1-6-5-4-9z' opacity='.2'/%3E%3C/g%3E%3C/svg%3E"); } /* Everything the page draws sits above them. */ /* Everything the page draws sits above them. The top bar keeps the sticky position and high stacking order it has in the base stylesheet - flattening it to z-index 1 here dropped it out of sticky and, worse, put it below the foreground layer below. */ body.skin-anime .shell { position: relative; z-index: 1; } body.skin-anime .topbar { position: sticky; top: 0; z-index: 30; } /* ---- stickers in front of the page ------------------------------- Two of them, pinned to the bottom-right of the window and sitting above the sheet, so the page is tucked under something rather than laid flat over an empty desk. Drawn rather than cut out of the artwork, so they stay crisp at any size and there is no second image file to upload. pointer-events is off, so anything underneath is still clickable, and z-index 5 puts them over the paper but under the fixed action bar (20) and the top bar (30) - nothing you need to press ends up behind one. */ body.skin-anime .shell:after { content: ""; position: fixed; bottom: 0; right: 0; z-index: 5; width: 216px; height: 117px; margin-right: -12px; margin-bottom: 6px; pointer-events: none; background-repeat: no-repeat; background-position: bottom center; background-size: contain; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='130' viewBox='0 0 240 130'%3E%3Cg font-family='Segoe Script, Bradley Hand, Snell Roundhand, cursive'%3E%3Cg transform='translate(14,12) rotate(-3.5)'%3E%3Crect x='3' y='5' width='206' height='50' rx='25.0' fill='%231a1024' opacity='.38'/%3E%3Crect x='0' y='0' width='206' height='50' rx='25.0' fill='%23fffdf8'/%3E%3Crect x='5' y='5' width='196' height='40' rx='20.0' fill='%23f9e0ea'/%3E%3Crect x='5' y='5' width='196' height='40' rx='20.0' fill='none' stroke='%23e3a8c2' stroke-width='1.5' opacity='.7'/%3E%3Ctext x='103.0' y='31.0' text-anchor='middle' font-size='17' fill='%238a3f61'%3EGood Skills%3C/text%3E%3C/g%3E%3Cg transform='translate(22,66) rotate(2.5)'%3E%3Crect x='3' y='5' width='198' height='50' rx='25.0' fill='%231a1024' opacity='.38'/%3E%3Crect x='0' y='0' width='198' height='50' rx='25.0' fill='%23fffdf8'/%3E%3Crect x='5' y='5' width='188' height='40' rx='20.0' fill='%23dde7fa'/%3E%3Crect x='5' y='5' width='188' height='40' rx='20.0' fill='none' stroke='%2393b3e4' stroke-width='1.5' opacity='.7'/%3E%3Ctext x='99.0' y='31.0' text-anchor='middle' font-size='17' fill='%2339568c'%3EAmazing Things%3C/text%3E%3C/g%3E%3Cpath d='M212 6 c3.5-4.5 10-3.5 10 2.2 0 4.6-5.6 8-10 11.4 -4.4-3.4-10-6.8-10-11.4 0-5.7 6.5-6.7 10-2.2z' fill='%23e2698f'/%3E%3Cpath d='M14 108 15.4 114 21.4 115.4 15.4 116.8 14 122.8 12.6 116.8 6.6 115.4 12.6 114z' fill='%23e9c98a'/%3E%3C/g%3E%3C/svg%3E"); } body.skin-anime .lamp { background: rgba(255,255,255,.25); } body.skin-anime .act.running .lamp { background: var(--a-gold); box-shadow: 0 0 9px var(--a-gold); } body.skin-anime .act.done .lamp { background: #ff5c6e; box-shadow: 0 0 9px rgba(255,92,110,.9); } @media (max-width: 860px) { /* The portrait crop, composed for a phone: sky and city in the top two thirds, desk along the bottom edge. Because the artwork is a fixed viewport-sized layer now, this needs nothing but the swap. */ body.skin-anime:after { background-image: url('/resume/images/anime-desk-phone.webp?v=2'); background-position: center center; } /* Same iOS compositing problem as the panel, and the bottom action bar is a fixed element sitting directly on the fixed artwork - the worst case for it. Solid-enough backgrounds instead. */ body.skin-anime .topbar, body.skin-anime .ghost, body.skin-anime .act, body.skin-anime .mini, body.skin-anime .go { -webkit-backdrop-filter: none; backdrop-filter: none; } body.skin-anime .topbar { background: rgba(20,17,44,.88); } body.skin-anime .ghost, body.skin-anime .act, body.skin-anime .mini { background: rgba(46,42,86,.85); } body.skin-anime .cname { font-size: 23px; } body.skin-anime .dh-t { font-size: 17px; } /* Smaller here - about 60% - and lifted clear of the fixed action bar. At this size the lettering on the spines is decoration rather than something anyone reads. */ /* Just clear of the fixed action bar. The safe-area inset is NOT added here: the base stylesheet already builds it into that bar's own bottom padding, so counting it again floated the stickers a whole home-indicator too high. 68px is the bar plus a small gap. */ body.skin-anime .shell:after { width: 132px; height: 72px; margin-right: -8px; margin-bottom: 68px; opacity: .93; } /* ---- the notes shrink to their words ------------------------- Full-bleed notes across a phone were bars, not paper, and they hid the room they are supposed to be lying in. Making the group a column of flex-start items is what shrink-wraps them: a block child fills its parent, a flex item aligned to the start does not. max-width keeps a long resume name from running off the side - the name ellipsises at that point, as it already does in the narrow desktop rail. */ body.skin-anime .rail { max-width: 100%; } body.skin-anime .rail:after { display: none; } /* The list moves off the left edge so the pencils, lamp and mug in the artwork are not permanently behind paper. One number: raise it to push the notes further right, drop it to give them more room for long names. Padding rather than margin, so the notes' max-width below still measures against what is left. */ body.skin-anime .rail { padding-left: 30%; padding-right: 4px; } body.skin-anime .rgroup { display: flex; flex-direction: column; align-items: flex-start; } body.skin-anime .v { max-width: 100%; padding: 8px 13px; } body.skin-anime .v .n { font-size: 13px; } body.skin-anime .v .d { font-size: 10.5px; } /* The tilt stays now that they are small - a dozen little notes at slightly different angles is the pile the artwork wants. It was only ever turned off because a full-width note leaning over pushed a scrollbar onto the page. */ body.skin-anime .v.sub { margin-left: 40px; } body.skin-anime .v.sub:before { left: -38px; width: 36px; height: 32px; } body.skin-anime .v.on { margin-bottom: 28px; } /* Shrink-wrapped too, so it reads as another note rather than a banner across the top of the list. */ body.skin-anime .v-add { display: inline-block; width: -webkit-fit-content; width: fit-content; max-width: 100%; padding: 10px 16px; } body.skin-anime .bn { font-size: 17px; } body.skin-anime.studio .bn:after { font-size: 11.5px; } } /* ================================================================== RETRO ------------------------------------------------------------------ Moved here wholesale from studio.php's own