/* App themes (Oct 2026). Each theme sets the shared tokens and a few signature touches: title font, ornaments at the panel's top edge, button and card shapes. Small text keeps 7:1 contrast. Loaded after fun.css. All ornaments are original. */ @font-face { font-family: "Alfa Slab One"; font-weight: 400; font-display: swap; src: url(fonts/alfa-slab-one-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Audiowide"; font-weight: 400; font-display: swap; src: url(fonts/audiowide-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Bangers"; font-weight: 400; font-display: swap; src: url(fonts/bangers-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-display: swap; src: url(fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2"); } @font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); } @font-face { font-family: "Bungee"; font-weight: 400; font-display: swap; src: url(fonts/bungee-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Cinzel Decorative"; font-weight: 700; font-display: swap; src: url(fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Cinzel"; font-weight: 700; font-display: swap; src: url(fonts/cinzel-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Comic Neue"; font-weight: 400; font-display: swap; src: url(fonts/comic-neue-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Comic Neue"; font-weight: 700; font-display: swap; src: url(fonts/comic-neue-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-display: swap; src: url(fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "DotGothic16"; font-weight: 400; font-display: swap; src: url(fonts/dotgothic16-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url(fonts/fredoka-latin-600-normal.woff2) format("woff2"); } @font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url(fonts/fredoka-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Gochi Hand"; font-weight: 400; font-display: swap; src: url(fonts/gochi-hand-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Lilita One"; font-weight: 400; font-display: swap; src: url(fonts/lilita-one-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Lobster"; font-weight: 400; font-display: swap; src: url(fonts/lobster-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Monoton"; font-weight: 400; font-display: swap; src: url(fonts/monoton-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Noto Sans Tagalog"; font-weight: 400; font-display: swap; src: url(fonts/noto-sans-tagalog-tagalog-400-normal.woff2) format("woff2"); } @font-face { font-family: "Orbitron"; font-weight: 700; font-display: swap; src: url(fonts/orbitron-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Orbitron"; font-weight: 900; font-display: swap; src: url(fonts/orbitron-latin-900-normal.woff2) format("woff2"); } @font-face { font-family: "Permanent Marker"; font-weight: 400; font-display: swap; src: url(fonts/permanent-marker-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Pixelify Sans"; font-weight: 500; font-display: swap; src: url(fonts/pixelify-sans-latin-500-normal.woff2) format("woff2"); } @font-face { font-family: "Pixelify Sans"; font-weight: 700; font-display: swap; src: url(fonts/pixelify-sans-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Playfair Display"; font-weight: 700; font-display: swap; src: url(fonts/playfair-display-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Playfair Display"; font-weight: 800; font-display: swap; src: url(fonts/playfair-display-latin-800-normal.woff2) format("woff2"); } @font-face { font-family: "Press Start 2P"; font-weight: 400; font-display: swap; src: url(fonts/press-start-2p-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Rajdhani"; font-weight: 600; font-display: swap; src: url(fonts/rajdhani-latin-600-normal.woff2) format("woff2"); } @font-face { font-family: "Rajdhani"; font-weight: 700; font-display: swap; src: url(fonts/rajdhani-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Rubik Mono One"; font-weight: 400; font-display: swap; src: url(fonts/rubik-mono-one-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Share Tech Mono"; font-weight: 400; font-display: swap; src: url(fonts/share-tech-mono-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Shrikhand"; font-weight: 400; font-display: swap; src: url(fonts/shrikhand-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); } @font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Syne"; font-weight: 700; font-display: swap; src: url(fonts/syne-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Syne"; font-weight: 800; font-display: swap; src: url(fonts/syne-latin-800-normal.woff2) format("woff2"); } @font-face { font-family: "Varela Round"; font-weight: 400; font-display: swap; src: url(fonts/varela-round-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url(fonts/vt323-latin-400-normal.woff2) format("woff2"); } /* shared: cards and the tab bar follow the theme */ :root.fun[data-at] .hcard, :root.fun[data-at] .w { background: var(--at-card); box-shadow: 0 4px 0 var(--edge); } :root.fun[data-at] .tabs { background: var(--at-bar) !important; background-color: var(--at-bar) !important; } :root.fun[data-at] .tabs button[aria-current] { color: var(--at-tab, var(--orange)); } :root.fun[data-at] .bot-fab, :root.fun[data-at] .edge-buddy { --orange: var(--at-fab, var(--orange)); } /* ---------- Jeepney Pasada: chrome steel, pinstripes, red-yellow-blue, Bungee signs ---------- */ :root.fun[data-at="jeepney"] { color-scheme: light; --paper: #f4ebd9; --stone: #ebe0c9; --sand: #d9cdb2; --ink: #1a1a1a; --ink-soft: #3a3328; --line: rgba(26,26,26,.14); --glass: rgba(244,235,217,.94); --orange: #e3262e; --orange-press: #b81d24; --on-orange: #fff; --cream: #f4ebd9; --panel: #f4ebd9; --tile: #ffffff; --edge: rgba(26,26,26,.24); --at-card: #fffdf7; --at-bar: #ffffff; --at-tab: #e3262e; --play: "Bungee", "Baloo 2", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke-linecap=%22round%22 stroke-width=%222.4%22 opacity=%22.7%22%3E%3Cpath d=%22M10 30c30-20 60 20 90 0s60 20 90 0 50 10 60 0%22 stroke=%22%23e3262e%22/%3E%3Cpath d=%22M10 40c30-20 60 20 90 0s60 20 90 0 50 10 60 0%22 stroke=%22%230b5fa5%22/%3E%3Cg transform=%22translate(40 120)%22 stroke=%22%23e3262e%22%3E%3Cpath d=%22M0-14 4-4 14-4 6 2 9 12 0 6-9 12-6 2-14-4-4-4Z%22 fill=%22%23ffc20e%22/%3E%3C/g%3E%3Cg transform=%22translate(200 150)%22 stroke=%22%230b5fa5%22%3E%3Ccircle r=%2212%22/%3E%3Ccircle r=%225%22 fill=%22%23ffc20e%22/%3E%3C/g%3E%3Cpath d=%22M120 200q14-22 28 0t28 0%22 stroke=%22%23e3262e%22/%3E%3Cg transform=%22translate(150 90)%22 stroke=%22%231a1a1a%22%3E%3Cpath d=%22M-12 0h24M0-12v24M-8-8l16 16M8-8-8 8%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --gbg: #f4ebd9; --gink: #1a1a1a; --g2c: #e3262e; --g3c: #ffc20e; --g4c: #0b5fa5; --gtile: #ffffff; --gstroke: rgba(255,255,255,.92); } .fun[data-at="jeepney"] .sheet__title { letter-spacing: .01em; text-shadow: 2px 2px 0 #ffc20e; font-weight: 400; } .fun[data-at="jeepney"] .hcard__t, .fun[data-at="jeepney"] .sec, .fun[data-at="jeepney"] .shelf-h { font-weight: 400; } .fun[data-at="jeepney"] .btn:not(.btn--quiet) { background: #e3262e; box-shadow: inset 0 0 0 2px #e3262e, inset 0 0 0 4px #ffc20e, 0 4px 0 #8f1218; } .fun[data-at="jeepney"] .chip, .fun[data-at="jeepney"] .btn--quiet, .fun[data-at="jeepney"] .jump button { background: linear-gradient(#ffffff, #dfe4e9 55%, #f4f6f8); box-shadow: 0 3px 0 #9aa3ad, inset 0 0 0 1.5px #9aa3ad; } .fun[data-at="jeepney"] .hcard, .fun[data-at="jeepney"] .w, .fun[data-at="jeepney"] .today-card { background: linear-gradient(90deg, #e3262e 0 33.3%, #ffc20e 0 66.6%, #0b5fa5 0) top / 100% 5px no-repeat, var(--at-card); } /* ---------- Komiks 90s: newsprint, thick ink outlines, offset shadows, Bangers headlines ---------- */ :root.fun[data-at="komiks"] { color-scheme: light; --paper: #f3ebd3; --stone: #ebe1c4; --sand: #d8cca8; --ink: #111111; --ink-soft: #3b352a; --line: rgba(17,17,17,.2); --glass: rgba(243,235,211,.95); --orange: #d7261e; --orange-press: #a81b14; --on-orange: #fff; --cream: #f3ebd3; --panel: #f3ebd3; --tile: #fffdf4; --edge: #111111; --at-card: #fffdf4; --at-bar: #fffdf4; --at-tab: #d7261e; --play: "Bangers", "Baloo 2", Impact, system-ui; --at-ui: "Comic Neue", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22%23111%22 opacity=%22.16%22%3E%3Ccircle cx=%226%22 cy=%226%22 r=%222.2%22/%3E%3Ccircle cx=%226%22 cy=%2219%22 r=%221.2%22/%3E%3Ccircle cx=%226%22 cy=%2232%22 r=%222.7%22/%3E%3Ccircle cx=%226%22 cy=%2245%22 r=%221.7%22/%3E%3Ccircle cx=%226%22 cy=%2258%22 r=%223.2%22/%3E%3Ccircle cx=%226%22 cy=%2271%22 r=%222.2%22/%3E%3Ccircle cx=%226%22 cy=%2284%22 r=%221.2%22/%3E%3Ccircle cx=%226%22 cy=%2297%22 r=%222.7%22/%3E%3Ccircle cx=%226%22 cy=%22110%22 r=%221.7%22/%3E%3Ccircle cx=%2219%22 cy=%226%22 r=%221.2%22/%3E%3Ccircle cx=%2219%22 cy=%2219%22 r=%222.7%22/%3E%3Ccircle cx=%2219%22 cy=%2232%22 r=%221.7%22/%3E%3Ccircle cx=%2219%22 cy=%2245%22 r=%223.2%22/%3E%3Ccircle cx=%2219%22 cy=%2258%22 r=%222.2%22/%3E%3Ccircle cx=%2219%22 cy=%2271%22 r=%221.2%22/%3E%3Ccircle cx=%2219%22 cy=%2284%22 r=%222.7%22/%3E%3Ccircle cx=%2219%22 cy=%2297%22 r=%221.7%22/%3E%3Ccircle cx=%2219%22 cy=%22110%22 r=%223.2%22/%3E%3Ccircle cx=%2232%22 cy=%226%22 r=%222.7%22/%3E%3Ccircle cx=%2232%22 cy=%2219%22 r=%221.7%22/%3E%3Ccircle cx=%2232%22 cy=%2232%22 r=%223.2%22/%3E%3Ccircle cx=%2232%22 cy=%2245%22 r=%222.2%22/%3E%3Ccircle cx=%2232%22 cy=%2258%22 r=%221.2%22/%3E%3Ccircle cx=%2232%22 cy=%2271%22 r=%222.7%22/%3E%3Ccircle cx=%2232%22 cy=%2284%22 r=%221.7%22/%3E%3Ccircle cx=%2232%22 cy=%2297%22 r=%223.2%22/%3E%3Ccircle cx=%2232%22 cy=%22110%22 r=%222.2%22/%3E%3Ccircle cx=%2245%22 cy=%226%22 r=%221.7%22/%3E%3Ccircle cx=%2245%22 cy=%2219%22 r=%223.2%22/%3E%3Ccircle cx=%2245%22 cy=%2232%22 r=%222.2%22/%3E%3Ccircle cx=%2245%22 cy=%2245%22 r=%221.2%22/%3E%3Ccircle cx=%2245%22 cy=%2258%22 r=%222.7%22/%3E%3Ccircle cx=%2245%22 cy=%2271%22 r=%221.7%22/%3E%3Ccircle cx=%2245%22 cy=%2284%22 r=%223.2%22/%3E%3Ccircle cx=%2245%22 cy=%2297%22 r=%222.2%22/%3E%3Ccircle cx=%2245%22 cy=%22110%22 r=%221.2%22/%3E%3Ccircle cx=%2258%22 cy=%226%22 r=%223.2%22/%3E%3Ccircle cx=%2258%22 cy=%2219%22 r=%222.2%22/%3E%3Ccircle cx=%2258%22 cy=%2232%22 r=%221.2%22/%3E%3Ccircle cx=%2258%22 cy=%2245%22 r=%222.7%22/%3E%3Ccircle cx=%2258%22 cy=%2258%22 r=%221.7%22/%3E%3Ccircle cx=%2258%22 cy=%2271%22 r=%223.2%22/%3E%3Ccircle cx=%2258%22 cy=%2284%22 r=%222.2%22/%3E%3Ccircle cx=%2258%22 cy=%2297%22 r=%221.2%22/%3E%3Ccircle cx=%2258%22 cy=%22110%22 r=%222.7%22/%3E%3Ccircle cx=%2271%22 cy=%226%22 r=%222.2%22/%3E%3Ccircle cx=%2271%22 cy=%2219%22 r=%221.2%22/%3E%3Ccircle cx=%2271%22 cy=%2232%22 r=%222.7%22/%3E%3Ccircle cx=%2271%22 cy=%2245%22 r=%221.7%22/%3E%3Ccircle cx=%2271%22 cy=%2258%22 r=%223.2%22/%3E%3Ccircle cx=%2271%22 cy=%2271%22 r=%222.2%22/%3E%3Ccircle cx=%2271%22 cy=%2284%22 r=%221.2%22/%3E%3Ccircle cx=%2271%22 cy=%2297%22 r=%222.7%22/%3E%3Ccircle cx=%2271%22 cy=%22110%22 r=%221.7%22/%3E%3Ccircle cx=%2284%22 cy=%226%22 r=%221.2%22/%3E%3Ccircle cx=%2284%22 cy=%2219%22 r=%222.7%22/%3E%3Ccircle cx=%2284%22 cy=%2232%22 r=%221.7%22/%3E%3Ccircle cx=%2284%22 cy=%2245%22 r=%223.2%22/%3E%3Ccircle cx=%2284%22 cy=%2258%22 r=%222.2%22/%3E%3Ccircle cx=%2284%22 cy=%2271%22 r=%221.2%22/%3E%3Ccircle cx=%2284%22 cy=%2284%22 r=%222.7%22/%3E%3Ccircle cx=%2284%22 cy=%2297%22 r=%221.7%22/%3E%3Ccircle cx=%2284%22 cy=%22110%22 r=%223.2%22/%3E%3Ccircle cx=%2297%22 cy=%226%22 r=%222.7%22/%3E%3Ccircle cx=%2297%22 cy=%2219%22 r=%221.7%22/%3E%3Ccircle cx=%2297%22 cy=%2232%22 r=%223.2%22/%3E%3Ccircle cx=%2297%22 cy=%2245%22 r=%222.2%22/%3E%3Ccircle cx=%2297%22 cy=%2258%22 r=%221.2%22/%3E%3Ccircle cx=%2297%22 cy=%2271%22 r=%222.7%22/%3E%3Ccircle cx=%2297%22 cy=%2284%22 r=%221.7%22/%3E%3Ccircle cx=%2297%22 cy=%2297%22 r=%223.2%22/%3E%3Ccircle cx=%2297%22 cy=%22110%22 r=%222.2%22/%3E%3Ccircle cx=%22110%22 cy=%226%22 r=%221.7%22/%3E%3Ccircle cx=%22110%22 cy=%2219%22 r=%223.2%22/%3E%3Ccircle cx=%22110%22 cy=%2232%22 r=%222.2%22/%3E%3Ccircle cx=%22110%22 cy=%2245%22 r=%221.2%22/%3E%3Ccircle cx=%22110%22 cy=%2258%22 r=%222.7%22/%3E%3Ccircle cx=%22110%22 cy=%2271%22 r=%221.7%22/%3E%3Ccircle cx=%22110%22 cy=%2284%22 r=%223.2%22/%3E%3Ccircle cx=%22110%22 cy=%2297%22 r=%222.2%22/%3E%3Ccircle cx=%22110%22 cy=%22110%22 r=%221.2%22/%3E%3Ccircle cx=%22123%22 cy=%226%22 r=%223.2%22/%3E%3Ccircle cx=%22123%22 cy=%2219%22 r=%222.2%22/%3E%3Ccircle cx=%22123%22 cy=%2232%22 r=%221.2%22/%3E%3Ccircle cx=%22123%22 cy=%2245%22 r=%222.7%22/%3E%3Ccircle cx=%22123%22 cy=%2258%22 r=%221.7%22/%3E%3Ccircle cx=%22123%22 cy=%2271%22 r=%223.2%22/%3E%3Ccircle cx=%22123%22 cy=%2284%22 r=%222.2%22/%3E%3Ccircle cx=%22123%22 cy=%2297%22 r=%221.2%22/%3E%3Ccircle cx=%22123%22 cy=%22110%22 r=%222.7%22/%3E%3Ccircle cx=%22136%22 cy=%226%22 r=%222.2%22/%3E%3Ccircle cx=%22136%22 cy=%2219%22 r=%221.2%22/%3E%3Ccircle cx=%22136%22 cy=%2232%22 r=%222.7%22/%3E%3Ccircle cx=%22136%22 cy=%2245%22 r=%221.7%22/%3E%3Ccircle cx=%22136%22 cy=%2258%22 r=%223.2%22/%3E%3Ccircle cx=%22136%22 cy=%2271%22 r=%222.2%22/%3E%3Ccircle cx=%22136%22 cy=%2284%22 r=%221.2%22/%3E%3Ccircle cx=%22136%22 cy=%2297%22 r=%222.7%22/%3E%3Ccircle cx=%22136%22 cy=%22110%22 r=%221.7%22/%3E%3Ccircle cx=%22149%22 cy=%226%22 r=%221.2%22/%3E%3Ccircle cx=%22149%22 cy=%2219%22 r=%222.7%22/%3E%3Ccircle cx=%22149%22 cy=%2232%22 r=%221.7%22/%3E%3Ccircle cx=%22149%22 cy=%2245%22 r=%223.2%22/%3E%3Ccircle cx=%22149%22 cy=%2258%22 r=%222.2%22/%3E%3Ccircle cx=%22149%22 cy=%2271%22 r=%221.2%22/%3E%3Ccircle cx=%22149%22 cy=%2284%22 r=%222.7%22/%3E%3Ccircle cx=%22149%22 cy=%2297%22 r=%221.7%22/%3E%3Ccircle cx=%22149%22 cy=%22110%22 r=%223.2%22/%3E%3Ccircle cx=%22162%22 cy=%226%22 r=%222.7%22/%3E%3Ccircle cx=%22162%22 cy=%2219%22 r=%221.7%22/%3E%3Ccircle cx=%22162%22 cy=%2232%22 r=%223.2%22/%3E%3Ccircle cx=%22162%22 cy=%2245%22 r=%222.2%22/%3E%3Ccircle cx=%22162%22 cy=%2258%22 r=%221.2%22/%3E%3Ccircle cx=%22162%22 cy=%2271%22 r=%222.7%22/%3E%3Ccircle cx=%22162%22 cy=%2284%22 r=%221.7%22/%3E%3Ccircle cx=%22162%22 cy=%2297%22 r=%223.2%22/%3E%3Ccircle cx=%22162%22 cy=%22110%22 r=%222.2%22/%3E%3Ccircle cx=%22175%22 cy=%226%22 r=%221.7%22/%3E%3Ccircle cx=%22175%22 cy=%2219%22 r=%223.2%22/%3E%3Ccircle cx=%22175%22 cy=%2232%22 r=%222.2%22/%3E%3Ccircle cx=%22175%22 cy=%2245%22 r=%221.2%22/%3E%3Ccircle cx=%22175%22 cy=%2258%22 r=%222.7%22/%3E%3Ccircle cx=%22175%22 cy=%2271%22 r=%221.7%22/%3E%3Ccircle cx=%22175%22 cy=%2284%22 r=%223.2%22/%3E%3Ccircle cx=%22175%22 cy=%2297%22 r=%222.2%22/%3E%3Ccircle cx=%22175%22 cy=%22110%22 r=%221.2%22/%3E%3Ccircle cx=%22188%22 cy=%226%22 r=%223.2%22/%3E%3Ccircle cx=%22188%22 cy=%2219%22 r=%222.2%22/%3E%3Ccircle cx=%22188%22 cy=%2232%22 r=%221.2%22/%3E%3Ccircle cx=%22188%22 cy=%2245%22 r=%222.7%22/%3E%3Ccircle cx=%22188%22 cy=%2258%22 r=%221.7%22/%3E%3Ccircle cx=%22188%22 cy=%2271%22 r=%223.2%22/%3E%3Ccircle cx=%22188%22 cy=%2284%22 r=%222.2%22/%3E%3Ccircle cx=%22188%22 cy=%2297%22 r=%221.2%22/%3E%3Ccircle cx=%22188%22 cy=%22110%22 r=%222.7%22/%3E%3Ccircle cx=%22201%22 cy=%226%22 r=%222.2%22/%3E%3Ccircle cx=%22201%22 cy=%2219%22 r=%221.2%22/%3E%3Ccircle cx=%22201%22 cy=%2232%22 r=%222.7%22/%3E%3Ccircle cx=%22201%22 cy=%2245%22 r=%221.7%22/%3E%3Ccircle cx=%22201%22 cy=%2258%22 r=%223.2%22/%3E%3Ccircle cx=%22201%22 cy=%2271%22 r=%222.2%22/%3E%3Ccircle cx=%22201%22 cy=%2284%22 r=%221.2%22/%3E%3Ccircle cx=%22201%22 cy=%2297%22 r=%222.7%22/%3E%3Ccircle cx=%22201%22 cy=%22110%22 r=%221.7%22/%3E%3Ccircle cx=%22214%22 cy=%226%22 r=%221.2%22/%3E%3Ccircle cx=%22214%22 cy=%2219%22 r=%222.7%22/%3E%3Ccircle cx=%22214%22 cy=%2232%22 r=%221.7%22/%3E%3Ccircle cx=%22214%22 cy=%2245%22 r=%223.2%22/%3E%3Ccircle cx=%22214%22 cy=%2258%22 r=%222.2%22/%3E%3Ccircle cx=%22214%22 cy=%2271%22 r=%221.2%22/%3E%3Ccircle cx=%22214%22 cy=%2284%22 r=%222.7%22/%3E%3Ccircle cx=%22214%22 cy=%2297%22 r=%221.7%22/%3E%3Ccircle cx=%22214%22 cy=%22110%22 r=%223.2%22/%3E%3Ccircle cx=%22227%22 cy=%226%22 r=%222.7%22/%3E%3Ccircle cx=%22227%22 cy=%2219%22 r=%221.7%22/%3E%3Ccircle cx=%22227%22 cy=%2232%22 r=%223.2%22/%3E%3Ccircle cx=%22227%22 cy=%2245%22 r=%222.2%22/%3E%3Ccircle cx=%22227%22 cy=%2258%22 r=%221.2%22/%3E%3Ccircle cx=%22227%22 cy=%2271%22 r=%222.7%22/%3E%3Ccircle cx=%22227%22 cy=%2284%22 r=%221.7%22/%3E%3Ccircle cx=%22227%22 cy=%2297%22 r=%223.2%22/%3E%3Ccircle cx=%22227%22 cy=%22110%22 r=%222.2%22/%3E%3Ccircle cx=%22240%22 cy=%226%22 r=%221.7%22/%3E%3Ccircle cx=%22240%22 cy=%2219%22 r=%223.2%22/%3E%3Ccircle cx=%22240%22 cy=%2232%22 r=%222.2%22/%3E%3Ccircle cx=%22240%22 cy=%2245%22 r=%221.2%22/%3E%3Ccircle cx=%22240%22 cy=%2258%22 r=%222.7%22/%3E%3Ccircle cx=%22240%22 cy=%2271%22 r=%221.7%22/%3E%3Ccircle cx=%22240%22 cy=%2284%22 r=%223.2%22/%3E%3Ccircle cx=%22240%22 cy=%2297%22 r=%222.2%22/%3E%3Ccircle cx=%22240%22 cy=%22110%22 r=%221.2%22/%3E%3Ccircle cx=%22253%22 cy=%226%22 r=%223.2%22/%3E%3Ccircle cx=%22253%22 cy=%2219%22 r=%222.2%22/%3E%3Ccircle cx=%22253%22 cy=%2232%22 r=%221.2%22/%3E%3Ccircle cx=%22253%22 cy=%2245%22 r=%222.7%22/%3E%3Ccircle cx=%22253%22 cy=%2258%22 r=%221.7%22/%3E%3Ccircle cx=%22253%22 cy=%2271%22 r=%223.2%22/%3E%3Ccircle cx=%22253%22 cy=%2284%22 r=%222.2%22/%3E%3Ccircle cx=%22253%22 cy=%2297%22 r=%221.2%22/%3E%3Ccircle cx=%22253%22 cy=%22110%22 r=%222.7%22/%3E%3C/g%3E%3Cg transform=%22translate(200 60)%22 opacity=%22.9%22%3E%3Cpath d=%22M0-30 8-12 28-18 16-2 30 12 10 12 6 32-6 14-24 22-16 4-30-8-10-12Z%22 fill=%22%23ffd600%22 stroke=%22%23111%22 stroke-width=%222.5%22/%3E%3Ctext x=%220%22 y=%226%22 font-family=%22Bangers,Impact,sans-serif%22 font-size=%2214%22 text-anchor=%22middle%22 fill=%22%23d7261e%22%3EZOOM%3C/text%3E%3C/g%3E%3C/svg%3E"); --gbg: #f3ebd3; --gink: #111111; --g2c: #d7261e; --g3c: #ffd600; --g4c: #00a0e3; --gtile: #fffdf4; --gstroke: rgba(255,255,255,.95); } .fun[data-at="komiks"] .sheet__title, .fun[data-at="komiks"] .hcard__t, .fun[data-at="komiks"] .sec, .fun[data-at="komiks"] .shelf-h { font-weight: 400; letter-spacing: .04em; } .fun[data-at="komiks"] .btn, .fun[data-at="komiks"] .chip, .fun[data-at="komiks"] .act, .fun[data-at="komiks"] .jump button { font-family: var(--at-ui); font-weight: 700; border: 2.5px solid #111 !important; box-shadow: 3px 3px 0 #111 !important; } .fun[data-at="komiks"] .btn:active, .fun[data-at="komiks"] .chip:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #111 !important; } .fun[data-at="komiks"] .hcard, .fun[data-at="komiks"] .w, .fun[data-at="komiks"] .today-card, .fun[data-at="komiks"] .gtile2, .fun[data-at="komiks"] .coll-tile, .fun[data-at="komiks"] .coll-door, .fun[data-at="komiks"] .game-host { border: 2.5px solid #111; box-shadow: 4px 4px 0 #111 !important; border-radius: 14px; } .fun[data-at="komiks"] .tabs { border: 2.5px solid #111 !important; box-shadow: 4px 4px 0 #111 !important; } .fun[data-at="komiks"] .bubble, .fun[data-at="komiks"] .edge-buddy__say { border: 2.5px solid #111; box-shadow: 3px 3px 0 #111; font-family: var(--at-ui); font-weight: 700; } /* ---------- Sari-Sari: store awning, sachet colors, hand-painted Shrikhand signs ---------- */ :root.fun[data-at="sarisari"] { color-scheme: light; --paper: #f2e3c6; --stone: #e9d7b4; --sand: #d6c094; --ink: #2a1a0f; --ink-soft: #4a3523; --line: rgba(42,26,15,.16); --glass: rgba(242,227,198,.95); --orange: #d7261e; --orange-press: #a81b14; --on-orange: #fff; --cream: #f2e3c6; --panel: #f2e3c6; --tile: #fff8ea; --edge: rgba(42,26,15,.28); --at-card: #fff8ea; --at-bar: #fff8ea; --at-tab: #1e6fd9; --play: "Shrikhand", "Baloo 2", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22264%22 height=%22260%22 viewBox=%220 0 264 260%22%3E%3Cg%3E%3Cpath d=%22M0 0h22v20q-11 9-22 0Z%22 fill=%22%231e6fd9%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M22 0h22v20q-11 9-22 0Z%22 fill=%22%23ffffff%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M44 0h22v20q-11 9-22 0Z%22 fill=%22%231e6fd9%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M66 0h22v20q-11 9-22 0Z%22 fill=%22%23ffffff%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M88 0h22v20q-11 9-22 0Z%22 fill=%22%231e6fd9%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M110 0h22v20q-11 9-22 0Z%22 fill=%22%23ffffff%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M132 0h22v20q-11 9-22 0Z%22 fill=%22%231e6fd9%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M154 0h22v20q-11 9-22 0Z%22 fill=%22%23ffffff%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M176 0h22v20q-11 9-22 0Z%22 fill=%22%231e6fd9%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M198 0h22v20q-11 9-22 0Z%22 fill=%22%23ffffff%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M220 0h22v20q-11 9-22 0Z%22 fill=%22%231e6fd9%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M242 0h22v20q-11 9-22 0Z%22 fill=%22%23ffffff%22 stroke=%22%232a1a0f%22 stroke-width=%221.2%22/%3E%3C/g%3E%3Cg transform=%22translate(30 52)%22 opacity=%22.85%22%3E%3Crect width=%2216%22 height=%2222%22 rx=%222%22 fill=%22%23f5c400%22 stroke=%22%232a1a0f%22 stroke-width=%221.5%22/%3E%3Crect x=%2220%22 width=%2216%22 height=%2222%22 rx=%222%22 fill=%22%23d7261e%22 stroke=%22%232a1a0f%22 stroke-width=%221.5%22/%3E%3Crect x=%2240%22 width=%2216%22 height=%2222%22 rx=%222%22 fill=%22%231e6fd9%22 stroke=%22%232a1a0f%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M-4 0h64%22 stroke=%22%232a1a0f%22 stroke-width=%222%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #f2e3c6; --gink: #2a1a0f; --g2c: #d7261e; --g3c: #f5c400; --g4c: #1e6fd9; --gtile: #fff8ea; --gstroke: rgba(255,248,234,.95); } .fun[data-at="sarisari"] .sheet { background: var(--doodle) 0 0 / 264px 260px repeat-x, var(--cream) !important; } .fun[data-at="sarisari"] .sheet__head { padding-top: 22px; } .fun[data-at="sarisari"] .sheet__title, .fun[data-at="sarisari"] .hcard__t, .fun[data-at="sarisari"] .sec, .fun[data-at="sarisari"] .shelf-h { font-weight: 400; color: #b81d17; } .fun[data-at="sarisari"] .btn:not(.btn--quiet) { outline: 2px dashed rgba(255,255,255,.75); outline-offset: -6px; box-shadow: 0 4px 0 #7d140f; } .fun[data-at="sarisari"] .chip.is-on, .fun[data-at="sarisari"] .jump button.is-on { background: #1e6fd9; color: #fff; } .fun[data-at="sarisari"] .hcard, .fun[data-at="sarisari"] .w, .fun[data-at="sarisari"] .today-card { box-shadow: 0 4px 0 rgba(42,26,15,.28), inset 0 0 0 1.5px rgba(42,26,15,.12); } /* ---------- Pixel Pasahero: an 8-bit palette, square pixel borders, Press Start 2P headings ---------- */ :root.fun[data-at="pixel"] { color-scheme: dark; --paper: #1d2b53; --stone: #29366f; --sand: #3a4a85; --ink: #fff1e8; --ink-soft: #c9cbd6; --line: rgba(255,241,232,.18); --glass: rgba(29,43,83,.96); --orange: #ff004d; --orange-press: #d1003f; --on-orange: #fff1e8; --cream: #1d2b53; --panel: #1d2b53; --tile: #29366f; --edge: #000000; --at-card: #222f5e; --at-bar: #000000; --at-tab: #ffec27; --play: "Press Start 2P", "VT323", monospace; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22 shape-rendering=%22crispEdges%22%3E%3Cg fill=%22%23ffec27%22 opacity=%22.8%22%3E%3Crect x=%2220%22 y=%2220%22 width=%224%22 height=%224%22/%3E%3Crect x=%2216%22 y=%2224%22 width=%2212%22 height=%224%22/%3E%3Crect x=%2220%22 y=%2228%22 width=%224%22 height=%224%22/%3E%3C/g%3E%3Cg fill=%22%2329adff%22 opacity=%22.7%22%3E%3Crect x=%22180%22 y=%2240%22 width=%224%22 height=%224%22/%3E%3Crect x=%22176%22 y=%2244%22 width=%2212%22 height=%224%22/%3E%3Crect x=%22180%22 y=%2248%22 width=%224%22 height=%224%22/%3E%3C/g%3E%3Cg fill=%22%23ff004d%22 opacity=%22.7%22%3E%3Crect x=%22110%22 y=%2290%22 width=%228%22 height=%228%22/%3E%3Crect x=%22230%22 y=%22110%22 width=%224%22 height=%224%22/%3E%3Crect x=%2260%22 y=%22150%22 width=%224%22 height=%224%22/%3E%3C/g%3E%3Cg fill=%22%2300e436%22 opacity=%22.6%22%3E%3Crect x=%22140%22 y=%2220%22 width=%224%22 height=%224%22/%3E%3Crect x=%2240%22 y=%2296%22 width=%224%22 height=%224%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #1d2b53; --gink: #fff1e8; --g2c: #ff004d; --g3c: #ffec27; --g4c: #29adff; --gtile: #29366f; --gstroke: rgba(0,0,0,.75); } .fun[data-at="pixel"] .sheet__title { font-size: calc(var(--t-large, 1.9rem) * .58); line-height: 1.5; font-weight: 400; } .fun[data-at="pixel"] .hcard__t, .fun[data-at="pixel"] .sec, .fun[data-at="pixel"] .shelf-h, .fun[data-at="pixel"] .today-card--game b, .fun[data-at="pixel"] .gtile2 b { font-size: .68rem; line-height: 1.6; font-weight: 400; } .fun[data-at="pixel"] .arc-score, .fun[data-at="pixel"] .kul-score { font-size: 1.6rem; } .fun[data-at="pixel"] .btn, .fun[data-at="pixel"] .chip, .fun[data-at="pixel"] .act, .fun[data-at="pixel"] .jump button, .fun[data-at="pixel"] .psearch { border-radius: 0 !important; box-shadow: 0 -3px 0 #000, 0 3px 0 #000, -3px 0 0 #000, 3px 0 0 #000, 3px 6px 0 rgba(0,0,0,.45) !important; } .fun[data-at="pixel"] .hcard, .fun[data-at="pixel"] .w, .fun[data-at="pixel"] .today-card, .fun[data-at="pixel"] .gtile2, .fun[data-at="pixel"] .coll-tile, .fun[data-at="pixel"] .coll-door, .fun[data-at="pixel"] .game-host, .fun[data-at="pixel"] .tabs { border-radius: 0 !important; box-shadow: 0 -4px 0 #000, 0 4px 0 #000, -4px 0 0 #000, 4px 0 0 #000 !important; } .fun[data-at="pixel"] .tabs__lens { border-radius: 0 !important; } .fun[data-at="pixel"] .sheet { border-radius: 0 !important; } /* ---------- Neon EDSA: night signs, chamfered corners, glow and scanlines ---------- */ :root.fun[data-at="neon"] { color-scheme: dark; --paper: #0a0a12; --stone: #12121c; --sand: #1c1c2a; --ink: #e8f6ff; --ink-soft: #b3cad8; --line: rgba(0,240,255,.2); --glass: rgba(10,10,18,.95); --orange: #fcee0a; --orange-press: #d9cc00; --on-orange: #0a0a12; --cream: #0a0a12; --panel: #0a0a12; --tile: #12121c; --edge: rgba(0,240,255,.35); --at-card: #12121c; --at-bar: #0a0a12; --at-tab: #00f0ff; --at-fab: #ff003c; --play: "Orbitron", "Rajdhani", system-ui; --at-ui: "Rajdhani", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke-width=%221.6%22 opacity=%22.55%22%3E%3Cpath d=%22M0 20h70l10 10h60%22 stroke=%22%2300f0ff%22/%3E%3Cpath d=%22M180 12h50l10-10h20%22 stroke=%22%23ff003c%22/%3E%3Cpath d=%22M20 60l12-12 12 12-12 12Z%22 stroke=%22%23fcee0a%22/%3E%3Cpath d=%22M200 70h40M200 76h28M200 82h16%22 stroke=%22%2300f0ff%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #0a0a12; --gink: #e8f6ff; --g2c: #ff003c; --g3c: #fcee0a; --g4c: #00f0ff; --gtile: #12121c; --gstroke: rgba(0,0,0,.8); } .fun[data-at="neon"] .sheet { background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(to bottom, transparent 0 58px, var(--cream) 132px), var(--doodle) 0 0 / 260px 260px repeat, var(--cream) !important; } .fun[data-at="neon"] .sheet__title, .fun[data-at="neon"] .hcard__t, .fun[data-at="neon"] .sec, .fun[data-at="neon"] .shelf-h { text-transform: uppercase; letter-spacing: .05em; font-weight: 900; text-shadow: 0 0 10px rgba(0,240,255,.55); } .fun[data-at="neon"] .btn, .fun[data-at="neon"] .chip, .fun[data-at="neon"] .act, .fun[data-at="neon"] .jump button { font-family: var(--at-ui); font-weight: 700; letter-spacing: .03em; border-radius: 0 !important; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 0 1.5px #00f0ff !important; } .fun[data-at="neon"] .btn:not(.btn--quiet) { box-shadow: none !important; } .fun[data-at="neon"] .hcard, .fun[data-at="neon"] .w, .fun[data-at="neon"] .today-card, .fun[data-at="neon"] .gtile2, .fun[data-at="neon"] .coll-tile, .fun[data-at="neon"] .coll-door { border-radius: 0 !important; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: inset 0 0 0 1.5px rgba(0,240,255,.45) !important; } .fun[data-at="neon"] .tabs { box-shadow: 0 0 0 1.5px rgba(0,240,255,.5), 0 0 24px rgba(0,240,255,.25) !important; } /* ---------- Tinted Mono: one hue from your accent, flat shades, Space Grotesk ---------- */ :root.fun[data-at="mono"] { color-scheme: light; --at-h: 230; --paper: oklch(97% .015 var(--at-h)); --stone: oklch(93% .025 var(--at-h)); --sand: oklch(86% .04 var(--at-h)); --ink: oklch(22% .045 var(--at-h)); --ink-soft: oklch(36% .05 var(--at-h)); --line: oklch(22% .045 var(--at-h) / .14); --glass: oklch(97% .015 var(--at-h) / .95); --orange: oklch(52% .17 var(--at-h)); --orange-press: oklch(44% .16 var(--at-h)); --on-orange: #fff; --cream: oklch(96% .02 var(--at-h)); --panel: oklch(96% .02 var(--at-h)); --tile: oklch(99.5% .005 var(--at-h)); --edge: oklch(80% .05 var(--at-h)); --at-card: oklch(99.5% .005 var(--at-h)); --at-bar: oklch(99.5% .005 var(--at-h)); --play: "Space Grotesk", system-ui; --doodle: none; --gbg: oklch(96% .02 var(--at-h)); --gink: oklch(22% .045 var(--at-h)); --g2c: oklch(52% .17 var(--at-h)); --g3c: oklch(75% .12 var(--at-h)); --g4c: oklch(88% .06 var(--at-h)); --gtile: #fff; --gstroke: rgba(255,255,255,.92); } .fun[data-at="mono"] .sheet { background: var(--cream) !important; } .fun[data-at="mono"] .sheet__title, .fun[data-at="mono"] .hcard__t, .fun[data-at="mono"] .sec, .fun[data-at="mono"] .shelf-h { font-weight: 700; letter-spacing: -.02em; } .fun[data-at="mono"] .hcard, .fun[data-at="mono"] .w, .fun[data-at="mono"] .today-card, .fun[data-at="mono"] .gtile2, .fun[data-at="mono"] .coll-tile { box-shadow: inset 0 0 0 1.5px var(--edge) !important; background: var(--at-card); } .fun[data-at="mono"] .gtile2, .fun[data-at="mono"] .coll-tile { --gc: var(--orange); --tc: var(--orange); } /* the theme picker: a swipe carousel of live previews */ .atp { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: none; } .atp::-webkit-scrollbar { display: none; } .atp-c { scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; } .atp-prev { position: relative; display: flex; flex-direction: column; gap: 8px; height: 132px; padding: 12px; border-radius: 18px; background: var(--pb); color: var(--pi); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; transition: transform .15s; } .atp-c.is-on .atp-prev { box-shadow: 0 0 0 3px var(--orange), 0 6px 18px rgba(0,0,0,.18); transform: translateY(-2px); } .atp-prev b { font: 400 1.05rem/1.1 var(--pf), system-ui; } .atp-prev--default b, .atp-prev--calm b { font-weight: 800; } .atp-sw { display: flex; gap: 5px; } .atp-sw i { width: 18px; height: 18px; border-radius: 50%; background: var(--p1); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--pi) 30%, transparent); } .atp-sw i:nth-child(2) { background: var(--p2); } .atp-sw i:nth-child(3) { background: var(--p3); } .atp-btn { margin-top: auto; align-self: flex-start; font-size: .78rem; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--p1); color: #fff; } .atp-prev--neon .atp-btn { color: #0a0a12; border-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .atp-prev--pixel .atp-btn, .atp-prev--pixel { border-radius: 0; } .atp-prev--pixel b { font-size: .7rem; line-height: 1.5; } .atp-prev--komiks { box-shadow: 0 0 0 2.5px #111, 4px 4px 0 #111; } .atp-prev--komiks .atp-btn { border: 2px solid #111; } .atp-prev--jeepney { background: linear-gradient(90deg, #e3262e 0 33.3%, #ffc20e 0 66.6%, #0b5fa5 0) top / 100% 6px no-repeat, var(--pb); } .atp-prev--jeepney b { text-shadow: 1.5px 1.5px 0 #ffc20e; } .atp-prev--sarisari { background: repeating-linear-gradient(90deg, #1e6fd9 0 14px, #fff 14px 28px) top / 100% 14px no-repeat, var(--pb); padding-top: 22px; } .atp-prev--sarisari b { color: #b81d17; } .atp-prev--mono { background: oklch(96% .02 260); } .atp-g { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); } .atp-b { font-size: .78rem; line-height: 1.3; } /* ======== wave 2 themes ======== */ /* ---------- Kalesa Intramuros: adobe walls, brass fittings, cobblestones and old-city serif ---------- */ :root.fun[data-at="kalesa"] { color-scheme: light; --paper: #efe4cf; --stone: #e6d8bd; --sand: #d3c29f; --ink: #2b1d12; --ink-soft: #4d3a28; --line: rgba(43,29,18,.16); --glass: rgba(239,228,207,.95); --orange: #8b2e1a; --orange-press: #6e2414; --on-orange: #fff8ec; --cream: #efe4cf; --panel: #efe4cf; --tile: #fbf5e8; --edge: rgba(43,29,18,.26); --at-card: #fbf5e8; --at-bar: #fbf5e8; --at-tab: #8b2e1a; --play: "Cinzel", "Cormorant Garamond", Georgia, serif; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke=%22%238b2e1a%22 stroke-width=%222%22 opacity=%22.5%22%3E%3Cpath d=%22M20 40c0-14 20-14 20 0s-20 14-20 0M40 40h40M80 40c0-14 20-14 20 0s-20 14-20 0%22/%3E%3Cpath d=%22M150 30q20-26 40 0t40 0%22 stroke=%22%232f5d50%22/%3E%3Cpath d=%22M200 120c10 0 14 10 6 16s-18-2-12-12 22-6 22 8%22/%3E%3C/g%3E%3Cg fill=%22%23c9a04a%22 opacity=%22.55%22%3E%3Ccircle cx=%2260%22 cy=%22100%22 r=%223%22/%3E%3Ccircle cx=%22140%22 cy=%2280%22 r=%222.5%22/%3E%3Ccircle cx=%22230%22 cy=%2260%22 r=%223%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #efe4cf; --gink: #2b1d12; --g2c: #8b2e1a; --g3c: #c9a04a; --g4c: #2f5d50; --gtile: #fbf5e8; --gstroke: rgba(251,245,232,.95); } .fun[data-at="kalesa"] .sheet__title, .fun[data-at="kalesa"] .hcard__t, .fun[data-at="kalesa"] .sec, .fun[data-at="kalesa"] .shelf-h { letter-spacing: .03em; } .fun[data-at="kalesa"] .hcard, .fun[data-at="kalesa"] .w, .fun[data-at="kalesa"] .today-card, .fun[data-at="kalesa"] .gtile2, .fun[data-at="kalesa"] .coll-tile { box-shadow: inset 0 0 0 1.5px #c9a04a, inset 0 0 0 4px var(--at-card), inset 0 0 0 5px rgba(201,160,74,.6), 0 4px 0 var(--edge) !important; } .fun[data-at="kalesa"] .btn:not(.btn--quiet) { box-shadow: inset 0 0 0 2px #c9a04a, 0 4px 0 #4e1a0e; } /* ---------- Fiesta Banderitas: town-fiesta flags, candy colors and a bold rounded sign font ---------- */ :root.fun[data-at="fiesta"] { color-scheme: light; --paper: #fff8ec; --stone: #fff0d6; --sand: #ffd9a8; --ink: #1d1d1d; --ink-soft: #403830; --line: rgba(29,29,29,.14); --glass: rgba(255,248,236,.95); --orange: #e8335f; --orange-press: #c41f49; --on-orange: #fff; --cream: #fff8ec; --panel: #fff8ec; --tile: #ffffff; --edge: rgba(232,51,95,.28); --at-card: #ffffff; --at-bar: #ffffff; --at-tab: #e8335f; --play: "Lilita One", "Baloo 2", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cpath d=%22M0 8q65 22 130 0t130 0%22 fill=%22none%22 stroke=%22%231d1d1d%22 stroke-width=%221.5%22/%3E%3Cpath d=%22M4 8 l13 0 -6.5 18Z%22 fill=%22%23ff4f7b%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M24 8 l13 0 -6.5 18Z%22 fill=%22%23ffd23f%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M44 8 l13 0 -6.5 18Z%22 fill=%22%232bb3ff%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M64 8 l13 0 -6.5 18Z%22 fill=%22%2316884a%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M84 8 l13 0 -6.5 18Z%22 fill=%22%23ff8a3d%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M104 8 l13 0 -6.5 18Z%22 fill=%22%239b6ad6%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M124 8 l13 0 -6.5 18Z%22 fill=%22%23ff4f7b%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M144 8 l13 0 -6.5 18Z%22 fill=%22%23ffd23f%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M164 8 l13 0 -6.5 18Z%22 fill=%22%232bb3ff%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M184 8 l13 0 -6.5 18Z%22 fill=%22%2316884a%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M204 8 l13 0 -6.5 18Z%22 fill=%22%23ff8a3d%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M224 8 l13 0 -6.5 18Z%22 fill=%22%239b6ad6%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3Cpath d=%22M244 8 l13 0 -6.5 18Z%22 fill=%22%23ff4f7b%22 stroke=%22%231d1d1d%22 stroke-width=%221%22/%3E%3C/svg%3E"); --gbg: #fff8ec; --gink: #1d1d1d; --g2c: #ff4f7b; --g3c: #ffd23f; --g4c: #2bb3ff; --gtile: #fff; --gstroke: rgba(255,255,255,.95); } .fun[data-at="fiesta"] .sheet { background: var(--doodle) 0 0 / 260px 260px repeat-x, var(--cream) !important; } .fun[data-at="fiesta"] .sheet__title, .fun[data-at="fiesta"] .hcard__t, .fun[data-at="fiesta"] .sec, .fun[data-at="fiesta"] .shelf-h { font-weight: 400; } .fun[data-at="fiesta"] .hcard, .fun[data-at="fiesta"] .w, .fun[data-at="fiesta"] .today-card { background: repeating-linear-gradient(90deg, #ff4f7b 0 16px, #ffd23f 16px 32px, #2bb3ff 32px 48px) top / 100% 5px no-repeat, var(--at-card); } /* ---------- Banig: the woven mat, magenta and indigo diamonds, slab headings ---------- */ :root.fun[data-at="banig"] { color-scheme: light; --paper: #f3e3c3; --stone: #e9d3a6; --sand: #d9b77e; --ink: #2b1a10; --ink-soft: #4a3523; --line: rgba(43,26,16,.16); --glass: rgba(243,227,195,.95); --orange: #b0306a; --orange-press: #8d2454; --on-orange: #fff; --cream: #f3e3c3; --panel: #f3e3c3; --tile: #fbf3e2; --edge: rgba(43,26,16,.28); --at-card: #fbf3e2; --at-bar: #fbf3e2; --at-tab: #b0306a; --play: "Alfa Slab One", Georgia, serif; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22%3E%3Crect width=%2264%22 height=%2264%22 fill=%22none%22/%3E%3Cg opacity=%22.38%22%3E%3Cpath d=%22M0 0h32v32H0z%22 fill=%22%23b0306a%22/%3E%3Cpath d=%22M32 32h32v32H32z%22 fill=%22%232c3e8c%22/%3E%3Cpath d=%22M16 0l16 16-16 16L0 16z%22 fill=%22%23e0a42a%22/%3E%3Cpath d=%22M48 32l16 16-16 16-16-16z%22 fill=%22%23e0a42a%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #f3e3c3; --gink: #2b1a10; --g2c: #b0306a; --g3c: #e0a42a; --g4c: #2c3e8c; --gtile: #fbf3e2; --gstroke: rgba(251,243,226,.95); } .fun[data-at="banig"] .sheet { background: linear-gradient(to bottom, transparent 0 22px, var(--cream) 22px), var(--doodle) 0 0 / 32px 32px repeat, var(--cream) !important; } .fun[data-at="banig"] .sheet__title, .fun[data-at="banig"] .hcard__t, .fun[data-at="banig"] .sec, .fun[data-at="banig"] .shelf-h { font-weight: 400; } .fun[data-at="banig"] .hcard, .fun[data-at="banig"] .w, .fun[data-at="banig"] .today-card { background: repeating-linear-gradient(45deg, #b0306a 0 6px, #2c3e8c 6px 12px, #e0a42a 12px 18px) top / 100% 6px no-repeat, var(--at-card); } /* ---------- Capiz Parol: pearly capiz-shell windows and star lanterns, a soft serif ---------- */ :root.fun[data-at="capiz"] { color-scheme: light; --paper: #f5f1e8; --stone: #efe8da; --sand: #ddd2bd; --ink: #2f2a24; --ink-soft: #4b443b; --line: rgba(47,42,36,.14); --glass: rgba(245,241,232,.95); --orange: #b44a74; --orange-press: #923a5d; --on-orange: #fff; --cream: #f5f1e8; --panel: #f5f1e8; --tile: #fffdf8; --edge: rgba(185,169,143,.5); --at-card: linear-gradient(160deg, #fffdf8, #f6eef2); --at-bar: #fffdf8; --at-tab: #b44a74; --play: "Cormorant Garamond", Georgia, serif; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke=%22%23b9a98f%22 stroke-width=%221.4%22 opacity=%22.55%22%3E%3Cpath d=%22M0 0h260v260H0zM65 0v260M130 0v260M195 0v260M0 65h260M0 130h260M0 195h260%22/%3E%3C/g%3E%3Cg transform=%22translate(195 65)%22 stroke=%22%23c0567f%22 stroke-width=%221.6%22 fill=%22%23f6dbe6%22 opacity=%22.9%22%3E%3Cpath d=%22M0-24 7-7 24 0 7 7 0 24-7 7-24 0-7-7Z%22/%3E%3Ccircle r=%225%22 fill=%22%23e8c46a%22/%3E%3C/g%3E%3Cg transform=%22translate(65 160)%22 stroke=%22%236aa7a0%22 stroke-width=%221.4%22 fill=%22%23e3f1ee%22 opacity=%22.8%22%3E%3Cpath d=%22M0-16 5-5 16 0 5 5 0 16-5 5-16 0-5-5Z%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #f5f1e8; --gink: #2f2a24; --g2c: #c0567f; --g3c: #e8c46a; --g4c: #6aa7a0; --gtile: #fffdf8; --gstroke: rgba(255,253,248,.95); } .fun[data-at="capiz"] .sheet__title, .fun[data-at="capiz"] .hcard__t, .fun[data-at="capiz"] .sec, .fun[data-at="capiz"] .shelf-h { font-weight: 700; letter-spacing: .01em; } .fun[data-at="capiz"] .sheet__title { font-size: calc(var(--t-large, 1.9rem) * 1.15); } .fun[data-at="capiz"] .hcard, .fun[data-at="capiz"] .w, .fun[data-at="capiz"] .today-card { box-shadow: inset 0 0 0 1.5px rgba(185,169,143,.6), 0 3px 0 var(--edge) !important; } /* ---------- Vaporwave Mall: pastel dusk, grid floor, palm silhouettes and a wide display face ---------- */ :root.fun[data-at="vapor"] { color-scheme: light; --paper: #fde7f3; --stone: #f7d8ec; --sand: #e9c3e6; --ink: #2a1446; --ink-soft: #452a66; --line: rgba(42,20,70,.16); --glass: rgba(253,231,243,.95); --orange: #e23d8f; --orange-press: #c22b76; --on-orange: #fff; --cream: #fde7f3; --panel: #fde7f3; --tile: #fff6fb; --edge: rgba(138,109,255,.35); --at-card: linear-gradient(170deg, #fff6fb, #eef9fb); --at-bar: #fff6fb; --at-tab: #8a6dff; --play: "Audiowide", "Syne", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Ccircle cx=%22200%22 cy=%2260%22 r=%2234%22 fill=%22%23ffb86b%22 opacity=%22.55%22/%3E%3Cg stroke=%22%23ff4fa3%22 stroke-width=%221.2%22 opacity=%22.5%22 fill=%22none%22%3E%3Cpath d=%22M0 110h260M0 124h260M0 142h260M0 166h260M130 100l-130 120M130 100l130 120M130 100v130M130 100l-60 140M130 100l60 140%22/%3E%3C/g%3E%3Cpath d=%22M40 90c0-20 10-40 6-60M46 30c-10-4-24 0-30 8M46 30c8-8 22-8 30-2M46 30c-4-10-14-16-24-14%22 stroke=%22%234de1d6%22 stroke-width=%223%22 fill=%22none%22 opacity=%22.6%22/%3E%3C/svg%3E"); --gbg: #fde7f3; --gink: #2a1446; --g2c: #ff4fa3; --g3c: #ffb86b; --g4c: #4de1d6; --gtile: #fff6fb; --gstroke: rgba(255,246,251,.95); } .fun[data-at="vapor"] .sheet__title, .fun[data-at="vapor"] .hcard__t, .fun[data-at="vapor"] .sec, .fun[data-at="vapor"] .shelf-h { font-weight: 400; letter-spacing: .04em; text-shadow: 2px 2px 0 #4de1d6; } .fun[data-at="vapor"] .btn:not(.btn--quiet) { background: linear-gradient(90deg, #ff4fa3, #8a6dff); box-shadow: 0 4px 0 #5a3fc0; } /* ---------- Aero Y2K: glossy aqua glass, gel buttons and bubbles ---------- */ :root.fun[data-at="aero"] { color-scheme: light; --paper: #e8f6ff; --stone: #d6eefc; --sand: #b9e0f7; --ink: #0b2a44; --ink-soft: #24435c; --line: rgba(11,42,68,.14); --glass: rgba(232,246,255,.92); --orange: #0f7ae5; --orange-press: #0a62bb; --on-orange: #fff; --cream: #e8f6ff; --panel: #e8f6ff; --tile: #ffffff; --edge: rgba(15,122,229,.28); --at-card: linear-gradient(180deg, #ffffff, #eef8ff); --at-bar: rgba(255,255,255,.95); --at-tab: #0f7ae5; --play: "Varela Round", "Baloo 2", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg opacity=%22.6%22%3E%3Ccircle cx=%2240%22 cy=%2240%22 r=%2216%22 fill=%22%23d6f0ff%22 stroke=%22%237cc4ff%22/%3E%3Ccircle cx=%2234%22 cy=%2234%22 r=%224%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22180%22 cy=%2270%22 r=%2224%22 fill=%22%23e2ffd6%22 stroke=%22%237fdc4a%22/%3E%3Ccircle cx=%22172%22 cy=%2261%22 r=%226%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22110%22 cy=%22150%22 r=%2210%22 fill=%22%23d6f0ff%22 stroke=%22%237cc4ff%22/%3E%3Ccircle cx=%22106%22 cy=%22146%22 r=%223%22 fill=%22%23fff%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #e8f6ff; --gink: #0b2a44; --g2c: #1a8cff; --g3c: #7fdc4a; --g4c: #9fe3ff; --gtile: #fff; --gstroke: rgba(255,255,255,.95); } .fun[data-at="aero"] .btn:not(.btn--quiet), .fun[data-at="aero"] .chip.is-on, .fun[data-at="aero"] .jump button.is-on { background: linear-gradient(180deg, #5fb6ff 0%, #1a8cff 48%, #0f6fd1 52%, #3fa2ff 100%) !important; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 8px rgba(15,122,229,.35) !important; border-radius: 999px; } .fun[data-at="aero"] .chip, .fun[data-at="aero"] .btn--quiet { background: linear-gradient(180deg, #ffffff, #e3f2ff 50%, #d2eaff 51%, #f2f9ff); box-shadow: inset 0 0 0 1px rgba(15,122,229,.3), 0 2px 6px rgba(15,122,229,.15) !important; } .fun[data-at="aero"] .hcard, .fun[data-at="aero"] .w, .fun[data-at="aero"] .today-card { box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(15,122,229,.16) !important; } /* ---------- Game Boy DMG: four greens, square pixels ---------- */ :root.fun[data-at="dmg"] { color-scheme: light; --paper: #9bbc0f; --stone: #8bac0f; --sand: #7a9c0e; --ink: #0f380f; --ink-soft: #0f380f; --line: rgba(15,56,15,.25); --glass: rgba(155,188,15,.96); --orange: #0f380f; --orange-press: #082408; --on-orange: #9bbc0f; --cream: #9bbc0f; --panel: #9bbc0f; --tile: #8bac0f; --edge: #306230; --at-card: #8bac0f; --at-bar: #8bac0f; --at-tab: #0f380f; --play: "Pixelify Sans", "DotGothic16", monospace; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22 shape-rendering=%22crispEdges%22%3E%3Cg fill=%22%23306230%22 opacity=%22.5%22%3E%3Crect x=%2220%22 y=%2220%22 width=%228%22 height=%228%22/%3E%3Crect x=%2228%22 y=%2228%22 width=%228%22 height=%228%22/%3E%3Crect x=%22140%22 y=%2240%22 width=%228%22 height=%228%22/%3E%3Crect x=%22200%22 y=%22100%22 width=%2216%22 height=%228%22/%3E%3Crect x=%2260%22 y=%22120%22 width=%228%22 height=%2216%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #9bbc0f; --gink: #0f380f; --g2c: #306230; --g3c: #0f380f; --g4c: #8bac0f; --gtile: #8bac0f; --gstroke: rgba(155,188,15,.95); } .fun[data-at="dmg"] .sheet__title, .fun[data-at="dmg"] .hcard__t, .fun[data-at="dmg"] .sec, .fun[data-at="dmg"] .shelf-h { font-weight: 700; } .fun[data-at="dmg"] .btn, .fun[data-at="dmg"] .chip, .fun[data-at="dmg"] .act, .fun[data-at="dmg"] .jump button, .fun[data-at="dmg"] .psearch, .fun[data-at="dmg"] .hcard, .fun[data-at="dmg"] .w, .fun[data-at="dmg"] .today-card, .fun[data-at="dmg"] .gtile2, .fun[data-at="dmg"] .coll-tile, .fun[data-at="dmg"] .coll-door, .fun[data-at="dmg"] .game-host, .fun[data-at="dmg"] .tabs { border-radius: 0 !important; box-shadow: 0 -3px 0 #0f380f, 0 3px 0 #0f380f, -3px 0 0 #0f380f, 3px 0 0 #0f380f !important; } .fun[data-at="dmg"] .gtile2, .fun[data-at="dmg"] .coll-tile { background: var(--tile); --gc: color-mix(in srgb, var(--ink) 70%, var(--tile)); --tc: color-mix(in srgb, var(--ink) 70%, var(--tile)); } .fun[data-at="dmg"] .sheet { border-radius: 0 !important; } .fun[data-at="dmg"] .hub-pill--coin { background: var(--tile); color: var(--ink); } .atp-prev--kalesa b { color: #8b2e1a; } .atp-prev--kalesa { box-shadow: inset 0 0 0 2px #c9a04a; } .atp-prev--fiesta { background: repeating-linear-gradient(90deg, #ff4f7b 0 14px, #ffd23f 14px 28px, #2bb3ff 28px 42px) top / 100% 8px no-repeat, var(--pb); } .atp-prev--banig { background: repeating-linear-gradient(45deg, #b0306a 0 6px, #2c3e8c 6px 12px, #e0a42a 12px 18px) top / 100% 10px no-repeat, var(--pb); } .atp-prev--capiz { background: linear-gradient(160deg, #fffdf8, #f6e7ee); } .atp-prev--capiz b { font-weight: 700; font-size: 1.2rem; } .atp-prev--vapor { background: linear-gradient(180deg, #ffd1ea, #c7f2f6); } .atp-prev--vapor b { text-shadow: 2px 2px 0 #4de1d6; } .atp-prev--aero { background: linear-gradient(180deg, #ffffff, #cfeaff); } .atp-prev--aero .atp-btn { background: linear-gradient(180deg, #5fb6ff, #1a8cff 50%, #0f6fd1 51%, #3fa2ff); } .atp-prev--dmg, .atp-prev--dmg .atp-btn { border-radius: 0; } .atp-prev--dmg .atp-btn { color: #9bbc0f; } .fun[data-at="kalesa"] .sheet__title { font-size: calc(var(--t-large, 1.9rem) * .78); line-height: 1.15; } .fun[data-at="capiz"] .sheet__title { font-size: calc(var(--t-large, 1.9rem) * 1.15); line-height: 1; } .fun[data-at="capiz"] .hcard__t, .fun[data-at="capiz"] .sec, .fun[data-at="capiz"] .shelf-h { font-size: 1.2em; } .fun[data-at="vapor"] .sheet__title { font-size: calc(var(--t-large, 1.9rem) * .82); line-height: 1.15; } /* ======== wave 3 themes ======== */ /* ---------- Okir: Maranao scrollwork in red, gold and green ---------- */ :root.fun[data-at="okir"] { color-scheme: light; --paper: #fbf1dc; --stone: #f2e4c5; --sand: #e0cca1; --ink: #24130a; --ink-soft: #47301d; --line: rgba(36,19,10,.16); --glass: rgba(251,241,220,.95); --orange: #b5122e; --orange-press: #8f0e24; --on-orange: #fff; --cream: #fbf1dc; --panel: #fbf1dc; --tile: #fffaf0; --edge: rgba(36,19,10,.28); --at-card: #fffaf0; --at-bar: #fffaf0; --at-tab: #b5122e; --play: "Cinzel Decorative", "Cinzel", Georgia, serif; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 opacity=%22.7%22%3E%3Cpath d=%22M10 40c20-30 50-30 60 0s-20 30-30 10 10-20 18-8%22 stroke=%22%23b5122e%22/%3E%3Cpath d=%22M90 30c14 20 40 20 46 0s-14-22-22-6 6 14 14 4%22 stroke=%22%231d6b3a%22/%3E%3Cpath d=%22M170 44c20-26 50-24 56 4s-22 24-26 8 12-14 16-4%22 stroke=%22%23e0a500%22/%3E%3Cpath d=%22M40 120c16 18 40 16 44-4s-18-20-22-6 10 12 14 2%22 stroke=%22%231d6b3a%22/%3E%3Cpath d=%22M150 130c18-22 44-20 48 2s-20 20-24 6 12-12 14-2%22 stroke=%22%23b5122e%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #fbf1dc; --gink: #24130a; --g2c: #b5122e; --g3c: #e0a500; --g4c: #1d6b3a; --gtile: #fffaf0; --gstroke: rgba(255,250,240,.95); } .fun[data-at="okir"] .sheet__title { font-size: calc(var(--t-large, 1.9rem) * .8); line-height: 1.15; } .fun[data-at="okir"] .hcard, .fun[data-at="okir"] .w, .fun[data-at="okir"] .today-card { background: linear-gradient(90deg, #b5122e 0 40%, #e0a500 40% 60%, #1d6b3a 60%) top / 100% 5px no-repeat, var(--at-card); } /* ---------- Vinta: striped sails over Zamboanga blue ---------- */ :root.fun[data-at="vinta"] { color-scheme: light; --paper: #e8f6f6; --stone: #d4eeee; --sand: #b5dfe0; --ink: #0c2a3a; --ink-soft: #24465a; --line: rgba(12,42,58,.14); --glass: rgba(232,246,246,.95); --orange: #d33326; --orange-press: #ab281d; --on-orange: #fff; --cream: #e8f6f6; --panel: #e8f6f6; --tile: #ffffff; --edge: rgba(12,42,58,.22); --at-card: #ffffff; --at-bar: #ffffff; --at-tab: #1f6feb; --play: "Fredoka", "Baloo 2", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg transform=%22translate(30 10)%22%3E%3Cpath d=%22M0 70 30 0 60 70Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M6 70 L30 0 L14 70Z%22 fill=%22%23e23b2e%22/%3E%3Cpath d=%22M14 70 L30 0 L22 70Z%22 fill=%22%23f2c200%22/%3E%3Cpath d=%22M22 70 L30 0 L30 70Z%22 fill=%22%231f9e5a%22/%3E%3Cpath d=%22M30 70 L30 0 L38 70Z%22 fill=%22%231f6feb%22/%3E%3Cpath d=%22M38 70 L30 0 L46 70Z%22 fill=%22%23e23b2e%22/%3E%3Cpath d=%22M46 70 L30 0 L54 70Z%22 fill=%22%23f2c200%22/%3E%3Cpath d=%22M-6 74h72l-10 10H4Z%22 fill=%22%238a5a2b%22/%3E%3C/g%3E%3Cpath d=%22M0 110q20-10 40 0t40 0 40 0 40 0 40 0 40 0 40 0%22 fill=%22none%22 stroke=%22%233aa6c9%22 stroke-width=%222.4%22 opacity=%22.6%22/%3E%3Cpath d=%22M0 124q20-10 40 0t40 0 40 0 40 0 40 0 40 0 40 0%22 fill=%22none%22 stroke=%22%233aa6c9%22 stroke-width=%222%22 opacity=%22.35%22/%3E%3C/svg%3E"); --gbg: #e8f6f6; --gink: #0c2a3a; --g2c: #e23b2e; --g3c: #f2c200; --g4c: #1f9e5a; --gtile: #fff; --gstroke: rgba(255,255,255,.95); } .fun[data-at="vinta"] .hcard, .fun[data-at="vinta"] .w, .fun[data-at="vinta"] .today-card { background: repeating-linear-gradient(90deg, #e23b2e 0 10px, #f2c200 10px 20px, #1f9e5a 20px 30px, #1f6feb 30px 40px) top / 100% 6px no-repeat, var(--at-card); } /* ---------- Barong Pina: sheer pina cloth, fine embroidery, a classic serif ---------- */ :root.fun[data-at="barong"] { color-scheme: light; --paper: #f8f4ea; --stone: #f0e9d9; --sand: #ddd2bb; --ink: #2a2620; --ink-soft: #4a443a; --line: rgba(42,38,32,.14); --glass: rgba(248,244,234,.95); --orange: #7a5c2e; --orange-press: #5f4723; --on-orange: #fff; --cream: #f8f4ea; --panel: #f8f4ea; --tile: rgba(255,253,247,.9); --edge: rgba(138,109,59,.35); --at-card: rgba(255,253,247,.92); --at-bar: #fffdf7; --at-tab: #7a5c2e; --play: "Playfair Display", Georgia, serif; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22none%22 stroke=%22%238a6d3b%22 stroke-width=%221.2%22 opacity=%22.55%22%3E%3Cpath d=%22M0 18h260M0 22h260%22 stroke-dasharray=%222 3%22/%3E%3Cg transform=%22translate(30 50)%22%3E%3Ccircle r=%226%22/%3E%3Cpath d=%22M0-6c3-8 10-8 10 0M0 6c-3 8-10 8-10 0M6 0c8 3 8 10 0 10M-6 0c-8-3-8-10 0-10%22/%3E%3C/g%3E%3Cg transform=%22translate(95 50)%22%3E%3Ccircle r=%226%22/%3E%3Cpath d=%22M0-6c3-8 10-8 10 0M0 6c-3 8-10 8-10 0M6 0c8 3 8 10 0 10M-6 0c-8-3-8-10 0-10%22/%3E%3C/g%3E%3Cg transform=%22translate(160 50)%22%3E%3Ccircle r=%226%22/%3E%3Cpath d=%22M0-6c3-8 10-8 10 0M0 6c-3 8-10 8-10 0M6 0c8 3 8 10 0 10M-6 0c-8-3-8-10 0-10%22/%3E%3C/g%3E%3Cg transform=%22translate(225 50)%22%3E%3Ccircle r=%226%22/%3E%3Cpath d=%22M0-6c3-8 10-8 10 0M0 6c-3 8-10 8-10 0M6 0c8 3 8 10 0 10M-6 0c-8-3-8-10 0-10%22/%3E%3C/g%3E%3Cpath d=%22M0 78q32 14 65 0t65 0 65 0 65 0%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #f8f4ea; --gink: #2a2620; --g2c: #8a6d3b; --g3c: #d9cdb3; --g4c: #3b4a5a; --gtile: #fffdf7; --gstroke: rgba(255,253,247,.95); } .fun[data-at="barong"] .hcard, .fun[data-at="barong"] .w, .fun[data-at="barong"] .today-card, .fun[data-at="barong"] .gtile2 { box-shadow: inset 0 0 0 1px rgba(138,109,59,.45), inset 0 0 0 4px var(--at-card), inset 0 0 0 5px rgba(138,109,59,.25) !important; } .fun[data-at="barong"] .sheet__title { font-style: italic; } /* ---------- Bahay Kubo: bamboo, nipa and leaf green, hand-lettered titles ---------- */ :root.fun[data-at="kubo"] { color-scheme: light; --paper: #f4ecd2; --stone: #ebdfbd; --sand: #d8c690; --ink: #2a2414; --ink-soft: #4a4028; --line: rgba(42,36,20,.16); --glass: rgba(244,236,210,.95); --orange: #4f8424; --orange-press: #3d671b; --on-orange: #fff; --cream: #f4ecd2; --panel: #f4ecd2; --tile: #fbf6e6; --edge: rgba(140,90,43,.35); --at-card: #fbf6e6; --at-bar: #fbf6e6; --at-tab: #4f8424; --play: "Gochi Hand", "Baloo 2", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg stroke=%22%238c5a2b%22 stroke-width=%221.2%22 opacity=%22.45%22%3E%3Cpath d=%22M0 4h260%22/%3E%3Cpath d=%22M0 11h260%22/%3E%3Cpath d=%22M0 18h260%22/%3E%3Cpath d=%22M0 25h260%22/%3E%3Cpath d=%22M0 32h260%22/%3E%3Cpath d=%22M0 39h260%22/%3E%3C/g%3E%3Cg fill=%22%235a8f29%22 opacity=%22.6%22%3E%3Cpath d=%22M200 60c-20-10-30-30-20-40 10 14 24 20 20 40Z%22/%3E%3Cpath d=%22M220 66c4-20 22-32 34-26-14 8-20 22-34 26Z%22/%3E%3Cpath d=%22M40 70c-14-16-12-36 0-40 4 16 14 26 0 40Z%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #f4ecd2; --gink: #2a2414; --g2c: #5a8f29; --g3c: #c8a24a; --g4c: #8c5a2b; --gtile: #fbf6e6; --gstroke: rgba(251,246,230,.95); } .fun[data-at="kubo"] .sheet__title { font-size: calc(var(--t-large, 1.9rem) * 1.12); line-height: 1; } .fun[data-at="kubo"] .hcard, .fun[data-at="kubo"] .w, .fun[data-at="kubo"] .today-card { background: repeating-linear-gradient(90deg, #c8a24a 0 22px, #b08a3a 22px 24px) top / 100% 6px no-repeat, var(--at-card); } /* ---------- Desktop '95: grey bevels, navy title bars and a teal desk ---------- */ :root.fun[data-at="desk95"] { color-scheme: light; --paper: #c0c0c0; --stone: #b4b4b4; --sand: #a0a0a0; --ink: #000000; --ink-soft: #1e1e1e; --line: rgba(0,0,0,.25); --glass: rgba(192,192,192,.98); --orange: #000080; --orange-press: #00005a; --on-orange: #fff; --cream: #c0c0c0; --panel: #c0c0c0; --tile: #c0c0c0; --edge: #808080; --at-card: #c0c0c0; --at-bar: #c0c0c0; --at-tab: #000080; --play: "Share Tech Mono", ui-monospace, monospace; --doodle: none; --gbg: #008080; --gink: #000000; --g2c: #000080; --g3c: #ffff00; --g4c: #c0c0c0; --gtile: #c0c0c0; --gstroke: rgba(255,255,255,.95); } .fun[data-at="desk95"] .sheet { background: #c0c0c0 !important; border-radius: 0 !important; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #808080 !important; } .fun[data-at="desk95"] .sheet__head { background: linear-gradient(90deg, #000080, #1084d0); } .fun[data-at="desk95"] .sheet__title { color: #fff; font-weight: 400; font-size: calc(var(--t-large, 1.9rem) * .7); } .fun[data-at="desk95"] .btn, .fun[data-at="desk95"] .chip, .fun[data-at="desk95"] .act, .fun[data-at="desk95"] .jump button, .fun[data-at="desk95"] .psearch, .fun[data-at="desk95"] .hcard, .fun[data-at="desk95"] .w, .fun[data-at="desk95"] .today-card, .fun[data-at="desk95"] .gtile2, .fun[data-at="desk95"] .coll-tile, .fun[data-at="desk95"] .coll-door, .fun[data-at="desk95"] .tabs, .fun[data-at="desk95"] .hub-pill { border-radius: 0 !important; background: #c0c0c0 !important; color: #000 !important; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #808080 !important; } .fun[data-at="desk95"] .btn:active, .fun[data-at="desk95"] .chip:active { box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #fff, inset 2px 2px 0 #808080 !important; } .fun[data-at="desk95"] .game-host { border-radius: 0; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff; } /* ---------- Riso Print: paper grain, fluorescent pink and blue inks, a little misregistered ---------- */ :root.fun[data-at="riso"] { color-scheme: light; --paper: #f7f1e3; --stone: #efe7d3; --sand: #ddd2b9; --ink: #1d1d1b; --ink-soft: #3d3b36; --line: rgba(29,29,27,.16); --glass: rgba(247,241,227,.95); --orange: #e8148f; --orange-press: #c10e76; --on-orange: #fff; --cream: #f7f1e3; --panel: #f7f1e3; --tile: #fffaf0; --edge: rgba(0,120,191,.45); --at-card: #fffaf0; --at-bar: #fffaf0; --at-tab: #0078bf; --play: "Bricolage Grotesque", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22 viewBox=%220 0 200 200%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0%22/%3E%3C/filter%3E%3Crect width=%22200%22 height=%22200%22 filter=%22url(%23n)%22/%3E%3Ccircle cx=%22150%22 cy=%2240%22 r=%2226%22 fill=%22%23ff48b0%22 opacity=%22.55%22 style=%22mix-blend-mode:multiply%22/%3E%3Ccircle cx=%22168%22 cy=%2254%22 r=%2222%22 fill=%22%230078bf%22 opacity=%22.5%22 style=%22mix-blend-mode:multiply%22/%3E%3C/svg%3E"); --gbg: #f7f1e3; --gink: #1d1d1b; --g2c: #ff48b0; --g3c: #ffe800; --g4c: #0078bf; --gtile: #fffaf0; --gstroke: rgba(255,250,240,.95); } .fun[data-at="riso"] .sheet { background: var(--doodle) 0 0 / 200px 200px repeat, var(--cream) !important; } .fun[data-at="riso"] .sheet__title, .fun[data-at="riso"] .hcard__t, .fun[data-at="riso"] .sec, .fun[data-at="riso"] .shelf-h { text-shadow: 2px 1px 0 rgba(255,72,176,.55), -1px -1px 0 rgba(0,120,191,.45); } .fun[data-at="riso"] .hcard, .fun[data-at="riso"] .w, .fun[data-at="riso"] .today-card, .fun[data-at="riso"] .gtile2, .fun[data-at="riso"] .btn { box-shadow: 3px 3px 0 rgba(255,72,176,.7), -2px -1px 0 rgba(0,120,191,.55) !important; } .atp-prev--okir { background: linear-gradient(90deg, #b5122e 0 40%, #e0a500 40% 60%, #1d6b3a 60%) top / 100% 8px no-repeat, var(--pb); } .atp-prev--okir b { font-size: .86rem; } .atp-prev--vinta { background: repeating-linear-gradient(90deg, #e23b2e 0 8px, #f2c200 8px 16px, #1f9e5a 16px 24px, #1f6feb 24px 32px) top / 100% 10px no-repeat, var(--pb); } .atp-prev--barong b { font-style: italic; font-weight: 700; } .atp-prev--barong { box-shadow: inset 0 0 0 1px rgba(138,109,59,.45), inset 0 0 0 5px var(--pb), inset 0 0 0 6px rgba(138,109,59,.3); } .atp-prev--kubo { background: repeating-linear-gradient(90deg, #c8a24a 0 16px, #b08a3a 16px 18px) top / 100% 10px no-repeat, var(--pb); } .atp-prev--kubo b { font-size: 1.25rem; } .atp-prev--desk95 { border-radius: 0; background: linear-gradient(90deg, #000080, #1084d0) top / 100% 26px no-repeat, #c0c0c0; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000; } .atp-prev--desk95 b { color: #fff; } .atp-prev--desk95 .atp-btn { border-radius: 0; background: #c0c0c0; color: #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000; } .atp-prev--riso b { text-shadow: 2px 1px 0 rgba(255,72,176,.6), -1px -1px 0 rgba(0,120,191,.5); } .atp-prev--riso .atp-btn { box-shadow: 3px 3px 0 rgba(0,120,191,.6); } /* ======== wave 4 and the later batch ======== */ :root.fun[data-at="kalayaan"] { color-scheme: light; --paper: #fbfbf7; --stone: #f1f1ea; --sand: #dcdccf; --ink: #10162b; --ink-soft: #2c3350; --line: rgba(16,22,43,.14); --glass: rgba(251,251,247,.95); --orange: #0038a8; --orange-press: #002b82; --on-orange: #fff; --cream: #fbfbf7; --panel: #fbfbf7; --tile: #ffffff; --edge: rgba(0,56,168,.25); --at-card: #ffffff; --at-bar: #ffffff; --at-tab: #ce1126; --play: "Big Shoulders Display", "Rajdhani", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg opacity=%22.7%22%3E%3Ccircle cx=%2240%22 cy=%2234%22 r=%229%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M51.2 34.0 L59.7 36.4 L59.7 31.6Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M48.0 42.0 L52.2 49.6 L55.6 46.2Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M40.0 45.2 L37.6 53.7 L42.4 53.7Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M32.0 42.0 L24.4 46.2 L27.8 49.6Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M28.8 34.0 L20.3 31.6 L20.3 36.4Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M32.0 26.0 L27.8 18.4 L24.4 21.8Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M40.0 22.8 L42.4 14.3 L37.6 14.3Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M48.0 26.0 L55.6 21.8 L52.2 18.4Z%22 fill=%22%23fcd116%22/%3E%3Ccircle cx=%22200%22 cy=%2260%22 r=%226%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M207.5 60.0 L213.1 61.6 L213.1 58.4Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M205.3 65.3 L208.1 70.4 L210.4 68.1Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M200.0 67.5 L198.4 73.1 L201.6 73.1Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M194.7 65.3 L189.6 68.1 L191.9 70.4Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M192.5 60.0 L186.9 58.4 L186.9 61.6Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M194.7 54.7 L191.9 49.6 L189.6 51.9Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M200.0 52.5 L201.6 46.9 L198.4 46.9Z%22 fill=%22%23fcd116%22/%3E%3Cpath d=%22M205.3 54.7 L210.4 51.9 L208.1 49.6Z%22 fill=%22%23fcd116%22/%3E%3C/g%3E%3Cpath d=%22M0 4h260%22 stroke=%22%230038a8%22 stroke-width=%226%22/%3E%3Cpath d=%22M0 10h260%22 stroke=%22%23ce1126%22 stroke-width=%223%22/%3E%3C/svg%3E"); --gbg: #fbfbf7; --gink: #10162b; --g2c: #ce1126; --g3c: #fcd116; --g4c: #0038a8; --gtile: #fff; --gstroke: rgba(255,255,255,.95); } .fun[data-at="kalayaan"] .sheet__title, .fun[data-at="kalayaan"] .hcard__t, .fun[data-at="kalayaan"] .sec, .fun[data-at="kalayaan"] .shelf-h { text-transform: uppercase; letter-spacing: .03em; } .fun[data-at="kalayaan"] .hcard, .fun[data-at="kalayaan"] .w, .fun[data-at="kalayaan"] .today-card { background: linear-gradient(90deg, #0038a8 0 50%, #ce1126 50%) top / 100% 5px no-repeat, var(--at-card); } :root.fun[data-at="mrt99"] { color-scheme: light; --paper: #f1f1ec; --stone: #e6e6df; --sand: #cfcfc6; --ink: #111111; --ink-soft: #2e2e2e; --line: rgba(17,17,17,.14); --glass: rgba(241,241,236,.96); --orange: #1a3e8c; --orange-press: #132e69; --on-orange: #fff; --cream: #f1f1ec; --panel: #f1f1ec; --tile: #ffffff; --edge: rgba(26,62,140,.3); --at-card: linear-gradient(180deg, #ffffff, #eef0f2); --at-bar: #ffffff; --at-tab: #1a3e8c; --play: "Rubik Mono One", "Rajdhani", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Crect x=%220%22 y=%220%22 width=%22260%22 height=%2214%22 fill=%22%23ffd300%22/%3E%3Crect x=%220%22 y=%2214%22 width=%22260%22 height=%224%22 fill=%22%231a3e8c%22/%3E%3Cg fill=%22%231a3e8c%22 opacity=%22.55%22%3E%3Cpath d=%22M30 40h20l-6-6h6l9 9-9 9h-6l6-6H30Z%22/%3E%3Ccircle cx=%22180%22 cy=%2248%22 r=%229%22 fill=%22none%22 stroke=%22%231a3e8c%22 stroke-width=%223%22/%3E%3Cpath d=%22M176 48h8M180 44v8%22 stroke=%22%231a3e8c%22 stroke-width=%222%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #f1f1ec; --gink: #111111; --g2c: #1a3e8c; --g3c: #ffd300; --g4c: #9aa3ad; --gtile: #fff; --gstroke: rgba(255,255,255,.95); } .fun[data-at="mrt99"] .sheet { background: var(--doodle) 0 0 / 260px 260px repeat-x, var(--cream) !important; } .fun[data-at="mrt99"] .sheet__head { padding-top: 14px; } .fun[data-at="mrt99"] .sheet__title { font-size: calc(var(--t-large, 1.9rem) * .62); line-height: 1.2; font-weight: 400; } .fun[data-at="mrt99"] .hcard__t, .fun[data-at="mrt99"] .sec, .fun[data-at="mrt99"] .shelf-h { font-size: .8em; font-weight: 400; } .fun[data-at="mrt99"] .chip.is-on, .fun[data-at="mrt99"] .jump button.is-on { background: #ffd300; color: #111; } :root.fun[data-at="opm"] { color-scheme: light; --paper: #f3e6cf; --stone: #ead9ba; --sand: #d7c198; --ink: #2b1608; --ink-soft: #4b2f1a; --line: rgba(43,22,8,.16); --glass: rgba(243,230,207,.95); --orange: #b8321a; --orange-press: #922714; --on-orange: #fff; --cream: #f3e6cf; --panel: #f3e6cf; --tile: #fbf3e4; --edge: rgba(43,22,8,.28); --at-card: #fbf3e4; --at-bar: #fbf3e4; --at-tab: #b8321a; --play: "Lobster", Georgia, serif; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg transform=%22translate(210 50)%22 opacity=%22.85%22%3E%3Ccircle r=%2234%22 fill=%22%232b1608%22/%3E%3Ccircle r=%2228%22 fill=%22none%22 stroke=%22%235a3a24%22 stroke-width=%221%22/%3E%3Ccircle r=%2222%22 fill=%22none%22 stroke=%22%235a3a24%22 stroke-width=%221%22/%3E%3Ccircle r=%2211%22 fill=%22%23c8391c%22/%3E%3Ccircle r=%222%22 fill=%22%23f3e6cf%22/%3E%3C/g%3E%3Cpath d=%22M10 40q10-16 20 0t20 0 20 0 20 0 20 0%22 fill=%22none%22 stroke=%22%23f0a020%22 stroke-width=%223%22 opacity=%22.7%22/%3E%3Cpath d=%22M10 56q10-10 20 0t20 0 20 0 20 0 20 0%22 fill=%22none%22 stroke=%22%232f6f73%22 stroke-width=%222.4%22 opacity=%22.6%22/%3E%3C/svg%3E"); --gbg: #f3e6cf; --gink: #2b1608; --g2c: #c8391c; --g3c: #f0a020; --g4c: #2f6f73; --gtile: #fbf3e4; --gstroke: rgba(251,243,228,.95); } .fun[data-at="opm"] .sheet__title, .fun[data-at="opm"] .hcard__t, .fun[data-at="opm"] .sec, .fun[data-at="opm"] .shelf-h { font-weight: 400; } .fun[data-at="opm"] .hcard, .fun[data-at="opm"] .w, .fun[data-at="opm"] .today-card { background: linear-gradient(90deg, #c8391c 0 33%, #f0a020 33% 66%, #2f6f73 66%) top / 100% 5px no-repeat, var(--at-card); } :root.fun[data-at="synth"] { color-scheme: dark; --paper: #1a0b2e; --stone: #2a1446; --sand: #3a1f5e; --ink: #fbe9ff; --ink-soft: #dcc8f2; --line: rgba(251,233,255,.16); --glass: rgba(26,11,46,.95); --orange: #ff2a6d; --orange-press: #d81b58; --on-orange: #fff; --cream: #1a0b2e; --panel: #1a0b2e; --tile: #2a1446; --edge: rgba(5,217,232,.4); --at-card: #241040; --at-bar: #1a0b2e; --at-tab: #05d9e8; --play: "Monoton", "Audiowide", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cdefs%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ffb86b%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ff2a6d%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx=%22200%22 cy=%2256%22 r=%2240%22 fill=%22url(%23s)%22 opacity=%22.75%22/%3E%3Cg fill=%22%231a0b2e%22%3E%3Crect x=%22150%22 y=%2262%22 width=%22100%22 height=%224%22/%3E%3Crect x=%22150%22 y=%2272%22 width=%22100%22 height=%225%22/%3E%3Crect x=%22150%22 y=%2283%22 width=%22100%22 height=%226%22/%3E%3C/g%3E%3Cg stroke=%22%2305d9e8%22 stroke-width=%221%22 opacity=%22.45%22 fill=%22none%22%3E%3Cpath d=%22M0 104h260M0 116h260M0 132h260M130 96 0 200M130 96 260 200M130 96v110%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #1a0b2e; --gink: #fbe9ff; --g2c: #ff2a6d; --g3c: #ffb86b; --g4c: #05d9e8; --gtile: #2a1446; --gstroke: rgba(0,0,0,.75); } .fun[data-at="synth"] .sheet__title { font-weight: 400; font-size: calc(var(--t-large, 1.9rem) * .85); text-shadow: 0 0 12px rgba(255,42,109,.6); } .fun[data-at="synth"] .hcard__t, .fun[data-at="synth"] .sec, .fun[data-at="synth"] .shelf-h { font-family: "Audiowide", system-ui; font-weight: 400; } .fun[data-at="synth"] .hcard, .fun[data-at="synth"] .w, .fun[data-at="synth"] .today-card { box-shadow: inset 0 0 0 1.5px rgba(255,42,109,.5), 0 0 18px rgba(255,42,109,.15) !important; } :root.fun[data-at="holo"] { color-scheme: light; --paper: #eef0ff; --stone: #e2e6ff; --sand: #c9cff5; --ink: #151a3a; --ink-soft: #313a63; --line: rgba(21,26,58,.14); --glass: rgba(238,240,255,.8); --orange: #5a4cf0; --orange-press: #4436d0; --on-orange: #fff; --cream: #eef0ff; --panel: #eef0ff; --tile: rgba(255,255,255,.75); --edge: rgba(90,76,240,.25); --at-card: rgba(255,255,255,.7); --at-bar: rgba(255,255,255,.85); --at-tab: #5a4cf0; --play: "Syne", system-ui; --doodle: none; --gbg: #eef0ff; --gink: #151a3a; --g2c: #5a4cf0; --g3c: #ff7ac8; --g4c: #5ee0d0; --gtile: #fff; --gstroke: rgba(255,255,255,.95); } .fun[data-at="holo"] .sheet { background: radial-gradient(120% 60% at 0% 0%, rgba(255,122,200,.25), transparent 60%), radial-gradient(120% 60% at 100% 10%, rgba(94,224,208,.25), transparent 60%), var(--cream) !important; } .fun[data-at="holo"] .hcard, .fun[data-at="holo"] .w, .fun[data-at="holo"] .today-card, .fun[data-at="holo"] .gtile2, .fun[data-at="holo"] .coll-tile { border: 1.5px solid transparent; background: linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)) padding-box, linear-gradient(120deg, #ff7ac8, #ffd36b, #5ee0d0, #8aa2ff) border-box !important; box-shadow: 0 8px 24px rgba(90,76,240,.12) !important; } :root.fun[data-at="clay"] { color-scheme: light; --paper: #fdf3e7; --stone: #f8e7d4; --sand: #eed2b6; --ink: #3a2a35; --ink-soft: #57434f; --line: rgba(58,42,53,.12); --glass: rgba(253,243,231,.95); --orange: #e8607a; --orange-press: #cc4862; --on-orange: #fff; --cream: #fdf3e7; --panel: #fdf3e7; --tile: #fff8f0; --edge: rgba(200,140,120,.35); --at-card: #fff8f0; --at-bar: #fff8f0; --at-tab: #e8607a; --play: "Fredoka", "Baloo 2", system-ui; --doodle: none; --gbg: #fdf3e7; --gink: #3a2a35; --g2c: #ff8fa3; --g3c: #ffd38a; --g4c: #9fd8f5; --gtile: #fff8f0; --gstroke: rgba(255,248,240,.95); } .fun[data-at="clay"] .sheet { background: var(--cream) !important; } .fun[data-at="clay"] .hcard, .fun[data-at="clay"] .w, .fun[data-at="clay"] .today-card, .fun[data-at="clay"] .gtile2, .fun[data-at="clay"] .coll-tile, .fun[data-at="clay"] .btn, .fun[data-at="clay"] .chip { border-radius: 26px !important; box-shadow: inset 3px 3px 6px rgba(255,255,255,.9), inset -4px -5px 10px rgba(200,140,120,.25), 6px 8px 16px rgba(200,140,120,.25) !important; } .fun[data-at="clay"] .btn:active, .fun[data-at="clay"] .chip:active { box-shadow: inset -2px -2px 5px rgba(255,255,255,.7), inset 4px 5px 10px rgba(150,90,80,.3) !important; } :root.fun[data-at="lola"] { color-scheme: light; --paper: #f6ece0; --stone: #eedfcd; --sand: #dcc6aa; --ink: #3a2418; --ink-soft: #593d2c; --line: rgba(58,36,24,.14); --glass: rgba(246,236,224,.95); --orange: #9a4b27; --orange-press: #7b3b1e; --on-orange: #fff; --cream: #f6ece0; --panel: #f6ece0; --tile: #fffaf2; --edge: rgba(160,82,45,.3); --at-card: #fffaf2; --at-bar: #fffaf2; --at-tab: #9a4b27; --play: "Cormorant Garamond", Georgia, serif; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22%23fffaf2%22 stroke=%22%23d9b8a0%22 stroke-width=%221.2%22%3E%3Ccircle cx=%220%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%2226%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%2252%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%2278%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%22104%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%22130%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%22156%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%22182%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%22208%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%22234%22 cy=%220%22 r=%2213%22/%3E%3Ccircle cx=%22260%22 cy=%220%22 r=%2213%22/%3E%3C/g%3E%3Cg fill=%22none%22 stroke=%22%23d98c8c%22 stroke-width=%221.6%22 opacity=%22.7%22%3E%3Cg transform=%22translate(40 50)%22%3E%3Ccircle r=%224%22/%3E%3Cpath d=%22M0-4c2-6 8-6 6 0M0 4c-2 6-8 6-6 0M4 0c6 2 6 8 0 6M-4 0c-6-2-6-8 0-6%22/%3E%3C/g%3E%3Cg transform=%22translate(150 70)%22%3E%3Ccircle r=%224%22/%3E%3Cpath d=%22M0-4c2-6 8-6 6 0M0 4c-2 6-8 6-6 0M4 0c6 2 6 8 0 6M-4 0c-6-2-6-8 0-6%22/%3E%3C/g%3E%3Cg transform=%22translate(230 45)%22%3E%3Ccircle r=%224%22/%3E%3Cpath d=%22M0-4c2-6 8-6 6 0M0 4c-2 6-8 6-6 0M4 0c6 2 6 8 0 6M-4 0c-6-2-6-8 0-6%22/%3E%3C/g%3E%3C/g%3E%3Cpath d=%22M60 64q8 8 0 16M170 84q-8 8 0 16%22 stroke=%22%236b8e6b%22 stroke-width=%221.6%22 fill=%22none%22/%3E%3C/svg%3E"); --gbg: #f6ece0; --gink: #3a2418; --g2c: #a0522d; --g3c: #d98c8c; --g4c: #6b8e6b; --gtile: #fffaf2; --gstroke: rgba(255,250,242,.95); } .fun[data-at="lola"] .sheet { background: var(--doodle) 0 0 / 260px 260px repeat-x, var(--cream) !important; } .fun[data-at="lola"] .sheet__head { padding-top: 12px; } .fun[data-at="lola"] .sheet__title { font-style: italic; font-weight: 700; font-size: calc(var(--t-large, 1.9rem) * 1.15); line-height: 1; } .fun[data-at="lola"] .hcard__t, .fun[data-at="lola"] .sec, .fun[data-at="lola"] .shelf-h { font-size: 1.2em; font-weight: 700; } .fun[data-at="lola"] .hcard, .fun[data-at="lola"] .w, .fun[data-at="lola"] .today-card { box-shadow: inset 0 0 0 1px rgba(217,184,160,.9), inset 0 0 0 4px var(--at-card), inset 0 0 0 5px rgba(217,140,140,.35), 0 3px 0 var(--edge) !important; } :root.fun[data-at="tropikal"] { color-scheme: light; --paper: #fff8e6; --stone: #fdeecb; --sand: #f2d9a0; --ink: #0b3b3a; --ink-soft: #1f5250; --line: rgba(11,59,58,.14); --glass: rgba(255,248,230,.95); --orange: #e8503a; --orange-press: #c63f2b; --on-orange: #fff; --cream: #fff8e6; --panel: #fff8e6; --tile: #ffffff; --edge: rgba(0,179,164,.3); --at-card: #ffffff; --at-bar: #ffffff; --at-tab: #00a396; --play: "Permanent Marker", "Baloo 2", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22%2300b3a4%22 opacity=%22.55%22%3E%3Cpath d=%22M210 10c-30 4-46 22-50 40 12-14 30-22 50-24Z%22/%3E%3Cpath d=%22M210 10c10 24 6 44-6 56 4-18 2-36 6-56Z%22/%3E%3Cpath d=%22M210 10c26 6 40 20 44 34-14-10-28-16-44-18Z%22/%3E%3C/g%3E%3Cpath d=%22M0 80q16-10 32 0t32 0 32 0 32 0 32 0 32 0 32 0 32 0%22 fill=%22none%22 stroke=%22%2300b3a4%22 stroke-width=%223%22 opacity=%22.5%22/%3E%3Ccircle cx=%2240%22 cy=%2236%22 r=%2214%22 fill=%22%23ffd23f%22 opacity=%22.7%22/%3E%3C/svg%3E"); --gbg: #fff8e6; --gink: #0b3b3a; --g2c: #ff6b4a; --g3c: #ffd23f; --g4c: #00b3a4; --gtile: #fff; --gstroke: rgba(255,255,255,.95); } .fun[data-at="tropikal"] .sheet__title, .fun[data-at="tropikal"] .hcard__t, .fun[data-at="tropikal"] .sec, .fun[data-at="tropikal"] .shelf-h { font-weight: 400; } .fun[data-at="tropikal"] .hcard, .fun[data-at="tropikal"] .w, .fun[data-at="tropikal"] .today-card { background: linear-gradient(90deg, #ff6b4a, #ffd23f, #00b3a4) top / 100% 5px no-repeat, var(--at-card); } :root.fun[data-at="solar"] { color-scheme: light; --paper: #f1f7e6; --stone: #e4efd2; --sand: #cddfb0; --ink: #1f2d16; --ink-soft: #384a2b; --line: rgba(31,45,22,.14); --glass: rgba(241,247,230,.95); --orange: #2f7a2f; --orange-press: #246024; --on-orange: #fff; --cream: #f1f7e6; --panel: #f1f7e6; --tile: #fbfdf6; --edge: rgba(58,138,58,.3); --at-card: #fbfdf6; --at-bar: #fbfdf6; --at-tab: #2f7a2f; --play: "Syne", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22%233a8a3a%22 opacity=%22.55%22%3E%3Cpath d=%22M30 60c-6-20 6-40 26-44-2 20-10 34-26 44Z%22/%3E%3Cpath d=%22M220 70c-18-6-28-24-22-42 16 8 24 22 22 42Z%22/%3E%3C/g%3E%3Cg transform=%22translate(120 20)%22 opacity=%22.6%22%3E%3Cpath d=%22M0 0h40l-8 24H-8Z%22 fill=%22%233aa6a6%22/%3E%3Cpath d=%22M13 0 9 24M27 0l-4 24M-4 12h40%22 stroke=%22%23f1f7e6%22 stroke-width=%221.4%22/%3E%3C/g%3E%3Ccircle cx=%22190%22 cy=%2230%22 r=%229%22 fill=%22%23f2b705%22 opacity=%22.7%22/%3E%3C/svg%3E"); --gbg: #f1f7e6; --gink: #1f2d16; --g2c: #3a8a3a; --g3c: #f2b705; --g4c: #3aa6a6; --gtile: #fbfdf6; --gstroke: rgba(251,253,246,.95); } .fun[data-at="solar"] .sheet__title, .fun[data-at="solar"] .hcard__t, .fun[data-at="solar"] .sec, .fun[data-at="solar"] .shelf-h { font-weight: 800; letter-spacing: -.01em; } .fun[data-at="solar"] .hcard, .fun[data-at="solar"] .w, .fun[data-at="solar"] .today-card { border-radius: 28px 10px 28px 10px; box-shadow: inset 0 0 0 1.5px rgba(58,138,58,.3), 0 4px 0 var(--edge) !important; } :root.fun[data-at="space"] { color-scheme: dark; --paper: #0b0f2a; --stone: #141a3d; --sand: #212a5c; --ink: #eef2ff; --ink-soft: #c6cdef; --line: rgba(238,242,255,.14); --glass: rgba(11,15,42,.95); --orange: #8b6dff; --orange-press: #7354f0; --on-orange: #fff; --cream: #0b0f2a; --panel: #0b0f2a; --tile: #141a3d; --edge: rgba(124,92,255,.4); --at-card: #131938; --at-bar: #0b0f2a; --at-tab: #ffd166; --play: "Orbitron", "Space Grotesk", system-ui; --doodle: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22 viewBox=%220 0 260 260%22%3E%3Cg fill=%22%23eef2ff%22%3E%3Ccircle cx=%220%22 cy=%220%22 r=%220.8%22 opacity=%220.4%22/%3E%3Ccircle cx=%2273%22 cy=%2241%22 r=%221.4%22 opacity=%220.55%22/%3E%3Ccircle cx=%22146%22 cy=%2282%22 r=%222.0%22 opacity=%220.7%22/%3E%3Ccircle cx=%22219%22 cy=%22123%22 r=%220.8%22 opacity=%220.85%22/%3E%3Ccircle cx=%2232%22 cy=%2234%22 r=%221.4%22 opacity=%220.4%22/%3E%3Ccircle cx=%22105%22 cy=%2275%22 r=%222.0%22 opacity=%220.55%22/%3E%3Ccircle cx=%22178%22 cy=%22116%22 r=%220.8%22 opacity=%220.7%22/%3E%3Ccircle cx=%22251%22 cy=%2227%22 r=%221.4%22 opacity=%220.85%22/%3E%3Ccircle cx=%2264%22 cy=%2268%22 r=%222.0%22 opacity=%220.4%22/%3E%3Ccircle cx=%22137%22 cy=%22109%22 r=%220.8%22 opacity=%220.55%22/%3E%3Ccircle cx=%22210%22 cy=%2220%22 r=%221.4%22 opacity=%220.7%22/%3E%3Ccircle cx=%2223%22 cy=%2261%22 r=%222.0%22 opacity=%220.85%22/%3E%3Ccircle cx=%2296%22 cy=%22102%22 r=%220.8%22 opacity=%220.4%22/%3E%3Ccircle cx=%22169%22 cy=%2213%22 r=%221.4%22 opacity=%220.55%22/%3E%3Ccircle cx=%22242%22 cy=%2254%22 r=%222.0%22 opacity=%220.7%22/%3E%3Ccircle cx=%2255%22 cy=%2295%22 r=%220.8%22 opacity=%220.85%22/%3E%3Ccircle cx=%22128%22 cy=%226%22 r=%221.4%22 opacity=%220.4%22/%3E%3Ccircle cx=%22201%22 cy=%2247%22 r=%222.0%22 opacity=%220.55%22/%3E%3Ccircle cx=%2214%22 cy=%2288%22 r=%220.8%22 opacity=%220.7%22/%3E%3Ccircle cx=%2287%22 cy=%22129%22 r=%221.4%22 opacity=%220.85%22/%3E%3Ccircle cx=%22160%22 cy=%2240%22 r=%222.0%22 opacity=%220.4%22/%3E%3Ccircle cx=%22233%22 cy=%2281%22 r=%220.8%22 opacity=%220.55%22/%3E%3Ccircle cx=%2246%22 cy=%22122%22 r=%221.4%22 opacity=%220.7%22/%3E%3Ccircle cx=%22119%22 cy=%2233%22 r=%222.0%22 opacity=%220.85%22/%3E%3Ccircle cx=%22192%22 cy=%2274%22 r=%220.8%22 opacity=%220.4%22/%3E%3Ccircle cx=%225%22 cy=%22115%22 r=%221.4%22 opacity=%220.55%22/%3E%3Ccircle cx=%2278%22 cy=%2226%22 r=%222.0%22 opacity=%220.7%22/%3E%3Ccircle cx=%22151%22 cy=%2267%22 r=%220.8%22 opacity=%220.85%22/%3E%3Ccircle cx=%22224%22 cy=%22108%22 r=%221.4%22 opacity=%220.4%22/%3E%3Ccircle cx=%2237%22 cy=%2219%22 r=%222.0%22 opacity=%220.55%22/%3E%3Ccircle cx=%22110%22 cy=%2260%22 r=%220.8%22 opacity=%220.7%22/%3E%3Ccircle cx=%22183%22 cy=%22101%22 r=%221.4%22 opacity=%220.85%22/%3E%3Ccircle cx=%22256%22 cy=%2212%22 r=%222.0%22 opacity=%220.4%22/%3E%3Ccircle cx=%2269%22 cy=%2253%22 r=%220.8%22 opacity=%220.55%22/%3E%3Ccircle cx=%22142%22 cy=%2294%22 r=%221.4%22 opacity=%220.7%22/%3E%3Ccircle cx=%22215%22 cy=%225%22 r=%222.0%22 opacity=%220.85%22/%3E%3Ccircle cx=%2228%22 cy=%2246%22 r=%220.8%22 opacity=%220.4%22/%3E%3Ccircle cx=%22101%22 cy=%2287%22 r=%221.4%22 opacity=%220.55%22/%3E%3Ccircle cx=%22174%22 cy=%22128%22 r=%222.0%22 opacity=%220.7%22/%3E%3Ccircle cx=%22247%22 cy=%2239%22 r=%220.8%22 opacity=%220.85%22/%3E%3C/g%3E%3Cg transform=%22translate(200 50)%22%3E%3Ccircle r=%2216%22 fill=%22%237c5cff%22/%3E%3Cellipse rx=%2230%22 ry=%227%22 fill=%22none%22 stroke=%22%23ffd166%22 stroke-width=%222.5%22 transform=%22rotate(-18)%22/%3E%3C/g%3E%3C/svg%3E"); --gbg: #0b0f2a; --gink: #eef2ff; --g2c: #7c5cff; --g3c: #ffd166; --g4c: #4cc9f0; --gtile: #141a3d; --gstroke: rgba(0,0,0,.75); } .fun[data-at="space"] .sheet { background: var(--doodle) 0 0 / 260px 260px repeat, var(--cream) !important; } .fun[data-at="space"] .sheet__title, .fun[data-at="space"] .hcard__t, .fun[data-at="space"] .sec, .fun[data-at="space"] .shelf-h { font-weight: 700; letter-spacing: .04em; } .atp-prev--kalayaan { background: linear-gradient(90deg, #0038a8 0 50%, #ce1126 50%) top / 100% 8px no-repeat, var(--pb); } .atp-prev--kalayaan b { text-transform: uppercase; font-weight: 800; } .atp-prev--mrt99 { background: linear-gradient(#ffd300, #ffd300) top / 100% 12px no-repeat, linear-gradient(#1a3e8c, #1a3e8c) 0 12px / 100% 3px no-repeat, var(--pb); padding-top: 22px; } .atp-prev--mrt99 b { font-size: .78rem; } .atp-prev--synth { background: radial-gradient(circle at 80% 30%, #ff2a6d 0 22%, transparent 23%), var(--pb); } .atp-prev--synth b { text-shadow: 0 0 10px rgba(255,42,109,.7); } .atp-prev--holo { background: linear-gradient(135deg, #ffe0f3, #e0fff9 50%, #e3e8ff); box-shadow: inset 0 0 0 2px rgba(138,162,255,.5); } .atp-prev--clay { border-radius: 26px; box-shadow: inset 3px 3px 6px rgba(255,255,255,.9), inset -4px -5px 10px rgba(200,140,120,.25), 4px 6px 12px rgba(200,140,120,.25); } .atp-prev--clay .atp-btn { box-shadow: inset 2px 2px 4px rgba(255,255,255,.6), 2px 3px 6px rgba(0,0,0,.15); } .atp-prev--lola b { font-style: italic; font-weight: 700; font-size: 1.25rem; } .atp-prev--lola { background: radial-gradient(circle at 13px 0, #fffaf2 0 12px, transparent 13px) 0 0 / 26px 14px repeat-x, var(--pb); padding-top: 20px; } .atp-prev--tropikal { background: linear-gradient(90deg, #ff6b4a, #ffd23f, #00b3a4) top / 100% 8px no-repeat, var(--pb); } .atp-prev--solar { border-radius: 26px 8px 26px 8px; } .atp-prev--solar b { font-weight: 800; } .atp-prev--space { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent), radial-gradient(circle at 82% 26%, #7c5cff 0 12%, transparent 13%), var(--pb); } /* the "ber months" string of lights belongs to the default look; each theme hangs its own ornament instead */ :root.fun.ber[data-at] .sheet::before { opacity: .85 !important; animation: none !important; height: 9px; top: 7px; border-radius: 0; } :root.fun.ber[data-at="jeepney"] .sheet::before, :root.fun.ber[data-at="komiks"] .sheet::before, :root.fun.ber[data-at="sarisari"] .sheet::before, :root.fun.ber[data-at="kalesa"] .sheet::before, :root.fun.ber[data-at="fiesta"] .sheet::before, :root.fun.ber[data-at="banig"] .sheet::before, :root.fun.ber[data-at="capiz"] .sheet::before, :root.fun.ber[data-at="okir"] .sheet::before, :root.fun.ber[data-at="vinta"] .sheet::before, :root.fun.ber[data-at="barong"] .sheet::before, :root.fun.ber[data-at="kubo"] .sheet::before, :root.fun.ber[data-at="kalayaan"] .sheet::before, :root.fun.ber[data-at="mrt99"] .sheet::before, :root.fun.ber[data-at="lola"] .sheet::before, :root.fun.ber[data-at="tropikal"] .sheet::before { background: conic-gradient(from 135deg at 6px 0, var(--g2c) 90deg, transparent 0) 0 0 / 36px 9px repeat-x, conic-gradient(from 135deg at 18px 0, var(--g3c) 90deg, transparent 0) 0 0 / 36px 9px repeat-x, conic-gradient(from 135deg at 30px 0, var(--g4c) 90deg, transparent 0) 0 0 / 36px 9px repeat-x, linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 1px no-repeat !important; } :root.fun.ber[data-at="pixel"] .sheet::before, :root.fun.ber[data-at="dmg"] .sheet::before, :root.fun.ber[data-at="desk95"] .sheet::before, :root.fun.ber[data-at="riso"] .sheet::before, :root.fun.ber[data-at="opm"] .sheet::before, :root.fun.ber[data-at="vapor"] .sheet::before, :root.fun.ber[data-at="synth"] .sheet::before { background: repeating-linear-gradient(90deg, var(--g2c) 0 6px, transparent 6px 12px, var(--g3c) 12px 18px, transparent 18px 24px, var(--g4c) 24px 30px, transparent 30px 36px) 0 2px / 100% 6px no-repeat !important; } :root.fun.ber[data-at="neon"] .sheet::before, :root.fun.ber[data-at="aero"] .sheet::before, :root.fun.ber[data-at="holo"] .sheet::before, :root.fun.ber[data-at="clay"] .sheet::before, :root.fun.ber[data-at="solar"] .sheet::before, :root.fun.ber[data-at="space"] .sheet::before, :root.fun.ber[data-at="mono"] .sheet::before { background: repeating-linear-gradient(90deg, var(--g4c) 0 14px, transparent 14px 20px, var(--g2c) 20px 24px, transparent 24px 30px) 0 3px / 100% 3px no-repeat !important; } .atp-m { position: absolute; right: 6px; bottom: 6px; width: 54px; height: 66px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); } .atp-prev { padding-right: 60px; } /* ornaments stay clear of everything you read: only a slim theme strip runs along the very top edge, above the title */ .fun[data-at="jeepney"] .sheet, .fun[data-at="komiks"] .sheet, .fun[data-at="kalesa"] .sheet, .fun[data-at="capiz"] .sheet, .fun[data-at="okir"] .sheet, .fun[data-at="vinta"] .sheet, .fun[data-at="kubo"] .sheet, .fun[data-at="kalayaan"] .sheet, .fun[data-at="tropikal"] .sheet, .fun[data-at="solar"] .sheet, .fun[data-at="opm"] .sheet, .fun[data-at="synth"] .sheet, .fun[data-at="pixel"] .sheet, .fun[data-at="dmg"] .sheet, .fun[data-at="vapor"] .sheet, .fun[data-at="aero"] .sheet, .fun[data-at="riso"] .sheet, .fun[data-at="space"] .sheet { background: var(--cream) !important; } .fun[data-at="neon"] .sheet { background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), var(--cream) !important; } .fun[data-at="jeepney"] .sheet::before, .fun[data-at="komiks"] .sheet::before, .fun[data-at="kalesa"] .sheet::before, .fun[data-at="capiz"] .sheet::before, .fun[data-at="okir"] .sheet::before, .fun[data-at="vinta"] .sheet::before, .fun[data-at="kubo"] .sheet::before, .fun[data-at="kalayaan"] .sheet::before, .fun[data-at="tropikal"] .sheet::before, .fun[data-at="solar"] .sheet::before, .fun[data-at="opm"] .sheet::before, .fun[data-at="synth"] .sheet::before, .fun[data-at="pixel"] .sheet::before, .fun[data-at="dmg"] .sheet::before, .fun[data-at="vapor"] .sheet::before, .fun[data-at="aero"] .sheet::before, .fun[data-at="riso"] .sheet::before, .fun[data-at="space"] .sheet::before, .fun[data-at="neon"] .sheet::before { content: ""; position: absolute; z-index: 1; left: 30px; right: 30px; top: 7px; height: 9px; pointer-events: none; opacity: .85; } .fun[data-at="jeepney"] .sheet::before, .fun[data-at="komiks"] .sheet::before, .fun[data-at="kalesa"] .sheet::before, .fun[data-at="capiz"] .sheet::before, .fun[data-at="okir"] .sheet::before, .fun[data-at="vinta"] .sheet::before, .fun[data-at="kubo"] .sheet::before, .fun[data-at="kalayaan"] .sheet::before, .fun[data-at="tropikal"] .sheet::before { background: conic-gradient(from 135deg at 6px 0, var(--g2c) 90deg, transparent 0) 0 0 / 36px 9px repeat-x, conic-gradient(from 135deg at 18px 0, var(--g3c) 90deg, transparent 0) 0 0 / 36px 9px repeat-x, conic-gradient(from 135deg at 30px 0, var(--g4c) 90deg, transparent 0) 0 0 / 36px 9px repeat-x, linear-gradient(var(--ink), var(--ink)) 0 0 / 100% 1px no-repeat; } .fun[data-at="pixel"] .sheet::before, .fun[data-at="dmg"] .sheet::before, .fun[data-at="opm"] .sheet::before, .fun[data-at="synth"] .sheet::before, .fun[data-at="vapor"] .sheet::before, .fun[data-at="riso"] .sheet::before { background: repeating-linear-gradient(90deg, var(--g2c) 0 6px, transparent 6px 12px, var(--g3c) 12px 18px, transparent 18px 24px, var(--g4c) 24px 30px, transparent 30px 36px) 0 2px / 100% 6px no-repeat; } .fun[data-at="solar"] .sheet::before, .fun[data-at="aero"] .sheet::before, .fun[data-at="space"] .sheet::before, .fun[data-at="neon"] .sheet::before { background: repeating-linear-gradient(90deg, var(--g4c) 0 14px, transparent 14px 20px, var(--g2c) 20px 24px, transparent 24px 30px) 0 3px / 100% 3px no-repeat; } .fun[data-at] .sheet[data-snap="hidden"]::before { display: none; } /* ======== dark versions: every light theme has a night look that follows Auto, Light or Dark ======== */ @media (prefers-color-scheme: dark) { :root.fun[data-at="jeepney"]:not([data-theme="light"]) { color-scheme: dark; --paper: #301c20; --stone: #402d31; --sand: #4d3c3f; --ink: #f8f3e8; --ink-soft: #c6bdb6; --line: rgba(255,255,255,.12); --glass: #301c20f2; --orange: #e9575d; --orange-press: #c64a4f; --on-orange: #101010; --cream: #301c20; --panel: #301c20; --tile: #402d31; --edge: rgba(0,0,0,.5); --at-card: #3b282c; --at-bar: #3d2b2e; --at-tab: #ec6b70; --gbg: #301c20; --gink: #f8f3e8; --g2c: #e3262e; --g3c: #ffc20e; --g4c: #4283b9; --gtile: #402d31; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="jeepney"][data-theme="dark"] { color-scheme: dark; --paper: #301c20; --stone: #402d31; --sand: #4d3c3f; --ink: #f8f3e8; --ink-soft: #c6bdb6; --line: rgba(255,255,255,.12); --glass: #301c20f2; --orange: #e9575d; --orange-press: #c64a4f; --on-orange: #101010; --cream: #301c20; --panel: #301c20; --tile: #402d31; --edge: rgba(0,0,0,.5); --at-card: #3b282c; --at-bar: #3d2b2e; --at-tab: #ec6b70; --gbg: #301c20; --gink: #f8f3e8; --g2c: #e3262e; --g3c: #ffc20e; --g4c: #4283b9; --gtile: #402d31; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="komiks"]:not([data-theme="light"]) { color-scheme: dark; --paper: #2f1c1e; --stone: #3f2d2f; --sand: #4c3c3e; --ink: #f8f3e5; --ink-soft: #c6bdb3; --line: rgba(255,255,255,.12); --glass: #2f1c1ef2; --orange: #e05751; --orange-press: #be4a45; --on-orange: #101010; --cream: #2f1c1e; --panel: #2f1c1e; --tile: #3f2d2f; --edge: rgba(0,0,0,.5); --at-card: #3a282a; --at-bar: #3d2b2d; --at-tab: #e77d78; --gbg: #2f1c1e; --gink: #f8f3e5; --g2c: #d7261e; --g3c: #ffd600; --g4c: #00a0e3; --gtile: #3f2d2f; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="komiks"][data-theme="dark"] { color-scheme: dark; --paper: #2f1c1e; --stone: #3f2d2f; --sand: #4c3c3e; --ink: #f8f3e5; --ink-soft: #c6bdb3; --line: rgba(255,255,255,.12); --glass: #2f1c1ef2; --orange: #e05751; --orange-press: #be4a45; --on-orange: #101010; --cream: #2f1c1e; --panel: #2f1c1e; --tile: #3f2d2f; --edge: rgba(0,0,0,.5); --at-card: #3a282a; --at-bar: #3d2b2d; --at-tab: #e77d78; --gbg: #2f1c1e; --gink: #f8f3e5; --g2c: #d7261e; --g3c: #ffd600; --g4c: #00a0e3; --gtile: #3f2d2f; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="sarisari"]:not([data-theme="light"]) { color-scheme: dark; --paper: #2f1b1d; --stone: #3f2c2e; --sand: #4c3b3d; --ink: #f7eedd; --ink-soft: #c5b9ad; --line: rgba(255,255,255,.12); --glass: #2f1b1df2; --orange: #e05751; --orange-press: #be4a45; --on-orange: #101010; --cream: #2f1b1d; --panel: #2f1b1d; --tile: #3f2c2e; --edge: rgba(0,0,0,.5); --at-card: #3a2829; --at-bar: #3d2a2c; --at-tab: #e46b66; --gbg: #2f1b1d; --gink: #f7eedd; --g2c: #d7261e; --g3c: #1e6fd9; --g4c: #f5c400; --gtile: #3f2c2e; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="sarisari"][data-theme="dark"] { color-scheme: dark; --paper: #2f1b1d; --stone: #3f2c2e; --sand: #4c3b3d; --ink: #f7eedd; --ink-soft: #c5b9ad; --line: rgba(255,255,255,.12); --glass: #2f1b1df2; --orange: #e05751; --orange-press: #be4a45; --on-orange: #101010; --cream: #2f1b1d; --panel: #2f1b1d; --tile: #3f2c2e; --edge: rgba(0,0,0,.5); --at-card: #3a2829; --at-bar: #3d2a2c; --at-tab: #e46b66; --gbg: #2f1b1d; --gink: #f7eedd; --g2c: #d7261e; --g3c: #1e6fd9; --g4c: #f5c400; --gtile: #3f2c2e; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="kalesa"]:not([data-theme="light"]) { color-scheme: dark; --paper: #261c1d; --stone: #362d2e; --sand: #443c3d; --ink: #f5efe2; --ink-soft: #c1bab1; --line: rgba(255,255,255,.12); --glass: #261c1df2; --orange: #b07062; --orange-press: #965f53; --on-orange: #101010; --cream: #261c1d; --panel: #261c1d; --tile: #362d2e; --edge: rgba(0,0,0,.5); --at-card: #322829; --at-bar: #342b2c; --at-tab: #b98175; --gbg: #261c1d; --gink: #f5efe2; --g2c: #a55d4d; --g3c: #c9a04a; --g4c: #5e8177; --gtile: #362d2e; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="kalesa"][data-theme="dark"] { color-scheme: dark; --paper: #261c1d; --stone: #362d2e; --sand: #443c3d; --ink: #f5efe2; --ink-soft: #c1bab1; --line: rgba(255,255,255,.12); --glass: #261c1df2; --orange: #b07062; --orange-press: #965f53; --on-orange: #101010; --cream: #261c1d; --panel: #261c1d; --tile: #362d2e; --edge: rgba(0,0,0,.5); --at-card: #322829; --at-bar: #342b2c; --at-tab: #b98175; --gbg: #261c1d; --gink: #f5efe2; --g2c: #a55d4d; --g3c: #c9a04a; --g4c: #5e8177; --gtile: #362d2e; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="fiesta"]:not([data-theme="light"]) { color-scheme: dark; --paper: #342129; --stone: #433239; --sand: #504047; --ink: #fffbf4; --ink-soft: #ccc4c1; --line: rgba(255,255,255,.12); --glass: #342129f2; --orange: #ff4f7b; --orange-press: #d94369; --on-orange: #101010; --cream: #342129; --panel: #342129; --tile: #433239; --edge: rgba(0,0,0,.5); --at-card: #3f2d35; --at-bar: #412f37; --at-tab: #ff648b; --gbg: #342129; --gink: #fffbf4; --g2c: #ff4f7b; --g3c: #ffd23f; --g4c: #2bb3ff; --gtile: #433239; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="fiesta"][data-theme="dark"] { color-scheme: dark; --paper: #342129; --stone: #433239; --sand: #504047; --ink: #fffbf4; --ink-soft: #ccc4c1; --line: rgba(255,255,255,.12); --glass: #342129f2; --orange: #ff4f7b; --orange-press: #d94369; --on-orange: #101010; --cream: #342129; --panel: #342129; --tile: #433239; --edge: rgba(0,0,0,.5); --at-card: #3f2d35; --at-bar: #412f37; --at-tab: #ff648b; --gbg: #342129; --gink: #fffbf4; --g2c: #ff4f7b; --g3c: #ffd23f; --g4c: #2bb3ff; --gtile: #433239; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="banig"]:not([data-theme="light"]) { color-scheme: dark; --paper: #2a1c26; --stone: #3a2d36; --sand: #483c44; --ink: #f8eedb; --ink-soft: #c4baae; --line: rgba(255,255,255,.12); --glass: #2a1c26f2; --orange: #c8729a; --orange-press: #aa6183; --on-orange: #101010; --cream: #2a1c26; --panel: #2a1c26; --tile: #3a2d36; --edge: rgba(0,0,0,.5); --at-card: #362832; --at-bar: #382b34; --at-tab: #cf83a6; --gbg: #2a1c26; --gink: #f8eedb; --g2c: #b9497c; --g3c: #6f7bb1; --g4c: #e0a42a; --gtile: #3a2d36; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="banig"][data-theme="dark"] { color-scheme: dark; --paper: #2a1c26; --stone: #3a2d36; --sand: #483c44; --ink: #f8eedb; --ink-soft: #c4baae; --line: rgba(255,255,255,.12); --glass: #2a1c26f2; --orange: #c8729a; --orange-press: #aa6183; --on-orange: #101010; --cream: #2a1c26; --panel: #2a1c26; --tile: #3a2d36; --edge: rgba(0,0,0,.5); --at-card: #362832; --at-bar: #382b34; --at-tab: #cf83a6; --gbg: #2a1c26; --gink: #f8eedb; --g2c: #b9497c; --g3c: #6f7bb1; --g4c: #e0a42a; --gtile: #3a2d36; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="capiz"]:not([data-theme="light"]) { color-scheme: dark; --paper: #2c212a; --stone: #3c323a; --sand: #4a4048; --ink: #f9f7f1; --ink-soft: #c6c2bf; --line: rgba(255,255,255,.12); --glass: #2c212af2; --orange: #c86a8e; --orange-press: #aa5a79; --on-orange: #101010; --cream: #2c212a; --panel: #2c212a; --tile: #3c323a; --edge: rgba(0,0,0,.5); --at-card: #382d36; --at-bar: #3a2f38; --at-tab: #cf7c9c; --gbg: #2c212a; --gink: #f9f7f1; --g2c: #c0567f; --g3c: #e8c46a; --g4c: #6aa7a0; --gtile: #3c323a; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="capiz"][data-theme="dark"] { color-scheme: dark; --paper: #2c212a; --stone: #3c323a; --sand: #4a4048; --ink: #f9f7f1; --ink-soft: #c6c2bf; --line: rgba(255,255,255,.12); --glass: #2c212af2; --orange: #c86a8e; --orange-press: #aa5a79; --on-orange: #101010; --cream: #2c212a; --panel: #2c212a; --tile: #3c323a; --edge: rgba(0,0,0,.5); --at-card: #382d36; --at-bar: #3a2f38; --at-tab: #cf7c9c; --gbg: #2c212a; --gink: #f9f7f1; --g2c: #c0567f; --g3c: #e8c46a; --g4c: #6aa7a0; --gtile: #3c323a; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="okir"]:not([data-theme="light"]) { color-scheme: dark; --paper: #2c1920; --stone: #3c2a31; --sand: #4a393f; --ink: #fdf7ea; --ink-soft: #c9c0b8; --line: rgba(255,255,255,.12); --glass: #2c1920f2; --orange: #cd5d70; --orange-press: #ae4f5f; --on-orange: #101010; --cream: #2c1920; --panel: #2c1920; --tile: #3c2a31; --edge: rgba(0,0,0,.5); --at-card: #38262c; --at-bar: #3a282e; --at-tab: #d37081; --gbg: #2c1920; --gink: #fdf7ea; --g2c: #c6475d; --g3c: #e0a500; --g4c: #387d52; --gtile: #3c2a31; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="okir"][data-theme="dark"] { color-scheme: dark; --paper: #2c1920; --stone: #3c2a31; --sand: #4a393f; --ink: #fdf7ea; --ink-soft: #c9c0b8; --line: rgba(255,255,255,.12); --glass: #2c1920f2; --orange: #cd5d70; --orange-press: #ae4f5f; --on-orange: #101010; --cream: #2c1920; --panel: #2c1920; --tile: #3c2a31; --edge: rgba(0,0,0,.5); --at-card: #38262c; --at-bar: #3a282e; --at-tab: #d37081; --gbg: #2c1920; --gink: #fdf7ea; --g2c: #c6475d; --g3c: #e0a500; --g4c: #387d52; --gtile: #3c2a31; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="vinta"]:not([data-theme="light"]) { color-scheme: dark; --paper: #301e21; --stone: #402f32; --sand: #4d3e40; --ink: #f1fafa; --ink-soft: #c1c3c4; --line: rgba(255,255,255,.12); --glass: #301e21f2; --orange: #e55347; --orange-press: #c3473c; --on-orange: #101010; --cream: #301e21; --panel: #301e21; --tile: #402f32; --edge: rgba(0,0,0,.5); --at-card: #3b2a2d; --at-bar: #3d2d2f; --at-tab: #eb7a70; --gbg: #301e21; --gink: #f1fafa; --g2c: #e23b2e; --g3c: #f2c200; --g4c: #1f9e5a; --gtile: #402f32; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="vinta"][data-theme="dark"] { color-scheme: dark; --paper: #301e21; --stone: #402f32; --sand: #4d3e40; --ink: #f1fafa; --ink-soft: #c1c3c4; --line: rgba(255,255,255,.12); --glass: #301e21f2; --orange: #e55347; --orange-press: #c3473c; --on-orange: #101010; --cream: #301e21; --panel: #301e21; --tile: #402f32; --edge: rgba(0,0,0,.5); --at-card: #3b2a2d; --at-bar: #3d2d2f; --at-tab: #eb7a70; --gbg: #301e21; --gink: #f1fafa; --g2c: #e23b2e; --g3c: #f2c200; --g4c: #1f9e5a; --gtile: #402f32; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="barong"]:not([data-theme="light"]) { color-scheme: dark; --paper: #272422; --stone: #373433; --sand: #454341; --ink: #fbf8f2; --ink-soft: #c6c3be; --line: rgba(255,255,255,.12); --glass: #272422f2; --orange: #a48e68; --orange-press: #8b7958; --on-orange: #101010; --cream: #272422; --panel: #272422; --tile: #373433; --edge: rgba(0,0,0,.5); --at-card: #33302e; --at-bar: #353230; --at-tab: #af9c7a; --gbg: #272422; --gink: #fbf8f2; --g2c: #987f53; --g3c: #d9cdb3; --g4c: #7a848e; --gtile: #373433; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="barong"][data-theme="dark"] { color-scheme: dark; --paper: #272422; --stone: #373433; --sand: #454341; --ink: #fbf8f2; --ink-soft: #c6c3be; --line: rgba(255,255,255,.12); --glass: #272422f2; --orange: #a48e68; --orange-press: #8b7958; --on-orange: #101010; --cream: #272422; --panel: #272422; --tile: #373433; --edge: rgba(0,0,0,.5); --at-card: #33302e; --at-bar: #353230; --at-tab: #af9c7a; --gbg: #272422; --gink: #fbf8f2; --g2c: #987f53; --g3c: #d9cdb3; --g4c: #7a848e; --gtile: #373433; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="kubo"]:not([data-theme="light"]) { color-scheme: dark; --paper: #21271e; --stone: #32372f; --sand: #40453e; --ink: #f8f4e4; --ink-soft: #c2c1b2; --line: rgba(255,255,255,.12); --glass: #21271ef2; --orange: #6e9c43; --orange-press: #5e8539; --on-orange: #101010; --cream: #21271e; --panel: #21271e; --tile: #32372f; --edge: rgba(0,0,0,.5); --at-card: #2d332a; --at-bar: #2f352d; --at-tab: #7fa85a; --gbg: #21271e; --gink: #f8f4e4; --g2c: #5a8f29; --g3c: #c8a24a; --g4c: #9a6e44; --gtile: #32372f; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="kubo"][data-theme="dark"] { color-scheme: dark; --paper: #21271e; --stone: #32372f; --sand: #40453e; --ink: #f8f4e4; --ink-soft: #c2c1b2; --line: rgba(255,255,255,.12); --glass: #21271ef2; --orange: #6e9c43; --orange-press: #5e8539; --on-orange: #101010; --cream: #21271e; --panel: #21271e; --tile: #32372f; --edge: rgba(0,0,0,.5); --at-card: #2d332a; --at-bar: #2f352d; --at-tab: #7fa85a; --gbg: #21271e; --gink: #f8f4e4; --g2c: #5a8f29; --g3c: #c8a24a; --g4c: #9a6e44; --gtile: #32372f; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="kalayaan"]:not([data-theme="light"]) { color-scheme: dark; --paper: #171e2f; --stone: #282f3f; --sand: #373e4c; --ink: #fdfdfa; --ink-soft: #c4c5c7; --line: rgba(255,255,255,.12); --glass: #171e2ff2; --orange: #6787ca; --orange-press: #5873ac; --on-orange: #101010; --cream: #171e2f; --panel: #171e2f; --tile: #282f3f; --edge: rgba(0,0,0,.5); --at-card: #242a3a; --at-bar: #262d3d; --at-tab: #7995d0; --gbg: #171e2f; --gink: #fdfdfa; --g2c: #5277c3; --g3c: #d42e40; --g4c: #fcd116; --gtile: #282f3f; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="kalayaan"][data-theme="dark"] { color-scheme: dark; --paper: #171e2f; --stone: #282f3f; --sand: #373e4c; --ink: #fdfdfa; --ink-soft: #c4c5c7; --line: rgba(255,255,255,.12); --glass: #171e2ff2; --orange: #6787ca; --orange-press: #5873ac; --on-orange: #101010; --cream: #171e2f; --panel: #171e2f; --tile: #282f3f; --edge: rgba(0,0,0,.5); --at-card: #242a3a; --at-bar: #262d3d; --at-tab: #7995d0; --gbg: #171e2f; --gink: #fdfdfa; --g2c: #5277c3; --g3c: #d42e40; --g4c: #fcd116; --gtile: #282f3f; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="mrt99"]:not([data-theme="light"]) { color-scheme: dark; --paper: #191f2b; --stone: #2a303b; --sand: #393e49; --ink: #f7f7f4; --ink-soft: #c0c1c2; --line: rgba(255,255,255,.12); --glass: #191f2bf2; --orange: #758bba; --orange-press: #63769e; --on-orange: #101010; --cream: #191f2b; --panel: #191f2b; --tile: #2a303b; --edge: rgba(0,0,0,.5); --at-card: #262b37; --at-bar: #282e39; --at-tab: #8699c2; --gbg: #191f2b; --gink: #f7f7f4; --g2c: #627bb1; --g3c: #ffd300; --g4c: #9aa3ad; --gtile: #2a303b; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="mrt99"][data-theme="dark"] { color-scheme: dark; --paper: #191f2b; --stone: #2a303b; --sand: #393e49; --ink: #f7f7f4; --ink-soft: #c0c1c2; --line: rgba(255,255,255,.12); --glass: #191f2bf2; --orange: #758bba; --orange-press: #63769e; --on-orange: #101010; --cream: #191f2b; --panel: #191f2b; --tile: #2a303b; --edge: rgba(0,0,0,.5); --at-card: #262b37; --at-bar: #282e39; --at-tab: #8699c2; --gbg: #191f2b; --gink: #f7f7f4; --g2c: #627bb1; --g3c: #ffd300; --g4c: #9aa3ad; --gtile: #2a303b; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="lola"]:not([data-theme="light"]) { color-scheme: dark; --paper: #292020; --stone: #393131; --sand: #473f3f; --ink: #faf4ec; --ink-soft: #c6bfb9; --line: rgba(255,255,255,.12); --glass: #292020f2; --orange: #b5795c; --orange-press: #9a674e; --on-orange: #101010; --cream: #292020; --panel: #292020; --tile: #393131; --edge: rgba(0,0,0,.5); --at-card: #352c2c; --at-bar: #372e2e; --at-tab: #be8970; --gbg: #292020; --gink: #faf4ec; --g2c: #ab6746; --g3c: #d98c8c; --g4c: #6b8e6b; --gtile: #393131; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="lola"][data-theme="dark"] { color-scheme: dark; --paper: #292020; --stone: #393131; --sand: #473f3f; --ink: #faf4ec; --ink-soft: #c6bfb9; --line: rgba(255,255,255,.12); --glass: #292020f2; --orange: #b5795c; --orange-press: #9a674e; --on-orange: #101010; --cream: #292020; --panel: #292020; --tile: #393131; --edge: rgba(0,0,0,.5); --at-card: #352c2c; --at-bar: #372e2e; --at-tab: #be8970; --gbg: #292020; --gink: #faf4ec; --g2c: #ab6746; --g3c: #d98c8c; --g4c: #6b8e6b; --gtile: #393131; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="tropikal"]:not([data-theme="light"]) { color-scheme: dark; --paper: #342423; --stone: #433434; --sand: #504342; --ink: #fffbf0; --ink-soft: #ccc5bd; --line: rgba(255,255,255,.12); --glass: #342423f2; --orange: #ff6b4a; --orange-press: #d95b3f; --on-orange: #101010; --cream: #342423; --panel: #342423; --tile: #433434; --edge: rgba(0,0,0,.5); --at-card: #3f302f; --at-bar: #413231; --at-tab: #ff6b4a; --gbg: #342423; --gink: #fffbf0; --g2c: #ff6b4a; --g3c: #ffd23f; --g4c: #00b3a4; --gtile: #433434; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="tropikal"][data-theme="dark"] { color-scheme: dark; --paper: #342423; --stone: #433434; --sand: #504342; --ink: #fffbf0; --ink-soft: #ccc5bd; --line: rgba(255,255,255,.12); --glass: #342423f2; --orange: #ff6b4a; --orange-press: #d95b3f; --on-orange: #101010; --cream: #342423; --panel: #342423; --tile: #433434; --edge: rgba(0,0,0,.5); --at-card: #3f302f; --at-bar: #413231; --at-tab: #ff6b4a; --gbg: #342423; --gink: #fffbf0; --g2c: #ff6b4a; --g3c: #ffd23f; --g4c: #00b3a4; --gtile: #433434; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="desk95"]:not([data-theme="light"]) { color-scheme: dark; --paper: #141528; --stone: #262738; --sand: #353646; --ink: #d9d9d9; --ink-soft: #a8a8ad; --line: rgba(255,255,255,.12); --glass: #141528f2; --orange: #7979bb; --orange-press: #67679f; --on-orange: #101010; --cream: #141528; --panel: #141528; --tile: #262738; --edge: rgba(0,0,0,.5); --at-card: #212234; --at-bar: #232436; --at-tab: #8989c3; --gbg: #141528; --gink: #d9d9d9; --g2c: #6767b2; --g3c: #008080; --g4c: #808080; --gtile: #262738; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="desk95"][data-theme="dark"] { color-scheme: dark; --paper: #141528; --stone: #262738; --sand: #353646; --ink: #d9d9d9; --ink-soft: #a8a8ad; --line: rgba(255,255,255,.12); --glass: #141528f2; --orange: #7979bb; --orange-press: #67679f; --on-orange: #101010; --cream: #141528; --panel: #141528; --tile: #262738; --edge: rgba(0,0,0,.5); --at-card: #212234; --at-bar: #232436; --at-tab: #8989c3; --gbg: #141528; --gink: #d9d9d9; --g2c: #6767b2; --g3c: #008080; --g4c: #808080; --gtile: #262738; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="riso"]:not([data-theme="light"]) { color-scheme: dark; --paper: #34202f; --stone: #43313f; --sand: #503f4c; --ink: #faf7ee; --ink-soft: #c8c1be; --line: rgba(255,255,255,.12); --glass: #34202ff2; --orange: #ff48b0; --orange-press: #d93d96; --on-orange: #101010; --cream: #34202f; --panel: #34202f; --tile: #43313f; --edge: rgba(0,0,0,.5); --at-card: #3f2c3a; --at-bar: #412e3d; --at-tab: #ff5eb9; --gbg: #34202f; --gink: #faf7ee; --g2c: #ff48b0; --g3c: #1f88c7; --g4c: #ffe800; --gtile: #43313f; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="riso"][data-theme="dark"] { color-scheme: dark; --paper: #34202f; --stone: #43313f; --sand: #503f4c; --ink: #faf7ee; --ink-soft: #c8c1be; --line: rgba(255,255,255,.12); --glass: #34202ff2; --orange: #ff48b0; --orange-press: #d93d96; --on-orange: #101010; --cream: #34202f; --panel: #34202f; --tile: #43313f; --edge: rgba(0,0,0,.5); --at-card: #3f2c3a; --at-bar: #412e3d; --at-tab: #ff5eb9; --gbg: #34202f; --gink: #faf7ee; --g2c: #ff48b0; --g3c: #1f88c7; --g4c: #ffe800; --gtile: #43313f; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="opm"]:not([data-theme="light"]) { color-scheme: dark; --paper: #2d1d1d; --stone: #3d2e2e; --sand: #4a3d3d; --ink: #f8f0e2; --ink-soft: #c5bbb1; --line: rgba(255,255,255,.12); --glass: #2d1d1df2; --orange: #d5664f; --orange-press: #b55743; --on-orange: #101010; --cream: #2d1d1d; --panel: #2d1d1d; --tile: #3d2e2e; --edge: rgba(0,0,0,.5); --at-card: #392929; --at-bar: #3b2c2c; --at-tab: #da7864; --gbg: #2d1d1d; --gink: #f8f0e2; --g2c: #cf5137; --g3c: #f0a020; --g4c: #488084; --gtile: #3d2e2e; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="opm"][data-theme="dark"] { color-scheme: dark; --paper: #2d1d1d; --stone: #3d2e2e; --sand: #4a3d3d; --ink: #f8f0e2; --ink-soft: #c5bbb1; --line: rgba(255,255,255,.12); --glass: #2d1d1df2; --orange: #d5664f; --orange-press: #b55743; --on-orange: #101010; --cream: #2d1d1d; --panel: #2d1d1d; --tile: #3d2e2e; --edge: rgba(0,0,0,.5); --at-card: #392929; --at-bar: #3b2c2c; --at-tab: #da7864; --gbg: #2d1d1d; --gink: #f8f0e2; --g2c: #cf5137; --g3c: #f0a020; --g4c: #488084; --gtile: #3d2e2e; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="vapor"]:not([data-theme="light"]) { color-scheme: dark; --paper: #34202e; --stone: #43313e; --sand: #503f4b; --ink: #fef1f8; --ink-soft: #ccbdc6; --line: rgba(255,255,255,.12); --glass: #34202ef2; --orange: #ff4fa3; --orange-press: #d9438b; --on-orange: #101010; --cream: #34202e; --panel: #34202e; --tile: #43313e; --edge: rgba(0,0,0,.5); --at-card: #3f2c39; --at-bar: #412e3c; --at-tab: #ff64ae; --gbg: #34202e; --gink: #fef1f8; --g2c: #ff4fa3; --g3c: #4de1d6; --g4c: #8a6dff; --gtile: #43313e; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="vapor"][data-theme="dark"] { color-scheme: dark; --paper: #34202e; --stone: #43313e; --sand: #503f4b; --ink: #fef1f8; --ink-soft: #ccbdc6; --line: rgba(255,255,255,.12); --glass: #34202ef2; --orange: #ff4fa3; --orange-press: #d9438b; --on-orange: #101010; --cream: #34202e; --panel: #34202e; --tile: #43313e; --edge: rgba(0,0,0,.5); --at-card: #3f2c39; --at-bar: #412e3c; --at-tab: #ff64ae; --gbg: #34202e; --gink: #fef1f8; --g2c: #ff4fa3; --g3c: #4de1d6; --g4c: #8a6dff; --gtile: #43313e; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="aero"]:not([data-theme="light"]) { color-scheme: dark; --paper: #192839; --stone: #2a3848; --sand: #394655; --ink: #f1faff; --ink-soft: #bbc6ce; --line: rgba(255,255,255,.12); --glass: #192839f2; --orange: #1a8cff; --orange-press: #1677d9; --on-orange: #101010; --cream: #192839; --panel: #192839; --tile: #2a3848; --edge: rgba(0,0,0,.5); --at-card: #263444; --at-bar: #283646; --at-tab: #359aff; --gbg: #192839; --gink: #f1faff; --g2c: #1a8cff; --g3c: #7fdc4a; --g4c: #9fe3ff; --gtile: #2a3848; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="aero"][data-theme="dark"] { color-scheme: dark; --paper: #192839; --stone: #2a3848; --sand: #394655; --ink: #f1faff; --ink-soft: #bbc6ce; --line: rgba(255,255,255,.12); --glass: #192839f2; --orange: #1a8cff; --orange-press: #1677d9; --on-orange: #101010; --cream: #192839; --panel: #192839; --tile: #2a3848; --edge: rgba(0,0,0,.5); --at-card: #263444; --at-bar: #283646; --at-tab: #359aff; --gbg: #192839; --gink: #f1faff; --g2c: #1a8cff; --g3c: #7fdc4a; --g4c: #9fe3ff; --gtile: #2a3848; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="holo"]:not([data-theme="light"]) { color-scheme: dark; --paper: #212037; --stone: #323146; --sand: #403f53; --ink: #f5f6ff; --ink-soft: #c0c0cd; --line: rgba(255,255,255,.12); --glass: #212037f2; --orange: #7f74f4; --orange-press: #6c63cf; --on-orange: #101010; --cream: #212037; --panel: #212037; --tile: #323146; --edge: rgba(0,0,0,.5); --at-card: #2d2c42; --at-bar: #2f2e44; --at-tab: #8e85f5; --gbg: #212037; --gink: #f5f6ff; --g2c: #6e61f2; --g3c: #ff7ac8; --g4c: #5ee0d0; --gtile: #323146; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="holo"][data-theme="dark"] { color-scheme: dark; --paper: #212037; --stone: #323146; --sand: #403f53; --ink: #f5f6ff; --ink-soft: #c0c0cd; --line: rgba(255,255,255,.12); --glass: #212037f2; --orange: #7f74f4; --orange-press: #6c63cf; --on-orange: #101010; --cream: #212037; --panel: #212037; --tile: #323146; --edge: rgba(0,0,0,.5); --at-card: #2d2c42; --at-bar: #2f2e44; --at-tab: #8e85f5; --gbg: #212037; --gink: #f5f6ff; --g2c: #6e61f2; --g3c: #ff7ac8; --g4c: #5ee0d0; --gtile: #323146; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="clay"]:not([data-theme="light"]) { color-scheme: dark; --paper: #34272e; --stone: #43373e; --sand: #50454b; --ink: #fef8f1; --ink-soft: #ccc4c0; --line: rgba(255,255,255,.12); --glass: #34272ef2; --orange: #ff8fa3; --orange-press: #d97a8b; --on-orange: #101010; --cream: #34272e; --panel: #34272e; --tile: #43373e; --edge: rgba(0,0,0,.5); --at-card: #3f3339; --at-bar: #41353c; --at-tab: #ff8fa3; --gbg: #34272e; --gink: #fef8f1; --g2c: #ff8fa3; --g3c: #ffd38a; --g4c: #9fd8f5; --gtile: #43373e; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="clay"][data-theme="dark"] { color-scheme: dark; --paper: #34272e; --stone: #43373e; --sand: #50454b; --ink: #fef8f1; --ink-soft: #ccc4c0; --line: rgba(255,255,255,.12); --glass: #34272ef2; --orange: #ff8fa3; --orange-press: #d97a8b; --on-orange: #101010; --cream: #34272e; --panel: #34272e; --tile: #43373e; --edge: rgba(0,0,0,.5); --at-card: #3f3339; --at-bar: #41353c; --at-tab: #ff8fa3; --gbg: #34272e; --gink: #fef8f1; --g2c: #ff8fa3; --g3c: #ffd38a; --g4c: #9fd8f5; --gtile: #43373e; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="solar"]:not([data-theme="light"]) { color-scheme: dark; --paper: #1d2821; --stone: #2e3832; --sand: #3d4640; --ink: #f7faf0; --ink-soft: #c0c6bc; --line: rgba(255,255,255,.12); --glass: #1d2821f2; --orange: #529852; --orange-press: #468146; --on-orange: #101010; --cream: #1d2821; --panel: #1d2821; --tile: #2e3832; --edge: rgba(0,0,0,.5); --at-card: #29342d; --at-bar: #2c362f; --at-tab: #67a467; --gbg: #1d2821; --gink: #f7faf0; --g2c: #3a8a3a; --g3c: #f2b705; --g4c: #3aa6a6; --gtile: #2e3832; --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="solar"][data-theme="dark"] { color-scheme: dark; --paper: #1d2821; --stone: #2e3832; --sand: #3d4640; --ink: #f7faf0; --ink-soft: #c0c6bc; --line: rgba(255,255,255,.12); --glass: #1d2821f2; --orange: #529852; --orange-press: #468146; --on-orange: #101010; --cream: #1d2821; --panel: #1d2821; --tile: #2e3832; --edge: rgba(0,0,0,.5); --at-card: #29342d; --at-bar: #2c362f; --at-tab: #67a467; --gbg: #1d2821; --gink: #f7faf0; --g2c: #3a8a3a; --g3c: #f2b705; --g4c: #3aa6a6; --gtile: #2e3832; --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="dmg"]:not([data-theme="light"]) { color-scheme: dark; --paper: #0f380f; --stone: #1e4a1e; --sand: #306230; --ink: #9bbc0f; --ink-soft: #8bac0f; --line: rgba(155,188,15,.2); --glass: rgba(15,56,15,.97); --orange: #9bbc0f; --orange-press: #8bac0f; --on-orange: #0f380f; --cream: #0f380f; --panel: #0f380f; --tile: #1e4a1e; --edge: #000; --at-card: #1e4a1e; --at-bar: #1e4a1e; --at-tab: #9bbc0f; --gbg: #0f380f; --gink: #9bbc0f; --g2c: #8bac0f; --g3c: #9bbc0f; --g4c: #306230; --gtile: #1e4a1e; --gstroke: rgba(0,0,0,.7); } } :root.fun[data-at="dmg"][data-theme="dark"] { color-scheme: dark; --paper: #0f380f; --stone: #1e4a1e; --sand: #306230; --ink: #9bbc0f; --ink-soft: #8bac0f; --line: rgba(155,188,15,.2); --glass: rgba(15,56,15,.97); --orange: #9bbc0f; --orange-press: #8bac0f; --on-orange: #0f380f; --cream: #0f380f; --panel: #0f380f; --tile: #1e4a1e; --edge: #000; --at-card: #1e4a1e; --at-bar: #1e4a1e; --at-tab: #9bbc0f; --gbg: #0f380f; --gink: #9bbc0f; --g2c: #8bac0f; --g3c: #9bbc0f; --g4c: #306230; --gtile: #1e4a1e; --gstroke: rgba(0,0,0,.7); } .fun[data-at="dmg"] .btn, .fun[data-at="dmg"] .chip, .fun[data-at="dmg"] .act, .fun[data-at="dmg"] .jump button, .fun[data-at="dmg"] .psearch, .fun[data-at="dmg"] .hcard, .fun[data-at="dmg"] .w, .fun[data-at="dmg"] .today-card, .fun[data-at="dmg"] .gtile2, .fun[data-at="dmg"] .coll-tile, .fun[data-at="dmg"] .tabs { box-shadow: 0 -3px 0 var(--ink-soft), 0 3px 0 var(--ink-soft), -3px 0 0 var(--ink-soft), 3px 0 0 var(--ink-soft) !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="mono"]:not([data-theme="light"]) { color-scheme: dark; --paper: oklch(19% .03 var(--at-h)); --stone: oklch(25% .035 var(--at-h)); --sand: oklch(32% .04 var(--at-h)); --ink: oklch(95% .02 var(--at-h)); --ink-soft: oklch(82% .035 var(--at-h)); --line: oklch(95% .02 var(--at-h) / .14); --glass: oklch(19% .03 var(--at-h) / .95); --orange: oklch(72% .15 var(--at-h)); --orange-press: oklch(65% .15 var(--at-h)); --on-orange: oklch(18% .04 var(--at-h)); --cream: oklch(19% .03 var(--at-h)); --panel: oklch(19% .03 var(--at-h)); --tile: oklch(24% .035 var(--at-h)); --edge: oklch(10% .02 var(--at-h)); --at-card: oklch(23% .035 var(--at-h)); --at-bar: oklch(23% .035 var(--at-h)); --gstroke: rgba(0,0,0,.72); } } :root.fun[data-at="mono"][data-theme="dark"] { color-scheme: dark; --paper: oklch(19% .03 var(--at-h)); --stone: oklch(25% .035 var(--at-h)); --sand: oklch(32% .04 var(--at-h)); --ink: oklch(95% .02 var(--at-h)); --ink-soft: oklch(82% .035 var(--at-h)); --line: oklch(95% .02 var(--at-h) / .14); --glass: oklch(19% .03 var(--at-h) / .95); --orange: oklch(72% .15 var(--at-h)); --orange-press: oklch(65% .15 var(--at-h)); --on-orange: oklch(18% .04 var(--at-h)); --cream: oklch(19% .03 var(--at-h)); --panel: oklch(19% .03 var(--at-h)); --tile: oklch(24% .035 var(--at-h)); --edge: oklch(10% .02 var(--at-h)); --at-card: oklch(23% .035 var(--at-h)); --at-bar: oklch(23% .035 var(--at-h)); --gstroke: rgba(0,0,0,.72); } @media (prefers-color-scheme: dark) { :root.fun[data-at="jeepney"]:not([data-theme="light"]) .chip, :root.fun[data-at="jeepney"]:not([data-theme="light"]) .btn--quiet, :root.fun[data-at="jeepney"]:not([data-theme="light"]) .jump button { background: linear-gradient(#4a5058, #2c3036 55%, #3b4148) !important; color: var(--ink) !important; box-shadow: 0 3px 0 #15181b, inset 0 0 0 1.5px #6b737c !important; } } :root.fun[data-at="jeepney"][data-theme="dark"] .chip, :root.fun[data-at="jeepney"][data-theme="dark"] .btn--quiet, :root.fun[data-at="jeepney"][data-theme="dark"] .jump button { background: linear-gradient(#4a5058, #2c3036 55%, #3b4148) !important; color: var(--ink) !important; box-shadow: 0 3px 0 #15181b, inset 0 0 0 1.5px #6b737c !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="komiks"]:not([data-theme="light"]) .btn, :root.fun[data-at="komiks"]:not([data-theme="light"]) .chip, :root.fun[data-at="komiks"]:not([data-theme="light"]) .act, :root.fun[data-at="komiks"]:not([data-theme="light"]) .jump button, :root.fun[data-at="komiks"]:not([data-theme="light"]) .hcard, :root.fun[data-at="komiks"]:not([data-theme="light"]) .w, :root.fun[data-at="komiks"]:not([data-theme="light"]) .today-card, :root.fun[data-at="komiks"]:not([data-theme="light"]) .gtile2, :root.fun[data-at="komiks"]:not([data-theme="light"]) .coll-tile, :root.fun[data-at="komiks"]:not([data-theme="light"]) .coll-door, :root.fun[data-at="komiks"]:not([data-theme="light"]) .game-host, :root.fun[data-at="komiks"]:not([data-theme="light"]) .tabs { border-color: var(--ink) !important; box-shadow: 4px 4px 0 var(--orange) !important; } } :root.fun[data-at="komiks"][data-theme="dark"] .btn, :root.fun[data-at="komiks"][data-theme="dark"] .chip, :root.fun[data-at="komiks"][data-theme="dark"] .act, :root.fun[data-at="komiks"][data-theme="dark"] .jump button, :root.fun[data-at="komiks"][data-theme="dark"] .hcard, :root.fun[data-at="komiks"][data-theme="dark"] .w, :root.fun[data-at="komiks"][data-theme="dark"] .today-card, :root.fun[data-at="komiks"][data-theme="dark"] .gtile2, :root.fun[data-at="komiks"][data-theme="dark"] .coll-tile, :root.fun[data-at="komiks"][data-theme="dark"] .coll-door, :root.fun[data-at="komiks"][data-theme="dark"] .game-host, :root.fun[data-at="komiks"][data-theme="dark"] .tabs { border-color: var(--ink) !important; box-shadow: 4px 4px 0 var(--orange) !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="sarisari"]:not([data-theme="light"]) .sheet__title, :root.fun[data-at="sarisari"]:not([data-theme="light"]) .hcard__t, :root.fun[data-at="sarisari"]:not([data-theme="light"]) .sec, :root.fun[data-at="sarisari"]:not([data-theme="light"]) .shelf-h { color: #ff7a6b !important; } } :root.fun[data-at="sarisari"][data-theme="dark"] .sheet__title, :root.fun[data-at="sarisari"][data-theme="dark"] .hcard__t, :root.fun[data-at="sarisari"][data-theme="dark"] .sec, :root.fun[data-at="sarisari"][data-theme="dark"] .shelf-h { color: #ff7a6b !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="aero"]:not([data-theme="light"]) .chip, :root.fun[data-at="aero"]:not([data-theme="light"]) .btn--quiet { background: linear-gradient(180deg, #2b4a66, #1b3550 50%, #16304a 51%, #24435f) !important; color: var(--ink) !important; } } :root.fun[data-at="aero"][data-theme="dark"] .chip, :root.fun[data-at="aero"][data-theme="dark"] .btn--quiet { background: linear-gradient(180deg, #2b4a66, #1b3550 50%, #16304a 51%, #24435f) !important; color: var(--ink) !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="holo"]:not([data-theme="light"]) .hcard, :root.fun[data-at="holo"]:not([data-theme="light"]) .w, :root.fun[data-at="holo"]:not([data-theme="light"]) .today-card, :root.fun[data-at="holo"]:not([data-theme="light"]) .gtile2, :root.fun[data-at="holo"]:not([data-theme="light"]) .coll-tile { background: linear-gradient(var(--at-card), var(--at-card)) padding-box, linear-gradient(120deg, #ff7ac8, #ffd36b, #5ee0d0, #8aa2ff) border-box !important; } } :root.fun[data-at="holo"][data-theme="dark"] .hcard, :root.fun[data-at="holo"][data-theme="dark"] .w, :root.fun[data-at="holo"][data-theme="dark"] .today-card, :root.fun[data-at="holo"][data-theme="dark"] .gtile2, :root.fun[data-at="holo"][data-theme="dark"] .coll-tile { background: linear-gradient(var(--at-card), var(--at-card)) padding-box, linear-gradient(120deg, #ff7ac8, #ffd36b, #5ee0d0, #8aa2ff) border-box !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="holo"]:not([data-theme="light"]) .sheet { background: radial-gradient(120% 60% at 0% 0%, rgba(255,122,200,.14), transparent 60%), radial-gradient(120% 60% at 100% 10%, rgba(94,224,208,.14), transparent 60%), var(--cream) !important; } } :root.fun[data-at="holo"][data-theme="dark"] .sheet { background: radial-gradient(120% 60% at 0% 0%, rgba(255,122,200,.14), transparent 60%), radial-gradient(120% 60% at 100% 10%, rgba(94,224,208,.14), transparent 60%), var(--cream) !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="clay"]:not([data-theme="light"]) .hcard, :root.fun[data-at="clay"]:not([data-theme="light"]) .w, :root.fun[data-at="clay"]:not([data-theme="light"]) .today-card, :root.fun[data-at="clay"]:not([data-theme="light"]) .gtile2, :root.fun[data-at="clay"]:not([data-theme="light"]) .coll-tile, :root.fun[data-at="clay"]:not([data-theme="light"]) .btn, :root.fun[data-at="clay"]:not([data-theme="light"]) .chip { box-shadow: inset 2px 2px 5px rgba(255,255,255,.08), inset -4px -5px 10px rgba(0,0,0,.35), 5px 7px 14px rgba(0,0,0,.4) !important; } } :root.fun[data-at="clay"][data-theme="dark"] .hcard, :root.fun[data-at="clay"][data-theme="dark"] .w, :root.fun[data-at="clay"][data-theme="dark"] .today-card, :root.fun[data-at="clay"][data-theme="dark"] .gtile2, :root.fun[data-at="clay"][data-theme="dark"] .coll-tile, :root.fun[data-at="clay"][data-theme="dark"] .btn, :root.fun[data-at="clay"][data-theme="dark"] .chip { box-shadow: inset 2px 2px 5px rgba(255,255,255,.08), inset -4px -5px 10px rgba(0,0,0,.35), 5px 7px 14px rgba(0,0,0,.4) !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="desk95"]:not([data-theme="light"]) .sheet { background: #2b2b2b !important; box-shadow: inset 1px 1px 0 #5a5a5a, inset -1px -1px 0 #000, inset 2px 2px 0 #444, inset -2px -2px 0 #111 !important; } } :root.fun[data-at="desk95"][data-theme="dark"] .sheet { background: #2b2b2b !important; box-shadow: inset 1px 1px 0 #5a5a5a, inset -1px -1px 0 #000, inset 2px 2px 0 #444, inset -2px -2px 0 #111 !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="desk95"]:not([data-theme="light"]) .btn, :root.fun[data-at="desk95"]:not([data-theme="light"]) .chip, :root.fun[data-at="desk95"]:not([data-theme="light"]) .act, :root.fun[data-at="desk95"]:not([data-theme="light"]) .jump button, :root.fun[data-at="desk95"]:not([data-theme="light"]) .psearch, :root.fun[data-at="desk95"]:not([data-theme="light"]) .hcard, :root.fun[data-at="desk95"]:not([data-theme="light"]) .w, :root.fun[data-at="desk95"]:not([data-theme="light"]) .today-card, :root.fun[data-at="desk95"]:not([data-theme="light"]) .gtile2, :root.fun[data-at="desk95"]:not([data-theme="light"]) .coll-tile, :root.fun[data-at="desk95"]:not([data-theme="light"]) .coll-door, :root.fun[data-at="desk95"]:not([data-theme="light"]) .tabs, :root.fun[data-at="desk95"]:not([data-theme="light"]) .hub-pill { background: #3a3a3a !important; color: #f0f0f0 !important; box-shadow: inset 1px 1px 0 #6a6a6a, inset -1px -1px 0 #000, inset 2px 2px 0 #4c4c4c, inset -2px -2px 0 #1a1a1a !important; } } :root.fun[data-at="desk95"][data-theme="dark"] .btn, :root.fun[data-at="desk95"][data-theme="dark"] .chip, :root.fun[data-at="desk95"][data-theme="dark"] .act, :root.fun[data-at="desk95"][data-theme="dark"] .jump button, :root.fun[data-at="desk95"][data-theme="dark"] .psearch, :root.fun[data-at="desk95"][data-theme="dark"] .hcard, :root.fun[data-at="desk95"][data-theme="dark"] .w, :root.fun[data-at="desk95"][data-theme="dark"] .today-card, :root.fun[data-at="desk95"][data-theme="dark"] .gtile2, :root.fun[data-at="desk95"][data-theme="dark"] .coll-tile, :root.fun[data-at="desk95"][data-theme="dark"] .coll-door, :root.fun[data-at="desk95"][data-theme="dark"] .tabs, :root.fun[data-at="desk95"][data-theme="dark"] .hub-pill { background: #3a3a3a !important; color: #f0f0f0 !important; box-shadow: inset 1px 1px 0 #6a6a6a, inset -1px -1px 0 #000, inset 2px 2px 0 #4c4c4c, inset -2px -2px 0 #1a1a1a !important; } @media (prefers-color-scheme: dark) { :root.fun[data-at="desk95"]:not([data-theme="light"]) { color-scheme: dark; --paper: #2b2b2b; --stone: #3a3a3a; --sand: #4c4c4c; --ink: #f0f0f0; --ink-soft: #d0d0d0; --orange: #6f8cff; --on-orange: #0b0b0b; --cream: #2b2b2b; --panel: #2b2b2b; --tile: #3a3a3a; --at-card: #3a3a3a; --at-bar: #3a3a3a; --at-tab: #9fb2ff; --gbg: #004c4c; --gink: #f0f0f0; --gtile: #3a3a3a; } } :root.fun[data-at="desk95"][data-theme="dark"] { color-scheme: dark; --paper: #2b2b2b; --stone: #3a3a3a; --sand: #4c4c4c; --ink: #f0f0f0; --ink-soft: #d0d0d0; --orange: #6f8cff; --on-orange: #0b0b0b; --cream: #2b2b2b; --panel: #2b2b2b; --tile: #3a3a3a; --at-card: #3a3a3a; --at-bar: #3a3a3a; --at-tab: #9fb2ff; --gbg: #004c4c; --gink: #f0f0f0; --gtile: #3a3a3a; } /* sideways-scrolling rows run edge to edge for swiping, but fade out before the panel's frame so nothing seems to spill outside the panel */ .sheet__body .ltabs, .sheet__body .jump, .sheet__body .ctabs, .sheet__body .chips { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); } .fun[data-at="pixel"] .sheet__body .ltabs, .fun[data-at="dmg"] .sheet__body .ltabs, .fun[data-at="desk95"] .sheet__body .ltabs, .fun[data-at="pixel"] .sheet__body .jump, .fun[data-at="dmg"] .sheet__body .jump { padding-top: 6px; padding-bottom: 8px; } .atp-prev--clay .atp-btn { color: #3a1f24; } /* the "ok" green stays light enough to read on every dark theme */ @media (prefers-color-scheme: dark) { :root.fun[data-at]:not([data-theme="light"]) { --ok: #45c486; } } :root.fun[data-at][data-theme="dark"] { --ok: #45c486; } :root.fun[data-at="dmg"]:not([data-theme="dark"]) { --ok: #0f380f; } @media (prefers-color-scheme: dark) { :root.fun[data-at="dmg"]:not([data-theme="light"]) { --ok: #9bbc0f; } } :root.fun[data-at="dmg"][data-theme="dark"] { --ok: #9bbc0f; } :root.fun[data-at="desk95"]:not([data-theme="dark"]) { --ok: #006400; } .voice-test { display: inline-flex; margin-top: 8px; } .fun[data-at="pixel"] .voice-test, .fun[data-at="pixel"] .me-row .chip { margin-left: 3px; } /* desktop has no drag handle above the title, so the theme strip (bunting, stripes) at the top of the panel sat on the title: move the header below it */ @media (min-width: 900px) { :root.fun .sheet__head { padding-top: 22px; } }