/* GENERATED by tools/bundle_css.py from css/main.css — do not edit by hand */
/* ---- css/main.css ---- */
/* NOTE: pages now load css/bundle.css (flattened copy of this file). After editing any file imported here, run: python3 tools/bundle_css.py */
/* ---- fonts/fonts.css ---- */
/* latin-ext */
@font-face {
font-family: 'Archivo Black';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/f1.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo Black';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/f2.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/f3.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/f4.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/f5.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/f6.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/f7.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/f8.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---- css/base.css ---- */
/* ===== DEFAULT COLOURS, FONTS, SIZES (pink theme values) ===== */
:root {
/* Y2K Bright Colors */
--pink: #FF5FA2;
--hot-pink: #FF5FA2;
--soft-pink: #FF9EC7;
--baby-pink: #FFD6E8;
--cyan: #00CED1;
--light-cyan: #E0FFFF;
--baby-blue: #BAE6FD;
--mint: #A7F3D0;
--yellow: #FDE68A;
--white: #FFFFFF;
--off-white: #F8F8FF;
--cream: #FFFBF0;
/* Win95/98 System Colors */
--win-gray: #C0C0C0;
--win-dark-gray: #808080;
--win-light: #DFDFDF;
--win-blue: #000080;
--win-blue-light: #1084D0;
--win-titlebar: linear-gradient(90deg, #000080, #1084D0);
/* Text */
--text: #333333;
--text-dark: #000000;
--text-light: #666666;
--text-link: #0000FF;
--text-visited: #FF5FA2;
/* Theme accent */
--accent: var(--pink);
--accent-soft: var(--soft-pink);
--accent-deep: var(--hot-pink);
--accent-glow: rgba(255,95,162, 0.3);
/* Retro tokens */
--border-retro: 2px ridge var(--win-gray);
--border-pixel: 3px outset var(--win-gray);
--shadow-retro: 3px 3px 0 rgba(0, 0, 0, 0.2);
--shadow-inset: inset 2px 2px 0 rgba(0, 0, 0, 0.15), inset -2px -2px 0 rgba(255, 255, 255, 0.6);
/* Fonts */
--font-heading: 'VT323', 'Courier New', monospace;
--font-display: 'Monoton', cursive;
--font-body: 'Comic Neue', 'Comic Sans MS', cursive;
--font-system: 'Tahoma', 'Segoe UI', sans-serif;
--font-serif: 'Times New Roman', Georgia, serif;
}
/* Blue theme (future) */
/* ===== RESET ===== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--off-white);
color: var(--text);
min-height: 100vh;
font-size: 15px;
line-height: 1.5;
}
a {
color: var(--text-link);
text-decoration: underline;
}
a:visited {
color: var(--text-visited);
}
a:hover {
color: var(--hot-pink);
}
img {
max-width: 100%;
height: auto;
}
/* ===== ANIMATIONS ===== */
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
@keyframes blink-text {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@keyframes pop-in {
0% { transform: scale(0.5); opacity: 0; }
70% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes slide-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes popup-appear {
0% { transform: scale(0.3); opacity: 0; }
60% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
/* ---- css/layout.css ---- */
/* ===== MARQUEE BAR ===== */
.marquee-bar {
background: var(--hot-pink);
color: white;
font-family: var(--font-heading);
font-size: 1.1rem;
letter-spacing: 2px;
padding: 0.3rem 0;
overflow: hidden;
white-space: nowrap;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.marquee-text {
display: inline-block;
animation: marquee 25s linear infinite;
}
/* ===== PAGE LAYOUT (table-like, 2-column) ===== */
.page-wrapper {
max-width: 960px;
margin: 0 auto;
background: white;
border-left: 2px ridge var(--win-gray);
border-right: 2px ridge var(--win-gray);
border-bottom: 2px ridge var(--win-gray);
}
.page-layout {
display: flex;
min-height: 100vh;
}
/* ===== LEFT SIDEBAR ===== */
.sidebar {
width: 180px;
min-width: 180px;
background: var(--win-gray);
border-right: 2px outset var(--win-light);
padding: 0;
}
.sidebar-section {
border-bottom: 2px outset var(--win-light);
}
.sidebar-title {
background: var(--win-titlebar);
color: white;
font-family: var(--font-system);
font-size: 11px;
font-weight: bold;
padding: 3px 8px;
letter-spacing: 1px;
}
.sidebar-nav {
list-style: none;
padding: 4px;
}
.sidebar-nav li {
margin-bottom: 2px;
}
.sidebar-nav a {
display: block;
padding: 6px 10px;
font-family: var(--font-body);
font-size: 14px;
color: var(--text-dark);
text-decoration: none;
background: var(--win-gray);
border: 2px outset var(--win-light);
text-align: center;
transition: all 0.1s;
}
.sidebar-nav a:hover {
background: var(--baby-pink);
border-color: var(--pink);
}
.sidebar-nav a.active {
background: var(--pink);
color: white;
border-style: inset;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
/* ===== MAIN CONTENT ===== */
.main-content {
flex: 1;
background: white;
padding: 0;
overflow: hidden;
}
/* ===== NAVIGATION (top colored buttons) ===== */
.top-nav {
display: flex;
gap: 2px;
padding: 6px 8px;
background: var(--win-gray);
border-bottom: 2px outset var(--win-light);
flex-wrap: wrap;
}
.top-nav a {
display: inline-block;
padding: 6px 16px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
color: white;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
border: 2px outset rgba(255, 255, 255, 0.3);
transition: all 0.1s;
}
.top-nav a:hover {
filter: brightness(1.15);
border-style: inset;
}
.top-nav a.active {
border-style: inset;
filter: brightness(0.9);
}
.footer-copy { margin-top: 0.5rem; }
/* ---- css/components.css ---- */
/* ===== WIN95 PANEL ===== */
.win-panel {
background: var(--win-gray);
border: 2px outset var(--win-light);
box-shadow: var(--shadow-retro);
}
.win-panel-inset {
background: white;
border: 2px inset var(--win-dark-gray);
}
.win-titlebar {
background: var(--win-titlebar);
color: white;
font-family: var(--font-system);
font-size: 12px;
font-weight: bold;
padding: 3px 6px;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.win-titlebar .close-btn {
background: var(--win-gray);
border: 2px outset var(--win-light);
color: black;
font-size: 11px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
line-height: 1;
font-family: var(--font-system);
}
.win-titlebar .close-btn:active {
border-style: inset;
}
/* ===== BANNER / HERO ===== */
.banner {
background: linear-gradient(135deg, var(--baby-pink), var(--light-cyan), var(--baby-pink));
border-bottom: 2px ridge var(--win-gray);
padding: 2rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.banner-title {
font-family: var(--font-display);
font-size: clamp(2rem, 8vw, 4rem);
color: var(--hot-pink);
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15), 0 0 20px var(--accent-glow);
margin-bottom: 0.5rem;
letter-spacing: 3px;
}
.banner-subtitle {
font-family: var(--font-heading);
font-size: 1.4rem;
color: var(--text);
letter-spacing: 3px;
}
.banner-stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.banner-star {
position: absolute;
width: 3px;
height: 3px;
background: var(--hot-pink);
border-radius: 50%;
animation: twinkle var(--dur) ease-in-out infinite;
animation-delay: var(--del);
}
/* ===== SECTION HEADERS ===== */
.section-header {
text-align: center;
padding: 1.5rem 1rem 0.5rem;
}
.section-tag {
display: inline-block;
font-family: var(--font-heading);
font-size: 0.9rem;
letter-spacing: 2px;
color: var(--hot-pink);
background: var(--baby-pink);
border: 1px dashed var(--pink);
padding: 0.2rem 0.8rem;
margin-bottom: 0.5rem;
}
.section-title {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--hot-pink);
letter-spacing: 2px;
}
.section-desc {
font-size: 0.95rem;
color: var(--text-light);
max-width: 500px;
margin: 0.5rem auto 0;
}
/* ===== CONTENT SECTIONS ===== */
.content-section {
padding: 1.5rem;
border-bottom: 2px ridge var(--win-gray);
}
.content-section:last-child {
border-bottom: none;
}
/* ===== CARDS (Win95 style) ===== */
.card {
background: var(--win-gray);
border: 2px outset var(--win-light);
box-shadow: var(--shadow-retro);
overflow: hidden;
transition: box-shadow 0.2s;
}
.card:hover {
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}
/* ===== PRODUCT GRID ===== */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.product-card {
background: var(--win-gray);
border: 2px outset var(--win-light);
box-shadow: var(--shadow-retro);
cursor: pointer;
transition: box-shadow 0.2s;
}
.product-card:hover {
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.product-image {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px ridge var(--win-gray);
position: relative;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-image::after {
content: '★ NEW!';
position: absolute;
top: 6px;
right: -25px;
background: var(--hot-pink);
color: white;
font-family: var(--font-heading);
font-size: 0.7rem;
letter-spacing: 1px;
padding: 0.2rem 1.5rem;
transform: rotate(45deg);
}
.product-info {
padding: 8px 10px;
background: white;
border: 2px inset var(--win-dark-gray);
margin: 4px;
}
.product-name {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.95rem;
color: var(--text-dark);
}
.product-category {
font-family: var(--font-heading);
font-size: 0.8rem;
color: var(--hot-pink);
letter-spacing: 1px;
}
.product-price {
font-family: var(--font-heading);
font-size: 1rem;
color: var(--text-light);
margin-top: 2px;
}
/* ===== MASONRY / LOOKBOOK ===== */
.masonry-grid {
columns: 3;
column-gap: 12px;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 12px;
background: var(--win-gray);
border: 2px outset var(--win-light);
box-shadow: var(--shadow-retro);
cursor: pointer;
transition: box-shadow 0.2s;
overflow: hidden;
}
.masonry-item:hover {
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.masonry-item img {
width: 100%;
display: block;
}
.masonry-overlay {
background: white;
border-top: 2px ridge var(--win-gray);
padding: 6px 10px;
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text);
}
/* ===== FILTER BUTTONS ===== */
.filter-bar {
display: flex;
gap: 4px;
padding: 8px 12px;
background: var(--win-gray);
border-bottom: 2px outset var(--win-light);
flex-wrap: wrap;
}
.filter-btn {
padding: 4px 12px;
font-family: var(--font-body);
font-size: 13px;
color: var(--text-dark);
background: var(--win-gray);
border: 2px outset var(--win-light);
cursor: pointer;
transition: all 0.1s;
}
.filter-btn:hover,
.filter-btn.active {
background: var(--baby-pink);
border-color: var(--pink);
border-style: inset;
}
/* ===== BUTTONS ===== */
.btn {
display: inline-block;
padding: 8px 20px;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
text-decoration: none;
cursor: pointer;
transition: all 0.1s;
text-align: center;
}
.btn-primary {
background: var(--pink);
color: white;
border: 2px outset var(--soft-pink);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-retro);
}
.btn-primary:hover {
border-style: inset;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
transform: translate(2px, 2px);
}
.btn-secondary {
background: var(--cyan);
color: white;
border: 2px outset var(--light-cyan);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-retro);
}
.btn-secondary:hover {
border-style: inset;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
transform: translate(2px, 2px);
}
.btn-retro {
background: var(--win-gray);
color: var(--text-dark);
border: 2px outset var(--win-light);
box-shadow: var(--shadow-retro);
}
.btn-retro:hover {
border-style: inset;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
transform: translate(2px, 2px);
}
/* ===== SOCIAL LINKS ===== */
.social-links {
display: flex;
gap: 6px;
justify-content: center;
margin-top: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: var(--win-gray);
border: 2px outset var(--win-light);
font-size: 1rem;
text-decoration: none;
transition: all 0.1s;
}
.social-link:hover {
background: var(--baby-pink);
border-style: inset;
transform: translate(1px, 1px);
}
/* ===== VISITOR COUNTER ===== */
.visitor-counter {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-heading);
font-size: 1rem;
color: #008000;
background: #000;
padding: 0.2rem 0.6rem;
border: 2px inset var(--win-dark-gray);
letter-spacing: 2px;
}
/* ===== FOOTER ===== */
.footer {
background: var(--win-gray);
border-top: 2px outset var(--win-light);
padding: 1rem;
text-align: center;
}
.footer-logo {
font-family: var(--font-display);
font-size: 1rem;
color: var(--hot-pink);
margin-bottom: 0.3rem;
}
.footer-text {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--text-light);
}
/* ===== BEST VIEWED BADGE ===== */
.best-viewed {
display: inline-block;
font-family: var(--font-heading);
font-size: 0.7rem;
color: var(--text-light);
letter-spacing: 1px;
border: 1px solid var(--win-dark-gray);
padding: 0.1rem 0.5rem;
margin-top: 0.5rem;
opacity: 0.6;
}
/* ===== THEME SWITCHER ===== */
.theme-switcher {
position: fixed;
right: 8px;
bottom: 8px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 3px;
}
.theme-btn {
width: 24px;
height: 24px;
border-radius: 0;
border: 2px outset var(--win-light);
cursor: pointer;
position: relative;
transition: all 0.1s;
}
.theme-btn:hover {
border-style: inset;
}
.theme-btn.active {
border: 2px inset var(--win-dark-gray);
}
.theme-btn[data-theme="pink"] { background: #FF5FA2; }
.theme-btn[data-theme="blue"] { background: #00BFFF; }
.theme-btn[data-theme="red"] { background: #FF5FA2; }
.theme-btn[data-theme="black"] { background: #333333; }
.theme-btn .tooltip {
position: absolute;
right: calc(100% + 6px);
top: 50%;
transform: translateY(-50%);
background: var(--win-gray);
border: 2px outset var(--win-light);
color: var(--text-dark);
font-family: var(--font-system);
font-size: 11px;
padding: 0.1rem 0.5rem;
white-space: nowrap;
display: none;
}
.theme-btn:hover .tooltip {
display: block;
}
/* ===== CURSOR TRAIL ===== */
.cursor-star {
position: fixed;
pointer-events: none;
z-index: 9999;
font-size: 10px;
color: white;
text-shadow: 0 0 6px rgba(255,255,255,.95);
animation: cursor-fade 0.6s ease-out forwards;
}
@keyframes cursor-fade {
0% { opacity: 1; transform: scale(1) translateY(0); }
100% { opacity: 0; transform: scale(0) translateY(-15px); }
}
/* ===== SPARKLE CANVAS ===== */
#sparkle-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* ===== OLD-PC POPUP ===== */
.pc-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
animation: popup-appear 0.2s ease;
}
.pc-popup {
background: var(--win-gray);
border: 2px outset var(--win-light);
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
max-width: 380px;
width: 90%;
}
.pc-popup-titlebar {
background: var(--win-titlebar);
color: white;
font-family: var(--font-system);
font-size: 12px;
font-weight: bold;
padding: 3px 6px;
display: flex;
justify-content: space-between;
align-items: center;
}
.pc-popup-titlebar .close-btn {
background: var(--win-gray);
border: 2px outset var(--win-light);
color: black;
font-size: 11px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
.pc-popup-titlebar .close-btn:active {
border-style: inset;
}
.pc-popup-body {
padding: 1rem;
background: var(--win-gray);
}
.pc-popup-body p {
font-family: var(--font-body);
font-size: 14px;
color: var(--text-dark);
margin-bottom: 1rem;
background: white;
border: 2px inset var(--win-dark-gray);
padding: 0.8rem;
}
.pc-popup-body .popup-btn {
display: block;
margin: 0 auto;
background: var(--win-gray);
border: 2px outset var(--win-light);
padding: 4px 2rem;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
cursor: pointer;
color: var(--text-dark);
}
.pc-popup-body .popup-btn:active {
border-style: inset;
}
/* ===== UTILITY ===== */
.animate-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.animate-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background: var(--win-gray);
border-left: 1px solid var(--win-dark-gray);
}
::-webkit-scrollbar-thumb {
background: var(--win-gray);
border: 2px outset var(--win-light);
}
::-webkit-scrollbar-thumb:hover {
background: var(--win-light);
}
::-webkit-scrollbar-button {
background: var(--win-gray);
border: 2px outset var(--win-light);
height: 16px;
}
/* ===== SELECTION ===== */
::selection {
background: var(--pink);
color: white;
}
/* ===== WELCOME POPUP: glossy gel title bar (Frutiger Aero / Y2K) ===== */
.pc-popup[aria-label="Welcome to Popipants!"] .pc-popup-titlebar {
position: relative;
overflow: hidden;
background: linear-gradient(90deg, #FF5FA2 0%, #FFD6E8 100%);
border: 2px solid transparent;
border-image: linear-gradient(180deg, #fff 0%, #d9d9e3 35%, #a9a9b8 55%, #f4f4f8 80%, #c4c4d0 100%) 1;
box-shadow: inset 0 -4px 8px rgba(255,255,255,.55), inset 0 2px 4px rgba(255,95,162,.45);
color: #FFFFFF !important;
font-family: Inconsolata, monospace;
font-size: 14px;
font-weight: 700;
letter-spacing: .08em;
text-shadow: 0 1px 2px rgba(160,20,90,.8), 0 0 1px rgba(160,20,90,.9);
padding: 5px 8px;
}
.pc-popup[aria-label="Welcome to Popipants!"] .pc-popup-titlebar::before {
content: "";
position: absolute;
left: 6px; right: 6px; top: 2px;
height: 45%;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
pointer-events: none;
}
.pc-popup[aria-label="Welcome to Popipants!"] .pc-popup-titlebar > * { position: relative; }
.pc-popup[aria-label="Welcome to Popipants!"] .pc-popup-titlebar .close-btn {
width: 22px; height: 22px;
border-radius: 50%;
border: 2px solid #c4c4d0;
background: radial-gradient(120% 100% at 50% 120%, #fff 0%, #FFD6E8 45%, #FF9EC7 100%);
box-shadow: 0 0 0 1px #fff, inset 0 -3px 5px #fff, inset 0 2px 3px rgba(255,95,162,.45), 0 2px 4px rgba(255,95,162,.35);
color: #FF5FA2;
font-family: Inconsolata, monospace;
font-weight: 700;
font-size: 12px;
text-shadow: none;
}
.pc-popup[aria-label="Welcome to Popipants!"] .pc-popup-titlebar .close-btn:active {
transform: scale(.94);
box-shadow: inset 0 3px 6px rgba(160,20,90,.45);
}
/* ---- css/pages/about.css ---- */
/* ===== ABOUT PAGE ===== */
.about-content {
padding: 1.5rem;
}
.about-text {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.7;
color: var(--text);
margin-bottom: 1rem;
}
.about-text strong {
color: var(--hot-pink);
}
.about-quote {
font-family: var(--font-body);
font-style: italic;
font-size: 1.1rem;
color: var(--hot-pink);
text-align: center;
padding: 1rem;
background: var(--baby-pink);
border: 1px dashed var(--pink);
margin: 1.5rem 0;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-top: 1rem;
}
.value-card {
text-align: center;
padding: 1rem;
}
.value-icon {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.value-title {
font-family: var(--font-body);
font-weight: 700;
font-size: 1rem;
color: var(--hot-pink);
margin-bottom: 0.3rem;
}
/* ---- css/pages/contact.css ---- */
/* ===== CONTACT FORM ===== */
.form-group {
margin-bottom: 1rem;
}
.form-label {
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: var(--text-dark);
margin-bottom: 4px;
}
.form-input,
.form-textarea {
width: 100%;
padding: 6px 8px;
background: white;
border: 2px inset var(--win-dark-gray);
font-family: var(--font-body);
font-size: 14px;
color: var(--text-dark);
outline: none;
}
.form-input:focus,
.form-textarea:focus {
border-color: var(--pink);
box-shadow: 0 0 4px var(--accent-glow);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
/* ---- css/responsive.css ---- */
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.page-layout {
flex-direction: column;
}
.sidebar {
width: 100%;
min-width: 100%;
border-right: none;
border-bottom: 2px outset var(--win-light);
}
.sidebar-section {
border-bottom: none;
}
.sidebar-nav {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px;
}
.sidebar-nav li {
margin-bottom: 0;
}
.sidebar-nav a {
flex: 1;
min-width: 80px;
}
.top-nav {
flex-wrap: wrap;
}
.top-nav a {
flex: 1;
min-width: 60px;
text-align: center;
font-size: 12px;
padding: 5px 8px;
}
.masonry-grid {
columns: 2;
}
.products-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.banner {
padding: 1.5rem 1rem;
}
.values-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.masonry-grid {
columns: 1;
}
.top-nav a {
font-size: 11px;
padding: 4px 6px;
}
}
/* ---- css/pages/home.css ---- */
/* ===== POPIPANTS HOMEPAGE: PINK Y2K WORLD ===== */
:is(.home-page, .secondary-page) {
background: #FFD6E8 url('../images/art/pink-tile.png') repeat;
background-size: 260px auto;
}
:is(.home-page, .secondary-page) .page-wrapper {
max-width: 1120px;
margin: 22px auto;
border: 2px solid #FF9EC7;
box-shadow: 0 10px 35px rgba(255,95,162, .22);
}
:is(.home-page, .secondary-page) .sidebar {
background: #FFD6E8 url('../images/art/pink-tile.png') repeat;
background-size: 190px auto;
border-right-color: #FF9EC7;
}
:is(.home-page, .secondary-page) .sidebar-title,
:is(.home-page, .secondary-page) .win-titlebar { background: linear-gradient(90deg, #FF5FA2, #FF9EC7); }
:is(.home-page, .secondary-page) .sidebar-nav a { background: rgba(255,255,255,.8); border-color: #FF9EC7; }
:is(.home-page, .secondary-page) .sidebar-nav a:hover, :is(.home-page, .secondary-page) .sidebar-nav a.active { background: #FF9EC7; color: #fff; }
.home-page .main-content { background: #FFFFFF; }
.pink-hero { min-height: 390px; padding: 60px 185px 55px 38px; text-align: left; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 58%, rgba(255,255,255,.2)), url('../images/hero-background.webp') center/cover; border-bottom: 0; }
.hero-kicker { position: relative; z-index: 2; color: #FF5FA2; font: 500 12px var(--font-system); letter-spacing: 2.3px; text-transform: uppercase; }
.home-page .banner-title { position: relative; z-index: 2; margin: 5px 0 0; color: #FF5FA2; font-family: 'Yeseva One', Georgia, serif; font-size: clamp(3.4rem, 9vw, 6.6rem); font-weight: 400; line-height: .98; letter-spacing: -4px; text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(255,95,162,.16); }
.home-page .banner-subtitle { position: relative; z-index: 2; max-width: 300px; margin: 14px 0 0; color: #96285F; font-family: var(--font-body); font-size: 1.1rem; letter-spacing: .5px; }
.hero-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.home-page .btn { border-radius: 5px; font-family: var(--font-system); letter-spacing: .2px; }
.hero-phone-sticker { position: absolute; right: -32px; bottom: -38px; z-index: 3; width: 270px; mix-blend-mode: multiply; transform: rotate(-8deg); filter: saturate(1.12); }
.home-page .banner-star { width: 7px; height: 7px; background: white; box-shadow: 0 0 8px 3px white; }
.home-page .content-section { position: relative; overflow: hidden; padding: 42px 35px; border-bottom: 1px solid #FF9EC7; }
.monster-bg { background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.62)), url('../images/monster-background.webp') center/cover; }
.section-header-left { max-width: 610px; text-align: left; padding: 0 0 20px; }
.home-page .section-tag { color: #96285F; background: rgba(255,255,255,.78); border-color: #FF9EC7; }
.home-page .section-title { color: #96285F; font-family: 'Yeseva One', Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.7px; }
.home-page .section-desc { color: #7b4a61; }
.section-header-left .section-desc { margin-left: 0; }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.quick-action { min-height: 138px; padding: 15px; color: #96285F; text-decoration: none; background: rgba(255,255,255,.88); border: 1px solid #FF9EC7; box-shadow: 3px 3px 0 rgba(255,95,162,.24); transition: transform .15s; }
.quick-action:hover { color: #96285F; transform: translate(-2px,-2px); }
.quick-action span { display: block; margin-bottom: 6px; font-size: 29px; }
.quick-action b { display: block; font-family: 'Yeseva One', Georgia, serif; font-size: 17px; font-weight: 400; }
.quick-action small { display: block; margin-top: 5px; font: 11px var(--font-system); color: #FF5FA2; }
.cd-section { min-height: 280px; padding-right: 320px !important; background: linear-gradient(90deg, #FFFFFF, rgba(255,255,255,.92)), url('../images/cd-section-background.webp') center/cover; }
.cd-sticker { position: absolute; right: 13px; top: -22px; width: 296px; mix-blend-mode: multiply; animation: spin 17s linear infinite; filter: contrast(1.06); }
.lotus-section { background: linear-gradient(rgba(255,255,255,.56), rgba(255,255,255,.78)), url('../images/cd-section-background.webp') center/cover; }
.home-page .footer { background: #FFFFFF; border-top: 1px solid #FF9EC7; }
.home-page .social-link { background: white; border-color: #FF9EC7; color: #FF5FA2; }
@media (max-width: 768px) {
.home-page .page-wrapper { margin: 0; }
.pink-hero { min-height: 360px; padding: 45px 145px 40px 24px; }
.hero-phone-sticker { width: 210px; right: -48px; }
.quick-actions { grid-template-columns: 1fr; }
.cd-section { padding-right: 190px !important; }
.cd-sticker { width: 205px; right: -45px; top: 25px; }
}
/* music-notes doodle behind the "listen while you browse" box */
.music-notes-sticker { position: absolute; left: 4%; bottom: -17px; z-index: 1; width: 330px; max-width: 55%; mix-blend-mode: multiply; opacity: .25; pointer-events: none; }
.cd-section .section-header { position: relative; z-index: 2; }
@media (max-width: 768px) { .music-notes-sticker { width: 230px; } }
/* round 3: pixel-art remakes — keep the pixel grid crisp */
.hero-phone-sticker, .cd-sticker, .music-notes-sticker, .made-in-japan-sticker { image-rendering: pixelated; }
.home-page, .hero, .secondary-page .main-content, .contact-page .banner::after { image-rendering: pixelated; }
/* ---- css/sidebar-and-menu.css ---- */
/* ===== SIDEBAR WIDGETS, CATEGORY MENU, MUSIC PLAYER, SIGNUP FORM (all pages) ===== */
.theme-dock { padding-bottom: 10px; text-align: center; }
.theme-dock p { font-family: var(--font-heading); font-size: 1rem; color: #96285F; padding-top: 8px; }
.theme-dock small { color: #FF5FA2; font-size: 11px; }
.theme-switcher-inline { position: static; display: flex; flex-direction: row; justify-content: center; gap: 7px; margin: 7px 0; }
.theme-switcher-inline .theme-btn { width: 21px; height: 21px; border-radius: 50%; box-shadow: 1px 1px 0 rgba(150,40,95,.3); }
.theme-switcher-inline .theme-btn.active { outline: 2px solid white; outline-offset: 2px; }
.figurine-button { display: flex; align-items: center; gap: 7px; width: calc(100% - 20px); margin: 18px 10px 4px; padding: 8px; color: #96285F; font: 700 12px var(--font-body); text-align: left; background: #FFFFFF; border: 2px outset #FF9EC7; cursor: pointer; }
.figurine-button:hover { transform: rotate(-2deg); background: #fff; }
.figurine { display: grid; place-items: center; width: 38px; height: 38px; color: white; font-size: 25px; background: #FF9EC7; border-radius: 50% 45% 50% 42%; text-shadow: 1px 1px #96285F; }
.made-in-japan-sticker { display: block; width: 132px; margin: 13px auto 4px; mix-blend-mode: multiply; transform: rotate(-3deg); filter: contrast(1.15); image-rendering: pixelated; }
.sidebar-location { padding: 8px 10px 16px; color: #96285F; font: 12px var(--font-heading); text-align: center; letter-spacing: .8px; }
.category-nav { padding: 7px 10px; gap: 7px; background: #FFFFFF; border-bottom: 1px solid #FF9EC7; }
.category-nav a { flex: 1; min-width: 105px; padding: 8px 6px; color: #96285F !important; text-align: center; text-shadow: none; background: #fff !important; border: 1px solid #FF9EC7; border-radius: 999px; box-shadow: 1px 2px 0 #FF9EC7; }
.category-nav a span { margin-right: 3px; color: #FF5FA2; font-size: 17px; }
.category-nav a:hover { background: #FFD6E8 !important; transform: translateY(1px); }
.mini-player { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
#music-status { color: #FF5FA2; font: 11px var(--font-system); }
.signup-form { display: grid; gap: 8px; }
.signup-form label { font: 700 12px var(--font-system); color: #96285F; }
.signup-form input { width: 100%; padding: 7px; font: 14px var(--font-system); border: 2px inset #FF5FA2; }
.signup-form .popup-btn { margin-top: 4px; background: #FF9EC7; color: white; border-color: #FFD6E8; }
/* ---- css/pages/inner-pages.css ---- */
/* =====================================================================
INNER PAGES (Shop, Lookbook, My Story, Contact)
Every inner page has .
Page-specific body classes: collection-page, lookbook-page, story-page, contact-page
===================================================================== */
/* ----- page background + soft white sparkles ----- */
.secondary-page { position: relative; } /* background now shared with home (pages/home.css) */
.secondary-page::before {
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .8;
background-image: radial-gradient(circle at 12% 20%, rgba(255,255,255,.9) 0 2px, transparent 3px), radial-gradient(circle at 86% 14%, rgba(255,255,255,.7) 0 2px, transparent 3px), radial-gradient(circle at 68% 76%, rgba(255,255,255,.82) 0 1px, transparent 3px);
background-size: 210px 240px, 270px 280px, 190px 230px;
animation: background-sparkles 7s ease-in-out infinite alternate;
}
@keyframes background-sparkles { from { transform: translate3d(0,0,0); opacity: .34; } to { transform: translate3d(0,-12px,0); opacity: .82; } }
/* ----- the big framed "window" around everything ----- */
.secondary-page .page-wrapper { position: relative; z-index: 1; max-width: 1120px; margin: 22px auto; background: #FFFFFF; border: 2px solid #FF9EC7; box-shadow: 0 10px 35px rgba(255,95,162,.22); }
/* ----- left sidebar: shared with home (pages/home.css) ----- */
/* ----- main column + top menu ----- */
.secondary-page .main-content { background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.76)), url('../images/art/pink-tile.png') center/auto 100% repeat-y; }
.secondary-page .top-nav { padding: 7px 10px; gap: 7px; background: #FFFFFF; border-bottom: 1px solid #FF9EC7; }
.secondary-page .top-nav a { flex: 1; min-width: 95px; padding: 8px 6px; color: #96285F; text-align: center; text-shadow: none; background: #fff; border: 1px solid #FF9EC7; border-radius: 999px; box-shadow: 1px 2px 0 #FF9EC7; }
.secondary-page .top-nav a:hover, .secondary-page .top-nav a.active { color: #96285F; background: #FFD6E8; border-style: solid; transform: translateY(1px); }
/* ----- big page title banner (sticker in the corner changes per page) ----- */
.secondary-page .banner { position: relative; overflow: hidden; min-height: 295px; padding: 58px 185px 52px 36px; text-align: left; border-bottom: 1px solid #FF9EC7;
background: linear-gradient(90deg, rgba(255,255,255,.97), rgba(255,255,255,.82) 56%, rgba(255,255,255,.2)), url('../images/hero-background.webp') center/cover !important; }
.secondary-page .banner::after { content: ''; position: absolute; right: -22px; bottom: -35px; width: 190px; height: 190px; background: url('../images/pink/film-folder.webp') center/contain no-repeat; mix-blend-mode: multiply; transform: rotate(-8deg); opacity: .82; }
.collection-page .banner::after { background-image: url('../images/pink/lily.webp'); }
.story-page .banner::after { background-image: url('../images/pink/round-icons.webp'); }
.contact-page .banner::after { background-image: url('../images/art/music-notes.png'); }
.secondary-page .banner-title { position: relative; z-index: 1; color: #FF5FA2; font-family: 'Yeseva One',Georgia,serif; font-size: clamp(3rem,8vw,5.7rem); font-weight: 400; letter-spacing: -3px; text-shadow: 2px 2px #fff,4px 4px rgba(255,95,162,.15); }
.secondary-page .banner-subtitle { position: relative; z-index: 1; color: #96285F; font-size: 1.1rem; letter-spacing: 1px; }
/* ----- content sections ----- */
.secondary-page .content-section { padding: 34px 30px; border-bottom: 1px solid #FF9EC7; background: transparent !important; }
.secondary-page .content-section + .content-section { border-top: 1px dashed #FF9EC7; }
.secondary-page .section-header { padding: 18px; margin-bottom: 15px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,158,199,.7); box-shadow: 3px 3px 0 rgba(255,95,162,.14); }
.secondary-page .section-title { color: #96285F; font-family: 'Yeseva One',Georgia,serif; font-size: clamp(1.9rem,4vw,2.7rem); letter-spacing: -.7px; }
.secondary-page .section-tag { color: #96285F; background: rgba(255,255,255,.78); border-color: #FF9EC7; }
.secondary-page .section-desc { color: #7b4a61; }
.secondary-page .win-panel { position: relative; border-color: #FF9EC7; box-shadow: 4px 4px 0 rgba(255,95,162,.14); }
.secondary-page .card { border-color: #FF9EC7; box-shadow: 3px 3px 0 rgba(255,95,162,.2); }
/* ----- product + lookbook cards ("item_window.exe" windows) ----- */
.secondary-page .products-grid { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 15px; }
.secondary-page .product-card, .secondary-page .masonry-item { position: relative; overflow: hidden; background: rgba(255,255,255,.94); border: 2px solid #FF9EC7; box-shadow: 4px 4px 0 rgba(255,95,162,.17); }
.secondary-page .product-card::before, .secondary-page .masonry-item::before { content: 'item_window.exe'; display: block; height: 23px; padding: 3px 26px 3px 7px; background: linear-gradient(90deg,#FF5FA2,#FF9EC7); color: white; font: 700 10px var(--font-system); letter-spacing: .7px; }
.secondary-page .product-image { height: 150px; background: linear-gradient(135deg,#FFD6E8,#fff); border-bottom: 1px solid #FF9EC7; }
.secondary-page .product-info { margin: 0; background: #FFFFFF; border: 0; border-top: 1px solid #FF9EC7; }
.secondary-page .masonry-grid { columns: 3; column-gap: 15px; }
.secondary-page .masonry-item { margin-bottom: 15px; }
.secondary-page .masonry-item > div:first-child { background: linear-gradient(135deg,#FFD6E8,#FF9EC7) !important; }
.secondary-page .filter-bar { padding: 12px 18px; background: #FFFFFF; border-bottom: 1px solid #FF9EC7; }
.secondary-page .filter-btn { background: white; color: #96285F; border: 1px solid #FF9EC7; border-radius: 999px; box-shadow: 1px 2px 0 #FF9EC7; }
.secondary-page .filter-btn.active, .secondary-page .filter-btn:hover { background: #FF9EC7; color: white; }
/* the little "X" on every card that refuses to close (easter egg) */
.window-easter-x { position: absolute; z-index: 3; top: 4px; right: 4px; width: 17px; height: 17px; padding: 0; border: 1px solid #fff; color: #96285F; background: #FFFFFF; font: 700 12px/1 var(--font-system); cursor: pointer; }
.window-easter-x:hover { background: #FFD6E8; transform: rotate(8deg); }
.window-wiggle { animation: window-wiggle .55s ease-in-out; }
@keyframes window-wiggle { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-5px) rotate(-1deg); } 45% { transform: translateX(6px) rotate(1deg); } 70% { transform: translateX(-3px) rotate(-.5deg); } }
/* ----- floating lotus flowers (My Story page) ----- */
.lotus-float { position: absolute; z-index: 4; color: #FF5FA2; font-size: 45px; text-shadow: 0 3px 6px rgba(96,177,194,.25); animation: lotus-drift 5s ease-in-out infinite; pointer-events: none; }
.lotus-one { top: 210px; right: 8%; }
.lotus-two { top: 480px; left: 5%; animation-delay: 1.6s; font-size: 30px; }
@keyframes lotus-drift { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-17px) rotate(7deg); } }
/* ----- footer ----- */
.secondary-page .footer { background: #FFFFFF; border-top: 1px solid #FF9EC7; }
.secondary-page .footer-logo { color: #FF5FA2; font-family: 'Yeseva One',Georgia,serif; }
/* ----- phones / small screens ----- */
@media (max-width: 768px) {
.secondary-page .page-wrapper { margin: 0; }
.secondary-page .banner { min-height: 240px; padding: 45px 110px 35px 22px; }
.secondary-page .masonry-grid { columns: 2; }
}
/* ---- css/extras.css ---- */
/* ---------- Sidebar theme boxes: four little colour boxes ---------- */
.theme-switcher-inline{ display:flex; gap:8px; padding:6px 10px; }
.theme-switcher-inline .theme-btn{ width:26px!important; height:26px!important; border-radius:5px!important; border:2px solid #fff!important;
box-shadow:inset 0 9px 6px rgba(255,255,255,.55), 0 2px 4px rgba(0,0,0,.25)!important; transition:transform .15s; }
.theme-switcher-inline .theme-btn:hover{ transform:translateY(-2px) scale(1.08); }
.theme-switcher-inline .theme-btn.active{ outline:2px dashed var(--accent)!important; outline-offset:2px; }
.theme-btn[data-theme="pink"]{ background:linear-gradient(135deg,#FFD6E8,#FF5FA2)!important; }
.theme-btn[data-theme="blue"]{ background:linear-gradient(135deg,#9ff3ff,#13a5dd 60%,#ffd76a)!important; }
.theme-btn[data-theme="red"]{ background:linear-gradient(135deg,#96285F,#96285F)!important; }
.theme-btn[data-theme="goth"]{ background:linear-gradient(135deg,#9b4dff,#0b0810 70%)!important; }
.theme-btn .tooltip{ left:50%; right:auto!important; top:auto!important; bottom:calc(100% + 6px); transform:translateX(-50%)!important; white-space:nowrap; z-index:5; }
/* ---------- Aero glossy buttons (pins 29 "start" + 19 glass tile) ---------- */
.btn-aero{ display:inline-flex; align-items:center; gap:6px; padding:7px 18px; border-radius:999px; border:1px solid rgba(0,0,0,.18);
background:var(--t-btn); color:var(--t-btn-ink)!important; font:700 13px var(--font-system); text-decoration:none; cursor:pointer;
text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px var(--t-glow); transition:filter .15s,transform .15s; }
.btn-aero:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn-aero:active{ transform:translateY(1px); }
/* ---------- Inspo sticker shelf (pins, Frutiger-Aero desktop icons) ---------- */
/* ---------- Shop: bag + add buttons ---------- */
.product-card .btn-aero{ margin-top:8px; font-size:12px; padding:5px 12px; }
.product-card.is-hidden{ display:none!important; }
.bag-window{ position:fixed; right:18px; bottom:18px; z-index:900; width:230px; background:var(--t-panel); border:2px outset var(--t-line);
box-shadow:4px 4px 0 rgba(0,0,0,.18); font:12px var(--font-system); color:var(--t-ink); }
.bag-window .win-titlebar{ display:flex; justify-content:space-between; padding:3px 6px; color:#fff; font-weight:700; }
.bag-window ul{ list-style:none; max-height:140px; overflow:auto; padding:6px 8px; margin:0; }
.bag-window li{ display:flex; justify-content:space-between; gap:6px; padding:2px 0; border-bottom:1px dotted var(--t-line); }
.bag-window li button{ border:0; background:none; color:var(--accent); cursor:pointer; }
.bag-window .bag-foot{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px; }
.bag-window.is-collapsed ul, .bag-window.is-collapsed .bag-foot{ display:none; }
.bag-count{ display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:#fff; color:var(--accent-deep); text-align:center; }
/* blue swatch = Tropical: hibiscus pink sunset over lagoon aqua, lime frond */
html .theme-btn[data-theme="blue"]{background:radial-gradient(circle at 72% 28%,#FFE08A 0 12%,rgba(255,224,138,0) 26%),linear-gradient(165deg,#FFC1DA 0%,#FE5FA0 44%,#55DECA 46%,#01BAB5 78%,#A3CA7B 100%)!important}
/* ---- css/utilities.css ---- */
/* =====================================================================
SMALL HELPER CLASSES (used directly in the .html files)
e.g. 👕
===================================================================== */
.u-emoji-md { font-size: 2rem; }
.u-emoji-lg { font-size: 3rem; }
.u-text-sm { font-size: 0.9rem; }
.u-pad { padding: 1rem; }
.u-pad-sm { padding: 0.8rem; }
.u-mb { margin-bottom: 1rem; }
.u-mt-0 { margin-top: 0; }
.u-mt-lg { margin-top: 1.5rem; }
.u-left { text-align: left; }
.u-center { text-align: center; }
.u-accent { color: var(--accent); }
.btn-block { width: 100%; justify-content: center; }
/* contact page: form on the left, info boxes on the right (stacks on phones) */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; }
.info-text { font-family: var(--font-body); font-size: 14px; color: var(--text-dark); margin: 0; }
/* lookbook placeholder photos (swap for real ![]()
later) */
.look-photo { height: 200px; display: flex; align-items: center; justify-content: center; }
.look-photo--pink { background: linear-gradient(135deg, #FF9EC7, #FF5FA2); }
.look-photo--blue { background: linear-gradient(135deg, #BAE6FD, #00BFFF); }
.look-photo--mint { background: linear-gradient(135deg, #A7F3D0, #10B981); }
/* ----- accessibility helpers ----- */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 10001; padding: 8px 14px; background: #fff; color: #96285F; border: 2px solid #FF5FA2; font: 700 13px var(--font-system); }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }
/* ----- phones ----- */
@media (max-width: 768px) {
.contact-grid { grid-template-columns: 1fr; }
}
/* people who turn off animations in their device settings */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.animate-in { opacity: 1; transform: none; }
#sparkle-canvas { display: none; }
}
/* ---- css/critters.css ---- */
/* =====================================================================
CRITTERS (the little animals wandering around, one set per theme)
Part 1 is AUTO-GENERATED by tools/critters/build.py (their own wing-flap etc.).
Part 2 (bottom) is the wandering layer — safe to edit by hand.
===================================================================== */
.critter .cr{width:var(--s,160px);height:var(--s,160px);display:inline-block}
.critter .cr svg{width:100%;height:100%;overflow:visible}
.critter .cr *{transform-box:view-box}
.critter .cr .float{animation:cr-float 4s ease-in-out infinite}
.critter .cr .sq{transform-origin:100px 170px;animation:cr-sq 4s ease-in-out infinite}
.critter .cr .ant{transform-origin:100px 70px;animation:cr-ant 4s ease-in-out infinite}
.critter .cr .wl{transform-origin:100px 100px;animation:cr-flapL .6s ease-in-out infinite}
.critter .cr .wr{transform-origin:100px 100px;animation:cr-flapR .6s ease-in-out infinite}
.critter .cr .bl{transform-origin:100px 95px;animation:cr-batL .5s ease-in-out infinite}
.critter .cr .br{transform-origin:100px 95px;animation:cr-batR .5s ease-in-out infinite}
.critter .cr .sway{transform-origin:100px 190px;animation:cr-sway 4s ease-in-out infinite}
.critter .cr .spin{transform-origin:100px 100px;animation:cr-spin 12s linear infinite}
.critter .cr .breath{transform-origin:100px 100px;animation:cr-breath 3s ease-in-out infinite}
.critter .cr .shL{transform-origin:100px 60px;animation:cr-shL 6s ease-in-out infinite}
.critter .cr .shR{transform-origin:100px 60px;animation:cr-shR 6s ease-in-out infinite}
.critter .cr .tw{transform-origin:center;transform-box:fill-box!important;animation:cr-tw 1.6s ease-in-out infinite}
@keyframes cr-float{0%,100%{transform:translateY(8px)}50%{transform:translateY(-8px)}}
@keyframes cr-sq{0%,100%{transform:scale(1.06,.94)}50%{transform:scale(.96,1.04)}}
@keyframes cr-ant{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(6deg)}}
@keyframes cr-flapL{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.35)}}
@keyframes cr-flapR{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.35)}}
@keyframes cr-batL{0%,100%{transform:rotate(-14deg) scaleY(.9)}50%{transform:rotate(16deg) scaleY(1)}}
@keyframes cr-batR{0%,100%{transform:rotate(14deg) scaleY(.9)}50%{transform:rotate(-16deg) scaleY(1)}}
@keyframes cr-sway{0%,100%{transform:rotate(-6deg) translateY(3px)}50%{transform:rotate(6deg) translateY(-5px)}}
@keyframes cr-spin{to{transform:rotate(360deg)}}
@keyframes cr-breath{0%,100%{transform:scale(.93)}50%{transform:scale(1.05)}}
@keyframes cr-shL{0%,70%,100%{transform:rotate(0)}78%,88%{transform:rotate(-22deg)}82%{transform:rotate(-16deg)}}
@keyframes cr-shR{0%,70%,100%{transform:rotate(0)}78%,88%{transform:rotate(22deg)}82%{transform:rotate(16deg)}}
@keyframes cr-tw{0%,100%{transform:scale(.3);opacity:.3}50%{transform:scale(1);opacity:1}}
.critter .cr .pxb .pfloat{animation:cr-pfloat 3.2s ease-in-out infinite}
.critter .cr .pxb .wl{animation:cr-pflapL 1.6s cubic-bezier(.45,0,.35,1) infinite}
.critter .cr .pxb .wr{animation:cr-pflapR 1.6s cubic-bezier(.45,0,.35,1) infinite}
.critter .cr .pxb .aura{animation:cr-paura 3.2s ease-in-out infinite}
.critter .cr .pxb .ant{animation:cr-ant 3.2s ease-in-out infinite}
.critter .cr .pxb .ptw{animation:cr-ptw 2.4s ease-in-out infinite}
@keyframes cr-pflapL{0%,100%{transform:scaleX(1) skewY(0)}38%{transform:scaleX(.2) skewY(6deg)}52%{transform:scaleX(.26) skewY(5deg)}}
@keyframes cr-pflapR{0%,100%{transform:scaleX(1) skewY(0)}38%{transform:scaleX(.2) skewY(-6deg)}52%{transform:scaleX(.26) skewY(-5deg)}}
@keyframes cr-pfloat{0%,100%{transform:translateY(4px)}50%{transform:translateY(-6px)}}
@keyframes cr-paura{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes cr-ptw{0%,100%{transform:scale(.2) rotate(0);opacity:0}45%{transform:scale(1) rotate(0);opacity:1}60%{transform:scale(.85);opacity:.9}}
/* ---------- Part 2: placement + movement (safe to edit) ---------- */
/* a critter floating over the page (perched or surprise) */
.critter { width: var(--size, 34px); height: var(--size, 34px); pointer-events: none; }
.critter .cr { --s: var(--size, 34px); display: block; transition: transform .2s; }
.critter-float { position: absolute; left: 0; top: 0; z-index: 950; will-change: transform; filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.22)); }
.critter-flip .cr { transform: scaleX(-1); } /* faces the way it flies */
/* sitting still on a perch: slow the wing flapping down so it looks like resting */
.critter-float:not(.is-flying) .cr .wl, .critter-float:not(.is-flying) .cr .wr,
.critter-float:not(.is-flying) .cr .bl, .critter-float:not(.is-flying) .cr .br,
.critter-buddy .cr .wl, .critter-buddy .cr .wr, .critter-buddy .cr .bl, .critter-buddy .cr .br { animation: critter-rest 2.6s ease-in-out infinite; }
@keyframes critter-rest { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.78); } }
/* surprise: pops in, fades when leaving */
.critter-pop .cr { animation: critter-pop .35s cubic-bezier(.3,1.6,.5,1) both; }
.critter-leave { opacity: 0; transition: opacity .6s ease-in .2s; }
@keyframes critter-pop { from { transform: scale(0); } to { transform: scale(1); } }
/* buddy next to the mood boxes */
.theme-switcher { position: relative; }
.critter-buddy { position: absolute; right: -4px; top: -4px; pointer-events: none; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.2)); }
.critter-buddy.say-hello { animation: critter-hello 1s ease-out; }
@keyframes critter-hello {
0% { transform: translateY(0) scale(.4) rotate(0); }
30% { transform: translateY(-14px) scale(1.25) rotate(-12deg); }
55% { transform: translateY(0) scale(.95) rotate(10deg); }
75% { transform: translateY(-6px) scale(1.05) rotate(-5deg); }
100% { transform: translateY(0) scale(1) rotate(0); }
}
/* goth critters are dark: give them a soft lilac glow so they show on black */
html[data-theme="goth"] .critter-float, html[data-theme="goth"] .critter-buddy, html[data-theme="goth2"] .critter-float, html[data-theme="goth2"] .critter-buddy, html[data-theme="goth4"] .critter-float, html[data-theme="goth4"] .critter-buddy { filter: drop-shadow(0 0 1.5px #f0e0ff) drop-shadow(0 0 5px rgba(185,140,255,.7)); }
/* tab hidden or "reduce motion": freeze */
.critters-paused .critter .cr * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
.critter .cr *, .critter-buddy, .critter-pop .cr { animation: none !important; }
}
/* pink mood: wandering butterfly flutters faster in flight, idle one on the cart button flutters calmly */
.critter-wander.is-flying .cr .pxb .wl, .critter-wander.is-flying .cr .pxb .wr { animation-duration: .42s; }
.critter-wander.is-gliding .cr .pxb .wl, .critter-wander.is-gliding .cr .pxb .wr { animation-play-state: paused; }
.critter-idle .cr .pxb .wl, .critter-idle .cr .pxb .wr { animation: cr-pflapL 1.6s cubic-bezier(.45,0,.35,1) infinite; }
.critter-idle .cr .pxb .wr { animation-name: cr-pflapR; }
.critter-wander:not(.is-flying) .cr .pxb .wl, .critter-wander:not(.is-flying) .cr .pxb .wr { animation: critter-rest 2.6s ease-in-out infinite; }
.critter-float.critter-wander, .critter-float.critter-idle { filter: drop-shadow(0 0 3px rgba(255,170,215,.6)); }
/* faint pixel sparkle trail */
.critter-trail { position: absolute; left: 0; top: 0; z-index: 949; pointer-events: none; width: 0; height: 0; }
.critter-trail::before { content: ""; position: absolute; width: 3px; height: 3px; background: #fff;
box-shadow: 3px 0 #ffb6da, -3px 0 #ffb6da, 0 3px #ffb6da, 0 -3px #ffb6da; animation: critter-trail 1.4s ease-out forwards; }
@keyframes critter-trail { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: translateY(10px) scale(.4); } }
@media (prefers-reduced-motion: reduce) { .critter-trail { display: none; } }
/* goth3 (calm): no glow */
html[data-theme="goth3"] .critter-float, html[data-theme="goth3"] .critter-buddy { filter: drop-shadow(0 0 0.8px #e6e6ee) drop-shadow(0 0 0.8px #e6e6ee); }
/* goth moods use the same idle + wander + trail as pink: flight wingbeats, aura and sparkle trail */
.critter-wander.is-flying .cr .wl, .critter-wander.is-flying .cr .wr { animation-duration: .42s; }
.critter-wander.is-gliding .cr .wl, .critter-wander.is-gliding .cr .wr, .critter-wander.is-gliding .cr .bl, .critter-wander.is-gliding .cr .br { animation-play-state: paused; }
.critter-wander.is-flying .cr .bl, .critter-wander.is-flying .cr .br { animation-duration: .3s; animation-timing-function: cubic-bezier(.7,0,.3,1); }
.critter-idle .cr .wl { animation: cr-pflapL 1.6s cubic-bezier(.45,0,.35,1) infinite; }
.critter-idle .cr .wr { animation: cr-pflapR 1.6s cubic-bezier(.45,0,.35,1) infinite; }
.critter-idle .cr .bl, .critter-idle .cr .br { animation-duration: 1.2s; }
html[data-theme^="goth"] .critter-float.critter-wander, html[data-theme^="goth"] .critter-float.critter-idle { filter: drop-shadow(0 0 1px #ffe6f0) drop-shadow(0 0 4px rgba(255,95,162,.75)) drop-shadow(0 0 9px rgba(194,64,120,.6)); animation: cr-gaura 3.2s ease-in-out infinite; }
@keyframes cr-gaura { 0%,100% { filter: drop-shadow(0 0 1px #ffe6f0) drop-shadow(0 0 3px rgba(255,95,162,.6)) drop-shadow(0 0 7px rgba(194,64,120,.45)); } 50% { filter: drop-shadow(0 0 1px #ffe6f0) drop-shadow(0 0 5px rgba(255,95,162,.9)) drop-shadow(0 0 11px rgba(194,64,120,.7)); } }
html[data-theme^="goth"] .critter-trail::before { background: #ffffff; box-shadow: 3px 0 #FF5FA2, -3px 0 #C24078, 0 3px #d9d9e3, 0 -3px #FF5FA2; }
@media (prefers-reduced-motion: reduce) { html[data-theme^="goth"] .critter-float { animation: none; } }
/* ---- themes/theme-shared.css ---- */
/* =====================================================================
RULES SHARED BY EVERY NON-PINK THEME (blue, red, goth)
---------------------------------------------------------------------
These say "use the theme's colour variables instead of the built-in
pinks". You normally DON'T edit this file — change the colours in
theme-blue.css / theme-red.css / theme-goth.css instead.
===================================================================== */
html body.home-page { background-color: var(--t-bg); transition: background-color .4s; }
html[data-theme] .secondary-page::before { opacity: .25; }
html[data-theme] .marquee-bar { background: var(--t-marquee); }
html[data-theme] .sidebar { background: var(--t-side) !important; border-right-color: var(--t-line) !important; }
html[data-theme] .sidebar-title, html[data-theme] .win-titlebar { background: var(--t-title) !important; }
html[data-theme] .sidebar-nav a { background: var(--t-panel) !important; border-color: var(--t-line) !important; color: var(--t-ink) !important; }
html[data-theme] .sidebar-nav a:hover, html[data-theme] .sidebar-nav a.active { background: var(--accent) !important; color: #fff !important; }
html[data-theme] .sidebar p, html[data-theme] .sidebar small, html[data-theme] .sidebar-location { color: var(--t-ink-soft) !important; }
html[data-theme] .main-content { background: var(--t-panel) !important; }
html[data-theme] .category-nav, html[data-theme] .top-nav, html[data-theme] .filter-bar, html[data-theme] .footer { background: var(--t-panel-2) !important; border-color: var(--t-line) !important; }
html[data-theme] .category-nav a, html[data-theme] .top-nav a, html[data-theme] .filter-btn { background: var(--t-panel) !important; color: var(--t-ink) !important; border-color: var(--t-line) !important; box-shadow: 1px 2px 0 var(--t-shadow) !important; }
html[data-theme] .category-nav a:hover, html[data-theme] .filter-btn.active { background: var(--accent) !important; color: #fff !important; }
html[data-theme] .banner, html[data-theme] .content-section { border-color: var(--t-line) !important; }
html[data-theme] .banner-title, html[data-theme] .section-title, html[data-theme] h1, html[data-theme] h2 { color: var(--t-heading) !important; }
html[data-theme] .banner-subtitle, html[data-theme] .hero-kicker, html[data-theme] .section-desc, html[data-theme] .product-category { color: var(--t-ink-soft) !important; }
html[data-theme] .section-tag { background: var(--t-panel) !important; color: var(--t-ink-soft) !important; border-color: var(--t-line) !important; }
html[data-theme] .quick-action, html[data-theme] .product-info, html[data-theme] .product-card, html[data-theme] .figurine-button { background: var(--t-panel) !important; border-color: var(--t-line) !important; color: var(--t-ink) !important; }
html[data-theme] .product-image { background: linear-gradient(135deg,var(--baby-pink),var(--t-panel)) !important; }
html[data-theme] .product-name, html[data-theme] .quick-action b { color: var(--t-ink) !important; }
/* ---- themes/theme-pink.css ---- */
/* =====================================================================
PINK THEME (the default look)
---------------------------------------------------------------------
Pink is the "normal" design, so most pink colours live in the css/
files. This file only holds the shared colour names (variables) that
the other themes swap out. Change a value here = changes pink.
===================================================================== */
:root {
--t-bg: #FFD6E8; /* page background behind the window */
--t-panel: #FFFFFF; /* boxes / panels */
--t-panel-2: #FFFFFF; /* menu bars, footer */
--t-side: rgba(255,214,232,.92); /* sidebar */
--t-title: linear-gradient(90deg,#FF5FA2,#FF9EC7); /* little window title bars */
--t-ink: #96285F; /* main text on panels */
--t-ink-soft: #96285F; /* softer text */
--t-line: #FF9EC7; /* borders */
--t-shadow: #FF9EC7; /* button shadows */
--t-heading: #FF5FA2; /* headings */
--t-btn: linear-gradient(#FFD6E8 0%,#FF9EC7 50%,#FF5FA2 51%,#FF9EC7 100%); /* glossy buttons */
--t-btn-ink: #fff;
--t-glow: rgba(255,95,162,.45);
--t-marquee: #FF5FA2; /* scrolling top bar */
}
/* ---- themes/theme-blue.css ---- */
/* =====================================================================
BLUE THEME — tropical Y2K (active when )
===================================================================== */
html[data-theme="blue"] {
--pink: #19b5e6; --hot-pink: #0a8fc4; --soft-pink: #8fe3f5; --baby-pink: #e2f8ff;
--accent: #19b5e6; --accent-soft: #8fe3f5; --accent-deep: #0a8fc4; --accent-glow: rgba(25,181,230,.35);
--t-bg: #dff6ff;
--t-panel: #f6fdff; --t-panel-2: #e9f9ff; --t-side: rgba(205,240,252,.93);
--t-title: linear-gradient(90deg,#0a8fc4,#46d3c6 60%,#ffd76a);
--t-ink: #08607f; --t-ink-soft: #0f7d8f; --t-line: #9edcf0; --t-shadow: #5cc3e3;
--t-heading: #0896c8; --t-btn: linear-gradient(#c9f3ff 0%,#3fc6f2 50%,#13a5dd 51%,#6fdcff 100%);
--t-glow: rgba(25,181,230,.45); --t-marquee: #0a8fc4;
}
/* page background */
[data-theme="blue"] .home-page, [data-theme="blue"] .secondary-page { background: #dffcff !important; }
[data-theme="blue"] .page-wrapper, [data-theme="blue"] .main-content { border-color: #66d4e7; }
[data-theme="blue"] .secondary-page .sidebar { background: linear-gradient(180deg,#eafcff,#f7ffff 55%,#d7f6fa) !important; }
[data-theme="blue"] .sidebar::before { color: #31b6d3; }
[data-theme="blue"] .product-card::before, [data-theme="blue"] .masonry-item::before { background: linear-gradient(90deg,#19b9d5,#87e4ef); }
/* big title banners: lotus water on the front page, blossom tree + jellyfish on inner pages */
html[data-theme="blue"] .banner { background: linear-gradient(90deg,rgba(246,253,255,.92),rgba(226,248,255,.55)), url('../images/inspo/pin-49.webp') center/cover !important; }
[data-theme="blue"] .secondary-page .banner { background: linear-gradient(90deg,rgba(247,255,255,.95),rgba(225,250,255,.72)), url('../images/blue/blossom-tree.webp') center/cover !important; }
[data-theme="blue"] .secondary-page .banner::after { background-image: url('../images/blue/jellyfish.webp'); opacity: .42; }
[data-theme="blue"] .secondary-page .top-nav a { color: #167d98 !important; }
html[data-theme="blue"] .content-section { background: linear-gradient(rgba(246,253,255,.86),rgba(246,253,255,.92)), url('../images/blue/fractal-flowers.webp') center/cover !important; }
/* turn pink pictures blue-ish */
[data-theme="blue"] img { filter: hue-rotate(135deg) saturate(.85); }
[data-theme="blue"] .music-notes-sticker { opacity: .2; }
[data-theme="blue"] .lotus-float { color: #4cc9db; opacity: .62; }
/* ---- themes/theme-red.css ---- */
/* =====================================================================
RED THEME — moody downtown: burgundy, black, gold
(active when )
===================================================================== */
html[data-theme="red"] {
--pink: #a3123a; --hot-pink: #7a0c2a; --soft-pink: #c7546f; --baby-pink: #2a0d14;
--accent: #a3123a; --accent-soft: #c7546f; --accent-deep: #7a0c2a; --accent-glow: rgba(163,18,58,.4);
--text: #f1dcd6; --text-light: #cfa9a6; --text-dark: #fff; --off-white: #1a0a0e; --cream: #1a0a0e;
--t-bg: #14070a;
--t-panel: #1f0b10; --t-panel-2: #2a0f16; --t-side: rgba(36,10,16,.95);
--t-title: linear-gradient(90deg,#4a0718,#a3123a 70%,#c9a24a);
--t-ink: #f3d6c9; --t-ink-soft: #c9a24a; --t-line: #5a1a28; --t-shadow: #000;
--t-heading: #e8c27a; --t-btn: linear-gradient(#c23a5c 0%,#8a1030 50%,#6a0a24 51%,#a3123a 100%);
--t-glow: rgba(201,162,74,.35); --t-marquee: #4a0718;
}
html[data-theme="red"] body.home-page { background-image: radial-gradient(ellipse at 20% 0%,rgba(163,18,58,.35),transparent 60%), repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px); background-size: 420px auto; }
html[data-theme="red"] .banner { background: linear-gradient(120deg,var(--t-panel-2),var(--t-panel)) !important; }
html[data-theme="red"] .content-section { background: var(--t-panel) !important; }
html[data-theme="red"] p, html[data-theme="red"] label, html[data-theme="red"] li { color: var(--text); }
html[data-theme="red"] input, html[data-theme="red"] textarea, html[data-theme="red"] select { background: #0d0609; color: var(--text); border-color: var(--t-line); }
html[data-theme="red"] .btn-secondary { background: #2a0f16 !important; color: #e8c27a !important; border-color: #c9a24a !important; }
/* stickers with white backgrounds: soft fade instead of a white box */
html[data-theme="red"] .made-in-japan-sticker, html[data-theme="red"] .hero-phone-sticker {
mix-blend-mode: normal; filter: grayscale(.4) contrast(1.1);
-webkit-mask-image: radial-gradient(ellipse 60% 60% at center,#000 55%,transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at center,#000 55%,transparent 75%); }
/* white inner boxes (e.g. contact info) were unreadable on dark: give them the dark panel colour */
html[data-theme="red"] .win-panel-inset { background: var(--t-panel); }
/* ---- themes/theme-goth.css ---- */
/* =====================================================================
GOTH THEME — black + purple emo (active when )
===================================================================== */
html[data-theme="goth"] {
--pink: #9b4dff; --hot-pink: #7a2be0; --soft-pink: #b98cff; --baby-pink: #1b1028;
--accent: #9b4dff; --accent-soft: #b98cff; --accent-deep: #7a2be0; --accent-glow: rgba(155,77,255,.4);
--text: #e5dcf5; --text-light: #a99bc4; --text-dark: #fff; --off-white: #0b0810; --cream: #0b0810;
--t-bg: #07050b;
--t-panel: #120d1a; --t-panel-2: #1a1226; --t-side: rgba(20,13,30,.95);
--t-title: linear-gradient(90deg,#000,#3b1466 55%,#9b4dff);
--t-ink: #e3d2ff; --t-ink-soft: #b98cff; --t-line: #3a2a52; --t-shadow: #000;
--t-heading: #c9a6ff; --t-btn: linear-gradient(#6b3fb0 0%,#3b1466 50%,#22093f 51%,#5b2aa0 100%);
--t-glow: rgba(155,77,255,.5); --t-marquee: #1a0b2e;
}
html[data-theme="goth"] body.home-page {
background-image: radial-gradient(circle at 15% 20%,rgba(255,255,255,.8) 0 1px,transparent 2px), radial-gradient(circle at 70% 60%,rgba(185,140,255,.8) 0 1px,transparent 2px), radial-gradient(ellipse at 50% -10%,rgba(91,42,160,.5),transparent 60%);
background-size: 180px 200px, 240px 220px, 100% 100%; }
html[data-theme="goth"] .banner { background: radial-gradient(circle at 85% 30%,rgba(155,77,255,.35),transparent 50%), linear-gradient(120deg,#120d1a,#000) !important; }
html[data-theme="goth"] .content-section { background: var(--t-panel) !important; }
html[data-theme="goth"] p, html[data-theme="goth"] label, html[data-theme="goth"] li { color: var(--text); }
html[data-theme="goth"] input, html[data-theme="goth"] textarea, html[data-theme="goth"] select { background: #0d0609; color: var(--text); border-color: var(--t-line); }
html[data-theme="goth"] .btn-secondary { background: #1a1226 !important; color: #c9a6ff !important; border-color: #9b4dff !important; }
/* stickers with white backgrounds: soft fade instead of a white box */
html[data-theme="goth"] .made-in-japan-sticker, html[data-theme="goth"] .hero-phone-sticker {
mix-blend-mode: normal; filter: grayscale(.4) contrast(1.1);
-webkit-mask-image: radial-gradient(ellipse 60% 60% at center,#000 55%,transparent 75%); mask-image: radial-gradient(ellipse 60% 60% at center,#000 55%,transparent 75%); }
html[data-theme="goth"] .hero-phone-sticker { filter: grayscale(1) contrast(1.2) drop-shadow(0 0 10px #9b4dff); }
/* white inner boxes (e.g. contact info) were unreadable on dark: give them the dark panel colour */
html[data-theme="goth"] .win-panel-inset { background: var(--t-panel); }
/* ---- css/preview-brand.css ---- */
/* PREVIEW: Inconsolata body/UI + Archivo Black brand (pink mood mostly) */
:root { --font-body:'Inconsolata',monospace; --font-system:'Inconsolata',monospace; --font-heading:'Inconsolata',monospace; }
html:not([data-theme]) { --text:#96285F; --t-ink:#96285F; --t-ink-soft:#96285F; }
body, button, input, select, textarea { font-family:'Inconsolata',monospace; }
.home-page .banner-title, .secondary-page .banner-title, .banner-title.brand-logo {
font-family:'Archivo Black',sans-serif !important; color:#111111 !important; letter-spacing:-0.08em !important;
text-transform:lowercase; text-shadow:none !important; font-weight:400; }
.marquee-bar { display:none !important; }
/* ===== v2: pink on white, one text colour (pink mood only) ===== */
html:not([data-theme]) { --text:#FF5FA2; --text-dark:#FF5FA2; --text-light:#FF5FA2; --t-ink:#FF5FA2; --t-ink-soft:#FF5FA2; --t-heading:#FF5FA2; --t-line:#FF9EC7; }
html:not([data-theme]) .page-wrapper, html:not([data-theme]) .main-content, html:not([data-theme]) .sidebar { border-color:#FF9EC7 !important; }
html:not([data-theme]) body *:not(img):not(canvas) { color:#FF5FA2 !important; text-shadow:none !important; }
html:not([data-theme]) .quick-action, html:not([data-theme]) .product-card { border-color:#FF9EC7 !important; }
html:not([data-theme]) .quick-action:hover, html:not([data-theme]) .sidebar-nav a:hover, html:not([data-theme]) .category-nav a:hover { background:#FFD6E8 !important; }
html:not([data-theme]) .sidebar-nav a.active, html:not([data-theme]) .btn-primary, html:not([data-theme]) .win-titlebar,
html:not([data-theme]) .popup-btn, html:not([data-theme]) .figurine { background:#FF5FA2 !important; }
html:not([data-theme]) .sidebar-nav a.active, html:not([data-theme]) .btn-primary, html:not([data-theme]) .btn-primary *,
html:not([data-theme]) .win-titlebar, html:not([data-theme]) .win-titlebar *, html:not([data-theme]) .popup-btn, html:not([data-theme]) .figurine { color:#FFFFFF !important; }
html:not([data-theme]) .banner-title.brand-logo, html:not([data-theme]) .banner-title { color:#FF5FA2 !important; }
html:not([data-theme]) h2, html:not([data-theme]) h3, html:not([data-theme]) .section-title, html:not([data-theme]) .quick-action b {
font-family:'Inconsolata',monospace !important; font-weight:700 !important; }
html:not([data-theme]) .sidebar-title { background:#FF5FA2 !important; }
html:not([data-theme]) .sidebar-title, html:not([data-theme]) .sidebar-title * { color:#FFFFFF !important; }
html:not([data-theme]) .btn-secondary, html:not([data-theme]) .btn-retro { background:#FFFFFF !important; border-color:#FF9EC7 !important; }
html:not([data-theme]) .btn-secondary:hover, html:not([data-theme]) .btn-retro:hover { background:#FFD6E8 !important; }
/* ===== v3: baby pink backgrounds back (theme-pink originals), music buttons ===== */
.music-pill{position:relative;display:inline-block;padding:5px;border:0;border-radius:999px;cursor:pointer;font-family:'Inconsolata',monospace;
background:linear-gradient(180deg,#fff 0%,#d9d9e3 35%,#a9a9b8 55%,#f4f4f8 80%,#c4c4d0 100%) !important;box-shadow:0 6px 14px rgba(255,95,162,.25),inset 0 1px 0 #fff}
.music-pill .gel{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-width:170px;padding:13px 28px 13px 22px;border-radius:999px;overflow:hidden;
background:radial-gradient(120% 100% at 50% 120%,#fff 0%,#FFD6E8 45%,#FF9EC7 100%);box-shadow:inset 0 -6px 12px #fff,inset 0 3px 6px rgba(255,95,162,.45);
color:#FF5FA2 !important;font-weight:700;font-size:20px;letter-spacing:.1em;transition:transform .12s}
.music-pill .gel::before{content:"";position:absolute;left:12px;right:12px;top:3px;height:45%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.15))}
.music-pill .gel>*{position:relative}
.mtri{width:0;height:0;border-left:14px solid #FF5FA2;border-top:9px solid transparent;border-bottom:9px solid transparent}
.mbars{display:none;gap:3px;height:18px;align-items:flex-end}.mbars i{width:4px;background:#FF5FA2;border-radius:2px;animation:meq .6s infinite alternate}
.mbars i:nth-child(2){animation-delay:.2s}.mbars i:nth-child(3){animation-delay:.4s}
@keyframes meq{from{height:4px}to{height:18px}}
.music-pill.is-playing .gel{transform:translateY(2px) scale(.97);box-shadow:inset 0 -3px 8px rgba(255,214,232,.7),inset 0 6px 12px rgba(255,95,162,.55)}
.music-pill.is-playing .mtri{display:none}.music-pill.is-playing .mbars{display:flex}
.mspark{position:absolute;width:12px;height:12px;opacity:0;transition:.25s;pointer-events:none;
background:linear-gradient(#FF5FA2,#FF5FA2) 4px 0/4px 12px no-repeat,linear-gradient(#FF5FA2,#FF5FA2) 0 4px/12px 4px no-repeat}
.mspark.s1{top:-14px;left:8px}.mspark.s2{top:-8px;right:-12px;transform:scale(.7)}.mspark.s3{bottom:-12px;right:24px;transform:scale(.6)}
.music-pill:hover .mspark,.music-pill:focus-visible .mspark,.music-pill.is-playing .mspark{opacity:1;animation:mtw 1s infinite steps(2)}
@keyframes mtw{50%{opacity:.3}}
#music-status{font-family:'Inconsolata',monospace;color:#FF5FA2 !important}
.mini-player{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
/* sidebar CD */
.sidebar-cd{position:relative;display:block;width:80px;height:80px;margin:14px auto;padding:0;border:0;background:none !important;cursor:pointer;opacity:.45;transition:opacity .2s}
.sidebar-cd:hover,.sidebar-cd:focus-visible{opacity:.85}
.sidebar-cd .cd{position:absolute;inset:0;border-radius:50%;background:
radial-gradient(circle,#fff 0 12%,#e8e8ef 12% 14%,transparent 14.5%),radial-gradient(circle,transparent 30%,rgba(255,255,255,.5) 31%,transparent 33%),
conic-gradient(from 20deg,#FFD6E8,#FF9EC7,#d8f2ff,#fff,#FF9EC7,#FF5FA2,#e9d6ff,#FFD6E8,#fff6c8,#FF9EC7,#FFD6E8);
box-shadow:0 4px 10px rgba(255,95,162,.35),inset 0 0 0 2px rgba(255,255,255,.8)}
.sidebar-cd .cd::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.7),transparent 40%,transparent 60%,rgba(255,255,255,.4))}
.sidebar-cd.is-playing .cd{animation:mspin 2.2s linear infinite}
@keyframes mspin{to{transform:rotate(360deg)}}
.sidebar-cd .badge{position:absolute;right:-4px;bottom:-4px;width:32px;height:32px;border-radius:50%;padding:2px;background:linear-gradient(180deg,#fff,#b9b9c6 50%,#f2f2f6)}
.sidebar-cd .badge b{position:relative;display:flex;width:100%;height:100%;border-radius:50%;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 110%,#FFD6E8,#FF9EC7 45%,#FF5FA2 90%)}
.sidebar-cd .badge b::before{content:"";position:absolute;left:4px;right:4px;top:1px;height:45%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.1))}
.sidebar-cd .bt{position:relative;margin-left:2px;width:0;height:0;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.sidebar-cd .bp{position:relative;display:none;gap:3px}.sidebar-cd .bp i{width:3px;height:9px;background:#fff}
.sidebar-cd.is-playing .bt{display:none}.sidebar-cd.is-playing .bp{display:flex}
@media (prefers-reduced-motion:reduce){.sidebar-cd.is-playing .cd,.mbars i,.mspark{animation:none !important}}
.music-pill.is-loading .gel,.music-cd-toggle.is-loading .cd{opacity:.8}
/* ---- css/combo.css ---- */
/* ===== COMBO: dream-site gel UI + shop grid layered on the preview ===== */
:root{--g1:var(--baby-pink,#FFD6E8);--g2:var(--soft-pink,#FF9EC7);--g3:var(--pink,#FF5FA2)}
/* gel pill for every button / tab */
.gelbtn,.btn,.btn-aero,.top-nav a,.sidebar-nav a,.combo-drop-menu a{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0!important;cursor:pointer;
font-family:Inconsolata,monospace!important;font-weight:700;letter-spacing:.08em;color:var(--g3)!important;text-decoration:none;border-radius:999px!important;
background:radial-gradient(120% 100% at 50% 120%,#fff 0%,var(--g1) 45%,var(--g2) 100%) padding-box,linear-gradient(180deg,#fff 0%,#d9d9e3 35%,#a9a9b8 55%,#f4f4f8 80%,#c4c4d0 100%) border-box!important;
border:3px solid transparent!important;box-shadow:inset 0 -5px 10px rgba(255,255,255,.9),inset 0 3px 6px color-mix(in srgb,var(--g3) 40%,transparent),0 4px 10px color-mix(in srgb,var(--g3) 22%,transparent)!important;
overflow:hidden;transition:transform .12s;text-shadow:none!important}
.gelbtn::before,.btn::before,.btn-aero::before,.top-nav a::before,.sidebar-nav a::before,.combo-drop-menu a::before{content:""!important;position:absolute;left:10%;right:10%;top:1px;height:45%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.1))!important;pointer-events:none;display:block!important;width:auto!important;border:0!important}
.gelbtn>span{position:relative;display:block;padding:7px 18px}
.btn,.btn-aero,.top-nav a{padding:9px 20px!important}
.gelbtn:hover,.btn:hover,.top-nav a:hover,.sidebar-nav a:hover{transform:translateY(-1px)}
.gelbtn.on,.btn:active,.sidebar-nav a.active,.combo-drop-menu a.active,.top-nav a:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 -3px 8px rgba(255,255,255,.7),inset 0 6px 12px color-mix(in srgb,var(--g3) 45%,#600)!important;background:radial-gradient(120% 100% at 50% 120%,#fff 0%,var(--g2) 60%,var(--g3) 100%) padding-box,linear-gradient(180deg,#fff,#a9a9b8 55%,#f4f4f8) border-box!important;color:#fff!important}
.sidebar-nav a{display:flex;width:100%;padding:6px 10px!important;margin-bottom:4px}
.btn::after,.top-nav a::after,.sidebar-nav a::after{display:none!important}
/* old-windows frame */
.combo-win{border-radius:14px;padding:4px;background:linear-gradient(180deg,#fff,#cfcfdb 40%,#a9a9b8 60%,#eee);box-shadow:0 14px 34px color-mix(in srgb,var(--g3) 22%,transparent);margin-top:14px}
.combo-tb{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px 10px 0 0;background:linear-gradient(#fff,var(--g1) 60%,var(--g2));font:700 13px Inconsolata,monospace;letter-spacing:.08em;color:var(--g3)}
.combo-tb i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#FF9EC7 60%,#FF5FA2)}
.combo-tb i:nth-child(2){background:radial-gradient(circle at 40% 30%,#fff,#bff3f5 60%,#6fd3d9)}.combo-tb i:nth-child(3){background:radial-gradient(circle at 40% 30%,#fff,#e6e6ee 60%,#a9a9b8)}
.combo-tb span{margin-left:auto}
.combo-wb{background:rgba(255,255,255,.93);border-radius:0 0 10px 10px;padding:18px}
.combo-more{text-align:center;margin:20px 0 4px}
/* shop grid */
.pp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 16px}
.pp-card{text-decoration:none;color:var(--g3);display:block}
.pp-ph{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;display:grid;place-items:center;border:1px solid var(--g1);transition:.2s}
.pp-card:hover .pp-ph{transform:translateY(-3px);box-shadow:0 10px 22px color-mix(in srgb,var(--g3) 22%,transparent)}
.pp-ph canvas{width:46%;height:auto;image-rendering:pixelated}
.pp-tag{position:absolute;top:8px;left:8px;font:700 11px Inconsolata,monospace;letter-spacing:.1em;padding:3px 9px;border-radius:999px;background:linear-gradient(#fff,var(--g1));color:#E8458C;box-shadow:inset 0 -1px 3px rgba(255,95,162,.3)}
.pp-card h3{font:700 14px Inconsolata,monospace;margin:10px 0 0;letter-spacing:.05em;color:var(--g3)}
.pp-card p{margin:2px 0 0;font-size:13px;color:#E8458C}
.pat-leo{background:radial-gradient(ellipse 9px 6px at 30% 30%,transparent 50%,rgba(255,95,162,.35) 52% 70%,transparent 72%) 0 0/34px 30px,radial-gradient(ellipse 7px 5px at 70% 75%,rgba(255,95,162,.3) 60%,transparent 62%) 0 0/34px 30px,#FFF0F6}
.pat-zeb{background:repeating-linear-gradient(115deg,#fff 0 10px,rgba(255,214,232,.9) 10px 16px,#fff 16px 24px,rgba(255,95,162,.25) 24px 28px)}
.pat-plaid{background:repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,95,162,.15) 18px 26px),repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,95,162,.15) 18px 26px),repeating-linear-gradient(0deg,transparent 0 30px,rgba(143,227,232,.35) 30px 32px),#fff}
.pat-dot{background:radial-gradient(rgba(255,95,162,.3) 3px,transparent 3.5px) 0 0/18px 18px,#fff}
.pat-aq{background:radial-gradient(circle at 50% 40%,#fff,#dffafb 60%,#bdeff2)}
.pp-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.pp-note{margin-top:20px;font-size:13px;color:#E8458C}
/* mobile header + floating cd: hidden on desktop */
.combo-mbar,.combo-fcd{display:none}
.combo-fcd{position:fixed;right:16px;bottom:16px;z-index:900;width:62px;height:62px;border:0;padding:0;background:none;cursor:pointer}
.combo-fcd .cd{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff 0 12%,#e8e8ef 12% 14%,transparent 14.5%),conic-gradient(from 20deg,#FFD6E8,#FF9EC7,#d8f2ff,#fff,#FF9EC7,#FF5FA2,#e9d6ff,#FFD6E8,#fff6c8,#FF9EC7,#FFD6E8);box-shadow:0 6px 16px rgba(255,95,162,.4),inset 0 0 0 2px #fff}
.combo-fcd.is-playing .cd{animation:comboSpin 2.4s linear infinite}@keyframes comboSpin{to{transform:rotate(360deg)}}
.combo-fcd .badge{position:absolute;right:-4px;bottom:-4px;width:28px;height:28px;border-radius:50%;padding:2px;background:linear-gradient(#fff,#b9b9c6 50%,#f2f2f6)}
.combo-fcd .badge b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 110%,#FFD6E8,#FF9EC7 45%,#FF5FA2 90%)}
.combo-fcd .bt{width:0;height:0;border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.combo-fcd .bp{display:none;gap:2px}.combo-fcd .bp i{width:3px;height:9px;background:#fff}
.combo-fcd.is-playing .bt{display:none}.combo-fcd.is-playing .bp{display:flex}
@media(max-width:768px){
.page-layout{display:flex;flex-direction:column}
.sidebar{order:2}.main-content{order:1}
.top-nav{display:none!important}
.sidebar .sidebar-cd{display:none!important}
.combo-fcd{display:block}
.combo-mbar{display:flex;position:sticky;top:0;z-index:800;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom:2px solid var(--g1)}
.combo-mlogo{font-size:26px!important;text-decoration:none;color:#FF5FA2;letter-spacing:-.06em;line-height:1}
.combo-menu>span{padding:5px 14px;font-size:13px}
.combo-drop-menu{display:none;position:absolute;left:10px;right:10px;top:100%;margin-top:6px;flex-direction:column;gap:6px;background:#fff;border:2px solid var(--g1);border-radius:16px;padding:10px;box-shadow:0 12px 30px rgba(255,95,162,.25)}
.combo-drop-menu.open{display:flex}
.combo-drop-menu a{padding:9px!important}
.home-page .banner{padding:1.2rem 1rem 1.4rem!important;min-height:0!important}
.home-page .banner-title{font-size:58px!important}
.pp-grid{grid-template-columns:repeat(2,1fr);gap:18px 10px}
.combo-wb{padding:10px}
}
.combo-mlogo{font-family:'Archivo Black',sans-serif!important;font-weight:400!important}
html .btn.btn-secondary,html .hero-actions .btn{background:radial-gradient(120% 100% at 50% 120%,#fff 0%,var(--g1) 45%,var(--g2) 100%) padding-box,linear-gradient(180deg,#fff 0%,#d9d9e3 35%,#a9a9b8 55%,#f4f4f8 80%,#c4c4d0 100%) border-box!important;border:3px solid transparent!important;color:var(--g3)!important}
@media(max-width:768px){.home-page .content-section{padding-left:14px!important;padding-right:14px!important}}
[data-theme="blue"] .pp-ph,[data-theme="blue"] .pp-tag{filter:hue-rotate(160deg) saturate(.9)}
/* ===== mobile drawer (sidebar slides in from the right) ===== */
.combo-dhead,.combo-backdrop,.combo-tise{display:none}
@media(max-width:768px){
.combo-drop-menu{display:none!important}
.combo-tise{display:block}
.page-layout>.sidebar{position:fixed!important;top:0;right:0;bottom:0;left:auto;width:82%!important;min-width:0!important;max-width:360px;z-index:1001;order:0;
overflow-y:auto;overscroll-behavior:contain;transform:translateX(105%);transition:transform .38s cubic-bezier(.22,.8,.25,1);visibility:hidden;
display:flex!important;flex-direction:column;align-items:stretch;gap:12px;padding:0 16px 30px!important;border:0!important;border-left:3px solid #fff!important;border-radius:22px 0 0 22px;
background:repeating-linear-gradient(90deg,#FFD6E8 0 10px,#ffe6f1 10px 20px)!important;box-shadow:-10px 0 30px rgba(255,95,162,.3),inset 3px 0 0 #FF9EC7}
body.drawer-open .page-layout>.sidebar{transform:none;visibility:visible}
.combo-backdrop{display:block;position:fixed;inset:0;z-index:1000;background:rgba(255,214,232,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
body.drawer-open .combo-backdrop{opacity:1;pointer-events:auto}
body.drawer-open{overflow:hidden;touch-action:none}
body.drawer-open .combo-fcd{opacity:0;pointer-events:none}
.combo-dhead{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;margin:0 -16px;padding:14px 16px 10px;background:linear-gradient(#ffe6f1 70%,rgba(255,230,241,0))}
.combo-dhead .brand-logo{font:400 24px 'Archivo Black',sans-serif;letter-spacing:-.06em;color:#FF5FA2}
.combo-close>span{padding:5px 14px;font-size:13px}
.sidebar .sidebar-section{background:rgba(255,255,255,.75)!important;border-radius:16px;border:2px solid #fff!important;padding:0 0 10px!important;overflow:hidden;box-shadow:0 4px 12px rgba(255,95,162,.15)}
.sidebar .sidebar-nav{display:flex!important;flex-direction:column;gap:8px!important;padding:10px!important;margin:0}
.sidebar .sidebar-nav li{margin:0}
.sidebar .sidebar-nav a{padding:11px 10px!important;font-size:15px;min-width:0}
.sidebar .theme-dock{text-align:center}
.sidebar .figurine-button{order:3;align-self:center}
.sidebar .sidebar-cd{opacity:1!important;display:block!important;order:7;align-self:center;width:110px!important;height:110px!important;margin:6px auto!important;position:relative!important}
.sidebar .made-in-japan-sticker{order:2;align-self:center;width:150px!important;max-width:60%;image-rendering:pixelated;position:static!important;transform:none!important;margin:0 auto!important;opacity:1!important}
.sidebar .theme-dock{order:4}.sidebar .sidebar-location{order:5;text-align:center}
.sidebar .combo-dhead{order:0}.sidebar nav.sidebar-section{order:1}
}
@media(max-width:768px){
.page-layout>.sidebar>*{flex:0 0 auto!important;max-height:none!important}
.sidebar .sidebar-cd{flex:0 0 110px!important;min-height:110px}
.sidebar .made-in-japan-sticker{border:0!important;box-shadow:none!important;background:none!important;height:auto!important}
}
/* ===== inner pages ===== */
.secondary-page .pg-sec,.secondary-page .pg-hero-wrap{padding:26px 28px!important;background:transparent!important}
.secondary-page .content-section::before,.secondary-page .content-section::after{display:none!important}
.pg-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:center;padding:30px;border-radius:8px;min-height:260px}
.pg-title{font:400 clamp(44px,6vw,80px)/.9 'Archivo Black',sans-serif!important;letter-spacing:-.06em;color:#FF5FA2!important;margin:0 0 10px;text-shadow:0 2px 0 #fff,0 0 18px #fff}
.pg-sub{background:rgba(255,255,255,.85);display:inline-block;padding:4px 10px;border-radius:8px;color:#FF5FA2;margin:0 0 16px}
.pg-btns{display:flex;gap:12px;flex-wrap:wrap}
.pg-art{position:relative;display:grid;place-items:center;min-height:200px;border-radius:50%;background:radial-gradient(circle,#fff 0 45%,rgba(255,255,255,0) 70%)}
.pg-art canvas{image-rendering:pixelated;max-width:100%}
.pg-f1,.pg-f2{position:absolute;animation:pgbob 4s ease-in-out infinite}.pg-f1{left:8%;top:10%}.pg-f2{right:10%;bottom:12%;animation-delay:-2s}
@keyframes pgbob{50%{transform:translateY(-8px)}}
.pg-h2{font:400 clamp(26px,3vw,36px)/1.05 'Archivo Black',sans-serif!important;letter-spacing:-.04em;color:#FF5FA2!important;margin:10px 0 16px}
.secondary-page .section-tag{display:inline-block}
.pg-center{text-align:center;margin:16px 0 0}
.pg-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.pg-list{list-style:none;padding:0;line-height:2}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 12px;border-radius:14px;background:linear-gradient(#fff,#FFF0F6);border:2px solid #FFD6E8}
.steps b{font-family:'Archivo Black';font-weight:400;letter-spacing:-.02em}.steps span{font-size:14px}
.pg-measure{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;border:2px solid #FFD6E8}
.pg-measure canvas{image-rendering:pixelated}
.pg-measure span{position:absolute;font-weight:700;font-size:13px;background:#fff;padding:2px 8px;border-radius:99px}.m1{top:22%}.m2{right:6%}
.pol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px;padding:10px}
.polaroid{margin:0;background:#fff;padding:10px 10px 14px;border-radius:4px;box-shadow:0 8px 20px rgba(255,95,162,.2);transform:rotate(var(--r));transition:.2s}
.polaroid:hover{transform:rotate(0) scale(1.03)}
.pol-ph{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:2px}
.pol-ph canvas{image-rendering:pixelated;width:45%;height:auto}
.polaroid figcaption{margin-top:10px;font-size:14px;text-align:center}
.mood{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:10px}
.mb{position:relative;border-radius:10px;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 3px 10px rgba(255,95,162,.15)}
.mb span{position:absolute;bottom:6px;left:8px;font-size:12px;font-weight:700;background:rgba(255,255,255,.9);padding:1px 8px;border-radius:99px}
.mb canvas{image-rendering:pixelated}
.mb-big{grid-column:span 2;grid-row:span 2}
.bokeh{background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.95) 0 14px,transparent 30px),radial-gradient(circle at 75% 25%,rgba(255,255,255,.8) 0 22px,transparent 44px),radial-gradient(circle at 60% 80%,rgba(255,255,255,.85) 0 10px,transparent 26px),radial-gradient(circle at 30% 75%,rgba(143,227,232,.5) 0 18px,transparent 36px),linear-gradient(135deg,#FF9EC7,#FFD6E8)}
.chrome{background:linear-gradient(180deg,#fff 0%,#d9d9e3 35%,#a9a9b8 55%,#f4f4f8 80%,#c4c4d0 100%)}
.notepad{background:repeating-linear-gradient(#fff 0 27px,#FFD6E8 27px 28px);padding:6px 14px;line-height:28px;border-radius:6px;border:1px solid #FFD6E8}
.notepad p{margin:0 0 28px}
.draft{color:#E8458C;font-style:italic;font-size:14px;background:#FFF0F6;border:1px dashed #FF9EC7;border-radius:8px;padding:2px 10px!important;line-height:1.6!important}
.about-art{aspect-ratio:1;border-radius:16px;border:2px solid #FFD6E8}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative;padding-top:10px}
.tl::before{content:"";position:absolute;left:8%;right:8%;top:38px;height:6px;border-radius:9px;background:repeating-linear-gradient(90deg,#FF9EC7 0 12px,#FFD6E8 12px 18px)}
.tl-i{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.tl-i canvas{image-rendering:pixelated;background:#fff;border-radius:50%;padding:8px;box-shadow:0 0 0 3px #FFD6E8,0 4px 10px rgba(255,95,162,.25);box-sizing:content-box}
.tl-i b{font-family:'Archivo Black';font-weight:400;font-size:14px}.tl-i span{font-size:13px}
.stickers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sticker{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 10px;background:#fff;border-radius:20px;border:3px solid #fff;box-shadow:0 0 0 2px #FF9EC7,0 6px 14px rgba(255,95,162,.2);transform:rotate(var(--r))}
.sticker canvas{image-rendering:pixelated}.sticker span{font-size:13px}
.myspace{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:start}
.ms-pic{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;border:2px solid #FFD6E8}.ms-pic canvas{image-rendering:pixelated}
.ms-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ms-links .btn{font-size:13px;padding:8px 10px!important}
.demo-form{display:grid;gap:10px}
.demo-form label{display:grid;gap:4px;font-weight:700;font-size:14px;color:#FF5FA2}
.demo-form input,.demo-form textarea{font:inherit;color:#FF5FA2;padding:10px 14px;border-radius:14px;border:2px solid #FFD6E8;background:#fff;box-shadow:inset 0 2px 4px rgba(255,95,162,.12);outline:0}
.demo-form ::placeholder{color:#FFA9CB}.demo-send{justify-self:start}
.faq details{padding:10px 14px;border-radius:12px;background:#FFF5F9;border:1px solid #FFD6E8;margin-bottom:8px}
.faq summary{font-weight:700;cursor:pointer}.faq p{margin:8px 0 0}
@media(max-width:768px){
.secondary-page .pg-sec,.secondary-page .pg-hero-wrap{padding:16px 12px!important}
.pg-hero{grid-template-columns:1fr;padding:18px;min-height:0}
.pg-hero .pg-art{display:none}
.pg-two,.steps{grid-template-columns:1fr}
.pol-grid{grid-template-columns:1fr 1fr;gap:16px 10px;padding:4px}
.mood{grid-template-columns:repeat(2,1fr);grid-auto-rows:100px}
.tl{grid-template-columns:1fr 1fr;gap:20px 10px}.tl::before{display:none}
.stickers{grid-template-columns:1fr 1fr}
.myspace{grid-template-columns:1fr}.ms-pic{max-width:140px}
}
html body .pg-h2,html body h2.pg-h2{font-family:'Archivo Black',sans-serif!important;font-weight:400!important}
/* gel pill "click me" button (matches button-demo pill) */
html .sidebar .figurine-button{position:relative;width:auto!important;margin:8px auto!important;padding:8px 22px 8px 10px!important;border:4px solid transparent!important;border-radius:999px!important;color:#FF5FA2!important;font:700 13px Inconsolata,monospace!important;letter-spacing:.08em;transform:none!important;
background:radial-gradient(120% 100% at 50% 120%,#fff 0%,#FFD6E8 45%,#FF5FA2 140%) padding-box,linear-gradient(180deg,#fff 0%,#d9d9e3 35%,#a9a9b8 55%,#f4f4f8 80%,#c4c4d0 100%) border-box!important;
box-shadow:inset 0 -5px 10px rgba(255,255,255,.9),inset 0 3px 6px rgba(255,95,162,.35),0 6px 14px rgba(255,95,162,.25)!important}
html .sidebar .figurine-button::before{content:"";position:absolute;left:12px;right:12px;top:2px;height:45%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.12));pointer-events:none}
html .sidebar .figurine-button>*{position:relative}
html .sidebar .figurine-button:active{transform:translateY(1px) scale(.98)!important}
html .sidebar .figurine{background:radial-gradient(circle at 40% 30%,#fff,#FFD6E8 55%,#FF5FA2)!important;color:#fff!important;border-radius:50%!important;box-shadow:inset 0 -2px 4px rgba(255,255,255,.8),0 0 0 2px #fff}
/* phone menu order v2: mood, click me, cat, cd */
@media (max-width:768px){
html .sidebar .theme-dock{order:2!important;align-self:center!important;width:100%!important;max-width:300px!important;margin:4px auto 0!important}
html .sidebar .figurine-button{order:3!important;align-self:center!important;width:100%!important;max-width:300px!important;justify-content:center!important;margin:0 auto!important}
html .sidebar .made-in-japan-sticker{order:4!important;align-self:center!important;margin:34px auto 0!important}
html .sidebar .sidebar-cd{order:5!important;align-self:center!important;margin:30px auto 6px!important}
html .sidebar .sidebar-location{order:6!important;align-self:center!important;text-align:center}
}