/* * MyKoreaPalette — K-Beauty rebuild tokens * Auto-extracted from design_preview.html on rebuild prep. * Paste into: WordPress > Appearance > Customize > Additional CSS * * External fonts/CSS to add via WordPress (use a Code Snippets plugin * or theme's Custom HTML hook), do NOT @import here (slow): */ /* Local @font-face blocks removed 2026-05-13 — replaced by Google Fonts above. BodoniModa → 'Bodoni Moda' (Google Fonts) BookkMyungjo → 'Nanum Myeongjo' (Google Fonts, Korean serif) MBKCorpoA → 'Inter' fallback (Google Fonts) This ensures Elementor/WordPress production compatibility. */ * { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; } :root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --t-eyebrow: 10px; --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 22px; --t-xl: 28px; --t-2xl: 36px; --t-display: clamp(48px, 10.4vw, 148px); --tr-tight: -0.045em; --tr-snug: -0.01em; --tr-wide: 0.18em; --tr-wider: 0.22em; --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 9999px; --bg: #000; --fg: #fff; --fg-mute: rgba(255,255,255,0.62); --fg-subtle: rgba(255,255,255,0.42); --glass: rgba(255,255,255,0.05); --glass-strong: rgba(255,255,255,0.08); --border: rgba(255,255,255,0.38); --frame-pad-x: var(--s-16); } html, body { background-color: var(--bg); min-height: 100vh; font-family: 'Inter', sans-serif; color: var(--fg); -webkit-font-smoothing: antialiased; } html { scroll-behavior: smooth; } body { background-color: #F8F0E5; background-image: url('sky-bg.png'); background-size: cover; background-position: center top; background-attachment: fixed; background-repeat: no-repeat; } .outer { width: 100%; padding: 0; min-height: 100vh; } .frame { position: relative; background: transparent; min-height: 100vh; overflow: hidden; } /* Tab page wrapper ??full bleed dark background */ .tab-page-frame { position: relative; background: var(--bg); overflow: hidden; } .liquid-glass { background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .glass { background: rgba(255,255,255,0.04); background-blend-mode: luminosity; border: 1px solid rgba(255,255,255,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 12px rgba(255,255,255,0.06); position: relative; overflow: hidden; } /* Remove borders from avatar circles */ .glass div[style*="border:2px solid"] { border: none !important; } /* Hide decorative UI elements */ .glass::before { display: none; } /* Hide btn-pill borders that are just decorative shells */ .btn-pill { border-color: rgba(255,255,255,0.25) !important; } /* Remove outer container borders from section wrappers */ .outer > section, .outer > div { border: none !important; box-shadow: none !important; } .glass-strong { background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border: none; box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15); position: relative; overflow: hidden; } .glass-strong::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.5) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .liquid-glass-strong { background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border: none; box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15); position: relative; overflow: hidden; } .liquid-glass-strong::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.5) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .eyebrow { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-wider); color: var(--fg-mute); text-transform: uppercase; } .muted { color: var(--fg-mute); } .subtle { color: var(--fg-subtle); } .btn-pill { border: 1px solid rgba(255,255,255,0.55); border-radius: var(--r-pill); padding: var(--s-3) var(--s-8); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-wider); background: transparent; color: var(--fg); cursor: pointer; transition: background 0.18s; } .btn-pill:hover { background: rgba(255,255,255,0.06); } .page-pill { width: 36px; height: 42px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-size: var(--t-xs); font-weight: 700; text-decoration: none; transition: transform 0.15s, opacity 0.15s; } .page-pill:hover { transform: scale(1.08); } .page-pill.active { background: var(--fg); color: var(--bg); } .page-pill.inactive { border: 1px solid rgba(255,255,255,0.4); color: var(--fg); } .title-display { font-family: 'Playfair Display', serif; font-size: var(--t-display); font-weight: 700; letter-spacing: var(--tr-tight); line-height: 0.94; white-space: nowrap; text-shadow: 0 0 15px rgba(255,255,255,0.12), 0 0 30px rgba(255,255,255,0.06); } .row-card { transition: background 0.2s; } .row-card:hover { background: var(--glass-strong); } /* ?�?�?�?�?�?� DECK CAROUSEL (overlapping stacked cards) ?�?�?�?�?�?� */ .deck-wrap { position: relative; } .deck { display: flex; position: relative; isolation: isolate; height: 156px; transition: opacity 0.18s ease; } .deck-card { --rot: 0deg; position: relative; width: 180px; height: 156px; border-radius: 28px; overflow: hidden; flex-shrink: 0; margin-left: -56px; box-shadow: -8px 0 24px rgba(255,255,255,0.18), 0 4px 16px rgba(255,255,255,0.12); cursor: pointer; transform: rotate(var(--rot)); transform-origin: 50% 60%; /* Spring-like easing (mimics framer-motion spring stiffness:300 damping:20) */ transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .deck-card:first-child { margin-left: 0; box-shadow: 0 4px 16px rgba(255,255,255,0.12); } .deck-card:nth-child(1) { z-index: 6; --rot: -2.5deg; } .deck-card:nth-child(2) { z-index: 5; --rot: 1.5deg; } .deck-card:nth-child(3) { z-index: 4; --rot: -1deg; } .deck-card:nth-child(4) { z-index: 3; --rot: 2.2deg; } .deck-card:nth-child(5) { z-index: 2; --rot: -1.8deg; } .deck-card:nth-child(6) { z-index: 1; --rot: 0.8deg; } .deck-card:hover { transform: rotate(var(--rot)) translateY(-8px); box-shadow: -8px 8px 32px rgba(255,255,255,0.22), 0 8px 24px rgba(255,255,255,0.14); } .deck-img { position: absolute; inset: 0; overflow: hidden; } .deck-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0) 70%); z-index: 1; } .deck-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease-out; } .deck-card:hover .deck-img img { transform: scale(1.1); } .deck-text { position: absolute; top: var(--s-3); left: var(--s-4); right: var(--s-4); z-index: 2; } .deck-title { font-size: var(--t-sm); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .deck-sub { font-size: var(--t-eyebrow); color: rgba(255,255,255,0.78); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .deck-arrow { position: absolute; right: var(--s-3); top: 50%; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; z-index: 2; transform: translateY(-50%) rotate(0deg); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, border-color 0.25s ease; } .deck-card:hover .deck-arrow { transform: translateY(-50%) rotate(-45deg); background: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.65); } /* Scroll chevron buttons (fade in on deck hover) */ .deck-scroll { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); color: white; display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; cursor: pointer; transition: opacity 0.3s ease, background 0.2s ease, transform 0.2s ease; } .deck-wrap:hover .deck-scroll { opacity: 1; } .deck-scroll:hover { background: rgba(0,0,0,0.78); } .deck-scroll:active { transform: translateY(-50%) scale(0.92); } .deck-scroll-left { left: -10px; } .deck-scroll-right { right: -10px; } /* ?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═ SCROLL SECTIONS (below hero) ?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═ */ .section { padding: 60px var(--frame-pad-x); position: relative; border: none !important; clip-path: none !important; } .section-divider { height: 1px; background: rgba(255,255,255,0.38); margin: 0 var(--frame-pad-x); box-shadow: 0 0 6px rgba(255,255,255,0.2); } .section-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--tr-wider); color: var(--fg-mute); text-transform: uppercase; } .section-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--fg-mute); display: inline-block; } .section-title { font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: var(--tr-tight); line-height: 1.0; margin-top: var(--s-4); } .section-lead { font-size: var(--t-md); color: var(--fg-mute); line-height: 1.55; max-width: 560px; margin-top: var(--s-5); } .section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-8); flex-wrap: wrap; } /* Two-column split */ .split-2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-12); align-items: center; border: none !important; } /* Language pills (curator section) */ .lang-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-8); } .lang-pill { padding: 6px var(--s-4); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; color: var(--fg); background: rgba(255,255,255,0.02); } /* Curator portrait frame */ .curator-frame { aspect-ratio: 1 / 1; border-radius: var(--r-xl); overflow: hidden; position: relative; background: var(--glass); } .curator-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .curator-tag { position: absolute; bottom: var(--s-5); left: var(--s-5); display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); background: rgba(0,0,0,0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.18); } .curator-dot { width: 8px; height: 8px; border-radius: 50%; background: #6BFF8E; box-shadow: 0 0 8px #6BFF8E; } /* Product grid (K-Beauty) */ .product-carousel-wrap { overflow: hidden; position: relative; margin-top: var(--s-6); } .product-grid { display: flex; gap: var(--s-5); transition: transform 0.42s cubic-bezier(0.22,1,0.36,1); will-change: transform; } .product-card { flex-shrink: 0; /* width computed by JS carousel init */ } .product-card { position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; transition: transform 0.25s ease; } .product-card:hover { transform: translateY(-4px); } .product-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: rgba(255,255,255,0.03); position: relative; } .product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease-out; } .product-card:hover .product-card-img img { transform: scale(1.06); } .product-tag { position: absolute; top: var(--s-3); left: var(--s-3); padding: 4px var(--s-2); background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); border-radius: var(--r-pill); font-size: 9px; font-weight: 700; letter-spacing: var(--tr-wider); } .product-fav { position: absolute; top: var(--s-3); right: var(--s-3); width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,0.45); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; } .product-card-body { padding: var(--s-4) var(--s-3) var(--s-4); border: 1px solid rgba(255,255,255,0.28); border-top: none; border-radius: 0 0 var(--r-lg) var(--r-lg); } .product-card-brand { font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--tr-wider); color: var(--fg-mute); text-transform: uppercase; } .product-card-name { font-size: var(--t-base); font-weight: 600; margin-top: var(--s-1); line-height: 1.3; } .product-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-3); font-size: var(--t-xs); color: var(--fg-mute); } /* Service preview bars (TWS / NCT WISH) */ .service-stack { display: flex; flex-direction: column; gap: var(--s-4); } .service-bar { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-5); align-items: center; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--glass); border: 1px solid rgba(255,255,255,0.55); } .service-bar-thumb { width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; } .service-bar-thumb img { width: 100%; height: 100%; object-fit: cover; } .service-bar-title { font-size: var(--t-base); font-weight: 700; } .service-bar-meta { margin-top: 2px; font-size: var(--t-xs); color: var(--fg-mute); } .service-bar-cta { font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--tr-wider); color: var(--fg); padding: var(--s-2) var(--s-4); border: 1px solid rgba(255,255,255,0.4); border-radius: var(--r-pill); text-transform: uppercase; cursor: pointer; background: transparent; } /* Stats row */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); margin-top: var(--s-12); padding-top: var(--s-8); border-top: none; } .stat-num { font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; letter-spacing: var(--tr-tight); line-height: 1; } .stat-label { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-wider); color: var(--fg-mute); text-transform: uppercase; margin-top: var(--s-3); } /* Patreon testimonials */ .testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-12); } .testi-card { border-radius: var(--r-lg); background: var(--glass); padding: var(--s-8); border: 1px solid rgba(255,255,255,0.55); position: relative; display: flex; flex-direction: column; } .testi-quote-mark { display: none; } .testi-text { font-size: var(--t-md); line-height: 1.45; letter-spacing: var(--tr-snug); font-weight: 400; flex: 1; } .testi-meta { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--border); } .testi-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; } .testi-name { font-size: var(--t-sm); font-weight: 700; } .testi-handle { font-size: var(--t-xs); color: var(--fg-mute); margin-top: 1px; } .testi-tier { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: var(--tr-wider); color: var(--fg-mute); padding: 4px var(--s-2); border: 1px solid var(--border); border-radius: var(--r-pill); text-transform: uppercase; } .testi-rating { display: flex; gap: 2px; margin-bottom: var(--s-4); color: #FFD56B; } /* Latest posts */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-20); } .post-card { cursor: pointer; } .post-card-img { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; } .post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .post-card:hover .post-card-img img { transform: scale(1.04); } .post-card-cat { display: inline-block; margin-top: var(--s-5); font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--tr-wider); color: var(--fg-mute); text-transform: uppercase; } .post-card-title { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--tr-snug); margin-top: var(--s-2); line-height: 1.2; } .post-card-meta { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--t-xs); color: var(--fg-subtle); } .post-card-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-subtle); } /* Newsletter */ .newsletter-card { margin: var(--s-16) var(--frame-pad-x); padding: var(--s-20) var(--s-12); text-align: center; border-radius: var(--r-xl); background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 70%), rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.55) !important; } .newsletter-title { font-size: clamp(40px, 5.5vw, 80px); font-weight: 800; letter-spacing: var(--tr-tight); line-height: 0.98; margin-top: var(--s-6); } .newsletter-lead { font-size: var(--t-md); color: var(--fg-mute); max-width: 540px; margin: var(--s-6) auto var(--s-10); line-height: 1.55; } .newsletter-form { display: flex; max-width: 480px; margin: 0 auto; gap: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px; background: rgba(255,255,255,0.02); } .newsletter-input { flex: 1; background: transparent; border: none; color: var(--fg); padding: 0 var(--s-5); font-size: var(--t-sm); font-family: inherit; outline: none; } .newsletter-input::placeholder { color: var(--fg-subtle); } .newsletter-submit { padding: var(--s-3) var(--s-6); border-radius: var(--r-pill); background: var(--fg); color: var(--bg); border: none; font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; cursor: pointer; } .newsletter-meta { margin-top: var(--s-5); font-size: var(--t-xs); color: var(--fg-subtle); letter-spacing: 0.04em; } /* Footer */ .site-footer { padding: var(--s-12) var(--frame-pad-x) var(--s-8); border-top: 1px solid var(--border); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-12); } .footer-brand-mark { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); border: none !important; background: none !important; } .footer-brand-mark svg { display: block; } .footer-brand-name { font-size: var(--t-md); font-weight: 700; letter-spacing: 0.04em; } .footer-brand-tag { font-size: var(--t-sm); color: var(--fg-mute); line-height: 1.55; max-width: 320px; border: none !important; border-radius: 0 !important; background: none !important; } .footer-col h4 { font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--tr-wider); color: var(--fg-mute); text-transform: uppercase; margin-bottom: var(--s-4); } .footer-col a { display: block; color: var(--fg); font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s-3); transition: opacity 0.18s; } .footer-col a:hover { opacity: 0.6; } .footer-bottom { padding: var(--s-5) var(--frame-pad-x) var(--s-6); border-top: 1px solid var(--border); display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--fg-subtle); letter-spacing: 0.04em; } .footer-bottom::before { display: none !important; } /* ══ PAGE ROUTING (single-file multi-page) ══ */ .page-nct-wish, .page-tws, .page-kbeauty, .page-contact { display: none; } body.route-nct-wish .page-home { display: none; } body.route-nct-wish .page-nct-wish { display: block; } body.route-tws .page-home { display: none; } body.route-tws .page-tws { display: block; } body.route-kbeauty .page-home { display: none; } body.route-kbeauty .page-kbeauty { display: block; } body.route-contact .page-home { display: none; } body.route-contact .page-contact { display: block; } body.route-kbeauty .site-footer, body.route-kbeauty .footer-bottom { background: #170B06 !important; } /* Top nav (.site-top-nav) and footer have no page class ??always visible */ /* ?�?�?�?�?�?� TAB PAGE ??HERO ?�?�?�?�?�?� */ .tab-hero { position: relative; padding: var(--s-20) var(--frame-pad-x) var(--s-16); overflow: hidden; } .tab-hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at top right, rgba(157,78,221,0.12) 0%, transparent 60%), radial-gradient(ellipse at bottom left, rgba(255,107,157,0.08) 0%, transparent 60%); } .tab-hero-content { max-width: 880px; } .tab-hero-content .eyebrow { margin-bottom: var(--s-6); } .tab-hero-title { font-size: clamp(64px, 12vw, 156px); font-weight: 900; letter-spacing: var(--tr-tight); line-height: 0.92; margin-bottom: var(--s-6); } .tab-hero-hook { font-size: var(--t-base); font-weight: 500; line-height: 1.5; color: var(--fg-mute); max-width: 900px; } .tab-hero-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid var(--border); } .tab-hero-meta > div { display: flex; flex-direction: column; gap: var(--s-1); } .tab-hero-meta span { font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--tr-wider); color: var(--fg-subtle); text-transform: uppercase; } .tab-hero-meta strong { font-size: var(--t-sm); font-weight: 600; color: var(--fg); } /* ?�?�?�?�?�?� TAB PAGE ??MV / SELF-CONTENT ?�?�?�?�?�?� */ .tab-mv { padding: var(--s-12) var(--frame-pad-x); } .tab-mv .section-eyebrow { margin-bottom: var(--s-5); } .mv-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--glass); box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .mv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mv-caption { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--fg-mute); } /* ?�?�?�?�?�?� TAB PAGE ??MEMBERS ?�?�?�?�?�?� */ .tab-members { padding: var(--s-12) var(--frame-pad-x); } .tab-members .section-head-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-12); align-items: end; margin-bottom: var(--s-10); } .member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } .member-card { --member-color: #9D4EDD; position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; isolation: isolate; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .member-card:hover { transform: translateY(-4px); } .member-card-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, var(--member-color) 0%, color-mix(in srgb, var(--member-color) 60%, #000) 35%, #000 75% ); transition: background 0.3s; } .member-card:hover .member-card-bg { background: linear-gradient( 180deg, var(--member-color) 0%, color-mix(in srgb, var(--member-color) 75%, #000) 50%, #000 90% ); } .member-card-initial { position: absolute; top: var(--s-5); left: var(--s-5); font-size: 64px; font-weight: 800; letter-spacing: -0.04em; color: rgba(255,255,255,0.92); mix-blend-mode: overlay; line-height: 1; } .member-card-body { position: absolute; bottom: var(--s-5); left: var(--s-5); right: var(--s-5); } .member-name { font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.01em; color: #fff; } .member-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-xs); color: rgba(255,255,255,0.7); margin-top: var(--s-1); } .member-position { font-weight: 500; } .member-flag { font-size: var(--t-sm); } .member-note { font-size: var(--t-xs); color: rgba(255,255,255,0.62); line-height: 1.5; margin-top: var(--s-3); font-style: italic; } /* ?�?�?�?�?�?� TAB PAGE ??NEW FAN GUIDE ?�?�?�?�?�?� */ .new-fan-guide { padding: var(--s-12) var(--frame-pad-x); } .guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); margin-top: var(--s-8); } .guide-card { border-radius: var(--r-lg); overflow: hidden; background: var(--glass); border: 1px solid var(--border); transition: transform 0.2s, background 0.2s; } .guide-card:hover { transform: translateY(-3px); background: var(--glass-strong); } .guide-thumb { aspect-ratio: 16 / 9; background: var(--glass-strong); position: relative; display: flex; align-items: center; justify-content: center; } .guide-thumb svg { width: 36px; height: 36px; opacity: 0.55; } .guide-body { padding: var(--s-5); } .guide-title { font-size: var(--t-base); font-weight: 700; line-height: 1.3; } .guide-hook { font-size: var(--t-xs); color: var(--fg-mute); line-height: 1.55; margin-top: var(--s-2); } /* ?�?�?�?�?�?� TAB PAGE ??WEDGE SECTIONS ?�?�?�?�?�?� */ .tab-wedge { padding: var(--s-16) var(--frame-pad-x); background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 50%, transparent 100%); } .wedge-bilingual .section-title, .wedge-wordplay .section-title { margin-top: var(--s-3); } .bilingual-examples { margin-top: var(--s-10); display: grid; gap: var(--s-5); } .bilingual-example { padding: var(--s-6); border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--border); position: relative; } .ex-tag { position: absolute; top: var(--s-4); right: var(--s-5); font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: var(--tr-wider); color: var(--fg-subtle); } .ex-jp { font-size: var(--t-base); color: #fff; line-height: 1.5; } .ex-kr { font-size: var(--t-sm); color: var(--fg-mute); line-height: 1.55; margin-top: var(--s-3); } .ex-note { font-size: var(--t-xs); color: var(--fg-subtle); margin-top: var(--s-4); font-style: italic; } .wordplay-list { list-style: none; margin-top: var(--s-10); display: grid; gap: var(--s-3); } .wordplay-list li { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--border); display: grid; grid-template-columns: 200px 1fr; gap: var(--s-6); align-items: start; } .wp-track { font-size: var(--t-sm); font-weight: 700; color: #fff; letter-spacing: -0.01em; } .wp-hook { font-size: var(--t-sm); color: var(--fg-mute); line-height: 1.55; } /* ?�?�?�?�?�?� TAB PAGE ??DIARY POSTS (re-uses post-card) ?�?�?�?�?�?� */ .tab-diary { padding: var(--s-12) var(--frame-pad-x); } .tab-diary .post-grid { grid-template-columns: repeat(2, 1fr); } /* ?�?�?�?�?�?� TAB PAGE ??PATREON CTA ?�?�?�?�?�?� */ .tab-patreon-cta { padding: var(--s-16) var(--frame-pad-x); text-align: center; background: radial-gradient(ellipse at center, rgba(255,107,157,0.08) 0%, transparent 70%); } .tab-patreon-cta .section-title { margin-top: var(--s-4); font-size: var(--t-2xl); } .tab-patreon-cta .section-lead { margin: var(--s-5) auto 0; max-width: 640px; text-align: center; } .btn-pill-large { display: inline-block; margin-top: var(--s-8); padding: var(--s-5) var(--s-10); font-size: var(--t-sm); } /* Medium screens: bottom panel stacks vertically so deck has full width */ @media (max-width: 1100px) { .frame [style*="grid-template-columns:300px 1fr"] { grid-template-columns: 1fr !important; gap: var(--s-8) !important; } } /* ?�?�?�?�?�?� MOBILE ??Glass blur reduction + layout collapse ?�?�?�?�?�?� */ @media (max-width: 768px) { /* GPU 부??감소 */ .glass-strong { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .glass { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Frame padding 축소 */ :root { --frame-pad-x: var(--s-5); } .outer { padding: 0; } /* Display title clamp */ .title-display { font-size: clamp(40px, 14vw, 72px); white-space: normal; line-height: 1.0; } /* Hero deck carousel ??가�??�크롤로 변�? ?�전 ?�거 */ .deck { overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; height: auto; padding-bottom: var(--s-4); } .deck-card { scroll-snap-align: start; margin-left: var(--s-3) !important; transform: rotate(0) !important; } .deck-card:first-child { margin-left: 0 !important; } .deck-scroll { display: none; } /* Pagination rail / Social rail ???�치 ?�적??*/ .frame [style*="position:absolute"][style*="right:var(--frame-pad-x)"] { position: static !important; transform: none !important; flex-direction: row !important; justify-content: center; margin: var(--s-4) auto !important; } /* Hero panel grid ??1??*/ .frame [style*="grid-template-columns:300px 1fr"] { grid-template-columns: 1fr !important; gap: var(--s-6) !important; } /* Section padding 축소 */ .section { padding: var(--s-12) var(--frame-pad-x); } .section-title { font-size: var(--t-xl); } /* Section head row ??1??stack */ .section-head-row { grid-template-columns: 1fr !important; gap: var(--s-5) !important; } .split-2 { grid-template-columns: 1fr !important; gap: var(--s-8) !important; } /* Footer grid ??1??*/ .site-footer { grid-template-columns: 1fr !important; gap: var(--s-8); padding: var(--s-10) var(--frame-pad-x) var(--s-6); } .footer-bottom { flex-direction: column; gap: var(--s-2); align-items: flex-start; } /* TAB PAGE ??Hero adjustments */ .tab-hero { padding: var(--s-12) var(--frame-pad-x) var(--s-10); } .tab-hero-title { font-size: clamp(56px, 16vw, 96px); } .tab-hero-meta { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } /* TAB PAGE ??Member grid ??2??*/ .member-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } .member-card-initial { font-size: 48px; } /* TAB PAGE ??Guide grid ??1??*/ .guide-grid { grid-template-columns: 1fr; } /* TAB PAGE ??Wordplay list ??1??*/ .wordplay-list li { grid-template-columns: 1fr; gap: var(--s-2); } /* TAB PAGE ??Tab diary 1??*/ .tab-diary .post-grid { grid-template-columns: 1fr; } /* Patreon CTA 글??축소 */ .tab-patreon-cta .section-title { font-size: var(--t-xl); } .tab-patreon-cta .section-title br { display: none; } } @media (max-width: 480px) { .member-grid { grid-template-columns: 1fr; } /* product carousel: card width handled by JS */ .post-grid { grid-template-columns: 1fr !important; } .testi-grid { grid-template-columns: 1fr !important; } .stats-row { grid-template-columns: 1fr !important; gap: var(--s-6); } .lang-pills { flex-wrap: wrap; } .tab-hero-meta { grid-template-columns: 1fr; } } /* ── HERO ── */ .site-hero { position: relative; width: 100%; aspect-ratio: 21 / 10.5; overflow: hidden; container-type: inline-size; background-color: #accbeb; } .frame.page-home { min-height: unset; } .main-title { font-family: 'Bodoni Moda', serif; font-size: 11cqi; font-weight: normal; text-transform: none; font-variant: normal; color: #FDF5ED; letter-spacing: -0.05em; line-height: 1; opacity: 0.95; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25)); white-space: nowrap; } .tag-group { position: absolute; top: 52%; left: 2%; display: flex; flex-direction: column; gap: 12px; z-index: 30; } .tag-row { display: flex; gap: 12px; } .tag { background-color: #FDF5ED; color: #111; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; padding: 10px 24px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.02em; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } .tag.presentation { padding: 10px 32px; } .bottom-section { position: absolute; bottom: 0; left: 0; width: 100%; height: 90px; border-top: 1px solid rgba(255,255,255,0.4); display: grid; grid-template-columns: 1fr auto 1fr; } .bottom-section::before, .bottom-section::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background-color: rgba(255,255,255,0.4); } .bottom-section::before { left: 36%; } .bottom-section::after { right: 36%; } .info-text-box { padding: 14px 20px; display: flex; align-items: center; } .info-text-box.left { grid-column: 1 / 2; justify-content: flex-start; } .info-text-box.right { grid-column: 3 / 4; justify-content: flex-end; text-align: right; } .info-text-box p { font-family: 'Inter', sans-serif; font-size: 11px; color: #FFFFFF; line-height: 1.5; letter-spacing: 0.02em; opacity: 0.8; max-width: 450px; } :root { --cream: oklch(96.5% 0.01 85); --cream-mute: oklch(91% 0.012 80); --cream-subtle: oklch(86% 0.01 80); } .frame.page-home { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════ EDITORIAL LIGHT GLASSMORPHISM · "Petal & Sky" Warm cream glass floating over fixed sky background ══════════════════════════════════════════════════════════════════ */ /* Re-scope CSS vars for light home sections */ .section.page-home, .newsletter-card.page-home { --fg: #2C1810; --fg-mute: #72503F; --fg-subtle: #A8806A; --glass: rgba(255,255,255,0.38); --glass-strong: rgba(255,255,255,0.55); --border: rgba(200,175,155,0.35); color: #2C1810; } /* Generous editorial padding */ .section.page-home { padding: 92px var(--frame-pad-x) 84px; } /* ─── Gradient separator lines ─── */ .section-divider.page-home { height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(212,96,122,0.3) 20%, rgba(181,121,74,0.4) 50%, rgba(94,150,196,0.3) 80%, transparent 100%); box-shadow: none; } /* ─── Eyebrow labels ─── */ .section.page-home .section-eyebrow { color: #D4607A; font-size: 9.5px; letter-spacing: 0.3em; } .section.page-home .section-eyebrow::before { background: #D4607A; width: 22px; } /* ─── Section titles ─── */ .section.page-home .section-title { font-family: 'Cormorant Garamond', 'Nanum Myeongjo', serif; font-size: clamp(40px, 4.8vw, 74px); font-weight: 600; color: #2C1810; letter-spacing: -0.025em; line-height: 1.06; margin-top: var(--s-5); } /* ─── Section lead ─── */ .section.page-home .section-lead { color: #72503F; line-height: 1.8; font-size: 15px; } /* ─── Language pills ─── */ .section.page-home .lang-pill { background: rgba(255,255,255,0.52); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.72); color: #72503F; box-shadow: 0 2px 8px rgba(60,30,20,0.05); padding: 7px 18px; font-size: 10px; letter-spacing: 0.1em; transition: all 0.22s ease; } .section.page-home .lang-pill:hover { background: rgba(212,96,122,0.12); border-color: rgba(212,96,122,0.45); transform: translateY(-2px); color: #D4607A; } /* ─── Curator frame ─── */ .section.page-home .curator-frame { box-shadow: 0 24px 64px rgba(44,24,16,0.13), 0 6px 20px rgba(44,24,16,0.07), inset 0 1px 0 rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.65); border-radius: 24px; } .section.page-home .curator-tag { background: rgba(255,255,255,0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.78); color: #2C1810; } .section.page-home .curator-dot { background: #F29BB2; box-shadow: 0 0 8px rgba(242,155,178,0.7); } /* ─── Product cards — warm cream glass ─── */ .product-card { border-radius: 20px; background: rgba(255,255,255,0.52); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 6px 28px rgba(60,30,20,0.06), inset 0 1px 0 rgba(255,255,255,0.95); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; } .product-card:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 24px 52px rgba(60,30,20,0.11), inset 0 1px 0 rgba(255,255,255,0.95); } .product-card-body { border: none; border-radius: 0 0 20px 20px; background: rgba(255,255,255,0.22); padding: var(--s-4) var(--s-4) var(--s-5); } .product-card-brand { color: #B5794A; font-size: 9px; letter-spacing: 0.22em; } .product-card-name { color: #2C1810; font-size: 14px; } .product-card-meta { color: #A8806A; font-size: 11px; } .product-card-meta span:last-child { color: #2C1810; font-weight: 700; font-size: 17px; font-family: 'Cormorant Garamond', serif; } .product-tag { background: rgba(248,240,229,0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #2C1810; font-size: 8px; letter-spacing: 0.14em; } .product-fav { background: rgba(255,255,255,0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255,255,255,0.78); } .product-fav svg { stroke: #72503F; } /* ─── Service bars ─── */ .service-bar { background: rgba(255,255,255,0.46); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 4px 20px rgba(60,30,20,0.05), inset 0 1px 0 rgba(255,255,255,0.75); border-radius: 16px; transition: transform 0.25s ease, box-shadow 0.25s ease; } .service-bar:hover { transform: translateX(6px); box-shadow: 0 8px 32px rgba(60,30,20,0.08), inset 0 1px 0 rgba(255,255,255,0.75); } .service-bar-title { color: #2C1810; } .service-bar-meta { color: #72503F; } .service-bar-cta { color: #D4607A; border-color: rgba(212,96,122,0.38); font-size: 9px; padding: 6px 16px; background: transparent; transition: background 0.2s, border-color 0.2s; } .service-bar-cta:hover { background: rgba(212,96,122,0.1); border-color: rgba(212,96,122,0.55); } /* ─── Stats ─── */ .section.page-home .stat-num { font-family: 'Cormorant Garamond', serif; font-size: clamp(52px, 5.5vw, 82px); font-weight: 600; color: #2C1810; letter-spacing: -0.03em; } .section.page-home .stat-label { color: #A8806A; font-size: 9.5px; letter-spacing: 0.22em; } .section.page-home .stats-row { border-top: 1px solid rgba(180,140,110,0.2); } /* ─── Testimonials ─── */ .testi-card { background: rgba(255,255,255,0.45); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,0.73); box-shadow: 0 8px 32px rgba(60,30,20,0.06), inset 0 1px 0 rgba(255,255,255,0.88); border-radius: 20px; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .testi-card::after { content: '\201C'; position: absolute; top: 4px; right: 12px; font-family: 'Cormorant Garamond', serif; font-size: 130px; line-height: 1; color: rgba(242,155,178,0.18); pointer-events: none; font-weight: 400; user-select: none; } .testi-card:hover { transform: translateY(-5px); box-shadow: 0 18px 48px rgba(60,30,20,0.09), inset 0 1px 0 rgba(255,255,255,0.88); } .testi-text { color: #2C1810; font-size: 15px; line-height: 1.68; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; } .testi-meta { border-top: 1px solid rgba(180,140,110,0.18); } .testi-name { color: #2C1810; font-weight: 700; } .testi-handle { color: #A8806A; } .testi-tier { color: #D4607A; border-color: rgba(212,96,122,0.3); font-size: 8px; } .testi-rating { color: #D4607A; } /* ─── Post cards (home page) ─── */ .section.page-home .post-card-img { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(60,30,20,0.09); } .section.page-home .post-card-cat { color: #D4607A; font-size: 9px; letter-spacing: 0.18em; margin-top: var(--s-4); } .section.page-home .post-card-title { color: #2C1810; } .section.page-home .post-card-meta { color: #A8806A; } .section.page-home .post-card-meta-dot { background: #C4A898; } /* ─── Newsletter ─── */ .newsletter-card.page-home { margin: 0; padding: 96px var(--frame-pad-x); background: linear-gradient(135deg, rgba(212,96,122,0.055) 0%, transparent 55%), linear-gradient(225deg, rgba(94,150,196,0.055) 0%, transparent 55%), rgba(255,255,255,0.42); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 0; border: none !important; border-top: 1px solid rgba(200,170,150,0.18) !important; border-bottom: 1px solid rgba(200,170,150,0.18) !important; } .newsletter-card.page-home .section-eyebrow { color: #D4607A; display: inline-flex; justify-content: center; } .newsletter-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(52px, 7.5vw, 108px); font-weight: 600; color: #2C1810; letter-spacing: -0.03em; line-height: 0.96; margin-top: var(--s-4); } .newsletter-lead { color: #72503F; } .newsletter-form { background: rgba(255,255,255,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(200,170,150,0.35); } .newsletter-input { color: #2C1810; } .newsletter-input::placeholder { color: #A8806A; } .newsletter-submit { background: #2C1810; color: #F8F0E5; font-size: 9px; letter-spacing: 0.2em; transition: background 0.22s; } .newsletter-submit:hover { background: #D4607A; } .newsletter-meta { color: #A8806A; } /* ─── Footer — dark warm editorial ─── */ .site-footer { background: #170B06; border-top: none; padding-top: 80px; } .site-footer .footer-brand-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; letter-spacing: 0.06em; color: #EFE0CC; } .site-footer .footer-brand-tag { color: rgba(239,224,204,0.48); } .site-footer .footer-col h4 { color: #D4607A; font-size: 9px; letter-spacing: 0.28em; } .site-footer .footer-col a { color: rgba(239,224,204,0.62); } .site-footer .footer-col a:hover { color: #EFE0CC; opacity: 1; } .site-footer .footer-brand-mark svg { fill: #D4607A; } .footer-bottom { background: #170B06; color: rgba(239,224,204,0.3); border-top: 1px solid rgba(239,224,204,0.07); } /* ─── Mobile optimizations ─── */ @media (max-width: 768px) { .product-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .testi-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .service-bar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .newsletter-card.page-home { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 64px var(--frame-pad-x); } .section.page-home { padding: 64px var(--frame-pad-x); } .newsletter-title { font-size: clamp(44px, 12vw, 72px); } .section.page-home .section-title { font-size: clamp(36px, 8vw, 56px); } } /* ══════════════════════════════════════════════════════════════════ VIBRANCY LAYER — 화사하고 밝은 컬러 & 배경 ══════════════════════════════════════════════════════════════════ */ /* ── Unified cream canvas: one wrapper, no per-section splits ── */ #home-sections-wrap { background: #FBF7F8; } .section.page-home { background: transparent; } /* Newsletter — palette gradient CTA */ .newsletter-card.page-home { background: radial-gradient(ellipse at 20% 50%, rgba(242,155,178,0.35) 0%, transparent 55%), radial-gradient(ellipse at 80% 50%, rgba(139,180,217,0.3) 0%, transparent 55%), rgba(248, 240, 229, 0.92) !important; } /* Section position context */ .section.page-home { position: relative; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CRYSTAL CLEAR GLASS — 투명한 유리병처럼, 배경이 그대로 비침 Key: near-zero fill + specular top highlight + saturate blur ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── Bloom Liquid Glass — gradient border via ::before ── */ .product-card, .testi-card, .service-bar { position: relative; overflow: hidden; border: none; } .product-card::before, .testi-card::before, .service-bar::before { content: ''; position: absolute; inset: 0; padding: 1.4px; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.2) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.55) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } /* Product cards — liquid-glass */ .product-card, .product-card:nth-child(1), .product-card:nth-child(2), .product-card:nth-child(3), .product-card:nth-child(4) { background: rgba(255,255,255,0.01); backdrop-filter: blur(4px) saturate(120%); -webkit-backdrop-filter: blur(4px) saturate(120%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); } .product-card:hover, .product-card:nth-child(1):hover, .product-card:nth-child(2):hover, .product-card:nth-child(3):hover, .product-card:nth-child(4):hover { background: rgba(255,255,255,0.06); box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 8px 32px rgba(0,0,0,0.04); transform: translateY(-6px) scale(1.01); } /* Product card body */ .product-card-body, .product-card:nth-child(1) .product-card-body, .product-card:nth-child(2) .product-card-body, .product-card:nth-child(3) .product-card-body, .product-card:nth-child(4) .product-card-body { background: rgba(255,255,255,0.01); border-top: none; } /* Testimonial cards — liquid-glass-strong */ .testi-card, .testi-card:nth-child(1), .testi-card:nth-child(2), .testi-card:nth-child(3) { background: rgba(255,255,255,0.01); backdrop-filter: blur(50px) saturate(120%); -webkit-backdrop-filter: blur(50px) saturate(120%); box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15); } .testi-card:hover, .testi-card:nth-child(1):hover, .testi-card:nth-child(2):hover, .testi-card:nth-child(3):hover { background: rgba(255,255,255,0.06); box-shadow: 4px 4px 12px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.25); } /* Service bars — liquid-glass */ .service-bar { background: rgba(255,255,255,0.01); backdrop-filter: blur(4px) saturate(120%); -webkit-backdrop-filter: blur(4px) saturate(120%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); } .service-bar:hover { background: rgba(255,255,255,0.06); transform: translateX(6px); } /* ── Main palette: #F29BB2 (pink), #8BB4D9 (sky), #F8F0E5 (cream) ── */ .section.page-home .section-eyebrow { color: #C97898; } .section.page-home .section-eyebrow::before { background: #F29BB2; } .section.page-home .section-title { color: #1A0808; } .section.page-home .section-lead { color: #5A3A30; } .section.page-home .post-card-cat { color: #C97898; } .service-bar-cta { color: #C97898; border-color: rgba(242, 155, 178, 0.5); } .service-bar-cta:hover { background: rgba(242, 155, 178, 0.15); border-color: rgba(242, 155, 178, 0.7); } .testi-rating { color: #F29BB2; } .testi-tier { color: #C97898; border-color: rgba(242, 155, 178, 0.4); } .section.page-home .lang-pill:hover { background: rgba(242, 155, 178, 0.18); border-color: rgba(242, 155, 178, 0.5); color: #C97898; } .section.page-home .stat-num { color: #1A0808; } .section.page-home .stat-label { color: #9A7264; } .newsletter-submit:hover { background: #F29BB2; color: #fff; } .newsletter-card.page-home .section-eyebrow { color: #C97898; } .product-card-brand { color: #8BB4D9; letter-spacing: 0.22em; } /* Section dividers */ .section-divider.page-home { display: none; } /* Footer */ .site-footer .footer-col h4 { color: #F29BB2; } .site-footer .footer-brand-mark svg { fill: #F29BB2; } /* Mobile vibrancy */ @media (max-width: 768px) { .section.page-home::after { display: none; } #home-sections-wrap { background: #ffffff; } } /* ════════════════════════════════════════════════════════════════ DESIGNJOY MOTION SYSTEM — marquee + scroll-reveal + stagger ════════════════════════════════════════════════════════════════ */ /* Marquee keyframes */ @keyframes dj-left { to { transform: translateX(-50%); } } @keyframes dj-right { from { transform: translateX(-50%); } to { transform: translateX(0%); } } /* Ticker strip */ .dj-ticker { overflow: hidden; padding: 11px 0; background: #F2A7BF; position: relative; } .dj-ticker-track { position: relative; z-index: 1; } .dj-ticker + .dj-ticker { padding-top: 2px; } .dj-ticker:hover .dj-ticker-track { animation-play-state: paused; } .dj-ticker-track { display: flex; width: max-content; animation: dj-left 32s linear infinite; } .dj-ticker-track.dir-r { animation: dj-right 38s linear infinite; } .dj-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px; margin: 0 4px; border: 1px solid rgba(255,255,255,0.35); border-radius: 9999px; font-size: 10px; font-weight: 600; letter-spacing: 0.20em; color: #FDF6EE; text-transform: uppercase; white-space: nowrap; user-select: none; box-shadow: none; } .dj-pill.accent { color: #3B6FD4; border-color: rgba(59,111,212,0.45); } .dj-pill-dot { width:4px; height:4px; border-radius:50%; background:currentColor; opacity:0.7; flex-shrink:0; } /* Scroll reveal — single element */ .dj-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.72s cubic-bezier(0.22,1,0.36,1), transform 0.72s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; } .dj-reveal.dj-in { opacity: 1; transform: translateY(0); } /* Stagger grid — children cascade */ .dj-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.62s cubic-bezier(0.22,1,0.36,1), transform 0.62s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; } .dj-stagger.dj-in > *:nth-child(1) { transition-delay: 0ms; } .dj-stagger.dj-in > *:nth-child(2) { transition-delay: 65ms; } .dj-stagger.dj-in > *:nth-child(3) { transition-delay: 130ms; } .dj-stagger.dj-in > *:nth-child(4) { transition-delay: 195ms; } .dj-stagger.dj-in > *:nth-child(5) { transition-delay: 260ms; } .dj-stagger.dj-in > *:nth-child(6) { transition-delay: 325ms; } .dj-stagger.dj-in > * { opacity: 1; transform: translateY(0); } /* Section-head cascade: eyebrow → title → lead */ .dj-reveal.section-eyebrow { transition-delay: 0ms !important; } .dj-reveal.section-title { transition-delay: 80ms !important; } .dj-reveal.section-lead { transition-delay:160ms !important; } /* Tab hero cascade */ .dj-reveal.tab-hero-title { transition-delay: 0ms !important; } .dj-reveal.tab-hero-hook { transition-delay: 90ms !important; } .dj-reveal.tab-hero-meta { transition-delay:180ms !important; } .dj-inner { display: flex; flex-shrink: 0; } /* K-Beauty carousel nav buttons */ .carousel-nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(26,8,8,0.18); background: rgba(255,255,255,0.88); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1A0808; flex-shrink: 0; transition: background 0.18s, border-color 0.18s, transform 0.14s; } .carousel-nav-btn:hover { background:#fff; border-color:rgba(26,8,8,0.4); transform:scale(1.06); } .carousel-nav-btn:disabled { opacity:0.30; cursor:not-allowed; transform:none; } /* ── Hero entrance ──────────────────────────────────── */ @keyframes h-fade-up { from { opacity:0; transform:translateY(36px); } to { opacity:1; transform:translateY(0); } } @keyframes h-fade-in { from { opacity:0; } to { opacity:1; } } @keyframes h-float-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } @keyframes h-slide-up { from { opacity:0; transform:translateY(28px) scale(0.97); } to { opacity:1; transform:translateY(0) scale(1); } } .hero-bg-layer { animation: h-fade-in 1.4s ease both; } .hero-tulip-layer { animation: h-float-in 1.3s cubic-bezier(0.22,1,0.36,1) 0.08s both; } .hero-title-layer { animation: h-fade-up 1.0s cubic-bezier(0.22,1,0.36,1) 0.22s both; } .hero-tags-layer { animation: h-slide-up 0.85s cubic-bezier(0.22,1,0.36,1) 0.52s both; } .hero-picks-card { animation: h-slide-up 0.9s cubic-bezier(0.22,1,0.36,1) 0.68s both; } /* ── Picks circles float ─────────────────────────── */ @keyframes pf1 { 0%,100%{transform:translateY(0px) rotate(-3deg)} 50%{transform:translateY(-9px) rotate(-1deg)} } @keyframes pf2 { 0%,100%{transform:translateY(-4px) rotate(1.5deg)} 50%{transform:translateY(5px) rotate(3.5deg)} } @keyframes pf3 { 0%,100%{transform:translateY(3px) rotate(0deg)} 50%{transform:translateY(-7px) rotate(-2.5deg)} } @keyframes pf4 { 0%,100%{transform:translateY(-2px) rotate(2deg)} 50%{transform:translateY(6px) rotate(-0.5deg)} } @keyframes pf5 { 0%,100%{transform:translateY(1px) rotate(-1.5deg)} 50%{transform:translateY(-8px) rotate(2deg)} } .picks-img-1 { animation: pf1 4.2s ease-in-out infinite 0.0s; transform-origin:center bottom; } .picks-img-2 { animation: pf2 3.8s ease-in-out infinite 0.5s; transform-origin:center bottom; } .picks-img-3 { animation: pf3 4.6s ease-in-out infinite 1.0s; transform-origin:center bottom; } .picks-img-4 { animation: pf4 3.5s ease-in-out infinite 1.5s; transform-origin:center bottom; } .picks-img-5 { animation: pf5 5.0s ease-in-out infinite 2.0s; transform-origin:center bottom; } /* ══════════════════════════════════════════════════════════════ */ /* NCT WISH · DARK CYBER-EDITORIAL OVERLAY (scoped .page-nct-wish) */ /* ══════════════════════════════════════════════════════════════ */ .page-nct-wish { --nw-paper: #ffffff; --nw-paper-70: rgba(255,255,255,0.70); --nw-paper-50: rgba(255,255,255,0.50); --nw-paper-30: rgba(255,255,255,0.30); --nw-hairline: rgba(255,255,255,0.16); --nw-hairline-strong: rgba(255,255,255,0.32); --nw-glass: rgba(255,255,255,0.04); --nw-glass-strong: rgba(255,255,255,0.07); --nw-glass-bd: rgba(255,255,255,0.18); --nw-glass-bd-2: rgba(255,255,255,0.26); --nw-neon: #6E8DFF; --nw-mint: #52BDB0; --nw-moss: #95B3A8; --nw-rouge: #FF6B8C; position: relative; } /* Aurora glow inside hero frame (reduced — no top band) */ .page-nct-wish.tab-page-frame { position: relative; overflow: hidden; border: none; isolation: isolate; } .page-nct-wish.tab-page-frame::after { content:''; position:absolute; pointer-events:none; border-radius: 50%; filter: blur(110px); z-index: 0; width: 420px; height: 420px; background: radial-gradient(circle, rgba(149,179,168,0.20), transparent 70%); bottom: -200px; right: -180px; } /* Corner brackets */ .nw-frame-corner { position: absolute; width: 22px; height: 22px; border: 1px solid var(--nw-hairline-strong); z-index: 5; pointer-events: none; } .nw-frame-corner.tl { top: 26px; left: 26px; border-right: none; border-bottom: none; } .nw-frame-corner.tr { top: 26px; right: 26px; border-left: none; border-bottom: none; } .nw-frame-corner.bl { bottom: 26px; left: 26px; border-right: none; border-top: none; } .nw-frame-corner.br { bottom: 26px; right: 26px; border-left: none; border-top: none; } /* Vertical rotated marquee text on left edge */ .nw-vrot { position: absolute; top: 50%; left: 22px; transform: rotate(-90deg) translate(50%, 0); transform-origin: left center; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--nw-paper-50); white-space: nowrap; z-index: 6; } .nw-vrot::before { content:''; display: inline-block; width: 30px; height: 1px; background: var(--nw-paper-50); vertical-align: middle; margin-right: 14px; } .nw-vrot .vh { font-family: 'Playfair Display', serif; font-style: italic; text-transform: none; letter-spacing: -0.01em; font-size: 16px; color: var(--nw-paper); margin-right: 14px; } /* Page-segment pills (top-right) */ .nw-pageseg { display: flex; gap: 6px; align-items: center; } .nw-pageseg .ps { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--nw-glass-bd); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--nw-paper-50); } .nw-pageseg .ps .pbar { width: 18px; height: 1.5px; background: currentColor; opacity: 0.7; } .nw-pageseg .ps.on { background: var(--nw-paper); color: #000; border-color: var(--nw-paper); padding-right: 22px; } .nw-pageseg .ps.on .pbar { background: #000; opacity: 1; } /* Massive segmented date numbers */ .nw-bignum { display: flex; gap: 36px; align-items: flex-start; } .nw-bignum .bn { display: flex; flex-direction: column; align-items: center; gap: 8px; } .nw-bignum .bn-num { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(72px, 10vw, 124px); line-height: 0.86; color: var(--nw-paper); letter-spacing: -0.05em; } .nw-bignum .bn-num.blue { color: var(--nw-mint); } .nw-bignum .bn-num.dim { color: transparent; -webkit-text-stroke: 1.5px var(--nw-paper-30); } .nw-bignum .bn-lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--nw-paper-50); } /* Curved ribbon subtitle */ .nw-ribbon { display: inline-flex; align-items: center; gap: 16px; padding: 12px 26px; border-radius: 999px; border: 1px solid var(--nw-glass-bd); background: rgba(255,255,255,0.018); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 100%; } .nw-ribbon .rbtxt { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nw-paper); } .nw-ribbon .rbtxt em { font-family: 'Playfair Display', serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--nw-paper); margin: 0 4px; } .nw-ribbon .rbtgl { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--nw-paper-50); text-transform: uppercase; padding-left: 14px; border-left: 1px solid var(--nw-hairline); } .nw-ribbon .rbtgl .tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--nw-paper); box-shadow: 0 0 8px var(--nw-paper); } /* Asterisk SVG positioning */ .nw-aster { position: absolute; pointer-events: none; z-index: 6; color: var(--nw-paper); } .nw-aster.dim { color: var(--nw-paper-30); } .nw-aster.neon { color: var(--nw-neon); } /* Bitácora glass info card */ .nw-bitacora { position: absolute; padding: 20px 22px; border-radius: 22px; background: var(--nw-glass-strong); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--nw-glass-bd-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 24px 60px rgba(0,0,0,0.5); width: 300px; z-index: 4; } .nw-bitacora-h { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nw-paper); line-height: 1.1; } .nw-bitacora-h em { font-family: 'Playfair Display', serif; font-style: italic; font-size: 22px; letter-spacing: -0.01em; text-transform: none; color: var(--nw-paper); font-weight: 400; } .nw-bitacora-h .sm { display: block; margin-top: 8px; font-size: 10px; letter-spacing: 0.20em; color: var(--nw-paper-50); } .nw-bitacora-body { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--nw-hairline); font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.6; color: var(--nw-paper-70); } .nw-bitacora-body p { margin: 0 0 8px; } .nw-bitacora-body p:last-child { margin: 0; } /* Surprise / OMG callout */ .nw-callout { line-height: 1; z-index: 4; } .nw-callout .co1 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 42px; color: var(--nw-paper); } .nw-callout .co2 { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 500; color: var(--nw-neon); letter-spacing: 0.06em; margin-top: 4px; } /* HERO override */ .page-nct-wish .tab-hero { position: relative; padding: var(--s-6) var(--frame-pad-x) var(--s-16); overflow: visible; } .page-nct-wish .tab-hero-bg { background: none; } .page-nct-wish .tab-hero-content { position: relative; z-index: 2; } .page-nct-wish .nw-hero-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-12); align-items: start; margin-top: var(--s-8); position: relative; z-index: 2; } .page-nct-wish .nw-hero-left { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; } .page-nct-wish .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; color: var(--nw-paper-50); } .page-nct-wish .eyebrow::before { content:''; width: 26px; height: 1px; background: var(--nw-paper-50); } .page-nct-wish .tab-hero-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(56px, 9.5vw, 140px); letter-spacing: -0.05em; line-height: 0.85; } .page-nct-wish .tab-hero-title em { font-style: italic; color: var(--nw-mint); } .page-nct-wish .tab-hero-hook { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--nw-paper-70); max-width: 560px; } .page-nct-wish .tab-hero-meta { border-top: 1px solid var(--nw-hairline); border-bottom: 1px solid var(--nw-hairline); padding: var(--s-6) 0; margin-top: var(--s-12); } .page-nct-wish .tab-hero-meta span { font-family: 'JetBrains Mono', monospace; color: var(--nw-paper-50); font-size: 10px; letter-spacing: 0.22em; } .page-nct-wish .tab-hero-meta strong { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; font-size: 24px; color: var(--nw-paper); letter-spacing: -0.01em; margin-top: 6px; } /* Hero top utility row */ .nw-hero-toprow { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s-10); position: relative; z-index: 3; } .nw-hero-meta-left { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nw-paper-70); line-height: 1.6; } .nw-hero-meta-left em { font-family: 'Playfair Display', serif; font-style: italic; text-transform: none; letter-spacing: -0.01em; color: var(--nw-paper); font-size: 14px; } .nw-mark-row { display: flex; gap: 8px; margin-top: 12px; } .nw-mkpill { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--nw-glass-bd); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.22em; color: var(--nw-paper-70); text-transform: uppercase; } /* Hero stage — fills right grid cell */ .nw-hero-stage { position: relative; height: clamp(400px, 44vw, 560px); margin-top: -40px; } .nw-hero-img { position: absolute; inset: 0; border-radius: 240px 240px 24px 24px; overflow: hidden; border: 1px solid var(--nw-glass-bd); box-shadow: 0 30px 80px rgba(0,0,0,0.5); cursor: pointer; transition: transform 0.4s ease; } .nw-hero-img:hover { transform: translateY(-4px); } .nw-hero-img a { display: block; width: 100%; height: 100%; } .nw-hero-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.1) contrast(1.05); transition: transform 0.5s ease; } .nw-hero-img:hover img { transform: scale(1.03); } .nw-hero-stage .nw-bitacora { top: auto; bottom: 20px; left: auto; right: -18px; width: 62%; max-width: 230px; padding: 12px 14px; z-index: 5; } .nw-hero-stage .nw-callout { position: absolute; top: 24px; right: 22px; text-align: right; z-index: 5; } .nw-hero-stage .nw-bigtitle { position: absolute; left: 0; bottom: 40px; z-index: 3; font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; font-size: clamp(56px, 7vw, 110px); line-height: 0.95; color: var(--nw-paper); letter-spacing: -0.04em; pointer-events: none; } /* Section overrides */ .page-nct-wish .section-eyebrow { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.32em; color: var(--nw-paper-50); } .page-nct-wish .section-eyebrow::before { background: var(--nw-paper-50); } .page-nct-wish .section-title { font-family: 'Playfair Display', serif; font-weight: 400; letter-spacing: -0.04em; } .page-nct-wish .section-title em { font-style: italic; color: var(--nw-paper-70); } .page-nct-wish .section-lead { color: var(--nw-paper-70); font-family: 'Inter', sans-serif; } /* MEMBERS override */ .page-nct-wish.tab-members { position: relative; padding: var(--s-16) var(--frame-pad-x); border-top: 1px solid var(--nw-hairline); } .page-nct-wish .member-grid { gap: var(--s-6); } .page-nct-wish .member-card { background: var(--nw-glass); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--nw-glass-bd); border-radius: 24px; padding: var(--s-6); aspect-ratio: 4 / 5.4; overflow: hidden; isolation: isolate; } .page-nct-wish .member-card-bg { background: radial-gradient(circle at top, color-mix(in srgb, var(--member-color) 32%, transparent) 0%, transparent 65%); border-radius: 24px; inset: 0; } .page-nct-wish .member-card:hover .member-card-bg { background: radial-gradient(circle at top, color-mix(in srgb, var(--member-color) 55%, transparent) 0%, transparent 75%); } .page-nct-wish .member-card-initial { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 96px; letter-spacing: -0.04em; color: var(--nw-paper); mix-blend-mode: normal; opacity: 0.94; top: var(--s-8); left: var(--s-6); } .page-nct-wish .member-card-body { left: var(--s-6); right: var(--s-6); bottom: var(--s-6); z-index: 2; } .page-nct-wish .member-name { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.32em; font-weight: 600; color: var(--nw-paper); } .page-nct-wish .member-meta { margin-top: var(--s-2); } .page-nct-wish .member-position { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nw-paper-50); font-weight: 400; } .page-nct-wish .member-flag { font-size: 14px; } .page-nct-wish .member-note { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--nw-paper-70); margin-top: var(--s-3); } .nw-member-num { position: absolute; top: var(--s-5); right: var(--s-6); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; color: var(--nw-paper-50); z-index: 3; } /* VIDEOS override */ .page-nct-wish.tab-mv { position: relative; padding: var(--s-16) var(--frame-pad-x); border-top: 1px solid var(--nw-hairline); } .page-nct-wish .mv-caption { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nw-paper-70); display: flex; align-items: center; gap: 12px; padding-top: var(--s-3); border-top: 1px solid var(--nw-hairline); } .page-nct-wish .mv-caption .mvidx { color: var(--nw-paper-50); } .page-nct-wish .mv-caption .mvdate { margin-left: auto; color: var(--nw-paper-50); } .page-nct-wish .mv-caption em { font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: -0.01em; text-transform: none; color: var(--nw-paper); font-size: 16px; } /* WEDGE / Bilingual override */ .page-nct-wish.tab-wedge { position: relative; padding: var(--s-20) var(--frame-pad-x); background: radial-gradient(ellipse at center, rgba(110,141,255,0.06) 0%, transparent 70%), linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 50%, transparent 100%); border-top: 1px solid var(--nw-hairline); } .page-nct-wish .bilingual-example { background: var(--nw-glass); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--nw-glass-bd); border-radius: 24px; padding: var(--s-8); position: relative; padding-left: 80px; } .page-nct-wish .bilingual-example::before { content:''; position: absolute; top: var(--s-8); left: var(--s-6); width: 40px; height: 40px; border: 1px solid var(--nw-paper-30); border-radius: 50%; } .page-nct-wish .bilingual-example::after { content:'✻'; position: absolute; top: var(--s-8); left: var(--s-6); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 18px; color: var(--nw-paper-70); } .page-nct-wish .ex-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.32em; color: var(--nw-paper-50); } .page-nct-wish .ex-jp { font-family: 'Playfair Display', serif; font-style: italic; font-size: 26px; color: var(--nw-paper); letter-spacing: -0.01em; line-height: 1.3; } .page-nct-wish .ex-kr { font-family: 'Inter', sans-serif; color: var(--nw-paper-70); font-size: 14px; line-height: 1.55; margin-top: var(--s-3); } .page-nct-wish .ex-note { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; color: var(--nw-paper-50); text-transform: uppercase; font-style: normal; margin-top: var(--s-4); } /* DIARY override */ .page-nct-wish.tab-diary { position: relative; padding: var(--s-16) var(--frame-pad-x); border-top: 1px solid var(--nw-hairline); } .page-nct-wish .post-card { background: var(--nw-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--nw-glass-bd); border-radius: 24px; padding: var(--s-4); position: relative; } .page-nct-wish .post-card-img { border-radius: 200px 200px 16px 16px; overflow: hidden; aspect-ratio: 4/3; } .page-nct-wish .post-card-cat { display: inline-block; margin: var(--s-5) 0 0 var(--s-3); padding: 5px 14px; border: 1px solid var(--nw-glass-bd); border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; color: var(--nw-paper); text-transform: uppercase; } .page-nct-wish .post-card-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--nw-paper); letter-spacing: -0.02em; margin-top: var(--s-3); padding: 0 var(--s-3); } .page-nct-wish .post-card-meta { padding: var(--s-3) var(--s-3) var(--s-3); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; color: var(--nw-paper-50); text-transform: uppercase; } .page-nct-wish .post-card-meta-dot { background: var(--nw-paper-30); } /* PATREON CTA override */ .page-nct-wish.tab-patreon-cta { position: relative; padding: var(--s-20) var(--frame-pad-x); background: radial-gradient(ellipse at center, rgba(110,141,255,0.10) 0%, transparent 60%); border-top: 1px solid var(--nw-hairline); } .page-nct-wish.tab-patreon-cta .section-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(40px, 6vw, 80px); letter-spacing: -0.04em; line-height: 1; margin-top: var(--s-6); } .page-nct-wish.tab-patreon-cta .section-title em { font-style: italic; color: var(--nw-paper-70); } /* Footer wordmark */ .nw-foot-mark { text-align: center; padding-top: var(--s-8); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--nw-paper-50); } .nw-foot-mark .fmh { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: -0.01em; text-transform: none; color: var(--nw-paper); margin-bottom: 6px; } /* ══════════════════════════════════════════════════════════════ TWS · DARK EDITORIAL — WARM AMBER TONE ══════════════════════════════════════════════════════════════ */ body.route-tws { background-image: none !important; background-color: #0A0A0F !important; } .tab-page-frame.page-tws, section.page-tws { background: #0A0A0F; border-top: none; position: relative; } /* TWS palette variables */ .page-tws { --tw-blue: #1565FF; --tw-blue-2: rgba(21,101,255,0.40); --tw-paper: #ffffff; --tw-p70: rgba(255,255,255,0.70); --tw-p50: rgba(255,255,255,0.50); --tw-p30: rgba(255,255,255,0.30); --tw-line: rgba(255,255,255,0.10); --tw-glass: rgba(255,255,255,0.04); --tw-gbd: rgba(255,255,255,0.12); position: relative; } /* ── TWS: hero frame aurora — warm amber bottom-left ── */ .page-tws.tab-page-frame { overflow: hidden; isolation: isolate; border: none; } .page-tws.tab-page-frame::after { content:''; position:absolute; pointer-events:none; border-radius:50%; filter:blur(130px); z-index:0; width:520px; height:520px; background:radial-gradient(circle, rgba(21,101,255,0.18), transparent 70%); bottom:-220px; left:-150px; } .page-tws.tab-page-frame::before { content:''; position:absolute; pointer-events:none; border-radius:50%; filter:blur(110px); z-index:0; width:380px; height:380px; background:radial-gradient(circle, rgba(21,101,255,0.09), transparent 70%); top:-100px; right:-100px; } /* ── TWS: hero typography ── */ .page-tws .tab-hero { position:relative; padding:var(--s-12) var(--frame-pad-x) var(--s-16); overflow:visible; } .page-tws .tab-hero-bg { background:none; } .page-tws .tab-hero-content { position:relative; z-index:2; } .page-tws .eyebrow { display:inline-flex; align-items:center; gap:12px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.32em; color:rgba(255,255,255,0.38); } .page-tws .eyebrow::before { content:''; width:26px; height:1px; background:var(--tw-blue); } .page-tws .tab-hero-title { font-family:'Playfair Display',serif; font-weight:400; font-size:clamp(100px,17vw,240px); line-height:0.85; letter-spacing:-0.05em; color:var(--tw-paper); margin-top:var(--s-4); } .page-tws .tab-hero-title em { font-style:italic; color:var(--tw-blue); } .page-tws .tab-hero-hook { font-family:'Inter',sans-serif; font-size:14px; color:rgba(255,255,255,0.55); line-height:1.65; max-width:560px; margin-top:var(--s-6); } /* TWS debut date numbers */ .page-tws .tw-bignum { display:flex; gap:var(--s-8); align-items:flex-end; margin-top:var(--s-8); } .page-tws .tw-bn { display:flex; flex-direction:column; align-items:center; gap:7px; } .page-tws .tw-bn-num { font-family:'Playfair Display',serif; font-weight:400; font-size:clamp(64px,9vw,114px); line-height:0.86; letter-spacing:-0.05em; color:var(--tw-paper); } .page-tws .tw-bn-num.gold { color:var(--tw-blue); } .page-tws .tw-bn-num.dim { color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,0.22); } .page-tws .tw-bn-lbl { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(255,255,255,0.28); } /* TWS ribbon (Plot Twist tagline) */ .page-tws .tw-ribbon { display:inline-flex; align-items:center; gap:16px; padding:10px 20px; margin-top:var(--s-8); border:1px solid rgba(21,101,255,0.22); border-radius:999px; background:rgba(21,101,255,0.04); backdrop-filter:blur(12px); } .page-tws .tw-ribbon-txt { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(255,255,255,0.60); } .page-tws .tw-ribbon-txt em { font-family:'Playfair Display',serif; font-style:italic; font-size:14px; letter-spacing:0; text-transform:none; color:var(--tw-blue); } .page-tws .tw-ribbon-dot { width:6px; height:6px; border-radius:50%; background:var(--tw-blue); opacity:0.60; } /* TWS meta strip */ .page-tws .tab-hero-meta { display:flex; gap:var(--s-12); padding:var(--s-6) 0; border-top:1px solid rgba(255,255,255,0.10); margin-top:var(--s-10); } .page-tws .tab-hero-meta div { display:flex; flex-direction:column; gap:5px; } .page-tws .tab-hero-meta span { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(255,255,255,0.32); } .page-tws .tab-hero-meta strong { font-family:'Playfair Display',serif; font-weight:400; color:var(--tw-paper); font-size:17px; letter-spacing:-0.01em; } /* ── TWS: section kicker ── */ .page-tws .tw-kicker { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.40em; text-transform:uppercase; color:rgba(255,255,255,0.22); display:flex; align-items:center; gap:12px; margin-bottom:var(--s-3); } .page-tws .tw-kicker::before { content:''; width:16px; height:1px; background:var(--tw-blue); } /* ── TWS: section title ── */ .page-tws .section-title { font-family:'Playfair Display',serif; font-weight:400; color:var(--tw-paper); letter-spacing:-0.04em; } .page-tws .section-title em { font-style:italic; color:var(--tw-blue); } .page-tws .section-lead { color:rgba(255,255,255,0.55); font-family:'Inter',sans-serif; } .page-tws .section-eyebrow { font-family:'JetBrains Mono',monospace; letter-spacing:0.32em; color:rgba(255,255,255,0.32); } .page-tws .section-eyebrow::before { background:rgba(21,101,255,0.60); } /* ── TWS: BRIDGE dividers — amber variant ── */ .tw-bridge { position:relative; background:#0A0A0F; padding:0 var(--frame-pad-x); display:flex; align-items:center; gap:20px; height:64px; z-index:3; } .tw-bridge-line { flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(21,101,255,0.12), rgba(255,255,255,0.05), rgba(21,101,255,0.12), transparent); } .tw-bridge-label { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:0.40em; text-transform:uppercase; color:rgba(255,255,255,0.16); white-space:nowrap; flex-shrink:0; } .tw-bridge-dot { width:4px; height:4px; border-radius:50%; background:rgba(21,101,255,0.50); flex-shrink:0; } /* ── TWS: MEMBERS — horizontal editorial list ── */ .page-tws.tab-members { padding:var(--s-16) var(--frame-pad-x); overflow:hidden; } .page-tws .tw-member-list { display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,0.08); margin-top:var(--s-10); } .page-tws .tw-member-row { display:grid; grid-template-columns:40px 80px 1fr auto; align-items:center; gap:var(--s-8); padding:var(--s-5) 0; border-bottom:1px solid rgba(255,255,255,0.06); transition:background 0.25s, padding-left 0.25s; cursor:default; } .page-tws .tw-member-row:hover { background:rgba(21,101,255,0.04); padding-left:8px; } .page-tws .tw-mnum { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; color:rgba(255,255,255,0.22); } .page-tws .tw-minitial { font-family:'Playfair Display',serif; font-style:italic; font-size:48px; font-weight:400; letter-spacing:-0.04em; color:var(--tw-paper); line-height:1; transition:color 0.25s; } .page-tws .tw-member-row:hover .tw-minitial { color:var(--tw-blue); } .page-tws .tw-minfo {} .page-tws .tw-mname { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; letter-spacing:0.14em; color:var(--tw-paper); margin-bottom:3px; } .page-tws .tw-mrole { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.32); } .page-tws .tw-mnote { font-family:'Playfair Display',serif; font-style:italic; font-size:14px; color:rgba(255,255,255,0.38); text-align:right; max-width:300px; line-height:1.45; } /* ── TWS: VIDEOS — 3-col equal with numbered overlay ── */ .page-tws.tab-mv { padding:var(--s-16) var(--frame-pad-x); } .page-tws .tw-mv-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:var(--s-8); } .page-tws .tw-mv-item { position:relative; } .page-tws .tw-mv-item a { display:block; position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9; text-decoration:none; box-shadow:0 4px 22px rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.07); transition:border-color 0.3s; } .page-tws .tw-mv-item a:hover { border-color:rgba(21,101,255,0.22); } .page-tws .tw-mv-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; } .page-tws .tw-mv-item a:hover img { transform:scale(1.04); } .page-tws .tw-mv-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.28); transition:background 0.3s; } .page-tws .tw-mv-item a:hover .tw-mv-overlay { background:rgba(0,0,0,0.16); } .page-tws .tw-mv-play { width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,0.90); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 14px rgba(0,0,0,0.4); transition:transform 0.2s; } .page-tws .tw-mv-item a:hover .tw-mv-play { transform:scale(1.1); } .page-tws .tw-mv-idx { position:absolute; top:12px; left:14px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.22em; color:rgba(255,255,255,0.80); background:rgba(0,0,0,0.52); backdrop-filter:blur(8px); padding:3px 8px; border-radius:4px; } .page-tws .tw-mv-caption { display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.08); font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.35); } .page-tws .tw-mv-caption em { font-family:'Playfair Display',serif; font-style:italic; letter-spacing:-0.01em; text-transform:none; color:var(--tw-paper); font-size:14px; } /* ── TWS: WORDPLAY section ── */ .page-tws.tab-wedge { padding:var(--s-16) var(--frame-pad-x); } .page-tws .tw-wordplay-list { list-style:none; padding:0; margin:var(--s-10) 0 0; border-top:1px solid rgba(255,255,255,0.08); } .page-tws .tw-wordplay-list li { display:grid; grid-template-columns:220px 1fr; gap:var(--s-8); padding:var(--s-6) 0; border-bottom:1px solid rgba(255,255,255,0.06); align-items:baseline; transition:padding-left 0.25s; } .page-tws .tw-wordplay-list li:hover { padding-left:8px; } .page-tws .tw-wp-track { font-family:'Playfair Display',serif; font-style:italic; font-size:19px; font-weight:400; color:var(--tw-blue); letter-spacing:-0.01em; } .page-tws .tw-wp-note { font-family:'Inter',sans-serif; font-size:13.5px; color:rgba(255,255,255,0.55); line-height:1.65; } /* ── TWS: DIARY ── */ .page-tws.tab-diary { padding:var(--s-16) var(--frame-pad-x); } .page-tws .post-card { background:rgba(255,255,255,0.04); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.10); border-radius:24px; padding:var(--s-4); box-shadow:0 4px 24px rgba(0,0,0,0.5); transition:border-color 0.3s, box-shadow 0.3s, transform 0.3s; } .page-tws .post-card:hover { border-color:rgba(21,101,255,0.28); box-shadow:0 8px 40px rgba(0,0,0,0.7); transform:translateY(-2px); } .page-tws .post-card-img { border-radius:16px; overflow:hidden; aspect-ratio:4/3; } .page-tws .post-card-cat { display:inline-block; margin:var(--s-5) 0 0 var(--s-3); padding:5px 14px; border:1px solid rgba(21,101,255,0.22); border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.22em; color:rgba(21,101,255,0.80); text-transform:uppercase; } .page-tws .post-card-title { font-family:'Playfair Display',serif; font-weight:400; font-size:22px; line-height:1.25; color:var(--tw-paper); letter-spacing:-0.02em; margin-top:var(--s-3); padding:0 var(--s-3); } .page-tws .post-card-meta { padding:var(--s-3); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; color:rgba(255,255,255,0.30); text-transform:uppercase; } /* ── TWS: PATREON CTA ── */ .page-tws.tab-patreon-cta { text-align:center; padding:calc(var(--s-20) + 40px) var(--frame-pad-x); background: radial-gradient(ellipse at center top, rgba(21,101,255,0.09) 0%, transparent 55%), radial-gradient(ellipse at center bottom, rgba(21,101,255,0.05) 0%, transparent 55%), #0A0A0F; } .page-tws.tab-patreon-cta .section-title { font-size:clamp(44px,6.5vw,96px) !important; margin-top:var(--s-6); } .page-tws.tab-patreon-cta .section-lead { max-width:560px; margin:var(--s-6) auto 0; } /* TWS foot mark */ .page-tws .tw-foot-mark { text-align:center; padding-top:var(--s-8); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.32em; text-transform:uppercase; color:rgba(255,255,255,0.28); } .page-tws .tw-foot-mark .fmh { font-family:'Playfair Display',serif; font-style:italic; font-weight:400; font-size:22px; letter-spacing:-0.01em; text-transform:none; color:var(--tw-paper); margin-bottom:6px; display:block; } /* ── Bridge visibility: hide on wrong routes ── */ .nw-bridge { display: none !important; } body.route-nct-wish .nw-bridge { display: flex !important; } .tw-bridge { display: none !important; } body.route-tws .tw-bridge { display: flex !important; } /* ── Footer: black on fan pages ── */ body.route-nct-wish .site-footer, body.route-tws .site-footer { background: #0A0A0F !important; border-top: 1px solid rgba(255,255,255,0.08) !important; } body.route-nct-wish .footer-bottom, body.route-tws .footer-bottom { background: #0A0A0F !important; } body.route-nct-wish .footer-col h4, body.route-tws .footer-col h4 { color: rgba(255,255,255,0.80); } body.route-nct-wish .footer-col a, body.route-tws .footer-col a { color: rgba(255,255,255,0.42); } body.route-nct-wish .footer-brand-tag, body.route-tws .footer-brand-tag { color: rgba(255,255,255,0.38); } body.route-nct-wish .footer-bottom span, body.route-tws .footer-bottom span { color: rgba(255,255,255,0.28); } /* ── TWS: hero 2-column layout ── */ .page-tws .tw-hero-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: flex-start; margin-top: var(--s-8); } .page-tws .tw-hero-left { position: relative; z-index: 2; } .page-tws .tw-hero-stage { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-4); } .page-tws .tw-hero-vid { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16/9; border: none; box-shadow: none; cursor: pointer; } .page-tws .tw-hero-vid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .page-tws .tw-hero-vid:hover img { transform: scale(1.03); } .page-tws .tw-hero-vid-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.30); transition: background 0.3s; } .page-tws .tw-hero-vid:hover .tw-hero-vid-overlay { background: rgba(0,0,0,0.15); } .page-tws .tw-hero-vid-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(21,101,255,0.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(21,101,255,0.5); transition: transform 0.2s, box-shadow 0.2s; } .page-tws .tw-hero-vid:hover .tw-hero-vid-play { transform: scale(1.12); box-shadow: 0 8px 32px rgba(21,101,255,0.65); } .page-tws .tw-hero-vid-issue { position: absolute; top: 14px; left: 16px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.36em; text-transform: uppercase; color: rgba(255,255,255,0.65); background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 4px; } .page-tws .tw-hero-vid-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .page-tws .tw-hero-vid-sm { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; border: 1px solid rgba(21,101,255,0.10); cursor: pointer; } .page-tws .tw-hero-vid-sm img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } .page-tws .tw-hero-vid-sm:hover img { transform: scale(1.05); } .page-tws .tw-hero-vid-sm-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; } .page-tws .tw-hero-vid-sm-play { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.88); display: flex; align-items: center; justify-content: center; } /* TWS hero glass info card */ .page-tws .tw-hero-vid-wrap { position: relative; } .page-tws .tw-vidcard { position: absolute; top: 20px; right: -23px; width: 62%; max-width: 230px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,0.07); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 24px 60px rgba(0,0,0,0.5); z-index: 5; } .page-tws .tw-vidcard-h { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tw-paper); line-height: 1.1; } .page-tws .tw-vidcard-h em { font-family: 'Playfair Display', serif; font-style: italic; font-size: 22px; letter-spacing: -0.01em; text-transform: none; color: var(--tw-paper); font-weight: 400; display: block; margin-top: 4px; } .page-tws .tw-vidcard-h .sm { display: block; margin-top: 6px; font-size: 10px; letter-spacing: 0.20em; color: rgba(255,255,255,0.45); } .page-tws .tw-vidcard-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(21,101,255,0.15); font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.68); } .page-tws .tw-vidcard-body p { margin: 0; } /* ══════════════════════════════════════════════════════════════ NCT WISH · DARK BODY + ALL-SECTION BACKGROUND FIX ══════════════════════════════════════════════════════════════ */ body.route-nct-wish { background-image: none !important; background-color: #0A0A0F !important; } section.page-nct-wish { background: #0A0A0F; } /* ── MEMBERS · editorial dark ── */ .page-nct-wish.tab-members { overflow: hidden; } .page-nct-wish.tab-members::before { content: 'WISHFUL'; position: absolute; bottom: -20px; right: calc(var(--frame-pad-x) - 20px); font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(60px, 10vw, 140px); font-weight: 400; color: rgba(255,255,255,0.028); letter-spacing: -0.04em; line-height: 1; pointer-events: none; user-select: none; z-index: 0; white-space: nowrap; } /* member card: stronger glass border on dark bg */ .page-nct-wish .member-card { border-color: rgba(255,255,255,0.13); box-shadow: 0 4px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07); } .page-nct-wish .member-card:hover { border-color: rgba(110,141,255,0.28); box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(110,141,255,0.14); transform: translateY(-3px); transition: all 0.3s ease; } /* ── VIDEOS · neon ambient ── */ .page-nct-wish.tab-mv { overflow: hidden; } .page-nct-wish.tab-mv::before { content: ''; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); width: 800px; height: 400px; background: radial-gradient(ellipse, rgba(110,141,255,0.07) 0%, transparent 68%); pointer-events: none; z-index: 0; } /* video card label bump */ .page-nct-wish .mv-caption { border-top-color: rgba(255,255,255,0.10); } /* ── WEDGE · two-column tight layout ── */ .page-nct-wish.tab-wedge { background: radial-gradient(ellipse at 20% 60%, rgba(110,141,255,0.05) 0%, transparent 55%), radial-gradient(ellipse at 80% 30%, rgba(149,179,168,0.04) 0%, transparent 55%), #0A0A0F; } .page-nct-wish .bilingual-examples { margin-top: var(--s-10); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); } .page-nct-wish .bilingual-example { border-color: rgba(255,255,255,0.10); box-shadow: 0 4px 24px rgba(0,0,0,0.4); } /* ── DIARY · arch image keep; card glass ── */ .page-nct-wish .post-card { border-color: rgba(255,255,255,0.10); box-shadow: 0 4px 24px rgba(0,0,0,0.5); transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; } .page-nct-wish .post-card:hover { border-color: rgba(110,141,255,0.24); box-shadow: 0 8px 40px rgba(0,0,0,0.7); transform: translateY(-2px); } /* ── PATREON CTA · centered dark editorial ── */ .page-nct-wish.tab-patreon-cta { text-align: center; background: radial-gradient(ellipse at center top, rgba(110,141,255,0.09) 0%, transparent 55%), radial-gradient(ellipse at center bottom, rgba(149,179,168,0.05) 0%, transparent 55%), #0A0A0F; } .page-nct-wish.tab-patreon-cta .section-eyebrow { margin: 0 auto; } .page-nct-wish.tab-patreon-cta .section-title { margin-top: var(--s-6); } .page-nct-wish.tab-patreon-cta .section-lead { max-width: 560px; margin: var(--s-6) auto 0; } /* ── SECTION: no hard borders, smooth flow ── */ .page-nct-wish.tab-members, .page-nct-wish.tab-mv, .page-nct-wish.tab-wedge, .page-nct-wish.tab-diary, .page-nct-wish.tab-patreon-cta { border-top: none; position: relative; } /* ── MEMBER CARD transition ── */ .page-nct-wish .member-card { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ══════════════════════════════════════════════════════════════ NCT WISH · SECTION BRIDGE — smooth editorial connectors ══════════════════════════════════════════════════════════════ */ .nw-bridge { position: relative; background: #0A0A0F; padding: 0 var(--frame-pad-x); display: flex; align-items: center; gap: 20px; height: 64px; z-index: 3; } .nw-bridge-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 20%, rgba(110,141,255,0.12) 50%, rgba(255,255,255,0.05) 80%, transparent 100%); } .nw-bridge-label { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.40em; text-transform: uppercase; color: rgba(255,255,255,0.16); white-space: nowrap; flex-shrink: 0; } .nw-bridge-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(110,141,255,0.40); flex-shrink: 0; } .nw-bridge-arrow { font-size: 13px; color: rgba(255,255,255,0.14); flex-shrink: 0; } /* ambient glow between sections */ .nw-bridge::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 200px; background: radial-gradient(ellipse, rgba(110,141,255,0.04) 0%, transparent 70%); pointer-events: none; } /* ── SECTION HEADER: editorial label style ── */ .page-nct-wish .nw-section-kicker { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.40em; text-transform: uppercase; color: rgba(255,255,255,0.22); display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-3); } .page-nct-wish .nw-section-kicker::before { content: ''; width: 16px; height: 1px; background: rgba(110,141,255,0.55); } /* ── VIDEOS: editorial featured layout ── */ .page-nct-wish .nw-mv-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 16px; max-width: 1200px; margin: 0 auto; } .page-nct-wish .nw-mv-featured { position: relative; } .page-nct-wish .nw-mv-stack { display: flex; flex-direction: column; gap: 16px; } .page-nct-wish .nw-mv-thumb { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 6px 28px rgba(0,0,0,0.55); cursor: pointer; } .page-nct-wish .nw-mv-featured .nw-mv-thumb { aspect-ratio: 16/9; } .page-nct-wish .nw-mv-stack .nw-mv-thumb { aspect-ratio: 16/9; } .page-nct-wish .nw-mv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .page-nct-wish .nw-mv-thumb:hover img { transform: scale(1.04); } .page-nct-wish .nw-mv-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.26); transition: background 0.3s; } .page-nct-wish .nw-mv-thumb:hover .nw-mv-overlay { background: rgba(0,0,0,0.16); } .page-nct-wish .nw-mv-play { border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.4); transition: transform 0.2s ease; } .page-nct-wish .nw-mv-featured .nw-mv-play { width: 56px; height: 56px; } .page-nct-wish .nw-mv-stack .nw-mv-play { width: 38px; height: 38px; } .page-nct-wish .nw-mv-thumb:hover .nw-mv-play { transform: scale(1.1); } /* ── WEDGE: tight editorial 2-col ── */ .page-nct-wish.tab-wedge .bilingual-examples { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-10); } /* ── PATREON CTA: dramatic ── */ .page-nct-wish.tab-patreon-cta { padding-top: calc(var(--s-20) + 40px); padding-bottom: calc(var(--s-20) + 40px); } .page-nct-wish.tab-patreon-cta .section-title { font-size: clamp(44px, 6.5vw, 96px) !important; } .page-nct-wish.tab-patreon-cta::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; background: radial-gradient(ellipse at center top, rgba(110,141,255,0.10) 0%, transparent 60%); pointer-events: none; } .page-nct-wish.tab-patreon-cta::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse at center bottom, rgba(149,179,168,0.06) 0%, transparent 65%); pointer-events: none; } /* ══════════════════════════════════════════════════════════════ K-BEAUTY PAGE — Cream Blush Editorial ══════════════════════════════════════════════════════════════ */ .tab-page-frame.page-kbeauty { background:#FAF3F1; border:none; color:#2C1810; overflow:visible; } body.route-kbeauty { background:#FAF3F1; } /* NAV */ .kb-nav { padding:var(--s-5) var(--frame-pad-x) 0; position:relative; z-index:10; } .kb-nav-inner { display:flex; align-items:center; justify-content:space-between; height:32px; } .kb-nav-logo { display:flex; align-items:center; gap:var(--s-2); } .kb-nav-links { display:flex; gap:var(--s-16); } .kb-nav-links a { font-size:10px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:rgba(44,24,16,0.40); text-decoration:none; transition:color 0.2s; } .kb-nav-links a:hover,.kb-nav-links a.active { color:#2C1810; } /* HERO */ .kb-hero { padding:72px var(--frame-pad-x) 48px; border-bottom:1px solid rgba(44,24,16,0.08); position:relative; overflow:hidden; } .kb-hero::before { content:''; position:absolute; top:-40%; right:-5%; width:560px; height:560px; border-radius:50%; background:none; pointer-events:none; } .kb-hero-eyebrow { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.38em; text-transform:uppercase; color:#D4607A; margin-bottom:var(--s-4); display:flex; align-items:center; gap:10px; } .kb-hero-eyebrow::before { content:''; display:inline-block; width:22px; height:1px; background:#D4607A; } .kb-hero-title { font-family:'Bodoni Moda',serif; font-style:italic; font-weight:normal; font-size:clamp(64px,8vw,116px); line-height:0.9; letter-spacing:-0.03em; color:#2C1810; } .kb-hero-sub { font-family:'JetBrains Mono',monospace; font-size:10px; color:rgba(44,24,16,0.36); letter-spacing:0.18em; margin-top:var(--s-4); } .kb-hero-count { display:none; } .kb-hero-stat-label { display:none; } /* CATEGORY TABS */ .kb-cats { display:flex; align-items:center; padding:0 var(--frame-pad-x); border-bottom:1px solid rgba(44,24,16,0.08); overflow-x:auto; } .kb-cats::-webkit-scrollbar { display:none; } .kb-cat-tab { padding:18px 24px 14px; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(44,24,16,0.36); cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; position:relative; top:1px; transition:all 0.2s; } .kb-cat-tab.active { color:#2C1810; border-bottom-color:#D4607A; } .kb-cat-tab:hover { color:rgba(44,24,16,0.72); } .kb-cat-sep { color:rgba(44,24,16,0.14); font-size:16px; padding:0 4px; pointer-events:none; user-select:none; } /* SECTION HEADER */ .kb-section-head { display:flex; align-items:center; justify-content:space-between; padding:var(--s-10) var(--frame-pad-x) var(--s-6); } .kb-section-label { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.34em; text-transform:uppercase; color:rgba(44,24,16,0.34); } .kb-section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(28px,3vw,44px); font-weight:600; font-style:italic; color:#2C1810; letter-spacing:-0.02em; margin-top:6px; } .kb-see-all { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:#D4607A; text-decoration:none; display:flex; align-items:center; gap:6px; transition:gap 0.2s; } .kb-see-all:hover { gap:10px; } /* PRODUCT CARDS GRID */ .kb-products-track { padding:0 var(--frame-pad-x) var(--s-10); display:grid; grid-template-columns:repeat(4,1fr); gap:3px; } .kb-pcard { background:#170B06; border-radius:0; border:none; position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer; transition:none; } .kb-pcard:hover { border-color:transparent; transform:none; box-shadow:none; } .kb-pcard-img { position:absolute; inset:0; aspect-ratio:auto; background:#2A170D; } .kb-pcard-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s; } .kb-pcard:hover .kb-pcard-img img { transform:scale(1.06); } .kb-badge { position:absolute; top:0; left:16px; z-index:3; writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); padding:14px 8px; border-radius:0; font-size:8.5px; font-weight:700; letter-spacing:0.20em; text-transform:uppercase; } .kb-badge.best { background:#D4607A; color:#fff; } .kb-badge.new { background:#FAF3F1; color:#2C1810; } .kb-badge.sale { background:#FAF3F1; color:#D4607A; border:none; } .kb-swatches { display:flex; gap:5px; margin-bottom:6px; } .kb-swatch { width:13px; height:13px; border-radius:50%; border:1.5px solid rgba(253,246,238,0.25); cursor:pointer; transition:transform 0.2s; } .kb-swatch:hover { transform:scale(1.28); } .kb-pcard-body { position:absolute; bottom:0; left:0; right:0; padding:18px 18px 20px; background:linear-gradient(0deg, rgba(23,11,6,0.97) 0%, rgba(23,11,6,0.72) 55%, rgba(23,11,6,0) 100%); z-index:2; } .kb-pcard-brand { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(253,246,238,0.38); margin-bottom:4px; } .kb-pcard-name { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; font-style:italic; line-height:1.2; color:#FDF6EE; letter-spacing:-0.01em; margin-bottom:10px; } .kb-pcard-footer { display:flex; align-items:center; justify-content:space-between; } .kb-pcard-price { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; color:#FDF6EE; } .kb-pcard-price .old { font-size:9.5px; color:rgba(253,246,238,0.28); text-decoration:line-through; margin-right:4px; } .kb-add-btn { width:30px; height:30px; border-radius:0; background:rgba(253,246,238,0.08); border:1px solid rgba(253,246,238,0.30); display:flex; align-items:center; justify-content:center; color:#FDF6EE; font-size:16px; line-height:1; cursor:pointer; transition:all 0.2s; } .kb-add-btn:hover { background:#FDF6EE; color:#2C1810; } /* STATS STRIP */ .kb-stats { margin:var(--s-4) var(--frame-pad-x); padding:var(--s-8) var(--s-10); background:#fff; border-radius:20px; border:1px solid rgba(44,24,16,0.07); display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); } .kb-stat { text-align:center; padding:var(--s-4) var(--s-2); border-right:1px solid rgba(44,24,16,0.06); } .kb-stat:last-child { border-right:none; } .kb-stat-num { font-family:'Bodoni Moda',serif; font-style:italic; font-weight:normal; font-size:clamp(36px,4vw,52px); line-height:1; color:#2C1810; letter-spacing:-0.03em; } .kb-stat-num sup { font-size:0.5em; color:#D4607A; font-style:normal; vertical-align:top; margin-top:10px; display:inline-block; } .kb-stat-label { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(44,24,16,0.32); margin-top:8px; } /* WHY K-BEAUTY — 2 col */ .kb-why { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:var(--s-10); border-top:1px solid rgba(44,24,16,0.08); } .kb-why-text { padding:72px var(--frame-pad-x) 72px; display:flex; flex-direction:column; justify-content:center; background:#FAF3F1; } .kb-why-img { position:relative; overflow:hidden; min-height:480px; } .kb-why-img img { width:100%; height:100%; object-fit:cover; display:block; } .kb-why-img::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, #FAF3F1 0%, transparent 40%); } .kb-why-eyebrow { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.34em; text-transform:uppercase; color:#B57A4A; margin-bottom:var(--s-5); display:flex; align-items:center; gap:10px; } .kb-why-eyebrow::before { content:''; width:22px; height:1px; background:#B57A4A; display:inline-block; } .kb-why-title { font-family:'Bodoni Moda',serif; font-style:italic; font-weight:normal; font-size:clamp(36px,4.5vw,60px); line-height:1.08; letter-spacing:-0.02em; color:#2C1810; margin-bottom:var(--s-6); } .kb-why-body { font-family:'Inter',sans-serif; font-size:14px; line-height:1.78; color:rgba(44,24,16,0.50); max-width:380px; margin-bottom:var(--s-8); } .kb-why-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); margin-top:var(--s-6); border-top:1px solid rgba(44,24,16,0.08); padding-top:var(--s-6); } .kb-why-feat-icon { font-size:22px; margin-bottom:var(--s-2); } .kb-why-feat-title { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:16px; color:#2C1810; margin-bottom:4px; } .kb-why-feat-desc { font-family:'Inter',sans-serif; font-size:11px; line-height:1.6; color:rgba(44,24,16,0.40); } /* CIRCULAR PRODUCTS ROW */ .kb-circle-row { padding:var(--s-10) var(--frame-pad-x); border-top:1px solid rgba(44,24,16,0.08); border-bottom:1px solid rgba(44,24,16,0.08); } .kb-circle-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--s-6); } .kb-circles-track { display:flex; gap:var(--s-5); overflow-x:auto; padding-bottom:var(--s-2); } .kb-circles-track::-webkit-scrollbar { display:none; } .kb-circle-item { flex:0 0 auto; text-align:center; cursor:pointer; } .kb-circle-img { width:120px; height:120px; border-radius:50%; overflow:hidden; margin:0 auto var(--s-3); border:2px solid rgba(44,24,16,0.08); transition:border-color 0.3s; background:#FFF0EC; -webkit-mask-image:-webkit-radial-gradient(white,black); } .kb-circle-item:hover .kb-circle-img { border-color:#D4607A; } .kb-circle-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; } .kb-circle-item:hover .kb-circle-img img { transform:scale(1.10); } .kb-circle-name { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(44,24,16,0.38); white-space:nowrap; transition:color 0.2s; } .kb-circle-item:hover .kb-circle-name { color:#2C1810; } /* POSTS / EDITORIAL — 4-card sharp dark grid */ .kb-posts { padding:var(--s-12) var(--frame-pad-x) 0; border-top:1px solid rgba(44,24,16,0.08); } .kb-posts-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--s-6); } .kb-posts-title { font-family:'Bodoni Moda',serif; font-style:italic; font-weight:normal; font-size:clamp(40px,5vw,68px); line-height:0.95; letter-spacing:-0.025em; color:#2C1810; } .kb-posts-title em { font-style:normal; color:#D4607A; } .kb-posts-actions { display:flex; align-items:center; gap:var(--s-3); flex-shrink:0; padding-bottom:8px; } .kb-posts-cta { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:0; background:#2C1810; color:#FDF6EE; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; text-decoration:none; transition:opacity 0.2s; } .kb-posts-cta:hover { opacity:0.78; } .kb-posts-arrow { width:38px; height:38px; border-radius:0; border:1px solid rgba(44,24,16,0.18); display:flex; align-items:center; justify-content:center; color:#2C1810; font-size:15px; cursor:pointer; background:#fff; transition:all 0.2s; user-select:none; } .kb-posts-arrow:hover { background:#2C1810; color:#FDF6EE; border-color:#2C1810; } .kb-posts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; } .kb-post-card { background:#1A1209; border-radius:0; border:none; position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer; display:block; } .kb-post-card:hover .kb-post-img img { transform:scale(1.06); } .kb-post-img { position:absolute; inset:0; height:auto; } .kb-post-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s; } .kb-post-tag { position:absolute; top:0; left:16px; z-index:3; writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); padding:14px 8px; background:#FAF3F1; color:#2C1810; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.20em; text-transform:uppercase; font-weight:600; border:none; border-radius:0; } .kb-post-card-body { position:absolute; bottom:0; left:0; right:0; padding:18px 20px 22px; background:linear-gradient(0deg, rgba(14,10,7,0.97) 0%, rgba(14,10,7,0.60) 60%, transparent 100%); z-index:2; display:flex; flex-direction:column; } .kb-post-title { font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600; font-style:italic; line-height:1.25; letter-spacing:-0.01em; color:#FDF6EE; margin-bottom:10px; } .kb-post-desc { display:none; } .kb-post-meta { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(253,246,238,0.40); margin-bottom:8px; } .kb-post-footer { display:flex; justify-content:flex-end; margin-top:6px; } .kb-post-arrow-btn { width:30px; height:30px; border-radius:0; border:1px solid rgba(253,246,238,0.30); display:flex; align-items:center; justify-content:center; color:#FDF6EE; font-size:14px; transition:all 0.2s; } .kb-post-card:hover .kb-post-arrow-btn { background:#FDF6EE; color:#2C1810; } .kb-newsletter { display:grid; grid-template-columns:1fr 1fr; min-height:380px; } .kb-nl-text { padding:64px var(--frame-pad-x); background:#D4607A; display:flex; flex-direction:column; justify-content:center; } .kb-nl-title { font-family:'Bodoni Moda',serif; font-style:italic; font-weight:normal; font-size:clamp(32px,3.5vw,52px); line-height:1.05; color:#fff; letter-spacing:-0.02em; margin-bottom:var(--s-4); } .kb-nl-sub { font-family:'Inter',sans-serif; font-size:13px; color:rgba(255,255,255,0.72); line-height:1.65; margin-bottom:var(--s-6); } .kb-nl-form { display:flex; gap:0; max-width:380px; } .kb-nl-input { flex:1; padding:13px 18px; background:rgba(255,255,255,0.20); border:1px solid rgba(255,255,255,0.40); border-right:none; border-radius:999px 0 0 999px; color:#fff; font-size:13px; outline:none; } .kb-nl-input::placeholder { color:rgba(255,255,255,0.55); } .kb-nl-submit { padding:13px 22px; background:#fff; color:#D4607A; border:none; border-radius:0 999px 999px 0; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; font-weight:600; transition:opacity 0.2s; } .kb-nl-submit:hover { opacity:0.84; } .kb-nl-img { overflow:hidden; position:relative; background:#FAF3F1; } .kb-nl-img img { width:100%; height:100%; object-fit:cover; display:block; } /* ══════════════════════════════════════════════════════════════ */ /* LIGHT EDITORIAL OVERRIDE — K-Pop Page Unification (2026-05-13) */ /* Converts NCT WISH / TWS from dark cyber-editorial → light blue */ /* editorial to match mobile_preview.html parity. */ /* Non-destructive: re-binds page-scoped CSS variables only. */ /* Place BEFORE Elementor migration so tokens cascade in widgets. */ /* ══════════════════════════════════════════════════════════════ */ /* ── NCT WISH · light blue editorial ── */ .page-nct-wish { --nw-paper: #0F1B45; --nw-paper-70: rgba(15,27,69,0.70); --nw-paper-50: rgba(15,27,69,0.50); --nw-paper-30: rgba(15,27,69,0.30); --nw-hairline: rgba(15,27,69,0.12); --nw-hairline-strong: rgba(15,27,69,0.22); --nw-glass: rgba(255,255,255,0.62); --nw-glass-strong: rgba(255,255,255,0.78); --nw-glass-bd: rgba(15,27,69,0.10); --nw-glass-bd-2: rgba(15,27,69,0.18); --nw-neon: #4AB8C0; --nw-mint: #4AB8C0; --nw-moss: #95B3A8; --nw-rouge: #D4607A; } .page-nct-wish.tab-page-frame, section.page-nct-wish { background: #FAFAF9; } .page-nct-wish.tab-page-frame::after { background: radial-gradient(circle, rgba(74,184,192,0.20), transparent 70%); opacity: 0.65; } .page-nct-wish .nw-pageseg .ps.on { background: var(--nw-neon); color: #FFFFFF; border-color: var(--nw-neon); } .page-nct-wish .nw-pageseg .ps.on .pbar { background: #FFFFFF; } .page-nct-wish .nw-ribbon { background: rgba(255,255,255,0.78); } .page-nct-wish .nw-bignum .bn-num.dim { -webkit-text-stroke: 1.2px var(--nw-paper-30); } .nw-bridge { background: #FAFAF9; } /* ── TWS · light vivid blue editorial ── */ .page-tws { --tw-blue: #1565FF; --tw-blue-2: rgba(21,101,255,0.40); --tw-paper: #0F1B45; --tw-paper-70: rgba(15,27,69,0.70); --tw-paper-50: rgba(15,27,69,0.50); --tw-paper-30: rgba(15,27,69,0.30); --tw-hairline: rgba(15,27,69,0.12); --tw-hairline-strong: rgba(15,27,69,0.22); --tw-glass: rgba(255,255,255,0.62); --tw-glass-strong: rgba(255,255,255,0.78); --tw-glass-bd: rgba(15,27,69,0.10); --tw-glass-bd-2: rgba(15,27,69,0.18); } .page-tws.tab-page-frame, section.page-tws { background: #FAFAF9 !important; } .tw-bridge { background: #FAFAF9; } /* ── Shared K-Pop page foundation ── */ .tab-page-frame.page-nct-wish, .tab-page-frame.page-tws { background: #FAFAF9; } /* Soft aurora orb (replaces dark cyber glow) */ .tab-page-frame.page-nct-wish::before, .tab-page-frame.page-tws::before { content: ''; position: absolute; pointer-events: none; z-index: 0; width: 520px; height: 520px; border-radius: 50%; filter: blur(120px); background: radial-gradient(circle, rgba(74,184,192,0.16), transparent 70%); top: -180px; left: -160px; } .tab-page-frame.page-tws::before { background: radial-gradient(circle, rgba(21,101,255,0.14), transparent 70%); } /* Frame corners visible on light bg */ .page-nct-wish .nw-frame-corner, .page-tws .nw-frame-corner { border-color: rgba(15,27,69,0.22); } /* ── KB Article Detail Page ── */ .kb-post-detail { display:none; } .kb-post-detail.active { display:block; position:fixed; inset:0; z-index:9999; overflow-y:auto; background:#FAF3F1; } .kb-article-topbar { display:flex; align-items:center; justify-content:space-between; padding:20px var(--frame-pad-x) 16px; border-bottom:1px solid rgba(44,24,16,0.07); } .kb-back-btn { display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(44,24,16,0.45); background:none; border:none; cursor:pointer; padding:0; transition:color 0.2s; } .kb-back-btn:hover { color:#D4607A; } .kb-article-topmeta { display:flex; align-items:center; gap:var(--s-4); font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(44,24,16,0.34); } .kb-article-topmeta .kbp-cat { color:#D4607A; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; } .kb-article-title-wrap { padding:48px var(--frame-pad-x) 40px; } .kb-article-heading { font-family:'BodoniModa',serif; font-style:italic; font-weight:normal; font-size:clamp(36px,5vw,72px); line-height:1.05; letter-spacing:-0.025em; color:#2C1810; max-width:820px; } .kb-article-hero-img { margin:0 var(--frame-pad-x) var(--s-10); border-radius:20px; overflow:hidden; height:520px; } .kb-article-hero-img img { width:100%; height:100%; object-fit:cover; display:block; } .kb-article-body { display:grid; grid-template-columns:180px 1fr; gap:var(--s-12); padding:0 var(--frame-pad-x) 80px; max-width:1100px; } .kb-article-sidebar { position:sticky; top:32px; align-self:start; } .kb-article-sidebar-label { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(44,24,16,0.32); margin-bottom:6px; } .kb-article-sidebar-val { font-family:'Inter',sans-serif; font-size:13px; color:#2C1810; margin-bottom:var(--s-5); } .kb-article-share-links { display:flex; flex-direction:column; gap:4px; } .kb-article-share-links a { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(44,24,16,0.42); text-decoration:none; transition:color 0.2s; } .kb-article-share-links a:hover { color:#D4607A; } .kb-article-content p { font-family:'Inter',sans-serif; font-size:15px; line-height:1.85; color:rgba(44,24,16,0.70); margin-bottom:var(--s-5); } .kb-article-content h2 { font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:600; color:#2C1810; letter-spacing:-0.015em; margin:var(--s-8) 0 var(--s-3); border-top:1px solid rgba(44,24,16,0.07); padding-top:var(--s-6); } .kb-article-content .lead { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; color:rgba(44,24,16,0.65); line-height:1.6; margin-bottom:var(--s-6); font-style:italic; } /* ══════════════════════════════════════════════════════════════ */ /* LIGHT EDITORIAL DEPTH PASS (2026-05-13 evening) */ /* Fix: white-text-on-white-bg + atmospheric gradient background */ /* + accent color promotion (mobile parity) */ /* ══════════════════════════════════════════════════════════════ */ /* Re-bind generic --fg tokens inside K-Pop pages → cascades to */ /* every inline style="color:var(--fg)" usage */ .page-nct-wish { --fg: #0F1B45; --fg-mute: rgba(15,27,69,0.62); --fg-subtle: rgba(15,27,69,0.42); --glass: rgba(255,255,255,0.62); --glass-strong: rgba(255,255,255,0.78); --border: rgba(15,27,69,0.18); } .page-tws { --fg: #0F1B45; --fg-mute: rgba(15,27,69,0.62); --fg-subtle: rgba(15,27,69,0.42); --glass: rgba(255,255,255,0.62); --glass-strong: rgba(255,255,255,0.78); --border: rgba(15,27,69,0.18); } /* SVG logo hardcoded fill="#fff" → accent color */ .page-nct-wish svg[fill="#fff"], .page-nct-wish svg[fill="#FFF"], .page-nct-wish svg[fill="#ffffff"] { fill: var(--nw-neon); } .page-tws svg[fill="#fff"], .page-tws svg[fill="#FFF"], .page-tws svg[fill="#ffffff"] { fill: var(--tw-blue); } /* Atmospheric gradient mesh (mobile aurora parity) */ .tab-page-frame.page-nct-wish { background: radial-gradient(ellipse 60% 50% at 12% 20%, rgba(74,184,192,0.14), transparent 60%), radial-gradient(ellipse 50% 45% at 88% 78%, rgba(149,179,168,0.12), transparent 65%), radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,255,255,1), transparent 70%), #F5F2EC; } .tab-page-frame.page-tws { background: radial-gradient(ellipse 60% 50% at 14% 22%, rgba(21,101,255,0.12), transparent 60%), radial-gradient(ellipse 50% 45% at 86% 76%, rgba(110,141,255,0.10), transparent 65%), radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,255,255,1), transparent 70%), #F5F2EC !important; } section.page-nct-wish, section.page-tws { background: transparent !important; } .nw-bridge, .tw-bridge { background: transparent; } /* Decorative atmosphere — accent tint on frame/marquee */ .page-nct-wish .nw-vrot { color: rgba(74,184,192,0.50); } .page-nct-wish .nw-vrot::before { background: rgba(74,184,192,0.40); } .page-nct-wish .nw-vrot .vh { color: rgba(15,27,69,0.85); } .page-nct-wish .nw-frame-corner { border-color: rgba(74,184,192,0.35); } .page-tws .nw-frame-corner { border-color: rgba(21,101,255,0.30); } /* Eyebrow lines · accent dot connection */ .page-nct-wish .eyebrow, .page-tws .eyebrow { color: var(--fg-mute); } .page-nct-wish .eyebrow::before { background: var(--nw-neon); } .page-tws .eyebrow::before { background: var(--tw-blue); } /* Glass callout cards (Bitácora · FAN NOTES · etc) */ .page-nct-wish .nw-bitacora, .page-nct-wish .nw-callout, .page-tws .tw-foot-mark, .page-tws .tw-callout, .page-tws .tw-glass-info { background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(15,27,69,0.10); box-shadow: 0 4px 18px rgba(15,27,69,0.06), inset 0 1px 0 rgba(255,255,255,0.95); color: var(--fg); } .page-nct-wish .nw-bitacora *, .page-tws .tw-foot-mark * { color: var(--fg); } /* TWS ribbon (Plot Twist tagline) on light */ .page-tws .tw-ribbon { background: rgba(255,255,255,0.82); border: 1px solid rgba(21,101,255,0.22); color: var(--fg); } .page-tws .tw-ribbon-txt { color: var(--fg); } .page-tws .tw-ribbon-txt em { color: var(--tw-blue); } /* NCT WISH ribbon (Songbird era) on light */ .page-nct-wish .nw-ribbon { background: rgba(255,255,255,0.82); border-color: rgba(74,184,192,0.24); } .page-nct-wish .nw-ribbon .rbtxt { color: var(--fg); } .page-nct-wish .nw-ribbon .rbtxt em { color: var(--nw-neon); } .page-nct-wish .nw-ribbon .rbtgl { color: var(--fg-mute); border-left-color: rgba(15,27,69,0.16); } .page-nct-wish .nw-ribbon .rbtgl .tdot { background: var(--nw-neon); box-shadow: 0 0 6px var(--nw-neon); } /* Pageseg pills */ .page-nct-wish .nw-pageseg .ps { border-color: rgba(15,27,69,0.18); color: var(--fg-mute); background: rgba(255,255,255,0.50); } /* Big stroke-only numbers (dim year) */ .page-nct-wish .nw-bignum .bn-num.dim { color: transparent; -webkit-text-stroke: 1.2px rgba(15,27,69,0.32); } .page-tws .tw-bn-num.dim { color: transparent; -webkit-text-stroke: 1.2px rgba(15,27,69,0.32); } /* Section eyebrow underline / divider */ .page-nct-wish .section-eyebrow::before { background: var(--nw-neon); } .page-tws .tw-kicker::before { background: var(--tw-blue); } /* Asterisk decorations */ .page-nct-wish .nw-aster { color: rgba(74,184,192,0.55); } .page-nct-wish .nw-aster.dim { color: rgba(15,27,69,0.18); } .page-nct-wish .nw-aster.neon { color: var(--nw-neon); } /* Issue tag (top-left of arch image) */ .page-nct-wish .nw-issue-tag, .page-tws .tw-issue-tag { background: rgba(255,255,255,0.80); color: var(--fg); border: 1px solid rgba(15,27,69,0.12); } /* Member card / generic glass surfaces on light */ .page-nct-wish .member-card, .page-tws .tw-member-row { background: rgba(255,255,255,0.50); border: 1px solid rgba(15,27,69,0.08); } .page-nct-wish .member-card:hover { background: rgba(255,255,255,0.72); } /* MV thumb captions */ .page-nct-wish .mv-caption, .page-tws .mv-caption { color: var(--fg-mute); } .page-nct-wish .mv-caption em, .page-tws .mv-caption em { color: var(--fg); } .page-nct-wish .mvidx, .page-tws .mvidx { color: var(--fg-subtle); } /* ══════════════════════════════════════════════════════════════ */ /* FULL LIGHT MODE — All K-Pop sub-sections (2026-05-13 night) */ /* Covers: members · MV · wedge bilingual/wordplay · diary · */ /* patreon-cta · post cards · TWS-specific list rows */ /* ══════════════════════════════════════════════════════════════ */ /* Force all K-Pop sub-sections to transparent (inherit atmosphere) */ .page-nct-wish.tab-page-frame > section, .page-tws.tab-page-frame > section, .page-nct-wish .tab-mv, .page-nct-wish .tab-members, .page-nct-wish .tab-wedge, .page-nct-wish .tab-diary, .page-nct-wish .tab-patreon-cta, .page-tws .tab-mv, .page-tws .tab-members, .page-tws .tab-wedge, .page-tws .tab-diary, .page-tws .tab-patreon-cta { background: transparent !important; } .page-nct-wish .tab-hero-bg, .page-tws .tab-hero-bg { background: transparent; } /* === MEMBERS — light pastel gradient with accent depth === */ .page-nct-wish .member-card-bg { background: linear-gradient( 180deg, rgba(255,255,255,0.92) 0%, rgba(74,184,192,0.28) 50%, rgba(74,184,192,0.55) 100% ) !important; } .page-tws .member-card-bg { background: linear-gradient( 180deg, rgba(255,255,255,0.92) 0%, rgba(21,101,255,0.20) 50%, rgba(21,101,255,0.42) 100% ) !important; } .page-nct-wish .member-card:hover .member-card-bg { background: linear-gradient( 180deg, rgba(255,255,255,0.95) 0%, rgba(74,184,192,0.40) 50%, rgba(74,184,192,0.70) 100% ) !important; } .page-tws .member-card:hover .member-card-bg { background: linear-gradient( 180deg, rgba(255,255,255,0.95) 0%, rgba(21,101,255,0.32) 50%, rgba(21,101,255,0.58) 100% ) !important; } .page-nct-wish .member-card-initial, .page-tws .member-card-initial { color: rgba(15,27,69,0.65); mix-blend-mode: normal; } .page-nct-wish .member-name, .page-tws .member-name { color: var(--fg); } .page-nct-wish .member-meta, .page-tws .member-meta, .page-nct-wish .member-note, .page-tws .member-note { color: var(--fg-mute); } /* === WEDGE bilingual + wordplay — light glass examples === */ .page-nct-wish .bilingual-example, .page-tws .bilingual-example, .page-nct-wish .wordplay-list li, .page-tws .wordplay-list li { background: rgba(255,255,255,0.58); border: 1px solid rgba(15,27,69,0.08); box-shadow: 0 2px 12px rgba(15,27,69,0.04); } .page-nct-wish .ex-jp, .page-tws .ex-jp, .page-nct-wish .wp-track, .page-tws .wp-track { color: var(--fg); } .page-nct-wish .ex-kr, .page-tws .ex-kr, .page-nct-wish .wp-hook, .page-tws .wp-hook { color: var(--fg-mute); } .page-nct-wish .ex-note, .page-tws .ex-note, .page-nct-wish .ex-tag, .page-tws .ex-tag { color: var(--fg-subtle); } /* Wedge background — subtle accent atmosphere */ .page-nct-wish .tab-wedge { background: linear-gradient(180deg, transparent 0%, rgba(74,184,192,0.04) 50%, transparent 100%) !important; } .page-tws .tab-wedge { background: linear-gradient(180deg, transparent 0%, rgba(21,101,255,0.04) 50%, transparent 100%) !important; } /* === SECTION TITLES, eyebrow, leads — dark navy === */ .page-nct-wish .section-title, .page-tws .section-title { color: var(--fg); } .page-nct-wish .section-title em { color: var(--nw-neon); } .page-tws .section-title em { color: var(--tw-blue); } .page-nct-wish .section-eyebrow, .page-tws .section-eyebrow, .page-nct-wish .section-lead, .page-tws .section-lead { color: var(--fg-mute); } /* === DIARY post cards (re-uses .post-card) === */ .page-nct-wish .post-card, .page-tws .post-card, .page-nct-wish .nw-post-card, .page-tws .tw-post-card { background: rgba(255,255,255,0.65); border: 1px solid rgba(15,27,69,0.08); box-shadow: 0 4px 18px rgba(15,27,69,0.06); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .page-nct-wish .post-card-title, .page-tws .post-card-title, .page-nct-wish .nw-post-title, .page-tws .tw-post-title { color: var(--fg); } .page-nct-wish .post-card-meta, .page-tws .post-card-meta, .page-nct-wish .nw-post-meta, .page-tws .tw-post-meta { color: var(--fg-mute); } .page-nct-wish .post-card-cat, .page-nct-wish .nw-post-cat { color: var(--nw-neon); border-color: rgba(74,184,192,0.30); } .page-tws .post-card-cat, .page-tws .tw-post-cat { color: var(--tw-blue); border-color: rgba(21,101,255,0.30); } /* === PATREON CTA on light === */ .page-nct-wish .tab-patreon-cta, .page-tws .tab-patreon-cta { background: radial-gradient(ellipse at center, rgba(255,255,255,0.45) 0%, transparent 70%) !important; } .page-nct-wish .tab-patreon-cta .section-lead, .page-tws .tab-patreon-cta .section-lead { color: var(--fg-mute); } .page-nct-wish .btn-pill-large, .page-tws .btn-pill-large { background: var(--nw-neon); color: #FFFFFF; border: 1px solid var(--nw-neon); } .page-tws .btn-pill-large { background: var(--tw-blue); border-color: var(--tw-blue); } /* === MV section (used by both pages) === */ .page-nct-wish .mv-frame, .page-tws .mv-frame { background: rgba(255,255,255,0.45); box-shadow: 0 8px 32px rgba(15,27,69,0.10); } /* === Force section.page-tws override (was #0A0A0F at line 2617) === */ section.page-tws, section.page-nct-wish { background: transparent !important; border-top: none !important; } /* === TWS-specific elements (light editorial parity) === */ .page-tws .tw-member-row, .page-tws .tw-member-list .tw-member-row { background: rgba(255,255,255,0.50); border: 1px solid rgba(15,27,69,0.08); } .page-tws .tw-minitial { color: rgba(15,27,69,0.45); } .page-tws .tw-member-row:hover .tw-minitial { color: var(--tw-blue); } .page-tws .tw-mv-item { background: rgba(255,255,255,0.45); border: 1px solid rgba(15,27,69,0.10); box-shadow: 0 4px 16px rgba(15,27,69,0.06); } .page-tws .tw-mv-overlay { background: rgba(15,27,69,0.18) !important; } .page-tws .tw-mv-item a:hover .tw-mv-overlay { background: rgba(15,27,69,0.08) !important; } .page-tws .tw-mv-play, .page-nct-wish .nw-mv-play { background: rgba(255,255,255,0.92); box-shadow: 0 4px 14px rgba(15,27,69,0.18); } .page-tws .tw-wp-track { background: rgba(255,255,255,0.55); border: 1px solid rgba(15,27,69,0.08); } .page-tws .tw-wp-note { color: var(--fg-mute); } /* === Hero video / video overlay (TWS hero) === */ .page-tws .tw-hero-vid-overlay { background: rgba(15,27,69,0.15) !important; } .page-tws .tw-hero-vid:hover .tw-hero-vid-overlay { background: rgba(15,27,69,0.06) !important; } .page-tws .tw-hero-vid-play { background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .page-nct-wish .nw-mv-overlay { background: rgba(15,27,69,0.15) !important; } .page-nct-wish .nw-mv-thumb:hover .nw-mv-overlay { background: rgba(15,27,69,0.05) !important; } /* === Footer (route-* body class on K-Pop pages) === */ body.route-nct-wish .site-footer, body.route-nct-wish .footer-bottom, body.route-tws .site-footer, body.route-tws .footer-bottom { background: #F5F2EC !important; color: var(--fg); } /* === Decorative dark divider lines → soft hairlines === */ .page-nct-wish hr, .page-tws hr, .page-nct-wish .divider, .page-tws .divider { border-color: rgba(15,27,69,0.10); background: rgba(15,27,69,0.10); } /* === Catch-all: any white text inside K-Pop pages should be dark === */ .page-nct-wish [style*="color:#fff"], .page-nct-wish [style*="color: #fff"], .page-tws [style*="color:#fff"], .page-tws [style*="color: #fff"] { color: var(--fg) !important; } /* ══════════════════════════════════════════════════════════════ */ /* CRITICAL: Override body-level dark backgrounds */ /* Lines 2612 + 3102 force body.route-* to #0A0A0F !important. */ /* All sections sit on this dark body — must flip body itself. */ /* ══════════════════════════════════════════════════════════════ */ body.route-nct-wish, body.route-tws { background-image: radial-gradient(ellipse 80% 60% at 12% 18%, rgba(74,184,192,0.10), transparent 60%), radial-gradient(ellipse 70% 55% at 88% 80%, rgba(149,179,168,0.08), transparent 65%), radial-gradient(ellipse 100% 80% at 50% 50%, rgba(255,255,255,0.40), transparent 70%) !important; background-color: #F5F2EC !important; background-attachment: fixed !important; background-size: cover !important; color: var(--fg) !important; } body.route-tws { background-image: radial-gradient(ellipse 80% 60% at 14% 20%, rgba(21,101,255,0.10), transparent 60%), radial-gradient(ellipse 70% 55% at 86% 78%, rgba(110,141,255,0.08), transparent 65%), radial-gradient(ellipse 100% 80% at 50% 50%, rgba(255,255,255,0.40), transparent 70%) !important; } /* Re-bind --bg to cream within K-Pop body routes too */ body.route-nct-wish, body.route-tws { --bg: #F5F2EC; } /* All section.page-* siblings transparent (they sit on the body) */ section.page-nct-wish, section.page-tws, .tab-page-frame.page-nct-wish, .tab-page-frame.page-tws { background-color: transparent !important; } /* Re-apply page atmosphere on the hero frame only (gradients on transparent base) */ .tab-page-frame.page-nct-wish { background: radial-gradient(ellipse 60% 50% at 12% 20%, rgba(74,184,192,0.18), transparent 60%), radial-gradient(ellipse 50% 45% at 88% 78%, rgba(149,179,168,0.14), transparent 65%) !important; } .tab-page-frame.page-tws { background: radial-gradient(ellipse 60% 50% at 14% 22%, rgba(21,101,255,0.15), transparent 60%), radial-gradient(ellipse 50% 45% at 86% 76%, rgba(110,141,255,0.12), transparent 65%) !important; } /* Footer area override (re-confirm with explicit specificity) */ body.route-nct-wish .site-footer, body.route-nct-wish .footer-bottom, body.route-tws .site-footer, body.route-tws .footer-bottom { background: rgba(15,27,69,0.04) !important; color: var(--fg) !important; } body.route-nct-wish .footer-col h4, body.route-tws .footer-col h4 { color: var(--fg) !important; } body.route-nct-wish .footer-col a, body.route-tws .footer-col a { color: var(--fg-mute) !important; } body.route-nct-wish .footer-brand-tag, body.route-tws .footer-brand-tag { color: var(--fg-subtle) !important; } body.route-nct-wish .footer-bottom span, body.route-tws .footer-bottom span { color: var(--fg-subtle) !important; } /* ══════════════════════════════════════════════════════════════ */ /* FINAL POLISH (2026-05-13 night) */ /* 1. Rebind ALL paper tokens at body.route-* level (cascade) */ /* 2. Footer accent colors (NCT mint · TWS blue) */ /* 3. Fix invisible wp-note/wp-hook text */ /* 4. Diary/post grid → 4 per row */ /* 5. TWS hero hook text visible */ /* ══════════════════════════════════════════════════════════════ */ /* === Rebind ALL paper/text tokens at body.route-* === */ /* These cascade to footer (which sits outside .page-* divs) */ body.route-nct-wish { --fg: #0F1B45; --fg-mute: rgba(15,27,69,0.62); --fg-subtle: rgba(15,27,69,0.42); --nw-paper: #0F1B45; --nw-paper-70: rgba(15,27,69,0.70); --nw-paper-50: rgba(15,27,69,0.50); --nw-paper-30: rgba(15,27,69,0.30); --nw-neon: #4AB8C0; --nw-mint: #4AB8C0; } body.route-tws { --fg: #0F1B45; --fg-mute: rgba(15,27,69,0.62); --fg-subtle: rgba(15,27,69,0.42); --tw-paper: #0F1B45; --tw-p70: rgba(15,27,69,0.70); --tw-p50: rgba(15,27,69,0.55); --tw-p30: rgba(15,27,69,0.32); --tw-paper-70: rgba(15,27,69,0.70); --tw-paper-50: rgba(15,27,69,0.55); --tw-paper-30: rgba(15,27,69,0.32); --tw-blue: #1565FF; } /* === Footer accent colors per group === */ body.route-nct-wish .footer-col h4 { color: #4AB8C0 !important; /* NCT mint */ font-weight: 700; } body.route-tws .footer-col h4 { color: #1565FF !important; /* TWS vivid blue */ font-weight: 700; } body.route-nct-wish .footer-col a, body.route-tws .footer-col a { color: #0F1B45 !important; opacity: 0.85; } body.route-nct-wish .footer-col a:hover { color: #4AB8C0 !important; opacity: 1; } body.route-tws .footer-col a:hover { color: #1565FF !important; opacity: 1; } body.route-nct-wish .footer-brand-tag, body.route-tws .footer-brand-tag, body.route-nct-wish .footer-bottom, body.route-tws .footer-bottom, body.route-nct-wish .footer-bottom span, body.route-tws .footer-bottom span { color: rgba(15,27,69,0.55) !important; } body.route-nct-wish .footer-bottom, body.route-tws .footer-bottom { background: rgba(15,27,69,0.06) !important; border-top: 1px solid rgba(15,27,69,0.10); } body.route-nct-wish .site-footer, body.route-tws .site-footer { background: rgba(15,27,69,0.04) !important; border-top: 1px solid rgba(15,27,69,0.08); } /* === Wordplay description text (wp-note / wp-hook / tw-wp-note) === */ .page-nct-wish .wp-hook, .page-nct-wish .wp-note, .page-nct-wish .nw-wp-note, .page-tws .wp-hook, .page-tws .wp-note, .page-tws .tw-wp-note { color: var(--fg-mute) !important; } .page-nct-wish .wp-track, .page-tws .wp-track, .page-tws .tw-wp-track { color: var(--fg) !important; } .page-tws .tw-wp-track em { color: var(--tw-blue) !important; } .page-nct-wish .wp-track em { color: var(--nw-neon) !important; } /* === Diary/blog post grid → 4 per row === */ .page-nct-wish .tab-diary .post-grid, .page-tws .tab-diary .post-grid, .page-nct-wish .post-grid, .page-tws .post-grid { grid-template-columns: repeat(4, 1fr) !important; gap: var(--s-5) !important; } /* If there are more than 4 posts, hide the rest (clean preview) */ .page-nct-wish .tab-diary .post-grid > *:nth-child(n+5), .page-tws .tab-diary .post-grid > *:nth-child(n+5) { display: none; } /* === TWS hero hook (Not an official page text) === */ .page-tws .tab-hero-hook, .page-tws .tab-hero-hook p, .page-tws .tab-hero-hook * { color: var(--fg) !important; opacity: 1 !important; } .page-nct-wish .tab-hero-hook, .page-nct-wish .tab-hero-hook p, .page-nct-wish .tab-hero-hook * { color: var(--fg) !important; opacity: 1 !important; } /* === Catch-all for any remaining white text in K-Pop scope === */ .page-nct-wish [class*="hook"], .page-nct-wish [class*="lead"], .page-nct-wish [class*="note"], .page-tws [class*="hook"], .page-tws [class*="lead"], .page-tws [class*="note"] { color: var(--fg) !important; } .page-nct-wish [class*="hook"]:not(em):not(strong), .page-tws [class*="hook"]:not(em):not(strong) { color: var(--fg-mute) !important; } /* === TWS bignum dim year — readable outline on light === */ .page-tws .tw-bn-num.dim { color: transparent !important; -webkit-text-stroke: 1.4px rgba(15,27,69,0.35); } .page-tws .tw-bn-lbl, .page-nct-wish .nw-bignum .bn-lbl { color: var(--fg-subtle) !important; } /* === Eyebrow "IDOL NOTES · PLEDIS · 2024" visible === */ .page-tws .eyebrow, .page-nct-wish .eyebrow { color: var(--fg-mute) !important; } /* ══════════════════════════════════════════════════════════════ */ /* USER-DIRECTED CLEANUP PASS (2026-05-13 night#2) */ /* 1. nw-callout: remove glass effect (flat) */ /* 2. tw-foot-mark / nw-foot-mark: hide gray strip bar */ /* 3. footer h4: stronger specificity (mint/blue per route) */ /* ══════════════════════════════════════════════════════════════ */ /* nw-callout — flat (no glass, no blur, no shadow) */ .page-nct-wish .nw-callout, .page-nct-wish .nw-callout-flat { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: none !important; padding: 0 !important; } .page-nct-wish .nw-callout .co1 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); color: var(--nw-neon, #4AB8C0); text-shadow: 0 2px 18px rgba(74,184,192,0.30); letter-spacing: -0.01em; line-height: 1; } /* Hide tw-foot-mark + nw-foot-mark (the gray strip bar w/ 사사·42 etc) */ .tw-foot-mark, .nw-foot-mark, .page-tws .tw-foot-mark, .page-nct-wish .nw-foot-mark { display: none !important; } /* Footer h4 — stronger specificity, route-aware accent */ html body.route-nct-wish .site-footer .footer-col h4, html body.route-nct-wish .footer .footer-col h4 { color: #4AB8C0 !important; font-weight: 700; } html body.route-tws .site-footer .footer-col h4, html body.route-tws .footer .footer-col h4 { color: #1565FF !important; font-weight: 700; } html body.route-nct-wish .site-footer .footer-col a, html body.route-nct-wish .footer .footer-col a { color: rgba(15,27,69,0.85) !important; } html body.route-tws .site-footer .footer-col a, html body.route-tws .footer .footer-col a { color: rgba(15,27,69,0.85) !important; } html body.route-nct-wish .site-footer .footer-col a:hover { color: #4AB8C0 !important; } html body.route-tws .site-footer .footer-col a:hover { color: #1565FF !important; } /* If no route class is set yet but K-Pop page is in view (fallback) — */ /* tint the footer headings via :has() (modern browsers). */ body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .site-footer .footer-col h4 { color: #4AB8C0 !important; } body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .site-footer .footer-col h4 { color: #1565FF !important; } /* ══════════════════════════════════════════════════════════════ */ /* FOOTER BACKGROUND PER GROUP (2026-05-13 final) */ /* NCT WISH → mint background + navy text */ /* TWS → vivid blue background + white text */ /* ══════════════════════════════════════════════════════════════ */ /* === NCT WISH footer: MINT background + navy ink === */ html body.route-nct-wish .site-footer, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .site-footer { background: #4AB8C0 !important; border-top: 1px solid rgba(15,27,69,0.08) !important; } html body.route-nct-wish .footer-bottom, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .footer-bottom { background: #3FA89C !important; border-top: 1px solid rgba(255,255,255,0.18) !important; } html body.route-nct-wish .site-footer .footer-col h4, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .site-footer .footer-col h4 { color: #FFFFFF !important; font-weight: 700; letter-spacing: 0.16em; } html body.route-nct-wish .site-footer .footer-col a, html body.route-nct-wish .site-footer .footer-col p, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .site-footer .footer-col a, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .site-footer .footer-col p { color: rgba(255,255,255,0.92) !important; opacity: 1 !important; } html body.route-nct-wish .site-footer .footer-col a:hover, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .site-footer .footer-col a:hover { color: #0F1B45 !important; } html body.route-nct-wish .site-footer .footer-brand-tag, html body.route-nct-wish .footer-bottom, html body.route-nct-wish .footer-bottom span, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .footer-bottom, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .footer-bottom span { color: rgba(255,255,255,0.78) !important; } html body.route-nct-wish .site-footer svg[fill="#fff"], html body.route-nct-wish .site-footer svg[fill="#FDF6EE"] { fill: #FFFFFF !important; } /* === TWS footer: VIVID BLUE background + white ink === */ html body.route-tws .site-footer, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .site-footer { background: #1565FF !important; border-top: 1px solid rgba(255,255,255,0.18) !important; } html body.route-tws .footer-bottom, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .footer-bottom { background: #0F4FD9 !important; border-top: 1px solid rgba(255,255,255,0.18) !important; } html body.route-tws .site-footer .footer-col h4, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .site-footer .footer-col h4 { color: #FFFFFF !important; font-weight: 700; letter-spacing: 0.16em; } html body.route-tws .site-footer .footer-col a, html body.route-tws .site-footer .footer-col p, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .site-footer .footer-col a, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .site-footer .footer-col p { color: rgba(255,255,255,0.94) !important; opacity: 1 !important; } html body.route-tws .site-footer .footer-col a:hover, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .site-footer .footer-col a:hover { color: rgba(255,255,255,0.70) !important; } html body.route-tws .site-footer .footer-brand-tag, html body.route-tws .footer-bottom, html body.route-tws .footer-bottom span, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .footer-bottom, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .footer-bottom span { color: rgba(255,255,255,0.82) !important; } html body.route-tws .site-footer svg[fill="#fff"], html body.route-tws .site-footer svg[fill="#FDF6EE"] { fill: #FFFFFF !important; } /* === Logo + wordmark in colored footers (force white) === */ html body.route-nct-wish .site-footer .footer-logo, html body.route-nct-wish .site-footer .footer-logo a, html body.route-tws .site-footer .footer-logo, html body.route-tws .site-footer .footer-logo a { color: #FFFFFF !important; } /* ══════════════════════════════════════════════════════════════ */ /* GRADIENT SEAM FIX + CLICK SAFETY (2026-05-13 final#2) */ /* 1. Body bg → solid cream (no fixed-attach gradient bands) */ /* 2. Atmosphere → moved to page-frame only (scrolls with content) */ /* 3. Click safety — ensure no overlay blocks pointer events */ /* ══════════════════════════════════════════════════════════════ */ /* Body backgrounds: solid cream (gradient seam fixed) */ body.route-nct-wish, body.route-tws { background-image: none !important; background-color: #F5F2EC !important; background-attachment: scroll !important; } /* Page-frame atmospheric gradients (scroll with content, no seam) */ .tab-page-frame.page-nct-wish { background: radial-gradient(ellipse 90% 60% at 12% 12%, rgba(74,184,192,0.16), transparent 55%), radial-gradient(ellipse 80% 50% at 88% 88%, rgba(149,179,168,0.14), transparent 60%), #F5F2EC !important; } .tab-page-frame.page-tws { background: radial-gradient(ellipse 90% 60% at 14% 12%, rgba(21,101,255,0.15), transparent 55%), radial-gradient(ellipse 80% 50% at 86% 88%, rgba(110,141,255,0.12), transparent 60%), #F5F2EC !important; } /* Sibling sections (members·mv·wedge·diary·patreon-cta) get same body cream */ section.page-nct-wish, section.page-tws { background: #F5F2EC !important; } /* Each K-Pop section gets ITS OWN gradient atmosphere */ section.page-nct-wish.tab-members, section.page-nct-wish.tab-mv, section.page-nct-wish.tab-wedge, section.page-nct-wish.tab-diary, section.page-nct-wish.tab-patreon-cta { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(74,184,192,0.06), transparent 60%), #F5F2EC !important; } section.page-tws.tab-members, section.page-tws.tab-mv, section.page-tws.tab-wedge, section.page-tws.tab-diary, section.page-tws.tab-patreon-cta { background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(21,101,255,0.05), transparent 60%), #F5F2EC !important; } /* Bridges between sections — match cream */ .nw-bridge, .tw-bridge { background: #F5F2EC !important; } /* Remove the (n+5) hide rule — we now have exactly 4 posts each */ .page-nct-wish .tab-diary .post-grid > *:nth-child(n+5), .page-tws .tab-diary .post-grid > *:nth-child(n+5) { display: grid !important; } /* === Click safety net — ensure no decorative element blocks clicks === */ /* All ::before / ::after aurora orbs must have pointer-events: none */ .tab-page-frame.page-nct-wish::before, .tab-page-frame.page-nct-wish::after, .tab-page-frame.page-tws::before, .tab-page-frame.page-tws::after { pointer-events: none !important; z-index: 0 !important; } /* All post cards explicitly clickable */ .kb-post-card, .post-card, article.post-card { cursor: pointer !important; pointer-events: auto !important; position: relative; z-index: 5; } /* All clickable buttons / links pass through */ button, a, [onclick], [role="button"] { pointer-events: auto !important; } /* ══════════════════════════════════════════════════════════════ */ /* UNIFIED BROWN FOOTER (2026-05-13 final#3) */ /* User-directed: ALL 4 tabs (Home · K-Beauty · NCT WISH · TWS) */ /* share one consistent brown footer. */ /* Color: #170B06 (deep brown, already in design system) */ /* Text: #FDF6EE (cream, contrasts brown bg) */ /* Accent: #F29BB2 (soft pink for h4, kept from home palette) */ /* ══════════════════════════════════════════════════════════════ */ /* Reset & unify ALL footers — overrides every previous body.route-* */ html body .site-footer, html body.route-nct-wish .site-footer, html body.route-tws .site-footer, html body.route-kbeauty .site-footer, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .site-footer, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .site-footer, html body:has(.tab-page-frame.page-kbeauty:not([style*="display: none"])) .site-footer { background: #170B06 !important; border-top: 1px solid rgba(253,246,238,0.10) !important; color: #FDF6EE !important; } html body .footer-bottom, html body.route-nct-wish .footer-bottom, html body.route-tws .footer-bottom, html body.route-kbeauty .footer-bottom, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .footer-bottom, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .footer-bottom, html body:has(.tab-page-frame.page-kbeauty:not([style*="display: none"])) .footer-bottom { background: #170B06 !important; border-top: none !important; color: rgba(253,246,238,0.55) !important; } /* Footer h4 — accent pink (kept from home palette, looks good on brown) */ html body .site-footer .footer-col h4, html body.route-nct-wish .site-footer .footer-col h4, html body.route-tws .site-footer .footer-col h4, html body.route-kbeauty .site-footer .footer-col h4, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .site-footer .footer-col h4, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .site-footer .footer-col h4, html body:has(.tab-page-frame.page-kbeauty:not([style*="display: none"])) .site-footer .footer-col h4 { color: #F29BB2 !important; font-weight: 700; letter-spacing: 0.16em; } /* Footer links + body text — cream */ html body .site-footer .footer-col a, html body .site-footer .footer-col p, html body.route-nct-wish .site-footer .footer-col a, html body.route-nct-wish .site-footer .footer-col p, html body.route-tws .site-footer .footer-col a, html body.route-tws .site-footer .footer-col p, html body.route-kbeauty .site-footer .footer-col a, html body.route-kbeauty .site-footer .footer-col p, html body:has(.tab-page-frame.page-nct-wish:not([style*="display: none"])) .site-footer .footer-col a, html body:has(.tab-page-frame.page-tws:not([style*="display: none"])) .site-footer .footer-col a, html body:has(.tab-page-frame.page-kbeauty:not([style*="display: none"])) .site-footer .footer-col a { color: rgba(253,246,238,0.88) !important; opacity: 1 !important; } html body .site-footer .footer-col a:hover, html body.route-nct-wish .site-footer .footer-col a:hover, html body.route-tws .site-footer .footer-col a:hover, html body.route-kbeauty .site-footer .footer-col a:hover { color: #F29BB2 !important; } /* Footer brand tag + bottom strip text */ html body .site-footer .footer-brand-tag, html body .footer-bottom span, html body.route-nct-wish .site-footer .footer-brand-tag, html body.route-nct-wish .footer-bottom span, html body.route-tws .site-footer .footer-brand-tag, html body.route-tws .footer-bottom span, html body.route-kbeauty .site-footer .footer-brand-tag, html body.route-kbeauty .footer-bottom span { color: rgba(253,246,238,0.55) !important; } /* Logo/wordmark in brown footer */ html body .site-footer .footer-logo, html body .site-footer .footer-logo a, html body.route-nct-wish .site-footer .footer-logo, html body.route-nct-wish .site-footer .footer-logo a, html body.route-tws .site-footer .footer-logo, html body.route-tws .site-footer .footer-logo a, html body.route-kbeauty .site-footer .footer-logo, html body.route-kbeauty .site-footer .footer-logo a { color: #FDF6EE !important; } /* SVG icons in brown footer → cream */ html body .site-footer svg[fill="#fff"], html body .site-footer svg[fill="#FDF6EE"], html body.route-nct-wish .site-footer svg[fill="#fff"], html body.route-tws .site-footer svg[fill="#fff"], html body.route-kbeauty .site-footer svg[fill="#fff"] { fill: #FDF6EE !important; } /* ══════════════════════════════════════════════════════════════ */ /* PATREON CTA BUTTON (2026-05-13 final#4) */ /* NCT WISH → mint pill · TWS → vivid blue pill */ /* Centered, ~3rem padding, hover lift + glow */ /* ══════════════════════════════════════════════════════════════ */ .patreon-cta-btn { display: inline-flex; align-items: center; gap: 14px; margin: var(--s-8) auto 0; padding: 16px 36px; border-radius: 9999px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; text-transform: none; color: #FFFFFF; border: 1px solid transparent; cursor: pointer; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease; } /* Center inside the centered tab-patreon-cta section */ .tab-patreon-cta { text-align: center; } .tab-patreon-cta .patreon-cta-btn { /* margin auto works because of text-align:center on parent */ } .patreon-cta-btn .patreon-cta-label { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; } /* NCT WISH — mint */ .nw-patreon-btn, .page-nct-wish .patreon-cta-btn { background: #4AB8C0; box-shadow: 0 8px 28px rgba(74,184,192,0.32), inset 0 1px 0 rgba(255,255,255,0.20); } .nw-patreon-btn:hover, .page-nct-wish .patreon-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(74,184,192,0.42), inset 0 1px 0 rgba(255,255,255,0.24); filter: brightness(1.05); } /* TWS — vivid blue */ .tw-patreon-btn, .page-tws .patreon-cta-btn { background: #1565FF; box-shadow: 0 8px 28px rgba(21,101,255,0.32), inset 0 1px 0 rgba(255,255,255,0.18); } .tw-patreon-btn:hover, .page-tws .patreon-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(21,101,255,0.42), inset 0 1px 0 rgba(255,255,255,0.24); filter: brightness(1.05); } .patreon-cta-btn svg { flex-shrink: 0; } .patreon-cta-btn:active { transform: translateY(0); } /* ══════════════════════════════════════════════════════════════ */ /* SPOT FIXES (2026-05-13 final#5) */ /* 1. Bitácora & FAN NOTES cards — more transparent (lighter glass)*/ /* 2. Wordplay list — remove box backgrounds (text only) */ /* 3. TWS FAN NOTES card — moved up */ /* 4. Hide orphan play button + editorial frame corners */ /* ══════════════════════════════════════════════════════════════ */ /* === 1. Bitácora & TWS info card — more transparent === */ html .page-nct-wish .nw-bitacora, html .page-tws .tw-glass-info, html .page-tws .tw-foot-mark, html .page-tws .tw-callout { background: rgba(255,255,255,0.32) !important; -webkit-backdrop-filter: blur(18px) saturate(135%) !important; backdrop-filter: blur(18px) saturate(135%) !important; border: 1px solid rgba(255,255,255,0.42) !important; box-shadow: 0 4px 22px rgba(15,27,69,0.10), inset 0 1px 0 rgba(255,255,255,0.55) !important; } /* === 2. Wordplay list — remove box backgrounds === */ html .page-tws .wordplay-list li, html .page-tws .tw-wordplay-list .tw-wp-row, html .page-tws .tw-wp-track, html .page-nct-wish .wordplay-list li { background: transparent !important; border: none !important; box-shadow: none !important; padding: var(--s-3) 0 !important; border-bottom: 1px solid rgba(15,27,69,0.06) !important; border-radius: 0 !important; } html .page-tws .wordplay-list li:last-child, html .page-nct-wish .wordplay-list li:last-child { border-bottom: none !important; } /* === 3. TWS FAN NOTES card — move up === */ html .page-tws .tw-glass-info { margin-top: -40px !important; transform: translateY(-20px) !important; position: relative; z-index: 8; } /* === 4. Hide orphan play button on TWS hero (broken positioning) === */ /* And editorial frame corners that look out of place on light bg */ html .page-tws .tw-hero-vid-play, html .page-nct-wish .nw-frame-corner.tl, html .page-nct-wish .nw-frame-corner.tr, html .page-nct-wish .nw-frame-corner.bl, html .page-nct-wish .nw-frame-corner.br { display: none !important; } /* Keep tw-hero-vid (the video itself) clickable — only the play overlay hides */ html .page-tws .tw-hero-vid-overlay { background: rgba(0,0,0,0.05) !important; } /* "Issue 01 · Plot Twist" badge — remove dark glass, flat text only */ html .page-tws .tw-hero-vid-issue { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; padding: 4px 0 !important; color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 4px rgba(15,27,69,0.45); } /* TWS FAN NOTES card — move up 10px more (total 30px above original) */ html .page-tws .tw-glass-info { margin-top: -50px !important; transform: translateY(-30px) !important; } /* ══════════════════════════════════════════════════════════════ */ /* K-BEAUTY PRODUCT CAROUSEL FIX (2026-05-13 final#6) */ /* 1. Product card hover lift (-8px + scale 1.012) was being clipped /* by .product-carousel-wrap { overflow: hidden } */ /* 2. Carousel nav arrows look too deactivated when disabled */ /* ══════════════════════════════════════════════════════════════ */ /* Carousel wrap — add top padding so hover lift doesn't clip */ .product-carousel-wrap { padding-top: 14px !important; padding-bottom: 14px !important; margin-top: calc(var(--s-6) - 14px) !important; margin-bottom: -14px !important; } /* Nav arrows — more visible "active" look + softer "disabled" state */ .carousel-nav-btn { background: rgba(255,255,255,0.95) !important; border-color: rgba(26,8,8,0.28) !important; box-shadow: 0 2px 10px rgba(26,8,8,0.06); } .carousel-nav-btn:hover { background: #FFFFFF !important; border-color: #D4607A !important; color: #D4607A !important; transform: scale(1.08); box-shadow: 0 4px 16px rgba(212,96,122,0.18); } .carousel-nav-btn:disabled { opacity: 0.55 !important; cursor: not-allowed; transform: none; } /* ══════════════════════════════════════════════════════════════ */ /* POST DETAIL VIEWS — NCT WISH + TWS (2026-05-13 final#7) */ /* Hidden by default. Opens via JS showNwPost/showTwPost. */ /* Inherits kb-post-detail styling (shared). */ /* ══════════════════════════════════════════════════════════════ */ #nw-post-detail, #tw-post-detail { display: none; position: fixed; inset: 0; z-index: 9999; overflow-y: auto; background: #FAF7F1; padding-bottom: var(--s-16); } #nw-post-detail .kb-article-topbar, #tw-post-detail .kb-article-topbar { border-bottom: 1px solid rgba(15,27,69,0.08); } #nw-post-detail .kb-back-btn, #tw-post-detail .kb-back-btn { color: rgba(15,27,69,0.55); } #nw-post-detail .kb-back-btn:hover { color: #4AB8C0; } #tw-post-detail .kb-back-btn:hover { color: #1565FF; } #nw-post-detail .kb-article-topmeta .kbp-cat { color: #4AB8C0; } #tw-post-detail .kb-article-topmeta .kbp-cat { color: #1565FF; } #nw-post-detail .kb-article-topmeta, #tw-post-detail .kb-article-topmeta { color: rgba(15,27,69,0.40); } #nw-post-detail .kb-article-heading, #tw-post-detail .kb-article-heading { color: #0F1B45; font-family: 'Bodoni Moda', 'Playfair Display', serif; } #nw-post-detail .kb-article-sidebar-label, #tw-post-detail .kb-article-sidebar-label { color: rgba(15,27,69,0.40); } #nw-post-detail .kb-article-sidebar-val, #tw-post-detail .kb-article-sidebar-val { color: #0F1B45; } #nw-post-detail .kb-article-share-links a, #tw-post-detail .kb-article-share-links a { color: rgba(15,27,69,0.50); } #nw-post-detail .kb-article-share-links a:hover { color: #4AB8C0; } #tw-post-detail .kb-article-share-links a:hover { color: #1565FF; } #nw-post-detail .kb-article-content p, #tw-post-detail .kb-article-content p { color: rgba(15,27,69,0.75); } #nw-post-detail .kb-article-content h2, #tw-post-detail .kb-article-content h2 { color: #0F1B45; border-top: 1px solid rgba(15,27,69,0.08); } #nw-post-detail .kb-article-content .lead, #tw-post-detail .kb-article-content .lead { color: rgba(15,27,69,0.65); } /* Post cards — make them feel clickable */ .post-card { cursor: pointer !important; transition: transform 0.25s ease, box-shadow 0.25s ease; } .post-card:hover { transform: translateY(-4px); } .page-nct-wish .post-card:hover { box-shadow: 0 12px 32px rgba(74,184,192,0.15); } .page-tws .post-card:hover { box-shadow: 0 12px 32px rgba(21,101,255,0.15); } /* ══════════════════════════════════════════════════════════════ */ /* P0 #1 · WCAG AA CONTRAST AUDIT (2026-05-13 night) */ /* Body text ≥ 4.5:1 · Large text ≥ 3:1 */ /* Cream #F5F2EC base → navy at 0.50+ passes AA for body */ /* Brown #170B06 base → cream at 0.55+ passes AA */ /* ══════════════════════════════════════════════════════════════ */ /* Bump --fg-mute floor from 0.62 → 0.68, --fg-subtle 0.42 → 0.52 */ body.route-nct-wish, body.route-tws, .page-nct-wish, .page-tws { --fg-mute: rgba(15,27,69,0.68) !important; --fg-subtle: rgba(15,27,69,0.52) !important; } /* Eyebrow · kickers · captions · micro labels — minimum 0.60 */ .page-nct-wish .eyebrow, .page-tws .eyebrow, .page-nct-wish .nw-section-kicker, .page-tws .tw-kicker, .page-nct-wish .micro, .page-tws .micro, .page-nct-wish .nw-bn-lbl, .page-tws .tw-bn-lbl, .page-nct-wish .nw-bignum .bn-lbl { color: rgba(15,27,69,0.62) !important; font-weight: 600; } /* Post card meta + MV captions */ .page-nct-wish .post-card-meta, .page-tws .post-card-meta, .page-nct-wish .mvidx, .page-tws .mvidx, .page-nct-wish .mvdate, .page-tws .mvdate { color: rgba(15,27,69,0.62) !important; } /* Stroke-only "dim" year numbers — bump stroke opacity 0.30 → 0.45 */ .page-nct-wish .nw-bignum .bn-num.dim, .page-tws .tw-bn-num.dim { color: transparent !important; -webkit-text-stroke: 1.6px rgba(15,27,69,0.45) !important; } /* Carousel disabled buttons — darker base */ .carousel-nav-btn:disabled { opacity: 0.55 !important; color: rgba(26,8,8,0.90) !important; } /* Post detail sidebar labels (Author · Share) */ #nw-post-detail .kb-article-sidebar-label, #tw-post-detail .kb-article-sidebar-label, #kb-post-detail .kb-article-sidebar-label { color: rgba(15,27,69,0.60) !important; font-weight: 600; } #nw-post-detail .kb-article-share-links a, #tw-post-detail .kb-article-share-links a { color: rgba(15,27,69,0.68) !important; } /* Article body — enforce strong contrast */ #nw-post-detail .kb-article-content p, #tw-post-detail .kb-article-content p { color: rgba(15,27,69,0.80) !important; } #nw-post-detail .kb-article-content .lead, #tw-post-detail .kb-article-content .lead { color: rgba(15,27,69,0.72) !important; } /* TWS hero hook subtext */ .page-tws .tab-hero-hook p { color: rgba(15,27,69,0.78) !important; } /* Footer (brown bg) — cream ≥ 0.65 passes AA on #170B06 */ html body .site-footer .footer-col a, html body .site-footer .footer-col p { color: rgba(253,246,238,0.92) !important; } html body .footer-bottom span, html body .site-footer .footer-brand-tag { color: rgba(253,246,238,0.68) !important; } /* Hairline separators bumped 0.06 → 0.14 for visibility */ .page-nct-wish hr, .page-tws hr { border-color: rgba(15,27,69,0.14) !important; background: rgba(15,27,69,0.14) !important; } /* K-Beauty article body (peach palette) — enforce */ #kb-post-detail .kb-article-content p { color: rgba(44,24,16,0.80) !important; } #kb-post-detail .kb-article-content .lead { color: rgba(44,24,16,0.72) !important; } /* ════════════════════════════════════════════════════════════════ */ /* TWS LIGHT-MODE PARITY (2026-05-13 night) */ /* Match NCT format for meta strip · editorialize member grid · */ /* Restore bridge label visibility · glassmorphism throughout */ /* ════════════════════════════════════════════════════════════════ */ /* (A) Meta strip — match NCT format (visible labels + italic Playfair values) */ .page-tws .tab-hero-meta { border-top: 1px solid rgba(15,27,69,0.10) !important; border-bottom: 1px solid rgba(15,27,69,0.10) !important; padding: var(--s-6) 0 !important; margin-top: var(--s-12) !important; display: flex !important; gap: var(--s-12) !important; } .page-tws .tab-hero-meta div { display: flex !important; flex-direction: column !important; gap: 6px !important; } .page-tws .tab-hero-meta span { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: rgba(15,27,69,0.45) !important; } .page-tws .tab-hero-meta strong { font-family: 'Playfair Display', serif !important; font-weight: 400 !important; font-style: italic !important; font-size: 24px !important; letter-spacing: -0.01em !important; color: var(--fg) !important; margin-top: 4px !important; } /* (B) Bridge dividers — visible labels for light mode (01 · MEMBERS, 02 · VIDEOS) */ .tw-bridge { background: transparent !important; height: 56px !important; } .tw-bridge-line { background: linear-gradient(90deg, transparent, rgba(21,101,255,0.18), rgba(15,27,69,0.22), rgba(21,101,255,0.18), transparent) !important; } .tw-bridge-num { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.32em; color: rgba(21,101,255,0.78); font-weight: 600; flex-shrink: 0; } .tw-bridge-label { font-family: 'JetBrains Mono', monospace !important; font-size: 9.5px !important; letter-spacing: 0.40em !important; text-transform: uppercase !important; color: rgba(15,27,69,0.65) !important; font-weight: 500 !important; white-space: nowrap !important; flex-shrink: 0 !important; } .tw-bridge-dot { background: rgba(21,101,255,0.55) !important; } /* (C) MEMBER GRID — editorial glass cards replacing skeletal rows */ .page-tws .tw-member-list { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; border-top: none !important; margin-top: var(--s-10) !important; } @media (max-width: 900px) { .page-tws .tw-member-list { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .page-tws .tw-member-list { grid-template-columns: 1fr !important; } } .page-tws .tw-member-row { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; grid-template-columns: none !important; gap: 0 !important; padding: 22px 22px 24px !important; border: 1px solid rgba(255,255,255,0.55) !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(21,101,255,0.10) 60%, rgba(21,101,255,0.22) 100%) !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 14px 32px rgba(15,27,69,0.08) !important; overflow: hidden !important; transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), box-shadow 0.32s ease, background 0.32s ease !important; cursor: default !important; } .page-tws .tw-member-row::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 18px; background: radial-gradient( circle at 75% 18%, rgba(21,101,255,0.18), transparent 55%); opacity: 0.85; } .page-tws .tw-member-row:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(21,101,255,0.16) 60%, rgba(21,101,255,0.32) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 22px 44px rgba(15,27,69,0.14) !important; padding-left: 22px !important; /* override the earlier shift */ } /* Top row: num + initial */ .page-tws .tw-mnum { font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.28em !important; color: rgba(15,27,69,0.42) !important; margin-bottom: 14px !important; text-transform: uppercase !important; align-self: flex-start !important; } .page-tws .tw-minitial { font-family: 'Playfair Display', serif !important; font-style: italic !important; font-weight: 400 !important; font-size: 72px !important; letter-spacing: -0.045em !important; line-height: 0.85 !important; color: rgba(15,27,69,0.78) !important; margin-bottom: 16px !important; text-shadow: 0 2px 18px rgba(21,101,255,0.18) !important; transition: color 0.32s ease !important; } .page-tws .tw-member-row:hover .tw-minitial { color: var(--tw-blue) !important; } /* Info block: name + role */ .page-tws .tw-minfo { display: flex !important; flex-direction: column !important; gap: 4px !important; margin-bottom: 14px !important; } .page-tws .tw-mname { font-family: 'JetBrains Mono', monospace !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--fg) !important; margin: 0 !important; } .page-tws .tw-mrole { font-family: 'JetBrains Mono', monospace !important; font-size: 9px !important; letter-spacing: 0.20em !important; text-transform: uppercase !important; color: rgba(15,27,69,0.45) !important; margin: 0 !important; } /* Note (italic quote) */ .page-tws .tw-mnote { font-family: 'Playfair Display', serif !important; font-style: italic !important; font-size: 13.5px !important; line-height: 1.5 !important; color: rgba(15,27,69,0.62) !important; text-align: left !important; max-width: none !important; padding-top: 12px !important; border-top: 1px solid rgba(15,27,69,0.10) !important; margin: 0 !important; } /* ══════════════════════════════════════════════════════════════ */ /* P1 #5 · TEXT OVERFLOW ELLIPSIS (2026-05-13 night#6) */ /* 카드 제목: 2줄까지 줄바꿈 → 그 이후 "..." */ /* 설명/리드: 3줄까지 줄바꿈 → 그 이후 "..." */ /* ══════════════════════════════════════════════════════════════ */ /* === Card titles · 2-line clamp === */ .post-card-title, .kb-post-title, .kb-pcard-name, .product-card-title, .kb-circle-name, .kbp-title-card, .tabp-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; overflow-wrap: break-word; } /* === Card descriptions / leads · 3-line clamp === */ .post-card-desc, .product-card-brand, .kb-pcard-brand, .testi-text, .guide-hook, .curator-bio, .s2-fnote, .tw-hero-hook p, .tab-hero-hook p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; } /* === Meta strips & micro labels · 1-line + ellipsis === */ .post-card-cat, .kb-pcard-cat, .kbp-cat, .mv-caption, .s4d-issue, .s5d-asub, .nw-section-kicker, .tw-kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* === Long URL or hashes · break gracefully === */ .kb-article-content a, .testi-handle { word-break: break-word; overflow-wrap: anywhere; } /* === Hero headlines · keep but allow break before ellipsis === */ /* (Hero titles are intentionally LARGE — apply only if container forces clamp) */ .s4d-headline, .tab-hero-title, .kb-hero-title, .main-title { overflow-wrap: break-word; hyphens: auto; } /* ══════════════════════════════════════════════════════════════ */ /* P1 · 4 STATES — K-Beauty cream/pink concept (2026-05-13 night#7)*/ /* Skeleton · Error · Success · Image fallback */ /* ══════════════════════════════════════════════════════════════ */ /* === 1. SKELETON (Loading shimmer) === */ @keyframes mykp-skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton, .is-loading .skeleton-fill { background: linear-gradient(90deg, #F5EFE6 0%, #EFE6D9 45%, #F5EFE6 90% ) !important; background-size: 200% 100% !important; animation: mykp-skeleton-shimmer 1.6s ease-in-out infinite; border-radius: 12px; color: transparent !important; } .skeleton-line { height: 14px; margin-bottom: 8px; } .skeleton-line.lg{ height: 22px; } .skeleton-line.sm{ height: 10px; } .skeleton-image { aspect-ratio: 4/3; min-height: 160px; border-radius: 16px; } .skeleton-title { height: 24px; width: 80%; margin-bottom: 10px; } .skeleton-meta { height: 11px; width: 50%; } /* === 2. ERROR STATE === */ .error-state { text-align: center; padding: 56px 28px; background: #FAF5F0; border: 1px solid rgba(44,24,16,0.08); border-radius: 20px; max-width: 520px; margin: 40px auto; } .error-state-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(212,96,122,0.10); color: #D4607A; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; } .error-state-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 28px; font-weight: 500; color: #2C1810; margin: 0 0 8px; letter-spacing: -0.01em; } .error-state-msg { color: rgba(44,24,16,0.65); font-size: 14px; line-height: 1.55; margin: 0 0 24px; max-width: 320px; margin-left: auto; margin-right: auto; } .error-state-btn { display: inline-flex; align-items: center; gap: 8px; background: #2C1810; color: #FDF6EE; border: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 13px 28px; border-radius: 999px; cursor: pointer; transition: background 0.2s, transform 0.18s; } .error-state-btn:hover { background: #D4607A; transform: translateY(-1px); } /* === 3. SUCCESS STATE (newsletter submit etc.) === */ .success-state { text-align: center; padding: 48px 28px; background: linear-gradient(180deg, rgba(212,96,122,0.04) 0%, rgba(255,228,235,0.18) 100% ); border: 1px solid rgba(212,96,122,0.20); border-radius: 20px; max-width: 520px; margin: 24px auto; animation: mykp-success-rise 0.4s cubic-bezier(0.22,1,0.36,1); } @keyframes mykp-success-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .success-state-icon { width: 64px; height: 64px; border-radius: 50%; background: #D4607A; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 4px 18px rgba(212,96,122,0.32); } .success-state-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 28px; font-weight: 500; color: #2C1810; margin: 0 0 8px; letter-spacing: -0.01em; } .success-state-msg { color: rgba(44,24,16,0.70); font-size: 14px; line-height: 1.6; margin: 0 auto; max-width: 340px; } .success-state-meta { margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(44,24,16,0.42); } /* Newsletter form-specific success swap */ .newsletter-card .success-state { margin: 16px auto 0; background: rgba(255,255,255,0.55); border-color: rgba(212,96,122,0.16); } .newsletter-form.is-success, .newsletter-form.is-success + .newsletter-meta { display: none !important; } .newsletter-card .success-state[hidden] { display: none !important; } /* === 4. IMAGE FALLBACK (onerror) === */ img.img-error { position: relative; background: linear-gradient(135deg, #F5EFE6 0%, #EFE6D9 100%); min-height: 160px; object-fit: contain !important; /* Replace src with inline data URI of a soft cream placeholder */ } img.img-error::after { content: ''; display: block; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(212,96,122,0.10), transparent 60%), linear-gradient(135deg, #F5EFE6, #EFE6D9); } /* Wrap-based fallback (when img has parent we add label) */ .img-fallback-wrap { position: relative; } .img-fallback-wrap.has-error::before { content: '\2014 image unavailable \2014'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(44,24,16,0.38); z-index: 2; white-space: nowrap; } /* === Utility: hide initially === */ [hidden] { display: none !important; } /* ══════════════════════════════════════════════════════════════ */ /* P0 #8 · AFFILIATE CTA — "Shop on Yesstyle" button */ /* Replaces the ambiguous "+" with explicit affiliate destination */ /* (Yesstyle primary · Amazon backup link below price strip) */ /* ══════════════════════════════════════════════════════════════ */ .kb-shop-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: #D4607A; color: #FFFFFF !important; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; border: 1px solid #D4607A; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 14px rgba(212,96,122,0.32); transition: background 0.2s, border-color 0.2s, transform 0.18s, box-shadow 0.2s; } .kb-shop-btn:hover { background: #B84F69; border-color: #B84F69; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(212,96,122,0.45); } .kb-shop-btn:active { transform: translateY(0); } .kb-shop-btn svg { width: 11px; height: 11px; flex-shrink: 0; } /* Amazon backup link — tiny text below price */ .kb-shop-alt { display: block; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(44,24,16,0.50); text-decoration: none; transition: color 0.18s; } .kb-shop-alt:hover { color: #D4607A; } /* Card footer adapts when shop-btn is present (wider) */ .kb-pcard-footer { align-items: flex-end; gap: 12px; flex-wrap: wrap; } /* Hero carousel — Shop CTA pill (under price) */ .product-shop-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(212,96,122,0.10); color: #D4607A !important; border: 1px solid rgba(212,96,122,0.32); font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.18s; } .product-shop-btn:hover { background: #D4607A; color: #FFFFFF !important; border-color: #D4607A; transform: translateY(-1px); } .product-shop-btn svg { width: 11px; height: 11px; } /* ══════════════════════════════════════════════════════════════ */ /* P0 · AFFILIATE DISCLOSURE (FTC 16 CFR §255) */ /* K-Beauty 페이지 컨셉 — cream + pink accent + editorial */ /* ══════════════════════════════════════════════════════════════ */ .kb-affiliate-disclosure { margin: var(--s-16) var(--frame-pad-x); padding: 40px 48px; background: #FAF5F0; border: 1px solid rgba(212,96,122,0.16); border-radius: 20px; position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 28px; align-items: start; } .kb-affiliate-disclosure::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: #D4607A; border-radius: 20px 0 0 20px; } .kb-disclosure-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(212,96,122,0.10); color: #D4607A; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .kb-disclosure-body { display: flex; flex-direction: column; gap: 10px; } .kb-disclosure-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #D4607A; } .kb-disclosure-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; color: #2C1810; margin: 0; } .kb-disclosure-text { font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.65; color: rgba(44,24,16,0.78); margin: 0; max-width: 680px; } .kb-disclosure-text strong { color: #2C1810; font-weight: 600; } .kb-disclosure-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 18px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(44,24,16,0.50); } .kb-disclosure-meta span::before { content: '✓ '; color: #D4607A; } @media (max-width: 768px) { .kb-affiliate-disclosure { grid-template-columns: 1fr; padding: 28px 24px; margin: var(--s-10) var(--frame-pad-x); } } /* ══════════════════════════════════════════════════════════════ */ /* K-BEAUTY NEWSLETTER · "Weekly K-beauty drops" */ /* Segmented sub-list, same Beehiiv backend as home, K-beauty */ /* specific message + cream/pink K-Beauty aesthetic */ /* ══════════════════════════════════════════════════════════════ */ .kb-newsletter { margin: var(--s-16) var(--frame-pad-x); padding: 64px 56px; background: radial-gradient(ellipse 80% 60% at 18% 22%, rgba(212,96,122,0.10), transparent 60%), radial-gradient(ellipse 70% 50% at 84% 78%, rgba(255,228,235,0.30), transparent 60%), #FAF5F0; border: 1px solid rgba(212,96,122,0.14); border-radius: 24px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; position: relative; overflow: hidden; } .kb-newsletter::before { content: ''; position: absolute; top: -60px; right: -40px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(212,96,122,0.16), transparent 70%); filter: blur(40px); pointer-events: none; } .kb-newsletter-text { position: relative; z-index: 1; } .kb-newsletter-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #D4607A; margin: 0 0 12px; } .kb-newsletter-title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-style: italic; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.015em; color: #2C1810; margin: 0 0 18px; } .kb-newsletter-title em { font-style: italic; color: #D4607A; } .kb-newsletter-lead { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.65; color: rgba(44,24,16,0.72); margin: 0 0 8px; max-width: 460px; } .kb-newsletter-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(44,24,16,0.50); margin-top: 18px; } .kb-newsletter-meta span::before { content: '✓ '; color: #D4607A; } .kb-newsletter-meta span + span::before { margin-left: 14px; } .kb-newsletter-form-wrap { position: relative; z-index: 1; } .kb-newsletter-form { display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; padding: 32px 32px 28px; border-radius: 20px; border: 1px solid rgba(212,96,122,0.16); box-shadow: 0 12px 40px rgba(44,24,16,0.08); } .kb-newsletter-form-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #D4607A; font-weight: 700; } .kb-newsletter-input { width: 100%; padding: 14px 18px; border: 1px solid rgba(44,24,16,0.12); border-radius: 999px; background: #FAF5F0; font-family: 'Inter', sans-serif; font-size: 14.5px; color: #2C1810; outline: none; transition: border-color 0.18s, background 0.18s; } .kb-newsletter-input:focus { border-color: #D4607A; background: #FFFFFF; } .kb-newsletter-input::placeholder { color: rgba(44,24,16,0.40); } .kb-newsletter-submit { width: 100%; padding: 14px 20px; border-radius: 999px; background: #D4607A; color: #FFFFFF; border: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px rgba(212,96,122,0.30); transition: background 0.2s, transform 0.18s, box-shadow 0.2s; } .kb-newsletter-submit:hover { background: #B84F69; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(212,96,122,0.42); } .kb-newsletter-fine { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(44,24,16,0.50); text-align: center; margin-top: 4px; } @media (max-width: 968px) { .kb-newsletter { grid-template-columns: 1fr; gap: 36px; padding: 48px 28px; } .kb-newsletter-form { padding: 28px 24px 24px; } } /* ══════════════════════════════════════════════════════════════ */ /* CONTACT PAGE — K-Beauty cream/pink aesthetic */ /* "CS 최소 · 비즈니스 최대" 설계 (FAQ deflection + 우선순위 form) */ /* ══════════════════════════════════════════════════════════════ */ .tab-page-frame.page-contact { background: radial-gradient(ellipse 90% 60% at 14% 14%, rgba(212,96,122,0.08), transparent 55%), radial-gradient(ellipse 80% 50% at 86% 86%, rgba(255,228,235,0.20), transparent 60%), #FAF5F0; min-height: 100vh; padding-bottom: var(--s-16); } .contact-hero { padding: 80px var(--frame-pad-x) 32px; max-width: 920px; margin: 0 auto; } .contact-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #D4607A; margin: 0 0 14px; } .contact-title { font-family: 'Bodoni Moda', 'Playfair Display', serif; font-weight: 500; font-style: italic; font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -0.025em; color: #2C1810; margin: 0 0 22px; } .contact-lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; line-height: 1.55; color: rgba(44,24,16,0.72); max-width: 620px; margin: 0; } /* ── FAQ (deflection) ── */ .contact-faq { max-width: 920px; margin: 56px auto 0; padding: 0 var(--frame-pad-x); } .contact-faq-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(44,24,16,0.55); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; } .contact-faq-label::before { content: ''; flex: 1; height: 1px; background: rgba(44,24,16,0.14); } .contact-faq-label::after { content: ''; flex: 1; height: 1px; background: rgba(44,24,16,0.14); } .contact-faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(44,24,16,0.10); } .contact-faq-item { border-bottom: 1px solid rgba(44,24,16,0.10); padding: 0; } .contact-faq-q { appearance: none; background: transparent; border: none; width: 100%; text-align: left; padding: 22px 0 22px 12px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; font-weight: 500; color: #2C1810; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: color 0.2s; } .contact-faq-q:hover { color: #D4607A; } .contact-faq-q-icon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(44,24,16,0.18); display: inline-flex; align-items: center; justify-content: center; color: rgba(44,24,16,0.55); font-family: 'JetBrains Mono', monospace; font-size: 14px; transition: transform 0.25s ease, background 0.2s, color 0.2s; flex-shrink: 0; } .contact-faq-item.is-open .contact-faq-q-icon { background: #D4607A; color: #FFFFFF; border-color: #D4607A; transform: rotate(45deg); } .contact-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s ease; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.7; color: rgba(44,24,16,0.74); padding: 0 12px; } .contact-faq-item.is-open .contact-faq-a { max-height: 400px; padding: 0 12px 24px; } /* ── Form ── */ .contact-form-section { max-width: 720px; margin: 80px auto 0; padding: 0 var(--frame-pad-x); } .contact-form-divider { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #D4607A; margin-bottom: 22px; display: flex; align-items: center; gap: 14px; } .contact-form-divider::before, .contact-form-divider::after { content: ''; flex: 1; height: 1px; background: rgba(212,96,122,0.30); } .contact-form { background: #FFFFFF; border: 1px solid rgba(212,96,122,0.16); border-radius: 24px; padding: 40px 40px 36px; box-shadow: 0 12px 40px rgba(44,24,16,0.06); display: flex; flex-direction: column; gap: 18px; } .contact-form-row { display: flex; flex-direction: column; gap: 8px; } .contact-form-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(44,24,16,0.62); } .contact-form-input, .contact-form-select, .contact-form-textarea { width: 100%; padding: 14px 18px; border: 1px solid rgba(44,24,16,0.14); border-radius: 14px; background: #FAF5F0; font-family: 'Inter', sans-serif; font-size: 14.5px; color: #2C1810; outline: none; transition: border-color 0.18s, background 0.18s; } .contact-form-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; cursor: pointer; } .contact-form-textarea { min-height: 140px; resize: vertical; font-family: 'Inter', sans-serif; } .contact-form-input:focus, .contact-form-select:focus, .contact-form-textarea:focus { border-color: #D4607A; background: #FFFFFF; } .contact-form-input::placeholder, .contact-form-textarea::placeholder { color: rgba(44,24,16,0.42); } .contact-form-submit { margin-top: 6px; padding: 16px 28px; border-radius: 999px; background: #D4607A; color: #FFFFFF; border: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 18px rgba(212,96,122,0.30); transition: background 0.2s, transform 0.18s, box-shadow 0.2s; } .contact-form-submit:hover { background: #B84F69; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(212,96,122,0.42); } .contact-form-fine { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(44,24,16,0.55); text-align: center; margin-top: 4px; } .contact-form-fine strong { color: #D4607A; font-weight: 600; } @media (max-width: 768px) { .contact-hero { padding: 56px 24px 24px; } .contact-faq { margin: 36px auto 0; padding: 0 24px; } .contact-form-section { margin: 56px auto 0; padding: 0 24px; } .contact-form { padding: 28px 24px 24px; } .contact-faq-q { font-size: 18px; } } /* ══════════════════════════════════════════════════════════════ */ /* P0 #5 · LANGUAGE TOGGLE (KO · EN · ES · ID) */ /* Floating top-right · all pages · primary funnel for ES/ID */ /* ══════════════════════════════════════════════════════════════ */ .lang-toggle { position: fixed; top: 72px; right: 16px; z-index: 999; display: inline-flex; align-items: center; gap: 0; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.60), 0 8px 28px rgba(255,255,255,0.30); } .lang-toggle-btn { appearance: none; background: transparent; border: none; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(44,24,16,0.60); padding: 6px 10px; border-radius: 999px; cursor: pointer; transition: background 0.18s, color 0.18s; position: relative; } .lang-toggle-btn:hover { color: #2C1810; } .lang-toggle-btn.is-active { background: #D4607A; color: #FFFFFF; box-shadow: 0 2px 10px rgba(212,96,122,0.40); } /* Separator dot between options */ .lang-toggle-btn + .lang-toggle-btn::before { content: '·'; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); color: rgba(44,24,16,0.22); pointer-events: none; } .lang-toggle-btn.is-active + .lang-toggle-btn::before, .lang-toggle-btn:hover + .lang-toggle-btn::before { opacity: 0; } /* K-Beauty (light cream bg) — slightly darker tint for readability */ body.route-kbeauty .lang-toggle { background: rgba(44,24,16,0.12); border-color: rgba(44,24,16,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 8px 32px rgba(44,24,16,0.12); } body.route-kbeauty .lang-toggle-btn { color: rgba(44,24,16,0.55); } body.route-kbeauty .lang-toggle-btn:hover { color: #2C1810; } body.route-kbeauty .lang-toggle-btn + .lang-toggle-btn::before { color: rgba(44,24,16,0.20); } /* Mobile / small screens — shrink */ @media (max-width: 768px) { .lang-toggle { top: 60px; right: 10px; padding: 3px; } .lang-toggle-btn { font-size: 9px; padding: 5px 8px; } } /* On post detail page — sits below the topbar (which has its own meta) */ body.post-detail-active .lang-toggle { top: 80px; opacity: 0.95; } /* ════════════════════════════════════════════════════════════════ */ /* TWS POST CARDS — K-BEAUTY PRODUCT CARD AESTHETIC */ /* Match style of .product-card (white glass + overlay tag + body) */ /* ════════════════════════════════════════════════════════════════ */ /* Card: white glass like product-card */ html .page-tws .post-card { position: relative !important; background: rgba(255,255,255,0.55) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; border: 1px solid rgba(255,255,255,0.78) !important; border-radius: 20px !important; padding: 0 !important; box-shadow: 0 6px 28px rgba(15,27,69,0.06), inset 0 1px 0 rgba(255,255,255,0.95) !important; transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important; overflow: hidden !important; } html .page-tws .post-card:hover { transform: translateY(-6px) !important; box-shadow: 0 22px 44px rgba(15,27,69,0.10), inset 0 1px 0 rgba(255,255,255,0.95) !important; border-color: rgba(21,101,255,0.32) !important; } /* Image: flush with card top, no inner padding */ html .page-tws .post-card-img { position: relative !important; margin: 0 !important; border-radius: 0 !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; background: rgba(255,255,255,0.04) !important; } html .page-tws .post-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s ease-out !important; } html .page-tws .post-card:hover .post-card-img img { transform: scale(1.05) !important; } /* Category → overlay tag (top-left of image), cream pill */ html .page-tws .post-card-cat { position: absolute !important; top: 14px !important; left: 14px !important; margin: 0 !important; padding: 5px 11px !important; background: rgba(248,247,242,0.82) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(15,27,69,0.10) !important; border-radius: 999px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #1559FF !important; z-index: 3 !important; white-space: nowrap !important; box-shadow: 0 2px 8px rgba(15,27,69,0.08) !important; } /* Heart icon overlay (top-right) — pure CSS, no HTML changes needed */ html .page-tws .post-card-img::after { content: ''; position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2372503F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / 14px no-repeat; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.78); z-index: 3; box-shadow: 0 2px 8px rgba(15,27,69,0.08); } /* Body container — white glass tint, padded */ html .page-tws .post-card-title, html .page-tws .post-card-meta { padding-left: 18px !important; padding-right: 18px !important; background: rgba(255,255,255,0.22) !important; } html .page-tws .post-card-title { font-family: 'Playfair Display', serif !important; font-weight: 500 !important; font-size: 17px !important; line-height: 1.32 !important; letter-spacing: -0.01em !important; color: #0F1B45 !important; margin: 0 !important; padding-top: 18px !important; padding-bottom: 14px !important; } html .page-tws .post-card-meta { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 16px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 9.5px !important; letter-spacing: 0.20em !important; color: rgba(15,27,69,0.45) !important; text-transform: uppercase !important; border-radius: 0 0 20px 20px !important; } html .page-tws .post-card-meta span:last-child { color: #0F1B45 !important; font-weight: 600 !important; } html .page-tws .post-card-meta-dot { display: none !important; } /* ════════════════════════════════════════════════════════════════ */ /* NCT WISH POST CARDS — K-BEAUTY PRODUCT CARD AESTHETIC (mint) */ /* Mirrors TWS treatment, accent swapped to NCT mint #4AB8C0 */ /* ════════════════════════════════════════════════════════════════ */ /* Card: white glass like product-card */ html .page-nct-wish .post-card { position: relative !important; background: rgba(255,255,255,0.55) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; border: 1px solid rgba(255,255,255,0.78) !important; border-radius: 20px !important; padding: 0 !important; box-shadow: 0 6px 28px rgba(15,27,69,0.06), inset 0 1px 0 rgba(255,255,255,0.95) !important; transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important; overflow: hidden !important; } html .page-nct-wish .post-card:hover { transform: translateY(-6px) !important; box-shadow: 0 22px 44px rgba(15,27,69,0.10), inset 0 1px 0 rgba(255,255,255,0.95) !important; border-color: rgba(74,184,192,0.42) !important; } /* Image: flush with card top */ html .page-nct-wish .post-card-img { position: relative !important; margin: 0 !important; border-radius: 0 !important; aspect-ratio: 4 / 3 !important; overflow: hidden !important; background: rgba(255,255,255,0.04) !important; } html .page-nct-wish .post-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s ease-out !important; } html .page-nct-wish .post-card:hover .post-card-img img { transform: scale(1.05) !important; } /* Category → overlay cream pill (top-left), mint text */ html .page-nct-wish .post-card-cat { position: absolute !important; top: 14px !important; left: 14px !important; margin: 0 !important; padding: 5px 11px !important; background: rgba(248,247,242,0.82) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(74,184,192,0.22) !important; border-radius: 999px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 8.5px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #2D8590 !important; z-index: 3 !important; white-space: nowrap !important; box-shadow: 0 2px 8px rgba(15,27,69,0.08) !important; } /* Heart icon overlay (top-right) */ html .page-nct-wish .post-card-img::after { content: ''; position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232D8590' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / 14px no-repeat; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.78); z-index: 3; box-shadow: 0 2px 8px rgba(15,27,69,0.08); } /* Body: title + meta */ html .page-nct-wish .post-card-title, html .page-nct-wish .post-card-meta { padding-left: 18px !important; padding-right: 18px !important; background: rgba(255,255,255,0.22) !important; } html .page-nct-wish .post-card-title { font-family: 'Playfair Display', serif !important; font-weight: 500 !important; font-size: 17px !important; line-height: 1.32 !important; letter-spacing: -0.01em !important; color: #0F1B45 !important; margin: 0 !important; padding-top: 18px !important; padding-bottom: 14px !important; } html .page-nct-wish .post-card-meta { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 16px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 9.5px !important; letter-spacing: 0.20em !important; color: rgba(15,27,69,0.45) !important; text-transform: uppercase !important; border-radius: 0 0 20px 20px !important; } html .page-nct-wish .post-card-meta span:last-child { color: #0F1B45 !important; font-weight: 600 !important; } html .page-nct-wish .post-card-meta-dot { display: none !important; } /* ════════════════════════════════════════════════════════════════ */ /* POST-GRID NAV CONTROLS — View All + Prev/Next arrows */ /* Mirrors K-Beauty carousel nav style with editorial polish */ /* ════════════════════════════════════════════════════════════════ */ .post-nav-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: var(--s-10); padding-top: var(--s-6); } .post-nav-row .view-all { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; background: #1A0808; color: #FAF6EC; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; border: 1px solid #1A0808; border-radius: 6px; cursor: pointer; transition: background 0.22s, color 0.22s, transform 0.18s; } .post-nav-row .view-all:hover { background: #2D1B14; transform: translateY(-2px); } .post-nav-row .nav-arrow { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.65); border: 1px solid rgba(15,27,69,0.18); border-radius: 6px; color: #1A0808; cursor: pointer; transition: background 0.22s, border-color 0.22s, transform 0.18s; } .post-nav-row .nav-arrow:hover { background: #fff; border-color: rgba(15,27,69,0.42); transform: translateY(-2px); } .post-nav-row .nav-arrow:disabled, .post-nav-row .nav-arrow.disabled { opacity: 0.32; cursor: not-allowed; transform: none; } /* TWS variant — keep nav arrows neutral but match blue hover hint */ .page-tws .post-nav-row .nav-arrow:hover { border-color: rgba(21,101,255,0.45); } .page-nct-wish .post-nav-row .nav-arrow:hover { border-color: rgba(74,184,192,0.55); } /* ════════════════════════════════════════════════════════════════ */ /* POST NAV — Top-right inline header style (compact) */ /* ════════════════════════════════════════════════════════════════ */ .post-nav-inline { display: inline-flex; align-items: center; gap: 7px; align-self: flex-end; margin-top: 22px; } .post-nav-inline .nav-arrow { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.62); border: 1px solid rgba(15,27,69,0.18); border-radius: 6px; color: #1A0808; cursor: pointer; transition: background 0.22s, border-color 0.22s, transform 0.18s; } .post-nav-inline .nav-arrow:hover { background: #fff; transform: translateY(-2px); } .page-tws .post-nav-inline .nav-arrow:hover { border-color: rgba(21,101,255,0.55); color:#1559FF; } .page-nct-wish .post-nav-inline .nav-arrow:hover { border-color: rgba(74,184,192,0.65); color:#2D8590; } .post-nav-inline .view-all { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; height: 32px; background: #1A0808; color: #FAF6EC; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; border: 1px solid #1A0808; border-radius: 6px; cursor: pointer; margin-left: 4px; transition: background 0.22s, transform 0.18s; } .post-nav-inline .view-all:hover { background: #2D1B14; transform: translateY(-2px); } /* Hide the old bottom centered nav row (kept in DOM but invisible) */ .post-nav-row { display: none !important; } /* ════════════════════════════════════════════════════════════════ */ /* TICKER MARQUEE — enforce single-line, no edge fade */ /* ════════════════════════════════════════════════════════════════ */ .dj-ticker-track, .dj-ticker-track.dir-r { flex-wrap: nowrap !important; white-space: nowrap !important; } .dj-inner { flex-wrap: nowrap !important; white-space: nowrap !important; flex-shrink: 0 !important; } .dj-pill { flex-shrink: 0 !important; white-space: nowrap !important; } /* ════════════════════════════════════════════════════════════════ */ /* POST NAV — text-only "VIEW ALL →" link (replaces boxed buttons) */ /* ════════════════════════════════════════════════════════════════ */ .view-all-link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-end; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(15,27,69,0.62); text-decoration: none; cursor: pointer; transition: color 0.22s ease, gap 0.22s ease; } .view-all-link .arr { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 0; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1); } .view-all-link:hover { color: #1A0808; gap: 14px; } .view-all-link:hover .arr { transform: translateX(3px); } .page-tws .view-all-link:hover { color: #1559FF; } .page-nct-wish .view-all-link:hover { color: #2D8590; } /* Tighten spacing between section heading and post-grid */ .tab-diary .section-head-row { margin-bottom: var(--s-5) !important; } .tab-diary .post-grid { margin-top: 0 !important; } /* ── TWS MEMBER SLIDER ── */ .page-tws .tw-member-slider { position:relative; margin-top:var(--s-10); } .page-tws .tw-ms-viewport { overflow:hidden; border-radius:20px; } .page-tws .tw-ms-track { display:flex; transition:transform 0.55s cubic-bezier(0.22,1,0.36,1); will-change:transform; } .page-tws .tw-ms-slide { flex:0 0 100%; display:grid; grid-template-columns:1fr 1.4fr; min-height:360px; background:linear-gradient(135deg,rgba(255,255,255,0.68) 0%,rgba(21,101,255,0.10) 100%); border:1px solid rgba(255,255,255,0.62); backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.80),0 16px 48px rgba(15,27,69,0.09); } .page-tws .tw-ms-left { padding:40px 44px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; background:linear-gradient(160deg,rgba(21,101,255,0.07) 0%,rgba(21,101,255,0.16) 100%); border-right:1px solid rgba(255,255,255,0.42); } .page-tws .tw-ms-num { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.30em; text-transform:uppercase; color:rgba(15,27,69,0.35); position:absolute; top:30px; left:44px; } .page-tws .tw-ms-initial { font-family:'Playfair Display',serif; font-style:italic; font-weight:400; font-size:clamp(100px,13vw,168px); line-height:0.85; letter-spacing:-0.04em; color:rgba(21,101,255,0.18); user-select:none; pointer-events:none; } .page-tws .tw-ms-right { padding:48px 52px; display:flex; flex-direction:column; justify-content:center; } .page-tws .tw-ms-name { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:#0F1B45; margin:0 0 6px; } .page-tws .tw-ms-role { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(21,101,255,0.65); margin:0 0 28px; } .page-tws .tw-ms-divider { width:36px; height:1px; background:rgba(21,101,255,0.28); margin-bottom:22px; } .page-tws .tw-ms-quote { font-family:'Playfair Display',serif; font-style:italic; font-size:19px; line-height:1.55; color:rgba(15,27,69,0.66); margin:0; } .page-tws .tw-ms-nav { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:18px; } .page-tws .tw-ms-counter { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.22em; color:rgba(15,27,69,0.38); min-width:48px; text-align:center; } .page-tws .tw-ms-btn { width:38px; height:38px; border-radius:0; border:1px solid rgba(15,27,69,0.16); background:rgba(255,255,255,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#0F1B45; font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; } .page-tws .tw-ms-btn:hover { background:#1565FF; color:#fff; border-color:#1565FF; } .page-tws .tw-ms-dots { display:flex; gap:6px; align-items:center; margin-right:auto; } .page-tws .tw-ms-dot { width:6px; height:6px; border-radius:50%; background:rgba(15,27,69,0.15); transition:background 0.25s, transform 0.25s; cursor:pointer; } .page-tws .tw-ms-dot.active { background:#1565FF; transform:scale(1.35); } /* ════════════════════════════════════════════════════════════════ */ /* TWS HERO — match NCT WISH arch design (single video) */ /* ════════════════════════════════════════════════════════════════ */ /* Stage container — mirror nw-hero-stage proportions */ html .page-tws .tw-hero-stage { position: relative !important; height: clamp(400px, 44vw, 560px) !important; margin-top: -40px !important; } /* Hide the 2-thumbnail sub container if it remains anywhere */ html .page-tws .tw-hero-vid-sub { display: none !important; } /* Video wrap = full stage, arch shape (240px top corners, 24px bottom) */ html .page-tws .tw-hero-vid-wrap { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } html .page-tws .tw-hero-vid { position: absolute !important; inset: 0 !important; display: block !important; border-radius: 240px 240px 24px 24px !important; overflow: hidden !important; border: 1px solid rgba(15,27,69,0.10) !important; box-shadow: 0 30px 80px rgba(15,27,69,0.18) !important; cursor: pointer !important; transition: transform 0.4s ease !important; background: transparent !important; } html .page-tws .tw-hero-vid:hover { transform: translateY(-4px) !important; } html .page-tws .tw-hero-vid img { width: 100% !important; height: 100% !important; object-fit: cover !important; filter: grayscale(0.1) contrast(1.05) !important; transition: transform 0.5s ease !important; } html .page-tws .tw-hero-vid:hover img { transform: scale(1.03) !important; } /* Remove dark overlay + play button on hero video (NCT WISH style — clean image) */ html .page-tws .tw-hero-vid-overlay { display: none !important; } html .page-tws .tw-hero-vid-play { display: none !important; } /* FAN NOTES info card — bottom-right overlay (mirrors nw-bitacora position) */ html .page-tws .tw-hero-stage .tw-vidcard, html .page-tws .tw-glass-info { position: absolute !important; top: auto !important; bottom: 20px !important; left: auto !important; right: -18px !important; width: 62% !important; max-width: 230px !important; padding: 12px 14px !important; z-index: 5 !important; margin: 0 !important; transform: none !important; background: rgba(255,255,255,0.78) !important; border: 1px solid rgba(15,27,69,0.12) !important; border-radius: 12px !important; backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; box-shadow: 0 12px 28px rgba(15,27,69,0.10) !important; } /* "plot twist!" callout — mirrors NCT WISH "surprise!" */ .tw-callout { position: absolute; top: 24px; right: 22px; text-align: right; z-index: 5; pointer-events: none; } .tw-callout .co1 { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 44px); color: #1559FF; letter-spacing: -0.02em; line-height: 1; text-shadow: 0 2px 18px rgba(255,255,255,0.55); } /* Issue tag — mirrors NCT WISH "Issue 01 · Songbird" position */ .tw-hero-issue-tag { position: absolute; top: -22px; left: 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.32em; color: rgba(15,27,69,0.55); text-transform: uppercase; z-index: 4; } /* Decorative asterisks (mirror nw-aster) */ .tw-aster { position: absolute; color: rgba(21,101,255,0.65); pointer-events: none; z-index: 3; } .tw-aster.dim { color: rgba(15,27,69,0.32); } /* ════════════════════════════════════════════════════════════════ */ /* TWS hero FIX — text visibility on light glass + lower position */ /* ════════════════════════════════════════════════════════════════ */ /* 1. Move hero stage down (was margin-top:-40px → 0) */ html .page-tws .tw-hero-stage { margin-top: 28px !important; } /* 2. FAN NOTES card text colors — dark ink for light glass bg */ html .page-tws .tw-vidcard-h { color: #0F1B45 !important; } html .page-tws .tw-vidcard-h em { color: #0F1B45 !important; } html .page-tws .tw-vidcard-h .sm { color: rgba(15,27,69,0.55) !important; } html .page-tws .tw-vidcard-body { color: rgba(15,27,69,0.78) !important; border-top-color: rgba(15,27,69,0.12) !important; } /* Same for the alternative .tw-glass-info wrapper */ html .page-tws .tw-glass-info .tw-vidcard-h, html .page-tws .tw-glass-info .tw-vidcard-h em { color: #0F1B45 !important; } html .page-tws .tw-glass-info .tw-vidcard-h .sm { color: rgba(15,27,69,0.55) !important; } html .page-tws .tw-glass-info .tw-vidcard-body { color: rgba(15,27,69,0.78) !important; border-top-color: rgba(15,27,69,0.12) !important; } /* ════════════════════════════════════════════════════════════════ */ /* CALLOUT (surprise/plot twist → Pick) — remove glass, flat text */ /* Info cards (Bitácora/FAN NOTES) — lower opacity for editorial */ /* View All button — navy instead of black */ /* ════════════════════════════════════════════════════════════════ */ /* (1) Callouts: no glass background, just text */ html .page-nct-wish .nw-callout, html .page-tws .tw-callout { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; } html .page-nct-wish .nw-callout *, html .page-tws .tw-callout * { background: transparent !important; } /* (2) Info cards — reduce opacity to match editorial blend */ html .page-nct-wish .nw-bitacora, html .page-tws .tw-glass-info, html .page-tws .tw-hero-stage .tw-vidcard { background: rgba(255,255,255,0.42) !important; border: 1px solid rgba(255,255,255,0.55) !important; -webkit-backdrop-filter: blur(22px) saturate(160%) !important; backdrop-filter: blur(22px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 8px 24px rgba(15,27,69,0.08) !important; } /* (3) View All buttons — navy (replaces dark brown #1A0808) */ .post-nav-row .view-all, .post-nav-inline .view-all { background: #0F1B45 !important; border-color: #0F1B45 !important; color: #FAF6EC !important; } .post-nav-row .view-all:hover, .post-nav-inline .view-all:hover { background: #1A2C5C !important; } /* Glass info cards — raised 30px (bottom: 20px → 50px) */ html .page-nct-wish .nw-hero-stage .nw-bitacora, html .page-tws .tw-hero-stage .tw-vidcard, html .page-tws .tw-glass-info { bottom: 50px !important; } /* === FINAL OVERRIDE: callouts hidden + info cards raised 30px === */ html body .page-nct-wish .nw-callout, html body .page-tws .tw-callout { display: none !important; } html body .page-nct-wish .nw-hero-stage .nw-bitacora, html body .page-tws .tw-hero-stage .tw-vidcard, html body .page-tws .tw-glass-info { position: absolute !important; bottom: 180px !important; top: auto !important; left: auto !important; right: -18px !important; transform: none !important; margin-top: 0 !important; } /* Hero video frame — TWS rectangle (slight rounded), NCT WISH original arch */ html body .page-tws .tw-hero-vid { border-radius: 20px !important; } html body .page-nct-wish .nw-hero-img { border-radius: 240px 240px 24px 24px !important; } /* ===== next style block ===== */ .tab-page-frame.page-kbeauty{display:block !important;}