/* Acrylic / Pastel theme toolkit Usage: - Add `theme-acrylic-pastel` to for a site-wide acrylic pastel pass. - Add `pastel-acrylic` to any element for the main acrylic/pastel surface. - `pastel-acrylic` is the drop-in equivalent of `liquid-glass`. - Add `ap-surface` or `ap-card` to individual sections for opt-in styling. - Combine with a tint like `ap-tint-rose`, `ap-tint-sky`, `ap-tint-mint`, `ap-tint-lilac`, or `ap-tint-butter`. */ :root { --ap-font-display: var(--site-font); --ap-text: #2f2948; --ap-text-soft: rgba(47, 41, 72, 0.72); --ap-text-faint: rgba(47, 41, 72, 0.54); --ap-page-base: #fff7fb; --ap-page-base-2: #f7fbff; --ap-page-base-3: #f8fffb; --ap-rose: rgba(255, 174, 215, 0.42); --ap-peach: rgba(255, 202, 166, 0.4); --ap-butter: rgba(255, 234, 171, 0.44); --ap-mint: rgba(180, 240, 220, 0.4); --ap-sky: rgba(171, 222, 255, 0.4); --ap-lilac: rgba(207, 191, 255, 0.42); --ap-panel: linear-gradient( 155deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.28) 55%, rgba(255, 255, 255, 0.16) 100% ); --ap-panel-strong: linear-gradient( 155deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 52%, rgba(255, 255, 255, 0.2) 100% ); --ap-panel-border: rgba(255, 255, 255, 0.52); --ap-panel-highlight: rgba(255, 255, 255, 0.72); --ap-panel-shadow: 0 24px 60px rgba(138, 116, 177, 0.16), 0 10px 24px rgba(118, 145, 185, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78); --ap-panel-shadow-flat: 0 24px 60px rgba(138, 116, 177, 0.16), 0 10px 24px rgba(118, 145, 185, 0.12); --ap-panel-blur: blur(24px) saturate(1.45); --ap-local-tint: color-mix(in srgb, var(--accent-color) 24%, transparent); --ap-local-tint-strong: color-mix(in srgb, var(--accent-color) 36%, transparent); --ap-accent: var(--accent-color); --ap-accent-2: var(--secondary-color); --ap-accent-3: var(--primary-color); --ap-border-soft: rgba(115, 101, 158, 0.16); } html[data-theme="dark"] { --ap-text: #f5f0ff; --ap-text-soft: rgba(245, 240, 255, 0.76); --ap-text-faint: rgba(245, 240, 255, 0.56); --ap-page-base: #0f1222; --ap-page-base-2: #111826; --ap-page-base-3: #0d1a1e; --ap-rose: rgba(255, 129, 192, 0.22); --ap-peach: rgba(255, 178, 132, 0.18); --ap-butter: rgba(255, 218, 120, 0.18); --ap-mint: rgba(122, 227, 191, 0.18); --ap-sky: rgba(121, 186, 255, 0.2); --ap-lilac: rgba(179, 156, 255, 0.22); --ap-panel: linear-gradient( 155deg, rgba(28, 32, 52, 0.74) 0%, rgba(20, 25, 44, 0.58) 55%, rgba(14, 18, 34, 0.5) 100% ); --ap-panel-strong: linear-gradient( 155deg, rgba(32, 36, 58, 0.82) 0%, rgba(22, 28, 48, 0.66) 52%, rgba(14, 18, 34, 0.58) 100% ); --ap-panel-border: rgba(255, 255, 255, 0.12); --ap-panel-highlight: rgba(255, 255, 255, 0.1); --ap-panel-shadow: 0 28px 70px rgba(0, 0, 0, 0.38), 0 12px 30px rgba(10, 14, 28, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08); --ap-panel-shadow-flat: 0 28px 70px rgba(0, 0, 0, 0.38), 0 12px 30px rgba(10, 14, 28, 0.42); --ap-panel-blur: blur(24px) saturate(1.3); --ap-local-tint: color-mix(in srgb, var(--accent-color) 14%, transparent); --ap-local-tint-strong: color-mix(in srgb, var(--accent-color) 22%, transparent); --ap-accent: var(--accent-color); --ap-accent-2: var(--secondary-color); --ap-accent-3: var(--primary-color); --ap-border-soft: rgba(203, 192, 255, 0.16); } body.theme-acrylic-pastel { --background-color: #fff7fb; --text-color: var(--ap-text); --embed-bg: rgba(255, 255, 255, 0.34); --embed-text-color: var(--ap-text); --embed-left-bar-color: var(--ap-accent); --box-shadow: var(--ap-panel-shadow); --embed-shadow: 0 18px 40px rgba(139, 122, 181, 0.12); --embed-shadow-hover: 0 30px 70px rgba(136, 118, 176, 0.2), 0 12px 28px rgba(129, 172, 201, 0.16); --shadow-sm: 0 8px 20px rgba(124, 143, 182, 0.1); --shadow-md: 0 16px 38px rgba(130, 148, 186, 0.12), 0 8px 18px rgba(149, 122, 183, 0.08); --shadow-lg: 0 24px 56px rgba(140, 123, 182, 0.14), 0 10px 24px rgba(127, 168, 194, 0.1); --shadow-xl: 0 34px 78px rgba(140, 120, 182, 0.18), 0 16px 36px rgba(120, 169, 201, 0.12); --shadow-2xl: 0 44px 110px rgba(138, 119, 180, 0.2), 0 20px 46px rgba(114, 164, 199, 0.12); --border: 1px solid rgba(255, 255, 255, 0.54); border-radius: 0; box-shadow: none; color-scheme: light; position: relative; background: transparent; isolation: isolate; } html[data-theme="dark"] body.theme-acrylic-pastel { --background-color: #0f1222; --text-color: var(--ap-text); --embed-bg: rgba(17, 22, 38, 0.58); --embed-text-color: var(--ap-text); --embed-left-bar-color: var(--ap-accent); --box-shadow: var(--ap-panel-shadow); --embed-shadow: 0 20px 44px rgba(0, 0, 0, 0.28); --embed-shadow-hover: 0 34px 78px rgba(0, 0, 0, 0.36), 0 14px 32px rgba(14, 22, 40, 0.3); --shadow-sm: 0 10px 22px rgba(0, 0, 0, 0.18); --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(10, 14, 28, 0.2); --shadow-lg: 0 26px 58px rgba(0, 0, 0, 0.26), 0 12px 26px rgba(10, 14, 28, 0.24); --shadow-xl: 0 36px 84px rgba(0, 0, 0, 0.32), 0 16px 36px rgba(10, 14, 28, 0.28); --shadow-2xl: 0 48px 120px rgba(0, 0, 0, 0.38), 0 22px 48px rgba(10, 14, 28, 0.3); --border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: none; color-scheme: dark; background: transparent; } body.theme-acrylic-pastel::before, body.theme-acrylic-pastel::after { content: ""; position: fixed; pointer-events: none; z-index: 0; } body.theme-acrylic-pastel::before { inset: 0; background: radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--accent-color) 36%, transparent), transparent 30%), radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--secondary-color) 30%, transparent), transparent 28%), radial-gradient(circle at 26% 82%, color-mix(in srgb, var(--primary-color) 26%, transparent), transparent 30%), radial-gradient(circle at 90% 82%, color-mix(in srgb, var(--color-5) 60%, transparent), transparent 26%), radial-gradient( circle at 0% 18%, color-mix(in srgb, var(--accent-color) 28%, transparent) 0%, transparent 18% ), radial-gradient( circle at 100% 86%, color-mix(in srgb, var(--primary-color) 22%, transparent) 0%, transparent 20% ), linear-gradient(145deg, var(--color-1) 0%, var(--color-2) 32%, var(--color-3) 62%, var(--color-4) 100%); } body.theme-acrylic-pastel::after { border-radius: 999px; filter: blur(54px); right: -120px; bottom: 4vh; width: min(34rem, 42vw); height: min(34rem, 42vw); background: linear-gradient( 135deg, color-mix(in srgb, var(--primary-color) 28%, transparent), color-mix(in srgb, var(--color-5) 48%, transparent) ); } html[data-theme="dark"] body.theme-acrylic-pastel::before { background: radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--accent-color) 22%, transparent), transparent 30%), radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--secondary-color) 18%, transparent), transparent 28%), radial-gradient(circle at 26% 82%, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 30%), radial-gradient(circle at 90% 82%, color-mix(in srgb, var(--color-5) 28%, transparent), transparent 26%), radial-gradient( circle at 0% 18%, color-mix(in srgb, var(--accent-color) 14%, transparent) 0%, transparent 18% ), radial-gradient( circle at 100% 86%, color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, transparent 20% ), linear-gradient(145deg, var(--color-5) 0%, var(--color-1) 26%, var(--color-2) 58%, var(--color-4) 100%); } html[data-theme="dark"] body.theme-acrylic-pastel::after { background: linear-gradient( 135deg, color-mix(in srgb, var(--primary-color) 14%, transparent), color-mix(in srgb, var(--color-5) 18%, transparent) ); } body.theme-acrylic-pastel > * { position: relative; z-index: 1; } .pastel-acrylic, .ap-surface, .ap-card, .ap-panel { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--ap-panel-border); background: radial-gradient(circle at top left, var(--ap-local-tint) 0%, transparent 44%), var(--ap-panel); backdrop-filter: var(--ap-panel-blur); -webkit-backdrop-filter: var(--ap-panel-blur); box-shadow: var(--ap-panel-shadow); } .pastel-acrylic::before, .ap-surface::before, .ap-card::before, .ap-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--ap-panel-highlight) 0%, transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%); opacity: 0.9; } .pastel-acrylic:hover, .pastel-acrylic:focus-within { box-shadow: 0 36px 86px rgba(136, 118, 176, 0.22), 0 14px 32px rgba(128, 169, 199, 0.18); border-color: rgba(255, 255, 255, 0.76); } .ap-card { padding: clamp(18px, 3vw, 28px); } .ap-card--interactive, .ap-hover-float { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease; } .ap-card--interactive:hover, .ap-card--interactive:focus-within, .ap-hover-float:hover, .ap-hover-float:focus-within { transform: translateY(-4px); box-shadow: 0 36px 86px rgba(136, 118, 176, 0.22), 0 14px 32px rgba(128, 169, 199, 0.18); border-color: rgba(255, 255, 255, 0.76); } .ap-card--compact { padding: 16px; border-radius: 22px; } .ap-glow { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.46), 0 24px 60px rgba(144, 128, 184, 0.18), 0 0 60px color-mix(in srgb, var(--ap-local-tint-strong) 62%, transparent); } .ap-ring { border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .ap-tint-rose { --ap-local-tint: var(--ap-rose); --ap-local-tint-strong: rgba(255, 174, 215, 0.48); } .ap-tint-peach { --ap-local-tint: var(--ap-peach); --ap-local-tint-strong: rgba(255, 202, 166, 0.48); } .ap-tint-butter { --ap-local-tint: var(--ap-butter); --ap-local-tint-strong: rgba(255, 234, 171, 0.5); } .ap-tint-mint { --ap-local-tint: var(--ap-mint); --ap-local-tint-strong: rgba(180, 240, 220, 0.48); } .ap-tint-sky { --ap-local-tint: var(--ap-sky); --ap-local-tint-strong: rgba(171, 222, 255, 0.48); } .ap-tint-lilac { --ap-local-tint: var(--ap-lilac); --ap-local-tint-strong: rgba(207, 191, 255, 0.5); } .ap-title, .ap-heading { margin: 0; color: var(--ap-text); font-family: var(--ap-font-display); font-weight: 800; letter-spacing: -0.04em; } .ap-title { font-size: clamp(2.25rem, 5vw, 4.8rem); line-height: 0.94; } .ap-heading { font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.02; } .ap-kicker { margin: 0; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ap-text-soft); } .ap-text-soft { color: var(--ap-text-soft); } .ap-text-faint { color: var(--ap-text-faint); } .ap-stack { display: grid; gap: 14px; } .ap-cluster { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ap-grid { display: grid; gap: 14px; } .ap-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ap-button, .ap-chip, .ap-pill, .ap-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.64); background: radial-gradient(circle at top left, var(--ap-local-tint) 0%, transparent 65%), rgba(255, 255, 255, 0.28); color: var(--ap-text); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 28px rgba(138, 121, 180, 0.12); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, background-color 220ms ease; } html[data-theme="dark"] .ap-button, html[data-theme="dark"] .ap-chip, html[data-theme="dark"] .ap-pill, html[data-theme="dark"] .ap-badge { border-color: rgba(255, 255, 255, 0.14); background: radial-gradient(circle at top left, var(--ap-local-tint) 0%, transparent 65%), rgba(20, 25, 42, 0.56); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 28px rgba(0, 0, 0, 0.26); } .ap-button:hover, .ap-button:focus-visible, .ap-chip:hover, .ap-chip:focus-visible, .ap-pill:hover, .ap-pill:focus-visible { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.84); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 18px 38px rgba(136, 118, 176, 0.16); } .ap-button--solid { background: linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.14)), linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 84%, white 10%), color-mix(in srgb, var(--secondary-color) 82%, white 8%)); color: #fffdfd; text-shadow: 0 1px 0 rgba(93, 81, 133, 0.18); } .ap-button--ghost { background: rgba(255, 255, 255, 0.2); } .ap-badge, .ap-pill { min-height: 30px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700; } .ap-input, .ap-select, .ap-textarea { width: 100%; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.62); background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.22)); color: var(--ap-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 24px rgba(141, 124, 181, 0.08); backdrop-filter: blur(14px) saturate(1.28); -webkit-backdrop-filter: blur(14px) saturate(1.28); } html[data-theme="dark"] .ap-input, html[data-theme="dark"] .ap-select, html[data-theme="dark"] .ap-textarea { border-color: rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, rgba(24, 29, 48, 0.82), rgba(17, 22, 38, 0.64)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 24px rgba(0, 0, 0, 0.22); } .ap-input:focus, .ap-select:focus, .ap-textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.86); box-shadow: 0 0 0 3px rgba(255, 141, 192, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 16px 30px rgba(141, 124, 181, 0.1); } .ap-divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(122, 117, 165, 0.24), transparent); } .ap-orb { position: absolute; border-radius: 999px; filter: blur(16px); opacity: 0.64; pointer-events: none; } .ap-orb--rose { background: rgba(255, 174, 215, 0.58); } .ap-orb--sky { background: rgba(171, 222, 255, 0.58); } .ap-orb--mint { background: rgba(180, 240, 220, 0.58); } body.theme-acrylic-pastel .liquid-glass, body.theme-acrylic-pastel .navbar, body.theme-acrylic-pastel .content, body.theme-acrylic-pastel .home-surface, body.theme-acrylic-pastel .site-hero-card, body.theme-acrylic-pastel .projects-card, body.theme-acrylic-pastel .formats-card, body.theme-acrylic-pastel .image-box, body.theme-acrylic-pastel .upload-form, body.theme-acrylic-pastel .images-toolbar, body.theme-acrylic-pastel .toggle-label, body.theme-acrylic-pastel .test-card, body.theme-acrylic-pastel .toetsen-stats, body.theme-acrylic-pastel .component-card, body.theme-acrylic-pastel .general-limits, body.theme-acrylic-pastel .limit-item { border-color: rgba(255, 255, 255, 0.56); background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 20%, transparent) 0%, transparent 38%), radial-gradient(circle at top right, color-mix(in srgb, var(--secondary-color) 16%, transparent) 0%, transparent 36%), var(--ap-panel-strong); box-shadow: var(--ap-panel-shadow); backdrop-filter: var(--ap-panel-blur); -webkit-backdrop-filter: var(--ap-panel-blur); } body.theme-acrylic-pastel .site-hero-card, body.theme-acrylic-pastel .projects-card, body.theme-acrylic-pastel .formats-card { box-shadow: var(--ap-panel-shadow); } html[data-theme="dark"] body.theme-acrylic-pastel .liquid-glass, html[data-theme="dark"] body.theme-acrylic-pastel .navbar, html[data-theme="dark"] body.theme-acrylic-pastel .content, html[data-theme="dark"] body.theme-acrylic-pastel .home-surface, html[data-theme="dark"] body.theme-acrylic-pastel .site-hero-card, html[data-theme="dark"] body.theme-acrylic-pastel .projects-card, html[data-theme="dark"] body.theme-acrylic-pastel .formats-card, html[data-theme="dark"] body.theme-acrylic-pastel .image-box, html[data-theme="dark"] body.theme-acrylic-pastel .upload-form, html[data-theme="dark"] body.theme-acrylic-pastel .images-toolbar, html[data-theme="dark"] body.theme-acrylic-pastel .toggle-label, html[data-theme="dark"] body.theme-acrylic-pastel .test-card, html[data-theme="dark"] body.theme-acrylic-pastel .toetsen-stats, html[data-theme="dark"] body.theme-acrylic-pastel .component-card, html[data-theme="dark"] body.theme-acrylic-pastel .general-limits, html[data-theme="dark"] body.theme-acrylic-pastel .limit-item { border-color: rgba(255, 255, 255, 0.12); background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 10%, transparent) 0%, transparent 38%), radial-gradient(circle at top right, color-mix(in srgb, var(--secondary-color) 8%, transparent) 0%, transparent 36%), var(--ap-panel-strong); } html[data-theme="dark"] body.theme-acrylic-pastel .site-hero-card, html[data-theme="dark"] body.theme-acrylic-pastel .projects-card, html[data-theme="dark"] body.theme-acrylic-pastel .formats-card { box-shadow: var(--ap-panel-shadow); } body.theme-acrylic-pastel .home-card, body.theme-acrylic-pastel .home-stat, body.theme-acrylic-pastel .home-social__link, body.theme-acrylic-pastel .hero-chip, body.theme-acrylic-pastel .projects-section-link, body.theme-acrylic-pastel .repo-card, body.theme-acrylic-pastel .repo-card__link, body.theme-acrylic-pastel .repo-card__pill, body.theme-acrylic-pastel .projects-gists__item, body.theme-acrylic-pastel .projects-gists__pill, body.theme-acrylic-pastel .projects-gists__btn, body.theme-acrylic-pastel .jump-nav, body.theme-acrylic-pastel .jump-nav a, body.theme-acrylic-pastel .filter-btn, body.theme-acrylic-pastel .filter-toggle { border-color: rgba(255, 255, 255, 0.62); background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 16%, transparent) 0%, transparent 44%), radial-gradient(circle at bottom right, color-mix(in srgb, var(--primary-color) 14%, transparent) 0%, transparent 42%), rgba(255, 255, 255, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 14px 32px rgba(137, 119, 178, 0.12); backdrop-filter: blur(18px) saturate(1.34); -webkit-backdrop-filter: blur(18px) saturate(1.34); } html[data-theme="dark"] body.theme-acrylic-pastel .home-card, html[data-theme="dark"] body.theme-acrylic-pastel .home-stat, html[data-theme="dark"] body.theme-acrylic-pastel .home-social__link, html[data-theme="dark"] body.theme-acrylic-pastel .hero-chip, html[data-theme="dark"] body.theme-acrylic-pastel .projects-section-link, html[data-theme="dark"] body.theme-acrylic-pastel .repo-card, html[data-theme="dark"] body.theme-acrylic-pastel .repo-card__link, html[data-theme="dark"] body.theme-acrylic-pastel .repo-card__pill, html[data-theme="dark"] body.theme-acrylic-pastel .projects-gists__item, html[data-theme="dark"] body.theme-acrylic-pastel .projects-gists__pill, html[data-theme="dark"] body.theme-acrylic-pastel .projects-gists__btn, html[data-theme="dark"] body.theme-acrylic-pastel .jump-nav, html[data-theme="dark"] body.theme-acrylic-pastel .jump-nav a, html[data-theme="dark"] body.theme-acrylic-pastel .filter-btn, html[data-theme="dark"] body.theme-acrylic-pastel .filter-toggle { border-color: rgba(255, 255, 255, 0.14); background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 8%, transparent) 0%, transparent 44%), radial-gradient(circle at bottom right, color-mix(in srgb, var(--primary-color) 8%, transparent) 0%, transparent 42%), rgba(20, 25, 42, 0.54); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 32px rgba(0, 0, 0, 0.24); } body.theme-acrylic-pastel .home-social__link:hover, body.theme-acrylic-pastel .home-social__link:focus-visible, body.theme-acrylic-pastel .home-stat:hover, body.theme-acrylic-pastel .home-stat:focus-visible, body.theme-acrylic-pastel .repo-card:hover, body.theme-acrylic-pastel .repo-card:focus-within, body.theme-acrylic-pastel .projects-gists__item:hover, body.theme-acrylic-pastel .projects-gists__item:focus-visible, body.theme-acrylic-pastel .hero-chip:hover, body.theme-acrylic-pastel .hero-chip:focus-visible, body.theme-acrylic-pastel .projects-section-link:hover, body.theme-acrylic-pastel .projects-section-link:focus-visible, body.theme-acrylic-pastel .projects-gists__btn:hover:not(:disabled), body.theme-acrylic-pastel .projects-gists__btn:focus-visible:not(:disabled), body.theme-acrylic-pastel .filter-btn:hover, body.theme-acrylic-pastel .filter-btn:focus-visible, body.theme-acrylic-pastel .filter-toggle:hover, body.theme-acrylic-pastel .filter-toggle:focus-visible { border-color: rgba(255, 255, 255, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 20px 42px rgba(136, 118, 176, 0.18); } body.theme-acrylic-pastel .upload-form button[type="submit"], body.theme-acrylic-pastel .filter-btn.active { background: linear-gradient( 135deg, color-mix(in srgb, var(--accent-color) 86%, white 8%), color-mix(in srgb, var(--secondary-color) 84%, white 6%) ); color: #fffdfd; border-color: rgba(255, 255, 255, 0.66); } body.theme-acrylic-pastel .upload-form select, body.theme-acrylic-pastel .custom-name-input, body.theme-acrylic-pastel input[type="file"], body.theme-acrylic-pastel .navbar__select { border-color: rgba(255, 255, 255, 0.66); background: rgba(255, 255, 255, 0.34); color: var(--ap-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86); } html[data-theme="dark"] body.theme-acrylic-pastel .upload-form select, html[data-theme="dark"] body.theme-acrylic-pastel .custom-name-input, html[data-theme="dark"] body.theme-acrylic-pastel input[type="file"], html[data-theme="dark"] body.theme-acrylic-pastel .navbar__select { border-color: rgba(255, 255, 255, 0.14); background: rgba(18, 22, 38, 0.74); color: var(--ap-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } body.theme-acrylic-pastel .repo-card__description, body.theme-acrylic-pastel .projects-section-header__copy p, body.theme-acrylic-pastel .formats-section-header__copy p, body.theme-acrylic-pastel .home-summary, body.theme-acrylic-pastel .site-lede { color: var(--ap-text-soft); } body.theme-acrylic-pastel .site-header, body.theme-acrylic-pastel .site-title, body.theme-acrylic-pastel .home-title { color: var(--ap-text); text-shadow: 0 10px 24px rgba(255, 255, 255, 0.32); } body.theme-acrylic-pastel .site-kicker, body.theme-acrylic-pastel .home-kicker, body.theme-acrylic-pastel .home-card__title, body.theme-acrylic-pastel .home-stat__label { color: var(--ap-text-soft); } body.theme-acrylic-pastel .navbar__link.is-active, body.theme-acrylic-pastel .navbar__theme-button, body.theme-acrylic-pastel .nav-accent-bubble, body.theme-acrylic-pastel .navbar__lang, body.theme-acrylic-pastel .navbar__icon-button { border-color: rgba(255, 255, 255, 0.66); background: radial-gradient(circle at top left, rgba(255, 236, 182, 0.16) 0%, transparent 50%), rgba(255, 255, 255, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 26px rgba(137, 119, 178, 0.1); } body.theme-acrylic-pastel .navbar__placeholder-pill, body.theme-acrylic-pastel .repo-card__placeholder, body.theme-acrylic-pastel .repo-card__placeholder-pill, body.theme-acrylic-pastel .projects-gists__placeholder, body.theme-acrylic-pastel .projects-gists__placeholder-pill { border-color: rgba(255, 255, 255, 0.56); background: linear-gradient( 90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.58) 50%, rgba(255, 255, 255, 0.18) 100% ); } html[data-theme="dark"] body.theme-acrylic-pastel .navbar__placeholder-pill, html[data-theme="dark"] body.theme-acrylic-pastel .repo-card__placeholder, html[data-theme="dark"] body.theme-acrylic-pastel .repo-card__placeholder-pill, html[data-theme="dark"] body.theme-acrylic-pastel .projects-gists__placeholder, html[data-theme="dark"] body.theme-acrylic-pastel .projects-gists__placeholder-pill { border-color: rgba(255, 255, 255, 0.12); background: linear-gradient( 90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.06) 100% ); } @media (max-width: 900px) { .ap-grid--2, .ap-grid--3 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .pastel-acrylic, .ap-surface, .ap-card, .ap-panel { border-radius: 22px; } .ap-title { font-size: clamp(2rem, 10vw, 3.3rem); } .ap-button, .ap-chip { width: 100%; } }