/* ============================================================= doujin-voices.com — THEME CORE STYLES Concept: Immoral / Dark / Mesugaki / S-attribute Single source of truth for both the WP theme and /preview ============================================================= */ /* ---------- Fonts (Google Fonts loaded in ) ---------- Display : "Zen Kaku Gothic New" (sharp, dominant) Round : "Zen Maru Gothic" (cute-but-mean ♡ taunt) Accent : "Shippori Mincho B1" (immoral / elegant serif) Latin : "Space Grotesk" (numbers / labels) ------------------------------------------------------------ */ /* ============================ TOKENS ============================ */ :root { /* base / void */ --c-void: #07070b; --c-bg: #0a0a10; --c-bg-2: #0e0d16; --c-surface: #14121e; --c-surface-2: #1b1827; --c-line: #2a2638; --c-line-soft: #1f1c2c; /* text */ --c-text: #f5f2fb; --c-text-dim: #b6b0c8; --c-text-mute: #6f6982; /* accents */ --c-pink: #ff2d78; /* mesugaki ♡ signature */ --c-pink-hot: #ff4d93; --c-pink-deep: #c4185a; --c-violet: #b14bff; --c-cyan: #29e3ff; /* audio / wave cold light */ --c-blood: #ff2046; /* S / warning */ /* glows */ --glow-pink: 0 0 0.6rem rgba(255,45,120,.55), 0 0 2rem rgba(255,45,120,.28); --glow-violet: 0 0 1.4rem rgba(177,75,255,.35); --glow-cyan: 0 0 1.2rem rgba(41,227,255,.30); /* gradients */ --grad-accent: linear-gradient(115deg, var(--c-pink) 0%, var(--c-violet) 60%, var(--c-cyan) 130%); --grad-pink: linear-gradient(120deg, var(--c-pink-hot), var(--c-pink-deep)); --grad-card: linear-gradient(160deg, rgba(255,45,120,.12), rgba(177,75,255,.06) 45%, transparent 70%); --grad-veil: linear-gradient(180deg, transparent 0%, rgba(7,7,11,.65) 60%, var(--c-void) 100%); /* layout */ --maxw: 1240px; --gut: clamp(1rem, 4vw, 2.75rem); --radius: 18px; --radius-s: 11px; /* type */ --f-display: "Zen Kaku Gothic New", system-ui, sans-serif; --f-round: "Zen Maru Gothic", system-ui, sans-serif; --f-serif: "Shippori Mincho B1", serif; --f-latin: "Space Grotesk", ui-monospace, monospace; --ease: cubic-bezier(.2,.7,.2,1); } /* ============================ RESET ============================ */ *,*::before,*::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--f-display); background: var(--c-bg); color: var(--c-text); line-height: 1.7; letter-spacing: .01em; font-feature-settings: "palt" 1; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } ul { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--c-pink); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--c-pink); color: #fff; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--c-void); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--c-pink-deep), var(--c-violet)); border-radius: 99px; border: 2px solid var(--c-void); } /* ====================== AMBIENT BACKGROUND ====================== */ /* film grain + radial bloom + scanlines, all pure CSS */ body::before { /* bloom */ content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60vw 60vw at 78% -8%, rgba(255,45,120,.16), transparent 60%), radial-gradient(55vw 55vw at 8% 12%, rgba(177,75,255,.13), transparent 60%), radial-gradient(70vw 50vw at 50% 120%, rgba(41,227,255,.08), transparent 60%), var(--c-bg); } body::after { /* grain */ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================ LAYOUT ============================ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } /* section heading */ .s-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.5rem,3vw,2.5rem); flex-wrap: wrap; } .s-head__kick { font-family: var(--f-latin); font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; color: var(--c-pink); display: flex; align-items: center; gap: .6rem; } .s-head__kick::before { content: ""; width: 26px; height: 1px; background: var(--c-pink); box-shadow: var(--glow-pink); } .s-head__title { font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 900; line-height: 1.2; margin-top: .35rem; } .s-head__title .tease { font-family: var(--f-round); color: var(--c-pink-hot); } .s-head__more { font-family: var(--f-latin); font-size: .8rem; letter-spacing: .15em; color: var(--c-text-dim); display: inline-flex; align-items: center; gap: .4rem; transition: color .3s var(--ease), gap .3s var(--ease); } .s-head__more:hover { color: var(--c-pink); gap: .8rem; } /* ============================ HEADER ============================ */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(140%); background: linear-gradient(180deg, rgba(7,7,11,.86), rgba(7,7,11,.5)); border-bottom: 1px solid var(--c-line-soft); transition: background .4s var(--ease), border-color .4s; } .site-header.is-scrolled { background: rgba(7,7,11,.92); border-color: var(--c-line); } .nav { display: flex; align-items: center; gap: 1.5rem; height: 68px; } .brand { display: flex; align-items: center; gap: .55rem; font-weight: 900; font-size: 1.18rem; letter-spacing: -.01em; } .brand__mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--grad-pink); box-shadow: var(--glow-pink); font-family: var(--f-round); color: #fff; font-size: 1.05rem; transform: rotate(-6deg); } .brand__mark::after { content: "♡"; } .brand b { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand span { color: var(--c-text-mute); font-family: var(--f-latin); font-weight: 500; font-size: .9rem; } .nav__menu { display: flex; gap: 1.6rem; margin-left: auto; } .nav__menu a { font-size: .92rem; color: var(--c-text-dim); position: relative; padding-block: .4rem; transition: color .3s; } .nav__menu a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad-pink); box-shadow: var(--glow-pink); transition: width .3s var(--ease); } .nav__menu a:hover { color: var(--c-text); } .nav__menu a:hover::after { width: 100%; } .nav__cta { background: var(--grad-pink); color: #fff; padding: .55rem 1.1rem; border-radius: 99px; font-size: .85rem; font-weight: 700; box-shadow: var(--glow-pink); transition: transform .25s var(--ease), filter .25s; } .nav__cta:hover { transform: translateY(-2px); filter: brightness(1.1); } .nav__burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--c-line); align-items: center; justify-content: center; } .nav__burger span, .nav__burger span::before, .nav__burger span::after { content:""; display:block; width:18px; height:2px; background: var(--c-text); position: relative; transition: .3s; } .nav__burger span::before { position: absolute; top: -6px; } .nav__burger span::after { position: absolute; top: 6px; } /* ============================ HERO ============================ */ .hero { position: relative; padding-block: clamp(4rem, 11vw, 8.5rem) clamp(3rem,7vw,5.5rem); overflow: hidden; } .hero__veil { position: absolute; inset: 0; background: var(--grad-veil); pointer-events: none; z-index: 1; } .hero__inner { position: relative; z-index: 2; max-width: 900px; } .hero__tag { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-latin); font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--c-text-dim); border: 1px solid var(--c-line); padding: .42rem .9rem; border-radius: 99px; background: rgba(20,18,30,.6); } .hero__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-pink); box-shadow: var(--glow-pink); animation: pulse 1.8s infinite; } .hero__title { font-size: clamp(2.6rem, 8.5vw, 6rem); font-weight: 900; line-height: 1.02; letter-spacing: -.02em; margin: 1.4rem 0 1.2rem; text-wrap: balance; } .hero__title .tease { font-family: var(--f-round); background: var(--grad-pink); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px rgba(255,45,120,.4); } .hero__title .glow { color: var(--c-text); text-shadow: 0 0 30px rgba(255,255,255,.18); } .hero__sub { font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--c-text-dim); max-width: 46ch; font-family: var(--f-serif); } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; } .btn { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; padding: .95rem 1.7rem; border-radius: 99px; transition: transform .25s var(--ease), box-shadow .25s, filter .25s; } .btn--primary { background: var(--grad-pink); color: #fff; box-shadow: var(--glow-pink); } .btn--primary:hover { transform: translateY(-3px); box-shadow: 0 0 1rem rgba(255,45,120,.7), 0 12px 30px rgba(255,45,120,.3); } .btn--ghost { border: 1px solid var(--c-line); color: var(--c-text); background: rgba(20,18,30,.5); } .btn--ghost:hover { border-color: var(--c-pink); color: var(--c-pink); transform: translateY(-3px); } .btn--block { width: 100%; justify-content: center; } /* equalizer / waveform in hero corner */ .hero__eq { position: absolute; right: var(--gut); bottom: clamp(2rem,6vw,4rem); display: flex; align-items: flex-end; gap: 5px; height: 120px; z-index: 2; opacity: .9; } .hero__eq span { width: 6px; border-radius: 99px 99px 0 0; background: var(--grad-accent); box-shadow: var(--glow-pink); animation: eq 1.1s ease-in-out infinite; } @media (max-width: 860px){ .hero__eq{ opacity:.5; height:70px; } } /* hero stats strip */ .hero__stats { display: flex; gap: clamp(1.4rem,4vw,3rem); margin-top: 3rem; position: relative; z-index: 2; flex-wrap: wrap; } .stat__num { font-family: var(--f-latin); font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 700; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__label { font-size: .78rem; color: var(--c-text-mute); letter-spacing: .12em; } /* ============================ MARQUEE ============================ */ .marquee { border-block: 1px solid var(--c-line-soft); background: linear-gradient(90deg, rgba(255,45,120,.05), rgba(177,75,255,.05)); overflow: hidden; padding-block: .85rem; } .marquee__track { display: flex; gap: 2.5rem; white-space: nowrap; width: max-content; animation: marquee 28s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { font-family: var(--f-round); font-size: 1rem; color: var(--c-text-dim); display: inline-flex; align-items: center; gap: 2.5rem; } .marquee__item::after { content: "♡"; color: var(--c-pink); } .marquee__item b { color: var(--c-text); } /* ============================ GENRE CHIPS ============================ */ .chips { display: flex; flex-wrap: wrap; gap: .65rem; } .chip { font-size: .85rem; padding: .5rem 1rem; border-radius: 99px; border: 1px solid var(--c-line); background: rgba(20,18,30,.6); color: var(--c-text-dim); transition: .25s var(--ease); display:inline-flex; align-items:center; gap:.4rem; } .chip .hash { color: var(--c-pink); font-family: var(--f-latin); } .chip:hover { border-color: var(--c-pink); color: var(--c-text); background: rgba(255,45,120,.08); transform: translateY(-2px); box-shadow: var(--glow-pink); } .chip--lg { font-size: .95rem; padding: .7rem 1.3rem; } /* ============================ CARD GRID ============================ */ .grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px){ .grid--4 { grid-template-columns: repeat(3,1fr); } } @media (max-width: 760px){ .grid--4, .grid--3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 460px){ .grid--4, .grid--3 { grid-template-columns: 1fr; } } .card { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-line-soft); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; display: flex; flex-direction: column; } .card::before { content:""; position:absolute; inset:0; background: var(--grad-card); opacity:0; transition:opacity .4s; pointer-events:none; z-index:2; } .card:hover { transform: translateY(-6px); border-color: var(--c-pink); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 1.4rem rgba(255,45,120,.25); } .card:hover::before { opacity:1; } .card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg-2); } .card__media img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease), filter .6s; } .card:hover .card__media img { transform: scale(1.06); filter: saturate(1.15); } /* gradient placeholder art (preview uses these when no real image) */ .ph { width:100%; height:100%; position:relative; display:grid; place-items:center; overflow:hidden; } .ph::before { content:""; position:absolute; inset:0; background: var(--ph-grad, var(--grad-accent)); opacity:.9; } .ph::after { content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(115deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px); mix-blend-mode: overlay; } .ph__wave { position: relative; z-index: 1; display:flex; gap:3px; align-items:flex-end; height:42px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } .ph__wave i { width:4px; background:#fff; opacity:.85; border-radius:99px; animation: eq 1.3s ease-in-out infinite; } .card__badge { position:absolute; top:.7rem; left:.7rem; z-index:3; font-family: var(--f-latin); font-size:.66rem; letter-spacing:.12em; padding:.28rem .55rem; border-radius:6px; background: rgba(7,7,11,.78); border:1px solid var(--c-line); text-transform:uppercase; } .card__badge--new { background: var(--grad-pink); border-color: transparent; box-shadow: var(--glow-pink); color:#fff; } .card__r18 { position:absolute; top:.7rem; right:.7rem; z-index:3; font-size:.62rem; font-weight:700; padding:.24rem .42rem; border-radius:5px; background: var(--c-blood); color:#fff; letter-spacing:.08em; } .card__media .tease-overlay { position:absolute; inset:auto 0 0 0; z-index:3; padding:.9rem .8rem .7rem; font-family: var(--f-round); color:#fff; font-size:.9rem; background: linear-gradient(transparent, rgba(7,7,11,.9)); transform: translateY(12px); opacity:0; transition:.4s var(--ease); } .card:hover .tease-overlay { transform: translateY(0); opacity:1; } .tease-overlay .heart { color: var(--c-pink-hot); } .card__body { padding: .9rem .95rem 1.05rem; display:flex; flex-direction:column; gap:.5rem; flex:1; } .card__circle { font-size:.72rem; color: var(--c-pink); font-family: var(--f-latin); letter-spacing:.05em; } .card__title { font-size:.97rem; font-weight:700; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .card__cv { font-size:.78rem; color: var(--c-text-dim); } .card__cv b { color: var(--c-text); font-weight:600; } .card__meta { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.5rem; border-top:1px solid var(--c-line-soft); } .card__price { font-family: var(--f-latin); font-weight:700; color: var(--c-text); } .card__price s { color: var(--c-text-mute); font-weight:400; font-size:.78rem; margin-right:.35rem; } .card__rate { font-size:.78rem; color: var(--c-text-dim); display:flex; align-items:center; gap:.2rem; } .card__rate .star { color: var(--c-pink); } .card__taglist { display:flex; flex-wrap:wrap; gap:.3rem; } .card__taglist span { font-size:.66rem; color: var(--c-text-mute); border:1px solid var(--c-line-soft); padding:.1rem .4rem; border-radius:5px; } /* ============================ RANKING ============================ */ .rank { display:flex; flex-direction:column; gap:.7rem; min-width:0; } .rank__item { display:flex; align-items:center; gap:1.1rem; padding:.8rem .9rem; border-radius: var(--radius-s); border:1px solid var(--c-line-soft); background: var(--c-surface); transition:.3s var(--ease); min-width:0; } .rank__item:hover { border-color: var(--c-pink); background: var(--c-surface-2); transform: translateX(4px); } .rank__no { font-family: var(--f-latin); font-weight:700; font-size: clamp(1.6rem,4vw,2.4rem); width:2.4ch; text-align:center; -webkit-text-stroke: 1.4px var(--c-pink); color: transparent; line-height:1; } .rank__item:nth-child(1) .rank__no { -webkit-text-stroke-color: #ffd34d; } .rank__item:nth-child(2) .rank__no { -webkit-text-stroke-color: #cfd4e0; } .rank__item:nth-child(3) .rank__no { -webkit-text-stroke-color: #e0a37a; } .rank__thumb { width:64px; height:64px; border-radius:10px; overflow:hidden; flex:none; } .rank__thumb .ph__wave { height:24px; } .rank__thumb .ph__wave i { width:3px; } .rank__info { min-width:0; flex:1; display:flex; flex-direction:column; justify-content:center; gap:1px; overflow:hidden; } .rank__info .t { font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rank__info .c { font-size:.76rem; color: var(--c-text-dim); } .rank__rate { font-family: var(--f-latin); color: var(--c-pink); font-weight:700; white-space:nowrap; flex:none; } .rank__no { flex:none; } .rank__thumb { flex:none; } /* ============================ FEATURE SPLIT ============================ */ .feature { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items:center; } @media (max-width: 880px){ .feature{ grid-template-columns:1fr; } } .feature__media { aspect-ratio: 5/4; border-radius: var(--radius); overflow:hidden; border:1px solid var(--c-line); position:relative; } .feature__copy h2 { font-size: clamp(1.7rem,4vw,2.6rem); font-weight:900; line-height:1.2; margin-bottom:1rem; } .feature__copy h2 .tease { font-family: var(--f-round); color: var(--c-pink-hot); } .feature__copy p { color: var(--c-text-dim); font-family: var(--f-serif); margin-bottom: .9rem; } .feature__list { display:flex; flex-direction:column; gap:.7rem; margin:1.4rem 0; } .feature__list li { display:flex; gap:.7rem; align-items:flex-start; color: var(--c-text-dim); } .feature__list li::before { content:"♡"; color: var(--c-pink); flex:none; } /* ============================ CTA BANNER ============================ */ .cta-banner { position:relative; overflow:hidden; border-radius: clamp(20px,3vw,32px); border:1px solid var(--c-line); padding: clamp(2.2rem,6vw,4.5rem); text-align:center; background: radial-gradient(120% 160% at 50% 0%, rgba(255,45,120,.18), transparent 60%), var(--c-surface); } .cta-banner h2 { font-size: clamp(1.8rem,5vw,3rem); font-weight:900; line-height:1.15; margin-bottom:.8rem; } .cta-banner h2 .tease { font-family: var(--f-round); background: var(--grad-pink); -webkit-background-clip:text; background-clip:text; color:transparent; } .cta-banner p { color: var(--c-text-dim); max-width: 50ch; margin: 0 auto 1.8rem; font-family: var(--f-serif); } /* ============================ FOOTER ============================ */ .site-footer { border-top:1px solid var(--c-line-soft); background: var(--c-void); padding-block: clamp(2.5rem,5vw,3.5rem) 2rem; margin-top: 2rem; } .footer__grid { display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 2rem; margin-bottom:2.5rem; } @media (max-width: 760px){ .footer__grid{ grid-template-columns:1fr 1fr; } } @media (max-width: 460px){ .footer__grid{ grid-template-columns:1fr; } } .footer__brand p { color: var(--c-text-mute); font-size:.85rem; margin-top:.8rem; max-width: 34ch; } .footer__col h4 { font-size:.78rem; letter-spacing:.16em; color: var(--c-text); text-transform:uppercase; font-family: var(--f-latin); margin-bottom:.9rem; } .footer__col a { display:block; color: var(--c-text-mute); font-size:.88rem; padding-block:.3rem; transition: color .25s; } .footer__col a:hover { color: var(--c-pink); } .footer__disclosure { font-size:.76rem; color: var(--c-text-mute); line-height:1.8; border:1px solid var(--c-line-soft); border-radius: var(--radius-s); padding:1rem 1.2rem; background: var(--c-bg-2); margin-bottom:1.5rem; } .footer__disclosure b { color: var(--c-text-dim); } .footer__bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.5rem; border-top:1px solid var(--c-line-soft); } .footer__bottom small { color: var(--c-text-mute); font-size:.78rem; } .footer__bottom .f-mark { font-family: var(--f-round); color: var(--c-pink); } /* ============================ R18 GATE ============================ */ .agegate { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: 1.5rem; background: rgba(5,5,9,.92); backdrop-filter: blur(18px); } .agegate[hidden]{ display:none; } .agegate__box { max-width: 480px; width:100%; text-align:center; border:1px solid var(--c-line); border-radius: var(--radius); padding: clamp(1.8rem,5vw,2.8rem); background: linear-gradient(160deg, var(--c-surface), var(--c-bg-2)); box-shadow: 0 30px 80px rgba(0,0,0,.6), var(--glow-violet); } .agegate__mark { font-family: var(--f-round); font-size:2.4rem; color: var(--c-blood); } .agegate__box h2 { font-size:1.4rem; margin:.6rem 0 .4rem; } .agegate__box .lead { font-family: var(--f-round); color: var(--c-pink-hot); margin-bottom:.4rem; } .agegate__box p { color: var(--c-text-dim); font-size:.9rem; margin-bottom:1.6rem; } .agegate__actions { display:flex; gap:.8rem; flex-direction:column; } .agegate__note { font-size:.72rem; color: var(--c-text-mute); margin-top:1.2rem; line-height:1.7; } /* ============================ POST / SINGLE ============================ */ .post-hero { padding-block: clamp(2rem,5vw,3.5rem) 1rem; } .breadcrumb { font-size:.78rem; color: var(--c-text-mute); margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap; } .breadcrumb a:hover { color: var(--c-pink); } .entry { max-width: 820px; margin-inline:auto; } .entry h1 { font-size: clamp(1.5rem,3.5vw,2.2rem); font-weight:900; line-height:1.3; margin-bottom:1rem; } .entry h3 { font-size:1.3rem; font-weight:800; margin:2rem 0 1rem; } .entry h4 { font-size:1.05rem; font-weight:700; margin:2rem 0 .8rem; padding-left:.8rem; border-left:3px solid var(--c-pink); box-shadow: -1px 0 0 0 var(--c-pink); } .entry p { margin-bottom:1rem; color: var(--c-text-dim); } .entry img { border-radius: var(--radius-s); border:1px solid var(--c-line); margin-block:1rem; } .entry ul { display:flex; flex-direction:column; gap:.5rem; margin-block:1rem; } .entry ul li { padding:.6rem .9rem; background: var(--c-surface); border:1px solid var(--c-line-soft); border-radius: var(--radius-s); color: var(--c-text-dim); } .entry ul li strong { color: var(--c-text); } .wp-block-separator { border:0; height:1px; background: linear-gradient(90deg, transparent, var(--c-line), transparent); margin-block:2rem; } .wp-block-button__link, a.wp-element-button { display:inline-flex; align-items:center; gap:.5rem; background: var(--grad-pink)!important; color:#fff!important; padding:1rem 1.8rem; border-radius:99px; font-weight:700; box-shadow: var(--glow-pink); transition: transform .25s var(--ease), filter .25s; } .wp-block-button__link:hover { transform: translateY(-3px); filter: brightness(1.1); } /* ============================ USABILITY PARTS ============================ */ /* skip link (a11y) */ .skip-link { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); z-index: 1000; background: var(--c-pink); color:#fff; padding:.6rem 1.2rem; border-radius:0 0 10px 10px; font-weight:700; transition: top .25s var(--ease); } .skip-link:focus { top: 0; } /* header search button */ .nav__search { width:42px; height:42px; border-radius:10px; border:1px solid var(--c-line); display:grid; place-items:center; color: var(--c-text-dim); transition:.25s var(--ease); } .nav__search:hover { color: var(--c-pink); border-color: var(--c-pink); } /* search overlay panel */ .search-panel { position: fixed; inset: 0; z-index: 80; background: rgba(5,5,9,.92); backdrop-filter: blur(16px); display:grid; place-items:start center; padding: clamp(4rem,12vh,9rem) 1.2rem; } .search-panel[hidden]{ display:none; } .search-panel__box { width:100%; max-width: 640px; } .search-panel__form { display:flex; gap:.6rem; } .search-panel input[type=search]{ flex:1; background: var(--c-surface); border:1px solid var(--c-line); border-radius:99px; padding:1rem 1.4rem; color: var(--c-text); font-size:1.05rem; } .search-panel input[type=search]:focus { border-color: var(--c-pink); outline:none; box-shadow: var(--glow-pink); } .search-panel__hint { color: var(--c-text-mute); font-size:.82rem; margin-top:1rem; text-align:center; } .search-panel__pop { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; justify-content:center; } /* filter + sort toolbar */ .toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; } .toolbar__filters { display:flex; gap:.5rem; flex-wrap:wrap; } .filter-chip { font-size:.84rem; padding:.45rem .95rem; border-radius:99px; border:1px solid var(--c-line); background: rgba(20,18,30,.6); color: var(--c-text-dim); transition:.2s var(--ease); } .filter-chip[aria-pressed="true"]{ background: var(--grad-pink); border-color:transparent; color:#fff; box-shadow: var(--glow-pink); } .filter-chip:hover { color: var(--c-text); border-color: var(--c-pink); } .sortbox { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color: var(--c-text-mute); } .sortbox select { background: var(--c-surface); border:1px solid var(--c-line); color: var(--c-text); border-radius:10px; padding:.5rem .8rem; font:inherit; cursor:pointer; } .sortbox select:focus { border-color: var(--c-pink); outline:none; } [data-empty] { text-align:center; color: var(--c-text-mute); padding: 3rem 1rem; font-family: var(--f-round); } /* back to top */ .to-top { position: fixed; right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 70; width:48px; height:48px; border-radius:50%; background: var(--grad-pink); color:#fff; display:grid; place-items:center; box-shadow: var(--glow-pink); opacity:0; transform: translateY(16px) scale(.8); pointer-events:none; transition:.3s var(--ease); font-size:1.2rem; } .to-top.show { opacity:1; transform:none; pointer-events:auto; } .to-top:hover { filter: brightness(1.12); transform: translateY(-3px); } /* ============================ ANIMATIONS ============================ */ @keyframes eq { 0%,100%{ height:18%; } 50%{ height:100%; } } @keyframes pulse { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.6); opacity:.4; } } @keyframes marquee { from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @keyframes floatHeart { to { transform: translateY(-120px) rotate(20deg); opacity:0; } } /* reveal on scroll */ .reveal { opacity:0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity:1; transform:none; } /* floating hearts (cursor) */ .heart-fx { position: fixed; z-index: 998; pointer-events:none; color: var(--c-pink); font-family: var(--f-round); animation: floatHeart 1.1s ease-out forwards; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } html{ scroll-behavior:auto; } } /* ============================ RESPONSIVE NAV ============================ */ @media (max-width: 820px){ .nav__menu { position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap:0; background: rgba(7,7,11,.97); border-bottom:1px solid var(--c-line); padding: 1rem var(--gut) 1.6rem; transform: translateY(-120%); transition: transform .4s var(--ease); margin-left:0; } .nav__menu.is-open { transform: translateY(0); } .nav__menu a { padding-block: .9rem; border-bottom:1px solid var(--c-line-soft); } .nav__cta { display:none; } .nav__burger { display:flex; } .nav { gap: .75rem; } .nav__menu { margin-left: auto; } /* keep burger/search right-aligned */ } /* ranking grid: 2-up desktop, 1-up mobile */ .rank-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.6rem; } @media (max-width: 760px){ .rank-grid { grid-template-columns: 1fr; gap: .8rem; } .rank { gap: .6rem; } .rank__item { gap: .7rem; padding: .65rem .7rem; } .rank__no { font-size: 1.7rem; width: 1.7ch; } .rank__thumb { width: 52px; height: 52px; } .rank__info { min-width: 0; } /* let the title wrap to 2 lines instead of a single truncated line */ .rank__info .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .86rem; line-height: 1.35; } .rank__info .c { font-size: .72rem; } .rank__rate { font-size: .82rem; align-self: flex-start; } } /* =================================================================== MOBILE-FIRST REFINEMENTS (≈70% of traffic is smartphone) =================================================================== */ @media (max-width: 760px){ /* product grid stays 2-up on phones (store-like density) */ .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); gap: .75rem; } /* tighter cards, but keep titles readable */ .card__body { padding: .7rem .7rem .85rem; gap: .4rem; } .card__title { font-size: .9rem; -webkit-line-clamp: 3; } .card__circle { font-size: .68rem; } .card__meta { padding-top: .4rem; } .card__price { font-size: .9rem; } .card__rate { font-size: .68rem; } .card__taglist span { font-size: .6rem; } /* show the tease overlay tap-hint without hover on touch */ .card__media .tease-overlay { opacity: 1; transform: none; font-size: .78rem; padding: .6rem .6rem .5rem; } /* hero */ .hero { padding-block: 3.2rem 2.4rem; } .hero__title { font-size: clamp(2.2rem, 11vw, 3.4rem); } .hero__sub { font-size: 1rem; } .hero__stats { gap: 1.2rem; margin-top: 2rem; } .hero__actions .btn { flex: 1; justify-content: center; } /* filter toolbar -> horizontal scroll (no wrap, no layout break) */ .toolbar { flex-direction: column; align-items: stretch; gap: .8rem; } .toolbar__filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .35rem; scrollbar-width: none; } .toolbar__filters::-webkit-scrollbar { display: none; } .filter-chip { white-space: nowrap; flex: none; padding: .6rem 1rem; } /* bigger tap target */ .sortbox { justify-content: space-between; } .sortbox select { flex: 1; padding: .65rem .8rem; } /* genre chips: comfortable tap size */ .chip { padding: .6rem 1rem; } .chip--lg { padding: .65rem 1.1rem; font-size: .9rem; } /* section heading: stack "more" link */ .s-head { align-items: flex-start; } /* search panel: stack input + button */ .search-panel { padding-top: 5rem; } .search-panel__form { flex-direction: column; } .search-panel input[type=search] { font-size: 16px; } /* prevent iOS zoom */ /* buttons: full-width, thumb-friendly */ .btn { padding: .95rem 1.4rem; } /* feature media first, copy below already handled by grid stack */ .footer__bottom { flex-direction: column; align-items: flex-start; gap: .4rem; } /* back-to-top sits above any future sticky bars */ .to-top { width: 44px; height: 44px; } } /* very small phones */ @media (max-width: 380px){ .grid--4, .grid--3 { gap: .6rem; } .brand { font-size: 1.02rem; } .brand span { display:none; } /* hide subtitle if any */ } /* tablets: 3-up product grid */ @media (min-width: 761px) and (max-width: 1024px){ .grid--4 { grid-template-columns: repeat(3, 1fr); } } /* respect notches / safe areas */ @supports (padding: max(0px)) { .wrap { padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); } .to-top { bottom: max(clamp(1rem,3vw,2rem), env(safe-area-inset-bottom)); } }