/*
* cosmetic_home.html ??Page-specific overrides
* Global tokens from common.css; only cosmetic-unique rules here.
*/
/* Cosmetic pages use a warm off-white background */
body { background: var(--fc-bg-warm); }
/* ?€?€ Header: uses .fc-gnb from common.css ?€?€ */
/* ?€?€ Hero ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.hero { padding:64px 0 40px; text-align:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 40%, rgba(167,139,250,0.08) 0%, rgba(251,191,36,0.03) 40%, transparent 70%); pointer-events:none; z-index:0; }
.hero > * { position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:var(--radius-full); background:rgba(255,255,255,0.85); backdrop-filter:blur(8px); border:1px solid rgba(139,92,246,0.15); font-size:13px; color:var(--color-ink-light); margin-bottom:20px; box-shadow:0 2px 12px rgba(139,92,246,0.08); }
.hero-badge-dot { width:6px; height:6px; border-radius:50%; background:var(--color-violet); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.85);} }
.hero h1 { font-size:44px; font-weight:800; line-height:1.2; letter-spacing:-1.5px; }
.hero h1 .accent { background:linear-gradient(135deg, var(--color-violet-deep), var(--color-violet)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero .hero-sub { font-size:17px; color:var(--color-ink-light); margin-top:14px; line-height:1.6; }
@media(max-width:768px) { .hero { padding:40px 0 28px; } .hero h1 { font-size:28px; letter-spacing:-0.5px; } .hero .hero-sub { font-size:15px; } }
/* ?€?€ Routine CTA banner ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.routine-banner { display:flex; align-items:center; gap:16px; padding:20px 24px; border-radius:var(--radius-xl); background:linear-gradient(135deg, #EDE9FE 0%, #FDF2F8 50%, #FFF7ED 100%); border:1px solid #E0E7FF; cursor:pointer; transition:all 0.3s var(--ease-out); text-decoration:none; color:inherit; margin-bottom:8px; position:relative; overflow:hidden; }
.routine-banner::after { content:''; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%); transform:translateX(-100%); animation:banner-shimmer 3s ease-in-out infinite; }
@keyframes banner-shimmer { 0%,100%{transform:translateX(-100%);} 50%{transform:translateX(100%);} }
.routine-banner:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--color-violet); }
.routine-banner__icon { width:48px; height:48px; border-radius:var(--radius-md); background:white; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:var(--shadow-sm); flex-shrink:0; position:relative; z-index:1; }
.routine-banner__text { position:relative; z-index:1; }
.routine-banner__text h3 { font-size:15px; font-weight:700; }
.routine-banner__text p { font-size:12px; color:var(--color-ink-light); margin-top:2px; }
.routine-banner__arrow { margin-left:auto; color:var(--color-violet-deep); font-size:20px; flex-shrink:0; position:relative; z-index:1; animation:arrow-bounce 2s ease-in-out infinite; }
@keyframes arrow-bounce { 0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);} }
@media(max-width:768px) { .routine-banner { padding:16px; gap:12px; } .routine-banner__text h3 { font-size:14px; } }
/* ?€?€ Search ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.search-wrap { max-width:560px; margin:24px auto 0; position:relative; }
.search-input { width:100%; padding:15px 20px 15px 48px; border-radius:var(--radius-full); border:1.5px solid var(--color-border); background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); font-size:15px; outline:none; transition:all 0.3s var(--ease-out); box-shadow:0 2px 20px rgba(139,92,246,0.06); }
.search-input:focus { border-color:var(--color-violet-deep); box-shadow:0 0 0 4px var(--color-violet-dim), 0 4px 24px rgba(139,92,246,0.12); }
.search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--color-ink-muted); }
.search-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
.search-tag { padding:6px 14px; border-radius:var(--radius-full); font-size:12px; font-weight:500; background:white; border:1px solid var(--color-border); color:var(--color-ink-light); cursor:pointer; transition:all var(--duration-fast); }
.search-tag:hover { background:var(--color-violet-pale); color:var(--color-violet-deep); border-color:var(--color-violet); }
/* ?€?€ Stats bar (inside hero) ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.stats-bar { display:flex; justify-content:center; gap:40px; padding:28px 0 0; margin-top:0; }
.stat-item { text-align:center; }
.stat-num { font-size:26px; font-weight:800; letter-spacing:-0.5px; color:var(--color-ink); }
.stat-label { font-size:11px; color:var(--color-ink-muted); margin-top:2px; font-weight:500; text-transform:uppercase; letter-spacing:0.3px; }
.stat-divider { width:1px; height:32px; background:var(--color-border); align-self:center; }
@media(max-width:768px) { .stats-bar { gap:20px; } .stat-num { font-size:20px; } }
/* ?€?€ Section titles ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.section { padding:40px 0; }
.section + .section { border-top:1px solid var(--color-border); }
.section-title { font-size:20px; font-weight:700; letter-spacing:-0.5px; display:flex; align-items:center; gap:8px; }
.section-title .section-emoji { font-size:22px; }
.section-desc { font-size:13px; color:var(--color-ink-muted); margin-top:4px; }
/* ?€?€ Feature cards ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:var(--space-lg); }
@media(max-width:768px) { .feature-grid { grid-template-columns:1fr; } }
.feature-card { padding:32px 24px; border-radius:var(--radius-xl); background:var(--color-card); border:1px solid var(--color-border); cursor:pointer; transition:all var(--duration-normal) var(--ease-out); text-decoration:none; color:inherit; }
.feature-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--color-violet); }
.feature-icon { width:48px; height:48px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:var(--space-md); }
.feature-card h3 { font-size:17px; font-weight:700; }
.feature-card p { font-size:13px; color:var(--color-ink-light); margin-top:6px; line-height:1.5; }
/* ?€?€ Product grid ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-top:20px; }
.product-card { background:var(--color-card); border-radius:var(--radius-md); border:1px solid var(--color-border); overflow:hidden; cursor:pointer; transition:all 0.25s var(--ease-out); text-decoration:none; color:inherit; position:relative; }
.product-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.07); border-color:rgba(139,92,246,0.2); }
.product-img-wrap { position:relative; overflow:hidden; background:linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%); }
.product-img { width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 0.4s var(--ease-out); }
.product-card:hover .product-img { transform:scale(1.04); }
.product-info { padding:10px 12px 12px; }
.product-brand { font-size:10px; font-weight:600; color:var(--color-violet-deep); text-transform:uppercase; letter-spacing:0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-name { font-size:13px; font-weight:600; margin-top:3px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-meta { display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; }
.product-rating { font-size:11px; color:var(--color-ink-light); display:flex; align-items:center; gap:3px; }
.product-price { font-size:13px; font-weight:700; }
.product-badge { display:inline-flex; padding:2px 6px; border-radius:6px; font-size:9px; font-weight:700; }
.badge-ings { background:var(--color-emerald-pale); color:var(--color-emerald); }
/* Grade overlay on image */
.card-grade-overlay { position:absolute; top:6px; right:6px; z-index:2; }
.card-grade-overlay .fc-grade { font-size:9px; padding:2px 7px; box-shadow:0 2px 6px rgba(0,0,0,0.12); }
/* Pill UI badges */
.pill-row { display:flex; flex-wrap:wrap; gap:3px; margin-top:5px; }
.pill { display:inline-flex; padding:2px 6px; border-radius:99px; font-size:9px; font-weight:600; letter-spacing:0.1px; }
.pill--grade { background:var(--color-green-pale); color:var(--color-green-deep); }
.pill--concern { background:var(--color-violet-pale); color:var(--color-violet-deep); }
.pill--safe { background:#ECFDF5; color:#059669; }
.pill--ings { background:#F3F4F6; color:#6B7280; }
/* ?€?€ Tablet: 4-column ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
@media (min-width: 641px) and (max-width: 1024px) {
.product-grid { grid-template-columns:repeat(4, 1fr); gap:12px; }
}
/* ?€?€ Mobile: 3-column compact ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
@media (max-width: 640px) {
.product-grid { grid-template-columns:repeat(3, 1fr); gap:8px; }
.product-img { aspect-ratio:1/1; }
.product-info { padding:8px 8px 10px; }
.product-brand { font-size:9px; letter-spacing:0.1px; }
.product-name { font-size:11px; -webkit-line-clamp:2; margin-top:2px; line-height:1.3; }
.product-meta { gap:3px; margin-top:4px; }
.product-price { font-size:11px; }
.product-rating { font-size:9px; }
.pill { font-size:8px; padding:1px 5px; }
.card-grade-overlay .fc-grade { font-size:8px; padding:2px 5px; }
}
/* ?€?€ Concern category cards ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.concern-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 16px;
}
.concern-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px 12px;
border-radius: var(--radius-lg);
background: var(--color-card, #fff);
border: 1px solid var(--color-border, #E5E7EB);
text-decoration: none;
transition: all 0.25s;
}
.concern-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
border-color: var(--color-violet-deep, #7C3AED);
}
.concern-card__icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--color-bg-alt, #F8F8F8);
display: flex;
align-items: center;
justify-content: center;
}
.concern-card__name {
font-size: 13px;
font-weight: 700;
color: var(--color-ink, #1A1A1A);
}
@media (max-width: 480px) {
.concern-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.concern-card { padding: 14px 8px; }
.concern-card__icon { width: 40px; height: 40px; border-radius: var(--radius-md); }
.concern-card__name { font-size: 12px; }
}
/* ?€?€ See-all link ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.see-all-link { display:block; text-align:center; margin-top:16px; font-size:14px; font-weight:600; color:var(--color-violet-deep); text-decoration:none; }
.see-all-link:hover { text-decoration:underline; }
/* ?€?€ CTA ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.cta-section { padding:var(--space-3xl) 0; text-align:center; }
.cta-box { padding:56px 32px; border-radius:var(--radius-2xl); background:linear-gradient(135deg, var(--color-violet-deep) 0%, var(--color-violet) 50%, #C4B5FD 100%); background-size:200% 200%; animation:cta-gradient 6s ease infinite; color:white; position:relative; overflow:hidden; }
.cta-box::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 50%); }
@keyframes cta-gradient { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.cta-box h2 { font-size:28px; font-weight:800; position:relative; }
.cta-box p { font-size:15px; opacity:0.9; margin-top:8px; position:relative; }
.cta-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border-radius:var(--radius-md); background:white; color:var(--color-violet-deep); font-size:16px; font-weight:700; border:none; cursor:pointer; margin-top:var(--space-lg); transition:all 0.3s var(--ease-out); text-decoration:none; position:relative; box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.cta-btn:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.cta-btn:active { transform:scale(0.98); }
/* ?€?€ Mobile touch feedback ?€?€ */
@media (hover: none) {
.product-card:active { transform:scale(0.98); box-shadow:none; }
.routine-banner:active { transform:scale(0.98); }
}
/* ?€?€ Pagination / load-more ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.load-more { display:block; margin:var(--space-xl) auto 0; padding:12px 40px; border-radius:var(--radius-md); border:1px solid var(--color-border); background:white; font-size:14px; font-weight:600; color:var(--color-ink-light); cursor:pointer; transition:all var(--duration-fast); }
.load-more:hover { background:var(--color-violet-pale); color:var(--color-violet-deep); border-color:var(--color-violet); }
/* ?€?€ Results header ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
.results-header { display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-lg); }
.back-btn { display:flex; align-items:center; gap:4px; font-size:14px; font-weight:600; color:var(--color-violet-deep); background:none; border:none; cursor:pointer; }
.sort-select { padding:8px 12px; border-radius:var(--radius-sm); border:1px solid var(--color-border); font-size:13px; background:white; cursor:pointer; }
.result-count { font-size:13px; color:var(--color-ink-muted); margin-top:var(--space-sm); }
/* ?€?€ Footer ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€ */
footer { padding:56px 0 32px; border-top:1px solid var(--color-border); font-size:12px; color:var(--color-ink-muted); background:linear-gradient(180deg, transparent 0%, rgba(139,92,246,0.02) 100%); }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
.footer-brand { font-family:var(--font-serif); font-size:22px; font-weight:800; color:var(--color-ink); margin-bottom:8px; letter-spacing:-0.5px; }
.footer-brand span { color:var(--color-violet); }
.footer-desc { line-height:1.6; }
.footer-social { display:flex; gap:10px; margin-top:12px; }
.footer-social a { width:auto; height:auto; padding:4px 12px; border-radius:var(--radius-sm); background:var(--color-bg-alt); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:var(--color-ink-light); transition:all 0.2s; text-decoration:none; }
.footer-social a:hover { background:var(--color-violet-pale); border-color:var(--color-violet); }
.footer-col h4 { font-size:11px; font-weight:700; color:var(--color-ink-light); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.8px; }
.footer-col a { display:block; font-size:13px; color:var(--color-ink-muted); text-decoration:none; margin-bottom:6px; transition:color 0.15s; }
.footer-col a:hover { color:var(--color-violet-deep); }
.footer-bottom { margin-top:28px; padding-top:16px; border-top:1px solid var(--color-border); text-align:center; font-size:11px; color:var(--color-ink-muted); }
@media(max-width:768px) { .footer-inner { grid-template-columns:1fr; gap:24px; } }