/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ @layer properties; @layer theme, base, components, utilities; @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-violet-100: oklch(94.3% 0.029 294.588); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-4xl: 56rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; --blur-sm: 8px; --blur-md: 12px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --aspect-video: 16 / 9; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-brandcolor-50: #fef2f2; --color-brandcolor-100: #fde3e4; --color-brandcolor-200: #fcccce; --color-brandcolor-300: #f8a9ac; --color-brandcolor-400: #f2777c; --color-brandcolor-500: #e84b51; --color-brandcolor-600: #d6353b; --color-brandcolor-700: #b32227; --color-brandcolor-800: #942024; --color-brandcolor-900: #7b2124; --color-brandcolor-950: #430c0e; --color-governor-bay-50: #f0f5fe; --color-governor-bay-100: #dee7fb; --color-governor-bay-200: #c4d7f9; --color-governor-bay-500: #4976e8; --color-governor-bay-600: #345adc; --color-governor-bay-700: #2b46ca; --color-governor-bay-800: #293ba4; --text-fluid-tiny: clamp(0.5rem, calc(0.5vw + 0.375rem), 0.75rem); --text-fluid-xxs: clamp(0.625rem, calc(0.375vw + 0.53125rem), 0.8125rem); --text-fluid-xs: clamp(0.75rem, calc(0.25vw + 0.6875rem), 0.875rem); --text-fluid-sm: clamp(0.8125rem, calc(0.25vw + 0.75rem), 0.9375rem); --text-fluid-base: clamp(0.875rem, calc(0.25vw + 0.8125rem), 1rem); --text-fluid-md: clamp(1rem, calc(0.25vw + 0.9375rem), 1.125rem); --text-fluid-lg: clamp(1.0625rem, calc(0.375vw + 0.96875rem), 1.25rem); --text-fluid-xl: clamp(1.125rem, calc(0.75vw + 0.9375rem), 1.5rem); /* ─── SAKE QUEST Design Tokens (#318) ─── */ --sq-bg: #f4f4ef; /* ページ背景（ウォームグレー） */ --sq-text: #1a1c19; /* テキスト主色（墨黒） */ --sq-text-sub: #5b403d; /* テキスト補色（焦茶） */ --sq-text-mute: #999; /* テキスト淡色 */ --sq-brand: #b20411; /* ブランドカラー（朱赤） */ --sq-brand-lt: #d62927; /* ブランド明色 */ --sq-gold: #d4a017; /* 金色（ランキング等） */ --sq-card: #fff; /* カード背景 */ --sq-border: #e8e8e3; /* セパレータ・ボーダー */ --sq-washi: #faf6f0; /* 和紙ベージュ（御酒印背景等） */ --sq-info-bg: #f9f7f4; /* 情報ボックス背景 */ } } @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } html, :host { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentcolor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer utilities { .pointer-events-auto { pointer-events: auto; } .pointer-events-none { pointer-events: none; } .visible { visibility: visible; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .-top-1 { top: calc(var(--spacing) * -1); } .-top-2\.5 { top: calc(var(--spacing) * -2.5); } .-top-3 { top: calc(var(--spacing) * -3); } .-top-4 { top: calc(var(--spacing) * -4); } .-top-5 { top: calc(var(--spacing) * -5); } .-top-6 { top: calc(var(--spacing) * -6); } .-top-10 { top: calc(var(--spacing) * -10); } .-top-12 { top: calc(var(--spacing) * -12); } .top-0 { top: calc(var(--spacing) * 0); } .top-1 { top: calc(var(--spacing) * 1); } .top-1\/2 { top: calc(1/2 * 100%); } .top-2 { top: calc(var(--spacing) * 2); } .top-4 { top: calc(var(--spacing) * 4); } .top-6 { top: calc(var(--spacing) * 6); } .top-10 { top: calc(var(--spacing) * 10); } .top-16 { top: calc(var(--spacing) * 16); } .top-\[-32px\] { top: -32px; } .top-\[-50\%\] { top: -50%; } .top-\[25\%\] { top: 25%; } .top-\[35\%\] { top: 35%; } .top-\[45\%\] { top: 45%; } .top-\[55\%\] { top: 55%; } .top-\[57px\] { top: 57px; } .top-full { top: 100%; } .-right-1 { right: calc(var(--spacing) * -1); } .-right-10 { right: calc(var(--spacing) * -10); } .right-0 { right: calc(var(--spacing) * 0); } .right-1 { right: calc(var(--spacing) * 1); } .right-2 { right: calc(var(--spacing) * 2); } .right-4 { right: calc(var(--spacing) * 4); } .right-6 { right: calc(var(--spacing) * 6); } .right-8 { right: calc(var(--spacing) * 8); } .right-\[-10\%\] { right: -10%; } .right-\[15\%\] { right: 15%; } .right-\[30\%\] { right: 30%; } .-bottom-1 { bottom: calc(var(--spacing) * -1); } .-bottom-10 { bottom: calc(var(--spacing) * -10); } .-bottom-16 { bottom: calc(var(--spacing) * -16); } .bottom-0 { bottom: calc(var(--spacing) * 0); } .bottom-2 { bottom: calc(var(--spacing) * 2); } .bottom-4 { bottom: calc(var(--spacing) * 4); } .bottom-6 { bottom: calc(var(--spacing) * 6); } .bottom-8 { bottom: calc(var(--spacing) * 8); } .bottom-20 { bottom: calc(var(--spacing) * 20); } .bottom-24 { bottom: calc(var(--spacing) * 24); } .bottom-\[46px\] { bottom: 46px; } .-left-10 { left: calc(var(--spacing) * -10); } .-left-16 { left: calc(var(--spacing) * -16); } .-left-20 { left: calc(var(--spacing) * -20); } .left-0 { left: calc(var(--spacing) * 0); } .left-1\/2 { left: calc(1/2 * 100%); } .left-2 { left: calc(var(--spacing) * 2); } .left-3 { left: calc(var(--spacing) * 3); } .left-4 { left: calc(var(--spacing) * 4); } .left-6 { left: calc(var(--spacing) * 6); } .left-\[20\%\] { left: 20%; } .left-\[48\%\] { left: 48%; } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[100\] { z-index: 100; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-6 { grid-column: span 6 / span 6; } .\!row-span-1 { grid-row: span 1 / span 1 !important; } .row-span-2 { grid-row: span 2 / span 2; } .container { width: 100%; @media (width >= 40rem) { max-width: 40rem; } @media (width >= 48rem) { max-width: 48rem; } @media (width >= 64rem) { max-width: 64rem; } @media (width >= 80rem) { max-width: 80rem; } @media (width >= 96rem) { max-width: 96rem; } } .m-1 { margin: calc(var(--spacing) * 1); } .m-2 { margin: calc(var(--spacing) * 2); } .m-4 { margin: calc(var(--spacing) * 4); } .-mx-3 { margin-inline: calc(var(--spacing) * -3); } .-mx-4 { margin-inline: calc(var(--spacing) * -4); } .-mx-6 { margin-inline: calc(var(--spacing) * -6); } .mx-2 { margin-inline: calc(var(--spacing) * 2); } .mx-4 { margin-inline: calc(var(--spacing) * 4); } .mx-6 { margin-inline: calc(var(--spacing) * 6); } .mx-auto { margin-inline: auto; } .my-2 { margin-block: calc(var(--spacing) * 2); } .my-3 { margin-block: calc(var(--spacing) * 3); } .my-4 { margin-block: calc(var(--spacing) * 4); } .my-6 { margin-block: calc(var(--spacing) * 6); } .\!mt-0 { margin-top: calc(var(--spacing) * 0) !important; } .-mt-4 { margin-top: calc(var(--spacing) * -4); } .-mt-6 { margin-top: calc(var(--spacing) * -6); } .-mt-8 { margin-top: calc(var(--spacing) * -8); } .mt-0 { margin-top: calc(var(--spacing) * 0); } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-8 { margin-top: calc(var(--spacing) * 8); } .mt-10 { margin-top: calc(var(--spacing) * 10); } .mt-12 { margin-top: calc(var(--spacing) * 12); } .mt-20 { margin-top: calc(var(--spacing) * 20); } .mt-auto { margin-top: auto; } .mr-0\.5 { margin-right: calc(var(--spacing) * 0.5); } .mr-1 { margin-right: calc(var(--spacing) * 1); } .mr-2 { margin-right: calc(var(--spacing) * 2); } .mr-3 { margin-right: calc(var(--spacing) * 3); } .mr-4 { margin-right: calc(var(--spacing) * 4); } .-mb-0\.5 { margin-bottom: calc(var(--spacing) * -0.5); } .mb-0\.5 { margin-bottom: calc(var(--spacing) * 0.5); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-4 { margin-bottom: calc(var(--spacing) * 4); } .mb-5 { margin-bottom: calc(var(--spacing) * 5); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .mb-10 { margin-bottom: calc(var(--spacing) * 10); } .mb-12 { margin-bottom: calc(var(--spacing) * 12); } .mb-20 { margin-bottom: calc(var(--spacing) * 20); } .-ml-px { margin-left: -1px; } .ml-0\.5 { margin-left: calc(var(--spacing) * 0.5); } .ml-1 { margin-left: calc(var(--spacing) * 1); } .ml-2 { margin-left: calc(var(--spacing) * 2); } .ml-3 { margin-left: calc(var(--spacing) * 3); } .ml-4 { margin-left: calc(var(--spacing) * 4); } .ml-auto { margin-left: auto; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .\!hidden { display: none !important; } .block { display: block; } .contents { display: contents; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .table { display: table; } .aspect-\[3\/4\] { aspect-ratio: 3/4; } .aspect-\[4\/3\] { aspect-ratio: 4/3; } .aspect-\[4\/5\] { aspect-ratio: 4/5; } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: var(--aspect-video); } .size-2 { width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); } .size-3 { width: calc(var(--spacing) * 3); height: calc(var(--spacing) * 3); } .size-5 { width: calc(var(--spacing) * 5); height: calc(var(--spacing) * 5); } .size-6 { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } .size-8 { width: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8); } .size-9 { width: calc(var(--spacing) * 9); height: calc(var(--spacing) * 9); } .size-10 { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .size-11 { width: calc(var(--spacing) * 11); height: calc(var(--spacing) * 11); } .size-12 { width: calc(var(--spacing) * 12); height: calc(var(--spacing) * 12); } .size-14 { width: calc(var(--spacing) * 14); height: calc(var(--spacing) * 14); } .size-16 { width: calc(var(--spacing) * 16); height: calc(var(--spacing) * 16); } .size-20 { width: calc(var(--spacing) * 20); height: calc(var(--spacing) * 20); } .size-24 { width: calc(var(--spacing) * 24); height: calc(var(--spacing) * 24); } .size-25 { width: calc(var(--spacing) * 25); height: calc(var(--spacing) * 25); } .size-32 { width: calc(var(--spacing) * 32); height: calc(var(--spacing) * 32); } .size-40 { width: calc(var(--spacing) * 40); height: calc(var(--spacing) * 40); } .size-full { width: 100%; height: 100%; } .h-1 { height: calc(var(--spacing) * 1); } .h-1\.5 { height: calc(var(--spacing) * 1.5); } .h-1\/2 { height: calc(1/2 * 100%); } .h-1\/3 { height: calc(1/3 * 100%); } .h-2 { height: calc(var(--spacing) * 2); } .h-2\.5 { height: calc(var(--spacing) * 2.5); } .h-3 { height: calc(var(--spacing) * 3); } .h-3\.5 { height: calc(var(--spacing) * 3.5); } .h-4 { height: calc(var(--spacing) * 4); } .h-5 { height: calc(var(--spacing) * 5); } .h-6 { height: calc(var(--spacing) * 6); } .h-8 { height: calc(var(--spacing) * 8); } .h-10 { height: calc(var(--spacing) * 10); } .h-11 { height: calc(var(--spacing) * 11); } .h-12 { height: calc(var(--spacing) * 12); } .h-14 { height: calc(var(--spacing) * 14); } .h-16 { height: calc(var(--spacing) * 16); } .h-20 { height: calc(var(--spacing) * 20); } .h-24 { height: calc(var(--spacing) * 24); } .h-28 { height: calc(var(--spacing) * 28); } .h-32 { height: calc(var(--spacing) * 32); } .h-36 { height: calc(var(--spacing) * 36); } .h-40 { height: calc(var(--spacing) * 40); } .h-48 { height: calc(var(--spacing) * 48); } .h-64 { height: calc(var(--spacing) * 64); } .h-80 { height: calc(var(--spacing) * 80); } .h-\[1px\] { height: 1px; } .h-\[35vh\] { height: 35vh; } .h-\[48px\] { height: 48px; } .h-\[55vh\] { height: 55vh; } .h-\[64px\] { height: 64px; } .h-\[76px\] { height: 76px; } .h-\[calc\(100vh-140px\)\] { height: calc(100vh - 140px); } .h-full { height: 100%; } .h-screen { height: 100vh; } .max-h-48 { max-height: calc(var(--spacing) * 48); } .max-h-60 { max-height: calc(var(--spacing) * 60); } .max-h-96 { max-height: calc(var(--spacing) * 96); } .max-h-\[80vh\] { max-height: 80vh; } .max-h-\[90vh\] { max-height: 90vh; } .max-h-\[300px\] { max-height: 300px; } .min-h-\[80vh\] { min-height: 80vh; } .min-h-screen { min-height: 100vh; } .\!w-auto { width: auto !important; } .\!w-full { width: 100% !important; } .w-1 { width: calc(var(--spacing) * 1); } .w-1\/2 { width: calc(1/2 * 100%); } .w-2\.5 { width: calc(var(--spacing) * 2.5); } .w-3 { width: calc(var(--spacing) * 3); } .w-3\.5 { width: calc(var(--spacing) * 3.5); } .w-4 { width: calc(var(--spacing) * 4); } .w-5 { width: calc(var(--spacing) * 5); } .w-6 { width: calc(var(--spacing) * 6); } .w-8 { width: calc(var(--spacing) * 8); } .w-10 { width: calc(var(--spacing) * 10); } .w-11 { width: calc(var(--spacing) * 11); } .w-12 { width: calc(var(--spacing) * 12); } .w-14 { width: calc(var(--spacing) * 14); } .w-16 { width: calc(var(--spacing) * 16); } .w-20 { width: calc(var(--spacing) * 20); } .w-24 { width: calc(var(--spacing) * 24); } .w-28 { width: calc(var(--spacing) * 28); } .w-32 { width: calc(var(--spacing) * 32); } .w-40 { width: calc(var(--spacing) * 40); } .w-48 { width: calc(var(--spacing) * 48); } .w-64 { width: calc(var(--spacing) * 64); } .w-80 { width: calc(var(--spacing) * 80); } .w-\[33\%\] { width: 33%; } .w-\[75\%\] { width: 75%; } .w-\[76px\] { width: 76px; } .w-\[82\%\] { width: 82%; } .w-\[90\%\] { width: 90%; } .w-\[280px\] { width: 280px; } .w-\[calc\(100\%_\+_8rem\)\] { width: calc(100% + 8rem); } .w-auto { width: auto; } .w-full { width: 100%; } .w-max { width: max-content; } .w-px { width: 1px; } .max-w-2xl { max-width: var(--container-2xl); } .max-w-4xl { max-width: var(--container-4xl); } .max-w-\[80\%\] { max-width: 80%; } .max-w-\[95\%\] { max-width: 95%; } .max-w-\[120px\] { max-width: 120px; } .max-w-\[360px\] { max-width: 360px; } .max-w-\[480px\] { max-width: 480px; } .max-w-\[877px\] { max-width: 877px; } .max-w-lg { max-width: var(--container-lg); } .max-w-md { max-width: var(--container-md); } .max-w-none { max-width: none; } .max-w-sm { max-width: var(--container-sm); } .max-w-xl { max-width: var(--container-xl); } .max-w-xs { max-width: var(--container-xs); } .min-w-0 { min-width: calc(var(--spacing) * 0); } .min-w-48 { min-width: calc(var(--spacing) * 48); } .min-w-\[90px\] { min-width: 90px; } .min-w-\[100px\] { min-width: 100px; } .min-w-\[260px\] { min-width: 260px; } .min-w-full { min-width: 100%; } .min-w-max { min-width: max-content; } .flex-1 { flex: 1; } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .flex-grow-0 { flex-grow: 0; } .origin-top { transform-origin: top; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-8 { --tw-translate-x: calc(var(--spacing) * -8); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-0\.5 { --tw-translate-x: calc(var(--spacing) * 0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-1\/2 { --tw-translate-x: calc(1/2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-5 { --tw-translate-x: calc(var(--spacing) * 5); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-8 { --tw-translate-y: calc(var(--spacing) * -8); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-\[80px\] { --tw-translate-y: calc(80px * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-0 { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-1\/2 { --tw-translate-y: calc(1/2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-full { --tw-translate-y: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .scale-95 { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } .scale-110 { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } .-rotate-90 { rotate: calc(90deg * -1); } .rotate-45 { rotate: 45deg; } .-skew-x-12 { --tw-skew-x: skewX(calc(12deg * -1)); transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .transform { transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); } .animate-bounce { animation: var(--animate-bounce); } .animate-ping { animation: var(--animate-ping); } .animate-pulse { animation: var(--animate-pulse); } .animate-spin { animation: var(--animate-spin); } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .touch-manipulation { touch-action: manipulation; } .resize { resize: both; } .resize-none { resize: none; } .resize-y { resize: vertical; } .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .snap-center { scroll-snap-align: center; } .list-inside { list-style-position: inside; } .list-disc { list-style-type: disc; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .\!flex-row { flex-direction: row !important; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap { flex-wrap: wrap; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .justify-around { justify-content: space-around; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .justify-items-center { justify-items: center; } .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-1\.5 { gap: calc(var(--spacing) * 1.5); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-5 { gap: calc(var(--spacing) * 5); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-8 { gap: calc(var(--spacing) * 8); } .gap-10 { gap: calc(var(--spacing) * 10); } .gap-px { gap: 1px; } .space-y-1 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-2 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-3 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-4 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-6 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-8 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-10 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))); } } .gap-x-2 { column-gap: calc(var(--spacing) * 2); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .space-x-2 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); } } .space-x-3 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); } } .space-x-4 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse))); } } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } .divide-x { :where(& > :not(:last-child)) { --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } } .divide-y { :where(& > :not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); } } .divide-gray-100 { :where(& > :not(:last-child)) { border-color: var(--color-gray-100); } } .divide-gray-200 { :where(& > :not(:last-child)) { border-color: var(--color-gray-200); } } .divide-slate-50 { :where(& > :not(:last-child)) { border-color: var(--color-slate-50); } } .divide-slate-100 { :where(& > :not(:last-child)) { border-color: var(--color-slate-100); } } .self-center { align-self: center; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-auto { overflow-y: auto; } .\!rounded-full { border-radius: calc(infinity * 1px) !important; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: var(--radius-2xl); } .rounded-3xl { border-radius: var(--radius-3xl); } .rounded-\[1\.5rem\] { border-radius: 1.5rem; } .rounded-\[2rem\] { border-radius: 2rem; } .rounded-\[10px\] { border-radius: 10px; } .rounded-full { border-radius: calc(infinity * 1px); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-t-2xl { border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); } .rounded-t-3xl { border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); } .rounded-t-\[2rem\] { border-top-left-radius: 2rem; border-top-right-radius: 2rem; } .rounded-t-full { border-top-left-radius: calc(infinity * 1px); border-top-right-radius: calc(infinity * 1px); } .rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .rounded-tl-md { border-top-left-radius: var(--radius-md); } .rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .rounded-tr-md { border-top-right-radius: var(--radius-md); } .rounded-b-\[2rem\] { border-bottom-right-radius: 2rem; border-bottom-left-radius: 2rem; } .rounded-b-full { border-bottom-right-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px); } .rounded-b-xl { border-bottom-right-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-4 { border-style: var(--tw-border-style); border-width: 4px; } .border-\[3px\] { border-style: var(--tw-border-style); border-width: 3px; } .border-y { border-block-style: var(--tw-border-style); border-block-width: 1px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-l-4 { border-left-style: var(--tw-border-style); border-left-width: 4px; } .border-dashed { --tw-border-style: dashed; border-style: dashed; } .border-none { --tw-border-style: none; border-style: none; } .\!border-slate-800 { border-color: var(--color-slate-800) !important; } .border-amber-50 { border-color: var(--color-amber-50); } .border-amber-100 { border-color: var(--color-amber-100); } .border-amber-200 { border-color: var(--color-amber-200); } .border-amber-300 { border-color: var(--color-amber-300); } .border-amber-400 { border-color: var(--color-amber-400); } .border-amber-500 { border-color: var(--color-amber-500); } .border-black { border-color: var(--color-black); } .border-blue-50 { border-color: var(--color-blue-50); } .border-blue-100 { border-color: var(--color-blue-100); } .border-blue-200 { border-color: var(--color-blue-200); } .border-blue-500 { border-color: var(--color-blue-500); } .border-brandcolor-500 { border-color: var(--color-brandcolor-500); } .border-emerald-200 { border-color: var(--color-emerald-200); } .border-gray-100 { border-color: var(--color-gray-100); } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-gray-400 { border-color: var(--color-gray-400); } .border-green-200 { border-color: var(--color-green-200); } .border-green-400 { border-color: var(--color-green-400); } .border-green-500 { border-color: var(--color-green-500); } .border-indigo-50 { border-color: var(--color-indigo-50); } .border-indigo-100 { border-color: var(--color-indigo-100); } .border-indigo-300 { border-color: var(--color-indigo-300); } .border-indigo-500 { border-color: var(--color-indigo-500); } .border-neutral-200 { border-color: var(--color-neutral-200); } .border-orange-50 { border-color: var(--color-orange-50); } .border-pink-200 { border-color: var(--color-pink-200); } .border-red-100 { border-color: var(--color-red-100); } .border-red-200 { border-color: var(--color-red-200); } .border-red-400 { border-color: var(--color-red-400); } .border-red-500 { border-color: var(--color-red-500); } .border-rose-100 { border-color: var(--color-rose-100); } .border-rose-200 { border-color: var(--color-rose-200); } .border-sky-200 { border-color: var(--color-sky-200); } .border-slate-50 { border-color: var(--color-slate-50); } .border-slate-100 { border-color: var(--color-slate-100); } .border-slate-200 { border-color: var(--color-slate-200); } .border-slate-300 { border-color: var(--color-slate-300); } .border-slate-400 { border-color: var(--color-slate-400); } .border-slate-600 { border-color: var(--color-slate-600); } .border-slate-700 { border-color: var(--color-slate-700); } .border-slate-700\/50 { border-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent); } } .border-slate-800 { border-color: var(--color-slate-800); } .border-slate-900 { border-color: var(--color-slate-900); } .border-transparent { border-color: transparent; } .border-white { border-color: var(--color-white); } .border-white\/10 { border-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .border-white\/20 { border-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .border-white\/30 { border-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } .border-white\/50 { border-color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .border-white\/60 { border-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .border-yellow-200 { border-color: var(--color-yellow-200); } .border-t-brandcolor-500 { border-top-color: var(--color-brandcolor-500); } .border-t-slate-900 { border-top-color: var(--color-slate-900); } .border-t-white { border-top-color: var(--color-white); } .border-l-indigo-500 { border-left-color: var(--color-indigo-500); } .\!bg-slate-200 { background-color: var(--color-slate-200) !important; } .\!bg-slate-800 { background-color: var(--color-slate-800) !important; } .\!bg-white { background-color: var(--color-white) !important; } .bg-\[\#1877F2\] { background-color: #1877F2; } .bg-\[\#FF2D20\]\/10 { background-color: color-mix(in oklab, #FF2D20 10%, transparent); } .bg-amber-50 { background-color: var(--color-amber-50); } .bg-amber-100 { background-color: var(--color-amber-100); } .bg-amber-300 { background-color: var(--color-amber-300); } .bg-amber-400 { background-color: var(--color-amber-400); } .bg-amber-500 { background-color: var(--color-amber-500); } .bg-black { background-color: var(--color-black); } .bg-black\/20 { background-color: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 20%, transparent); } } .bg-black\/30 { background-color: color-mix(in srgb, #000 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 30%, transparent); } } .bg-black\/40 { background-color: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 40%, transparent); } } .bg-black\/50 { background-color: color-mix(in srgb, #000 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .bg-black\/60 { background-color: color-mix(in srgb, #000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 60%, transparent); } } .bg-black\/80 { background-color: color-mix(in srgb, #000 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 80%, transparent); } } .bg-blue-50 { background-color: var(--color-blue-50); } .bg-blue-100 { background-color: var(--color-blue-100); } .bg-blue-100\/50 { background-color: color-mix(in srgb, oklch(93.2% 0.032 255.585) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-blue-100) 50%, transparent); } } .bg-blue-300 { background-color: var(--color-blue-300); } .bg-blue-500 { background-color: var(--color-blue-500); } .bg-blue-600 { background-color: var(--color-blue-600); } .bg-blue-700 { background-color: var(--color-blue-700); } .bg-brandcolor-50 { background-color: var(--color-brandcolor-50); } .bg-brandcolor-500 { background-color: var(--color-brandcolor-500); } .bg-brandcolor-900 { background-color: var(--color-brandcolor-900); } .bg-cyan-50 { background-color: var(--color-cyan-50); } .bg-emerald-50 { background-color: var(--color-emerald-50); } .bg-emerald-100 { background-color: var(--color-emerald-100); } .bg-emerald-300 { background-color: var(--color-emerald-300); } .bg-governor-bay-100 { background-color: var(--color-governor-bay-100); } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-200 { background-color: var(--color-gray-200); } .bg-gray-300 { background-color: var(--color-gray-300); } .bg-gray-400 { background-color: var(--color-gray-400); } .bg-gray-500 { background-color: var(--color-gray-500); } .bg-green-50 { background-color: var(--color-green-50); } .bg-green-50\/50 { background-color: color-mix(in srgb, oklch(98.2% 0.018 155.826) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-green-50) 50%, transparent); } } .bg-green-100 { background-color: var(--color-green-100); } .bg-green-100\/50 { background-color: color-mix(in srgb, oklch(96.2% 0.044 156.743) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-green-100) 50%, transparent); } } .bg-green-500 { background-color: var(--color-green-500); } .bg-green-600 { background-color: var(--color-green-600); } .bg-indigo-50 { background-color: var(--color-indigo-50); } .bg-indigo-50\/40 { background-color: color-mix(in srgb, oklch(96.2% 0.018 272.314) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-indigo-50) 40%, transparent); } } .bg-indigo-50\/50 { background-color: color-mix(in srgb, oklch(96.2% 0.018 272.314) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-indigo-50) 50%, transparent); } } .bg-indigo-100 { background-color: var(--color-indigo-100); } .bg-indigo-100\/50 { background-color: color-mix(in srgb, oklch(93% 0.034 272.788) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-indigo-100) 50%, transparent); } } .bg-indigo-400 { background-color: var(--color-indigo-400); } .bg-indigo-600 { background-color: var(--color-indigo-600); } .bg-indigo-700 { background-color: var(--color-indigo-700); } .bg-indigo-900\/50 { background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-indigo-900) 50%, transparent); } } .bg-lime-100 { background-color: var(--color-lime-100); } .bg-lime-200 { background-color: var(--color-lime-200); } .bg-orange-50 { background-color: var(--color-orange-50); } .bg-orange-400 { background-color: var(--color-orange-400); } .bg-orange-800 { background-color: var(--color-orange-800); } .bg-pink-50 { background-color: var(--color-pink-50); } .bg-pink-100 { background-color: var(--color-pink-100); } .bg-purple-50 { background-color: var(--color-purple-50); } .bg-purple-100 { background-color: var(--color-purple-100); } .bg-purple-100\/50 { background-color: color-mix(in srgb, oklch(94.6% 0.033 307.174) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-purple-100) 50%, transparent); } } .bg-purple-300 { background-color: var(--color-purple-300); } .bg-purple-500 { background-color: var(--color-purple-500); } .bg-purple-600\/20 { background-color: color-mix(in srgb, oklch(55.8% 0.288 302.321) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-purple-600) 20%, transparent); } } .bg-red-50 { background-color: var(--color-red-50); } .bg-red-100 { background-color: var(--color-red-100); } .bg-red-500 { background-color: var(--color-red-500); } .bg-red-600 { background-color: var(--color-red-600); } .bg-red-700 { background-color: var(--color-red-700); } .bg-rose-50 { background-color: var(--color-rose-50); } .bg-rose-100 { background-color: var(--color-rose-100); } .bg-rose-300 { background-color: var(--color-rose-300); } .bg-rose-500 { background-color: var(--color-rose-500); } .bg-sky-50 { background-color: var(--color-sky-50); } .bg-sky-100 { background-color: var(--color-sky-100); } .bg-sky-300 { background-color: var(--color-sky-300); } .bg-sky-500\/10 { background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent); } } .bg-slate-50 { background-color: var(--color-slate-50); } .bg-slate-50\/50 { background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent); } } .bg-slate-50\/90 { background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-50) 90%, transparent); } } .bg-slate-100 { background-color: var(--color-slate-100); } .bg-slate-100\/50 { background-color: color-mix(in srgb, oklch(96.8% 0.007 247.896) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-100) 50%, transparent); } } .bg-slate-200 { background-color: var(--color-slate-200); } .bg-slate-300 { background-color: var(--color-slate-300); } .bg-slate-400 { background-color: var(--color-slate-400); } .bg-slate-500 { background-color: var(--color-slate-500); } .bg-slate-600 { background-color: var(--color-slate-600); } .bg-slate-700 { background-color: var(--color-slate-700); } .bg-slate-700\/50 { background-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent); } } .bg-slate-800 { background-color: var(--color-slate-800); } .bg-slate-900 { background-color: var(--color-slate-900); } .bg-slate-900\/60 { background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-slate-900) 60%, transparent); } } .bg-transparent { background-color: transparent; } .bg-violet-100 { background-color: var(--color-violet-100); } .bg-white { background-color: var(--color-white); } .bg-white\/5 { background-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .bg-white\/10 { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } .bg-white\/20 { background-color: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 20%, transparent); } } .bg-white\/50 { background-color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .bg-white\/60 { background-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .bg-white\/80 { background-color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .bg-white\/90 { background-color: color-mix(in srgb, #fff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 90%, transparent); } } .bg-white\/95 { background-color: color-mix(in srgb, #fff 95%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 95%, transparent); } } .bg-yellow-50 { background-color: var(--color-yellow-50); } .bg-yellow-100 { background-color: var(--color-yellow-100); } .bg-yellow-500 { background-color: var(--color-yellow-500); } .bg-yellow-600 { background-color: var(--color-yellow-600); } .bg-gradient-to-b { --tw-gradient-position: to bottom in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-br { --tw-gradient-position: to bottom right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-l { --tw-gradient-position: to left in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-tr { --tw-gradient-position: to top right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .from-amber-100 { --tw-gradient-from: var(--color-amber-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-amber-500 { --tw-gradient-from: var(--color-amber-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/10 { --tw-gradient-from: color-mix(in srgb, #000 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/40 { --tw-gradient-from: color-mix(in srgb, #000 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 40%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/60 { --tw-gradient-from: color-mix(in srgb, #000 60%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 60%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/70 { --tw-gradient-from: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 70%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-black\/80 { --tw-gradient-from: color-mix(in srgb, #000 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-black) 80%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-blue-400 { --tw-gradient-from: var(--color-blue-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-blue-500 { --tw-gradient-from: var(--color-blue-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-blue-800 { --tw-gradient-from: var(--color-blue-800); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-indigo-50\/80 { --tw-gradient-from: color-mix(in srgb, oklch(96.2% 0.018 272.314) 80%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-indigo-50) 80%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-indigo-100 { --tw-gradient-from: var(--color-indigo-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-indigo-400 { --tw-gradient-from: var(--color-indigo-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-indigo-500 { --tw-gradient-from: var(--color-indigo-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-indigo-900 { --tw-gradient-from: var(--color-indigo-900); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-pink-500 { --tw-gradient-from: var(--color-pink-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-purple-500 { --tw-gradient-from: var(--color-purple-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-rose-400 { --tw-gradient-from: var(--color-rose-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-sky-500\/20 { --tw-gradient-from: color-mix(in srgb, oklch(68.5% 0.169 237.323) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-sky-500) 20%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-slate-100 { --tw-gradient-from: var(--color-slate-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-white\/10 { --tw-gradient-from: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-white) 10%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-white\/70 { --tw-gradient-from: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-white) 70%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-yellow-50\/50 { --tw-gradient-from: color-mix(in srgb, oklch(98.7% 0.026 102.212) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-from: color-mix(in oklab, var(--color-yellow-50) 50%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .from-yellow-400 { --tw-gradient-from: var(--color-yellow-400); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .via-black\/20 { --tw-gradient-via: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-black) 20%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-indigo-950 { --tw-gradient-via: var(--color-indigo-950); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-pink-500 { --tw-gradient-via: var(--color-pink-500); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-transparent { --tw-gradient-via: transparent; --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white { --tw-gradient-via: var(--color-white); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/20 { --tw-gradient-via: color-mix(in srgb, #fff 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent); } --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .to-amber-50 { --tw-gradient-to: var(--color-amber-50); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-blue-100 { --tw-gradient-to: var(--color-blue-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-cyan-500 { --tw-gradient-to: var(--color-cyan-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-indigo-500 { --tw-gradient-to: var(--color-indigo-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-indigo-600 { --tw-gradient-to: var(--color-indigo-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-orange-100 { --tw-gradient-to: var(--color-orange-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-orange-500 { --tw-gradient-to: var(--color-orange-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-purple-100 { --tw-gradient-to: var(--color-purple-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-purple-500 { --tw-gradient-to: var(--color-purple-500); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-purple-600 { --tw-gradient-to: var(--color-purple-600); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-200 { --tw-gradient-to: var(--color-slate-200); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-800 { --tw-gradient-to: var(--color-slate-800); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-slate-900 { --tw-gradient-to: var(--color-slate-900); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-white { --tw-gradient-to: var(--color-white); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-white\/50 { --tw-gradient-to: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-gradient-to: color-mix(in oklab, var(--color-white) 50%, transparent); } --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .to-zinc-900 { --tw-gradient-to: var(--color-zinc-900); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .bg-cover { background-size: cover; } .bg-center { background-position: center; } .fill-current { fill: currentcolor; } .stroke-\[\#FF2D20\] { stroke: #FF2D20; } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .object-top { object-position: top; } .p-0 { padding: calc(var(--spacing) * 0); } .p-0\.5 { padding: calc(var(--spacing) * 0.5); } .p-1 { padding: calc(var(--spacing) * 1); } .p-1\.5 { padding: calc(var(--spacing) * 1.5); } .p-2 { padding: calc(var(--spacing) * 2); } .p-2\.5 { padding: calc(var(--spacing) * 2.5); } .p-3 { padding: calc(var(--spacing) * 3); } .p-3\.5 { padding: calc(var(--spacing) * 3.5); } .p-4 { padding: calc(var(--spacing) * 4); } .p-5 { padding: calc(var(--spacing) * 5); } .p-6 { padding: calc(var(--spacing) * 6); } .p-7 { padding: calc(var(--spacing) * 7); } .p-8 { padding: calc(var(--spacing) * 8); } .\!px-3 { padding-inline: calc(var(--spacing) * 3) !important; } .\!px-4 { padding-inline: calc(var(--spacing) * 4) !important; } .\!px-5 { padding-inline: calc(var(--spacing) * 5) !important; } .px-0\.5 { padding-inline: calc(var(--spacing) * 0.5); } .px-1 { padding-inline: calc(var(--spacing) * 1); } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-4 { padding-inline: calc(var(--spacing) * 4); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: calc(var(--spacing) * 8); } .\!py-1 { padding-block: calc(var(--spacing) * 1) !important; } .\!py-1\.5 { padding-block: calc(var(--spacing) * 1.5) !important; } .\!py-4 { padding-block: calc(var(--spacing) * 4) !important; } .py-0\.5 { padding-block: calc(var(--spacing) * 0.5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-1\.5 { padding-block: calc(var(--spacing) * 1.5); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-2\.5 { padding-block: calc(var(--spacing) * 2.5); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-3\.5 { padding-block: calc(var(--spacing) * 3.5); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-5 { padding-block: calc(var(--spacing) * 5); } .py-6 { padding-block: calc(var(--spacing) * 6); } .py-7 { padding-block: calc(var(--spacing) * 7); } .py-8 { padding-block: calc(var(--spacing) * 8); } .py-10 { padding-block: calc(var(--spacing) * 10); } .py-12 { padding-block: calc(var(--spacing) * 12); } .py-16 { padding-block: calc(var(--spacing) * 16); } .pt-0 { padding-top: calc(var(--spacing) * 0); } .pt-1 { padding-top: calc(var(--spacing) * 1); } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-5 { padding-top: calc(var(--spacing) * 5); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-8 { padding-top: calc(var(--spacing) * 8); } .pt-10 { padding-top: calc(var(--spacing) * 10); } .pt-12 { padding-top: calc(var(--spacing) * 12); } .pr-1 { padding-right: calc(var(--spacing) * 1); } .pr-4 { padding-right: calc(var(--spacing) * 4); } .pr-5 { padding-right: calc(var(--spacing) * 5); } .pb-1 { padding-bottom: calc(var(--spacing) * 1); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-3 { padding-bottom: calc(var(--spacing) * 3); } .pb-4 { padding-bottom: calc(var(--spacing) * 4); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-8 { padding-bottom: calc(var(--spacing) * 8); } .pb-12 { padding-bottom: calc(var(--spacing) * 12); } .pb-20 { padding-bottom: calc(var(--spacing) * 20); } .pb-24 { padding-bottom: calc(var(--spacing) * 24); } .pb-28 { padding-bottom: calc(var(--spacing) * 28); } .pb-32 { padding-bottom: calc(var(--spacing) * 32); } .pb-40 { padding-bottom: calc(var(--spacing) * 40); } .pl-1 { padding-left: calc(var(--spacing) * 1); } .pl-2 { padding-left: calc(var(--spacing) * 2); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-4 { padding-left: calc(var(--spacing) * 4); } .pl-5 { padding-left: calc(var(--spacing) * 5); } .pl-10 { padding-left: calc(var(--spacing) * 10); } .pl-12 { padding-left: calc(var(--spacing) * 12); } .text-center { text-align: center; } .text-justify { text-align: justify; } .text-left { text-align: left; } .text-right { text-align: right; } .align-middle { vertical-align: middle; } .font-mono { font-family: var(--font-mono); } .font-sans { font-family: var(--font-sans); } .font-serif { font-family: var(--font-serif); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading, var(--text-3xl--line-height)); } .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading, var(--text-4xl--line-height)); } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } .text-6xl { font-size: var(--text-6xl); line-height: var(--tw-leading, var(--text-6xl--line-height)); } .text-8xl { font-size: var(--text-8xl); line-height: var(--tw-leading, var(--text-8xl--line-height)); } .text-base { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-sm\/relaxed { font-size: var(--text-sm); line-height: var(--leading-relaxed); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); } .\!text-\[10px\] { font-size: 10px !important; } .\!text-fluid-tiny { font-size: var(--text-fluid-tiny) !important; } .\!text-fluid-xs { font-size: var(--text-fluid-xs) !important; } .text-\[6px\] { font-size: 6px; } .text-\[7px\] { font-size: 7px; } .text-\[9px\] { font-size: 9px; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[12px\] { font-size: 12px; } .text-\[14px\] { font-size: 14px; } .text-\[16px\] { font-size: 16px; } .text-\[18px\] { font-size: 18px; } .text-\[20px\] { font-size: 20px; } .text-\[22px\] { font-size: 22px; } .text-\[24px\] { font-size: 24px; } .text-\[26px\] { font-size: 26px; } .text-\[28px\] { font-size: 28px; } .text-\[32px\] { font-size: 32px; } .text-\[40px\] { font-size: 40px; } .text-fluid-base { font-size: var(--text-fluid-base); } .text-fluid-lg { font-size: var(--text-fluid-lg); } .text-fluid-md { font-size: var(--text-fluid-md); } .text-fluid-sm { font-size: var(--text-fluid-sm); } .text-fluid-tiny { font-size: var(--text-fluid-tiny); } .text-fluid-xs { font-size: var(--text-fluid-xs); } .text-fluid-xxs { font-size: var(--text-fluid-xxs); } .leading-5 { --tw-leading: calc(var(--spacing) * 5); line-height: calc(var(--spacing) * 5); } .leading-none { --tw-leading: 1; line-height: 1; } .leading-normal { --tw-leading: var(--leading-normal); line-height: var(--leading-normal); } .leading-relaxed { --tw-leading: var(--leading-relaxed); line-height: var(--leading-relaxed); } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-black { --tw-font-weight: var(--font-weight-black); font-weight: var(--font-weight-black); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-extrabold { --tw-font-weight: var(--font-weight-extrabold); font-weight: var(--font-weight-extrabold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[0\.1em\] { --tw-tracking: 0.1em; letter-spacing: 0.1em; } .tracking-tight { --tw-tracking: var(--tracking-tight); letter-spacing: var(--tracking-tight); } .tracking-tighter { --tw-tracking: var(--tracking-tighter); letter-spacing: var(--tracking-tighter); } .tracking-wide { --tw-tracking: var(--tracking-wide); letter-spacing: var(--tracking-wide); } .tracking-wider { --tw-tracking: var(--tracking-wider); letter-spacing: var(--tracking-wider); } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre-wrap { white-space: pre-wrap; } .\!text-pink-500 { color: var(--color-pink-500) !important; } .\!text-sky-500 { color: var(--color-sky-500) !important; } .\!text-slate-400 { color: var(--color-slate-400) !important; } .\!text-slate-600 { color: var(--color-slate-600) !important; } .\!text-white { color: var(--color-white) !important; } .text-\[\#1877F2\] { color: #1877F2; } .text-\[\#111618\] { color: #111618; } .text-\[\#A61D24\] { color: #A61D24; } .text-amber-400 { color: var(--color-amber-400); } .text-amber-500 { color: var(--color-amber-500); } .text-amber-600 { color: var(--color-amber-600); } .text-amber-700 { color: var(--color-amber-700); } .text-amber-800 { color: var(--color-amber-800); } .text-amber-900 { color: var(--color-amber-900); } .text-black { color: var(--color-black); } .text-black\/50 { color: color-mix(in srgb, #000 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .text-blue-300 { color: var(--color-blue-300); } .text-blue-500 { color: var(--color-blue-500); } .text-blue-600 { color: var(--color-blue-600); } .text-blue-700 { color: var(--color-blue-700); } .text-blue-800 { color: var(--color-blue-800); } .text-brandcolor-500 { color: var(--color-brandcolor-500); } .text-brandcolor-600 { color: var(--color-brandcolor-600); } .text-brandcolor-700 { color: var(--color-brandcolor-700); } .text-cyan-500 { color: var(--color-cyan-500); } .text-cyan-600 { color: var(--color-cyan-600); } .text-emerald-600 { color: var(--color-emerald-600); } .text-emerald-800 { color: var(--color-emerald-800); } .text-governor-bay-500 { color: var(--color-governor-bay-500); } .text-gray-100 { color: var(--color-gray-100); } .text-gray-400 { color: var(--color-gray-400); } .text-gray-500 { color: var(--color-gray-500); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-gray-800 { color: var(--color-gray-800); } .text-gray-900 { color: var(--color-gray-900); } .text-green-500 { color: var(--color-green-500); } .text-green-600 { color: var(--color-green-600); } .text-green-700 { color: var(--color-green-700); } .text-green-800 { color: var(--color-green-800); } .text-indigo-200 { color: var(--color-indigo-200); } .text-indigo-500 { color: var(--color-indigo-500); } .text-indigo-600 { color: var(--color-indigo-600); } .text-indigo-700 { color: var(--color-indigo-700); } .text-indigo-800 { color: var(--color-indigo-800); } .text-indigo-900 { color: var(--color-indigo-900); } .text-neutral-400 { color: var(--color-neutral-400); } .text-neutral-500 { color: var(--color-neutral-500); } .text-neutral-600 { color: var(--color-neutral-600); } .text-orange-400 { color: var(--color-orange-400); } .text-orange-500 { color: var(--color-orange-500); } .text-orange-600 { color: var(--color-orange-600); } .text-orange-900 { color: var(--color-orange-900); } .text-pink-400 { color: var(--color-pink-400); } .text-pink-500 { color: var(--color-pink-500); } .text-pink-600 { color: var(--color-pink-600); } .text-purple-500 { color: var(--color-purple-500); } .text-purple-600 { color: var(--color-purple-600); } .text-purple-700 { color: var(--color-purple-700); } .text-purple-800 { color: var(--color-purple-800); } .text-red-400 { color: var(--color-red-400); } .text-red-500 { color: var(--color-red-500); } .text-red-600 { color: var(--color-red-600); } .text-red-700 { color: var(--color-red-700); } .text-red-800 { color: var(--color-red-800); } .text-red-900 { color: var(--color-red-900); } .text-rose-400 { color: var(--color-rose-400); } .text-rose-500 { color: var(--color-rose-500); } .text-sky-500 { color: var(--color-sky-500); } .text-sky-600 { color: var(--color-sky-600); } .text-slate-100 { color: var(--color-slate-100); } .text-slate-200 { color: var(--color-slate-200); } .text-slate-300 { color: var(--color-slate-300); } .text-slate-400 { color: var(--color-slate-400); } .text-slate-500 { color: var(--color-slate-500); } .text-slate-600 { color: var(--color-slate-600); } .text-slate-700 { color: var(--color-slate-700); } .text-slate-800 { color: var(--color-slate-800); } .text-slate-900 { color: var(--color-slate-900); } .text-white { color: var(--color-white); } .text-white\/40 { color: color-mix(in srgb, #fff 40%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 40%, transparent); } } .text-white\/50 { color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 50%, transparent); } } .text-white\/60 { color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .text-white\/80 { color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } .text-white\/90 { color: color-mix(in srgb, #fff 90%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 90%, transparent); } } .text-yellow-400 { color: var(--color-yellow-400); } .text-yellow-500 { color: var(--color-yellow-500); } .text-yellow-700 { color: var(--color-yellow-700); } .text-yellow-800 { color: var(--color-yellow-800); } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,); } .line-through { text-decoration-line: line-through; } .underline { text-decoration-line: underline; } .decoration-sky-500\/50 { text-decoration-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { text-decoration-color: color-mix(in oklab, var(--color-sky-500) 50%, transparent); } } .underline-offset-2 { text-underline-offset: 2px; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .placeholder-slate-300 { &::placeholder { color: var(--color-slate-300); } } .opacity-0 { opacity: 0%; } .opacity-40 { opacity: 40%; } .opacity-50 { opacity: 50%; } .opacity-60 { opacity: 60%; } .opacity-70 { opacity: 70%; } .opacity-75 { opacity: 75%; } .opacity-80 { opacity: 80%; } .opacity-90 { opacity: 90%; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_-5px_20px_rgba\(0\,0\,0\,0\.02\)\] { --tw-shadow: 0 -5px 20px var(--tw-shadow-color, rgba(0,0,0,0.02)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_-5px_30px_rgba\(0\,0\,0\,0\.05\)\] { --tw-shadow: 0 -5px 30px var(--tw-shadow-color, rgba(0,0,0,0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_-10px_40px_rgba\(0\,0\,0\,0\.05\)\] { --tw-shadow: 0 -10px 40px var(--tw-shadow-color, rgba(0,0,0,0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_6px_rgba\(251\,191\,36\,0\.6\)\] { --tw-shadow: 0 0 6px var(--tw-shadow-color, rgba(251,191,36,0.6)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_0_10px_rgba\(79\,70\,229\,0\.3\)\] { --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(79,70,229,0.3)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_2px_10px_rgba\(0\,0\,0\,0\.06\)\] { --tw-shadow: 0 2px 10px var(--tw-shadow-color, rgba(0,0,0,0.06)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0px_14px_34px_0px_rgba\(0\,0\,0\,0\.08\)\] { --tw-shadow: 0px 14px 34px 0px var(--tw-shadow-color, rgba(0,0,0,0.08)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-inner { --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-xl { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-1 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-2 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-4 { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-blue-500\/30 { --tw-shadow-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-green-500\/30 { --tw-shadow-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-green-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-indigo-200 { --tw-shadow-color: oklch(87% 0.065 274.039); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-indigo-200) var(--tw-shadow-alpha), transparent); } } .shadow-indigo-500\/20 { --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-indigo-500\/30 { --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-indigo-900\/20 { --tw-shadow-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-900) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-orange-200 { --tw-shadow-color: oklch(90.1% 0.076 70.697); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, var(--color-orange-200) var(--tw-shadow-alpha), transparent); } } .shadow-slate-800\/30 { --tw-shadow-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 30%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-slate-800) 30%, transparent) var(--tw-shadow-alpha), transparent); } } .shadow-slate-900\/20 { --tw-shadow-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-slate-900) 20%, transparent) var(--tw-shadow-alpha), transparent); } } .ring-black { --tw-ring-color: var(--color-black); } .ring-black\/5 { --tw-ring-color: color-mix(in srgb, #000 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent); } } .ring-gray-300 { --tw-ring-color: var(--color-gray-300); } .ring-indigo-200 { --tw-ring-color: var(--color-indigo-200); } .ring-slate-100 { --tw-ring-color: var(--color-slate-100); } .ring-transparent { --tw-ring-color: transparent; } .ring-white { --tw-ring-color: var(--color-white); } .ring-white\/60 { --tw-ring-color: color-mix(in srgb, #fff 60%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .ring-white\/\[0\.05\] { --tw-ring-color: color-mix(in srgb, #fff 5%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-white) 5%, transparent); } } .ring-offset-slate-800 { --tw-ring-offset-color: var(--color-slate-800); } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .blur-2xl { --tw-blur: blur(var(--blur-2xl)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .blur-3xl { --tw-blur: blur(var(--blur-3xl)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .blur-md { --tw-blur: blur(var(--blur-md)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .blur-xl { --tw-blur: blur(var(--blur-xl)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .brightness-110 { --tw-brightness: brightness(110%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .contrast-\[0\.9\] { --tw-contrast: contrast(0.9); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .drop-shadow-\[0px_4px_34px_rgba\(0\,0\,0\,0\.06\)\] { --tw-drop-shadow-size: drop-shadow(0px 4px 34px var(--tw-drop-shadow-color, rgba(0,0,0,0.06))); --tw-drop-shadow: var(--tw-drop-shadow-size); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .drop-shadow-\[0px_4px_34px_rgba\(0\,0\,0\,0\.25\)\] { --tw-drop-shadow-size: drop-shadow(0px 4px 34px var(--tw-drop-shadow-color, rgba(0,0,0,0.25))); --tw-drop-shadow: var(--tw-drop-shadow-size); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .drop-shadow-md { --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-md)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .drop-shadow-sm { --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); --tw-drop-shadow: drop-shadow(var(--drop-shadow-sm)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .hue-rotate-180 { --tw-hue-rotate: hue-rotate(180deg); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .invert { --tw-invert: invert(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .saturate-\[0\.6\] { --tw-saturate: saturate(0.6); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .filter { filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); } .backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-blur-md { --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-blur-sm { --tw-backdrop-blur: blur(var(--blur-sm)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .backdrop-filter { -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-shadow { transition-property: box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .duration-100 { --tw-duration: 100ms; transition-duration: 100ms; } .duration-150 { --tw-duration: 150ms; transition-duration: 150ms; } .duration-200 { --tw-duration: 200ms; transition-duration: 200ms; } .duration-300 { --tw-duration: 300ms; transition-duration: 300ms; } .duration-500 { --tw-duration: 500ms; transition-duration: 500ms; } .duration-1000 { --tw-duration: 1000ms; transition-duration: 1000ms; } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { -webkit-user-select: none; user-select: none; } .ring-inset { --tw-ring-inset: inset; } .group-open\:rotate-180 { &:is(:where(.group):is([open], :popover-open, :open) *) { rotate: 180deg; } } .group-hover\:flex { &:is(:where(.group):hover *) { @media (hover: hover) { display: flex; } } } .group-hover\:translate-x-full { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } } .group-hover\:scale-105 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .group-hover\:scale-110 { &:is(:where(.group):hover *) { @media (hover: hover) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .group-hover\:scale-\[1\.02\] { &:is(:where(.group):hover *) { @media (hover: hover) { scale: 1.02; } } } .group-hover\:rotate-12 { &:is(:where(.group):hover *) { @media (hover: hover) { rotate: 12deg; } } } .group-hover\:border-indigo-500 { &:is(:where(.group):hover *) { @media (hover: hover) { border-color: var(--color-indigo-500); } } } .group-hover\:border-indigo-600 { &:is(:where(.group):hover *) { @media (hover: hover) { border-color: var(--color-indigo-600); } } } .group-hover\:bg-amber-100 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-amber-100); } } } .group-hover\:bg-amber-600 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-amber-600); } } } .group-hover\:bg-indigo-100 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-indigo-100); } } } .group-hover\:bg-indigo-500 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-indigo-500); } } } .group-hover\:bg-indigo-600 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-indigo-600); } } } .group-hover\:bg-slate-50 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: var(--color-slate-50); } } } .group-hover\:bg-white\/10 { &:is(:where(.group):hover *) { @media (hover: hover) { background-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } } } } .group-hover\:text-amber-500 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-amber-500); } } } .group-hover\:text-amber-600 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-amber-600); } } } .group-hover\:text-indigo-600 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-indigo-600); } } } .group-hover\:text-slate-600 { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-slate-600); } } } .group-hover\:text-white { &:is(:where(.group):hover *) { @media (hover: hover) { color: var(--color-white); } } } .group-hover\:opacity-60 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 60%; } } } .group-hover\:opacity-100 { &:is(:where(.group):hover *) { @media (hover: hover) { opacity: 100%; } } } .group-active\:-translate-y-4 { &:is(:where(.group):active *) { --tw-translate-y: calc(var(--spacing) * -4); translate: var(--tw-translate-x) var(--tw-translate-y); } } .group-active\:scale-110 { &:is(:where(.group):active *) { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .group-active\:opacity-100 { &:is(:where(.group):active *) { opacity: 100%; } } .peer-checked\:border-slate-900 { &:is(:where(.peer):checked ~ *) { border-color: var(--color-slate-900); } } .peer-checked\:opacity-100 { &:is(:where(.peer):checked ~ *) { opacity: 100%; } } .peer-focus\:outline-none { &:is(:where(.peer):focus ~ *) { --tw-outline-style: none; outline-style: none; } } .selection\:bg-\[\#FF2D20\] { & *::selection { background-color: #FF2D20; } &::selection { background-color: #FF2D20; } } .selection\:text-white { & *::selection { color: var(--color-white); } &::selection { color: var(--color-white); } } .file\:mr-4 { &::file-selector-button { margin-right: calc(var(--spacing) * 4); } } .file\:rounded { &::file-selector-button { border-radius: 0.25rem; } } .file\:rounded-full { &::file-selector-button { border-radius: calc(infinity * 1px); } } .file\:border-0 { &::file-selector-button { border-style: var(--tw-border-style); border-width: 0px; } } .file\:bg-brandcolor-50 { &::file-selector-button { background-color: var(--color-brandcolor-50); } } .file\:bg-cyan-50 { &::file-selector-button { background-color: var(--color-cyan-50); } } .file\:bg-indigo-50 { &::file-selector-button { background-color: var(--color-indigo-50); } } .file\:px-4 { &::file-selector-button { padding-inline: calc(var(--spacing) * 4); } } .file\:py-2 { &::file-selector-button { padding-block: calc(var(--spacing) * 2); } } .file\:text-sm { &::file-selector-button { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .file\:font-bold { &::file-selector-button { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } .file\:font-semibold { &::file-selector-button { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } } .file\:text-brandcolor-500 { &::file-selector-button { color: var(--color-brandcolor-500); } } .file\:text-cyan-500 { &::file-selector-button { color: var(--color-cyan-500); } } .file\:text-indigo-700 { &::file-selector-button { color: var(--color-indigo-700); } } .placeholder\:text-gray-400 { &::placeholder { color: var(--color-gray-400); } } .placeholder\:text-slate-300 { &::placeholder { color: var(--color-slate-300); } } .placeholder\:text-slate-400 { &::placeholder { color: var(--color-slate-400); } } .after\:absolute { &::after { content: var(--tw-content); position: absolute; } } .after\:top-\[2px\] { &::after { content: var(--tw-content); top: 2px; } } .after\:left-\[2px\] { &::after { content: var(--tw-content); left: 2px; } } .after\:h-5 { &::after { content: var(--tw-content); height: calc(var(--spacing) * 5); } } .after\:w-5 { &::after { content: var(--tw-content); width: calc(var(--spacing) * 5); } } .after\:rounded-full { &::after { content: var(--tw-content); border-radius: calc(infinity * 1px); } } .after\:border { &::after { content: var(--tw-content); border-style: var(--tw-border-style); border-width: 1px; } } .after\:border-gray-300 { &::after { content: var(--tw-content); border-color: var(--color-gray-300); } } .after\:bg-white { &::after { content: var(--tw-content); background-color: var(--color-white); } } .after\:transition-all { &::after { content: var(--tw-content); transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } } .after\:content-\[\'\'\] { &::after { --tw-content: ''; content: var(--tw-content); } } .peer-checked\:after\:translate-x-full { &:is(:where(.peer):checked ~ *) { &::after { content: var(--tw-content); --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } } } .peer-checked\:after\:border-white { &:is(:where(.peer):checked ~ *) { &::after { content: var(--tw-content); border-color: var(--color-white); } } } .last\:border-b-0 { &:last-child { border-bottom-style: var(--tw-border-style); border-bottom-width: 0px; } } .last\:border-none { &:last-child { --tw-border-style: none; border-style: none; } } .focus-within\:border-blue-500 { &:focus-within { border-color: var(--color-blue-500); } } .focus-within\:bg-white { &:focus-within { background-color: var(--color-white); } } .hover\:-translate-y-0\.5 { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .hover\:-translate-y-1 { &:hover { @media (hover: hover) { --tw-translate-y: calc(var(--spacing) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } } .hover\:scale-105 { &:hover { @media (hover: hover) { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } .hover\:scale-\[1\.01\] { &:hover { @media (hover: hover) { scale: 1.01; } } } .hover\:scale-\[1\.02\] { &:hover { @media (hover: hover) { scale: 1.02; } } } .hover\:border-amber-500 { &:hover { @media (hover: hover) { border-color: var(--color-amber-500); } } } .hover\:border-blue-200 { &:hover { @media (hover: hover) { border-color: var(--color-blue-200); } } } .hover\:border-blue-600 { &:hover { @media (hover: hover) { border-color: var(--color-blue-600); } } } .hover\:border-indigo-200 { &:hover { @media (hover: hover) { border-color: var(--color-indigo-200); } } } .hover\:border-indigo-500 { &:hover { @media (hover: hover) { border-color: var(--color-indigo-500); } } } .hover\:border-pink-200 { &:hover { @media (hover: hover) { border-color: var(--color-pink-200); } } } .hover\:border-pink-500 { &:hover { @media (hover: hover) { border-color: var(--color-pink-500); } } } .hover\:border-slate-300 { &:hover { @media (hover: hover) { border-color: var(--color-slate-300); } } } .hover\:bg-amber-50 { &:hover { @media (hover: hover) { background-color: var(--color-amber-50); } } } .hover\:bg-amber-100 { &:hover { @media (hover: hover) { background-color: var(--color-amber-100); } } } .hover\:bg-amber-400 { &:hover { @media (hover: hover) { background-color: var(--color-amber-400); } } } .hover\:bg-black\/70 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 70%, transparent); } } } } .hover\:bg-blue-100 { &:hover { @media (hover: hover) { background-color: var(--color-blue-100); } } } .hover\:bg-blue-600 { &:hover { @media (hover: hover) { background-color: var(--color-blue-600); } } } .hover\:bg-blue-700 { &:hover { @media (hover: hover) { background-color: var(--color-blue-700); } } } .hover\:bg-brandcolor-600 { &:hover { @media (hover: hover) { background-color: var(--color-brandcolor-600); } } } .hover\:bg-emerald-100 { &:hover { @media (hover: hover) { background-color: var(--color-emerald-100); } } } .hover\:bg-gray-50 { &:hover { @media (hover: hover) { background-color: var(--color-gray-50); } } } .hover\:bg-gray-100 { &:hover { @media (hover: hover) { background-color: var(--color-gray-100); } } } .hover\:bg-gray-200 { &:hover { @media (hover: hover) { background-color: var(--color-gray-200); } } } .hover\:bg-gray-300 { &:hover { @media (hover: hover) { background-color: var(--color-gray-300); } } } .hover\:bg-gray-400 { &:hover { @media (hover: hover) { background-color: var(--color-gray-400); } } } .hover\:bg-green-500 { &:hover { @media (hover: hover) { background-color: var(--color-green-500); } } } .hover\:bg-indigo-50 { &:hover { @media (hover: hover) { background-color: var(--color-indigo-50); } } } .hover\:bg-indigo-500 { &:hover { @media (hover: hover) { background-color: var(--color-indigo-500); } } } .hover\:bg-indigo-700 { &:hover { @media (hover: hover) { background-color: var(--color-indigo-700); } } } .hover\:bg-red-50 { &:hover { @media (hover: hover) { background-color: var(--color-red-50); } } } .hover\:bg-red-500 { &:hover { @media (hover: hover) { background-color: var(--color-red-500); } } } .hover\:bg-red-600 { &:hover { @media (hover: hover) { background-color: var(--color-red-600); } } } .hover\:bg-red-700 { &:hover { @media (hover: hover) { background-color: var(--color-red-700); } } } .hover\:bg-rose-50 { &:hover { @media (hover: hover) { background-color: var(--color-rose-50); } } } .hover\:bg-rose-600 { &:hover { @media (hover: hover) { background-color: var(--color-rose-600); } } } .hover\:bg-slate-50 { &:hover { @media (hover: hover) { background-color: var(--color-slate-50); } } } .hover\:bg-slate-100 { &:hover { @media (hover: hover) { background-color: var(--color-slate-100); } } } .hover\:bg-slate-200 { &:hover { @media (hover: hover) { background-color: var(--color-slate-200); } } } .hover\:bg-slate-300 { &:hover { @media (hover: hover) { background-color: var(--color-slate-300); } } } .hover\:bg-slate-600 { &:hover { @media (hover: hover) { background-color: var(--color-slate-600); } } } .hover\:bg-slate-700 { &:hover { @media (hover: hover) { background-color: var(--color-slate-700); } } } .hover\:bg-slate-800 { &:hover { @media (hover: hover) { background-color: var(--color-slate-800); } } } .hover\:bg-white { &:hover { @media (hover: hover) { background-color: var(--color-white); } } } .hover\:bg-white\/30 { &:hover { @media (hover: hover) { background-color: color-mix(in srgb, #fff 30%, transparent); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 30%, transparent); } } } } .hover\:bg-yellow-600 { &:hover { @media (hover: hover) { background-color: var(--color-yellow-600); } } } .hover\:text-amber-900 { &:hover { @media (hover: hover) { color: var(--color-amber-900); } } } .hover\:text-black { &:hover { @media (hover: hover) { color: var(--color-black); } } } .hover\:text-black\/70 { &:hover { @media (hover: hover) { color: color-mix(in srgb, #000 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 70%, transparent); } } } } .hover\:text-blue-600 { &:hover { @media (hover: hover) { color: var(--color-blue-600); } } } .hover\:text-gray-900 { &:hover { @media (hover: hover) { color: var(--color-gray-900); } } } .hover\:text-green-500 { &:hover { @media (hover: hover) { color: var(--color-green-500); } } } .hover\:text-indigo-600 { &:hover { @media (hover: hover) { color: var(--color-indigo-600); } } } .hover\:text-indigo-800 { &:hover { @media (hover: hover) { color: var(--color-indigo-800); } } } .hover\:text-indigo-900 { &:hover { @media (hover: hover) { color: var(--color-indigo-900); } } } .hover\:text-orange-900 { &:hover { @media (hover: hover) { color: var(--color-orange-900); } } } .hover\:text-pink-500 { &:hover { @media (hover: hover) { color: var(--color-pink-500); } } } .hover\:text-red-300 { &:hover { @media (hover: hover) { color: var(--color-red-300); } } } .hover\:text-red-500 { &:hover { @media (hover: hover) { color: var(--color-red-500); } } } .hover\:text-red-700 { &:hover { @media (hover: hover) { color: var(--color-red-700); } } } .hover\:text-red-800 { &:hover { @media (hover: hover) { color: var(--color-red-800); } } } .hover\:text-red-900 { &:hover { @media (hover: hover) { color: var(--color-red-900); } } } .hover\:text-rose-500 { &:hover { @media (hover: hover) { color: var(--color-rose-500); } } } .hover\:text-slate-500 { &:hover { @media (hover: hover) { color: var(--color-slate-500); } } } .hover\:text-slate-600 { &:hover { @media (hover: hover) { color: var(--color-slate-600); } } } .hover\:text-slate-700 { &:hover { @media (hover: hover) { color: var(--color-slate-700); } } } .hover\:text-slate-900 { &:hover { @media (hover: hover) { color: var(--color-slate-900); } } } .hover\:text-white { &:hover { @media (hover: hover) { color: var(--color-white); } } } .hover\:no-underline { &:hover { @media (hover: hover) { text-decoration-line: none; } } } .hover\:underline { &:hover { @media (hover: hover) { text-decoration-line: underline; } } } .hover\:opacity-90 { &:hover { @media (hover: hover) { opacity: 90%; } } } .hover\:opacity-100 { &:hover { @media (hover: hover) { opacity: 100%; } } } .hover\:shadow-lg { &:hover { @media (hover: hover) { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-md { &:hover { @media (hover: hover) { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-xl { &:hover { @media (hover: hover) { --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hover\:shadow-indigo-500\/40 { &:hover { @media (hover: hover) { --tw-shadow-color: color-mix(in srgb, oklch(58.5% 0.233 277.117) 40%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-500) 40%, transparent) var(--tw-shadow-alpha), transparent); } } } } .hover\:ring-black\/20 { &:hover { @media (hover: hover) { --tw-ring-color: color-mix(in srgb, #000 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--color-black) 20%, transparent); } } } } .hover\:file\:bg-brandcolor-100 { &:hover { @media (hover: hover) { &::file-selector-button { background-color: var(--color-brandcolor-100); } } } } .hover\:file\:bg-cyan-100 { &:hover { @media (hover: hover) { &::file-selector-button { background-color: var(--color-cyan-100); } } } } .hover\:file\:bg-indigo-100 { &:hover { @media (hover: hover) { &::file-selector-button { background-color: var(--color-indigo-100); } } } } .focus\:border-blue-500 { &:focus { border-color: var(--color-blue-500); } } .focus\:border-brandcolor-500 { &:focus { border-color: var(--color-brandcolor-500); } } .focus\:border-indigo-500 { &:focus { border-color: var(--color-indigo-500); } } .focus\:border-sky-500 { &:focus { border-color: var(--color-sky-500); } } .focus\:border-transparent { &:focus { border-color: transparent; } } .focus\:bg-white { &:focus { background-color: var(--color-white); } } .focus\:ring { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:ring-0 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:ring-2 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:ring-blue-500 { &:focus { --tw-ring-color: var(--color-blue-500); } } .focus\:ring-brandcolor-500 { &:focus { --tw-ring-color: var(--color-brandcolor-500); } } .focus\:ring-indigo-100 { &:focus { --tw-ring-color: var(--color-indigo-100); } } .focus\:ring-indigo-400 { &:focus { --tw-ring-color: var(--color-indigo-400); } } .focus\:ring-indigo-500 { &:focus { --tw-ring-color: var(--color-indigo-500); } } .focus\:ring-purple-200 { &:focus { --tw-ring-color: var(--color-purple-200); } } .focus\:ring-sky-500 { &:focus { --tw-ring-color: var(--color-sky-500); } } .focus\:outline-none { &:focus { --tw-outline-style: none; outline-style: none; } } .focus-visible\:ring-1 { &:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus-visible\:ring-\[\#FF2D20\] { &:focus-visible { --tw-ring-color: #FF2D20; } } .active\:scale-90 { &:active { --tw-scale-x: 90%; --tw-scale-y: 90%; --tw-scale-z: 90%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .active\:scale-95 { &:active { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .active\:scale-\[0\.98\] { &:active { scale: 0.98; } } .active\:bg-slate-50 { &:active { background-color: var(--color-slate-50); } } .active\:bg-slate-100 { &:active { background-color: var(--color-slate-100); } } .active\:bg-slate-200 { &:active { background-color: var(--color-slate-200); } } .active\:text-pink-500 { &:active { color: var(--color-pink-500); } } .active\:opacity-80 { &:active { opacity: 80%; } } .disabled\:cursor-not-allowed { &:disabled { cursor: not-allowed; } } .disabled\:opacity-40 { &:disabled { opacity: 40%; } } .disabled\:opacity-50 { &:disabled { opacity: 50%; } } .disabled\:shadow-none { &:disabled { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .has-\[\:checked\]\:border-indigo-500 { &:has(*:is(:checked)) { border-color: var(--color-indigo-500); } } .has-\[\:checked\]\:bg-indigo-50 { &:has(*:is(:checked)) { background-color: var(--color-indigo-50); } } .sm\:inline { @media (width >= 40rem) { display: inline; } } .sm\:size-6 { @media (width >= 40rem) { width: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6); } } .sm\:size-16 { @media (width >= 40rem) { width: calc(var(--spacing) * 16); height: calc(var(--spacing) * 16); } } .sm\:pt-5 { @media (width >= 40rem) { padding-top: calc(var(--spacing) * 5); } } .sm\:text-sm { @media (width >= 40rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } } .sm\:text-fluid-tiny { @media (width >= 40rem) { font-size: var(--text-fluid-tiny); } } .md\:col-span-2 { @media (width >= 48rem) { grid-column: span 2 / span 2; } } .md\:col-span-4 { @media (width >= 48rem) { grid-column: span 4 / span 4; } } .md\:row-span-3 { @media (width >= 48rem) { grid-row: span 3 / span 3; } } .md\:block { @media (width >= 48rem) { display: block; } } .md\:hidden { @media (width >= 48rem) { display: none; } } .md\:h-\[85vh\] { @media (width >= 48rem) { height: 85vh; } } .md\:h-auto { @media (width >= 48rem) { height: auto; } } .md\:max-h-\[90vh\] { @media (width >= 48rem) { max-height: 90vh; } } .md\:max-w-\[480px\] { @media (width >= 48rem) { max-width: 480px; } } .md\:max-w-\[520px\] { @media (width >= 48rem) { max-width: 520px; } } .md\:grid-cols-2 { @media (width >= 48rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .md\:grid-cols-3 { @media (width >= 48rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .md\:grid-cols-4 { @media (width >= 48rem) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .md\:grid-cols-5 { @media (width >= 48rem) { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .md\:rounded-2xl { @media (width >= 48rem) { border-radius: var(--radius-2xl); } } .md\:p-4 { @media (width >= 48rem) { padding: calc(var(--spacing) * 4); } } .md\:text-2xl { @media (width >= 48rem) { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } } .md\:text-xl { @media (width >= 48rem) { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } } .md\:shadow-2xl { @media (width >= 48rem) { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .lg\:col-span-1 { @media (width >= 64rem) { grid-column: span 1 / span 1; } } .lg\:col-span-2 { @media (width >= 64rem) { grid-column: span 2 / span 2; } } .lg\:col-start-2 { @media (width >= 64rem) { grid-column-start: 2; } } .lg\:h-16 { @media (width >= 64rem) { height: calc(var(--spacing) * 16); } } .lg\:max-w-7xl { @media (width >= 64rem) { max-width: var(--container-7xl); } } .lg\:grid-cols-2 { @media (width >= 64rem) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lg\:grid-cols-3 { @media (width >= 64rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lg\:flex-col { @media (width >= 64rem) { flex-direction: column; } } .lg\:items-end { @media (width >= 64rem) { align-items: flex-end; } } .lg\:justify-center { @media (width >= 64rem) { justify-content: center; } } .lg\:gap-8 { @media (width >= 64rem) { gap: calc(var(--spacing) * 8); } } .lg\:p-10 { @media (width >= 64rem) { padding: calc(var(--spacing) * 10); } } .lg\:pt-0 { @media (width >= 64rem) { padding-top: calc(var(--spacing) * 0); } } .lg\:pb-10 { @media (width >= 64rem) { padding-bottom: calc(var(--spacing) * 10); } } .lg\:text-\[\#FF2D20\] { @media (width >= 64rem) { color: #FF2D20; } } .dark\:block { @media (prefers-color-scheme: dark) { display: block; } } .dark\:hidden { @media (prefers-color-scheme: dark) { display: none; } } .dark\:bg-black { @media (prefers-color-scheme: dark) { background-color: var(--color-black); } } .dark\:bg-green-200 { @media (prefers-color-scheme: dark) { background-color: var(--color-green-200); } } .dark\:bg-red-200 { @media (prefers-color-scheme: dark) { background-color: var(--color-red-200); } } .dark\:bg-zinc-900 { @media (prefers-color-scheme: dark) { background-color: var(--color-zinc-900); } } .dark\:via-zinc-900 { @media (prefers-color-scheme: dark) { --tw-gradient-via: var(--color-zinc-900); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } } .dark\:to-zinc-900 { @media (prefers-color-scheme: dark) { --tw-gradient-to: var(--color-zinc-900); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } } .dark\:text-green-800 { @media (prefers-color-scheme: dark) { color: var(--color-green-800); } } .dark\:text-red-800 { @media (prefers-color-scheme: dark) { color: var(--color-red-800); } } .dark\:text-white { @media (prefers-color-scheme: dark) { color: var(--color-white); } } .dark\:text-white\/50 { @media (prefers-color-scheme: dark) { color: color-mix(in srgb, #fff 50%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 50%, transparent); } } } .dark\:text-white\/70 { @media (prefers-color-scheme: dark) { color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } } .dark\:ring-zinc-800 { @media (prefers-color-scheme: dark) { --tw-ring-color: var(--color-zinc-800); } } .dark\:hover\:text-white { @media (prefers-color-scheme: dark) { &:hover { @media (hover: hover) { color: var(--color-white); } } } } .dark\:hover\:text-white\/70 { @media (prefers-color-scheme: dark) { &:hover { @media (hover: hover) { color: color-mix(in srgb, #fff 70%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 70%, transparent); } } } } } .dark\:hover\:text-white\/80 { @media (prefers-color-scheme: dark) { &:hover { @media (hover: hover) { color: color-mix(in srgb, #fff 80%, transparent); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-white) 80%, transparent); } } } } } .dark\:hover\:ring-zinc-700 { @media (prefers-color-scheme: dark) { &:hover { @media (hover: hover) { --tw-ring-color: var(--color-zinc-700); } } } } .dark\:focus-visible\:ring-\[\#FF2D20\] { @media (prefers-color-scheme: dark) { &:focus-visible { --tw-ring-color: #FF2D20; } } } .dark\:focus-visible\:ring-white { @media (prefers-color-scheme: dark) { &:focus-visible { --tw-ring-color: var(--color-white); } } } } @charset "utf-8"; @layer components { :root { --ly--header--h: 50px; --ly--footer--h: 48px; /* #261 案C */ --ly--cont--w: 40rem; --global--bgc: #fff; --global--transition: ease-out 0.5s; --global--text-primary-color: #000; --global--text-link-color: var(--color-cyan-600); --form--bdc: var(--color-slate-400); } html { background-color: var(--global--bgc); color: var(--global--text-primary-color); } body { position: relative; padding-block: var(--ly--header--h) var(--ly--footer--h); font-family: 'Noto Sans JP', sans-serif; } .font-display { font-family: 'Spline Sans', 'Noto Sans JP', sans-serif; } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } button:not(:disabled) { cursor: pointer; } .yuji-syuku-regular { font-family: "Yuji Syuku", serif; font-weight: 400; font-style: normal; } input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea { display: block; line-height: 1.25; padding: 0.25em 0.5em; color: var(--color-slate-500); background-color: #fff; border: 1px solid var(--form--bdc); border-radius: 3px; box-sizing: border-box; width: 100%; max-width: 100%; } :where(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], select, textarea):focus { color: var(--global--text-primary-color); } } @charset "utf-8"; @layer components { .el_btn { display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); border-radius: var(--radius-xl); padding: 0.75em 1.25em; line-height: 1.125; box-shadow: var(--shadow-sm); } .el_btn:disabled { background-color: var(--color-slate-400); color: #fffc; box-shadow: none; } :where(.el_btn) { font-weight: 600; background-color: var(--color-brandcolor-800); color: var(--color-white); } .el_btn__secondary { background-color: var(--color-slate-100) !important; color: var(--color-slate-700) !important; box-shadow: none !important; } .el_btn__danger { background-color: var(--color-rose-50) !important; color: var(--color-rose-600) !important; border: 1px solid var(--color-rose-100) !important; box-shadow: none !important; } :where(.el_btn:hover) { background-color: var(--color-brandcolor-600); } :where(.el_btn:focus-visible) { outline-width: 2px; outline-offset: 2px; outline-color: var(--color-brandcolor-600); } :where(.el_btn:active) { background-color: var(--color-brandcolor-700); } .el_miniCTAbtn { display: inline-flex; justify-content: center; align-items: center; gap: 0.5em; padding: 0.5em 2em; color: var(--color-slate-50); font-size: var(--text-fluid-xxs); letter-spacing: 0.2em; font-weight: 500; line-height: 1.25; background-color: var(--color-slate-950); border-radius: 4em; } .el_miniCTAbtn:hover { background-color: var(--color-slate-800); } .el_miniCTAbtn:active { background-color: var(--color-brandcolor-800); } .el_cancelBtn { display: inline-flex; justify-content: center; align-items: center; padding: 0.25em 0.5em; font-size: var(--text-xs); border-radius: 0.25rem; border: 1px solid var(--color-slate-500); } .el_cancelBtn:hover { background-color: var(--color-slate-100); } .el_cancelBtn:focus-visible { outline-width: 2px; outline-offset: 2px; outline-color: var(--color-orange-300); } .el_cancelBtn:active { border-color: var(--color-slate-600); } .el_quietBtn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.25em; color: var(--color-slate-400); border-bottom: 1px solid currentcolor; } .el_quietBtn:hover, .el_quietBtn:focus { color: var(--color-governor-bay-600); font-weight: 600; border-bottom-width: 2px; } .el_circleBtn { position: relative; display: inline-flex; justify-content: center; align-items: center; font-size: calc(var(--size, 2.75rem) * 0.5); width: var(--size, 2.75rem); height: var(--size, 2.75rem); color: var(--color-brandcolor-50); border-radius: var(--size, 2.75rem); background-color: var(--color-brandcolor-500); } .el_circleBtn::before { content: attr(title); opacity: 0; pointer-events: none; position: absolute; right: 110%; top: 0; bottom: 0; margin: auto; width: max-content; height: 1em; font-size: var(--text-xs); line-height: 1; white-space: nowrap; color: var(--color-brandcolor-950); } .el_circleBtn:is(:hover, :focus)::before { display: inline-block; opacity: 1; } } @layer components { .ag-missions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .ag-mission-card { border-radius: 1rem; transition: all 0.2s ease-in-out; position: relative; overflow: hidden; text-align: left; display: flex; text-decoration: none; } .ag-mission-card-hot { grid-column: span 2 / span 2; background: linear-gradient(135deg, #4f46e5, #9333ea); padding: 1.25rem; align-items: center; justify-content: space-between; box-shadow: 0 0 15px rgba(79, 70, 229, 0.3); } .ag-mission-card-hot:active { transform: scale(0.98); } .ag-mission-hot-left { display: flex; align-items: center; gap: 1rem; z-index: 10; } .ag-mission-hot-icon-wrap { height: 3rem; width: 3rem; border-radius: 9999px; background-color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); color: #9333ea; transition: transform 0.3s; } .ag-mission-card-hot:hover .ag-mission-hot-icon-wrap { transform: scale(1.1); } .ag-mission-hot-icon-wrap .material-symbols-outlined { font-size: 1.5rem; } .ag-mission-hot-title-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .ag-mission-hot-title { color: white; font-weight: 700; font-size: 1.125rem; line-height: 1.2; } .ag-mission-hot-badge { background-color: #f43f5e; color: white; font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 0.25rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); animation: ag-pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .ag-mission-hot-xp-row { display: flex; align-items: center; gap: 0.25rem; } .ag-mission-hot-xp { color: #fbbf24; font-weight: 700; font-size: 0.875rem; } .ag-mission-hot-arrow { color: rgba(255, 255, 255, 0.7); font-size: 1.5rem; z-index: 10; transition: color 0.2s; } .ag-mission-card-hot:hover .ag-mission-hot-arrow { color: white; } .ag-mission-hot-bg-dec-1 { position: absolute; right: 0; top: 0; height: 100%; width: 8rem; background-color: rgba(255, 255, 255, 0.1); transform: skewX(12deg) translateX(2.5rem); pointer-events: none; } .ag-mission-hot-bg-dec-2 { position: absolute; left: 0; bottom: 0; height: 5rem; width: 5rem; background-color: rgba(255, 255, 255, 0.1); border-radius: 9999px; filter: blur(24px); pointer-events: none; } .ag-mission-card-sub { grid-column: span 1 / span 1; background-color: white; border: 1px solid #f1f5f9; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); padding: 1rem; flex-direction: column; gap: 0.75rem; } .ag-mission-card-sub:hover { border-color: #cbd5e1; } .ag-mission-card-sub-wide { grid-column: span 2 / span 2; flex-direction: row; align-items: center; justify-content: space-between; padding: 0.75rem; } .ag-mission-sub-header { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .ag-mission-sub-icon-wrap { height: 2.25rem; width: 2.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .ag-mission-sub-xp-badge { font-size: 0.625rem; font-weight: 700; color: #64748b; background-color: #f1f5f9; padding: 0.25rem 0.5rem; border-radius: 0.375rem; border: 1px solid #e2e8f0; white-space: nowrap; } .ag-mission-sub-xp-badge.ag-xp-highlight { color: white; background-color: #4f46e5; border-color: transparent; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .ag-mission-sub-title { font-size: 0.875rem; font-weight: 700; color: #0f172a; line-height: 1.25; margin-top: 0.25rem; } .ag-mission-sub-go-btn { margin-top: auto; width: 100%; padding: 0.5rem 0; background-color: #f1f5f9; border-radius: 0.5rem; font-size: 0.75rem; color: #0f172a; font-weight: 700; text-align: center; transition: background-color 0.2s; border: none; cursor: pointer; display: block; } .ag-mission-sub-go-btn:hover { background-color: #e2e8f0; } .ag-mission-sub-go-btn.ag-btn-disabled { background-color: #e2e8f0; color: #94a3b8; } .ag-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding-left: 1rem; padding-right: 1rem; } .ag-catalog-card { grid-column: span 1 / span 1; background-color: white; border-radius: 1rem; display: flex; flex-direction: column; height: 11rem; position: relative; overflow: hidden; border: 1px solid #f1f5f9; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); transition: all 0.3s ease; text-decoration: none; } .ag-catalog-card:hover { border-color: #fde68a; } .ag-card-line { height: 0.25rem; width: 100%; flex-shrink: 0; background-image: linear-gradient(to right, #fbbf24, #f59e0b, #d97706); } .ag-catalog-card-inner { padding: 0.625rem; display: flex; flex-direction: column; height: 100%; } .ag-catalog-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; flex-shrink: 0; } .ag-catalog-card-stats { display: flex; align-items: center; gap: 0.5rem; } .ag-catalog-card-stat { display: flex; align-items: center; gap: 0.125rem; font-size: 0.625rem; font-weight: 700; color: #94a3b8; } .ag-catalog-card-stat .material-symbols-outlined { font-size: 0.75rem; } .ag-catalog-card-image-wrap { flex: 1; border-radius: 0.75rem; background-color: #f1f5f9; background-size: cover; background-position: center; position: relative; overflow: hidden; box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); transition: transform 0.5s ease; } .ag-catalog-card:hover .ag-catalog-card-image-wrap { transform: scale(1.02); } .ag-catalog-card-overlay { position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 0.625rem; } .ag-catalog-card-title { color: white; font-weight: 700; font-size: 0.75rem; line-height: 1.25; letter-spacing: 0.025em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ag-catalog-card-sub { color: rgba(255, 255, 255, 0.8); font-size: 0.5625rem; margin-top: 0.125rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .ag-catalog-add-btn { grid-column: span 1 / span 1; background-color: rgba(254, 242, 242, 0.4); border-radius: 1rem; border: 2px dashed var(--color-brandcolor-300); padding: 0.75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 11rem; position: relative; transition: all 0.3s ease; text-decoration: none; } .ag-catalog-add-btn:hover { border-color: var(--color-brandcolor-500); background-color: var(--color-brandcolor-50); } .ag-catalog-add-badge { position: absolute; top: 0.5rem; right: 0.5rem; background-color: #f43f5e; color: white; font-size: 0.5625rem; font-weight: 700; padding: 0.125rem 0.375rem; border-radius: 0.25rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); animation: ag-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes ag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .ag-catalog-add-icon-wrap { height: 2.75rem; width: 2.75rem; border-radius: 9999px; background-color: white; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; color: var(--color-brandcolor-500); border: 1px solid var(--color-brandcolor-50); transition: all 0.3s ease; } .ag-catalog-add-btn:hover .ag-catalog-add-icon-wrap { transform: scale(1.1); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .ag-add-title { font-size: 0.75rem; font-weight: 900; color: #1e293b; margin-bottom: 0.5rem; line-height: 1.25; transition: color 0.3s ease; } .ag-catalog-add-btn:hover .ag-add-title { color: var(--color-brandcolor-500); } .ag-catalog-add-xp { background-color: var(--color-brandcolor-500); color: white; font-size: 0.625rem; font-weight: 900; padding: 0.25rem 0.625rem; border-radius: 9999px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); display: flex; align-items: center; gap: 0.25rem; transition: background-color 0.3s ease; } .ag-catalog-add-btn:hover .ag-catalog-add-xp { background-color: var(--color-brandcolor-700); } .ag-photoUpload { position: relative; width: calc(100% - 2rem); margin: 1rem auto; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%); border: 2px dashed var(--color-brandcolor-300); border-radius: var(--radius-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: background-color 0.2s; } .ag-photoUpload:active { background-color: #ffecec; } .ag-photoUpload_icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--color-brandcolor-500); border-radius: var(--radius-lg); color: #fff; margin-bottom: 0.5rem; } .ag-photoUpload_icon .material-symbols-outlined { font-size: 28px; } .ag-photoUpload_txt { font-size: var(--text-sm); font-weight: 700; color: var(--color-brandcolor-500); } .ag-photoUpload_preview { position: absolute; inset: 0; z-index: 2; display: none; background-color: var(--color-slate-100); } .ag-photoUpload_preview img { width: 100%; height: 100%; object-fit: contain; } .ag-photoUpload_preview.is_visible { display: block; } .ag-photoUpload_clearBtn { position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; border-radius: 50%; background-color: var(--color-slate-600); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; border: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .ag-photoUpload_clearBtn .material-symbols-outlined { font-size: 16px; } #sake_category { width: 100%; } } @charset "utf-8"; @layer components { .ly_header { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: var(--ly--header--h); background-color: #fff; } .bl_headerNav { display: grid; align-items: center; grid-template-columns: auto 1fr auto; grid-template-rows: var(--ly--header--h); overflow: hidden; padding: 2px 0 0; line-height: 1; } .bl_headerNav>* { grid-row: 1 / 2; } .bl_headerNavC { grid-column: 2 / 3; display: flex; justify-content: flex-start; align-items: center; } .bl_headerNavL { grid-column: 1 / 2; padding-left: 8px; } .bl_headerNavR { grid-column: 3 / 4; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; } .bl_headerNav a { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .bl_headerNav_ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; margin: 0; } .bl_headerNav_ttl .material-symbols-outlined { color: var(--color-brandcolor-500); font-size: 28px; } :is(.bl_headerNavL, .bl_headerNavR) :is(a, button) { min-width: 44px; height: 44px; margin: auto; border-radius: 3rem; } .el_headerNavR_btn { color: var(--global--text-link-color); font-size: 14px; font-weight: 600; } .el_headerNavR_btn:disabled { color: var(--color-slate-400); } .ly_footer { position: fixed; bottom: 0; left: 0; z-index: 10; width: 100%; height: var(--ly--footer--h); background-color: #fff; box-shadow: 0 -2px 6px 0 rgba(80, 39, 31, 0.1); overflow: hidden; /* #261 ::before 削除に伴い visible → hidden */ } .bl_mainMenu { display: flex; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; height: var(--ly--footer--h); } @media (min-width: 42em) { .bl_headerNav, .bl_mainMenu { max-width: 45rem; margin: auto; } } .bl_mainMenu_cell { padding-top: calc(var(--spacing) * 1); color: var(--color-slate-400); } .bl_mainMenu_cell a { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 3px; overflow: hidden; margin: auto; height: 100%; } .bl_mainMenu_cell a span { font-size: 26px; } .bl_mainMenu_cell a img { width: 20px; /* #261 26px → 20px */ height: 20px; object-fit: contain; } .bl_mainMenu_cell a small { font-size: 8px; /* #261 9px → 8px */ font-weight: 500; white-space: nowrap; } /* #261: bl_mainMenu_cell__cta 突出スタイル全廃止（クエストCTA解除） */ .bl_mainMenu_cell.is_current a { color: var(--color-brandcolor-900); } .bl_mainMenu_cell a:hover, .bl_mainMenu_cell a:focus { color: var(--color-brandcolor-500); } .ly_avobeFtr { position: fixed; bottom: var(--ly--footer--h); right: max(0px, calc(50vw - 27rem)); z-index: 9; padding: calc(var(--spacing) * 3); } @media (max-width: 40em) { .ly_avobeFtr.js_hideOnScroll { transition: var(--global--transition); transition-delay: 1s; transform: translateX(0); } .ly_avobeFtr.js_hideOnScroll.is_hide { transform: translateX(110%); transition: 0.3s ease 0s; } } .bl_postBtns .el_circleBtn { box-shadow: var(--shadow-md); } .bl_postBtns p { display: flex; justify-content: end; } .ly_main { position: relative; z-index: 1; min-height: calc(100vh - var(--ly--header--h) - var(--ly--footer--h)); padding-bottom: 3rem; max-width: 40em; margin: auto; } .ly_cont { max-width: var(--ly--cont--w); margin-inline: auto; } .ly_toast { position: fixed; left: 0; right: 0; width: calc(100% - 2rem); bottom: calc(var(--ly--footer--h) + 16px); z-index: 9; margin-inline: auto; padding-bottom: 1rem; border: 1px solid var(--color-slate-100); border-bottom: 0 none transparent; background-color: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 2px 5px 0 #0002; } .ly_toast.is_popUp { animation: popupUp 0.2s ease-out forwards; } .ly_toast.is_hide { opacity: 0; } .ly_toast.is_popUp.is_popDown { opacity: 1; transform: translateY(0); animation: popupDown 0.2s ease-out forwards; animation-delay: 1s; } @keyframes popupUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @keyframes popupDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(100%); } } .ly_semiModal { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; z-index: 11; } .ly_semiModal>* { overflow-y: auto; max-height: 90vh; max-width: min(calc(100% - 1rem), 40rem); margin-inline: auto; } .ly_semiModal .bl_headerNav { position: sticky; top: 0; background-color: #fff; z-index: 10; height: auto; padding-block: 1rem 0; } .ly_semiModal .bl_headerNav::before { content: ""; position: absolute; top: 0.5rem; left: 0; right: 0; margin: auto; width: 10%; height: 0.25rem; background-color: var(--color-slate-300); border-radius: 1rem; } .bl_grid { display: grid; gap: var(--bl--grid--gap, calc(var(--spacing) * 1)); grid-template-columns: repeat(auto-fit, minmax(min(var(--bl--grid--minimum, min(40vw, 10rem)), 100%), 1fr)); } .bl_grid>*:only-child { max-width: var(--bl--grid--minimum, min(40vw, 10rem)); } .bl_stack { display: block; } .bl_stack>* { display: block; } .bl_stack>*+* { margin-block-start: var(--bl--stack--gap, calc(var(--spacing) * 3)); } .el_lv2Heading, :where(.bl_wysiwyg) h2 { position: relative; padding-block-end: 0.625em; margin-block: 1em; line-height: 1.25; } :where(.el_lv2Heading, .bl_wysiwyg h2)::before { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 2.25em; height: 0.3125rem; border-radius: 0.3125rem; background-color: var(--color-governor-bay-700); } :where(.el_lv2Heading, .bl_wysiwyg h2) { font-size: var(--text-2xl); } .el_lv3Heading { margin-block: 1em 0.5em; font-size: var(--text-fluid-lg); font-weight: 600; } .el_lv3Heading:first-child { margin-block-start: 0; } .el_userIcon { display: inline-flex; justify-content: center; align-items: center; font-weight: 600; overflow: hidden; border-radius: 50%; background-color: var(--color-pink-100); } .el_userIcon img { width: 100%; height: 100%; object-fit: cover; } .el_starChip { display: inline-block; border-radius: 2em; box-shadow: var(--shadow-sm); line-height: 1; padding: 0.3125em 0.5em; border: 1px solid #fff; background-color: #fff2; } .el_starChip span { vertical-align: bottom; line-height: 1; } .el_hTagPill { display: inline-block; padding: 0.25em 1em; color: var(--color-slate-950); font-size: var(--text-xs); font-weight: 500; line-height: 1; background-color: var(--color-slate-100); border: 2px solid currentcolor; border-radius: 10rem; } .el_hTagPill:hover { background-color: var(--color-slate-300); } .el_hTagPill .material-symbols-outlined { vertical-align: middle; font-size: 90%; } .el_hTagPill.is_current { background-color: var(--color-slate-300); } .bl_hTagBlock { display: flex; flex-wrap: wrap; gap: 0.125rem; } .el_hTag { display: inline-flex; font-size: var(--text-xs); color: var(--color-cyan-600); } .el_hTag:hover { text-decoration: underline; } /* review-card ミニチップ (#352) */ .bl_chipMini { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.375rem; } .bl_chipMini_tag { display: inline-block; font-size: 0.625rem; line-height: 1; padding: 2px 6px; background-color: var(--sq-bg, #faf7f5); border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 1rem; color: var(--color-slate-600, #475569); white-space: nowrap; } .bl_chipMini_icon { font-size: 0.875rem; line-height: 1; } .el_label { display: inline-block; padding: 0.25em 1em; font-size: var(--text-sm); font-weight: 500; line-height: 1; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .el_stage { padding: 0.25em 1em; font-size: var(--text-fluid-xs); line-height: 1.125; color: var(--color-red-700); background-color: var(--color-red-50); border-radius: 1em; } .bl_formCell { padding: var(--bl--form-cell--p, calc(var(--spacing) * 3) 0); } .bl_formCell_label { display: block; color: var(--color-slate-500); font-size: var(--text-fluid-sm); font-weight: 600; margin-block-end: 0.5em; } .bl_formCell_label em { display: inline-block; padding: 0 1em; color: var(--color-red-600); font-size: 85%; text-decoration: none; font-style: normal; } .bl_formCell select { display: block; width: 100%; } .bl_formCell input[type="file"] { display: none; } .bl_formCell .el_fileBtn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.5em 1.5em; font-size: var(--text-fluid-sm); color: var(--color-cyan-600); background-color: var(--color-cyan-100); border-radius: 1em; } .bl_formCell_fileWithPreview { position: relative; width: 100%; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background-color: #fff; border-radius: var(--radius-xl); border: 2px dashed var(--color-slate-300); } .bl_inputRadio .flex { width: 100vw; overflow-x: auto; >* { white-space: nowrap; } } .bl_inputRadio label .peer[type="radio"]+span { display: inline-block; font-size: var(--text-sm); line-height: 1; padding: 0.5em 0.75em; background-color: #fff; box-shadow: 0 1px 3px #0003; border-radius: 1em; } .bl_inputRadio label .peer[type="radio"]:checked+span { background-color: var(--color-slate-200); box-shadow: inset 0 1px 3px #0003; } .bl_inputCheckB label { order: 2; } .bl_inputCheckB label:has(:checked) { order: 1 !important; } .bl_inputCheckB label .peer[type="checkbox"]+span { display: inline-block; font-size: 0.8125rem; line-height: 1; padding: 0.5em 0.75em; background-color: #fff; box-shadow: 0 1px 3px #0003; border-radius: 1em; } .bl_inputCheckB label .peer[type="checkbox"]:checked+span { color: #fff; background-color: var(--color-cyan-500); box-shadow: inset 0 1px 3px #0003; } .el_decoTxt { width: fit-content; margin-inline: auto; padding: 0.5em 3em; line-height: 1; color: #fff; font-size: var(--text-fluid-tiny); font-weight: 900; text-transform: uppercase; letter-spacing: 0.125em; background-color: var(--color-brandcolor-800); } .el_decoTxt.el_decoTxt__posAbIC { position: absolute; top: 0; left: 0; right: 0; } .bl_secHeader { display: flex; justify-content: space-between; flex-wrap: nowrap; align-items: center; } .bl_secHeader a { color: var(--global--text-link-color); } .el_secHeader_ttl { display: flex; align-items: center; gap: 0 var(--spacing); font-size: var(--text-fluid-md); font-weight: 600; line-height: 1.25; } .el_secHeader_ttl .material-symbols-outlined { font-size: 1.5rem; color: var(--color-brandcolor-600); } .bl_secHeader_sub { display: flex; align-items: center; font-size: var(--text-fluid-xs); } .bl_secHeader_sub { margin-inline-start: auto; } .bl_secHeader_sub .material-symbols-outlined { font-size: 130%; } .el_secHeader_ttl>.material-symbols-outlined { vertical-align: bottom; } .el_secHeader_btn { font-size: var(--text-xs); color: var(--color-slate-500); } .el_secHeader_btn .material-symbols-outlined { position: relative; top: -0.3em; font-size: inherit; vertical-align: bottom; } .bl_headingSet { position: relative; padding-block-end: 1px; text-align: center; } .bl_headingSet_ttl { margin-block: 0.5em; font-size: var(--text-2xl); font-weight: 600; } .bl_headingSet+* { padding-block-start: calc(var(--spacing) * 6); } .bl_infoList>*+* { margin-block-start: calc(var(--spacing) * 2); } .bl_infoList_item { display: grid; grid-template-columns: 6em 1fr; gap: calc(var(--spacing) * 2); font-size: var(--text-fluid-sm); } .bl_infoList_item time { color: var(--color-slate-400); } .page_quest { position: relative; background-color: var(--sq-bg); } @supports (display:none-all) { .bl_statusFlip { --bl--status-flip-icon-w: 64px; --bl--status-flip-lv-w: 64px; display: grid; gap: 0.5rem 0.75rem; grid-template-columns: auto 1fr var(--bl--status-flip-lv-w); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); background-color: #fff; box-shadow: var(--shadow-md); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); } .bl_statusFlip_icon { grid-column: 1 / 2; grid-row: 1 / 3; } .bl_statusFlip_name { grid-column: 2 / 3; grid-row: 1 / 2; align-self: end; font-size: var(--text-lg); font-weight: 700; line-height: 1.25; word-break: break-all; } .bl_statusFlip_lvDisc { grid-column: 3 / 4; grid-row: 1 / 3; } .bl_statusFlip_lvDisc_next { font-size: 9px; color: var(--color-slate-400); text-align: center; margin-top: 1em; line-height: 1.25; } .bl_statusFlip_lvDisc_next>span { display: inline-block; } .bl_statusFlip_rank { grid-row: 2 / 3; grid-column: 2 / 3; align-self: start; font-size: var(--text-fluid-xs); } .bl_statusFlip_rank .el_label { font-size: var(--text-fluid-tiny); color: #fff; background-color: var(--color-slate-400); padding-inline: 0; min-width: 4em; text-align: center; margin: 0 0.5em 0 0; } } .bl_lvBadge { --height: min(100%, var(--bl--status-flip-lv-w)); position: relative; width: var(--height); height: var(--height); container: lvBadge / inline-size; } @container lvBadge (max-width: 700px) { .bl_lvBadge { font-size: min(16px, 12px + 7.5cqw); } } .bl_lvBadge_circle svg { height: 100%; width: 100%; } .bl_lvBadge_data { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; line-height: 0.9; } .bl_lvBadge_data .el_lvUnit { color: var(--color-slate-400); font-size: min(13px, calc(var(--bl--status-flip-lv-w) * 0.1625)); font-weight: 600; position: relative; top: -3px; } .bl_lvBadge_data .el_lvNum { font-weight: 800; font-size: min(24px, calc(var(--bl--status-flip-lv-w) * 0.375)); } .bl_statusFlip_news { grid-column: 1 / 4; display: flex; justify-content: center; font-size: var(--text-fluid-xxs); } .bl_gemeStatus { display: grid; grid-template-columns: calc(var(--spacing) * 10) calc(var(--spacing) * 10) 1fr; grid-template-rows: auto auto; gap: 0; padding: calc(var(--spacing) * 4); margin: calc(var(--spacing) * 2); background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.06); border-radius: var(--radius-3xl); } .bl_gemeStatus_name { margin-top: 2px; padding-left: calc(var(--spacing) * 10); grid-row: 1 / 2; grid-column: 2 / 4; align-self: end; display: grid; grid-template-columns: 1fr auto; background-color: #fff; border-radius: var(--radius-md); overflow: hidden; border: 1px solid #fff9; } .bl_gemeStatus_name p { font-size: var(--text-xs); padding: 0.25em; line-height: 1.25; } .bl_gemeStatus_name .el_userName { background-color: #fff; } .bl_gemeStatus_name .el_userTitle { color: var(--color-red-700); background-color: var(--color-red-50); text-align: center; min-width: 6em; padding-inline: 1em; } .bl_XPlookup { padding: calc(var(--spacing) * 1); padding-left: calc(var(--spacing) * 11); margin-bottom: 2px; grid-row: 2 / 3; grid-column: 2 / 4; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; font-size: var(--text-sm); gap: 0 1em; } .bl_XPlookup p { line-height: 1.25; font-weight: 700; } .bl_XPlookup .el_XPcounter { grid-column: 1 / 2; align-self: end; color: var(--color-red-700); } .bl_XPlookup .el_XPcounter .el_XPnum { font-size: 1.25em; } .bl_XPlookup .el_nextLVcounter { grid-column: 2 / 3; align-self: end; color: var(--color-slate-500); text-align: end; font-weight: 600; font-size: 90%; } .bl_XPlookup .bl_pBar { grid-column: 1 / 3; grid-row: 2 / 3; } .bl_XPlookup .bl_pBar progress { --bar-bgc: var(--color-red-100); --value-bg: linear-gradient(to right, #ba1200, #e63946); border: 0 none; } .bl_gemeStatus .bl_lvBadge { width: calc(var(--spacing) * 20); height: calc(var(--spacing) * 20); grid-column: 1 / 3; grid-row: 1 / 3; border-radius: calc(var(--spacing) * 20); color: #fff; background-color: var(--color-red-700); background-image: none; } .bl_gemeStatus .bl_lvBadge_data .el_lvUnit { color: inherit; } .bl_gemeStatus .bl_lvBadge_data .el_lvNum { font-size: 1.875rem; } .bl_userNameUnit { display: grid; gap: 0.125rem 0.5rem; grid-template-columns: auto auto 1fr; } a.bl_userNameUnit { display: inline-grid; } .bl_userNameUnit .el_userIcon, .bl_userNameUnit .el_userRank { grid-column: 1 / 2; grid-row: 1 / 3; } .el_userRank { display: flex; justify-content: center; align-items: center; font-weight: 600; border-radius: 10rem; } .bl_userNameUnit .el_userName { grid-column: 2 / 4; grid-row: 1 / 2; align-self: end; font-size: var(--text-fluid-lg); font-weight: 600; line-height: 1.25; } .bl_userNameUnit .el_userArea { grid-column: 2 / 3; grid-row: 2 / 3; align-self: start; color: var(--color-slate-400); font-size: var(--text-xs); } .bl_userNameUnit .el_userLV { grid-column: 3 / 4; grid-row: 2 / 3; justify-self: start; align-self: start; color: var(--color-slate-500); font-size: var(--text-xs); font-weight: 600; } .bl_missionItem { position: relative; display: grid; grid-template-columns: calc(var(--spacing) * 10) 1fr min(25%, 6rem); align-items: center; gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3); background-color: #fff; border: 1px solid var(--color-slate-100); box-shadow: var(--shadow-md); border-radius: var(--radius-2xl); } .bl_missionItem .el_icon { display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1; border-radius: 50%; } .bl_missionItem .el_icon .material-symbols-outlined { font-size: 125%; } .bl_missionItem_ttl { font-weight: 600; font-size: var(--text-fluid-sm); margin-bottom: 0.25em; } .bl_missionItem_body p { color: var(--color-slate-500); font-size: var(--text-fluid-xs); } .bl_missionItem_cta { align-self: end; display: flex; gap: var(--spacing); flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; } .bl_missionItem_cta>* { display: inline-flex; justify-content: center; align-content: center; width: 100%; } .bl_missionItem_cta :is(button, a) { width: 100%; padding: 0.25em 0; background-color: #fff; color: var(--color-brandcolor-600); font-size: var(--text-fluid-xxs); font-weight: 600; letter-spacing: -0.05em; line-height: 1.375; border-radius: 1rem; border: 1px solid var(--color-slate-200); } .bl_missionItem_cta :is(button, a):hover, .bl_missionItem_cta :is(button, a):focus { background-color: var(--color-yellow-100); } .bl_missionItem_body .bl_pBar progress { height: 0.5rem; } .bl_missionItem_body .el_limit { color: var(--color-slate-400); font-size: var(--text-xs); } .bl_missionItem .el_XPnum { font-size: var(--text-fluid-xs); font-weight: 600; color: var(--color-governor-bay-500); } .bl_missionItem .el_label { font-size: var(--text-fluid-xxs); line-height: 1.125; color: var(--color-governor-bay-800); background-color: var(--color-governor-bay-100); align-self: start; } .bl_missionItem.is_cleared { background-color: var(--color-brandcolor-50); border: 2px solid var(--color-brandcolor-200); } .bl_missionItem.is_cleared .el_label { color: var(--color-brandcolor-500); background-color: var(--color-brandcolor-100); } .bl_missionItem.is_cleared .el_XPnum { color: var(--color-brandcolor-400); } .bl_XPgetPanel { padding: calc(var(--spacing) * 4); } .bl_XPgetPanel .el_message { margin-bottom: 0.25em; font-size: var(--text-lg); text-align: center; } .bl_pBar { --bar-bgc: var(--color-slate-200); --value-bg: var(--color-cyan-600); display: flex; align-items: center; line-height: 1; } .bl_pBar p { flex: 0; margin-inline-start: 1rem; white-space: nowrap; } .bl_pBar progress { flex: 1; width: 100%; height: 0.75rem; overflow: hidden; vertical-align: middle; border: 1px solid var(--bar-bgc); border-radius: 1rem; } .bl_pBar progress::-webkit-progress-bar { background-color: var(--bar-bgc); border-radius: 1rem; } .bl_pBar progress::-webkit-progress-value { background: var(--value-bg); } .bl_pBar progress::-moz-progress-bar { background: var(--value-bg); } .bl_missionItem .bl_pBar .bl_pBar_txt { font-weight: 900; font-size: var(--text-fluid-xs); } .bl_mission { position: relative; padding: var(--spacing); background-color: #fff; border-radius: var(--radius-md); border: 1px solid var(--color-slate-200); } .bl_mission { display: grid; grid-template-columns: 1fr 4fr; } .bl_mission header { grid-column: 1 / 2; align-self: center; } .bl_mission .bl_mission_body { grid-column: 2 / 3; } .bl_mission footer { grid-column: 2 / 3; } .bl_mission_ttl { font-size: var(--text-sm); } .bl_mission_excerpt { font-size: var(--text-xs); } .bl_mission_body .bl_grid { --bl--grid--gap: 2px; --bl--grid--minimum: 10em; font-size: clamp(0.625rem, calc(0.25vw + 0.5rem), 0.75rem); color: var(--color-slate-500); } .bl_mission .el_btn { font-size: var(--text-xs); padding: 0.25em 0.5em; background-color: var(--color-orange-600); } .bl_mission .el_btn:hover { background-color: var(--color-orange-500); } .bl_mission .el_btn:focus-visible { outline-color: var(--color-orange-300); } .bl_mission .el_btn:active { background-color: var(--color-orange-700); } .bl_mission.bl_mission__going .el_btn { color: #000; background-color: var(--color-yellow-500); } .bl_mission footer { text-align: center; } .bl_card_img img { aspect-ratio: 8 / 7; object-fit: cover; } .bl_media { --bdrs-size: var(--radius-2xl); --padding: calc(var(--spacing) * 5); --img--aspect-ratio: 16 / 9; display: grid; max-width: var(--bl--media--w, 23rem); padding: var(--padding); overflow: hidden; border-radius: var(--radius-3xl); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-slate-100); background-color: var(--color-white); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .bl_media_profile { margin-block-end: calc(var(--spacing) * 3); } .bl_media_header { position: relative; margin-block-end: calc(var(--spacing) * 3); } .bl_media_header .el_starChip, .bl_media_header .ly_chip { position: absolute; top: calc(var(--spacing) * 3); right: calc(var(--spacing) * 3); } .bl_media_img { position: relative; aspect-ratio: var(--img--aspect-ratio); background-color: var(--color-slate-100); overflow: hidden; margin-block-end: calc(var(--spacing) * 3); border-radius: var(--radius-2xl); } .bl_media_img > img { aspect-ratio: var(--img--aspect-ratio); object-fit: cover; width: 100%; height: auto; } .bl_media_body { margin-block-end: calc(var(--spacing) * 3); } .bl_media_body_txt { font-size: 90%; } .bl_media_body .bl_media_ttl { font-size: var(--text-base); font-weight: 700; margin-block-end: calc(var(--spacing) * 1); } .bl_media_body .bl_media_subTtl { font-size: var(--text-fluid-md); font-weight: 700; margin-block-end: calc(var(--spacing) * 1); } .bl_media_body .bl_excerpt { margin-block-end: calc(var(--spacing) * 1); } .review-index .bl_media_body .bl_media_ttl { color: var(--color-slate-500); font-size: var(--text-fluid-sm); } .bl_media_body .bl_toDetail { font-size: var(--text-xs); } .bl_media_body .bl_hTagBlock { margin-block-start: calc(var(--spacing) * 2); } .bl_media_footer { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--padding) / 2) 0 0; } .bl_media_footer_link { display: inline-flex; align-items: center; color: var(--global--text-link-color); font-size: var(--text-sm); font-weight: 600; } .bl_btnHeartUnit { display: inline-flex; align-items: center; gap: var(--spacing); font-size: var(--text-sm); line-height: 1; color: var(--color-slate-500); } .bl_btnHeartUnit button { cursor: pointer; } .bl_btnHeartUnit button:disabled { cursor: default; color: var(--color-red-600); } .bl_btnHeartUnit button:disabled .material-symbols-outlined { font-variation-settings: "FILL" 1; } .bl_btnHeartUnit button span { font-size: 125%; } .bl_registerCTA { padding: calc(var(--spacing) * 6); text-align: center; background-color: var(--color-slate-100); border-radius: var(--radius-2xl); border: 1px solid var(--color-slate-200); } .bl_specDL { --padding: 0.375rem 0.25rem; font-size: var(--text-fluid-sm); } .bl_specDL>div { display: flex; gap: 0.5em; align-items: center; border-bottom: 1px solid var(--color-slate-200); } .bl_specDL dt { flex-basis: 6rem; padding: var(--padding); font-size: var(--text-xs); font-weight: 600; color: var(--color-slate-500); } .bl_specDL dd { flex: 1; padding: var(--padding); } .bl_tabLike { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 5em; min-height: 2.75rem; padding: var(--spacing) 0.75em; white-space: nowrap; font-size: var(--text-fluid-xs); font-weight: 600; color: var(--color-slate-400); border-bottom-width: 2px; border-bottom-color: transparent; transition: var(--global--transition); } .bl_tabLike.active-tab { color: var(--color-slate-800); border-bottom-color: currentcolor; } .el_selectedHtag { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--spacing); padding: 0.5em; background-color: var(--color-slate-800); color: #fff; font-size: var(--text-xs); transition: var(--global--transition); cursor: pointer; border-radius: var(--radius-md); } .el_selectedHtag:hover, .el_selectedHtag:focus { background-color: var(--color-slate-700); } .el_selectedHtag .material-symbols-outlined { font-size: var(--text-xs); } .bl_linkList { --bd: 1px solid var(--color-slate-200); font-size: var(--text-fluid-base); border-radius: var(--radius-2xl); overflow: hidden; } .bl_linkList>*:nth-child(n+2) { margin-top: 2px; } .bl_linkList :is(a, button) { position: relative; display: block; padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); background-color: #fff; } .bl_linkList> :only-child :is(a, button) { padding-block: calc(var(--spacing) * 4); } .bl_linkList a::after { content: "\f46a"; position: absolute; right: calc(var(--spacing) * 4); top: 0; bottom: 0; margin: auto; display: flex; justify-content: center; align-items: center; width: 1em; height: 1em; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 1.25rem; color: var(--color-slate-400); } .bl_linkList :is(a, button):hover { color: var(--color-brandcolor-600); background-color: var(--color-slate-100); } .bl_linkList a:hover::after { color: var(--color-brandcolor-600); } .bl_notice { font-size: var(--text-xs); color: var(--color-slate-400); } .bl_miniMedia { display: flex; gap: calc(var(--spacing) * 3); align-items: center; padding: calc(var(--spacing) * 3); background-color: var(--color-slate-100); border: 1px solid var(--color-slate-200); border-radius: var(--radius-lg); max-width: 22rem; } .bl_miniMedia .el_figure { flex: 2; aspect-ratio: 1 / 1; } .bl_miniMedia .el_figure img { aspect-ratio: 1 / 1; } .bl_miniMedia .el_body { flex: 7; } .el_footer { flex: 1; } .bl_recReel { display: flex; gap: var(--spacing); overflow-x: auto; padding-block: var(--spacing); } .bl_recReel>* { flex-shrink: 0; } .bl_recReel .el_hTagPill.is_all { background-color: var(--color-brandcolor-100); } .bl_recReel .el_hTagPill.is_current { color: #fff; background-color: var(--color-cyan-500); } .bl_sakeINCsearch { position: relative; } .bl_sakeINCsearch_inputWrap { display: flex; gap: var(--spacing); align-items: center; padding: var(--spacing); background-color: var(--color-slate-50); border: 1px solid var(--form--bdc); border-radius: var(--radius-lg); } .bl_sakeINCsearch_inputWrap>span { display: inline-block; padding: var(--spacing); } .bl_sakeINCsearch_inputWrap:focus-within { background-color: #fff; } .bl_sakeINCsearch .bl_sakeINCsearch_input { flex: 1; border-color: transparent; background-color: transparent; } .bl_sakeINCsearch .bl_sakeINCsearch_input:focus { background-color: #fff; border-color: var(--form--bdc); } .bl_sakeINCsearch_list { max-height: 30vh; overflow-y: auto; padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); background-color: #fff; border: 1px solid var(--color-slate-100); border-radius: var(--radius-2xl); } .bl_sakeINCsearch_list section+section { padding-block-start: calc(var(--spacing) * 2); } .bl_article { position: relative; } .bl_article>*:not(header, footer) { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); } .bl_article_header>*:not(figure) { padding: 0 calc(var(--spacing) * 4); } .bl_article_ttl { margin: 0.25em 0 0.75em; font-size: var(--text-fluid-xl); font-weight: 600; } .bl_article_header .el_userName { font-size: var(--text-fluid-md); } .bl_article_footer { position: sticky; bottom: var(--ly--footer--h); z-index: 1; display: flex; align-items: center; gap: calc(var(--spacing) * 3); padding: calc(var(--spacing) * 4); background-color: #fff; border-top: 1px solid var(--color-slate-200); border-bottom: 1px solid var(--color-slate-200); } .bl_article_footer .bl_btnHeartUnit { margin-right: auto; } .bl_article_footer button { display: flex; gap: 0.25em; justify-content: center; align-items: center; padding: 0 0.5em; } .bl_logItem { background-color: #fff; padding: var(--spacing); border-radius: var(--radius-xl); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-slate-100); padding: calc(var(--spacing) * 4); --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .bl_logItem_header { display: flex; justify-content: space-between; align-items: center; } .bl_logItem_time { color: var(--color-slate-500); font-size: var(--text-xs); font-family: monospace; } .bl_logItem .el_label { text-decoration: none; font-style: normal; color: var(--color-slate-500); font-size: var(--text-xs); vertical-align: middle; } .bl_logItem_link { font-size: var(--text-xs); } .el_pubTime { font-size: var(--text-xs); color: var(--color-slate-400); } .bl_rankingDigest .bl_secHeader { margin-bottom: calc(var(--spacing) * 4); } .bl_rankingItem { display: flex; justify-content: space-between; align-items: center; } .bl_rankingItem_status { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; } .bl_rankingItem_status .el_label { font-size: var(--text-xs); color: var(--color-brandcolor-600); background-color: var(--color-brandcolor-100); border: 0 none; border-radius: 10rem; text-decoration: none; font-style: normal; } .bl_rankingItem_status * { white-space: nowrap; } a.bl_rankingItem:hover { background-color: #0001; } .un_topRanking { padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2); } .bl_tabContainer .bl_tabs { display: flex; gap: var(--spacing); overflow-y: auto; padding-block: calc(var(--spacing) * 4) 3px; } .bl_tabs .bl_tab { display: flex; justify-content: center; align-items: center; padding: 0.5em 1em; color: var(--color-slate-500); font-size: var(--text-fluid-sm); background-color: #fff; border-radius: var(--radius-lg); } .bl_tabs .bl_tab:hover, .bl_tabs .bl_tab.is_active { background-color: var(--color-cyan-100); } .un_topRanking .bl_tabBody { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4); background-color: #fff; border-radius: var(--radius-2xl); } .un_sommelierHero { padding: 3rem; background-color: #fff; } .un_sommelierHero.is_over { filter: grayscale(80%) contrast(50%); height: calc(100vh - 3rem); } .bl_report_hdr { display: grid; gap: calc(var(--spacing) * 2); grid-template-columns: auto 1fr; margin: calc(var(--spacing) * 4); background-color: #fff; padding: calc(var(--spacing) * 4); border: 1px solid var(--color-slate-200); border-radius: var(--radius-xl); } .bl_report_hdr figure { grid-column: 1 / 2; grid-row: 1 / 2; display: flex; justify-content: center; align-items: center; } .bl_report_hdr .el_ttl { grid-column: 2 / 3; grid-row: 1 / 2; align-self: center; font-size: var(--text-lg); } .bl_report_hdr .el_explain { grid-column: 1 / 3; } .bl_missionSpec { grid-column: 1 / 3; color: var(--color-slate-500); font-size: var(--text-fluid-xs); } .bl_missionSpec.bl_grid { --bl--grid--gap: 2px; --bl--grid--minimum: 9rem; } .bl_missionSpec div { display: flex; gap: 0.5em; padding-inline-end: 0.5em; background-color: var(--color-slate-100); } .bl_missionSpec div dt { display: inline-flex; align-items: center; color: #fff; font-size: 75%; line-height: 1; padding: 0.25em 0.5em; background-color: var(--color-slate-400); } .bl_report_hdr .el_explain { grid-column: 1 / 3; margin-top: var(--spacing); font-size: var(--text-fluid-sm); } .bl_report_body { background-color: #fff; padding: calc(var(--spacing) * 4); } .un_registerHero { display: flex; justify-content: center; align-items: center; min-height: 50vh; } .un_registerHero_logo { display: flex; justify-content: center; align-items: center; width: min(80%, 50vh, 16rem); min-height: 20vh; margin: 1rem auto; } .un_registerForm { background-color: #fff; border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); } .un_registerFooter address { font-style: normal; text-decoration: none; } .un_loginHero { display: flex; justify-content: center; align-items: center; min-height: 50vh; background-color: #fff; } .un_loginHero_logo { display: flex; justify-content: center; align-items: center; width: min(80%, 50vh, 16rem); min-height: 20vh; margin: 1rem auto; } .un_addSakeSpec { --bl--grid--minimum: 12.5rem; --bl--grid--gap: calc(var(--spacing) * 4) calc(var(--spacing) * 4); --bl--form-cell--p: 0; } .page_profile .bl_secHeader a { color: var(--color-brandcolor-700); } .un_profile { position: relative; border-radius: 0 0 2.5rem 2.5rem; overflow: hidden; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-slate-100); background-color: var(--color-white); padding-inline: calc(var(--spacing) * 4); --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .un_profile .bl_pBar { --value-bg: var(--color-brandcolor-700); } .un_profile .bl_pBar progress::-webkit-progress-value { border-radius: 1rem; } .un_favoGrid { --bl--grid--minimum: min(30vw, 10rem); --bl--grid--gap: 2px; } .un_favoGrid_item figure { position: relative; } .un_favoGrid_item figcaption { position: absolute; bottom: 0; left: 0; right: 0; max-width: 100%; background-color: var(--color-slate-950); color: var(--color-slate-50); font-size: var(--text-fluid-xs); font-weight: 500; letter-spacing: 0.15em; line-height: 1.25; padding: 0.25em 0.5em; transform: translateY(120%); transition: var(--global--transition); } .un_favoGrid_item:hover figcaption { transform: translateY(0); } .un_myBook { --bl--grid--minimum: min(21vw, 6rem); --bl--grid--gap: var(--spacing); } .un_myBook_list>* { aspect-ratio: 10 / 9; } .un_myBook_list.bl_grid>*:only-child { max-width: none; aspect-ratio: auto; } .un_myBook_list a { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; text-align: center; height: 100%; } .un_myBook_list a h4 { font-weight: 600; font-size: var(--text-fluid-sm); } .un_myBook_list a p { font-size: var(--text-fluid-md); } .un_myBook_list a.el_toAll { background-color: var(--color-governor-bay-50); } .un_myBook_list a>small { margin-top: 1em; font-size: var(--text-fluid-tiny); } .un_sakeSearch { position: relative; } .un_sakeSearchHdr { --ttl-fz: var(--text-2xl); padding-block-end: calc(var(--spacing) * 8); } .un_sakeSearchHdr_ttl { position: relative; margin-block-start: 0; padding-block: 2em 0.5em; font-size: var(--ttl-fz); font-weight: 600; line-height: 1.25; text-align: center; } .un_sakeSearchHdr_ttl_deco { position: absolute; top: 0; left: 0; right: 0; margin: auto; display: inline-flex; width: 1.5em; height: 1.5em; font-size: var(--ttl-fz); justify-content: center; align-items: center; color: #fff; background-color: var(--color-brandcolor-800); border-radius: 3em; } .un_sakeSearchHdr_ttl::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 3em; height: 4px; background-color: var(--color-brandcolor-800); } .un_sakeSearchSticky { position: sticky; top: var(--ly--header--h); z-index: 2; width: 100%; background-color: var(--global--bgc); } .un_sakeSearchSticky + * { position: relative; z-index: 1; } .un_sakeSearchSticky_cond { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4); padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4) calc(var(--spacing) * 4); font-size: var(--text-fluid-sm); } .un_sakeSearchSticky_cond .el_iconBtn { font-size: inherit; line-height: 1; } .un_sakeSearchSticky_cond .el_iconBtn span { vertical-align: bottom; } .un_sakeSearchSticky_body { position: absolute; top: calc(100% - 1px); left: 0; width: 100%; padding-block: calc(var(--spacing) * 8); background-color: var(--color-slate-200); max-height: calc(100vh - 160px - var(--ly--header--h) - var(--ly--footer--h) - 80px); overflow-y: auto; } .bl_kariSakeDicItem { --img--ratio: 17 / 20; aspect-ratio: var(--img--ratio); } .bl_sakeDIC { --bl--grid--gap: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 3); } .bl_sakeDIC_item { --img--ratio: 17 / 20; padding-block-end: calc(var(--spacing) * 2); } .bl_sakeDIC_item a { display: block; } .bl_sakeDIC_item a:hover { opacity: 0.8; } .bl_sakeDIC_item_hdr { position: relative; aspect-ratio: var(--img--ratio); overflow: hidden; border-radius: var(--radius-2xl); } .bl_sakeDIC_item_hdr .el_chips { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: start; align-items: end; background-color: #0009; border-radius: 0 0.5rem 0 0; padding-inline-end: 0.75rem; } .bl_sakeDIC_item_hdr :is(.el_heartChip, .el_reviewChip) { display: flex; gap: 0.25em; justify-content: center; align-items: center; padding: 0.25em 0.5em; font-size: var(--text-xs); line-height: 1; color: var(--color-slate-100); min-width: 2.5rem; } .bl_sakeDIC_item_img { aspect-ratio: var(--img--ratio); overflow: hidden; } .bl_sakeDIC_item_img img { aspect-ratio: var(--img--ratio); object-fit: cover; width: 100%; height: 100%; } .bl_sakeDIC_item_body { padding: calc(var(--spacing)*2) calc(var(--spacing)*3); height: 100%; } .bl_sakeDIC_item_body .el_ttl { margin-block-end: 0.25em; font-size: var(--text-fluid-base); font-weight: 600; } .bl_sakeDIC_item_body p { color: var(--color-slate-400); font-size: var(--text-xs); } .bl_sakeDIC_item_body p>* { display: inline-block; } .bl_sakeDIC_item_body p>*:nth-last-child(n+2) { margin-inline-end: 1em; } .bl_sakeDIC_item.is_PRsake { --img--ratio: 9 / 7; grid-column: span 2 / span 2; grid-row: span 2 / span 2; } .bl_pagenation_inner { display: flex; align-items: center; justify-content: center; gap: 1em 0.125em; } .bl_pagenation_inner>* { display: flex; align-items: center; justify-content: center; white-space: nowrap; } .bl_pagenation :is(.el_prev, .el_next) { color: var(--color-cyan-600); } .bl_pagenation .el_num { min-height: 2em; min-width: 2em; max-width: 2em; border-radius: 2em; font-weight: 600; } .bl_pagenation .el_num:not(.el_current) { text-decoration: none; background-color: #fff; } .bl_pagenation .el_num:not(.el_current):hover { color: #fff; background-color: var(--color-cyan-600); } .bl_pagenation .el_num.el_current { color: #fff; background-color: var(--color-brandcolor-600); margin: 1em calc(var(--global--spacing--unit) * 0.25); } .bl_pagenation .el_dots { margin-left: 0; margin-right: 0; } .home { --ly--header--h: 6rem; } .un_homeHeader .bl_headerNav { grid-template-columns: 56px 1fr 56px; /* Home maintains symmetrical grid for centering */ } .un_homeHeader .bl_headerNavC { justify-content: center; /* Center the logo on home page */ grid-column: 2 / 3; } .un_homeHeader .bl_headerNav_logo img { width: min(80%, 25rem); margin-inline: auto; } @media (max-width:40em) { .un_homeHeader.js_hideOnScroll { transform: translateY(0); transition: var(--global--transition); } .un_homeHeader.js_hideOnScroll.is_hide { transform: translateY(-110%); transition: 0.3s ease 0; } } .un_homeStatus { padding: calc(var(--spacing) * 3); background-color: var(--color-slate-50); border-radius: var(--radius-2xl); } .un_homeStatus .bl_pBar progress { --value-bg: linear-gradient(to right, #ba1200, #e63946); --bar-bgc: var(--color-red-100); } .bl_faq details { margin-block-start: 1rem; padding: ver(--spacing) 0; } .bl_faq summary { position: relative; list-style: none; padding-inline-start: 2.25em; padding-inline-end: 1rem; font-size: 105%; } .bl_faq summary::after { content: "＋"; position: absolute; top: 0.5rem; right: 0; font-size: 90%; line-height: 1; } .bl_faq [open] summary::after { content: "－"; } .bl_faq summary b { position: absolute; top: 0; left: 0; font-size: 105%; display: inline-flex; justify-content: center; align-items: center; width: 1.75em; height: 1.75em; border-radius: 2em; background-color: var(--color-brandcolor-100); } .bl_faq_body { position: relative; padding-block-start: ver(--spacing); padding-inline-start: 2rem; border-bottom: 1px dashed var(--color-slate-300); } .bl_faq_body>b { position: absolute; color: var(--color-red-700); left: 0.5em; } .bl_registorCTA { padding: calc(var(--spacing) * 6); text-align: center; background-color: var(--color-slate-100); border: 1px solid var(--color-slate-200); border-radius: var(--radius-2xl); } :where(.bl_wysiwyg) { font-size: var(--text-fluid-base); line-height: 1.75; } :where(.bl_wysiwyg) a:not([class*="btn"], [class*="Btn"]) { color: var(--color-cyan-600); text-decoration: underline; } :where(.bl_wysiwyg) :is(p, ul, ol) { margin-block: calc(var(--spacing) * 3); } :where(.bl_wysiwyg) h3 { margin-top: calc(var(--spacing) * 7); font-weight: 600; } :where(.bl_wysiwyg) h4 { font-weight: 500; } :where(.bl_wysiwyg) h2+h3 { margin-top: calc(var(--spacing) * 3); } :where(.bl_wysiwyg) ul { padding-inline-start: 1.5em; list-style-type: disc; } :where(.bl_wysiwyg) ol { padding-inline-start: 1.75em; list-style-type: decimal; } :where(.bl_wysiwyg) li { margin-block: var(--spacing); } :where(.bl_termDocs) :is(p, ul, ol) { margin-block: calc(var(--spacing) * 3); } :where(.bl_termDocs) h3 { margin-top: calc(var(--spacing) * 7); font-weight: 600; } :where(.bl_termDocs) h4 { font-weight: 500; } :where(.bl_termDocs) h2+h3 { margin-top: calc(var(--spacing) * 3); } :where(.bl_termDocs) ul { padding-inline-start: 1.5em; list-style-type: disc; } :where(.bl_termDocs) ol { padding-inline-start: 1.75em; list-style-type: decimal; } :where(.bl_termDocs) li { margin-block: var(--spacing); } :where(.el_txtLink, .el_txtLinkHU) { display: inline-block; color: var(--global--text-link-color); word-break: break-all; } :where(.el_txtLink), :where(.el_txtLinkHU):hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; } :where(.el_txtLink):hover { text-decoration: none; } pre.bl_coderNotice { padding: 4px 10px; font-size: 10px; color: var(--color-yellow-700); background-color: var(--color-yellow-50); border: 1px solid var(--color-yellow-500); } } button:disabled { cursor: default; } .bl_missionItem.is_disabled { filter: grayscale(100%) contrast(90%); } .bl_missionItem.is_exceeded { filter: grayscale(60%) contrast(90%); } .bl_missionItem.is_disabled * { color: var(--color-slate-400) !important; } .bl_missionItem.is_cleared .el_icon { color: #fff; background-color: var(--color-brandcolor-500); } .bl_missionItem .bl_pBar progress { --value-bg: var(--color-brandcolor-300) !important; } .bl_missionItem .bl_pBar .bl_pBar_txt { color: var(--color-brandcolor-400) !important; } .bl_missionItem.is_cleared::after { content: ""; position: absolute; top: 50%; left: 50%; width: min(80%, 15rem); aspect-ratio: 3 / 1; background: url("../images/deco_clear_stamp.png") no-repeat center / contain; transform: translate(-50%, -50%) rotate(-5deg) scale(2); opacity: 0; pointer-events: none; } .bl_missionItem.is_cleared.is_stamp::after { animation: stampPNG 0.6s cubic-bezier(.2, 1.4, .6, 1) forwards; } @keyframes stampPNG { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-5deg) scale(3); } 60% { opacity: 0.95; transform: translate(-50%, -50%) rotate(-5deg) scale(0.9); } 80% { transform: translate(-50%, -50%) rotate(-5deg) scale(1.05); } 100% { opacity: 0.95; transform: translate(-50%, -50%) rotate(-5deg) scale(1); } } .el_btn.bg-white:hover { background-color: var(--color-cyan-100); } .bl_sakeDIC_item_hdr :is(.el_heartChip, .el_reviewChip) .material-symbols-outlined { font-size: 100%; } .un_homeReviews { background-color: var(--color-slate-200); .bl_media_body .bl_toDetail, .el_iconBtn__edit, .el_iconBtn__share { display: none; } } .swiper.un_homeReviews_swiper { padding-block: calc(var(--spacing) * 3) calc(var(--spacing) * 8); } .un_homeReviews_swiper .swiper-wrapper { align-items: stretch; } .un_homeReviews_swiper .swiper-slide { width: 13rem; height: auto; } .un_homeReviews_swiper .bl_media { width: 100%; height: 100%; border-radius: var(--radius-2xl); } .un_homeReviews_swiper .swiper-slide .bl_userNameUnit { display: inline-grid; } .un_homeReviews_swiper .swiper-slide .el_userName { font-size: var(--text-fluid-md); } .un_homeReviews_swiper .swiper-slide .bl_media_body { position: relative; } .un_homeReviews_swiper .swiper-slide .bl_media_ttl { position: absolute; bottom: calc(100% - 0.5em); right: 0; padding: 0.25em 0.5em; font-size: var(--text-fluid-sm); line-height: 1; color: var(--color-slate-50); background-color: var(--color-slate-950); } .un_homeReviews_swiper .swiper-slide .bl_media_body_txt { margin-top: 0; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-rotate-x { syntax: "*"; inherits: false; } @property --tw-rotate-y { syntax: "*"; inherits: false; } @property --tw-rotate-z { syntax: "*"; inherits: false; } @property --tw-skew-x { syntax: "*"; inherits: false; } @property --tw-skew-y { syntax: "*"; inherits: false; } @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-divide-x-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-divide-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-gradient-position { syntax: "*"; inherits: false; } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false; } @property --tw-gradient-via-stops { syntax: "*"; inherits: false; } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false; } @property --tw-font-weight { syntax: "*"; inherits: false; } @property --tw-tracking { syntax: "*"; inherits: false; } @property --tw-ordinal { syntax: "*"; inherits: false; } @property --tw-slashed-zero { syntax: "*"; inherits: false; } @property --tw-numeric-figure { syntax: "*"; inherits: false; } @property --tw-numeric-spacing { syntax: "*"; inherits: false; } @property --tw-numeric-fraction { syntax: "*"; inherits: false; } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false; } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false; } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false; } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false; } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false; } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0px; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false; } @property --tw-brightness { syntax: "*"; inherits: false; } @property --tw-contrast { syntax: "*"; inherits: false; } @property --tw-grayscale { syntax: "*"; inherits: false; } @property --tw-hue-rotate { syntax: "*"; inherits: false; } @property --tw-invert { syntax: "*"; inherits: false; } @property --tw-opacity { syntax: "*"; inherits: false; } @property --tw-saturate { syntax: "*"; inherits: false; } @property --tw-sepia { syntax: "*"; inherits: false; } @property --tw-drop-shadow { syntax: "*"; inherits: false; } @property --tw-drop-shadow-color { syntax: "*"; inherits: false; } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false; } @property --tw-backdrop-blur { syntax: "*"; inherits: false; } @property --tw-backdrop-brightness { syntax: "*"; inherits: false; } @property --tw-backdrop-contrast { syntax: "*"; inherits: false; } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false; } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; } @property --tw-backdrop-invert { syntax: "*"; inherits: false; } @property --tw-backdrop-opacity { syntax: "*"; inherits: false; } @property --tw-backdrop-saturate { syntax: "*"; inherits: false; } @property --tw-backdrop-sepia { syntax: "*"; inherits: false; } @property --tw-duration { syntax: "*"; inherits: false; } @property --tw-ease { syntax: "*"; inherits: false; } @property --tw-content { syntax: "*"; initial-value: ""; inherits: false; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-scroll-snap-strictness: proximity; --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-divide-x-reverse: 0; --tw-border-style: solid; --tw-divide-y-reverse: 0; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; } } } /* ============================================ Shop Page Styles ============================================ */ @layer components { .ag-shop-page { padding: 1rem; padding-bottom: 2rem; } .ag-shop-section { margin-bottom: 2rem; } .ag-shop-section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; } .ag-shop-section-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--sq-text); } .ag-shop-see-all { font-size: 0.875rem; font-weight: 700; color: var(--color-brandcolor-500, #b20411); background: none; border: none; cursor: pointer; } /* Vertical grid cards (replaced horizontal scroll) */ .ag-shop-grid { display: flex; flex-direction: column; gap: 1rem; } .ag-shop-card-wrap { background: #fff; border-radius: 1rem; box-shadow: 0 10px 30px rgba(91, 64, 61, 0.08); overflow: hidden; } .ag-shop-card-link { display: block; text-decoration: none; color: inherit; } .ag-shop-card-img { height: 12rem; width: 100%; position: relative; background-color: #eee; } .ag-shop-card-img img { width: 100%; height: 100%; object-fit: cover; } .ag-shop-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--sq-bg); } .ag-shop-card-img-placeholder .material-symbols-outlined { font-size: 3rem; color: #ccc; } .ag-shop-badge { position: absolute; top: 0.75rem; left: 0.75rem; background-color: #ffdfa0; color: #261a00; font-size: 10px; font-weight: 900; padding: 0.25rem 0.5rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; } .shop-card-badge--premium { background-color: #ffdfa0; } .shop-card-badge--new { background-color: #4ade80; color: #fff; } .ag-shop-card-body { padding: 1rem 1rem 0.5rem; } .ag-shop-card-name { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.125rem; } .ag-shop-card-brewery { font-size: 0.75rem; color: var(--sq-text-sub); font-weight: 500; margin-bottom: 0.25rem; } .ag-shop-card-desc { font-size: 0.875rem; color: var(--sq-text-sub); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ag-shop-card-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem 1rem; } .ag-shop-card-price { font-size: 1.125rem; font-weight: 900; color: var(--color-brandcolor-500, #b20411); } .ag-shop-cart-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--color-brandcolor-500, #b20411); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(178, 4, 17, 0.3); transition: transform 0.15s; } .ag-shop-cart-btn:active { transform: scale(0.9); } .ag-shop-cart-btn .material-symbols-outlined { font-size: 18px; } .ag-shop-cart-btn-sm { width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--color-brandcolor-500, #b20411); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s; } .ag-shop-cart-btn-sm:active { transform: scale(0.9); } .ag-shop-cart-btn-sm .material-symbols-outlined { font-size: 14px; } /* Empty state */ .ag-shop-empty { text-align: center; padding: 3rem 1rem; color: #999; } .ag-shop-empty .material-symbols-outlined { font-size: 3rem; margin-bottom: 0.5rem; } /* Cart floating FAB */ .ag-shop-cart-floating { position: fixed; bottom: 6rem; right: 1rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-brandcolor-500, #b20411); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(178, 4, 17, 0.4); z-index: 100; transition: transform 0.15s; text-decoration: none; } .ag-shop-cart-floating:active { transform: scale(0.9); } .ag-shop-cart-floating-badge { position: absolute; top: -2px; right: -2px; min-width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: #ff4757; color: #fff; font-size: 0.6875rem; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* Flash messages */ .ag-shop-flash { padding: 0.75rem 1rem; border-radius: 0.75rem; margin-bottom: 1rem; font-size: 0.875rem; font-weight: 600; } .ag-shop-flash--success { background: rgba(74, 222, 128, 0.15); color: #166534; border: 1px solid rgba(74, 222, 128, 0.3); } .ag-shop-flash--error { background: rgba(248, 113, 113, 0.15); color: #991b1b; border: 1px solid rgba(248, 113, 113, 0.3); } /* Subscription CTA */ .ag-shop-sub-cta { position: relative; overflow: hidden; border-radius: 1rem; background: linear-gradient(135deg, #d62927, var(--sq-brand)); padding: 1.5rem; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(178, 4, 17, 0.2); } .ag-shop-sub-cta-inner { position: relative; z-index: 1; } .ag-shop-sub-cta-label { display: flex; align-items: center; gap: 0.5rem; color: #fff2f0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; } .ag-shop-sub-cta-title { font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1.3; margin-bottom: 0.5rem; } .ag-shop-sub-cta-desc { font-size: 0.875rem; color: #fff2f0; line-height: 1.6; opacity: 0.9; margin-bottom: 1.5rem; } .ag-shop-sub-cta-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 1rem; background: #fff; color: var(--color-brandcolor-500, #b20411); font-weight: 700; border-radius: 9999px; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.15s; text-decoration: none; } .ag-shop-sub-cta-btn:active { transform: scale(0.95); } .ag-shop-sub-cta-glow { position: absolute; right: -2.5rem; bottom: -2.5rem; width: 12rem; height: 12rem; background: rgba(255,255,255,0.1); border-radius: 50%; filter: blur(48px); } /* Goods grid */ .ag-shop-goods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .ag-shop-goods-card { background: var(--sq-bg); border-radius: 1rem; overflow: hidden; } .ag-shop-goods-link { display: block; text-decoration: none; color: inherit; } .ag-shop-goods-img { aspect-ratio: 1; overflow: hidden; background: #fff; } .ag-shop-goods-img img { width: 100%; height: 100%; object-fit: cover; } .ag-shop-goods-body { padding: 0.75rem; } .ag-shop-goods-name { font-size: 0.875rem; font-weight: 700; line-height: 1.3; } .ag-shop-goods-desc { font-size: 0.75rem; color: var(--sq-text-sub); margin: 0.25rem 0 0; } .ag-shop-goods-footer { display: flex; justify-content: space-between; align-items: center; padding: 0 0.75rem 0.75rem; } .ag-shop-goods-price { font-weight: 900; color: var(--color-brandcolor-500, #b20411); } /* Seasonal highlight */ .ag-shop-seasonal { display: flex; align-items: center; gap: 1rem; background: rgba(182, 158, 63, 0.1); border-radius: 1rem; padding: 1.25rem; margin-top: 2rem; } .ag-shop-seasonal-text { flex: 1; } .ag-shop-seasonal-badge { display: inline-block; padding: 0.125rem 0.5rem; background: #b69e3f; color: #fff; font-size: 10px; font-weight: 700; border-radius: 0.25rem; margin-bottom: 0.5rem; } .ag-shop-seasonal-title { font-size: 1.125rem; font-weight: 700; color: #5c4300; } .ag-shop-seasonal-desc { font-size: 0.875rem; color: rgba(92, 67, 0, 0.8); margin-top: 0.25rem; } .ag-shop-seasonal-icon { width: 4rem; height: 4rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.05); flex-shrink: 0; } .ag-shop-seasonal-icon .material-symbols-outlined { font-size: 2rem; color: #b69e3f; } /* =================================================== Shop Detail Page =================================================== */ .ag-shop-detail { padding-bottom: 2rem; } /* Hero */ .ag-detail-hero { position: relative; width: 100%; height: 20rem; background: var(--sq-bg); overflow: hidden; } .ag-detail-hero-img { width: 100%; height: 100%; object-fit: cover; } .ag-detail-hero-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--sq-bg); } .ag-detail-hero-placeholder .material-symbols-outlined { font-size: 5rem; color: #ccc; } .ag-detail-badge { top: 1rem; left: 1rem; } /* Header */ .ag-detail-header { padding: 1.25rem 1rem 0; } .ag-detail-type-tag { display: inline-block; background: rgba(178, 4, 17, 0.08); color: var(--color-brandcolor-500, #b20411); font-size: 0.6875rem; font-weight: 800; padding: 0.25rem 0.75rem; border-radius: 9999px; margin-bottom: 0.5rem; letter-spacing: 0.05em; } .ag-detail-name { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.025em; line-height: 1.3; margin-bottom: 0.5rem; color: var(--sq-text); } .ag-detail-price { font-size: 1.375rem; font-weight: 900; color: var(--color-brandcolor-500, #b20411); margin-bottom: 0.75rem; } .ag-detail-price-tax { font-size: 0.75rem; font-weight: 500; color: var(--sq-text-sub); } .ag-detail-brewery-line { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--sq-text-sub); font-weight: 500; } .ag-detail-brewery-line .material-symbols-outlined { font-size: 1rem; color: #999; } .ag-detail-region { color: #999; } /* Intro description */ .ag-detail-intro { padding: 1rem; border-top: 1px solid #f1f1ec; margin-top: 1rem; } .ag-detail-intro p { font-size: 0.9375rem; line-height: 1.7; color: #333; } /* Story */ .ag-detail-story { padding: 1.5rem 1rem; margin: 0; } .ag-detail-story-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .ag-detail-story-icon { font-size: 1.25rem; } .ag-detail-story-header h2 { font-size: 1.125rem; font-weight: 800; color: var(--sq-text); } .ag-detail-story-body { font-size: 0.9375rem; line-height: 1.8; color: #333; background: #faf9f5; border-radius: 1rem; padding: 1.25rem; border-left: 4px solid var(--color-brandcolor-500, #b20411); } /* Set Items (#414) */ .ag-detail-set-items { padding: 0.5rem 1rem 1.5rem; } .ag-detail-set-items-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .ag-detail-set-items-icon { font-size: 1.5rem; } .ag-detail-set-items-header h2 { font-size: 1.125rem; font-weight: 800; color: var(--color-slate-800); margin: 0; } .ag-detail-set-item-card { display: flex; gap: 1rem; padding: 1rem; margin-bottom: 0.75rem; background-color: #fff; border-radius: var(--radius-xl, 1rem); box-shadow: 0 4px 16px rgba(91, 64, 61, 0.06); transition: transform 0.15s ease; } .ag-detail-set-item-card:last-child { margin-bottom: 0; } .ag-detail-set-item-img { flex-shrink: 0; width: 5rem; height: 5rem; border-radius: var(--radius-lg, 0.75rem); overflow: hidden; background: var(--color-slate-100); } .ag-detail-set-item-img img { width: 100%; height: 100%; object-fit: cover; } .ag-detail-set-item-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-slate-100), var(--color-slate-50)); } .ag-detail-set-item-placeholder .material-symbols-outlined { font-size: 2rem; color: var(--color-slate-300); } .ag-detail-set-item-body { flex: 1; min-width: 0; } .ag-detail-set-item-name { font-size: 0.9375rem; font-weight: 800; color: var(--color-slate-800); margin: 0 0 0.25rem; line-height: 1.3; } .ag-detail-set-item-brewery { display: flex; align-items: center; gap: 0.25rem; font-size: var(--text-xs); color: var(--color-slate-400); margin: 0 0 0.375rem; } .ag-detail-set-item-brewery .material-symbols-outlined { font-size: 0.875rem; } .ag-detail-set-item-region { color: var(--color-slate-300); } .ag-detail-set-item-desc { font-size: var(--text-sm); color: var(--color-slate-500); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Specs */ .ag-detail-specs { padding: 1rem; } .ag-detail-specs-title { font-size: 1rem; font-weight: 800; margin-bottom: 0.75rem; color: var(--sq-text); } .ag-detail-specs-table { width: 100%; border-collapse: collapse; } .ag-detail-specs-table th, .ag-detail-specs-table td { padding: 0.625rem 0; font-size: 0.875rem; border-bottom: 1px solid #f1f1ec; } .ag-detail-specs-table th { text-align: left; font-weight: 700; color: var(--sq-text-sub); width: 5rem; } .ag-detail-specs-table td { color: var(--sq-text); } /* CTA */ .ag-detail-cta { padding: 1.5rem 1rem; background: #fff; border-top: 1px solid #f1f1ec; position: sticky; bottom: 4rem; z-index: 50; } .ag-detail-cta form { display: flex; align-items: center; gap: 1rem; } .ag-detail-cta-price { flex-shrink: 0; } .ag-detail-cta-price-value { font-size: 1.25rem; font-weight: 900; color: var(--color-brandcolor-500, #b20411); display: block; line-height: 1; } .ag-detail-cta-price-tax { font-size: 0.6875rem; color: #999; } .ag-detail-cta-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem; background: linear-gradient(135deg, #d62927, var(--sq-brand)); color: #fff; font-size: 1rem; font-weight: 700; border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 20px rgba(178, 4, 17, 0.3); transition: transform 0.15s; } .ag-detail-cta-btn:active { transform: scale(0.96); } .ag-detail-cta-btn .material-symbols-outlined { font-size: 1.25rem; } /* Related products */ .ag-detail-related { padding: 1.5rem 1rem; } .ag-detail-related-title { font-size: 1.125rem; font-weight: 800; margin-bottom: 1rem; color: var(--sq-text); } .ag-detail-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .ag-detail-related-card { background: #fff; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); text-decoration: none; color: inherit; transition: transform 0.15s; } .ag-detail-related-card:active { transform: scale(0.97); } .ag-detail-related-img { aspect-ratio: 4/3; background: var(--sq-bg); overflow: hidden; } .ag-detail-related-img img { width: 100%; height: 100%; object-fit: cover; } .ag-detail-related-body { padding: 0.625rem; } .ag-detail-related-name { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ag-detail-related-price { font-size: 0.875rem; font-weight: 900; color: var(--color-brandcolor-500, #b20411); } /* Back link */ .ag-detail-back { padding: 1rem; text-align: center; } .ag-detail-back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--color-brandcolor-500, #b20411); text-decoration: none; } .ag-detail-back-link .material-symbols-outlined { font-size: 1rem; } } /* =================================================== Settings Page — un_settings =================================================== */ .un_settings { padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4) calc(var(--spacing) * 24); max-width: 40rem; margin: 0 auto; } /* Page Title */ .un_settings_header { padding: 0 calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 8); } .un_settings_header_ttl { font-size: clamp(1.75rem, 5vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: calc(var(--spacing) * 2); } .un_settings_header_sub { font-size: var(--text-sm); font-weight: 500; color: var(--color-slate-500); } /* Section */ .un_settings_section { margin-bottom: calc(var(--spacing) * 8); } .un_settings_sectionTitle { padding: 0 calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 3); font-size: var(--text-xs); font-weight: 700; color: var(--color-slate-400); letter-spacing: 0.2em; text-transform: uppercase; } /* Card */ .un_settings_card { background-color: #fff; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 10px 30px rgba(91, 64, 61, 0.05); } /* Divider */ .un_settings_divider { height: 1px; margin: 0 calc(var(--spacing) * 5); background-color: var(--color-slate-100); } /* Item (base) */ .un_settings_item { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--spacing) * 5); text-decoration: none; color: inherit; transition: background-color 0.15s ease; } a.un_settings_item:hover, .un_settings_item:hover { background-color: var(--color-slate-50); } /* Item: icon wrap */ .un_settings_item_iconWrap { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xl); background-color: var(--color-slate-100); color: var(--color-brandcolor-600); flex-shrink: 0; margin-right: calc(var(--spacing) * 4); } .un_settings_item_iconWrap .material-symbols-outlined { font-size: 1.25rem; } /* Item: label */ .un_settings_item_label { flex: 1; font-size: 0.9375rem; font-weight: 700; } .un_settings_item_label__noIcon { padding-left: calc(2.5rem + var(--spacing) * 4); } /* Item: arrow */ .un_settings_item_arrow { flex-shrink: 0; font-size: 1.25rem; color: var(--color-slate-300); transition: transform 0.15s ease; } a.un_settings_item:hover .un_settings_item_arrow { transform: translateX(4px); color: var(--color-slate-500); } /* Item: detail variant (title + description) */ .un_settings_item__detail { gap: calc(var(--spacing) * 3); } .un_settings_item_textGroup { flex: 1; display: flex; flex-direction: column; } .un_settings_item_desc { font-size: var(--text-xs); color: var(--color-slate-400); margin-top: 2px; } /* Item: toggle variant */ .un_settings_item__toggle { cursor: default; } .un_settings_item__toggle:hover { background-color: transparent; } /* Toggle switch */ .un_settings_toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; } .un_settings_toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; } .un_settings_toggle_slider { display: block; width: 2.75rem; height: 1.5rem; background-color: var(--color-slate-200); border-radius: 1rem; position: relative; transition: background-color 0.25s ease; } .un_settings_toggle_slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1.25rem; height: 1.25rem; background-color: #fff; border-radius: 50%; transition: transform 0.25s ease; } .un_settings_toggle input:checked + .un_settings_toggle_slider { background-color: var(--color-brandcolor-600); } .un_settings_toggle input:checked + .un_settings_toggle_slider::after { transform: translateX(1.25rem); } .un_settings_toggle input:disabled { cursor: not-allowed; } .un_settings_toggle:has(input:disabled) { opacity: 0.5; cursor: not-allowed; } /* Subscription info (inline) */ .un_settings_item__sub { align-items: flex-start; } .un_settings_item__sub .un_settings_item_content { flex: 1; } .un_settings_subInfo { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 2); } .un_settings_subInfo_status { display: flex; flex-direction: column; gap: 2px; } .un_settings_subInfo_badge { font-size: var(--text-xs); font-weight: 500; color: var(--color-amber-600, #d97706); } .un_settings_subInfo_plan { font-size: var(--text-sm); font-weight: 700; } .un_settings_subInfo_price { font-size: var(--text-xs); color: var(--color-slate-500); } .un_settings_subInfo_btn { font-size: var(--text-xs); font-weight: 700; color: var(--color-amber-600, #d97706); background-color: #fff; border: 1px solid var(--color-amber-300, #fcd34d); border-radius: var(--radius-lg); padding: 0.375rem 0.75rem; cursor: pointer; transition: background-color 0.15s ease; white-space: nowrap; } .un_settings_subInfo_btn:hover { background-color: var(--color-amber-50, #fffbeb); } .un_settings_subInfo_warn { font-size: var(--text-xs); color: var(--color-rose-500, #f43f5e); margin-top: calc(var(--spacing) * 2); } /* Logout */ .un_settings_item__logout { display: flex; justify-content: center; } .un_settings_item__logout:hover { background-color: var(--color-slate-50); } .un_settings_dangerZone { display: flex; justify-content: center; padding: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 8); } background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; transition: color 0.15s ease; } .un_settings_deleteBtn:hover { color: var(--color-brandcolor-600); } /* =================================================== Order History Page — un_orderHistory (#416) =================================================== */ .un_orderHistory_list { display: flex; flex-direction: column; gap: calc(var(--spacing) * 4); padding: 0 calc(var(--spacing) * 2); } /* Order Card */ .un_orderHistory_card { background-color: #fff; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 10px 30px rgba(91, 64, 61, 0.05); } /* Card Header */ .un_orderHistory_card_header { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5); border-bottom: 1px solid var(--color-slate-100); } .un_orderHistory_card_date { display: flex; align-items: center; gap: calc(var(--spacing) * 2); font-size: var(--text-sm); font-weight: 600; color: var(--color-slate-500); } .un_orderHistory_card_date .material-symbols-outlined { font-size: 1rem; color: var(--color-slate-400); } /* Status Badge */ .un_orderHistory_status { font-size: var(--text-xs); font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 9999px; letter-spacing: 0.05em; } .un_orderHistory_status--completed { background-color: rgba(16, 185, 129, 0.1); color: #059669; } .un_orderHistory_status--refunded { background-color: rgba(244, 63, 94, 0.1); color: #e11d48; } /* Items */ .un_orderHistory_items { padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5); } .un_orderHistory_item { display: flex; align-items: center; padding: calc(var(--spacing) * 2) 0; font-size: 0.9375rem; } .un_orderHistory_item + .un_orderHistory_item { border-top: 1px solid var(--color-slate-50); } .un_orderHistory_item_name { flex: 1; font-weight: 600; color: var(--color-slate-700); line-height: 1.4; } .un_orderHistory_item_qty { flex-shrink: 0; font-size: var(--text-sm); color: var(--color-slate-400); margin: 0 calc(var(--spacing) * 3); white-space: nowrap; } .un_orderHistory_item_price { flex-shrink: 0; font-weight: 700; color: var(--color-slate-600); white-space: nowrap; } /* Total */ .un_orderHistory_total { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5); border-top: 1px solid var(--color-slate-100); background-color: var(--color-slate-50); } .un_orderHistory_total span:first-child { font-size: var(--text-sm); font-weight: 600; color: var(--color-slate-500); } .un_orderHistory_total_price { font-size: 1.125rem; font-weight: 900; color: var(--color-brandcolor-500, #b20411); } /* Pagination */ .un_orderHistory_pagination { padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4); display: flex; justify-content: center; } .un_orderHistory_pagination nav { display: flex; gap: calc(var(--spacing) * 1); } .un_orderHistory_pagination .page-link { display: flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 calc(var(--spacing) * 2); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 600; color: var(--color-slate-500); background: #fff; border: 1px solid var(--color-slate-200); text-decoration: none; transition: all 0.15s ease; } .un_orderHistory_pagination .page-link:hover { background: var(--color-slate-50); border-color: var(--color-slate-300); } .un_orderHistory_pagination .page-item.active .page-link { background: var(--color-brandcolor-500, #b20411); color: #fff; border-color: var(--color-brandcolor-500, #b20411); } .un_orderHistory_pagination .page-item.disabled .page-link { opacity: 0.4; cursor: not-allowed; } /* Empty State */ .un_orderHistory_empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--spacing) * 16) calc(var(--spacing) * 4); text-align: center; } .un_orderHistory_empty_icon { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--color-slate-100); margin-bottom: calc(var(--spacing) * 6); } .un_orderHistory_empty_icon .material-symbols-outlined { font-size: 2.5rem; color: var(--color-slate-300); } .un_orderHistory_empty_title { font-size: 1.125rem; font-weight: 800; color: var(--color-slate-700); margin-bottom: calc(var(--spacing) * 2); } .un_orderHistory_empty_desc { font-size: var(--text-sm); color: var(--color-slate-400); margin-bottom: calc(var(--spacing) * 8); line-height: 1.6; } .un_orderHistory_empty_cta { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 2); padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #d62927, var(--color-brandcolor-500, #b20411)); color: #fff; font-size: 0.9375rem; font-weight: 700; border-radius: 9999px; text-decoration: none; box-shadow: 0 4px 20px rgba(178, 4, 17, 0.25); transition: transform 0.15s ease; } .un_orderHistory_empty_cta:active { transform: scale(0.96); } .un_orderHistory_empty_cta .material-symbols-outlined { font-size: 1.125rem; } /* ========================================================================== Map Renewal UI — Mockup v7 完全再現 (#254) ========================================================================== */ /* ━━━ CSS Variables (Map Page) ━━━ */ :root { --bg: var(--sq-bg); --card: #ffffff; --field: #fafaf5; --t1: var(--sq-text); --t2: var(--sq-text-sub); --tm: rgba(91,64,61,0.48); --red: var(--sq-brand); --red-lt: rgba(178,4,17,0.08); --red-sh: rgba(178,4,17,0.2); --gold: #f8bd2a; --gold-d: #d97706; --gold-lt: #ffdfa0; --indigo: #4f46e5; --green: #059669; --pink: #EC4899; --bd-soft: rgba(228,190,186,0.2); --bd-med: rgba(228,190,186,0.45); --sh-fl: 0 4px 20px rgba(91,64,61,0.12); --r-card: 1.5rem; --r-pill: 9999px; } /* ━━━ map-page body overrides ━━━ */ body.map-page { overflow: hidden; } body.map-page .ly_main { padding: 0; margin: 0; max-width: none; } body.map-page .ly_footer { z-index: 600; } /* ━━━ 全画面マップ ━━━ */ body.map-page #map { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; } .leaflet-control-zoom,.leaflet-control-attribution { display: none !important; } .map-spinner-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; z-index: 1000; align-items: center; justify-content: center; transition: opacity 0.3s ease-out; } .map-spinner-ring { width: 48px; height: 48px; border: 4px solid rgba(178, 4, 17, 0.1); border-top-color: var(--red); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ━━━ HUD ━━━ */ .hud { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 500; } .hud > * { pointer-events: auto; } /* ━━━ トップバー ━━━ */ .top-bar { position: absolute; top: 0; left: 0; right: 0; padding: .625rem .75rem; display: flex; align-items: center; gap: .375rem; background: linear-gradient(to bottom, rgba(244,244,239,.96) 0%, rgba(244,244,239,.5) 75%, transparent 100%); pointer-events: none; } .top-bar > * { pointer-events: auto; } .hud-btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--card); border: 1px solid var(--bd-soft); box-shadow: 0 2px 8px rgba(91,64,61,.1); color: var(--t2); cursor: pointer; transition: all .15s; flex-shrink: 0; font-size: .9375rem; } .hud-btn:active { transform: scale(.92); } .hud-btn.active { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 2px 10px var(--red-sh); } .hud-btn .ms { font-size: 1.25rem; } .top-spacer { flex: 1; } #kanpaiCounter { background: var(--card); border: 1px solid var(--bd-soft); border-radius: var(--r-pill); padding: .2rem .5rem; box-shadow: 0 2px 8px rgba(91,64,61,.08); font-size: .5rem; font-weight: 700; color: var(--red); display: flex; align-items: center; gap: .2rem; white-space: nowrap; } /* ━━━ ゲストバナー ━━━ */ #guestBanner { position: absolute; top: 3.5rem; left: .75rem; right: .75rem; background: rgba(79,70,229,.06); border: 1px solid rgba(79,70,229,.2); border-radius: 1rem; padding: .5rem .75rem; display: flex; align-items: center; gap: .5rem; font-size: .5rem; color: var(--indigo); font-weight: 700; box-shadow: 0 2px 8px rgba(79,70,229,.08); opacity: 0; pointer-events: none; transition: opacity .3s; } #guestBanner.is-visible { opacity: 1; pointer-events: auto; } #guestBanner .gb-ico { font-size: 1rem; } #guestBanner .gb-txt { flex: 1; line-height: 1.4; } .gb-cta { padding: .2rem .5rem; border-radius: var(--r-pill); background: var(--indigo); color: #fff; font-size: .4375rem; font-weight: 700; border: none; cursor: pointer; font-family: inherit; text-decoration: none; } /* ━━━ 凡例 ━━━ */ .legend-row { position: absolute; left: .75rem; display: flex; gap: .375rem; pointer-events: none; transition: top .35s; } .legend-chip { display: flex; align-items: center; gap: .25rem; padding: .2rem .5rem; background: var(--card); border: 1px solid var(--bd-soft); border-radius: var(--r-pill); box-shadow: 0 2px 6px rgba(91,64,61,.08); font-size: .5rem; font-weight: 700; color: var(--t2); white-space: nowrap; } .ldot { width: 8px; height: 8px; border-radius: 50%; } .ldot.u { background: #b0a89a; } .ldot.n { background: var(--red); } .ldot.c { background: var(--gold-d); } /* ━━━ ステータスバッジ ━━━ */ .badge-row { position: absolute; right: .75rem; display: flex; gap: .375rem; pointer-events: none; transition: top .35s; } .stat-badge { background: var(--card); border: 1px solid var(--bd-soft); box-shadow: var(--sh-fl); border-radius: 1rem; padding: .375rem .5rem; text-align: center; cursor: pointer; transition: all .15s; pointer-events: auto; } .stat-badge:active { transform: scale(.95); } .sbn { font-family: 'Spline Sans', sans-serif; font-weight: 700; line-height: 1; } .sbn.big { font-size: 1.25rem; color: var(--red); } .sbn.big span { font-size: .5rem; font-weight: 400; color: var(--tm); } .sbn.med { font-size: .9375rem; color: var(--gold-d); } .sbl { font-size: .4rem; font-weight: 700; color: var(--tm); margin-top: .0625rem; } /* ━━━ GPS近接バナー ━━━ */ .checkin-banner { position: absolute; top: 0; left: 0; right: 0; padding: 0 .75rem; transform: translateY(-100%); transition: transform .45s cubic-bezier(.32,.72,0,1); z-index: 600; } .checkin-banner.is-visible { transform: translateY(0); } .cb-inner { margin-top: .5rem; background: var(--card); border: 1.5px solid rgba(217,119,6,.35); border-radius: 1.25rem; box-shadow: 0 6px 24px rgba(217,119,6,.15); padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem; cursor: pointer; transition: transform .15s; } .cb-inner:active { transform: scale(.98); } .cb-icon { width: 2.75rem; height: 2.75rem; border-radius: .875rem; background: linear-gradient(135deg, var(--gold-lt), var(--gold)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(217,119,6,.25); position: relative; } .cb-icon::after { content: ''; position: absolute; inset: -6px; border-radius: 1.25rem; border: 2px solid rgba(217,119,6,.3); animation: cbRing 1.5s ease-out infinite; } @keyframes cbRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } } .cb-body { flex: 1; min-width: 0; } .cb-label { font-size: .5rem; font-weight: 700; color: var(--gold-d); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .125rem; } .cb-name { font-size: 1rem; line-height: 1.2; color: var(--t1); font-weight: 700; } .cb-dist { font-size: .5rem; color: var(--tm); margin-top: .125rem; } .cb-btn { padding: .5rem .75rem; background: linear-gradient(135deg, var(--gold-lt), var(--gold)); border: none; border-radius: .875rem; font-size: .625rem; font-weight: 900; color: var(--gold-d); cursor: pointer; font-family: inherit; flex-shrink: 0; } .cb-close { position: absolute; top: .625rem; right: .625rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: rgba(0,0,0,.06); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--tm); font-size: .75rem; } /* ━━━ レイヤーパネル ━━━ */ .lp-backdrop { position: fixed; inset: 0; z-index: 800; background: rgba(0,0,0,.2); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .lp-backdrop.is-open { opacity: 1; visibility: visible; } .layer-panel { position: fixed; top: 0; right: -280px; bottom: 0; z-index: 810; width: 264px; max-width: 75vw; background: var(--card); box-shadow: -4px 0 24px rgba(0,0,0,.12); transition: right .35s cubic-bezier(.32,.72,0,1); overflow-y: auto; } .layer-panel.is-open { right: 0; } .lp-head { position: sticky; top: 0; background: var(--card); padding: 1rem 1rem .625rem; border-bottom: 1px solid var(--bd-soft); display: flex; align-items: center; justify-content: space-between; z-index: 1; } .lp-title { font-size: .875rem; font-weight: 900; color: var(--t1); display: flex; align-items: center; gap: .375rem; } .lp-close { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: none; background: var(--field); cursor: pointer; color: var(--tm); display: flex; align-items: center; justify-content: center; } .lp-sec { padding: .625rem 1rem .25rem; } .lp-sec-title { font-size: .5rem; font-weight: 700; color: var(--tm); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .375rem; } .layer-item { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; border-bottom: 1px solid var(--bd-soft); cursor: pointer; } .layer-item:last-child { border-bottom: none; } .li-icon { width: 2rem; height: 2rem; border-radius: .625rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .li-icon.k { background: rgba(178,4,17,.08); } .li-icon.b { background: rgba(178,4,17,.08); } .li-icon.f { background: rgba(236,72,153,.1); } .li-icon.c { background: rgba(245,158,11,.1); } .li-icon.h { background: rgba(239,68,68,.08); } .li-info { flex: 1; min-width: 0; } .li-name { font-size: .75rem; font-weight: 700; color: var(--t1); line-height: 1.3; } .li-desc { font-size: .5rem; color: var(--tm); line-height: 1.3; } .toggle { position: relative; width: 2.5rem; height: 1.375rem; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-track { position: absolute; inset: 0; background: rgba(200,195,185,.4); border-radius: var(--r-pill); transition: background .2s; cursor: pointer; } .toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1.125rem; height: 1.125rem; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .2s; } .toggle input:checked + .toggle-track { background: var(--red); } .toggle input:checked + .toggle-track::after { transform: translateX(1.125rem); } .lp-reg-btn { width: 100%; padding: .625rem; border: 1.5px solid var(--red); border-radius: 1rem; background: var(--red-lt); color: var(--red); font-size: .6875rem; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .375rem; } /* ━━━ FAB ━━━ */ .fab-group { position: absolute; right: .75rem; display: flex; flex-direction: column; gap: .5rem; transition: bottom .35s; } .fab-btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--card); border: 1px solid var(--bd-soft); box-shadow: var(--sh-fl); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; } .fab-btn:active { transform: scale(.92); } .fab-btn .ms { font-size: 1.25rem; color: var(--t2); } /* ━━━ カードエリア ━━━ */ .card-area { position: absolute; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom, 0); transition: bottom .35s cubic-bezier(.32,.72,0,1), opacity .3s, transform .35s; } .card-area.is-hidden { opacity: 0; pointer-events: none; transform: translateY(80px); } /* カードトグルボタン */ #cardToggleFloatBtn { position: fixed; bottom: 3.25rem; right: .625rem; z-index: 601; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--card); border: 1px solid var(--bd-soft); box-shadow: 0 2px 10px rgba(91,64,61,.14); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; color: var(--t2); } #cardToggleFloatBtn:active { transform: scale(.9); } #cardToggleFloatBtn .ms { font-size: 1.25rem; } /* ━━━ カードカルーセル ━━━ */ .card-track { display: flex; gap: .625rem; padding: .25rem .75rem 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .card-track::-webkit-scrollbar { display: none; } .info-card { flex-shrink: 0; width: 14.5rem; background: var(--card); border: 1px solid var(--bd-soft); border-radius: var(--r-card); padding: .625rem .75rem; cursor: pointer; box-shadow: var(--sh-fl); scroll-snap-align: start; transition: transform .2s, opacity .2s; position: relative; user-select: none; overflow: hidden; } .info-card.c-r { border-left: 3px solid var(--red); } .info-card.c-g { border-left: 3px solid var(--gold); } .info-card.c-p { border-left: 3px solid var(--pink); } .info-card.c-b { border-left: 3px solid var(--indigo); } .info-card.c-gr { border-left: 3px solid var(--green); } .ic-head { display: flex; align-items: center; gap: .375rem; margin-bottom: .3rem; } .ic-em { font-size: 1rem; } .ic-tit { font-size: .6875rem; font-weight: 700; color: var(--t2); } .ic-badge { margin-left: auto; font-size: .4375rem; font-weight: 700; padding: .125rem .375rem; border-radius: var(--r-pill); } .ic-badge.r { color: var(--red); background: var(--red-lt); } .ic-badge.g { color: #7c5a00; background: rgba(248,189,42,.12); } .ic-badge.p { color: var(--pink); background: rgba(236,72,153,.08); } .ic-badge.gr { color: var(--green); background: rgba(5,150,105,.08); } .ic-main { font-size: .8125rem; font-weight: 700; color: var(--t1); line-height: 1.4; } .ic-sub { font-size: .5625rem; color: var(--tm); margin-top: .2rem; } .ic-bar { margin-top: .375rem; width: 100%; height: 4px; background: rgba(228,190,186,.15); border-radius: 2px; overflow: hidden; } .ic-fill { height: 100%; border-radius: 2px; } .ic-fill.r { background: linear-gradient(90deg, var(--red), #d4263a); } .ic-fill.g { background: linear-gradient(90deg, var(--gold-lt), var(--gold)); } .ic-fill.p { background: linear-gradient(90deg, #f9a8d4, var(--pink)); } .ic-cta { margin-top: .5rem; display: flex; align-items: center; justify-content: flex-end; } .ic-cta-btn { padding: .275rem .6rem; border: none; border-radius: var(--r-pill); font-size: .4375rem; font-weight: 700; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .2rem; transition: opacity .15s, transform .1s; } .ic-cta-btn:active { opacity: .75; transform: scale(.95); } .ic-cta-btn.r { background: var(--red); color: #fff; } .ic-cta-btn.g { background: linear-gradient(135deg, var(--gold-lt), var(--gold)); color: #7c5a00; } .scroll-dots { display: flex; justify-content: center; gap: .25rem; margin: .375rem 0; pointer-events: none; } .sd { width: 5px; height: 5px; border-radius: 50%; background: rgba(91,64,61,.12); transition: all .2s; } .sd.on { background: var(--red); width: 14px; border-radius: 3px; } /* ━━━ 酒蔵マーカー ━━━ */ .bm { display: flex; flex-direction: column; align-items: center; cursor: pointer; filter: drop-shadow(0 2px 5px rgba(0,0,0,.2)); transition: transform .15s; } .bm:hover { transform: scale(1.1) translateY(-2px); } .bm-pin { width: 2.25rem; height: 2.25rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; border: 2.5px solid #fff; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.15); } .bm-pin.u { background: #b0a89a; } .bm-pin.n { background: linear-gradient(135deg, var(--red), #d4263a); } .bm-pin.c { background: linear-gradient(135deg, var(--gold-lt), var(--gold)); } .bm-pin img { width: 1.375rem; height: 1.375rem; object-fit: contain; transform: rotate(45deg); } .bm-pin.u img { filter: brightness(0) invert(1) opacity(.5); } .bm-pin.n img { filter: brightness(0) invert(1); } .bm-pin.c img { filter: brightness(0) opacity(.7); } .bm-crown { position: absolute; top: -6px; right: -6px; width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(135deg, var(--gold-lt), var(--gold)); display: flex; align-items: center; justify-content: center; font-size: .4375rem; border: 1.5px solid #fff; transform: rotate(45deg); } .bm-pin.c::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(217,119,6,.4); animation: ciP 2s ease-out infinite; } @keyframes ciP { 0% { transform: rotate(45deg) scale(1); opacity: .8; } 100% { transform: rotate(45deg) scale(1.6); opacity: 0; } } .bm-tail { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; margin-top: -2px; } .bm-tail.u { border-top: 8px solid #b0a89a; } .bm-tail.n { border-top: 8px solid var(--red); } .bm-tail.c { border-top: 8px solid var(--gold-d); } .bm-lbl { margin-top: 2px; padding: .1rem .375rem; background: var(--card); border: 1px solid var(--bd-soft); border-radius: .375rem; font-size: .5rem; font-weight: 700; color: var(--t1); box-shadow: 0 1px 3px rgba(0,0,0,.08); white-space: nowrap; } /* ━━━ MarkerCluster デフォルトスタイル無効化 ━━━ */ /* iconCreateFunction でカスタムアイコンを使うため、デフォルトのCSSを完全上書き */ .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow { transition: transform .3s ease-out, opacity .3s ease-in; } .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large, .marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: none !important; box-shadow: none !important; } /* ━━━ カスタム酒クラスターアイコン (#770) ━━━ */ .sq-cluster { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--red), #d4263a); border: 3px solid #fff; box-shadow: 0 3px 12px rgba(178,4,17,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s; } .sq-cluster:hover { transform: scale(1.1); } .sq-cluster-ico { width: 1.25rem; height: 1.25rem; object-fit: contain; filter: brightness(0) invert(1); line-height: 1; } .sq-cluster-cnt { font-size: .5rem; font-weight: 900; color: #fff; line-height: 1; margin-top: 1px; font-family: 'Spline Sans', sans-serif; } /* 件数20件以上の大クラスター */ .sq-cluster-lg .sq-cluster { width: 62px; height: 62px; background: linear-gradient(135deg, #8b0007, var(--red)); } .sq-cluster-lg .sq-cluster-ico { width: 1.5rem; height: 1.5rem; } .sq-cluster-lg .sq-cluster-cnt { font-size: .5625rem; } /* ━━━ 吹き出し ━━━ */ /* Leaflet divIcon コンテナ: サイズ制約を解除して吹き出しを自然表示 */ .hk-wrap { overflow: visible !important; width: 0 !important; height: 0 !important; } .vbubble { border-radius: 1rem 1rem 1rem .25rem; padding: .375rem .625rem; width: max-content; max-width: 10rem; font-size: .625rem; color: var(--t1); line-height: 1.4; cursor: default; font-family: 'Noto Sans JP', sans-serif; white-space: normal; word-wrap: break-word; animation: hkFloat 3s ease-in-out infinite; } @keyframes hkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .vbubble.normal { background: var(--card); border: 1px solid var(--bd-med); box-shadow: 0 2px 8px rgba(91,64,61,.08); } .vbubble.vip { background: var(--card); border: 1px solid var(--bd-med); box-shadow: 0 2px 8px rgba(91,64,61,.08); } /* ━━━ 地図の花 ━━━ */ .flower { font-size: 1.25rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.08)); animation: sway 4s ease-in-out infinite; cursor: default; } .flower.g { filter: drop-shadow(0 0 5px rgba(248,189,42,.55)); } @keyframes sway { 0%,100% { transform: rotate(0) translateY(0); } 33% { transform: rotate(4deg) translateY(-3px); } 66% { transform: rotate(-3deg) translateY(2px); } } /* ━━━ 乾杯バブル ━━━ */ .kpop { animation: kPop 2.8s ease-out forwards; pointer-events: none; } @keyframes kPop { 0% { transform: scale(0) translateY(0); opacity: 0; } 15% { opacity: 1; } 35% { transform: scale(1.4) translateY(-10px); opacity: 1; } 65% { transform: scale(1.1) translateY(-20px); opacity: .8; } 100% { transform: scale(.6) translateY(-40px); opacity: 0; } } @keyframes hP { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.08); opacity: .8; } } @keyframes checkinBtnPulse { 0%,100% { box-shadow: 0 4px 14px rgba(217,119,6,.25); } 50% { box-shadow: 0 4px 22px rgba(217,119,6,.5); } } /* ━━━ BottomSheet ━━━ */ .bs-back { position: fixed; inset: 0; z-index: 700; background: rgba(0,0,0,.3); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .bs-back.is-open { opacity: 1; visibility: visible; } .bs-sheet { position: fixed; left: 0; right: 0; /* カードエリア上（フッター3rem＋カード7rem）に配置 */ bottom: 10rem; z-index: 710; max-width: 430px; margin: 0 auto; background: var(--card); border-radius: 1.25rem; max-height: calc(100vh - 13rem); overflow-y: auto; padding-bottom: .5rem; transform: translateY(calc(100% + 10rem)); transition: transform .4s cubic-bezier(.32,.72,0,1); box-shadow: 0 -4px 32px rgba(0,0,0,.12); } /* カードが非表示の場合はフッター直上 */ body.cards-hidden .bs-sheet { bottom: 3rem; transform: translateY(calc(100% + 3rem)); max-height: calc(100vh - 6rem); } .bs-sheet.is-open { transform: translateY(0); } .bs-handle { width: 2.5rem; height: 4px; border-radius: 2px; background: rgba(0,0,0,.1); margin: .625rem auto 0; } .bs-head { padding: .75rem 1rem .5rem; display: flex; align-items: flex-start; gap: .75rem; } .bs-ico { width: 3rem; height: 3rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .bs-det { flex: 1; min-width: 0; } .bs-nm { font-size: 1.125rem; font-weight: 900; line-height: 1.3; color: var(--t1); margin: 0; } .bs-addr { font-size: .5625rem; color: var(--tm); display: flex; align-items: center; gap: .2rem; margin-top: .125rem; } .bs-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; } .bs-chip { font-size: .4375rem; font-weight: 700; padding: .175rem .45rem; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: .2rem; } .bs-chip.ci { background: rgba(217,119,6,.1); color: var(--gold-d); border: 1px solid rgba(217,119,6,.25); } .bs-chip.nl { background: var(--red-lt); color: var(--red); border: 1px solid rgba(178,4,17,.2); } .bs-chip.kb { background: linear-gradient(135deg, rgba(255,223,160,.3), rgba(248,189,42,.2)); border: 1px solid rgba(248,189,42,.4); color: #7c5a00; } .bs-stats { display: flex; margin: .5rem 1rem 0; background: var(--field); border-radius: 1rem; border: 1px solid var(--bd-soft); overflow: hidden; } .bs-st { flex: 1; padding: .5rem .25rem; text-align: center; border-right: 1px solid var(--bd-soft); } .bs-st:last-child { border-right: none; } .bs-st-n { font-family: 'Spline Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--red); } .bs-st-l { font-size: .375rem; font-weight: 700; color: var(--tm); margin-top: .0625rem; } .bs-voices { padding: .5rem 1rem 0; } .bs-v { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--bd-soft); } .bs-v:last-child { border-bottom: none; } .bs-va { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .5rem; font-weight: 900; color: #fff; flex-shrink: 0; } .bs-vt { font-size: .6875rem; line-height: 1.5; color: var(--t2); } .bs-vm { font-size: .5rem; color: var(--tm); margin-top: .125rem; } .bs-acts { display: flex; gap: .5rem; padding: .75rem 1rem; } .bs-b { flex: 1; padding: .625rem; border: none; border-radius: 1rem; font-size: .6875rem; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: .25rem; transition: all .15s; } .bs-b:active { transform: scale(.97); } .bs-b.p { background: linear-gradient(135deg, var(--red), #d4263a); color: #fff; box-shadow: 0 4px 12px var(--red-sh); text-decoration: none; } .bs-b.o { background: linear-gradient(135deg, var(--gold-lt), var(--gold)); color: #7c5a00; } .bs-links { display: flex; gap: .5rem; padding: .375rem 1rem .75rem; border-top: 1px solid var(--bd-soft); } .bs-link-item { display: flex; align-items: center; gap: .25rem; font-size: .5625rem; color: var(--tm); text-decoration: none; padding: .25rem .625rem; border: 1px solid var(--bd-soft); border-radius: .625rem; transition: background .2s; } .bs-link-item:hover { background: var(--field); color: var(--t2); } .bs-checkin-btn { width: 100%; padding: .75rem; border: none; border-radius: 1.125rem; background: linear-gradient(135deg, var(--gold-lt), var(--gold)); font-size: .875rem; font-weight: 900; color: var(--gold-d); font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .375rem; box-shadow: 0 4px 14px rgba(217,119,6,.25); animation: checkinBtnPulse 2s ease-in-out infinite; } /* ━━━ 推しバロメータ ━━━ */ #bsOshiMeter { overflow: hidden; max-height: 0; transition: max-height .4s cubic-bezier(.32,.72,0,1), opacity .3s; opacity: 0; margin: .375rem 1rem .25rem; } #bsOshiMeter.visible { max-height: 5.5rem; opacity: 1; } .oshi-m-card { background: linear-gradient(135deg, rgba(248,189,42,.09), rgba(248,189,42,.03)); border: 1.5px solid rgba(248,189,42,.3); border-radius: 1rem; padding: .6rem .875rem; } .oshi-m-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; } .oshi-m-lbl { font-size: .5625rem; font-weight: 900; color: #7c5a00; } .oshi-m-cnt { font-family: 'Spline Sans', sans-serif; font-size: .6875rem; font-weight: 700; color: #7c5a00; } .oshi-bar-bg { height: .875rem; background: rgba(248,189,42,.12); border-radius: 9999px; overflow: hidden; } .oshi-bar-fill { height: 100%; width: 0%; border-radius: 9999px; background: linear-gradient(90deg, var(--gold), #ffd700); transition: width .2s cubic-bezier(.22,.6,.36,1); } .oshi-bar-fill.full { background: linear-gradient(90deg, var(--gold), #fff176, var(--gold)); animation: oshiBarFull .4s ease-out; } @keyframes oshiBarFull { 0% { filter: brightness(1); } 40% { filter: brightness(2.2); } 100% { filter: brightness(1.3); } } /* 推し確定オーバーレイ */ #oshiOvl { position: fixed; inset: 0; z-index: 4500; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s; cursor: pointer; } #oshiOvl.show { opacity: 1; pointer-events: all; } .oshi-oc { background: linear-gradient(135deg, #fff, #fffbea); border-radius: 2rem; padding: 2rem 2.5rem; text-align: center; box-shadow: 0 8px 40px rgba(248,189,42,.5); animation: ocPop .45s cubic-bezier(.32,.72,0,1); max-width: 300px; } @keyframes ocPop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } .oshi-oc-em { font-size: 3.5rem; display: block; margin-bottom: .5rem; animation: ocSpin .8s ease-out; } @keyframes ocSpin { 0% { transform: rotate(-20deg) scale(.5); } 60% { transform: rotate(8deg) scale(1.1); } 100% { transform: rotate(0); } } .oshi-oc-t { font-size: 1.375rem; font-weight: 900; color: #7c5a00; margin-bottom: .375rem; } .oshi-oc-s { font-size: .6875rem; color: var(--tm); } .oshi-oc-tap { font-size: .5rem; color: var(--tm); margin-top: 1.25rem; animation: blink 1.2s ease-in-out infinite; } @keyframes blink { 0%,100% { opacity: .6; } 50% { opacity: 1; } } /* ★ ♥ ライズ */ .oshi-star { position: fixed; pointer-events: none; z-index: 2500; font-size: var(--sz, 1.5rem); animation: starRise var(--dur, 4.1s) ease-out forwards; filter: drop-shadow(0 0 6px rgba(248,189,42,.7)); } @keyframes starRise { 0% { transform: translate(0,0) scale(.3) rotate(var(--rot, 0deg)); opacity: 0; } 12% { transform: translate(calc(var(--dx)*.1), calc(var(--dy)*.1)) scale(1.3) rotate(calc(var(--rot)*-.5)); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } } .rising-heart { position: fixed; pointer-events: none; z-index: 2500; font-size: var(--sz, 1.5rem); animation: heartRise var(--dur, 4.1s) ease-out forwards; filter: drop-shadow(0 0 4px rgba(236,72,153,.5)); } @keyframes heartRise { 0% { transform: translate(0,0) scale(.3) rotate(var(--rot, -10deg)); opacity: 0; } 12% { transform: translate(calc(var(--dx)*.1), calc(var(--dy)*.1)) scale(1.3) rotate(calc(var(--rot)*-.5)); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } } /* ━━━ チェックイン花火 ━━━ */ #checkinFireoverlay { position: fixed; inset: 0; z-index: 3000; pointer-events: all; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ci-confetti { position: absolute; top: -16px; animation: confettiFall var(--dur, 3s) var(--delay, 0s) ease-in both; border-radius: var(--shape, 2px); } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(110vh) rotate(var(--spin, 540deg)); opacity: 0; } } .ci-burst-particle { position: absolute; width: var(--sz, 7px); height: var(--sz, 7px); border-radius: 50%; top: 0; left: 0; animation: burstFly var(--dur, .9s) var(--delay, 0s) cubic-bezier(0,0,.2,1) both; } @keyframes burstFly { 0% { transform: translate(0,0) scale(1); opacity: 1; } 70% { opacity: .8; } 100% { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(0); opacity: 0; } } .ci-center-msg { position: relative; text-align: center; z-index: 1; animation: msgPop .4s .2s cubic-bezier(.34,1.56,.64,1) both; } @keyframes msgPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .ci-center-msg .ci-emoji { font-size: 4.5rem; line-height: 1; display: block; } .ci-center-msg .ci-title { font-size: 1.625rem; font-weight: 900; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.5), 0 0 40px rgba(248,189,42,.6); line-height: 1.2; margin-top: .25rem; } .ci-center-msg .ci-sub { font-size: .9375rem; color: rgba(255,255,255,.85); margin-top: .375rem; text-shadow: 0 1px 8px rgba(0,0,0,.4); } .ci-tap { font-size: .625rem; color: rgba(255,255,255,.6); margin-top: 1.5rem; animation: blink 1.2s ease-in-out infinite; } /* ━━━ 完了フラッシュ ━━━ */ .complete-flash { position: absolute; inset: 0; border-radius: inherit; display: flex; align-items: center; justify-content: center; background: rgba(5,150,105,.15); border: 1.5px solid var(--green); font-size: 1.5rem; animation: cFlash .5s ease-out forwards; pointer-events: none; border-radius: var(--r-card); } @keyframes cFlash { 0% { opacity: 1; } 100% { opacity: 0; } } .ms { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0, 'wght' 500, 'opsz' 24; } /* ━━━ 酒蔵登録フォーム ━━━ */ .brew-pick-btn { width: 100%; padding: .625rem; border: 1.5px dashed rgba(79,70,229,.45); border-radius: 1rem; background: rgba(79,70,229,.04); color: var(--indigo); font-size: .6875rem; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .375rem; transition: all .15s; } .brew-label { font-size: .5rem; font-weight: 700; color: var(--tm); display: block; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .06em; } .brew-input { width: 100%; padding: .5rem .75rem; border: 1px solid var(--bd-med); border-radius: .875rem; font-size: .75rem; font-family: inherit; background: var(--field); color: var(--t1); outline: none; transition: border-color .15s; } .brew-input:focus { border-color: var(--indigo); } .brew-input-coord { font-family: 'Spline Sans', sans-serif; background: rgba(79,70,229,.04); color: var(--indigo); cursor: default; } .brew-select { width: 100%; padding: .5rem .625rem; border: 1px solid var(--bd-med); border-radius: .875rem; font-size: .6875rem; font-family: inherit; background: var(--field); color: var(--t1); outline: none; appearance: none; -webkit-appearance: none; } .brew-submit-btn { width: 100%; padding: .75rem; border: none; border-radius: 1.125rem; background: linear-gradient(135deg, var(--red), #d4263a); color: #fff; font-size: .875rem; font-weight: 900; font-family: inherit; cursor: pointer; box-shadow: 0 4px 14px var(--red-sh); margin-top: .25rem; margin-bottom: .5rem; display: flex; align-items: center; justify-content: center; gap: .375rem; } .map-pick-bar { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; padding: .625rem .75rem; background: linear-gradient(to bottom, rgba(79,70,229,.92), rgba(79,70,229,.75)); display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(8px); pointer-events: auto; } .map-pick-cancel { border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.15); color: #fff; border-radius: var(--r-pill); padding: .25rem .625rem; font-size: .5rem; font-weight: 700; cursor: pointer; font-family: inherit; } .map-pick-crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; pointer-events: none; } /* ━━━ Search panel (kept from previous) ━━━ */ /* Map Title & Search Strip */ .map-title-strip { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .map-title-strip-left { display: flex; align-items: flex-end; /* Bottom alignment */ gap: 8px; } .map-title-icon { color: #e11d48; font-size: 20px; margin-right: -4px; } .map-title-label { font-weight: 800; font-size: 14px; color: #1a1a1a; white-space: nowrap; } .map-search-toggle-btn { background: #e11d48; color: #fff; border: none; border-radius: 99px; padding: 6px 16px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 10px rgba(225, 29, 72, 0.2); } .map-search-toggle-btn:hover { background: #be123c; transform: translateY(-1px); } .map-search-toggle-btn .material-symbols-outlined { font-size: 18px; } /* Search Panel — HUD overlay */ .map-search-panel { position: fixed; top: 3.5rem; left: .75rem; right: .75rem; max-width: 420px; margin: 0 auto; background: var(--card, #fff); border-radius: 1.25rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); z-index: 650; border: 1px solid var(--bd-soft, rgba(228,190,186,0.2)); } .map-search-panel-content { padding: 16px 16px 20px; max-width: 600px; margin: 0 auto; } .map-search-panel.hidden { display: none; } .search-step .step-title { font-size: 13px; font-weight: 800; color: #1f2937; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .step-badge { background: #e11d48; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em; } .region-tabs { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #f3f4f6; } .region-tab-btn { flex-shrink: 0; background: #fff; border: 1px solid #e5e7eb; color: #4b5563; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .region-tab-btn.is-active { background: #1f2937; border-color: #1f2937; color: #fff; font-weight: 700; } .prefecture-chips { display: flex; flex-wrap: wrap; gap: 8px; } .area-search-pill { background: #f9fafb; border: 1px solid #e5e7eb; color: #374151; padding: 6px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .area-search-pill:hover, .area-search-pill.is-active { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; } .prefecture-group.hidden { display: none; } .map-search-group { position: relative; width: 100%; } .map-search-input { width: 100%; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 16px 10px 42px; font-size: 14px; transition: all 0.2s; } .map-search-group .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #9ca3af; pointer-events: none; } .map-search-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); z-index: 50; max-height: 240px; overflow-y: auto; border: 1px solid #e5e7eb; } .map-search-suggestions.hidden { display: none; } .suggestion-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #f3f4f6; transition: background 0.15s; } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover { background: #fff1f2; } .suggestion-name { display: block; font-size: 13px; font-weight: 700; color: #111827; } .suggestion-addr { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; } /* My Location Button */ .my-location-container { position: absolute; top: 12px; right: 12px; z-index: 10; } .my-location-btn { width: 52px; height: 52px; background: #fff; border: none; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .my-location-btn:active { transform: scale(0.9); } .my-location-btn span { color: #e11d48; font-size: 26px; } /* Custom Marker (Red with White Dot) */ .custom-marker { width: 24px; height: 24px; background: #e11d48; border: 2.5px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); cursor: pointer; transition: transform 0.15s ease-out; } .custom-marker:hover { transform: rotate(-45deg) scale(1.15); z-index: 1000 !important; } .marker-dot { width: 7px; height: 7px; background: #fff; border-radius: 50%; transform: rotate(45deg); /* Counter the parent rotation to look clean */ } /* Map Spinner */ .map-spinner-ring { width: 48px; height: 48px; border: 4px solid rgba(225, 29, 72, 0.1); border-top-color: #e11d48; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; } /* Centered Modal (Card HUD) */ .brewery-modal { position: absolute; top: calc(50% + 40px); /* Place below the centered pin */ left: 50%; width: 90%; max-width: 300px; background: #fff; border-radius: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); z-index: 30; transform: translate(-50%, 0) scale(0.9); /* Anchor from top-middle */ opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); padding: 24px; pointer-events: none; } .brewery-modal.is-active { transform: translate(-50%, 0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; } .brewery-modal-content { display: flex; flex-direction: column; } .brewery-name { font-size: 1.125rem; font-weight: 800; color: #111827; margin-bottom: 6px; line-height: 1.3; } .brewery-address { font-size: 0.875rem; color: #6b7280; margin-bottom: 20px; } .modal-actions { display: flex; gap: 12px; } .btn-primary-map { flex: 1; display: flex; align-items: center; justify-content: center; background: #e11d48; color: #fff; font-weight: 700; font-size: 0.9375rem; padding: 14px; border-radius: 14px; text-decoration: none; transition: background 0.2s; box-shadow: 0 4px 12px rgba(225, 29, 72, 0.2); } .btn-primary-map:hover { background: #be123c; } .btn-primary-map:active { transform: scale(0.98); } @keyframes spin { to { transform: rotate(360deg); } } /* --- Home: Map Discovery CTA (Patterned after Shop Subscription) --- */ /* ============================================ Shop: Cart, Floating Badge, Success, Extras ============================================ */ /* Flash Messages */ .ag-shop-flash { padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; } .ag-shop-flash--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; } .ag-shop-flash--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } /* Floating Cart Badge */ .ag-shop-cart-floating { position: fixed; bottom: 5.5rem; right: 1rem; z-index: 50; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-brandcolor-500, #b20411); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(178, 4, 17, 0.35); text-decoration: none; transition: transform 0.2s; } .ag-shop-cart-floating:active { transform: scale(0.9); } .ag-shop-cart-floating .material-symbols-outlined { font-size: 1.5rem; } .ag-shop-cart-floating-badge { position: absolute; top: -0.25rem; right: -0.25rem; background: #fff; color: var(--color-brandcolor-500, #b20411); font-size: 0.75rem; font-weight: 900; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.15); } /* Empty State */ .ag-shop-empty { text-align: center; padding: 3rem 1rem; color: #9ca3af; } .ag-shop-empty .material-symbols-outlined { font-size: 3rem; margin-bottom: 0.5rem; } .ag-shop-empty p { font-size: 0.875rem; font-weight: 500; } /* Image Placeholder */ .ag-shop-card-img-placeholder { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f5f4, #e7e5e4); color: #a8a29e; } .ag-shop-card-img-placeholder .material-symbols-outlined { font-size: 3rem; } /* Goods Footer with cart button */ .ag-shop-goods-footer { display: flex; justify-content: space-between; align-items: center; } .ag-shop-cart-btn-sm { width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: var(--color-brandcolor-500, #b20411); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s; } .ag-shop-cart-btn-sm:active { transform: scale(0.9); } .ag-shop-cart-btn-sm .material-symbols-outlined { font-size: 14px; } /* ============================================ Cart Page ============================================ */ .ag-cart-items { display: flex; flex-direction: column; gap: 1rem; } .ag-cart-item { display: flex; gap: 0.75rem; background: #fff; border-radius: 1rem; padding: 0.75rem; box-shadow: 0 4px 12px rgba(91, 64, 61, 0.06); align-items: center; } .ag-cart-item-img { width: 5rem; height: 5rem; border-radius: 0.75rem; overflow: hidden; flex-shrink: 0; background: #f5f5f4; } .ag-cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .ag-cart-placeholder { width: 100%; height: 100%; } .ag-cart-item-info { flex: 1; min-width: 0; } .ag-cart-item-name { font-size: 0.875rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-cart-item-price { font-size: 0.8125rem; color: var(--color-brandcolor-500, #b20411); font-weight: 700; margin-bottom: 0.375rem; } .ag-cart-item-actions { display: flex; align-items: center; gap: 0.75rem; } .ag-cart-qty-form { display: flex; align-items: center; gap: 0; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; } .ag-cart-qty-btn { width: 2rem; height: 2rem; background: #f9fafb; border: none; cursor: pointer; font-size: 1rem; font-weight: 700; color: #374151; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .ag-cart-qty-btn:hover { background: #e5e7eb; } .ag-cart-qty-input { width: 2rem; text-align: center; border: none; font-size: 0.875rem; font-weight: 700; background: #fff; -moz-appearance: textfield; } .ag-cart-qty-input::-webkit-outer-spin-button, .ag-cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ag-cart-remove-btn { background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: color 0.15s; } .ag-cart-remove-btn:hover { color: #ef4444; } .ag-cart-remove-btn .material-symbols-outlined { font-size: 1.25rem; } .ag-cart-item-subtotal { font-size: 0.875rem; font-weight: 900; color: var(--sq-text); white-space: nowrap; flex-shrink: 0; } /* Cart Summary */ .ag-cart-summary { margin-top: 1.5rem; background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 4px 12px rgba(91, 64, 61, 0.06); } .ag-cart-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; padding: 0.375rem 0; } .ag-cart-summary-note { color: #9ca3af; font-size: 0.8125rem; } .ag-cart-summary-divider { height: 1px; background: #e5e7eb; margin: 0.75rem 0; } .ag-cart-summary-total { font-size: 1.125rem; font-weight: 900; } /* Age Verification Gate (#412) */ .ag-cart-age-verify { margin: 1rem 0; padding: 1rem; background: #fff1f2; border: 1px solid #fecdd3; border-radius: 0.75rem; } .ag-cart-age-verify-title { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 700; color: #be123c; } .ag-cart-age-verify-title .material-symbols-outlined { font-size: 1rem; } .ag-cart-age-verify-note { font-size: 0.75rem; color: #e11d48; margin-top: 0.25rem; } .ag-cart-age-verify-label { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: #1f2937; } .ag-cart-age-verify-label input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: #f59e0b; cursor: pointer; } /* Checkout Button */ .ag-cart-checkout-btn { margin-top: 1rem; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; background: var(--color-brandcolor-500, #b20411); color: #fff; font-size: 1rem; font-weight: 700; border: none; border-radius: 9999px; cursor: pointer; box-shadow: 0 4px 16px rgba(178, 4, 17, 0.3); transition: transform 0.15s; } .ag-cart-checkout-btn:active { transform: scale(0.96); } .ag-cart-checkout-btn .material-symbols-outlined { font-size: 1.25rem; } .ag-cart-checkout-btn--disabled { background: #9ca3af !important; cursor: not-allowed; box-shadow: none; } .ag-cart-checkout-btn--disabled:active { transform: none; } .ag-cart-stripe-note { margin-top: 0.75rem; text-align: center; font-size: 0.75rem; color: #9ca3af; display: flex; align-items: center; justify-content: center; gap: 0.25rem; } /* --- Shipping Progress Bar --- */ .ag-cart-shipping-progress { margin: 1rem 1rem 0; padding: 1rem; background: #f0fdf4; border-radius: 1rem; border: 1px solid #bbf7d0; } .ag-cart-shipping-free { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: #16a34a; font-weight: 700; font-size: 0.875rem; } .ag-cart-shipping-free .material-symbols-outlined { font-size: 1.25rem; } .ag-cart-shipping-remaining { text-align: center; color: var(--sq-text); font-size: 0.875rem; margin-bottom: 0.75rem; } .ag-cart-shipping-remaining strong { color: var(--color-brandcolor-500, #b20411); font-size: 1.125rem; } .ag-cart-shipping-bar { height: 8px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; } .ag-cart-shipping-bar-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 9999px; transition: width 0.6s ease; } .ag-cart-shipping-labels { display: flex; justify-content: space-between; margin-top: 0.25rem; font-size: 0.625rem; color: #9ca3af; } .ag-cart-summary-free { color: #16a34a; font-weight: 700; } /* --- Shop Shipping Banner --- */ .ag-shop-shipping-banner { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin: 0 1rem; padding: 0.625rem 1rem; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border: 1px solid #bbf7d0; border-radius: 0.75rem; font-size: 0.75rem; color: #15803d; font-weight: 600; } .ag-shop-shipping-banner .material-symbols-outlined { font-size: 1rem; color: #16a34a; } .ag-shop-shipping-banner strong { font-weight: 900; } .ag-shop-shipping-banner-sep { color: #86efac; } /* ============================================ Success Page v2 (#415) ============================================ */ /* --- Confetti --- */ .ag-success-confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; overflow: hidden; } .ag-confetti-piece { position: absolute; top: -20px; border-radius: 2px; animation: ag-confetti-fall linear forwards; opacity: 0.85; } @keyframes ag-confetti-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0.9; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } } /* --- Success Section --- */ .ag-shop-success-v2 { text-align: center; padding: 2rem 1rem 3rem; max-width: 480px; margin: 0 auto; } /* --- Check Icon --- */ .ag-success-check-wrap { display: flex; justify-content: center; margin-bottom: 1.25rem; } .ag-success-check-circle { width: 5rem; height: 5rem; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(16, 185, 129, 0.35); animation: ag-check-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transform: scale(0); } .ag-success-check-circle .material-symbols-outlined { font-size: 2.5rem; color: #fff; font-weight: 700; } @keyframes ag-check-pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } /* --- Title & Subtitle --- */ .ag-success-title { font-size: 1.5rem; font-weight: 900; color: var(--sq-text, #1f2937); margin-bottom: 0.375rem; letter-spacing: -0.02em; } .ag-success-subtitle { font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; } /* --- Order Card --- */ .ag-success-order-card { background: #fff; border-radius: 1rem; padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 4px 16px rgba(91, 64, 61, 0.08); text-align: left; animation: ag-fade-up 0.5s ease 0.3s backwards; } .ag-success-order-header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 800; color: var(--sq-text, #1f2937); margin-bottom: 0.75rem; } .ag-success-order-header .material-symbols-outlined { font-size: 1.25rem; color: var(--color-brandcolor-500, #b20411); } .ag-success-order-items { display: flex; flex-direction: column; gap: 0.5rem; } .ag-success-order-item { display: flex; align-items: center; font-size: 0.8125rem; color: #374151; } .ag-success-order-item-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-success-order-item-qty { color: #9ca3af; font-weight: 500; margin: 0 0.75rem; white-space: nowrap; } .ag-success-order-item-price { font-weight: 700; white-space: nowrap; } .ag-success-order-divider { height: 1px; background: #e5e7eb; margin: 0.75rem 0; } .ag-success-order-total { display: flex; justify-content: space-between; align-items: center; font-size: 0.9375rem; font-weight: 700; } .ag-success-order-total-price { font-size: 1.125rem; font-weight: 900; color: var(--color-brandcolor-500, #b20411); } /* --- Info Card --- */ .ag-success-info-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; text-align: left; display: flex; flex-direction: column; gap: 0.875rem; animation: ag-fade-up 0.5s ease 0.5s backwards; } .ag-success-info-row { display: flex; align-items: flex-start; gap: 0.75rem; } .ag-success-info-row .material-symbols-outlined { font-size: 1.25rem; color: #6366f1; margin-top: 0.125rem; flex-shrink: 0; } .ag-success-info-title { font-size: 0.8125rem; font-weight: 700; color: var(--sq-text, #1f2937); margin-bottom: 0.125rem; } .ag-success-info-text { font-size: 0.75rem; color: #6b7280; line-height: 1.5; } /* --- CTA Buttons --- */ .ag-success-actions { display: flex; flex-direction: column; gap: 0.75rem; animation: ag-fade-up 0.5s ease 0.7s backwards; } .ag-success-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 9999px; font-size: 0.9375rem; font-weight: 700; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; } .ag-success-btn:active { transform: scale(0.96); } .ag-success-btn .material-symbols-outlined { font-size: 1.125rem; } .ag-success-btn--primary { background: var(--color-brandcolor-500, #b20411); color: #fff; box-shadow: 0 4px 16px rgba(178, 4, 17, 0.3); } .ag-success-btn--secondary { background: #fff; color: var(--sq-text, #1f2937); border: 1.5px solid #e5e7eb; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } @keyframes ag-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Legacy success classes (backward compat) */ .ag-shop-success { text-align: center; padding: 3rem 1rem; } .ag-shop-success-icon { margin-bottom: 1rem; } .ag-shop-success-icon .material-symbols-outlined { font-size: 4rem; color: #10b981; } .ag-shop-success-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 0.75rem; } .ag-shop-success-desc { font-size: 0.875rem; color: #6b7280; line-height: 1.6; margin-bottom: 1.5rem; } .ag-shop-success-actions { display: flex; justify-content: center; } /* ===== 注文枠管理 (#86) ===== */ /* 残り本数バッジ（カード画像上） */ .ag-shop-remaining-badge { position: absolute; bottom: 8px; right: 8px; background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; letter-spacing: 0.02em; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3); z-index: 2; } /* SOLD OUT オーバーレイ */ .ag-shop-sold-out-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 3; border-radius: inherit; } .ag-shop-sold-out-overlay span { color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: 0.15em; text-shadow: 0 1px 4px rgba(0,0,0,0.3); } /* SOLD OUT カード全体の透過 */ .ag-shop-card--sold-out { opacity: 0.75; } /* カートボタン無効化 */ .ag-shop-cart-btn--disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ===== 詳細ページ 注文枠情報 ===== */ .ag-detail-order-info { margin: 0 16px 20px; padding: 16px; background: #fef3f2; border-radius: 12px; border: 1px solid #fecaca; } /* プログレスバー */ .ag-detail-order-progress { margin-bottom: 12px; } .ag-detail-order-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .ag-detail-order-progress-label { font-size: 0.8rem; color: #6b7280; font-weight: 600; } .ag-detail-order-progress-count { font-size: 0.85rem; color: #dc2626; font-weight: 700; } .ag-detail-order-progress-count--sold-out { color: #fff; background: #dc2626; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; letter-spacing: 0.1em; } .ag-detail-order-progress-bar { width: 100%; height: 8px; background: #fde8e8; border-radius: 4px; overflow: hidden; } .ag-detail-order-progress-fill { height: 100%; background: linear-gradient(90deg, #ef4444, #dc2626); border-radius: 4px; transition: width 0.5s ease; } .ag-detail-order-progress-sub { font-size: 0.7rem; color: #9ca3af; margin-top: 4px; text-align: right; } /* 締切・配送 */ .ag-detail-order-deadline, .ag-detail-order-delivery { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #374151; padding: 6px 0; } .ag-detail-order-deadline .material-symbols-outlined, .ag-detail-order-delivery .material-symbols-outlined { font-size: 18px; color: #dc2626; } .ag-detail-order-deadline + .ag-detail-order-delivery { border-top: 1px solid #fecaca; padding-top: 8px; } /* 販売停止CTA */ .ag-detail-cta-sold-out { text-align: center; padding: 8px 16px; } .ag-detail-cta-btn--disabled { background: #9ca3af !important; cursor: not-allowed; opacity: 0.7; } /* ========================================================================== Home Renewal UI (2026-04) ========================================================================== */ /* --- Section Shared --- */ /* --- 1. Stats Grid --- */ /* --- 2. Profile Card --- */ /* --- 3. Today's Highlight --- */ /* --- 4. KANPAI Section --- */ .ag-home-kanpai-section { position: relative; background: var(--sq-bg); border-radius: 1.5rem; padding: 1rem 2rem 2.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.25rem; overflow: hidden; min-height: 300px; } .ag-home-kanpai-header { position: relative; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.5rem; } .ag-home-kanpai-label { color: var(--sq-text-sub); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; } .ag-home-kanpai-count { font-size: 2.5rem; font-weight: 900; color: var(--sq-text); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } @media (min-width: 768px) { .ag-home-kanpai-count { font-size: 3rem; } } .ag-home-kanpai-live { color: var(--color-brandcolor-500, #b20411); font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.25rem; } .ag-home-kanpai-live-dot { width: 8px; height: 8px; background: var(--color-brandcolor-500, #b20411); border-radius: 50%; animation: ag-pulse 2s ease-in-out infinite; } @keyframes ag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .ag-home-kanpai-btn-wrap { position: relative; z-index: 10; display: flex; justify-content: center; } .ag-home-kanpai-btn { position: relative; width: 10rem; height: 10rem; border-radius: 50%; background: var(--color-brandcolor-500, #b20411); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 50px rgba(178,4,17,0.3); transition: transform 0.15s; overflow: hidden; text-decoration: none; } .ag-home-kanpai-btn:active { transform: scale(0.95); } .ag-home-kanpai-btn-pattern { position: absolute; inset: 0; opacity: 0.2; transition: transform 1s ease; } .ag-home-kanpai-btn:hover .ag-home-kanpai-btn-pattern { transform: rotate(180deg); } .ag-home-kanpai-btn-content { position: relative; display: flex; flex-direction: column; align-items: center; color: #fff; } .ag-home-kanpai-btn-text { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.05em; text-shadow: 0 2px 4px rgba(0,0,0,0.5); border-bottom: 2px solid rgba(255,255,255,0.4); padding-bottom: 2px; } .ag-home-kanpai-footer-text { width: 100%; color: var(--sq-text); font-weight: 700; font-size: 0.85rem; margin-top: 0; } /* --- 4b. KANPAI Ball Pit --- */ .ag-kanpai-ballpit { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; } .ag-kanpai-ball { position: absolute; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.7); box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); overflow: hidden; will-change: transform, left, top; transition: none; } .ag-kanpai-ball img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .ag-kanpai-ball--placeholder { display: flex; align-items: center; justify-content: center; } @keyframes ag-ball-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(1deg); } 75% { transform: translateY(2px) rotate(-1deg); } } @media (prefers-reduced-motion: reduce) { .ag-kanpai-ball { animation: none !important; } } /* --- 7. Bonus Quest --- */ .ag-home-quest-card { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--color-brandcolor-500, #b20411), #d62927); padding: 1.5rem; border-radius: 1.5rem; color: #fff; box-shadow: 0 10px 30px rgba(178,4,17,0.25); } .ag-home-quest-glow { position: absolute; right: -2.5rem; top: -2.5rem; width: 10rem; height: 10rem; background: rgba(255,255,255,0.1); border-radius: 50%; filter: blur(48px); } .ag-home-quest-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1rem; } .ag-home-quest-header { display: flex; justify-content: space-between; align-items: center; } .ag-home-quest-heading { font-size: 1.125rem; font-weight: 900; letter-spacing: 0.05em; } .ag-home-quest-date { background: rgba(255,255,255,0.2); font-size: 0.625rem; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } .ag-home-quest-item { padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.15); } .ag-home-quest-item:last-of-type { border-bottom: none; } .ag-home-quest-item--done { opacity: 0.6; } .ag-home-quest-mission-name { font-size: 0.875rem; font-weight: 600; opacity: 0.95; margin-bottom: 0.5rem; } .ag-home-quest-progress-track { height: 0.75rem; background: rgba(0,0,0,0.2); border-radius: 9999px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); } .ag-home-quest-progress-fill { height: 100%; background: #fff; border-radius: 9999px; transition: width 0.6s ease; } .ag-home-quest-progress-label { display: flex; justify-content: space-between; align-items: center; margin-top: 0.375rem; font-size: 0.625rem; font-weight: 700; } .ag-home-quest-reward { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 700; margin-top: 0.25rem; } .ag-home-quest-link { display: block; text-align: center; color: rgba(255,255,255,0.8); font-size: 0.75rem; font-weight: 600; text-decoration: none; padding-top: 0.5rem; } .ag-home-quest-link:hover { color: #fff; } /* --- 8. Latest Brands --- */ /* --- 9. Shop Banner --- */ .ag-home-shop-banner { display: flex; align-items: center; gap: 1.5rem; background: #eeeee9; padding: 1.5rem; border-radius: 1.5rem; box-shadow: 0 10px 30px rgba(91, 64, 61, 0.08); border: 1px solid rgba(182,158,63,0.2); text-decoration: none; color: inherit; transition: transform 0.15s; } .ag-home-shop-banner:hover { transform: translateY(-2px); } .ag-home-shop-banner-body { flex: 1; display: flex; flex-direction: column; gap: 0.375rem; } .ag-home-shop-banner-badge { background: #b69e3f; color: #fff; font-size: 0.625rem; font-weight: 900; padding: 2px 8px; border-radius: 9999px; width: fit-content; } .ag-home-shop-banner-title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--sq-text); } .ag-home-shop-banner-desc { font-size: 0.75rem; color: var(--sq-text-sub); } .ag-home-shop-banner-btn { display: inline-block; background: linear-gradient(to right, var(--color-brandcolor-500, #b20411), #d62927); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.5rem 1.5rem; border-radius: 9999px; margin-top: 0.25rem; width: fit-content; transition: opacity 0.2s; } .ag-home-shop-banner:hover .ag-home-shop-banner-btn { opacity: 0.9; } .ag-home-shop-banner-icon { font-size: 4rem; color: #b69e3f; opacity: 0.25; flex-shrink: 0; } /* ========================================================================== Home Renewal UI — Hotfix (2026-04-12) ========================================================================== */ /* --- 1. Header Logo — smaller with padding --- */ .un_homeHeader .bl_headerNav_logo img { width: min(55%, 14rem); margin-inline: auto; } /* --- 2. KANPAI Section — compact padding --- */ .ag-home-kanpai-section { padding: 1.25rem 1.5rem; gap: 1rem; min-height: 260px; } /* --- 3. KANPAI Disabled (gray out) --- */ .ag-home-kanpai-btn--disabled { background: #9ca3af !important; box-shadow: 0 5px 15px rgba(156, 163, 175, 0.3) !important; cursor: pointer; /* pointer-events: auto — keep clickable for break animation fun! */ } .ag-home-kanpai-btn--disabled .ag-home-kanpai-btn-text { border-bottom-color: rgba(255,255,255,0.2); } /* --- 4. Counter bump animation --- */ .ag-home-kanpai-count--bump { animation: ag-bump 0.4s ease; } @keyframes ag-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); color: var(--color-brandcolor-500, #b20411); } 100% { transform: scale(1); } } /* --- 5. Particle System --- */ .ag-kanpai-particle { position: absolute; pointer-events: none; z-index: 100; animation: ag-particle-fly 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes ag-particle-fly { 0% { transform: translate(0, 0) scale(0.3) rotate(0deg); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(360deg); opacity: 0; } } /* --- 6. XP Burst Display --- */ .ag-kanpai-xp-burst { position: absolute; z-index: 200; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; animation: ag-xp-burst 1.8s ease forwards; pointer-events: none; text-align: center; } .ag-kanpai-xp-amount { font-size: 2.5rem; font-weight: 900; color: var(--color-brandcolor-500, #b20411); text-shadow: 0 2px 12px rgba(178,4,17,0.4), 0 0 40px rgba(178,4,17,0.2); letter-spacing: -0.05em; } .ag-kanpai-xp-sub { font-size: 1.125rem; font-weight: 900; color: var(--sq-text); text-shadow: 0 1px 4px rgba(0,0,0,0.1); } @keyframes ag-xp-burst { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 50% { transform: translate(-50%, -80%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -120%) scale(0.8); opacity: 0; } } /* ============================================================ ♥システム (#48, #139) — はてブ★式スタッキング ============================================================ */ /* ♥ボタンユニット */ .bl_heartUnit { position: relative; display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap; max-width: 100%; } /* メインボタン: ♡+ */ .el_heartBtn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; cursor: pointer; transition: transform 0.15s ease; -webkit-tap-highlight-color: transparent; color: #94a3b8; position: relative; } .el_heartBtn:active:not(:disabled) { transform: scale(0.85); } .el_heartBtn:disabled { opacity: 0.5; cursor: not-allowed; } .el_heartBtn .material-symbols-outlined { font-size: 20px; } /* + バッジ */ .el_heartPlus { font-size: 10px; font-weight: 700; color: #94a3b8; position: absolute; top: 0; right: -2px; } /* ♥アイコン列（物理並び） */ .el_heartIcons { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; gap: 0; font-size: 14px; line-height: 1.3; letter-spacing: -1px; overflow: hidden; flex-shrink: 1; min-width: 0; max-width: 100px; padding-bottom: 1px; } /* ♥カウント（数字表示） */ .el_heartCount { font-size: 13px; font-weight: 600; color: #e11d48; min-width: 1em; } /* ♥ポップアニメーション */ .el_heartPop { display: inline; opacity: 0; transform: scale(0.3); animation: heartPopIn 0.3s ease-out forwards; } .el_heartPop--visible { opacity: 1; transform: scale(1); } @keyframes heartPopIn { 0% { opacity: 0; transform: scale(0.3) translateY(4px); } 60% { opacity: 1; transform: scale(1.3) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .el_heartPop--new { animation: heartPopIn 0.4s ease-out forwards; } /* ♥カウント バウンス（スプリング強化 #109） */ .el_heartBounce { animation: heartBounce 0.4s ease; } @keyframes heartBounce { 0% { transform: scale(1); color: #e11d48; } 25% { transform: scale(1.5); color: #f43f5e; } 50% { transform: scale(0.9); color: #e11d48; } 75% { transform: scale(1.15); } 100% { transform: scale(1); color: #e11d48; } } /* ♥トースト */ .heart-toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(10px); padding: 10px 20px; border-radius: 24px; font-size: 13px; font-weight: 600; z-index: 9999; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .heart-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); } .heart-toast--info { background: #1e293b; color: #fff; } .heart-toast--error { background: #dc2626; color: #fff; } /* ♥パーティクル (#109) */ .el_heartParticle { position: fixed; pointer-events: none; z-index: 9999; animation: heartParticleBurst 1.2s ease-out forwards; } @keyframes heartParticleBurst { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.5); } } /* ♥レイン — 大台突破演出 (#109) */ .el_heartRain { position: fixed; top: -30px; pointer-events: none; z-index: 9998; opacity: 0; animation: heartRainFall var(--duration, 3s) ease-in forwards; } @keyframes heartRainFall { 0% { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(100vh + 50px)) translateX(var(--sway, 0px)) rotate(360deg); } } /* =================================================================== 銘柄登録フォーム — 2026-04-13 リニューアル (#38) =================================================================== */ .sake-register-photo{position:relative;width:calc(100% - 2rem);margin:0 auto;aspect-ratio:3/4;background:#fff;border-radius:2rem;border:1px solid rgba(228,190,186,.3);box-shadow:0 1px 3px rgba(91,64,61,.06);display:flex;flex-direction:column;align-items:center;justify-content:space-between;cursor:pointer;overflow:hidden;padding:1.5rem;transition:box-shadow .3s} .sake-register-photo:hover{box-shadow:0 4px 12px rgba(91,64,61,.12)} .sake-register-photo__frame{position:absolute;inset:1.25rem;border:2px dashed rgba(228,190,186,.4);border-radius:1rem;pointer-events:none} .sake-register-photo__corner{position:absolute;width:2.5rem;height:2.5rem;pointer-events:none} .sake-register-photo__corner--tl{top:2rem;left:2rem;border-top:4px solid rgba(178,4,17,.4);border-left:4px solid rgba(178,4,17,.4);border-top-left-radius:.75rem} .sake-register-photo__corner--tr{top:2rem;right:2rem;border-top:4px solid rgba(178,4,17,.4);border-right:4px solid rgba(178,4,17,.4);border-top-right-radius:.75rem} .sake-register-photo__corner--bl{bottom:2rem;left:2rem;border-bottom:4px solid rgba(178,4,17,.4);border-left:4px solid rgba(178,4,17,.4);border-bottom-left-radius:.75rem} .sake-register-photo__corner--br{bottom:2rem;right:2rem;border-bottom:4px solid rgba(178,4,17,.4);border-right:4px solid rgba(178,4,17,.4);border-bottom-right-radius:.75rem} .sake-register-photo__btn{position:relative;background:var(--sq-brand);color:#fff;width:4rem;height:4rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(178,4,17,.3);transition:transform .15s;z-index:2} .sake-register-photo__btn:active{transform:scale(.95)} .sake-register-photo__btn .material-symbols-outlined{font-size:2rem} .sake-register-photo__ping{position:absolute;inset:0;background:rgba(178,4,17,.2);border-radius:9999px;animation:sake-register-ping 2s cubic-bezier(0,0,.2,1) infinite} @keyframes sake-register-ping{0%{transform:scale(1);opacity:.75}75%,100%{transform:scale(1.8);opacity:0}} .sake-register-photo__tips{display:inline-flex;align-items:center;gap:.375rem;background:#f4f4ef;padding:.375rem 1rem;border-radius:9999px;border:1px solid rgba(228,190,186,.2);font-size:.6875rem;font-weight:700;color:var(--sq-brand);letter-spacing:.05em;z-index:2} .sake-register-photo__tips .material-symbols-outlined{font-size:1rem} .sake-register-photo__guide{font-size:.6875rem;color:rgba(91,64,61,.8);text-align:center;line-height:1.6;font-weight:500;z-index:2} .sake-register-photo__guide strong{font-weight:700;color:var(--sq-brand)} .sake-register-photo__preview{position:absolute;inset:0;z-index:5;display:none;background:#f1f5f9;border-radius:2rem;overflow:hidden} .sake-register-photo__preview.is_visible{display:block} .sake-register-photo__preview img{width:100%;height:100%;object-fit:contain} .sake-register-photo__clear{position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;border-radius:9999px;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6;border:none;backdrop-filter:blur(8px)} .sake-register-photo__clear .material-symbols-outlined{font-size:1.125rem} .sake-register-section{padding:0 1.5rem} .sake-register-label{display:block;font-size:.6875rem;font-weight:700;color:rgba(91,64,61,.7);margin-left:.5rem;margin-bottom:.5rem;letter-spacing:.1em} .sake-register-label em{font-style:normal;color:var(--sq-brand);margin-left:.25rem} .sake-register-field{width:100%;background:#fff;border:none;box-shadow:inset 0 0 0 1px rgba(228,190,186,.2);border-radius:1rem;height:3.5rem;padding:0 1.25rem;font-size:.9375rem;color:var(--sq-text);outline:none;transition:box-shadow .2s;appearance:none;-webkit-appearance:none} .sake-register-field:focus{box-shadow:inset 0 0 0 2px rgba(178,4,17,.4)} .sake-register-field::placeholder{color:rgba(91,64,61,.35)} .sake-register-field--select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b403d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem} .sake-register-textarea{width:100%;background:#fff;border:none;box-shadow:inset 0 0 0 1px rgba(228,190,186,.2);border-radius:1.5rem;padding:1.25rem;font-size:.9375rem;color:var(--sq-text);outline:none;resize:none;transition:box-shadow .2s;font-family:inherit} .sake-register-textarea:focus{box-shadow:inset 0 0 0 2px rgba(178,4,17,.4)} .sake-register-textarea::placeholder{color:rgba(91,64,61,.35)} .sake-register-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} @media(max-width:480px){.sake-register-grid--responsive{grid-template-columns:1fr}} .sake-register-field-group{margin-bottom:1.5rem} .sake-register-error{display:block;font-size:.6875rem;color:var(--sq-brand);margin-top:.375rem;margin-left:.5rem;font-weight:500} .sake-register-field-icon{position:relative} .sake-register-field-icon .material-symbols-outlined{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:rgba(91,64,61,.5);font-size:1.25rem;pointer-events:none} .sake-register-brewery-free{display:none} .sake-register-brewery-free.is-active{display:block} .sake-register-brewery-back{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;color:var(--sq-brand);font-weight:700;cursor:pointer;margin-top:.375rem;background:none;border:none;padding:0} .sake-register-brewery-back .material-symbols-outlined{font-size:.875rem} .sake-register-charcount{font-size:.625rem;color:rgba(91,64,61,.4);font-family:monospace;text-align:right;margin-top:.25rem;margin-right:.5rem} .sake-register-tags{margin-bottom:1.5rem} .sake-register-tags__category{margin-bottom:1rem} .sake-register-tags__category-name{font-size:.6875rem;font-weight:700;color:rgba(91,64,61,.6);margin-bottom:.5rem;margin-left:.25rem} .sake-register-tags__list{display:flex;flex-wrap:wrap;gap:.5rem} .sake-register-tag-chip{display:inline-flex;align-items:center;padding:.375rem .875rem;border-radius:9999px;font-size:.75rem;font-weight:600;cursor:pointer;border:1px solid rgba(228,190,186,.3);background:#fff;color:var(--sq-text-sub);transition:all .15s;user-select:none} .sake-register-tag-chip:hover{border-color:rgba(178,4,17,.3)} .sake-register-tag-chip.is-selected{background:var(--sq-brand);color:#fff;border-color:var(--sq-brand);box-shadow:0 2px 6px rgba(178,4,17,.2)} .sake-register-tag-chip input[type="checkbox"]{display:none} .sake-register-hint{background:var(--sq-bg);border-radius:1.5rem;padding:1.25rem 1.5rem;margin:0 1.5rem;position:relative;overflow:hidden} .sake-register-hint__inner{display:flex;align-items:flex-start;gap:1rem;position:relative;z-index:1} .sake-register-hint__icon{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:9999px;background:#ffdfa0;display:flex;align-items:center;justify-content:center;color:#5c4300} .sake-register-hint__icon .material-symbols-outlined{font-size:1.25rem} .sake-register-hint__title{font-size:.875rem;font-weight:700;color:var(--sq-text);margin-bottom:.25rem} .sake-register-hint__text{font-size:.75rem;color:var(--sq-text-sub);line-height:1.6} .sake-register-hint__deco{position:absolute;right:-1rem;bottom:-1rem;color:var(--sq-text);opacity:.05} .sake-register-hint__deco .material-symbols-outlined{font-size:8rem} .sake-register-discoverer{background:linear-gradient(135deg,#ffdfa0,#f8bd2a);border:1px solid rgba(113,83,0,.2);border-radius:1.5rem;padding:1rem 1.25rem;margin:0 1.5rem;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 3px rgba(91,64,61,.06)} .sake-register-discoverer__user{display:flex;align-items:center;gap:.75rem} .sake-register-discoverer__avatar-wrap{position:relative;flex-shrink:0} .sake-register-discoverer__avatar{width:3rem;height:3rem;border-radius:9999px;border:2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.1);object-fit:cover} .sake-register-discoverer__avatar-badge{position:absolute;bottom:-.125rem;right:-.125rem;background:var(--sq-brand);color:#fff;border-radius:9999px;padding:.125rem;border:2px solid #fff;display:flex;align-items:center;justify-content:center} .sake-register-discoverer__avatar-badge .material-symbols-outlined{font-size:.75rem} .sake-register-discoverer__label{display:inline-block;font-size:.625rem;font-weight:700;background:rgba(255,255,255,.6);color:#715300;padding:.125rem .5rem;border-radius:.375rem;margin-bottom:.125rem} .sake-register-discoverer__name{font-size:.875rem;font-weight:700;color:#261a00} .sake-register-discoverer__note{font-size:.6875rem;color:#715300;font-weight:700;margin-top:.125rem} .sake-register-discoverer__crown{flex-shrink:0;width:3rem;height:3rem;border-radius:9999px;background:#fff;color:var(--sq-brand);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.05);border:1px solid rgba(178,4,17,.1)} .sake-register-discoverer__crown .material-symbols-outlined{font-size:1rem;margin-bottom:.0625rem} .sake-register-discoverer__crown span:last-child{font-size:.5rem;font-weight:700;line-height:1} .sake-register-submit{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;height:4rem;border-radius:9999px;border:none;background:linear-gradient(135deg,var(--sq-brand),#d62927);color:#fff;font-size:1.125rem;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(178,4,17,.3);transition:all .15s} .sake-register-submit:hover{box-shadow:0 12px 32px rgba(178,4,17,.4)} .sake-register-submit:active{transform:scale(.95)} .sake-register-submit:disabled{opacity:.5;cursor:not-allowed;box-shadow:none} .sake-register-submit .material-symbols-outlined{font-size:1.5rem} /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ のみログ詳細V2 (#210 #212 #215) FB Flow: 投稿者→本文→写真(overlay)→♥ballpit→tags→nav ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ndv2 { --ndv2-bg: var(--sq-bg); --ndv2-card: #ffffff; --ndv2-field: #fafaf5; --ndv2-text: var(--sq-text); --ndv2-text-sub: var(--sq-text-sub); --ndv2-text-muted: rgba(91, 64, 61, 0.5); --ndv2-accent: var(--sq-brand); --ndv2-accent-shadow: rgba(178, 4, 17, 0.2); --ndv2-gold: #f8bd2a; --ndv2-ai: #4f46e5; --ndv2-border: rgba(228, 190, 186, 0.2); --ndv2-border-m: rgba(228, 190, 186, 0.4); --ndv2-shadow: 0 1px 3px rgba(91, 64, 61, 0.06); --ndv2-r-card: 2rem; --ndv2-r-pill: 9999px; position: relative; } /* ━━━ A. 投稿者ヘッダー ━━━ */ .ndv2_postHeader { display: flex; align-items: center; gap: 0.625rem; padding: 1rem 1.5rem 0; } .ndv2_avatar { flex-shrink: 0; text-decoration: none; } .ndv2_avatarIcon { width: 2.75rem !important; height: 2.75rem !important; border-radius: 50% !important; font-size: 1rem !important; font-weight: 900 !important; box-shadow: 0 0 0 2px var(--ndv2-bg), 0 0 0 3px var(--ndv2-accent-shadow) !important; } .ndv2_userInfo { flex: 1; min-width: 0; } .ndv2_userName { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 700; } .ndv2_userName a { color: var(--ndv2-text); text-decoration: none; } .ndv2_userBadge { padding: 0.0625rem 0.375rem; background: linear-gradient(135deg, rgba(255,223,160,0.3), rgba(248,189,42,0.2)); border: 1px solid rgba(248,189,42,0.4); border-radius: var(--ndv2-r-pill); font-size: 0.5rem; font-weight: 700; color: #7c5a00; font-family: 'Spline Sans', sans-serif; } .ndv2_userMeta { font-size: 0.625rem; color: var(--ndv2-text-muted); display: flex; align-items: center; gap: 0.25rem; margin-top: 0.0625rem; } .ndv2_userMeta .material-symbols-outlined { font-size: 0.75rem; } .ndv2_postMenu { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ndv2-field); border: 1px solid var(--ndv2-border); color: var(--ndv2-text-sub); text-decoration: none; } .ndv2_postMenu .material-symbols-outlined { font-size: 1.125rem; } /* ━━━ B. 本文 ━━━ */ .ndv2_postBody { padding: 0.75rem 1.5rem; font-size: 0.875rem; line-height: 1.8; } .ndv2_postBodyText.is-truncated { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .ndv2_postBodyText.is-expanded { display: block; -webkit-line-clamp: unset; } .ndv2_moreLink { color: var(--ndv2-text-muted); cursor: pointer; font-weight: 700; font-size: 0.8125rem; background: none; border: none; padding: 0; font-family: inherit; } .ndv2_aiTag { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.125rem 0.4rem; background: rgba(79,70,229,0.08); border-radius: var(--ndv2-r-pill); font-size: 0.5rem; color: var(--ndv2-ai); font-weight: 700; margin-left: 0.25rem; } /* ━━━ C. 写真 + オーバーレイ ━━━ */ .ndv2_postPhoto { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; margin-top: 0.25rem; cursor: pointer; } .ndv2_postPhoto > img { width: 100%; height: 100%; object-fit: cover; } .ndv2_photoGradient { position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, rgba(26,28,25,0.08) 40%, rgba(26,28,25,0.45) 60%, rgba(26,28,25,0.82) 78%, rgba(26,28,25,0.95) 100% ); } .ndv2_photoRank { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; padding: 0.25rem 0.5rem; background: rgba(255,255,255,0.9); border: 1px solid var(--ndv2-border-m); border-radius: var(--ndv2-r-pill); font-size: 0.5625rem; font-weight: 700; color: #b45309; box-shadow: var(--ndv2-shadow); } .ndv2_photoContent { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 1.5rem 0.75rem; z-index: 2; } .ndv2_ovScene { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--ndv2-r-pill); font-size: 0.5625rem; color: rgba(255,255,255,0.9); backdrop-filter: blur(4px); margin-bottom: 0.375rem; } .ndv2_ovSakeName { font-family: 'Yuji Syuku', serif; font-size: 1.625rem; line-height: 1.25; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.3); } .ndv2_ovSakeName small { display: block; font-family: 'Noto Sans JP', sans-serif; font-size: 0.6875rem; font-weight: 500; color: rgba(255,255,255,0.6); margin-top: 0.125rem; } .ndv2_ovChips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.625rem; } .ndv2_ovChip { padding: 0.2rem 0.5rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--ndv2-r-pill); font-size: 0.5625rem; font-weight: 700; color: rgba(255,255,255,0.85); } .ndv2_ovChip.is-primary { background: var(--ndv2-accent); border-color: var(--ndv2-accent); color: #fff; box-shadow: 0 2px 6px rgba(178,4,17,0.25); } .ndv2_ovOchoko { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; } .ndv2_ovOchoko span { font-size: 0.875rem; } .ndv2_ovOchoko span.dim { opacity: 0.2; } .ndv2_ovOchokoLabel { font-size: 0.5625rem; font-weight: 700; color: var(--ndv2-gold); } /* ━━━ D. ♥ボールピットゾーン (#212) ━━━ */ .ndv2_heartZone { position: relative; margin: 0 1.5rem; background: var(--ndv2-card); border-radius: var(--ndv2-r-card); box-shadow: var(--ndv2-shadow); border: 1px solid var(--ndv2-border); padding: 1.25rem; overflow: hidden; min-height: 11rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ndv2_heartBallpit { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .ndv2_heartBall { position: absolute; border-radius: 50%; overflow: hidden; border: 2px solid; box-shadow: 0 2px 6px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; } .ndv2_heartBall--placeholder { color: rgba(255,255,255,0.7); } .ndv2_hzHeader { display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 10; } .ndv2_hzHeader h3 { font-size: 0.875rem; font-weight: 700; } .ndv2_hzRank { margin-left: auto; padding: 0.2rem 0.5rem; background: linear-gradient(135deg, rgba(180,83,9,0.08), rgba(248,189,42,0.1)); border: 1px solid rgba(180,83,9,0.2); border-radius: var(--ndv2-r-pill); font-size: 0.5625rem; font-weight: 700; color: #b45309; } .ndv2_hzCount { position: relative; z-index: 10; display: flex; align-items: baseline; gap: 0.375rem; margin: 0.25rem 0 0.5rem; } .ndv2_hzCount big { font-family: 'Spline Sans', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--ndv2-accent); line-height: 1; transition: transform 0.2s ease; } .ndv2_hzCount span { font-size: 0.75rem; font-weight: 700; color: var(--ndv2-text-muted); } .ndv2_hzHearts { display: flex; gap: 0.125rem; flex-wrap: wrap; position: relative; z-index: 10; } .ndv2_hzHearts .h { font-size: 1.125rem; } .ndv2_hzHearts .h.empty { opacity: 0.12; } .ndv2_hzTap { position: relative; z-index: 10; text-align: center; font-size: 0.5625rem; color: var(--ndv2-text-muted); margin-top: 0.5rem; animation: ndv2_tapPulse 2s ease-in-out infinite; } /* ♥バースト */ .ndv2_heartBurst { position: fixed; pointer-events: none; z-index: 9999; font-size: 3rem; animation: ndv2_heartBurstAnim 0.8s ease forwards; } /* ━━━ E. テイスティングカード ━━━ */ .ndv2_sectionCard { background: var(--ndv2-card); border-radius: var(--ndv2-r-card); box-shadow: var(--ndv2-shadow); border: 1px solid var(--ndv2-border); padding: 1.25rem; margin: 0.75rem 1.5rem 0; } .ndv2_sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .ndv2_sh h3 { font-size: 0.8125rem; font-weight: 700; display: flex; align-items: center; gap: 0.375rem; } .ndv2_tcPhase { margin-bottom: 0.625rem; } .ndv2_tcLabel { font-size: 0.5625rem; font-weight: 700; color: var(--ndv2-text-muted); margin-bottom: 0.25rem; } .ndv2_tcChips { display: flex; flex-wrap: wrap; gap: 0.25rem; } .ndv2_tcChip { padding: 0.25rem 0.5rem; border-radius: var(--ndv2-r-pill); font-size: 0.625rem; font-weight: 700; background: var(--ndv2-bg); border: 1px solid var(--ndv2-border-m); color: var(--ndv2-text-sub); } .ndv2_tcChip.is-primary { background: var(--ndv2-accent); border-color: var(--ndv2-accent); color: #fff; } .ndv2_tcOchoko { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.625rem; padding: 0.625rem; background: linear-gradient(135deg, rgba(255,223,160,0.15), rgba(178,4,17,0.05)); border: 1px solid rgba(248,189,42,0.25); border-radius: 1rem; } .ndv2_tcOchoko span { font-size: 1rem; } .ndv2_tcOchoko span.dim { opacity: 0.15; } .ndv2_tcOchokoLabel { font-size: 0.6875rem; font-weight: 700; color: #7c5a00; } .ndv2_tcOchokoLabel small { display: block; font-size: 0.5rem; font-weight: 400; color: var(--ndv2-text-muted); } /* ━━━ タグ・銘柄リンク ━━━ */ .ndv2_tagRow { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem 1.5rem 0; } .ndv2_tagPill { padding: 0.2rem 0.5rem; background: rgba(79,70,229,0.06); border: 1px solid rgba(79,70,229,0.15); border-radius: var(--ndv2-r-pill); font-size: 0.5625rem; color: var(--ndv2-ai); text-decoration: none; font-weight: 700; } .ndv2_sakeLink { display: flex; gap: 0.625rem; align-items: center; padding: 0.75rem 1rem; margin: 0.5rem 1.5rem; background: var(--ndv2-card); border: 1px solid var(--ndv2-border); border-radius: 1.25rem; box-shadow: var(--ndv2-shadow); text-decoration: none; color: var(--ndv2-text); } .ndv2_sakeLinkThumb { width: 2.75rem; height: 2.75rem; border-radius: 0.625rem; background: var(--ndv2-field); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .ndv2_sakeLinkInfo h4 { font-size: 0.75rem; font-weight: 700; } .ndv2_sakeLinkInfo p { font-size: 0.5625rem; color: var(--ndv2-text-muted); } /* ━━━ ナビカルーセル (#215) ━━━ */ .ndv2_navSec { padding: 1rem 1.5rem 0; } .ndv2_navScroll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding-bottom: 0.375rem; } .ndv2_nc { background: var(--ndv2-card); border: 1px solid var(--ndv2-border); border-radius: 1.25rem; overflow: hidden; box-shadow: var(--ndv2-shadow); text-decoration: none; color: var(--ndv2-text); } .ndv2_ncImg { width: 100%; aspect-ratio: 1/1; background: var(--ndv2-field); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; overflow: hidden; } .ndv2_ncImg > img { width: 100%; height: 100%; object-fit: cover; } .ndv2_ncBody { padding: 0.5rem; } .ndv2_ncBody h5 { font-size: 0.625rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ndv2_ncBody p { font-size: 0.5rem; color: var(--ndv2-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ndv2_ncH { font-size: 0.5rem; color: var(--ndv2-accent); margin-top: 0.25rem; font-family: 'Spline Sans', sans-serif; font-weight: 700; } /* ━━━ オーナーアクション ━━━ */ .ndv2_ownerActions { padding: 1rem 1.5rem; text-align: center; } .ndv2_deleteBtn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1rem; border: 1px solid var(--ndv2-border-m); border-radius: var(--ndv2-r-pill); background: none; color: var(--ndv2-text-muted); font-size: 0.6875rem; font-weight: 700; cursor: pointer; font-family: inherit; } .ndv2_deleteBtn .material-symbols-outlined { font-size: 1rem; } /* ━━━ ライトボックス ━━━ */ .ndv2_lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ndv2_lightbox.is-open { opacity: 1; visibility: visible; } .ndv2_lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 0.25rem; transform: scale(0.92); transition: transform 0.3s ease; pointer-events: none; } .ndv2_lightbox.is-open img { transform: scale(1); } .ndv2_lightboxClose { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; backdrop-filter: blur(4px); transition: background 0.15s; } .ndv2_lightboxClose:hover { background: rgba(255,255,255,0.25); } /* ━━━ スティッキーバー ━━━ */ .ndv2_stickyBar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; padding: 0.625rem 1.5rem; padding-bottom: max(0.625rem, env(safe-area-inset-bottom)); background: rgba(244,244,239,0.88); backdrop-filter: blur(20px); border-top: 1px solid var(--ndv2-border); display: flex; align-items: center; gap: 0.5rem; z-index: 100; } .ndv2_sbHeart { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; flex: 1; padding: 0.5rem 0.875rem; border: none; border-radius: var(--ndv2-r-pill); font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; background: var(--ndv2-accent); color: #fff; box-shadow: 0 4px 12px var(--ndv2-accent-shadow); } .ndv2_sbHeart:active:not(:disabled) { transform: scale(0.95); } .ndv2_sbHeart.is-disabled { opacity: 0.5; cursor: not-allowed; } .ndv2_sbHeart .material-symbols-outlined { font-size: 1rem; } .ndv2_sbCount { font-family: 'Spline Sans', sans-serif; font-size: 0.8125rem; } .ndv2_sbShare { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.5rem 0.875rem; border: 1px solid var(--ndv2-border-m); border-radius: var(--ndv2-r-pill); background: var(--ndv2-card); color: var(--ndv2-text-sub); font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; } .ndv2_sbShare .material-symbols-outlined { font-size: 1rem; } .ndv2_bottomSpacer { height: 4.5rem; } /* ━━━ アニメーション ━━━ */ @keyframes ndv2_ballFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes ndv2_tapPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes ndv2_heartBurstAnim { 0% { opacity: 1; transform: scale(0.3) translateY(0); } 40% { opacity: 1; transform: scale(1.4) translateY(-40px); } 100% { opacity: 0; transform: scale(0.8) translateY(-100px); } } @keyframes ndv2_heartSlotIn { 0% { transform: scale(2) translateY(-20px); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* ============================================================ 銘柄詳細 V2 (#39) ============================================================ */ /* ━━━ ヒーローエリア ━━━ */ .hero { position: relative; width: 100%; height: 18rem; overflow: hidden; background: var(--sq-text); } .hero-blur { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(16px) brightness(0.55); } .hero-img { position: relative; width: 100%; height: 100%; object-fit: contain; z-index: 1; } .hero-gradient { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, transparent 30%, rgba(26,28,25,0.85) 100%); } .hero-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 1rem 1.25rem; } .hero-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; margin-bottom: 0.4rem; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.25); border-radius: 9999px; font-size: 0.5625rem; font-weight: 700; color: rgba(255,255,255,0.9); } .hero-name { font-family: 'Yuji Syuku', serif; font-size: 2rem; font-weight: 400; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.4); line-height: 1.2; } .hero-sub { font-size: 0.6875rem; color: rgba(255,255,255,0.65); margin-top: 0.125rem; font-family: 'Noto Sans JP', sans-serif; } .hero-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 0.5rem; } .hero-heart { display: flex; align-items: center; gap: 0; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.25); border-radius: 9999px; padding: 0.3rem 0.375rem 0.3rem 0.625rem; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; overflow: visible; } .hh-micros { display: flex; align-items: center; gap: 0.0625rem; margin-right: 0.25rem; flex-shrink: 0; max-width: 6rem; overflow: hidden; } .hh-micro { font-size: 0.5rem; color: #f87171; flex-shrink: 0; display: inline-block; } .hh-micro-count { font-size: 0.5rem; font-weight: 700; color: #f87171; font-family: 'Spline Sans'; animation: sdv2_microPop 0.25s ease; } .hh-count { font-size: 0.625rem; font-weight: 700; color: rgba(255,255,255,0.92); font-family: 'Spline Sans'; margin-right: 0.375rem; } .hh-tap { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); border-radius: 9999px; padding: 0.3rem 0.5rem; transition: transform 0.1s; flex-shrink: 0; } .hh-tap .ms { font-size: 1.125rem; color: #f87171; } .hh-tap .hh-plus { font-size: 0.5rem; font-weight: 900; color: rgba(255,255,255,0.8); margin-left: 0.1rem; line-height: 1; } .hero-heart:active .hh-tap { transform: scale(0.88); } .hero-edit { position: absolute; top: 3rem; right: 0.75rem; z-index: 5; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); border-radius: 9999px; font-size: 0.5625rem; font-weight: 700; color: rgba(255,255,255,0.9); cursor: pointer; -webkit-tap-highlight-color: transparent; } .hero-edit .ms { font-size: 0.875rem; } .page-header { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0.75rem; position: absolute; top: 0; left: 0; right: 0; z-index: 10; } .hdr-btn { display: flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.25); color: #fff; cursor: pointer; } .hdr-btn .ms { font-size: 1.25rem; } /* ━━━ 統計バー ━━━ */ .stats-bar { display: flex; gap: 0; margin: 0.75rem 1rem 0; background: var(--bg-card, #ffffff); border-radius: 1.5rem; border: 1px solid rgba(228,190,186,0.2); box-shadow: 0 1px 3px rgba(91,64,61,0.06); overflow: hidden; } .stat-item { flex: 1; padding: 0.625rem 0.25rem; text-align: center; border-right: 1px solid rgba(228,190,186,0.2); } .stat-item:last-child { border-right: none; } .stat-num { font-family: 'Spline Sans', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--sq-brand); line-height: 1; } .stat-num.you { color: #4f46e5; } .stat-label { font-size: 0.4375rem; font-weight: 700; color: rgba(91,64,61,0.5); margin-top: 0.1875rem; } /* ━━━ セクションカード ━━━ */ .sec { margin: 0.75rem 1rem 0; background: var(--bg-card, #ffffff); border-radius: 1.5rem; border: 1px solid rgba(228,190,186,0.2); box-shadow: 0 1px 3px rgba(91,64,61,0.06); overflow: hidden; } .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 1rem 0.5rem; } .sec-head h3 { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; } .sec-head a { font-size: 0.625rem; color: var(--sq-brand); text-decoration: none; font-weight: 700; } /* ━━━ フォトギャラリー ━━━ */ .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 0 0.75rem; } .photo-cell { position: relative; aspect-ratio: 1/1; overflow: hidden; cursor: pointer; } .photo-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .photo-cell:hover img { transform: scale(1.04); } .photo-cell .badge-crown { position: absolute; top: 0.375rem; left: 0.375rem; z-index: 3; background: linear-gradient(135deg, #f8bd2a, #e8a010); border-radius: 9999px; padding: 0.15rem 0.4rem; font-size: 0.5rem; font-weight: 700; color: #7c4900; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .photo-cell .badge-challenger { position: absolute; top: 0.375rem; left: 0.375rem; z-index: 3; background: rgba(178,4,17,0.85); border-radius: 9999px; padding: 0.15rem 0.4rem; font-size: 0.5rem; font-weight: 700; color: #fff; } .photo-cell-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 50%); } .photo-cell-footer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 0.375rem 0.5rem; display: flex; align-items: center; justify-content: space-between; } .photo-user { font-size: 0.4375rem; font-weight: 700; color: rgba(255,255,255,0.9); display: flex; align-items: center; gap: 0.2rem; } .push-area { display: flex; align-items: center; gap: 0.25rem; } .push-btn { display: inline-flex; align-items: center; gap: 0.15rem; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); border-radius: 9999px; padding: 0.2rem 0.4rem; font-size: 0.5rem; font-weight: 700; color: rgba(255,255,255,0.95); cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; } .push-btn:active { transform: scale(0.95); } .push-btn.is-pushed { background: linear-gradient(135deg, rgba(248,189,42,0.35), rgba(255,220,100,0.5), rgba(248,189,42,0.35)); border-color: #f8bd2a; color: #ffe08a; background-size: 200% auto; animation: sdv2_pushBtnShine 1.2s linear; } .push-btn .ms { font-size: 0.6875rem; } .push-count { font-size: 0.4375rem; font-weight: 700; color: rgba(255,255,255,0.8); } .challenger-bar { padding: 0.375rem 0.75rem 0.5rem; border-top: 1px solid rgba(228,190,186,0.2); background: linear-gradient(135deg, rgba(178,4,17,0.03), #fafaf5); } .challenger-bar p { font-size: 0.5rem; font-weight: 700; color: var(--sq-brand); display: flex; align-items: center; gap: 0.25rem; } .cb-progress { height: 3px; background: rgba(228,190,186,0.3); border-radius: 2px; margin-top: 0.25rem; overflow: hidden; } .cb-fill { height: 100%; background: var(--sq-brand); border-radius: 2px; transition: width 0.4s ease; } /* 展開ギャラリー */ .gallery-expand { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1); background: #fafaf5; } .gallery-expand.is-open { max-height: 1200px; } .gallery-expand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px 0 0; } .ge-cell { position: relative; aspect-ratio: 1/1; overflow: hidden; cursor: pointer; } .ge-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .ge-cell:hover img { transform: scale(1.04); } .ge-cell .ge-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 45%); } .ge-cell .ge-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.3rem 0.5rem; display: flex; align-items: center; justify-content: space-between; } .ge-user { font-size: 0.4375rem; font-weight: 700; color: rgba(255,255,255,0.9); display: flex; align-items: center; gap: 0.15rem; } .gallery-close-btn { display: flex; align-items: center; justify-content: center; gap: 0.375rem; width: 100%; margin: 0; padding: 0.625rem; background: rgba(91,64,61,0.06); border: none; font-size: 0.625rem; font-weight: 700; color: rgba(91,64,61,0.5); cursor: pointer; font-family: inherit; transition: background 0.15s; } .gallery-close-btn:hover { background: rgba(91,64,61,0.1); } /* ━━━ 審議パネル ━━━ */ .proposal-block { margin: 0.75rem 1rem 0; background: linear-gradient(135deg, #eef2ff, #e0e7ff); border: 1px solid rgba(99,102,241,0.25); border-radius: 1.5rem; overflow: hidden; } .pb-trigger { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; } .pb-trigger .icon-wrap { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #4f46e5); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(99,102,241,0.3); } .pb-trigger .icon-wrap .ms { font-size: 0.875rem; color: #fff; } .pb-trigger .pb-info { flex: 1; min-width: 0; } .pb-trigger .pb-title { font-size: 0.75rem; font-weight: 700; color: #3730a3; display: flex; align-items: center; gap: 0.25rem; } .pb-badge { background: #6366f1; color: #fff; border-radius: 9999px; padding: 0.05rem 0.3rem; font-size: 0.5rem; font-weight: 700; font-family: 'Spline Sans'; } .pb-trigger .pb-sub { font-size: 0.5rem; color: rgba(55,48,163,0.65); margin-top: 0.1rem; } .pb-chevron { font-size: 1.25rem; color: #6366f1; flex-shrink: 0; transition: transform 0.3s ease; } .proposal-block.is-open .pb-chevron { transform: rotate(180deg); } .pb-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1); border-top: 0px solid rgba(99,102,241,0.15); } .proposal-block.is-open .pb-body { max-height: 600px; border-top-width: 1px; } .pb-body-inner { padding: 0.75rem 1rem 1rem; } /* 提案カード */ .p-card { background: #fff; border: 1px solid rgba(99,102,241,0.15); border-radius: 1rem; overflow: hidden; margin-bottom: 0.625rem; } .p-card:last-child { margin-bottom: 0; } .p-card-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(99,102,241,0.1); background: rgba(99,102,241,0.04); } .p-card-field { font-size: 0.5rem; font-weight: 700; color: #6366f1; background: rgba(99,102,241,0.1); border-radius: 9999px; padding: 0.1rem 0.4rem; } .p-card-user { font-size: 0.5rem; font-weight: 700; color: rgba(55,48,163,0.7); margin-left: auto; } /* Bug#237: p-card-meta（日時+理由）*/ .p-card-meta { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(99,102,241,0.1); background: rgba(99,102,241,0.03); } .p-card-date { display: flex; align-items: center; gap: 0.2rem; font-size: 0.4375rem; color: rgba(55,48,163,0.55); font-weight: 600; } .p-card-reason { font-size: 0.5rem; font-weight: 600; color: #4f46e5; background: rgba(99,102,241,0.07); border-radius: 0.5rem; padding: 0.2rem 0.45rem; line-height: 1.5; } .p-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; } .p-ba-col { padding: 0.5rem 0.75rem; } .p-ba-col.before { border-right: 1px solid rgba(99,102,241,0.12); background: rgba(239,68,68,0.04); } .p-ba-col.after { background: rgba(16,185,129,0.04); } .p-ba-label { font-size: 0.4375rem; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 0.1875rem; } .p-ba-col.before .p-ba-label { color: #ef4444; } .p-ba-col.after .p-ba-label { color: #059669; } .p-ba-val { font-size: 0.75rem; font-weight: 700; color: var(--sq-text); line-height: 1.4; } .p-ba-col.before .p-ba-val { text-decoration: line-through; color: rgba(91,64,61,0.5); } .p-voters { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-top: 1px solid rgba(99,102,241,0.1); } .p-voter-stack { display: flex; } .p-voter-av { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid #fff; margin-left: -0.625rem; display: flex; align-items: center; justify-content: center; font-size: 0.4375rem; font-weight: 900; color: #fff; flex-shrink: 0; position: relative; } .p-voter-av:first-child { margin-left: 0; } .p-voter-more { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(99,102,241,0.12); border: 2px solid #fff; margin-left: -0.625rem; display: flex; align-items: center; justify-content: center; font-size: 0.375rem; font-weight: 700; color: #6366f1; } .p-voter-label { font-size: 0.5rem; font-weight: 700; color: rgba(55,48,163,0.7); } .p-actions { display: flex; gap: 0.5rem; padding: 0 0.75rem 0.75rem; } .p-btn { flex: 1; padding: 0.5rem; border: none; border-radius: 0.75rem; font-size: 0.625rem; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 0.25rem; transition: all 0.15s; -webkit-tap-highlight-color: transparent; } .p-btn:active { transform: scale(0.97); } .p-btn.approve { background: linear-gradient(135deg, #059669, #10b981); color: #fff; box-shadow: 0 2px 6px rgba(16,185,129,0.3); } .p-btn.reject { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #dc2626; } .p-btn .ms { font-size: 0.875rem; } .reject-box { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 0.75rem; } .reject-box.is-open { max-height: 120px; } .reject-box-inner { padding-bottom: 0.75rem; } .reject-label { font-size: 0.5rem; font-weight: 700; color: #dc2626; display: flex; align-items: center; gap: 0.15rem; margin-bottom: 0.25rem; } .reject-label .req { font-size: 0.375rem; background: #dc2626; color: #fff; padding: 0.05rem 0.2rem; border-radius: 2px; } .reject-textarea { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid rgba(239,68,68,0.35); border-radius: 0.625rem; font-size: 0.6875rem; font-family: inherit; color: var(--sq-text); background: rgba(239,68,68,0.03); resize: none; line-height: 1.5; outline: none; } .reject-textarea:focus { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,0.1); } .reject-send { display: flex; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; margin-top: 0.25rem; background: #dc2626; color: #fff; border: none; border-radius: 0.625rem; padding: 0.4rem; font-size: 0.5625rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; } .reject-send:active { transform: scale(0.97); } /* ━━━ #239: 承認・却下 追加スタイル ━━━ */ /* 投票済みボタン */ .p-btn.is-voted { opacity: 0.6; cursor: default; pointer-events: auto; box-shadow: none; } .p-btn.approve.is-voted { background: linear-gradient(135deg, #059669, #10b981); color: #fff; border: none; } .p-btn.reject.is-voted { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #dc2626; } /* 却下理由リスト */ .p-reject-reasons { padding: 0.4rem 0.75rem 0.3rem; background: rgba(239,68,68,0.04); border-bottom: 1px solid rgba(239,68,68,0.12); } .p-rr-header { display: flex; align-items: center; gap: 0.2rem; font-size: 0.4375rem; font-weight: 700; color: #dc2626; margin-bottom: 0.2rem; } .p-rr-item { display: flex; align-items: flex-start; gap: 0.375rem; padding: 0.2rem 0; font-size: 0.5rem; color: rgba(55,48,163,0.75); border-top: 1px solid rgba(239,68,68,0.07); } .p-rr-user { flex-shrink: 0; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #ef4444; color: #fff; font-size: 0.4375rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .p-rr-text { flex: 1; line-height: 1.5; color: rgba(30,27,24,0.7); } /* 自分の提案メモ */ .p-own-proposal-note { display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.75rem 0.5rem; font-size: 0.4375rem; color: rgba(99,102,241,0.6); font-weight: 600; } /* reject-boxはmax-height修正 */ .reject-box.is-open { max-height: 160px; } /* トーストアニメーション */ @keyframes voteToastFade { 0% { opacity: 0; transform: translateX(-50%) translateY(8px); } 15% { opacity: 1; transform: translateX(-50%) translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-4px); } } /* ━━━ 銘柄スペック ━━━ */ .spec-grid { padding: 0 1rem 0.5rem; } .sg-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(228,190,186,0.2); } .sg-row:last-child { border-bottom: none; } .sg-cell { padding: 0.5rem 0.5rem 0.5rem 0; border-right: 1px solid rgba(228,190,186,0.2); } .sg-cell:last-child { border-right: none; padding-left: 0.75rem; } .sg-label { font-size: 0.4375rem; font-weight: 700; color: rgba(91,64,61,0.5); letter-spacing: 0.04em; margin-bottom: 0.1875rem; } .sg-val { font-size: 0.75rem; font-weight: 600; color: var(--sq-text); line-height: 1.3; } .sg-kana { font-size: 0.625rem; color: var(--sq-text-sub); font-weight: 500; } .sg-unknown { display: inline-flex; align-items: center; padding: 0.1rem 0.4rem; background: rgba(91,64,61,0.06); border: 1px solid rgba(91,64,61,0.15); border-radius: 9999px; font-size: 0.5rem; font-weight: 700; color: rgba(91,64,61,0.5); letter-spacing: 0.02em; } .spec-memo { margin: 0 1rem 0.75rem; padding: 0.625rem 0.75rem; background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(79,70,229,0.02)); border: 1px solid rgba(79,70,229,0.12); border-radius: 1rem; } .spec-memo-head { display: flex; align-items: center; gap: 0.3rem; font-size: 0.5625rem; font-weight: 700; color: #4f46e5; margin-bottom: 0.3125rem; } .spec-memo-body { font-size: 0.6875rem; line-height: 1.7; color: var(--sq-text-sub); } .tag-wrap { padding: 0 1rem 0.875rem; display: flex; flex-wrap: wrap; gap: 0.3rem; } .tag-pill { padding: 0.2rem 0.5rem; background: rgba(79,70,229,0.06); border: 1px solid rgba(79,70,229,0.15); border-radius: 9999px; font-size: 0.5625rem; color: #4f46e5; text-decoration: none; font-weight: 700; } /* ━━━ のみログフィード ━━━ */ .feed-tabs { display: flex; border-bottom: 2px solid rgba(228,190,186,0.2); padding: 0 1rem; } .feed-tab { padding: 0.625rem 0.25rem; margin-right: 1.25rem; font-size: 0.6875rem; font-weight: 700; color: rgba(91,64,61,0.5); cursor: pointer; border: none; background: none; position: relative; font-family: inherit; transition: color 0.15s; } .feed-tab::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--sq-brand); transform: scaleX(0); transition: transform 0.2s; } .feed-tab.is-active { color: var(--sq-brand); } .feed-tab.is-active::after { transform: scaleX(1); } .nomilog-list { padding: 0 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; } .nomilog-card { background: #fafaf5; border: 1px solid rgba(228,190,186,0.2); border-radius: 1.25rem; overflow: hidden; display: flex; cursor: pointer; transition: all 0.15s; -webkit-tap-highlight-color: transparent; height: 6.5rem; } .nomilog-card:active { transform: scale(0.99); } .nc-photo { width: 33%; flex-shrink: 0; position: relative; overflow: hidden; background: rgba(228,190,186,0.18); height: 100%; } .nc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .nc-photo.no-photo { display: flex; align-items: center; justify-content: center; font-size: 2rem; } .nc-body { flex: 1; min-width: 0; padding: 0.625rem 0.75rem; display: flex; flex-direction: column; justify-content: space-between; } .nc-header { display: flex; align-items: center; gap: 0.375rem; } .nc-avatar { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: linear-gradient(135deg, var(--sq-brand), #d4263a); display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 900; color: #fff; flex-shrink: 0; overflow: hidden; } .nc-avatar img { width: 100%; height: 100%; object-fit: cover; } .nc-name { font-size: 0.6875rem; font-weight: 700; } .nc-meta { font-size: 0.5rem; color: rgba(91,64,61,0.5); margin-left: auto; white-space: nowrap; } .nc-text { font-size: 0.6875rem; line-height: 1.6; color: var(--sq-text-sub); margin-top: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .nc-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; } .nc-ochoko { font-size: 0.5625rem; } .nc-heart { font-size: 0.5rem; font-weight: 700; color: var(--sq-brand); margin-left: auto; font-family: 'Spline Sans'; } /* ━━━ CTA ━━━ */ .write-cta { margin: 0 1rem 0.75rem; background: linear-gradient(135deg, var(--sq-brand), #d4263a); border-radius: 1.5rem; padding: 1rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 16px rgba(178,4,17,0.2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .write-cta p { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.85); } .write-cta strong { font-size: 0.9375rem; font-weight: 900; color: #fff; display: block; margin-top: 0.125rem; } .write-cta .cta-btn { background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); border-radius: 9999px; padding: 0.5rem 0.875rem; color: #fff; font-size: 0.6875rem; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 0.25rem; } .cta-btn .ms { font-size: 1rem; } /* ━━━ 修正提案ボトムシート ━━━ */ .ep-backdrop { position: fixed; inset: 0; z-index: 8000; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .ep-backdrop.is-open { opacity: 1; visibility: visible; } .ep-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8100; background: #fff; border-radius: 1.25rem 1.25rem 0 0; max-height: 92vh; overflow-y: auto; padding: 0 0 env(safe-area-inset-bottom, 1rem); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -4px 32px rgba(0,0,0,0.18); } .ep-sheet.is-open { transform: translateY(0); } .ep-handle { width: 2.5rem; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.12); margin: 0.625rem auto 0; } .ep-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.07); } .ep-header-left { display: flex; align-items: center; gap: 0.5rem; } .ep-title { font-size: 0.75rem; font-weight: 800; } .ep-sub { font-size: 0.4375rem; color: var(--sq-brand); font-weight: 700; margin-top: 0.1rem; } .ep-close { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(0,0,0,0.06); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgba(91,64,61,0.5); } .ep-close .material-symbols-outlined { font-size: 1rem; } .ep-current-card { margin: 0.75rem 1rem 0; background: linear-gradient(135deg, rgba(178,4,17,0.03), rgba(248,240,238,0.6)); border: 1px solid rgba(178,4,17,0.1); border-radius: 0.5rem; padding: 0.5rem 0.75rem; } .ep-current-label { font-size: 0.4375rem; font-weight: 700; color: var(--sq-brand); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.375rem; } .ep-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); } .ep-row:last-child { border-bottom: none; } .ep-field { font-size: 0.4375rem; color: rgba(91,64,61,0.5); font-weight: 500; width: 4.5rem; flex-shrink: 0; } .ep-val { font-size: 0.5rem; font-weight: 700; } .ep-section-title { display: flex; align-items: center; gap: 0.3rem; margin: 0.875rem 1rem 0.5rem; font-size: 0.5rem; font-weight: 800; color: rgba(91,64,61,0.5); } .ep-form { padding: 0 1rem 7rem; } .ep-field-group { margin-bottom: 0.75rem; } .ep-label { display: flex; align-items: center; gap: 0.25rem; font-size: 0.5rem; font-weight: 700; margin-bottom: 0.25rem; } .ep-required { font-size: 0.375rem; font-weight: 700; color: #fff; background: var(--sq-brand); border-radius: 2px; padding: 0 0.25rem; line-height: 1.6; } .ep-input { width: 100%; padding: 0.5rem 0.625rem; background: rgba(0,0,0,0.04); border: 1.5px solid rgba(0,0,0,0.1); border-radius: 0.5rem; font-size: 0.5625rem; font-family: inherit; appearance: none; box-sizing: border-box; transition: border-color 0.15s; } .ep-input:focus { outline: none; border-color: var(--sq-brand); background: #fff; } .ep-textarea { width: 100%; padding: 0.5rem 0.625rem; background: rgba(0,0,0,0.04); border: 1.5px solid rgba(0,0,0,0.1); border-radius: 0.5rem; font-size: 0.5rem; font-family: inherit; resize: vertical; box-sizing: border-box; transition: border-color 0.15s; } .ep-textarea:focus { outline: none; border-color: var(--sq-brand); background: #fff; } .ep-inline-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .ep-inline-row:last-child { border-bottom: none; } .ep-inline-label { width: 4.5rem; flex-shrink: 0; font-size: 0.4375rem; font-weight: 700; color: rgba(91,64,61,0.5); } .ep-inline-input { flex: 1; padding: 0.3rem 0.5rem; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 0.375rem; font-size: 0.5625rem; font-family: inherit; background: rgba(0,0,0,0.03); transition: border-color 0.15s, background 0.15s; min-width: 0; } .ep-inline-input:focus { outline: none; background: #fff; border-color: var(--sq-brand); box-shadow: 0 0 0 2px rgba(178,4,17,0.1); } .ep-unknown-pill { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem 0.4rem; border-radius: 999px; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.1); font-size: 0.4375rem; font-weight: 700; color: rgba(91,64,61,0.5); cursor: pointer; white-space: nowrap; font-family: inherit; transition: background 0.15s; } .ep-unknown-pill.is-unknown { background: rgba(178,4,17,0.08); border-color: var(--sq-brand); color: var(--sq-brand); } .ep-chip-group { display: flex; flex-wrap: wrap; gap: 0.375rem; } .ep-chip { padding: 0.3rem 0.625rem; border-radius: 999px; border: 1.5px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.04); font-size: 0.5rem; font-weight: 700; color: rgba(91,64,61,0.5); cursor: pointer; font-family: inherit; transition: all 0.15s; } .ep-chip.is-selected { background: var(--sq-brand); border-color: var(--sq-brand); color: #fff; box-shadow: 0 2px 8px rgba(178,4,17,0.25); } .ep-brewery-toggle { width: 100%; display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.625rem; background: rgba(0,0,0,0.04); border: 1.5px solid rgba(0,0,0,0.1); border-radius: 0.625rem; cursor: pointer; font-family: inherit; font-size: 0.5rem; font-weight: 700; transition: background 0.15s; } .ep-brewery-toggle:hover { background: rgba(178,4,17,0.05); border-color: rgba(178,4,17,0.2); } .ep-brewery-body { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.33, 1, 0.68, 1), padding 0.25s; padding: 0 0.25rem; } .ep-brewery-body.is-open { max-height: 36rem; padding: 0.5rem 0.25rem; } .ep-brewery-chevron.is-open { transform: rotate(180deg); } .ep-region-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.25rem; } .ep-region-tab { padding: 0.2rem 0.5rem; border-radius: 999px; border: 1.5px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.04); font-size: 0.4375rem; font-weight: 700; color: rgba(91,64,61,0.5); cursor: pointer; font-family: inherit; transition: all 0.15s; } .ep-region-tab.is-active { background: rgba(178,4,17,0.08); border-color: var(--sq-brand); color: var(--sq-brand); } .ep-pref-panel { display: none; flex-wrap: wrap; gap: 0.375rem; width: 100%; } .ep-pref-panel.is-active { display: flex; } .ep-brewery-search-wrap { display: flex; align-items: center; gap: 0.375rem; background: rgba(0,0,0,0.04); border: 1.5px solid rgba(0,0,0,0.1); border-radius: 0.5rem; padding: 0.3rem 0.5rem; transition: border-color 0.15s; } .ep-brewery-search-wrap:focus-within { border-color: var(--sq-brand); background: #fff; box-shadow: 0 0 0 2px rgba(178,4,17,0.1); } .ep-brewery-search-input { flex: 1; border: none; background: transparent; font-size: 0.5rem; font-family: inherit; outline: none; } .ep-brewery-search-input::placeholder { color: rgba(91,64,61,0.5); } .ep-brewery-loading { display: flex; align-items: center; gap: 0.375rem; font-size: 0.4375rem; color: rgba(91,64,61,0.5); padding: 0.375rem 0; } .ep-brewery-spinner { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid rgba(178,4,17,0.2); border-top-color: var(--sq-brand); animation: sdv2_spin 0.7s linear infinite; } .ep-xp-preview { display: flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #fff7ed, #fef3c7); border: 1px solid rgba(248,189,42,0.4); border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: 0.875rem; } .ep-submit { width: 100%; padding: 0.75rem; background: linear-gradient(135deg, var(--sq-brand), #c41822); border: none; border-radius: 0.75rem; cursor: pointer; font-size: 0.625rem; font-weight: 700; color: #fff; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 0.375rem; box-shadow: 0 4px 16px rgba(178,4,17,0.3); transition: transform 0.1s, box-shadow 0.1s; } .ep-submit:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(178,4,17,0.25); } .ep-submit.is-sent { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 16px rgba(16,185,129,0.3); } /* ━━━ ライトボックス ━━━ */ .sdv2-lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; cursor: pointer; } .sdv2-lightbox.is-open { opacity: 1; visibility: visible; } .sdv2-lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 0.25rem; transform: scale(0.92); transition: transform 0.3s; pointer-events: none; } .sdv2-lightbox.is-open img { transform: scale(1); } .lb-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; backdrop-filter: blur(4px); } .lb-close .ms { font-size: 1.25rem; } /* ━━━ V2 アニメーション ━━━ */ @keyframes sdv2_microPop { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes sdv2_pushBtnShine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes sdv2_spin { to { transform: rotate(360deg); } } .float-heart { position: fixed; pointer-events: none; z-index: 9999; font-size: 1.5rem; line-height: 1; will-change: transform, opacity; animation: sdv2_floatUp var(--dur, 1.2s) cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes sdv2_floatUp { 0% { opacity: 1; transform: translate(0px, 0px) scale(0.55) rotate(0deg); } 12% { opacity: 1; transform: translate(0px, -20px) scale(1.2) rotate(0deg); } 55% { opacity: 0.85; transform: translate(var(--dx, 0px), -90px) scale(0.95) rotate(var(--rot, 0deg)); } 100% { opacity: 0; transform: translate(calc(var(--dx,0px) * 1.7), -180px) scale(0.65) rotate(calc(var(--rot,0deg) * 1.8)); } } .push-burst { position: fixed; pointer-events: none; z-index: 9998; width: 0; height: 0; } .push-particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; transform-origin: 0 0; animation: sdv2_particleFly var(--pd, 1.2s) ease-out forwards; } @keyframes sdv2_particleFly { 0% { transform: translate(0,0) scale(1); opacity: 1; } 60% { opacity: 0.8; } 100% { transform: translate(var(--px,0px), var(--py,0px)) scale(0.1); opacity: 0; } } .push-star-burst { position: fixed; pointer-events: none; z-index: 9997; font-size: 2.5rem; font-weight: 900; color: #f8bd2a; text-shadow: 0 0 20px rgba(248,189,42,0.8); animation: sdv2_starBurst 1.5s cubic-bezier(0.22,1,0.36,1) forwards; white-space: nowrap; } @keyframes sdv2_starBurst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3); } 25% { opacity: 1; transform: translate(-50%,-55%) scale(1.3); } 70% { opacity: 1; transform: translate(-50%,-65%) scale(1.0); } 100% { opacity: 0; transform: translate(-50%,-80%) scale(0.85); } } .push-label { position: fixed; pointer-events: none; z-index: 9999; font-family: 'Spline Sans', sans-serif; font-size: 1.1rem; font-weight: 900; color: #f8bd2a; text-shadow: 0 2px 8px rgba(0,0,0,0.4); animation: sdv2_pushLabel 2.6s cubic-bezier(0.34,1.56,0.64,1) forwards; } @keyframes sdv2_pushLabel { 0% { opacity: 1; transform: translate(-50%,-50%) scale(0.5); } 20% { opacity: 1; transform: translate(-50%,-70%) scale(1.2); } 60% { opacity: 1; transform: translate(-50%,-90%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%,-120%) scale(0.9); } } @keyframes sdv2_cellFlash { 0%,100% { filter: brightness(1); } 25% { filter: brightness(1.5) saturate(1.8); } 50% { filter: brightness(1.2); } } .photo-cell.is-flashing { animation: sdv2_cellFlash 0.5s ease; } .bottom-spacer { height: 1.5rem; } /* ━━━ Bug#234: 推しボタン disabled 状態 ━━━ */ .push-btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } /* ━━━ Bug#235: 不明ボタン ON 時のアフォーダンス ━━━ */ /* スライダー無効 */ .sake-v2-slider-track.is-disabled { opacity: 0.32; pointer-events: none; cursor: not-allowed; position: relative; } .sake-v2-slider-track.is-disabled::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -45deg, transparent, transparent 4px, rgba(91,64,61,0.08) 4px, rgba(91,64,61,0.08) 8px ); border-radius: 0.75rem; pointer-events: none; } /* 使用米ゾーン無効 */ .sake-v2-disabled-zone { opacity: 0.32; pointer-events: none; cursor: not-allowed; position: relative; } .sake-v2-disabled-zone::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -45deg, transparent, transparent 4px, rgba(91,64,61,0.08) 4px, rgba(91,64,61,0.08) 8px ); border-radius: 0.75rem; pointer-events: none; } /* ━━━ Bug#234 Bug4: のみログ詳細 チャンピオンバナー ━━━ */ .ndv2_championBanner { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0.75rem 0; padding: 0.625rem 0.875rem; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid rgba(245,158,11,0.35); border-radius: 1rem; box-shadow: 0 2px 8px rgba(245,158,11,0.12); } .ndv2_cbIcon { width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #f59e0b, #d97706); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(245,158,11,0.3); } .ndv2_cbIcon .material-symbols-outlined { font-size: 1rem; color: #fff; } .ndv2_cbInfo { flex: 1; min-width: 0; } .ndv2_cbTitle { font-size: 0.75rem; font-weight: 700; color: #92400e; } .ndv2_cbSub { font-size: 0.5rem; color: rgba(146,64,14,0.7); margin-top: 0.125rem; } .ndv2_cbAction { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(245,158,11,0.15); color: #d97706; flex-shrink: 0; text-decoration: none; transition: background 0.15s; } .ndv2_cbAction:hover { background: rgba(245,158,11,0.25); } .ndv2_cbAction .material-symbols-outlined { font-size: 0.875rem; } /* ━━━━━━━━ 冒険の地図 BottomSheet (#247 + #256修正) ━━━━━━━━ */ .bs-back { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .38); } .bs-back.is-open { display: block; } .bs-sheet { /* カードエリア(7rem) + フッター(3rem) の上に表示 */ position: fixed; bottom: 10rem; left: 50%; transform: translateX(-50%) translateY(calc(100% + 10rem)); width: 100%; max-width: 500px; max-height: calc(100vh - 13rem); background: #fff; border-radius: 20px; z-index: 3100; transition: transform .35s cubic-bezier(.32,.72,0,1); overflow-y: auto; } .bs-sheet.is-open { transform: translateX(-50%) translateY(0); } .bs-handle { width: 40px; height: 4px; background: #e5e7eb; border-radius: 9999px; margin: .75rem auto .25rem; } .bs-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem .5rem; } .bs-ico { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; } .bs-nm { font-size: .9375rem; font-weight: 900; margin: 0; color: #1a1a1a; } .bs-addr { font-size: .625rem; color: #6b7280; margin-top: .125rem; } .bs-stats { display: flex; gap: 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; margin: .25rem 0; } .bs-st { flex: 1; text-align: center; padding: .625rem .5rem; border-right: 1px solid #f3f4f6; } .bs-st:last-child { border-right: none; } .bs-st-n { font-size: .9375rem; font-weight: 900; color: #1a1a1a; line-height: 1.2; } .bs-st-l { font-size: .5rem; color: #9ca3af; margin-top: .125rem; } .bs-acts { display: flex; gap: .5rem; padding: .625rem 1rem .75rem; } .bs-b { flex: 1; padding: .625rem .5rem; border-radius: 1rem; font-size: .625rem; font-weight: 700; font-family: inherit; cursor: pointer; border: 1.5px solid #e5e7eb; background: #f9fafb; color: #374151; } .bs-b.p { background: linear-gradient(135deg, #1a1a1a, #333); border-color: transparent; color: #fff; text-decoration: none; display: flex; align-items: center; justify-content: center; } .bs-b.o { background: linear-gradient(135deg, rgba(248,189,42,.12), rgba(248,189,42,.05)); border-color: rgba(248,189,42,.4); color: #7c5a00; } /* 推しバロメータ */ #bsOshiMeter { overflow: hidden; max-height: 0; transition: max-height .4s cubic-bezier(.32,.72,0,1), opacity .3s; opacity: 0; margin: .375rem 1rem .25rem; } #bsOshiMeter.visible { max-height: 5.5rem; opacity: 1; } .oshi-m-card { background: linear-gradient(135deg, rgba(248,189,42,.09), rgba(248,189,42,.03)); border: 1.5px solid rgba(248,189,42,.3); border-radius: 1rem; padding: .6rem .875rem; } .oshi-m-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; } .oshi-m-lbl { font-size: .5625rem; font-weight: 900; color: #7c5a00; } .oshi-m-cnt { font-size: .6875rem; font-weight: 700; color: #7c5a00; } .oshi-bar-bg { height: .875rem; background: rgba(248,189,42,.12); border-radius: 9999px; overflow: hidden; } .oshi-bar-fill { height: 100%; width: 0%; border-radius: 9999px; background: linear-gradient(90deg, #f59e0b, #ffd700); transition: width .2s cubic-bezier(.22,.6,.36,1); } .oshi-bar-fill.full { background: linear-gradient(90deg, #f59e0b, #fff176, #f59e0b); animation: oshiBarFull .4s ease-out; } @keyframes oshiBarFull { 0% { filter: brightness(1); } 40% { filter: brightness(2.2); } 100% { filter: brightness(1.3); } } /* 推し確定オーバーレイ */ #oshiOvl { position: fixed; inset: 0; z-index: 4500; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .35s; cursor: pointer; } #oshiOvl.show { opacity: 1; pointer-events: all; } .oshi-oc { background: linear-gradient(135deg, #fff, #fffbea); border-radius: 2rem; padding: 2rem 2.5rem; text-align: center; box-shadow: 0 8px 40px rgba(248,189,42,.5); animation: ocPop .45s cubic-bezier(.32,.72,0,1); max-width: 300px; } @keyframes ocPop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } .oshi-oc-em { font-size: 3.5rem; display: block; margin-bottom: .5rem; animation: ocSpin .8s ease-out; } @keyframes ocSpin { 0% { transform: rotate(-20deg) scale(.5); } 60% { transform: rotate(8deg) scale(1.1); } 100% { transform: rotate(0); } } .oshi-oc-t { font-size: 1.375rem; font-weight: 900; color: #7c5a00; margin-bottom: .375rem; } .oshi-oc-s { font-size: .6875rem; color: #6b7280; } .oshi-oc-tap { font-size: .5rem; color: #9ca3af; margin-top: 1.25rem; animation: bsinkBlink 1.2s ease-in-out infinite; } @keyframes bsinkBlink { 0%,100% { opacity:.6; } 50% { opacity:1; } } /* ★ライズアニメーション */ .oshi-star { position: fixed; pointer-events: none; z-index: 9999; font-size: var(--sz, 1rem); animation: starRise var(--dur, 4.1s) ease-out forwards; filter: drop-shadow(0 0 6px rgba(248,189,42,.7)); } @keyframes starRise { 0% { transform: translate(0,0) scale(.3) rotate(var(--rot,0deg)); opacity: 0; } 12% { transform: translate(calc(var(--dx)*.1),calc(var(--dy)*.1)) scale(1.3) rotate(calc(var(--rot)*-.5)); opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) scale(.4); opacity: 0; } } /* ♥ライズアニメーション */ .rising-heart { position: fixed; pointer-events: none; z-index: 9999; font-size: var(--sz, 1rem); animation: heartRise var(--dur, 4.1s) ease-out forwards; filter: drop-shadow(0 0 4px rgba(236,72,153,.5)); } @keyframes heartRise { 0% { transform: translate(0,0) scale(.3) rotate(var(--rot,-10deg)); opacity: 0; } 12% { transform: translate(calc(var(--dx)*.1),calc(var(--dy)*.1)) scale(1.3) rotate(calc(var(--rot)*-.5)); opacity: 1; } 100% { transform: translate(var(--dx),var(--dy)) scale(.4); opacity: 0; } } /* ━━━━━━━━ /冒険の地図 ━━━━━━━━ */ /* ━━━━━━━━ Sprint B: BottomSheet強化 (#247) ━━━━━━━━ */ /* チップ */ .bs-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; } .bs-chip { font-size: .5rem; font-weight: 600; padding: .125rem .5rem; border-radius: 9999px; white-space: nowrap; } .bs-chip.vis { background: rgba(79,70,229,.08); color: #4f46e5; border: 1px solid rgba(79,70,229,.2); } .bs-chip.br { background: rgba(180,30,30,.06); color: #b41e1e; border: 1px solid rgba(180,30,30,.15); } /* 声セクション */ .bs-voices { padding: .375rem 1rem; } .bs-v { display: flex; gap: .5rem; align-items: flex-start; padding: .375rem 0; border-bottom: 1px solid #f3f4f6; } .bs-v:last-child { border-bottom: none; } .bs-va { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .625rem; font-weight: 800; color: #fff; } .bs-vt { font-size: .625rem; color: #374151; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bs-vm { font-size: .4375rem; color: #9ca3af; margin-top: .125rem; } /* 連絡先リンク */ .bs-links { display: flex; gap: .5rem; padding: .375rem 1rem .75rem; border-top: 1px solid #f3f4f6; } .bs-link-item { display: flex; align-items: center; gap: .25rem; font-size: .5625rem; color: #6b7280; text-decoration: none; padding: .25rem .625rem; border: 1px solid #e5e7eb; border-radius: .625rem; transition: background .2s; } .bs-link-item:hover { background: #f9fafb; color: #374151; } /* ━━━━━━━━ /Sprint B ━━━━━━━━ */ /* ━━━━━━━━ Sprint D: 蔵番チップ (#247) ━━━━━━━━ */ .bs-chip.kb { background: linear-gradient(135deg, rgba(217,119,6,.1), rgba(245,158,11,.05)); color: #92400e; border: 1px solid rgba(217,119,6,.25); font-weight: 700; } .bs-chip.nl { background: rgba(5,150,105,.06); color: #047857; border: 1px solid rgba(5,150,105,.2); } /* ━━━━━━━━ /Sprint D ━━━━━━━━ */ /* ━━━━━━━━ Sprint C: 声が浮かぶ地図 (#247) ━━━━━━━━ */ .map-voice-icon { background: none !important; border: none !important; } .map-voice-bubble { background: #fff; border-radius: .75rem; padding: .375rem .625rem; box-shadow: 0 2px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04); max-width: 180px; pointer-events: none; animation: voiceFloat 8s ease-in-out infinite; opacity: 0; animation-fill-mode: both; } .mvb-text { font-size: .5625rem; color: #1f2937; line-height: 1.4; font-weight: 500; } .mvb-meta { font-size: .4375rem; color: #9ca3af; margin-top: .125rem; } @keyframes voiceFloat { 0% { opacity: 0; transform: translateY(8px); } 8% { opacity: .92; transform: translateY(0); } 85% { opacity: .92; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-14px); } } /* ━━━━━━━━ Sprint E: 領土制覇ツールチップ (#247) ━━━━━━━━ */ .territory-tooltip { background: rgba(0,0,0,.8) !important; color: #fff !important; border: none !important; border-radius: .5rem !important; font-size: .625rem !important; font-weight: 600 !important; padding: .25rem .5rem !important; box-shadow: 0 2px 8px rgba(0,0,0,.2) !important; } .territory-tooltip::before { border-top-color: rgba(0,0,0,.8) !important; } /* ━━━━━━━━ /Sprint C+E ━━━━━━━━ */ /* ━━━━━━━━ Sprint F: 酒蔵登録モーダル (#247) ━━━━━━━━ */ .brm-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; } .brm-overlay.is-open { opacity: 1; pointer-events: auto; } .brm-modal { background: #fff; border-radius: 1rem; width: 90%; max-width: 420px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); transform: translateY(30px); transition: transform .3s; } .brm-overlay.is-open .brm-modal { transform: translateY(0); } .brm-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid #f3f4f6; } .brm-header h3 { font-size: .875rem; font-weight: 700; margin: 0; } .brm-close { background: none; border: none; font-size: 1.125rem; color: #9ca3af; cursor: pointer; padding: .25rem; } .brm-body { padding: 1rem; } .brm-desc { font-size: .625rem; color: #6b7280; margin: 0 0 .5rem; } .brm-coords { font-size: .5625rem; color: #059669; font-weight: 600; margin-bottom: .75rem; padding: .25rem .5rem; background: rgba(5,150,105,.06); border-radius: .5rem; } .brm-form { display: flex; flex-direction: column; gap: .5rem; } .brm-input { border: 1px solid #e5e7eb; border-radius: .625rem; padding: .5rem .75rem; font-size: .75rem; color: #1f2937; outline: none; transition: border-color .2s; } .brm-input:focus { border-color: #059669; } .brm-textarea { min-height: 60px; resize: vertical; } .brm-submit { background: #b41e1e; color: #fff; border: none; border-radius: .625rem; padding: .625rem; font-size: .75rem; font-weight: 700; cursor: pointer; transition: background .2s, opacity .2s; } .brm-submit:disabled { opacity: .5; cursor: not-allowed; } .brm-submit:not(:disabled):hover { background: #991b1b; } /* ━━━━━━━━ /Sprint F ━━━━━━━━ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Home v3 — Strangler Fig CSS (Feature Flag: FEATURE_HOME_V3) Added: 2026-05-01 | Issue: #373 NOTE: Do NOT delete existing home CSS above. These classes coexist with the legacy ones until v3 migration is complete. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ─── Header ─── */ .hv2-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--sq-card); border-bottom: 1px solid var(--sq-border); position: sticky; top: 0; z-index: 50; } .hv2-header img { height: 22px; } .hv2-header-icons { display: flex; gap: 12px; } .hv2-header-icons .mi { font-size: 24px; color: var(--sq-text-sub); cursor: pointer; } /* ─── Welcome Card ─── */ .hv2-welcome { margin: 12px 16px 0; padding: 14px 16px; background: var(--sq-card); border-radius: 16px; box-shadow: 0 2px 10px rgba(91,64,61,0.06); display: flex; align-items: center; gap: 12px; } .hv2-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--sq-washi); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 2px solid var(--sq-border); } .hv2-avatar img { width: 100%; height: 100%; object-fit: cover; } .hv2-welcome-info { flex: 1; min-width: 0; } .hv2-greeting { font-size: 15px; font-weight: 900; } .hv2-stats-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; font-size: 11px; font-weight: 700; color: var(--sq-text-sub); } .hv2-stats-row span { white-space: nowrap; } .hv2-xp-track { height: 4px; background: var(--sq-border); border-radius: 99px; overflow: hidden; margin-top: 6px; } .hv2-xp-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sq-brand), var(--sq-brand-lt)); } /* ─── Section Header ─── */ .hv2-sec { display: flex; align-items: center; gap: 8px; margin: 16px 16px 8px; } .hv2-sec-bar { width: 4px; height: 20px; border-radius: 99px; background: var(--sq-brand); flex-shrink: 0; } .hv2-sec-title { font-size: 15px; font-weight: 900; } .hv2-sec-action { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--sq-brand); text-decoration: none; display: flex; align-items: center; gap: 2px; } .hv2-sec--link { text-decoration: none; color: inherit; cursor: pointer; transition: opacity 0.15s; } .hv2-sec--link:active { opacity: 0.7; } /* ─── Write Nomilog CTA (premium card) ─── */ .hv2-write-card { display: block; margin: 0 16px 10px; border-radius: 16px; overflow: hidden; background: var(--sq-card); box-shadow: 0 4px 16px rgba(91,64,61,0.08); text-decoration: none; color: inherit; transition: transform 0.15s; border: none; outline: none; } .hv2-write-card:active { transform: scale(0.98); } .hv2-write-header { background: linear-gradient(135deg, var(--sq-brand) 40%, var(--sq-brand-lt)); color: #fff; padding: 14px 16px; } .hv2-write-title { font-size: 15px; font-weight: 900; } .hv2-write-desc { font-size: 11px; opacity: 0.8; margin-top: 2px; } .hv2-write-search { display: flex; align-items: center; gap: 8px; margin: 12px 16px 14px; padding: 10px 14px; background: var(--sq-bg); border-radius: 99px; border: 1px solid var(--sq-border); } .hv2-write-placeholder { flex: 1; font-size: 13px; color: var(--sq-text-mute); } .hv2-write-cta-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; margin: 0; font-size: 14px; font-weight: 900; color: var(--sq-brand); background: rgba(178,4,17,0.04); border-top: 1px solid var(--sq-border); text-decoration: none; } /* Chips */ .hv2-write-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 12px; } .hv2-write-chip { padding: 6px 14px; border-radius: 99px; border: 1.5px solid var(--sq-border); background: var(--sq-card); color: var(--sq-text); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all 0.15s; } .hv2-write-chip.is-selected { background: var(--sq-brand); color: #fff; border-color: var(--sq-brand); transform: scale(1.05); } /* Zukan variant */ .hv2-write-header--zukan { background: linear-gradient(135deg, #1e1b4b 40%, #4f46e5); } .hv2-write-card--zukan .hv2-write-cta-btn { color: #4f46e5; background: rgba(79,70,229,0.04); } /* ─── Nomilog Feed ─── */ .hv2-feed { padding: 0 16px; } .hv2-post { background: var(--sq-card); border-radius: 16px; box-shadow: 0 2px 10px rgba(91,64,61,0.06); margin-bottom: 10px; overflow: hidden; } .hv2-post-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; } .hv2-post-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sq-washi); flex-shrink: 0; overflow: hidden; text-decoration: none; } .hv2-post-avatar img { width: 100%; height: 100%; object-fit: cover; } .hv2-post-user { font-size: 13px; font-weight: 800; text-decoration: none; color: inherit; } .hv2-post-time { font-size: 10px; color: var(--sq-text-mute); margin-top: 1px; } .hv2-post-img-link { display: block; } .hv2-post-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; margin-top: 8px; background: var(--sq-border); } .hv2-post-body-link { display: block; padding: 10px 16px; text-decoration: none; color: inherit; } .hv2-post-body { padding: 10px 16px; } .hv2-post-sake { display: inline-flex; align-items: center; gap: 4px; background: rgba(178,4,17,0.06); color: var(--sq-brand); font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; text-decoration: none; margin-bottom: 4px; } .hv2-post-text { font-size: 13px; color: var(--sq-text-sub); margin-top: 3px; line-height: 1.5; } .hv2-post-text-link { text-decoration: none; color: inherit; display: block; } .hv2-post-footer { display: flex; align-items: center; gap: 6px; padding: 4px 16px 12px; } /* infinite ♥ stack — physical heart row */ .hv2-heart-stack { display: flex; align-items: center; gap: 0; background: none; border: none; cursor: pointer; padding: 6px 10px; border-radius: 99px; transition: background 0.15s; position: relative; max-width: 100%; overflow: visible; } .hv2-heart-stack:active { background: rgba(178,4,17,0.08); } /* ♡ tap target with + badge */ .hv2-heart-tap { display: flex; align-items: center; gap: 0; flex-shrink: 0; margin-right: 4px; position: relative; } .hv2-heart-outline { font-size: 20px; color: var(--sq-brand); opacity: 0.65; transition: transform 0.12s; } .hv2-heart-stack:active .hv2-heart-outline { transform: scale(1.3); } .hv2-heart-plus-mark { font-size: 10px; font-weight: 900; color: var(--sq-brand); margin-left: -2px; margin-top: -6px; line-height: 1; } /* count number */ .hv2-heart-num { font-size: 13px; font-weight: 800; color: var(--sq-brand); font-family: 'Spline Sans', sans-serif; flex-shrink: 0; margin-right: 4px; min-width: 14px; } /* growing ♥ row */ .hv2-heart-row { display: flex; align-items: center; gap: 0; overflow: hidden; flex-shrink: 1; min-width: 0; } .hv2-heart-row .hv2-heart-icon { font-size: 13px; color: var(--sq-brand); flex-shrink: 0; animation: heartPop 0.3s ease-out; } @keyframes heartPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* rising heart animation (from effect-lab) */ .rising-heart { position: fixed; pointer-events: none; z-index: 9999; font-size: var(--sz, 1.5rem); animation: heartRise var(--dur, 2.4s) ease-out forwards; filter: drop-shadow(0 0 4px rgba(236,72,153,0.5)); } @keyframes heartRise { 0% { transform: translate(0,0) scale(0.3) rotate(var(--rot,-10deg)); opacity:0; } 12% { transform: translate(calc(var(--dx)*0.1),calc(var(--dy)*0.1)) scale(1.3) rotate(calc(var(--rot)*-0.5)); opacity:1; } 100% { transform: translate(var(--dx),var(--dy)) scale(0.4); opacity:0; } } /* ─── Text-only Post (no photo) ─── */ .hv2-post--text .hv2-post-body { padding: 10px 16px 8px; border-top: 1px solid var(--sq-border); margin-top: 8px; } .hv2-post-sake-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(178,4,17,0.06); color: var(--sq-brand); font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; text-decoration: none; margin-bottom: 4px; } /* ─── Subscription Promo Card ─── */ .hv2-sub { margin: 0 16px 10px; border-radius: 16px; overflow: hidden; background: var(--sq-card); box-shadow: 0 4px 16px rgba(91,64,61,0.08); text-decoration: none; color: inherit; display: block; } .hv2-sub-header { background: linear-gradient(135deg, #1a1c19 60%, #5b403d); color: #fff; padding: 14px 16px; } .hv2-sub-badge { display: inline-block; font-size: 9px; font-weight: 900; background: var(--sq-gold); color: #1a1c19; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.05em; margin-bottom: 6px; } .hv2-sub-title { font-size: 15px; font-weight: 900; } .hv2-sub-desc { font-size: 11px; opacity: 0.7; margin-top: 2px; } .hv2-sub-bottles { display: flex; gap: 10px; padding: 14px 16px; } .hv2-sub-bottle { flex: 1; min-width: 0; text-align: center; background: var(--sq-card); border-radius: 12px; border: 1px solid var(--sq-border); box-shadow: 0 2px 8px rgba(91,64,61,0.06); overflow: hidden; } .hv2-sub-bottle-img { width: 100%; aspect-ratio: 5/7; background: var(--sq-washi); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hv2-sub-bottle-img img { width: 100%; height: 100%; object-fit: cover; } .hv2-sub-bottle-info { padding: 8px 6px 10px; } .hv2-sub-bottle-name { font-size: 12px; font-weight: 900; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv2-sub-bottle-type { font-size: 9px; color: var(--sq-text-sub); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv2-sub-bottle-area { font-size: 9px; color: var(--sq-text-sub); margin-top: 3px; } .hv2-sub-cta { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px; background: rgba(178,4,17,0.04); font-size: 13px; font-weight: 900; color: var(--sq-brand); border-top: 1px solid var(--sq-border); } /* ─── Oshi-gura Voting Card ─── */ .hv2-vote { margin: 0 16px 10px; padding: 16px; background: var(--sq-washi); border-radius: 16px; border: 2px dashed var(--sq-gold); text-align: center; } .hv2-vote-label { font-size: 10px; font-weight: 900; color: var(--sq-gold); letter-spacing: 0.05em; } .hv2-vote-title { font-size: 15px; font-weight: 900; margin-top: 6px; } .hv2-vote-desc { font-size: 12px; color: var(--sq-text-sub); margin-top: 4px; line-height: 1.5; } .hv2-vote-options { display: flex; gap: 8px; margin-top: 12px; justify-content: center; flex-wrap: wrap; } .hv2-vote-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; background: var(--sq-card); border-radius: 12px; border: 1px solid var(--sq-border); cursor: pointer; transition: all 0.15s; min-width: 80px; font-size: 11px; font-weight: 800; } .hv2-vote-opt:active { transform: scale(0.96); } .hv2-vote-opt .emoji { font-size: 22px; } .hv2-vote-count { font-size: 10px; color: var(--sq-text-mute); margin-top: 2px; } .hv2-vote-bar { width: 100%; height: 4px; background: var(--sq-border); border-radius: 99px; overflow: hidden; margin-top: 12px; } .hv2-vote-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sq-gold), #e8b73a); } /* ─── Noren (Gateway) Cards ─── */ .hv2-noren { margin: 0 0 10px; padding: 14px 16px; background: var(--sq-washi); border-radius: 14px; border: 1px solid var(--sq-border); display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; transition: transform 0.15s; } .hv2-noren:active { transform: scale(0.98); } .hv2-noren-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; } .hv2-noren-icon--kanpai { background: rgba(178,4,17,0.08); color: var(--sq-brand); } .hv2-noren-icon--zukan { background: rgba(91,64,61,0.08); color: var(--sq-text-sub); } .hv2-noren-icon--map { background: rgba(34,197,94,0.08); color: #16a34a; } .hv2-noren-icon--stamp { background: rgba(212,160,23,0.1); color: var(--sq-gold); } .hv2-noren-icon--shop { background: rgba(99,102,241,0.08); color: #6366f1; } .hv2-noren-body { flex: 1; min-width: 0; } .hv2-noren-title { font-size: 13px; font-weight: 800; } .hv2-noren-desc { font-size: 11px; color: var(--sq-text-sub); margin-top: 2px; } .hv2-noren-arrow { color: var(--sq-text-mute); flex-shrink: 0; } /* ─── Zukan Recent Additions Card ─── */ .hv2-zukan-recent { display: block; margin: 0 16px 10px; background: var(--sq-card); border-radius: 16px; box-shadow: 0 2px 10px rgba(91,64,61,0.06); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.15s; border: none; outline: none; } .hv2-zukan-recent:active { transform: scale(0.98); } .hv2-zukan-recent-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px; justify-content: space-between; } .hv2-zukan-recent-title { font-size: 14px; font-weight: 900; } .hv2-zukan-recent-desc { font-size: 11px; color: var(--sq-text-sub); margin-top: 2px; } .hv2-zukan-recent-grid { /* #405: columns → grid に変更（columnsはoverflow:hidden+border-radiusを壊す） */ display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 12px 12px; } .hv2-zukan-recent-item { position: relative; overflow: hidden; border-radius: 12px; border: none; outline: none; } .hv2-zukan-recent-img { width: 100%; display: block; object-fit: cover; border: none; outline: none; } .hv2-zukan-recent-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px; background: rgba(255,255,255,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 0 0 12px 12px; border: none; outline: none; } .hv2-zukan-recent-name { font-size: 11px; font-weight: 800; line-height: 1.3; color: var(--sq-text); } .hv2-zukan-recent-meta { font-size: 9px; color: var(--sq-text-sub); margin-top: 1px; } /* Goshuin Collection Card */ .hv2-goshuin-card { margin: 0 0 12px; padding: 14px 16px 16px; background: var(--sq-card); border-radius: 16px; box-shadow: 0 2px 10px rgba(91,64,61,0.06); text-decoration: none; color: inherit; display: block; transition: transform 0.15s; border: none; outline: none; } .hv2-goshuin-card:active { transform: scale(0.98); } .hv2-goshuin-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; position: relative; padding-right: 28px; } .hv2-goshuin-title { font-size: 14px; font-weight: 900; width: 100%; } .hv2-goshuin-desc { font-size: 11px; color: var(--sq-text-sub); } .hv2-goshuin-arrow { position: absolute; right: 0; top: 2px; color: var(--sq-text-mute); font-size: 20px; } .hv2-goshuin-stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .hv2-goshuin-stamp { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--sq-washi); border-radius: 12px; padding: 0 0 6px; overflow: hidden; } .hv2-goshuin-stamp-img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 0; } .hv2-goshuin-stamp-name { font-size: 10px; font-weight: 800; color: var(--sq-text-sub); text-align: center; line-height: 1.3; } /* Hot pick label color */ .hv2-pick-label { color: var(--sq-brand); } /* ─── KANPAI Section (floating, no card) ─── */ .hv2-kanpai { margin: 0 16px 12px; padding: 20px; background: transparent; border-radius: 16px; text-align: center; color: var(--sq-text); } .hv2-kanpai-count { font-size: 2rem; font-weight: 900; font-family: 'Spline Sans', sans-serif; color: var(--sq-brand); } .hv2-kanpai-label { font-size: 11px; font-weight: 700; color: var(--sq-text-sub); margin-top: 2px; } .hv2-kanpai-sublabel { font-size: 12px; font-weight: 700; color: var(--sq-text-sub); margin-bottom: 2px; letter-spacing: 0.05em; } .hv2-kanpai-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 12px 32px; background: var(--sq-brand); color: #fff; border: 2px solid var(--sq-brand-lt); border-radius: 99px; font-size: 16px; font-weight: 900; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(178,4,17,0.25); } .hv2-kanpai-btn:active { transform: scale(0.92); } .hv2-kanpai-btn.is-done { background: rgba(178,4,17,0.15); color: var(--sq-brand); border-color: rgba(178,4,17,0.2); box-shadow: none; opacity: 0.7; } .hv2-kanpai-btn .mi { font-size: 22px; } /* ─── Footer Nav ─── */ .hv2-footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--sq-card); border-top: 1px solid var(--sq-border); display: flex; z-index: 50; padding: 6px 0 env(safe-area-inset-bottom, 8px); } .hv2-footer a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; padding: 4px 0; font-size: 10px; font-weight: 700; color: var(--sq-text-mute); } .hv2-footer a.is-active { color: var(--sq-brand); } .hv2-footer a .mi { font-size: 22px; } /* ─── 推し蔵 Vote CTA (Variant F) ─── */ .oshi-f { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 20px 20px; background: linear-gradient(135deg, #1a1c19 0%, #2a2420 50%, #1e2830 100%); text-decoration: none; color: #fff; display: block; margin: 0; box-shadow: 0 6px 24px rgba(0,0,0,0.2); border: none; outline: none; } .oshi-f::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(178,4,17,0.2), transparent 70%); } .oshi-f::after { content: ''; position: absolute; bottom: -40px; left: -20px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(13,115,119,0.15), transparent 70%); } .oshi-f-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; position: relative; z-index: 1; } .oshi-f-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--sq-gold); } .oshi-f-live { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #ef4444; } .oshi-f-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.6); animation: livePulse 1.5s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .oshi-f-title { font-size: 17px; font-weight: 900; line-height: 1.45; position: relative; z-index: 1; } .oshi-f-title em { font-style: normal; background: linear-gradient(90deg, var(--sq-gold), #f5d76e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .oshi-f-desc { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 6px; line-height: 1.5; position: relative; z-index: 1; } .oshi-f-hotspots { display: flex; gap: 6px; margin-top: 16px; position: relative; z-index: 1; } .oshi-f-hotspot { flex: 1; text-align: center; padding: 10px 4px 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; backdrop-filter: blur(4px); } .oshi-f-hotspot:first-child { background: rgba(255,255,255,0.12); border-color: rgba(201,163,56,0.3); } .oshi-f-hotspot-area { font-size: 11px; font-weight: 800; line-height: 1; } .oshi-f-hotspot-count { font-size: 15px; font-weight: 900; margin-top: 4px; font-family: 'Spline Sans', sans-serif; } .oshi-f-hotspot:first-child .oshi-f-hotspot-count { color: var(--sq-gold); } .oshi-f-hotspot-unit { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 2px; } .oshi-f-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 16px 0; position: relative; z-index: 1; } .oshi-f-stats { display: flex; justify-content: center; gap: 24px; position: relative; z-index: 1; margin-bottom: 14px; } .oshi-f-stat { text-align: center; } .oshi-f-stat-num { font-size: 18px; font-weight: 900; font-family: 'Spline Sans', sans-serif; } .oshi-f-stat-label { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 1px; } .oshi-f-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: linear-gradient(135deg, var(--sq-brand), #d4182a); color: #fff; border: none; border-radius: 14px; padding: 14px; font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer; position: relative; z-index: 1; box-shadow: 0 4px 16px rgba(178,4,17,0.3); transition: transform 0.12s; } .oshi-f-cta:active { transform: scale(0.97); } .oshi-f-cta .mi { font-size: 20px; } /* ─── Masonry Grid (v3) ─── */ .hv2-masonry { columns: 2; column-gap: 10px; padding: 0 10px; } .hv2-mcard { break-inside: avoid; margin-bottom: 10px; border-radius: 14px; overflow: hidden; background: var(--sq-card); box-shadow: 0 2px 10px rgba(91,64,61,0.06); cursor: pointer; transition: transform 0.12s; } .hv2-mcard:active { transform: scale(0.97); } .hv2-mcard-img { width: 100%; display: block; object-fit: cover; } .hv2-mcard-body { padding: 10px 12px 6px; } .hv2-mcard-sake { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; color: var(--sq-brand); background: rgba(178,4,17,0.06); padding: 3px 8px; border-radius: 99px; margin-bottom: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv2-mcard-text { font-size: 12px; line-height: 1.6; color: var(--sq-text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .hv2-mcard--text .hv2-mcard-text { -webkit-line-clamp: 6; } .hv2-mcard-footer { display: flex; flex-wrap: wrap; align-items: center; padding: 6px 12px 10px; } .hv2-mcard-user { font-size: 10px; font-weight: 700; color: var(--sq-text-sub); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; } .hv2-mcard-hearts { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: var(--sq-brand); cursor: pointer; user-select: none; transition: transform 0.1s; } .hv2-mcard-hearts:active { transform: scale(1.3); } /* Rising Hearts for masonry cards */ .mcard-rising-heart { position: fixed; pointer-events: none; z-index: 200; font-size: var(--sz, 1.2rem); animation: mcardHeartRise var(--dur, 1.8s) ease-out forwards; } @keyframes mcardHeartRise { 0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); } 20% { opacity: 1; transform: translateY(calc(var(--dy) * 0.2)) scale(1.1) rotate(calc(var(--rot) * 0.3)); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.6) rotate(var(--rot)); } } /* ─── Shop Set CTA (F1 base) ─── */ .shop-f1 { display: block; margin: 0 16px 12px; border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; background: var(--sq-washi); transition: transform 0.15s; border: none; outline: none; } .shop-f1:active { transform: scale(0.98); } .shop-f1-hero { position: relative; height: 220px; overflow: hidden; } .shop-f1-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .shop-f1-hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(250,246,240,1) 0%, rgba(250,246,240,0.3) 40%, transparent 70%); } .shop-f1-hero-tag { position: absolute; top: 14px; left: 14px; font-size: 9px; font-weight: 900; color: var(--sq-gold); letter-spacing: 0.12em; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); padding: 4px 12px; border-radius: 99px; } .shop-f1-info { padding: 0 16px 4px; margin-top: -36px; position: relative; z-index: 2; } .shop-f1-name { font-size: 18px; font-weight: 900; line-height: 1.3; } .shop-f1-subtitle { font-size: 11px; color: var(--sq-text-sub); margin-top: 4px; } .shop-f1-chips { display: flex; gap: 6px; padding: 10px 16px; flex-wrap: wrap; } .shop-f1-chip { padding: 4px 12px; border-radius: 99px; font-size: 10px; font-weight: 800; background: var(--sq-card); border: 1px solid var(--sq-border); color: var(--sq-text-sub); } .shop-f1-bottom { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 16px; border: none; } .shop-f1-price { font-size: 20px; font-weight: 900; color: var(--sq-brand); font-family: 'Spline Sans', sans-serif; } .shop-f1-price small { font-size: 10px; color: var(--sq-text-mute); } .shop-f1-btn { padding: 10px 22px; background: var(--sq-brand); color: #fff; border-radius: 99px; font-size: 12px; font-weight: 900; box-shadow: 0 4px 12px rgba(178,4,17,0.2); } /* F1-B: Amber variant */ .f1-amber { background: #fef9f0; } .f1-amber-tag { background: rgba(180,83,9,0.6) !important; color: #fde68a !important; } .f1-amber-price { color: #b45309 !important; } .f1-amber-btn { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 4px 12px rgba(245,158,11,0.3) !important; } /* ─── Home v3: Interstitial CTA (Masonry 内挿入カード) #377 ─── */ .hv2-interstitial-cta { break-inside: avoid; column-span: all; margin: 12px 0; } /* ─── Home v3: Welcome Card (#391 Sprint A) ─── */ .hv2-welcome { margin: 12px 16px 0; padding: 14px 16px; background: var(--sq-card); border-radius: 16px; box-shadow: 0 2px 10px rgba(91,64,61,0.06); display: flex; align-items: center; gap: 12px; } .hv2-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--sq-washi, #faf6f0); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; border: 2px solid var(--sq-border, #e8e8e3); } .hv2-avatar img { width: 100%; height: 100%; object-fit: cover; } .hv2-welcome-info { flex: 1; min-width: 0; } .hv2-greeting { font-size: 15px; font-weight: 900; } .hv2-stats-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; font-size: 11px; font-weight: 700; color: var(--sq-text-sub, #5b403d); } .hv2-stats-row span { white-space: nowrap; } .hv2-xp-track { height: 4px; background: var(--sq-border, #e8e8e3); border-radius: 99px; overflow: hidden; margin-top: 6px; } .hv2-xp-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sq-brand, #b20411), var(--sq-brand-lt, #d62927)); } /* ─── Home v3: Subscription Promo Card (#392 Sprint B) ─── */ .hv2-sub { margin: 0 16px 10px; border-radius: 16px; overflow: hidden; background: var(--sq-card); box-shadow: 0 4px 16px rgba(91,64,61,0.08); text-decoration: none; color: inherit; display: block; } .hv2-sub-header { background: linear-gradient(135deg, #1a1c19 60%, #5b403d); color: #fff; padding: 14px 16px; } .hv2-sub-badge { display: inline-block; font-size: 9px; font-weight: 900; background: var(--sq-gold, #d4a017); color: #1a1c19; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.05em; margin-bottom: 6px; } .hv2-sub-title { font-size: 15px; font-weight: 900; } .hv2-sub-desc { font-size: 11px; opacity: 0.7; margin-top: 2px; } .hv2-sub-bottles { display: flex; gap: 10px; padding: 14px 16px; } .hv2-sub-bottle { flex: 1; min-width: 0; text-align: center; background: var(--sq-card); border-radius: 12px; border: 1px solid var(--sq-border, #e8e8e3); box-shadow: 0 2px 8px rgba(91,64,61,0.06); overflow: hidden; } .hv2-sub-bottle-img { width: 100%; aspect-ratio: 5/7; background: var(--sq-washi, #faf6f0); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hv2-sub-bottle-img img { width: 100%; height: 100%; object-fit: cover; } .hv2-sub-bottle-info { padding: 8px 6px 10px; } .hv2-sub-bottle-name { font-size: 12px; font-weight: 900; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv2-sub-bottle-type { font-size: 9px; color: var(--sq-text-sub, #5b403d); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hv2-sub-bottle-area { font-size: 9px; color: var(--sq-text-sub, #5b403d); margin-top: 3px; } .hv2-sub-cta { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px; background: rgba(178,4,17,0.04); font-size: 13px; font-weight: 900; color: var(--sq-brand, #b20411); border-top: 1px solid var(--sq-border, #e8e8e3); } /* ─── Home v3: KANPAI Section (#392 Sprint B) ─── */ .hv2-kanpai { margin: 0 16px 12px; padding: 20px; background: transparent; border-radius: 16px; text-align: center; color: var(--sq-text); } .hv2-kanpai-count { font-size: 2rem; font-weight: 900; font-family: 'Spline Sans', sans-serif; color: var(--sq-brand, #b20411); } .hv2-kanpai-label { font-size: 11px; font-weight: 700; color: var(--sq-text-sub, #5b403d); margin-top: 2px; } .hv2-kanpai-sublabel { font-size: 12px; font-weight: 700; color: var(--sq-text-sub, #5b403d); margin-bottom: 2px; letter-spacing: 0.05em; } .hv2-kanpai-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 12px 32px; background: var(--sq-brand, #b20411); color: #fff; border: 2px solid var(--sq-brand-lt, #d62927); border-radius: 99px; font-size: 16px; font-weight: 900; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 16px rgba(178,4,17,0.25); } .hv2-kanpai-btn:active { transform: scale(0.92); } .hv2-kanpai-btn.is-done { background: rgba(178,4,17,0.15); color: var(--sq-brand, #b20411); border-color: rgba(178,4,17,0.2); box-shadow: none; opacity: 0.7; } .hv2-kanpai-btn .material-symbols-outlined { font-size: 22px; } /* ─── Home v3: Zukan Recent Additions (#393 Sprint C) ─── */ .hv2-zukan-recent { display: block; margin: 0 16px 10px; background: var(--sq-card); border-radius: 16px; box-shadow: 0 2px 10px rgba(91,64,61,0.06); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.15s; border: none; outline: none; } .hv2-zukan-recent:active { transform: scale(0.98); } .hv2-zukan-recent-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px; justify-content: space-between; } .hv2-zukan-recent-title { font-size: 14px; font-weight: 900; } .hv2-zukan-recent-desc { font-size: 11px; color: var(--sq-text-sub, #5b403d); margin-top: 2px; } .hv2-zukan-recent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 12px 12px; } .hv2-zukan-recent-item { position: relative; overflow: hidden; border-radius: 12px; border: none; outline: none; } .hv2-zukan-recent-img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4/3; border: none; outline: none; } .hv2-zukan-recent-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px; background: rgba(255,255,255,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 0 0 12px 12px; border: none; outline: none; } .hv2-zukan-recent-name { font-size: 11px; font-weight: 800; line-height: 1.3; color: var(--sq-text); } .hv2-zukan-recent-meta { font-size: 9px; color: var(--sq-text-sub, #5b403d); margin-top: 1px; } /* ─── Home v3: Goshuin Collection Card (#393 Sprint C, #403 fix) ─── */ .hv2-goshuin-card { margin: 0 0 12px; padding: 14px 16px 16px; /* #403: カード背景を和紙色に → 白背景スタンプが映える */ background: var(--sq-washi, #faf6f0); border-radius: 16px; box-shadow: 0 2px 10px rgba(91,64,61,0.06); text-decoration: none; color: inherit; display: block; transition: transform 0.15s; border: none; outline: none; } .hv2-goshuin-card:active { transform: scale(0.98); } .hv2-goshuin-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; position: relative; padding-right: 28px; } .hv2-goshuin-title { font-size: 14px; font-weight: 900; width: 100%; } .hv2-goshuin-desc { font-size: 11px; color: var(--sq-text-sub, #5b403d); } .hv2-goshuin-arrow { position: absolute; right: 0; top: 2px; color: var(--sq-text-mute, #999); font-size: 20px; } .hv2-goshuin-stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .hv2-goshuin-stamp { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border-radius: 12px; padding: 0 0 6px; box-shadow: 0 1px 4px rgba(91,64,61,0.06); overflow: hidden; } .hv2-goshuin-stamp-img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 0; } .hv2-goshuin-stamp-name { font-size: 10px; font-weight: 800; color: var(--sq-text-sub, #5b403d); text-align: center; line-height: 1.3; } /* ─── Home v3: 推し蔵 Vote CTA Variant F (#399 fix) ─── */ .oshi-f { position: relative; overflow: hidden; border-radius: 20px; padding: 22px 20px 20px; background: linear-gradient(135deg, #1a1c19 0%, #2a2420 50%, #1e2830 100%); text-decoration: none; color: #fff; display: block; margin: 0; box-shadow: 0 6px 24px rgba(0,0,0,0.2); border: none; outline: none; } .oshi-f::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(178,4,17,0.2), transparent 70%); } .oshi-f::after { content: ''; position: absolute; bottom: -40px; left: -20px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(13,115,119,0.15), transparent 70%); } .oshi-f-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; position: relative; z-index: 1; } .oshi-f-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--sq-gold, #d4a017); } .oshi-f-live { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #ef4444; } .oshi-f-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.6); animation: livePulse 1.5s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } .oshi-f-title { font-size: 17px; font-weight: 900; line-height: 1.45; position: relative; z-index: 1; } .oshi-f-title em { font-style: normal; background: linear-gradient(90deg, var(--sq-gold, #d4a017), #f5d76e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .oshi-f-desc { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 6px; line-height: 1.5; position: relative; z-index: 1; } .oshi-f-hotspots { display: flex; gap: 6px; margin-top: 16px; position: relative; z-index: 1; } .oshi-f-hotspot { flex: 1; text-align: center; padding: 10px 4px 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; backdrop-filter: blur(4px); } .oshi-f-hotspot:first-child { background: rgba(255,255,255,0.12); border-color: rgba(201,163,56,0.3); } .oshi-f-hotspot-area { font-size: 11px; font-weight: 800; line-height: 1; } .oshi-f-hotspot-count { font-size: 15px; font-weight: 900; margin-top: 4px; font-family: 'Spline Sans', sans-serif; } .oshi-f-hotspot:first-child .oshi-f-hotspot-count { color: var(--sq-gold, #d4a017); } .oshi-f-hotspot-unit { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 2px; } .oshi-f-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 16px 0; position: relative; z-index: 1; } .oshi-f-stats { display: flex; justify-content: center; gap: 24px; position: relative; z-index: 1; margin-bottom: 14px; } .oshi-f-stat { text-align: center; } .oshi-f-stat-num { font-size: 18px; font-weight: 900; font-family: 'Spline Sans', sans-serif; } .oshi-f-stat-label { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 1px; } .oshi-f-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: linear-gradient(135deg, var(--sq-brand, #b20411), #d4182a); color: #fff; border: none; border-radius: 14px; padding: 14px; font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer; position: relative; z-index: 1; box-shadow: 0 4px 16px rgba(178,4,17,0.3); transition: transform 0.12s; text-decoration: none; } .oshi-f-cta:active { transform: scale(0.97); } /* ─── Home v3: Noren Gateway Cards (#394 Sprint D) ─── */ .hv2-noren { margin: 0 0 10px; padding: 14px 16px; background: var(--sq-washi, #faf6f0); border-radius: 14px; border: 1px solid var(--sq-border, #e8e8e3); display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; transition: transform 0.15s; } .hv2-noren:active { transform: scale(0.98); } .hv2-noren-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; } .hv2-noren-icon--map { background: rgba(34,197,94,0.08); color: #16a34a; } .hv2-noren-icon--shop { background: rgba(99,102,241,0.08); color: #6366f1; } .hv2-noren-icon--zukan { background: rgba(91,64,61,0.08); color: var(--sq-text-sub, #5b403d); } .hv2-noren-icon--stamp { background: rgba(212,160,23,0.1); color: var(--sq-gold, #d4a017); } .hv2-noren-body { flex: 1; min-width: 0; } .hv2-noren-title { font-size: 13px; font-weight: 800; } .hv2-noren-desc { font-size: 11px; color: var(--sq-text-sub, #5b403d); margin-top: 2px; } .hv2-noren-arrow { color: var(--sq-text-mute, #999); flex-shrink: 0; } /* ============================================================ #630 AI Search CTA — Museum Dark B3 Minimal ============================================================ */ .ai-cta { display: block; border-radius: 18px; overflow: visible; background: var(--sq-shop-bg, #0a0a0f); border: 1px solid rgba(255,255,255,.08); color: var(--sq-shop-text, #e8e4dc); position: relative; padding-bottom: 14px; } .ai-cta-glow { position: absolute; top: -20px; left: -20px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.12), transparent 70%); pointer-events: none; } .ai-cta-top { padding: 16px 18px 0; } .ai-cta-tag { font-size: 9px; font-weight: 900; letter-spacing: .12em; color: var(--sq-shop-gold, #c9a84c); } .ai-cta-hero { display: flex; align-items: center; gap: 12px; padding: 12px 18px 0; } .ai-cta-char { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(201,168,76,.3); box-shadow: 0 0 16px rgba(201,168,76,.2); } .ai-cta-hero-text { flex: 1; } .ai-cta-hero-name { font-size: 13px; font-weight: 900; color: #fff; } .ai-cta-hero-sub { font-size: 10px; color: var(--sq-shop-sub, #8a8680); margin-top: 2px; } .ai-cta-form { display: block; } .ai-cta-search { display: flex; align-items: center; gap: 8px; margin: 12px 18px 0; padding: 10px 14px; background: var(--sq-shop-c1, #13131a); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; transition: border-color .2s, box-shadow .2s; } .ai-cta-search:focus-within { border-color: rgba(201,168,76,.3); box-shadow: 0 0 12px rgba(201,168,76,.1); } .ai-cta-badge { background: linear-gradient(135deg, var(--sq-brand, #b20411), #e4284e); color: #fff; font-size: 8px; font-weight: 900; padding: 2px 8px; border-radius: 99px; letter-spacing: 1px; flex-shrink: 0; } .ai-cta-input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: var(--sq-shop-text, #e8e4dc); font-family: 'Noto Sans JP', sans-serif; min-width: 0; } .ai-cta-input::placeholder { color: var(--sq-shop-muted, #5a5650); } .ai-cta-send { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--sq-shop-muted, #5a5650); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0; } .ai-cta-send.active { background: linear-gradient(135deg, var(--sq-brand, #b20411), #e4284e); color: #fff; border-color: transparent; box-shadow: 0 0 12px rgba(178,4,17,.4); } /* ============================================================ AI Sommelier Search (#409) ============================================================ */ /* --- Home Search Box --- */ .ai-search-form { position: relative; } .ai-search-box { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #e8e8e3; border-radius: 16px; padding: 10px 14px; box-shadow: 0 2px 12px rgba(45,31,27,0.06); transition: box-shadow 0.2s, border-color 0.2s; } .ai-search-box:focus-within { border-color: var(--brandcolor-300, #c44); box-shadow: 0 2px 20px rgba(178,4,17,0.1); } .ai-search-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ai-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; font-weight: 600; color: #2d1f1b; font-family: 'Noto Sans JP', sans-serif; min-width: 0; } .ai-search-input::placeholder { color: #b0a89e; font-weight: 400; } .ai-search-badge { background: linear-gradient(135deg, #b20411, #e4284e); color: #fff; font-size: 9px; font-weight: 900; padding: 2px 8px; border-radius: 99px; letter-spacing: 1px; flex-shrink: 0; } .ai-search-send { width: 32px; height: 32px; border-radius: 50%; background: #e8e8e3; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #b0a89e; transition: all 0.2s; flex-shrink: 0; } .ai-search-send.active { background: linear-gradient(135deg, #b20411, #e4284e); color: #fff; transform: scale(1.05); } .ai-search-hint { text-align: center; font-size: 10px; color: #b0a89e; margin-top: 6px; } .ai-search-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .ai-chip { font-size: 11px; padding: 6px 14px; background: #fff; border-radius: 99px; border: 1px solid #e8e8e3; cursor: pointer; font-weight: 700; color: #2d1f1b; transition: background 0.15s; } .ai-chip:active { background: #f5f0eb; } /* --- Results Page --- */ .ai-res-body { padding: 16px; min-height: calc(100vh - 120px); padding-bottom: 80px; } .ai-res-msg { margin-bottom: 16px; } .ai-res-label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #b0a89e; font-weight: 700; margin-bottom: 8px; } .ai-res-bubble { background: #f5f0eb; border-radius: 0 16px 16px 16px; padding: 14px 16px; font-size: 13px; line-height: 1.7; color: #2d1f1b; font-weight: 500; white-space: pre-line; } .ai-res-scope-notice { background: #fef9c3; border: 1px solid #facc15; border-radius: 12px; padding: 14px 16px; font-size: 12px; color: #854d0e; line-height: 1.7; } .ai-res-empty { text-align: center; padding: 32px 16px; font-size: 13px; color: #b0a89e; } /* --- Brewery Card --- */ .ai-brewery-card { display: flex; align-items: center; gap: 12px; background: #f8f5f0; border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; text-decoration: none; color: inherit; transition: transform 0.15s; border: none; outline: none; } .ai-brewery-card:active { transform: scale(0.98); } .ai-brewery-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #e3dcd4, #f5f0eb); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .ai-brewery-info { flex: 1; min-width: 0; } .ai-brewery-name { font-size: 14px; font-weight: 800; color: #2d1f1b; } .ai-brewery-kana { font-size: 10px; color: #b0a89e; margin-top: 1px; } .ai-brewery-meta { font-size: 11px; color: #8a7a72; margin-top: 3px; } /* --- Sake Card --- */ .ai-sake-card { display: block; background: #fff; border-radius: 14px; overflow: hidden; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(45,31,27,0.06); text-decoration: none; color: inherit; transition: transform 0.15s; border: none; outline: none; } .ai-sake-card:active { transform: scale(0.98); } .ai-sake-body { padding: 14px 14px 10px; } .ai-sake-name { font-size: 15px; font-weight: 800; color: #2d1f1b; } .ai-sake-kana { font-size: 10px; color: #b0a89e; margin-top: 2px; } .ai-sake-meta { display: flex; gap: 10px; font-size: 11px; color: #8a7a72; margin-top: 6px; } .ai-sake-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .ai-sake-tag { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; } .ai-sake-tag.tag-type { background: #fef2f2; color: #b20411; } .ai-sake-tag.tag-pref { background: #f0f9ff; color: #0369a1; } .ai-sake-bottom { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid #f5f5f5; } .ai-sake-stats { font-size: 11px; font-weight: 700; color: #8a7a72; } .ai-sake-cta { font-size: 10px; font-weight: 900; color: var(--brandcolor-500, #b20411); } /* --- Shop Card --- */ .ai-shop-card { display: block; background: #1a1a2e; border-radius: 14px; overflow: hidden; margin-bottom: 8px; text-decoration: none; color: #fff; transition: transform 0.15s; border: none; outline: none; } .ai-shop-card:active { transform: scale(0.98); } .ai-shop-badge { background: linear-gradient(90deg, #d4a843, #e8c96a); color: #1a1a2e; font-size: 10px; font-weight: 900; padding: 5px 14px; display: inline-block; border-radius: 0 0 10px 0; } .ai-shop-body { padding: 12px 14px 16px; } .ai-shop-name { font-size: 15px; font-weight: 800; } .ai-shop-desc { font-size: 11px; color: #aaa; margin-top: 4px; } .ai-shop-price { font-size: 18px; font-weight: 900; color: #d4a843; margin-top: 8px; } .ai-shop-price small { font-size: 10px; font-weight: 400; color: #999; } /* --- Follow-up Input --- */ .ai-res-input-area { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e8e8e3; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); z-index: 100; } .ai-res-input-wrap { display: flex; align-items: center; gap: 8px; background: #f5f0eb; border-radius: 99px; padding: 6px 8px 6px 16px; } .ai-res-input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: #2d1f1b; font-family: 'Noto Sans JP', sans-serif; } .ai-res-input::placeholder { color: #b0a89e; } .ai-res-send { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #b20411, #e4284e); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════ Shop CTA: Flagship + Companion (#413) Design Sprint 案3 — F1-E Earth/Craft テーマ ═══════════════════════════════════════════════════════════ */ .shop-section-tag { text-align: center; font-size: 9px; font-weight: 900; color: var(--sq-gold, #d4a017); letter-spacing: 0.2em; margin-bottom: 6px; } .shop-section-title { text-align: center; font-size: 16px; font-weight: 900; margin-bottom: 16px; } /* Flagship Card */ .flagship { display: block; border-radius: 18px; overflow: hidden; background: var(--sq-washi, #faf6f0); transition: transform 0.2s ease; text-decoration: none; color: inherit; } .flagship:active { transform: scale(0.98); } .flagship-hero { position: relative; height: 210px; overflow: hidden; } .flagship-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .flagship:active .flagship-hero img { transform: scale(1.03); } .flagship-badge { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 900; background: linear-gradient(135deg, var(--sq-gold, #d4a017), #e8b73a); color: #1a1c19; padding: 5px 12px; border-radius: 99px; letter-spacing: 0.06em; box-shadow: 0 2px 8px rgba(212,160,23,0.3); } .flagship-name-chip { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 16px; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .flagship-name { font-size: 17px; font-weight: 900; line-height: 1.35; color: #fff; } .flagship-info { padding: 8px 16px 4px; } .flagship-sub { font-size: 11px; color: var(--sq-text-sub, #5b403d); line-height: 1.5; } .flagship-chips { display: flex; gap: 6px; padding: 10px 16px 0; flex-wrap: wrap; } .flagship-chip { padding: 4px 11px; border-radius: 99px; font-size: 10px; font-weight: 700; background: var(--sq-card, #fff); border: 1px solid rgba(91,64,61,0.15); color: var(--sq-text-sub, #5b403d); } .flagship-bottom { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 16px; } .flagship-price { font-size: 22px; font-weight: 900; color: #78350f; font-family: 'Spline Sans', sans-serif; } .flagship-price small { font-size: 10px; color: var(--sq-text-mute, #999); margin-left: 2px; } .flagship-btn { display: flex; align-items: center; gap: 4px; padding: 10px 22px; background: linear-gradient(135deg, #92400e, #78350f); color: #fff; border-radius: 99px; font-size: 12px; font-weight: 900; box-shadow: 0 4px 14px rgba(120,53,15,0.25); transition: box-shadow 0.2s ease, transform 0.15s ease; } .flagship:active .flagship-btn { transform: scale(0.96); box-shadow: 0 2px 8px rgba(120,53,15,0.3); } /* Companion Cards */ .companions { display: flex; gap: 10px; margin-top: 12px; } .companions--single .comp { flex: 1 1 100%; } .comp { flex: 1; border-radius: 14px; overflow: hidden; background: var(--sq-washi, #faf6f0); transition: transform 0.2s ease; text-decoration: none; color: inherit; } .comp:active { transform: scale(0.97); } .comp-img { height: 110px; overflow: hidden; } .comp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .comp:active .comp-img img { transform: scale(1.04); } .comp-body { padding: 10px 12px 12px; } .comp-tag { font-size: 8px; font-weight: 900; color: var(--sq-gold, #d4a017); letter-spacing: 0.12em; margin-bottom: 3px; } .comp-name { font-size: 13px; font-weight: 900; line-height: 1.3; } .comp-sub { font-size: 10px; color: var(--sq-text-sub, #5b403d); margin-top: 3px; } .comp-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .comp-price { font-size: 16px; font-weight: 900; color: #78350f; font-family: 'Spline Sans', sans-serif; } .comp-price small { font-size: 9px; color: var(--sq-text-mute, #999); } .comp-arrow { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(91,64,61,0.08); color: #78350f; font-size: 18px; } /* Shop Link */ .shop-link { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 14px; font-size: 12px; font-weight: 800; color: #78350f; text-decoration: none; } /* ===================================================================== Living Zukan — #444 Masonry + グリッド混在CTA + マイクロマイルストーン ===================================================================== */ /* Card Shell */ .lz { display: block; border-radius: 16px; overflow: hidden; background: var(--sq-card, #fff); box-shadow: 0 4px 16px rgba(91,64,61,.08); text-decoration: none; color: inherit; } /* Header */ .lz-hd { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; justify-content: space-between; } .lz-hd-l { display: flex; align-items: center; gap: 8px; } .lz-bar { width: 4px; height: 20px; border-radius: 99px; background: var(--sq-brand, #b20411); } .lz-tt { font-size: 14px; font-weight: 900; } .lz-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 900; color: var(--sq-brand, #b20411); background: rgba(178,4,17,.06); padding: 3px 10px; border-radius: 99px; } .lz-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: lz-pulse 2s infinite; } @keyframes lz-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } } /* Micro Milestone */ .lz-ms { padding: 0 16px 12px; } .lz-ms-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; } .lz-ms-count { font-size: 22px; font-weight: 900; color: var(--sq-brand, #b20411); } .lz-ms-count span { font-size: 12px; font-weight: 700; color: var(--sq-text-sub, #5b403d); margin-left: 2px; } .lz-ms-goal { font-size: 10px; color: var(--sq-text-mute, #999); font-weight: 700; } .lz-pb { height: 8px; background: var(--sq-border, #e8e8e3); border-radius: 99px; overflow: hidden; } .lz-pf { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sq-brand, #b20411), #d62927); transition: width 1.5s cubic-bezier(.4,0,.2,1); } .lz-ms-label { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; font-size: 10px; color: var(--sq-text-sub, #5b403d); } .lz-ms-label strong { color: var(--sq-brand, #b20411); font-weight: 900; } /* Masonry Grid */ .lz-masonry { columns: 2; column-gap: 8px; padding: 0 12px 4px; } /* Sake Card */ .lz-mc { break-inside: avoid; margin-bottom: 8px; border-radius: 12px; overflow: hidden; background: var(--sq-card, #fff); box-shadow: 0 1px 6px rgba(91,64,61,.06); border: 1px solid rgba(91,64,61,.04); } .lz-mc img { width: 100%; display: block; object-fit: cover; max-height: 180px; } .lz-mc-body { padding: 8px 10px 4px; } .lz-mc-name { font-size: 11px; font-weight: 900; line-height: 1.3; } .lz-mc-brew { font-size: 9px; color: var(--sq-text-sub, #5b403d); margin-top: 1px; } .lz-mc-memo { font-size: 10px; color: var(--sq-text-sub, #5b403d); line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lz-mc-ft { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 8px; } .lz-mc-user { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--sq-text-mute, #999); min-width: 0; } .lz-mc-av { width: 18px; height: 18px; border-radius: 50%; background: var(--sq-washi, #faf6f0); display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; overflow: hidden; } .lz-mc-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60px; } .lz-mc-time { font-size: 9px; color: var(--sq-text-mute, #999); white-space: nowrap; } .lz-new { display: inline-block; background: #22c55e; color: #fff; font-size: 7px; font-weight: 900; padding: 1px 5px; border-radius: 99px; margin-left: 3px; vertical-align: middle; letter-spacing: .3px; } /* CTA Card (mixed in masonry grid — R2: 実線+左バー) */ .lz-cta-card { break-inside: avoid; margin-bottom: 8px; border-radius: 12px; overflow: hidden; background: var(--sq-washi, #faf6f0); border: 1px solid rgba(91,64,61,.06); border-left: 4px solid var(--sq-brand, #b20411); padding: 16px 14px; text-align: center; cursor: pointer; transition: transform .15s, box-shadow .15s; } .lz-cta-card:active { transform: scale(.97); box-shadow: 0 2px 12px rgba(178,4,17,.15); } .lz-cta-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--sq-brand, #b20411), #d62927); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: 0 4px 12px rgba(178,4,17,.2); } .lz-cta-title { font-size: 12px; font-weight: 900; line-height: 1.5; color: var(--sq-text, #1a1c19); } .lz-cta-desc { font-size: 10px; color: var(--sq-text-sub, #5b403d); margin-top: 4px; line-height: 1.4; } .lz-cta-pill { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 7px 16px; background: var(--sq-brand, #b20411); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 900; box-shadow: 0 3px 10px rgba(178,4,17,.25); } .lz-cta-xp { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; font-size: 9px; font-weight: 900; color: var(--sq-gold, #d4a017); } /* Footer (split) */ .lz-footer-split { display: flex; border-top: 1px solid var(--sq-border, #e8e8e3); } .lz-footer { display: flex; flex: 1; align-items: center; justify-content: center; gap: 4px; padding: 10px; font-size: 12px; font-weight: 900; color: var(--sq-brand, #b20411); cursor: pointer; text-decoration: none; } .lz-footer-split .lz-footer:first-child { border-right: 1px solid var(--sq-border, #e8e8e3); } .lz-xp-badge { font-size: 9px; font-weight: 900; color: var(--sq-gold, #d4a017); margin-left: 2px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #606 のみログCTA — Museum Dark Design ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .hv2-nomilog-cta { display: block; margin: 0 0 10px; border-radius: 18px; overflow: visible; background: var(--sq-shop-bg, #0a0a0f); border: 1px solid rgba(255,255,255,.08); color: var(--sq-shop-text, #e8e4dc); position: relative; } .hv2-nomilog-cta-top { padding: 16px 18px 0; display: flex; justify-content: space-between; align-items: center; } .hv2-nomilog-cta-tag { font-size: 9px; font-weight: 900; letter-spacing: .12em; color: var(--sq-shop-gold, #c9a84c); } .hv2-nomilog-cta-live { font-size: 9px; font-weight: 700; color: #4ade80; display: flex; align-items: center; gap: 4px; } .hv2-nomilog-cta-live-dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; animation: hv2-nomilog-pulse 1.5s infinite; } @keyframes hv2-nomilog-pulse { 0%,100%{opacity:1} 50%{opacity:.4} } .hv2-nomilog-cta-body { padding: 8px 18px 0; } .hv2-nomilog-cta-title { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 900; line-height: 1.35; color: #fff; } .hv2-nomilog-cta-desc { font-size: 11px; color: var(--sq-shop-sub, #8a8680); margin-top: 6px; line-height: 1.5; } /* 統計 3列 */ .hv2-nomilog-cta-stats { display: flex; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); margin-top: 14px; } .hv2-nomilog-cta-stat { flex: 1; text-align: center; border-right: 1px solid rgba(255,255,255,.08); } .hv2-nomilog-cta-stat:last-child { border-right: none; } .hv2-nomilog-cta-stat-num { font-size: 16px; font-weight: 900; font-family: 'Spline Sans', sans-serif; background: linear-gradient(135deg, var(--sq-shop-gold, #c9a84c), #e8d48a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hv2-nomilog-cta-stat-label { font-size: 8px; color: var(--sq-shop-muted, #5a5650); font-weight: 700; margin-top: 2px; letter-spacing: .08em; text-transform: uppercase; } /* フィードプレビュー */ .hv2-nomilog-previews { padding: 0 18px 4px; } .hv2-nomilog-preview { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; color: inherit; cursor: pointer; transition: opacity .15s; } .hv2-nomilog-preview:active { opacity: .7; } .hv2-nomilog-preview:last-child { border-bottom: none; } .hv2-nomilog-preview-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--sq-shop-c2, #1a1a24); border: 1px solid rgba(255,255,255,.08); overflow: hidden; } .hv2-nomilog-preview-avatar img { width: 100%; height: 100%; object-fit: cover; } .hv2-nomilog-preview-body { flex: 1; min-width: 0; } .hv2-nomilog-preview-top { display: flex; align-items: center; gap: 6px; } .hv2-nomilog-preview-name { font-size: 11px; font-weight: 800; color: var(--sq-shop-text, #e8e4dc); } .hv2-nomilog-preview-sake { font-size: 10px; font-weight: 700; color: var(--sq-shop-gold, #c9a84c); background: rgba(201,168,76,.15); padding: 1px 8px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .hv2-nomilog-preview-time { font-size: 9px; color: var(--sq-shop-muted, #5a5650); margin-left: auto; flex-shrink: 0; } .hv2-nomilog-preview-text { font-size: 11px; color: var(--sq-shop-sub, #8a8680); margin-top: 3px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Gold帯フッター */ .hv2-nomilog-cta-footer-split { display: flex; border-top: 1px solid rgba(201,168,76,.12); } .hv2-nomilog-cta-footer { display: flex; flex: 1; align-items: center; justify-content: center; gap: 5px; padding: 12px; font-size: 12px; font-weight: 900; color: var(--sq-shop-gold, #c9a84c); background: rgba(201,168,76,.15); text-decoration: none; transition: background .2s; } .hv2-nomilog-cta-footer-split .hv2-nomilog-cta-footer:first-child { border-right: 1px solid rgba(201,168,76,.12); } .hv2-nomilog-cta-footer:active { background: rgba(201,168,76,.25); } /* チップ */ .hv2-nomilog-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; } .hv2-nomilog-chip { padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.08); background: var(--sq-shop-c1, #13131a); color: var(--sq-shop-text, #e8e4dc); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s cubic-bezier(.34,1.56,.64,1); font-family: inherit; } .hv2-nomilog-chip.is-selected { background: var(--sq-shop-gold, #c9a84c); color: var(--sq-shop-bg, #0a0a0f); border-color: var(--sq-shop-gold, #c9a84c); transform: scale(1.08); box-shadow: 0 0 20px rgba(201,168,76,.5); } /* push-particle: 既存の .push-burst / .push-particle / sdv2_particleFly を再利用 */ /* チップ専用リング */ .hv2-nomilog-chip-ring { position: fixed; pointer-events: none; z-index: 9997; border: 2px solid var(--sq-shop-gold, #c9a84c); border-radius: 50%; animation: hv2-nomilog-ring .5s ease-out forwards; } @keyframes hv2-nomilog-ring { 0% { width: 10px; height: 10px; opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { width: 80px; height: 80px; opacity: 0; transform: translate(-50%,-50%) scale(1); } } /* Star burst text */ .hv2-nomilog-star-burst { position: fixed; pointer-events: none; z-index: 9999; font-size: 1.4rem; font-weight: 900; color: #f8bd2a; text-shadow: 0 0 20px rgba(248,189,42,.8); animation: sdv2_starBurst 1.5s cubic-bezier(.22,1,.36,1) forwards; white-space: nowrap; } /* ═══════════════════════════════════════════ #622 酒図鑑CTA — Museum Dark (Variant C) 横スクロール + マイルストーンバー Shop Design Tokens (--sq-shop-*) を使用 ═══════════════════════════════════════════ */ .hv2-zukan-cta { border-radius: 18px; overflow: hidden; background: var(--sq-shop-bg, #0a0a0f); border: 1px solid rgba(255,255,255,.08); color: var(--sq-shop-text, #e8e4dc); position: relative; } /* Top bar */ .hv2-zukan-cta-top { padding: 16px 18px 0; display: flex; justify-content: space-between; align-items: center; } .hv2-zukan-cta-tag { font-size: 9px; font-weight: 900; letter-spacing: .12em; color: var(--sq-shop-gold, #c9a84c); } .hv2-zukan-cta-weekly { font-size: 9px; font-weight: 700; color: #4ade80; display: flex; align-items: center; gap: 4px; } .hv2-zukan-cta-weekly-dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; animation: hv2ZukanPulse 1.5s infinite; } @keyframes hv2ZukanPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* Body */ .hv2-zukan-cta-body { padding: 8px 18px 0; } .hv2-zukan-cta-title { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 900; line-height: 1.35; color: #fff; } .hv2-zukan-cta-desc { font-size: 11px; color: var(--sq-shop-sub, #8a8680); margin-top: 6px; line-height: 1.5; } /* Milestone */ .hv2-zukan-cta-ms { padding: 14px 18px 0; } .hv2-zukan-cta-ms-row { display: flex; align-items: baseline; justify-content: space-between; } .hv2-zukan-cta-ms-count { font-size: 20px; font-weight: 900; font-family: 'Spline Sans', 'Inter', sans-serif; background: linear-gradient(135deg, var(--sq-shop-gold, #c9a84c), #e8d48a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hv2-zukan-cta-ms-count span { font-size: 10px; -webkit-text-fill-color: var(--sq-shop-sub, #8a8680); font-weight: 700; margin-left: 2px; } .hv2-zukan-cta-ms-goal { font-size: 9px; color: var(--sq-shop-muted, #5a5650); font-weight: 700; } .hv2-zukan-cta-ms-bar { height: 5px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; margin-top: 6px; } .hv2-zukan-cta-ms-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sq-shop-gold, #c9a84c), #e8d48a); transition: width 1.5s cubic-bezier(.4,0,.2,1); } .hv2-zukan-cta-ms-label { font-size: 9px; color: var(--sq-shop-sub, #8a8680); margin-top: 4px; text-align: right; } .hv2-zukan-cta-ms-label strong { color: var(--sq-shop-gold, #c9a84c); font-weight: 900; } /* Horizontal Scroll */ .hv2-zukan-cta-scroll-wrap { padding: 14px 0 10px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .hv2-zukan-cta-scroll-wrap::-webkit-scrollbar { display: none; } .hv2-zukan-cta-scroll { display: flex; gap: 10px; padding: 0 18px; min-width: max-content; } /* Cards */ .hv2-zukan-cta-card { width: 125px; flex-shrink: 0; background: var(--sq-shop-c1, #13131a); border-radius: 12px; border: 1px solid rgba(255,255,255,.08); overflow: hidden; transition: border-color .2s; cursor: pointer; text-decoration: none; color: inherit; display: block; } .hv2-zukan-cta-card:active { border-color: rgba(201,168,76,.25); transform: scale(.97); } .hv2-zukan-cta-card-img { height: 95px; overflow: hidden; position: relative; background: var(--sq-shop-c2, #1a1a24); } .hv2-zukan-cta-card-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.65); transition: filter .3s; } .hv2-zukan-cta-card:active .hv2-zukan-cta-card-img img { filter: brightness(.8); } .hv2-zukan-cta-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; background: linear-gradient(135deg, var(--sq-shop-c1, #13131a), var(--sq-shop-c2, #1a1a24)); } .hv2-zukan-cta-card-new { position: absolute; top: 5px; left: 5px; font-size: 7px; font-weight: 900; color: #fff; background: #22c55e; padding: 2px 6px; border-radius: 99px; letter-spacing: .3px; } .hv2-zukan-cta-card-body { padding: 8px 10px 10px; } .hv2-zukan-cta-card-tag { font-size: 7px; font-weight: 700; color: var(--sq-shop-gold, #c9a84c); letter-spacing: .1em; text-transform: uppercase; } .hv2-zukan-cta-card-name { font-family: 'Noto Serif JP', serif; font-size: 11px; font-weight: 700; line-height: 1.3; margin-top: 2px; color: var(--sq-shop-text, #e8e4dc); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hv2-zukan-cta-card-brew { font-size: 9px; color: var(--sq-shop-sub, #8a8680); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Footer split */ .hv2-zukan-cta-footer-split { display: flex; border-top: 1px solid rgba(201,168,76,.12); } .hv2-zukan-cta-footer { display: flex; flex: 1; align-items: center; justify-content: center; gap: 5px; padding: 12px; font-size: 12px; font-weight: 900; color: var(--sq-shop-gold, #c9a84c); background: rgba(201,168,76,.15); text-decoration: none; transition: background .2s; } .hv2-zukan-cta-footer:first-child { border-right: 1px solid rgba(201,168,76,.12); } .hv2-zukan-cta-footer:active { background: rgba(201,168,76,.25); } .hv2-zukan-cta-footer-xp { font-size: 8px; font-weight: 900; color: var(--sq-shop-gold, #c9a84c); opacity: .7; margin-left: 2px; }