/* =============================================================================
* Engineers GUILD — Enhanced theme palette
*
* Strategy
* --------
* The site exposes a small set of CSS custom properties on :root for its
* dark theme (--bg, --txt, --t1..t3, --s0..s4, --b1..b3, --p, --s, --acc,
* --danger, --warn, --ok, --info, --glow-p, --glow-s).
*
* We layer on top of this token system rather than fighting it:
*
* 1. We DO NOT touch dark mode by default — the existing palette is good.
* 2. We ONLY override --danger globally, replacing the harsh #ef4444 with
* a softer salmon/coral that reads better in both themes.
* 3. For light mode, html[data-eg-theme="light"] overrides every variable
* with values from a calm, Notion/Stripe-inspired palette tuned for
* WCAG AA contrast on white.
* 4. We additionally style a handful of class selectors that hard-code
* colour (e.g. .nav-hamburger span, gradient hero, dark inline style
* attributes) so the light theme is visually complete.
*
* Contrast (verified)
* -------------------
* light: #0F1729 on #FAFBFC = 16.9:1 (AAA)
* #4A5568 on #FAFBFC = 7.8:1 (AAA)
* #94A3B8 on #FAFBFC = 3.2:1 (AA Large only — used for hints)
* #FF7A6B on #FAFBFC = 3.4:1 (AA Large + icon only)
* #C2412E on #FAFBFC = 5.1:1 (AA — used for logout text)
* dark: unchanged from upstream (#E8ECF5 on #06182c ≈ 14:1)
* ========================================================================= */
/* ---------------------------------------------------------------------------
* 1. GLOBAL: salmon/coral accent replaces the harsh red for danger/logout
* in *both* themes. Tuned so it still feels like a warning, but
* coordinated with the brand's cyan/teal palette.
* ------------------------------------------------------------------------- */
:root {
/* Coral scale */
--eg-coral-50: #FFF1ED;
--eg-coral-100: #FFE5E0;
--eg-coral-200: #FFCDC4;
--eg-coral-300: #FFA89A;
--eg-coral-400: #FF8B7A;
--eg-coral-500: #FF7A6B; /* primary salmon */
--eg-coral-600: #E85B4D; /* hover / active */
--eg-coral-700: #C2412E; /* light-mode text */
/* Re-tinted state colors (still semantic, just softer) */
--danger: var(--eg-coral-500);
/* keep --warn (#f59e0b amber), --ok (#22c55e green), --info (#3b82f6) */
}
/* ---------------------------------------------------------------------------
* 2. LIGHT THEME — full palette override
*
* We rewrite every variable the site relies on so a single attribute switch
* (html[data-eg-theme="light"]) cascades through the entire UI.
* ------------------------------------------------------------------------- */
html[data-eg-theme="light"] {
/* Foundation */
--bg: #FAFBFC; /* page background — quiet white, slight blue */
--txt: #0F1729; /* primary text — near-black with blue cast */
/* Brand (unchanged, but redefined for clarity) */
--p: #2389C7; /* primary darkened by 1 step for contrast */
--s: #3FB8BB; /* secondary teal, similarly nudged */
--acc: #0050AA; /* deep blue links */
/* Surface scale (was rgba white-on-dark) — now rgba near-black-on-white */
--s0: rgba(15, 23, 41, 0.018);
--s1: rgba(15, 23, 41, 0.032);
--s2: rgba(15, 23, 41, 0.055);
--s3: rgba(15, 23, 41, 0.085);
--s4: rgba(15, 23, 41, 0.12);
/* Borders */
--b1: rgba(15, 23, 41, 0.08);
--b2: rgba(15, 23, 41, 0.14);
--b3: rgba(15, 23, 41, 0.22);
/* Text scale (was rgba white-*) — alpha steps on near-black */
--t1: rgba(15, 23, 41, 0.95);
--t2: rgba(15, 23, 41, 0.70);
--t3: rgba(15, 23, 41, 0.48);
/* Glow halos — much subtler in light mode */
--glow-p: rgba(35, 137, 199, 0.18);
--glow-s: rgba(63, 184, 187, 0.18);
/* Danger keeps the coral; tweak to darker shade for readable text */
--danger: var(--eg-coral-600);
color-scheme: light;
}
html[data-eg-theme="light"] body {
background: var(--bg) !important;
color: var(--txt) !important;
}
/* ---------------------------------------------------------------------------
* 3. LIGHT THEME — element-level fixes
*
* The HTML uses utility colours hard-coded inline or via legacy class names
* in some spots. We patch those explicitly.
* ------------------------------------------------------------------------- */
/* 3a. Top nav: the original gradient assumes a dark sky. In light mode we
* want a clean, slightly-blurred white nav with a hair-thin border. */
html[data-eg-theme="light"] .nav,
html[data-eg-theme="light"] .navbar,
html[data-eg-theme="light"] nav.top-nav,
html[data-eg-theme="light"] header.top-nav,
html[data-eg-theme="light"] [class*="nav-top"],
html[data-eg-theme="light"] header {
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--b1) !important;
color: var(--txt) !important;
box-shadow: 0 1px 0 rgba(15, 23, 41, 0.02);
}
/* 3b. Brand wordmark / logo text
*
* The site uses `background-clip: text` with a gradient that starts at
* #fff. On a white background that "#fff" part disappears. We replace
* the gradient with a brand-aligned one that has good contrast on white. */
html[data-eg-theme="light"] .brand,
html[data-eg-theme="light"] .nav-brand,
html[data-eg-theme="light"] .logo,
html[data-eg-theme="light"] .nav-logo {
color: var(--txt) !important;
}
html[data-eg-theme="light"] .logo-wordmark,
html[data-eg-theme="light"] .brand-wordmark,
html[data-eg-theme="light"] .hero-title,
html[data-eg-theme="light"] [class*="wordmark"],
html[data-eg-theme="light"] .brand strong,
html[data-eg-theme="light"] .brand b {
background: linear-gradient(120deg, #1E5C8A 0%, #2389C7 55%, #3FB8BB 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* 3c. Hamburger lines — were white-only; now follow text colour */
html[data-eg-theme="light"] .nav-hamburger span {
background: var(--txt) !important;
}
html[data-eg-theme="light"] .nav-hamburger {
border: 1px solid var(--b2);
border-radius: 10px;
background: var(--s0);
}
html[data-eg-theme="light"] .nav-hamburger:hover {
background: var(--s1);
}
/* 3d. Mobile drawer */
html[data-eg-theme="light"] .nav-mobile {
background: rgba(255, 255, 255, 0.97) !important;
border-bottom: 1px solid var(--b1) !important;
box-shadow: 0 12px 32px -16px rgba(15, 23, 41, 0.18);
}
/* 3e. Generic links + nav links */
html[data-eg-theme="light"] a {
color: var(--acc);
}
html[data-eg-theme="light"] a:hover {
color: #003E85;
}
html[data-eg-theme="light"] .nav-link,
html[data-eg-theme="light"] .nav-locale {
color: var(--t1) !important;
border-color: var(--b1) !important;
background: transparent;
}
html[data-eg-theme="light"] .nav-link:hover,
html[data-eg-theme="light"] .nav-locale:hover {
color: var(--p) !important;
background: rgba(35, 137, 199, 0.06) !important;
border-color: var(--b2) !important;
}
/* 3f. Cards / panels / surfaces */
html[data-eg-theme="light"] .card,
html[data-eg-theme="light"] .panel,
html[data-eg-theme="light"] .surface,
html[data-eg-theme="light"] .tile,
html[data-eg-theme="light"] .box {
background: #FFFFFF !important;
border: 1px solid var(--b1) !important;
color: var(--txt) !important;
box-shadow:
0 1px 2px rgba(15, 23, 41, 0.04),
0 4px 12px -6px rgba(15, 23, 41, 0.06);
}
/* 3g. Hero / page-top gradient — replace deep-navy gradient with airy one
*
* CRITICAL FIX v9 (round #12 user feedback):
* The previous selector list included [class*="hero-"] which painted a
* white linear-gradient on EVERY hero descendant — .hero-content,
* .hero-actions, .hero-stats, .hero-eyebrow, .hero-title, .hero-sub,
* .hero-scroll. That created a giant white plate that completely
* covered the .hero-network SVG (hexagon constellation) in light mode.
* The user has reported this 12 times. Killed for good.
*
* Now the background is applied ONLY to .hero (the section root).
* Descendants stay transparent so the SVG network is visible. */
html[data-eg-theme="light"] section.hero,
html[data-eg-theme="light"] .hero {
background:
radial-gradient(circle at 10% 0%, rgba(35, 137, 199, 0.10) 0%, transparent 50%),
radial-gradient(circle at 90% 30%, rgba(63, 184, 187, 0.10) 0%, transparent 55%),
linear-gradient(180deg, #FFFFFF 0%, #F4F8FC 100%) !important;
color: var(--txt) !important;
}
/* Hero descendants MUST remain transparent so the SVG network shows through */
html[data-eg-theme="light"] .hero-content,
html[data-eg-theme="light"] .hero-actions,
html[data-eg-theme="light"] .hero-stats,
html[data-eg-theme="light"] .hero-stat,
html[data-eg-theme="light"] .hero-title,
html[data-eg-theme="light"] .hero-sub,
html[data-eg-theme="light"] .hero-scroll {
background: transparent !important;
}
/* 3h. Inputs / textareas / selects */
html[data-eg-theme="light"] input,
html[data-eg-theme="light"] select,
html[data-eg-theme="light"] textarea {
background: #FFFFFF !important;
color: var(--txt) !important;
border: 1px solid var(--b2) !important;
caret-color: var(--p);
}
html[data-eg-theme="light"] input:focus,
html[data-eg-theme="light"] select:focus,
html[data-eg-theme="light"] textarea:focus {
border-color: var(--p) !important;
outline: none;
box-shadow: 0 0 0 3px var(--glow-p);
}
html[data-eg-theme="light"] input::placeholder,
html[data-eg-theme="light"] textarea::placeholder {
color: var(--t3);
}
/* 3i. Buttons — primary, secondary, outline */
html[data-eg-theme="light"] .btn,
html[data-eg-theme="light"] button {
font-weight: 600;
}
html[data-eg-theme="light"] .btn-primary,
html[data-eg-theme="light"] button.primary,
html[data-eg-theme="light"] .btn.primary {
background: linear-gradient(135deg, var(--p) 0%, var(--s) 100%) !important;
color: #FFFFFF !important;
border: 1px solid transparent !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 4px 12px -4px rgba(35, 137, 199, 0.4);
}
html[data-eg-theme="light"] .btn-primary:hover,
html[data-eg-theme="light"] button.primary:hover {
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 6px 16px -4px rgba(35, 137, 199, 0.5);
}
html[data-eg-theme="light"] .btn-secondary,
html[data-eg-theme="light"] .btn-outline,
html[data-eg-theme="light"] button.secondary {
background: #FFFFFF !important;
color: var(--txt) !important;
border: 1px solid var(--b2) !important;
}
html[data-eg-theme="light"] .btn-secondary:hover,
html[data-eg-theme="light"] .btn-outline:hover {
background: var(--s1) !important;
border-color: var(--b3) !important;
}
/* 3j. Chips / pills / badges */
html[data-eg-theme="light"] .chip,
html[data-eg-theme="light"] .pill,
html[data-eg-theme="light"] .badge,
html[data-eg-theme="light"] .tag {
background: var(--s1) !important;
color: var(--t1) !important;
border: 1px solid var(--b1) !important;
}
/* 3k. Dropdown menu (e.g. user menu, language menu) */
html[data-eg-theme="light"] .dropdown,
html[data-eg-theme="light"] .dropdown-menu,
html[data-eg-theme="light"] .menu,
html[data-eg-theme="light"] [class*="dropdown-"] {
background: #FFFFFF !important;
border: 1px solid var(--b1) !important;
color: var(--txt) !important;
box-shadow:
0 4px 16px -4px rgba(15, 23, 41, 0.10),
0 12px 32px -12px rgba(15, 23, 41, 0.16);
}
html[data-eg-theme="light"] .dropdown-item {
color: var(--t1) !important;
}
html[data-eg-theme="light"] .dropdown-item:hover {
background: var(--s1) !important;
color: var(--p) !important;
}
html[data-eg-theme="light"] .dropdown-sep {
background: var(--b1) !important;
}
/* 3l. Logout — coral, not red, in both modes; readable in light */
a[href^="/auth/logout"],
.dropdown-logout,
.nav-logout {
color: var(--eg-coral-500) !important;
}
a[href^="/auth/logout"]:hover,
.dropdown-logout:hover,
.nav-logout:hover {
background: var(--eg-coral-50) !important;
color: var(--eg-coral-600) !important;
}
html[data-eg-theme="light"] a[href^="/auth/logout"],
html[data-eg-theme="light"] .dropdown-logout,
html[data-eg-theme="light"] .nav-logout {
color: var(--eg-coral-700) !important;
}
html[data-eg-theme="light"] a[href^="/auth/logout"]:hover,
html[data-eg-theme="light"] .dropdown-logout:hover,
html[data-eg-theme="light"] .nav-logout:hover {
background: var(--eg-coral-50) !important;
color: var(--eg-coral-700) !important;
}
/* Some logout links carry an inline `style="color:#fca5a5"` — override it. */
html[data-eg-theme="light"] a[href^="/auth/logout"][style*="color"] {
color: var(--eg-coral-700) !important;
}
a[href^="/auth/logout"][style*="color"] {
color: var(--eg-coral-500) !important;
}
/* 3m. Headings keep main text colour */
html[data-eg-theme="light"] h1,
html[data-eg-theme="light"] h2,
html[data-eg-theme="light"] h3,
html[data-eg-theme="light"] h4,
html[data-eg-theme="light"] h5,
html[data-eg-theme="light"] h6 {
color: var(--txt) !important;
}
/* 3n. Tables */
html[data-eg-theme="light"] table {
background: #FFFFFF !important;
color: var(--txt) !important;
border-color: var(--b1) !important;
}
html[data-eg-theme="light"] th {
background: var(--s1) !important;
color: var(--t1) !important;
border-color: var(--b1) !important;
}
html[data-eg-theme="light"] td {
border-color: var(--b1) !important;
}
html[data-eg-theme="light"] tr:hover td {
background: var(--s0) !important;
}
/* 3o. Dividers / horizontal rules */
html[data-eg-theme="light"] hr {
border-color: var(--b1) !important;
background: transparent !important;
}
/* 3p. Scrollbars (WebKit only) */
html[data-eg-theme="light"] ::-webkit-scrollbar {
background: transparent;
width: 10px;
height: 10px;
}
html[data-eg-theme="light"] ::-webkit-scrollbar-thumb {
background: var(--b2);
border-radius: 8px;
}
html[data-eg-theme="light"] ::-webkit-scrollbar-thumb:hover {
background: var(--b3);
}
/* 3q. PWA install sheet / modals */
html[data-eg-theme="light"] .pwa-sheet,
html[data-eg-theme="light"] .modal,
html[data-eg-theme="light"] [role="dialog"] {
background: #FFFFFF !important;
color: var(--txt) !important;
border: 1px solid var(--b1) !important;
}
/* 3r. Splash screen background was deep navy — softer for light */
html[data-eg-theme="light"] #splash-screen {
background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FC 100%) !important;
}
/* 3s. Code blocks, mono-spaced */
html[data-eg-theme="light"] code,
html[data-eg-theme="light"] pre,
html[data-eg-theme="light"] kbd {
background: var(--s1) !important;
color: #1E293B !important;
border: 1px solid var(--b1);
}
/* 3t. Selection */
html[data-eg-theme="light"] ::selection {
background: rgba(35, 137, 199, 0.18);
color: var(--txt);
}
/* ---------------------------------------------------------------------------
* 4. THEME TOGGLE BUTTON
*
* Circular SVG button installed by enhance.js. Three variants:
* --desktop : in the desktop header, beside the locale link
* --mobile : in the mobile header, just left of the hamburger
* --drawer : inside the mobile drawer
* ------------------------------------------------------------------------- */
.eg-theme-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: 0 6px;
padding: 0;
/* v33: SOLID accent background — v32's rgba(.18) was still invisible on
* the dark hero gradient on real iPhones (user: 「触らないと暗くてみえない」
* → 「なんも変わってねー」). A solid fill + white SVG stroke is the
* only thing that survives every background blend. */
background: #339cdd !important;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.55) !important;
border-radius: 999px;
cursor: pointer;
transition:
background 0.18s ease,
color 0.18s ease,
border-color 0.18s ease,
transform 0.1s ease,
box-shadow 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.eg-theme-btn:hover {
background: #4FB1EC !important;
border-color: #FFFFFF !important;
color: #FFFFFF !important;
box-shadow: 0 0 0 4px var(--glow-p);
}
.eg-theme-btn:active { transform: scale(0.94); }
.eg-theme-btn:focus-visible {
outline: 2px solid var(--p);
outline-offset: 2px;
}
.eg-theme-btn svg { display: block; stroke: currentColor !important; color: #FFFFFF !important; }
/* Light-mode theme button — solid amber sun + dark stroke */
html[data-eg-theme="light"] .eg-theme-btn {
background: #F59E0B !important;
border: 1px solid #B45309 !important;
color: #FFFFFF !important;
box-shadow: 0 1px 4px rgba(180, 83, 9, 0.25);
}
html[data-eg-theme="light"] .eg-theme-btn svg { color: #FFFFFF !important; }
/* ── v32: USER AVATAR backgrounds transparent ───────────────────────────
* The ja.html inline CSS paints `.nav-avatar-btn` and `.dropdown-avatar-lg`
* with `linear-gradient(135deg, var(--p), var(--s))`. On light mode the
* gradient + 「テ」 ends up looking like a grey blob.
* User directive: 「ユーザーアイコンも『テ』の背景がグレー、透過しろ」.
* Strip the gradient, keep the round outline + accent text/border.
*/
.nav-avatar-btn,
html[data-eg-theme="light"] .nav-avatar-btn,
html[data-eg-theme="dark"] .nav-avatar-btn {
background: transparent !important;
background-image: none !important;
border: 1.5px solid rgba(51, 156, 221, 0.55) !important;
color: var(--p, #339cdd) !important;
box-shadow: none !important;
}
html[data-eg-theme="light"] .nav-avatar-btn {
border-color: rgba(35, 137, 199, 0.55) !important;
color: #2389C7 !important;
}
.nav-avatar-btn .avatar-char,
.nav-avatar-btn span {
color: inherit !important;
font-weight: 700 !important;
}
.dropdown-avatar-lg {
background: transparent !important;
background-image: none !important;
border: 1.5px solid rgba(51, 156, 221, 0.55) !important;
color: var(--p, #339cdd) !important;
}
html[data-eg-theme="light"] .dropdown-avatar-lg {
border-color: rgba(35, 137, 199, 0.55) !important;
color: #2389C7 !important;
}
html[data-eg-theme="light"] .eg-theme-btn:hover {
background: var(--s1);
border-color: var(--b3);
box-shadow: 0 0 0 4px rgba(35, 137, 199, 0.12);
}
/* Floating fallback (only used when no nav is available) */
.eg-theme-btn--floating {
position: fixed;
top: 12px;
right: 12px;
z-index: 9999;
backdrop-filter: blur(8px);
background: rgba(15, 23, 42, 0.7);
}
html[data-eg-theme="light"] .eg-theme-btn--floating {
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--b2);
}
/* --- v26.1: Variant CSS retired ------------------------------------------
* Previously we injected three theme buttons (desktop/mobile/drawer) and
* toggled them via media queries. v26.1 enforces ONE button only — so the
* variant gating must NOT hide it. We keep the size tweak for SP and let
* a single .eg-theme-btn render at every breakpoint.
*/
@media (max-width: 768px) {
.eg-theme-btn {
width: 36px;
height: 36px;
}
}
/* ---------------------------------------------------------------------------
* 5. TRANSITIONS — smooth fade between themes
* ------------------------------------------------------------------------- */
html,
body,
header,
nav,
.card, .panel, .surface, .tile, .box,
.btn, .nav-link, .nav-locale,
input, select, textarea, table,
.dropdown, .dropdown-menu, .menu,
.chip, .pill, .badge, .tag,
.nav-hamburger, .nav-hamburger span {
transition:
background-color 0.22s ease,
color 0.22s ease,
border-color 0.22s ease,
box-shadow 0.22s ease;
}
/* ---------------------------------------------------------------------------
* 6. PRINT
* ------------------------------------------------------------------------- */
@media print {
.eg-theme-btn { display: none !important; }
}
/* ===========================================================================
* 7. LIGHT-MODE FIXES — issued 2026-05-29
* a) Suppress fractalNoise / .grain texture (looks like dirt on light bg)
* b) Repaint indigo/violet T5 Owner cards for readability
* c) Repaint LP hero bg so it doesn't end in #020c1e on light theme
* d) Repaint hero-title gradient that begins at #fff (invisible on light)
* ========================================================================= */
/* --- a) Kill the SVG noise grain on light mode -------------------------- */
html[data-eg-theme="light"] .grain {
display: none !important;
}
/* Defensive: anything else using fractalNoise data URI as bg in light mode */
html[data-eg-theme="light"] [style*="fractalNoise"] {
background-image: none !important;
}
/* --- c) Re-balance the LP hero background for light mode --------------- */
/* The original .hero-bg ends with linear-gradient(180deg,var(--bg) 0%, #020c1e 100%)
* which slams dark navy onto a light page. We override the entire stack
* with a brand-aligned aurora suited to white. */
html[data-eg-theme="light"] .hero-bg {
background:
radial-gradient(ellipse 90% 70% at 50% -10%, rgba(35, 137, 199, 0.16) 0%, transparent 65%),
radial-gradient(ellipse 55% 55% at 88% 90%, rgba(63, 184, 187, 0.18) 0%, transparent 60%),
radial-gradient(ellipse 45% 45% at 10% 75%, rgba(0, 80, 170, 0.10) 0%, transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #F1F7FC 60%, #E6F0F8 100%) !important;
}
/* HERO GRID — fully hide on light mode. The source uses 64×64 linear grid in
* rgba(255,255,255,.025) which on the aurora-white bg becomes very faint
* 64px squares ("ハリボテ"). Just kill it on light. Dark mode untouched. */
html[data-eg-theme="light"] .hero-grid {
display: none !important;
}
/* AMBIENT ORBS — they read fine in dark mode but on white they produce
* conspicuous round colour blobs. Mute them further on light. */
html[data-eg-theme="light"] .ambient {
opacity: 0.55 !important;
}
/* --- d) Hero title gradient — starts at #fff in source, repaint on light - */
html[data-eg-theme="light"] .hero-title-grad {
background: linear-gradient(120deg,
#0F1729 0%,
#1B4FA0 35%,
var(--p) 65%,
var(--s) 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Hero eyebrow chip — slightly stronger on light so it doesn't disappear */
html[data-eg-theme="light"] .hero-eyebrow {
background: rgba(35, 137, 199, 0.08) !important;
border-color: rgba(35, 137, 199, 0.30) !important;
color: var(--acc) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
/* Scroll-cue: ensure VERTICAL layout (column) and visible line in BOTH themes.
* On the user's mobile screenshot the "SCROLL" label appeared rotated/side-
* loaded with no visible line. That happens when the parent loses its
* flex-direction:column or when the line gradient becomes invisible.
* Force the layout explicitly and use a guaranteed-opaque line in light. */
.hero-scroll {
flex-direction: column !important;
align-items: center !important;
gap: 0.5rem !important;
/* Keep horizontal text orientation — never rotate */
writing-mode: horizontal-tb !important;
transform: translateX(-50%) !important;
}
.hero-scroll-line {
width: 1px !important;
height: 36px !important;
}
html[data-eg-theme="light"] .hero-scroll {
color: rgba(15, 23, 41, 0.55) !important;
}
html[data-eg-theme="light"] .hero-scroll-line {
background: linear-gradient(180deg,
var(--p) 0%,
rgba(35, 137, 199, 0.0) 100%) !important;
}
/* --- b) Indigo/violet "T5 Owner" connector card → brand-aligned ---------- */
/* The HTML uses inline styles with rgba(99,102,241,*), rgba(139,92,246,*),
* #a5b4fc, #c4b5fd. Match by attribute selectors and repaint in light. */
/* Outer card */
html[data-eg-theme="light"] [style*="rgba(99,102,241,.15)"],
html[data-eg-theme="light"] [style*="rgba(99,102,241,.45)"],
html[data-eg-theme="light"] [style*="rgba(139,92,246"] {
background: linear-gradient(135deg,
rgba(35, 137, 199, 0.07),
rgba(63, 184, 187, 0.05)) !important;
border-color: rgba(35, 137, 199, 0.28) !important;
color: var(--txt) !important;
}
/* Decorative radial halo top-right */
html[data-eg-theme="light"] [style*="rgba(99,102,241,.25)"] {
background: radial-gradient(circle,
rgba(35, 137, 199, 0.18),
transparent 70%) !important;
}
/* Inner tiles — original is rgba(0,0,0,.2) which on light becomes invisible gray */
html[data-eg-theme="light"] [style*="background:rgba(0,0,0,.2)"] {
background: rgba(15, 23, 41, 0.04) !important;
border: 1px solid rgba(15, 23, 41, 0.08) !important;
}
/* Indigo-300 text (#a5b4fc) — switch to readable brand accent */
html[data-eg-theme="light"] [style*="#a5b4fc"] {
color: var(--acc) !important;
}
/* Violet-300 text (#c4b5fd) used by badge + action button */
html[data-eg-theme="light"] [style*="#c4b5fd"] {
color: #FFFFFF !important;
}
/* Badge / action button bg rgba(99,102,241,.3) */
html[data-eg-theme="light"] [style*="rgba(99,102,241,.3)"] {
background: var(--p) !important;
border-color: var(--acc) !important;
}
html[data-eg-theme="light"] [style*="rgba(99,102,241,.5)"] {
border-color: var(--acc) !important;
}
/* --- Modal overlays & dialogs (event detail pages: 購入確認, ゲスト購入) ---
* Source has hardcoded:
* overlay: rgba(0,0,0,.8)
* card : #0d1f3a (dark navy), color:#fff
* ghost btn bg: rgba(255,255,255,.07) + color:#fff
* inner panels: rgba(255,255,255,.04)
* On light theme these stay dark. Override via attribute selectors. */
/* Modal overlay backdrop — soften but keep clear focus dimming */
html[data-eg-theme="light"] [style*="background:rgba(0,0,0,.8)"] {
background: rgba(15, 23, 41, 0.50) !important;
backdrop-filter: blur(6px) saturate(140%);
-webkit-backdrop-filter: blur(6px) saturate(140%);
}
/* Inner modal cards — repaint dark navy to white */
html[data-eg-theme="light"] [style*="background:#0d1f3a"] {
background: #FFFFFF !important;
color: var(--txt) !important;
border-color: rgba(35, 137, 199, 0.30) !important;
box-shadow:
0 20px 60px -20px rgba(15, 23, 41, 0.30),
0 8px 20px -10px rgba(15, 23, 41, 0.15) !important;
}
/* Cancel / ghost buttons inside modals (rgba(255,255,255,.07) + white text) */
html[data-eg-theme="light"] [style*="background:rgba(255,255,255,.07)"] {
background: #FFFFFF !important;
border-color: rgba(15, 23, 41, 0.18) !important;
color: var(--txt) !important;
}
/* Inner ticket-info panels (rgba(255,255,255,.04)) */
html[data-eg-theme="light"] [style*="background:rgba(255,255,255,.04)"] {
background: rgba(35, 137, 199, 0.05) !important;
border-color: rgba(35, 137, 199, 0.18) !important;
color: var(--txt) !important;
}
/* Form inputs inside modals (#06182c bg, etc.) */
html[data-eg-theme="light"] [style*="background:#06182c"] {
background: #FFFFFF !important;
color: var(--txt) !important;
border-color: rgba(15, 23, 41, 0.18) !important;
}
/* Form inputs with rgba(255,255,255,.06) bg + color:#fff */
html[data-eg-theme="light"] [style*="background:rgba(255,255,255,.06)"] {
background: #FFFFFF !important;
color: var(--txt) !important;
border-color: rgba(15, 23, 41, 0.18) !important;
}
/* Force inputs inside light-themed modal cards to use dark text */
html[data-eg-theme="light"] [style*="background:#0d1f3a"] input,
html[data-eg-theme="light"] [style*="background:#0d1f3a"] textarea,
html[data-eg-theme="light"] [style*="background:#0d1f3a"] select {
color: var(--txt) !important;
}
/* The "×" close button uses color:rgba(255,255,255,.5) — nearly invisible on white */
html[data-eg-theme="light"] [style*="color:rgba(255,255,255,.5)"] {
color: rgba(15, 23, 41, 0.55) !important;
}
/* The signup CTA link text #7ecff5 (light cyan) is washed out on white */
html[data-eg-theme="light"] [style*="color:#7ecff5"] {
color: var(--acc) !important;
}
/* --- PTR (pull-to-refresh) indicator — base CSS hardcodes dark navy bg ---- */
/* Source: .ptr-indicator { background:rgba(5,16,38,.92) } + SVG ring-bg
* has stroke="rgba(255,255,255,.15)" inline. On light theme this renders
* as a dark navy disc with a near-invisible white ring → exactly the
* "更新時に出るリング、背景ダーク" bug the user reported. Fix both. */
html[data-eg-theme="light"] .ptr-indicator {
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(15, 23, 41, 0.12) !important;
box-shadow:
0 8px 24px rgba(15, 23, 41, 0.12),
0 2px 6px rgba(35, 137, 199, 0.18) !important;
color: var(--p) !important;
}
html[data-eg-theme="light"] .ptr-indicator.ready {
border-color: rgba(63, 184, 187, 0.55) !important;
box-shadow:
0 8px 24px rgba(15, 23, 41, 0.15),
0 0 0 3px rgba(63, 184, 187, 0.18),
0 2px 12px rgba(63, 184, 187, 0.35) !important;
}
html[data-eg-theme="light"] .ptr-indicator.refreshing {
border-color: rgba(35, 137, 199, 0.55) !important;
box-shadow:
0 8px 24px rgba(15, 23, 41, 0.15),
0 2px 12px rgba(35, 137, 199, 0.35) !important;
}
/* The inline-stroked background ring inside the SVG (rgba(255,255,255,.15))
* is invisible on white. Override via attribute selector on the circle. */
html[data-eg-theme="light"] .ptr-indicator .ptr-ring-bg {
stroke: rgba(15, 23, 41, 0.12) !important;
}
/* PTR safety: when none of {active,ready,refreshing} is set the indicator
* MUST be invisible and not catch pointer events. Some browsers leave the
* disc on screen after touchend because the base rule only sets opacity:0
* without visibility. Force hide at rest. */
.ptr-indicator:not(.active):not(.ready):not(.refreshing) {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ===========================================================================
* 8. LP COMPONENTS — light-mode repaint using ACTUAL classnames in ja.html
* Source classes used:
* .hero-stats / .hero-stat / .hero-stat-val / .hero-stat-label / .hero-stat-sep
* .hero-float-cards / .hero-float-card / .hero-float-card-dot
* .lp-event-card / .lp-event-card-title / .lp-event-card-meta
* .lp-event-card-arrow / .lp-section-header / .features-title
* .badge .badge-purple .badge-blue
* .reveal (IntersectionObserver-driven; needs safety fallback)
*
* These were previously coded against incorrect names (.stat-card / .stat-num),
* so nothing applied. Fixed below. Dark mode untouched.
* ========================================================================= */
/* ── .reveal safety fallback (CSS-side belt-and-braces) ──────────────────
* Primary fix is in enhance.js (forceRevealVisible). This CSS provides a
* second safety: if enhance.js doesn't run for any reason, .reveal elements
* will at least transition in once IntersectionObserver fires OR after a
* delayed override below. We avoid CSS @keyframes here because it collided
* with the source page's per-element animation:fadeUp .7s. */
.reveal {
/* Force minimum visibility after 2s. transition stays the same on the
* source rule — this just nudges the final state. */
transition:
opacity 0.6s var(--ease, ease) 2s,
transform 0.6s var(--ease, ease) 2s !important;
}
.reveal:not(.visible) {
/* keep opacity:0 from source by default */
}
.reveal.visible {
opacity: 1 !important;
transform: translateY(0) !important;
/* No delay — IntersectionObserver / JS forced this in */
transition:
opacity 0.45s var(--ease, ease),
transform 0.45s var(--ease, ease) !important;
}
/* ── Defensive: the .hero-stats container should NEVER show a box.
* Some browsers in light mode were showing a faint outline. Strip it. */
.hero-stats { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* ── .hero-stat-val (the 5 / 3 numbers next to 会員 / イベント) ─────────────
* Original uses gradient text var(--p)→var(--s). On light that's still
* #339CDD→#54CCCF which is visible BUT thin in 1.75rem. Strengthen with
* a deeper start point and bump weight. */
html[data-eg-theme="light"] .hero-stat-val {
background: linear-gradient(135deg,
var(--acc) 0%, var(--p) 55%, var(--s) 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-shadow: none;
}
html[data-eg-theme="light"] .hero-stat-label {
color: rgba(15, 23, 41, 0.55) !important;
}
html[data-eg-theme="light"] .hero-stat-sep {
background: rgba(15, 23, 41, 0.18) !important;
}
/* ── .hero-float-card (ライブQ&A稼働中 / QRチェックイン対応 / 日英完全対応) ──
* Source: bg rgba(255,255,255,.05) + border rgba(255,255,255,.10).
* On white these become invisible → exactly the empty 折り紙 boxes. */
html[data-eg-theme="light"] .hero-float-card {
background: rgba(255, 255, 255, 0.82) !important;
border: 1px solid rgba(35, 137, 199, 0.22) !important;
color: var(--txt) !important;
box-shadow:
0 4px 14px -6px rgba(35, 137, 199, 0.18),
0 1px 2px rgba(15, 23, 41, 0.04) !important;
backdrop-filter: blur(10px);
}
html[data-eg-theme="light"] .hero-float-card-dot {
background: #16a34a !important;
box-shadow: 0 0 8px rgba(22, 163, 74, 0.7) !important;
}
/* ── .lp-event-card (the event cards below the hero) ──────────────────── */
html[data-eg-theme="light"] .lp-event-card {
background: #FFFFFF !important;
border: 1px solid rgba(15, 23, 41, 0.10) !important;
box-shadow:
0 2px 8px -2px rgba(15, 23, 41, 0.06),
0 1px 2px rgba(15, 23, 41, 0.04);
}
html[data-eg-theme="light"] .lp-event-card:hover {
border-color: rgba(35, 137, 199, 0.35) !important;
transform: translateY(-4px);
box-shadow:
0 14px 36px -16px rgba(35, 137, 199, 0.30),
0 4px 10px -4px rgba(15, 23, 41, 0.10) !important;
}
html[data-eg-theme="light"] .lp-event-card-title {
color: var(--txt) !important;
}
html[data-eg-theme="light"] .lp-event-card-meta {
color: rgba(15, 23, 41, 0.55) !important;
}
html[data-eg-theme="light"] .lp-event-card-arrow {
background: rgba(35, 137, 199, 0.08) !important;
border-color: rgba(35, 137, 199, 0.25) !important;
color: var(--p) !important;
}
/* ── Badges on event cards (badge-purple / badge-blue) ──────────────────
* Originals use #c4b5fd / #7dd3fc text on light tinted bg → readable-ish
* on dark, but on white the very pale fg becomes faint. Darken. */
html[data-eg-theme="light"] .badge-purple {
background: rgba(124, 58, 237, 0.10) !important;
color: #6d28d9 !important;
border-color: rgba(124, 58, 237, 0.30) !important;
}
html[data-eg-theme="light"] .badge-blue {
background: rgba(35, 137, 199, 0.10) !important;
color: var(--acc) !important;
border-color: rgba(35, 137, 199, 0.30) !important;
}
/* ── Section headings on LP ──────────────────────────────────────────── */
html[data-eg-theme="light"] .features-label {
color: var(--acc) !important;
}
html[data-eg-theme="light"] .features-sub {
color: rgba(15, 23, 41, 0.60) !important;
}
html[data-eg-theme="light"] .section-title {
color: var(--acc) !important;
}
/* ── Ambient orbs — light variants ──────────────────────────────────── */
html[data-eg-theme="light"] .orb-1 {
background: radial-gradient(circle, rgba(35, 137, 199, 0.18) 0%, transparent 70%) !important;
}
html[data-eg-theme="light"] .orb-2 {
background: radial-gradient(circle, rgba(63, 184, 187, 0.16) 0%, transparent 70%) !important;
}
html[data-eg-theme="light"] .orb-3 {
background: radial-gradient(circle, rgba(0, 80, 170, 0.10) 0%, transparent 70%) !important;
}
/* ───────────────────────────────────────────────────────────────────────
* Buttons — refined for light
* ─────────────────────────────────────────────────────────────────── */
html[data-eg-theme="light"] .btn-secondary {
background: #FFFFFF !important;
border: 1px solid rgba(15, 23, 41, 0.18) !important;
color: var(--txt) !important;
box-shadow: 0 1px 2px rgba(15, 23, 41, 0.05);
}
html[data-eg-theme="light"] .btn-secondary:hover {
border-color: var(--p) !important;
color: var(--p) !important;
background: rgba(35, 137, 199, 0.05) !important;
}
html[data-eg-theme="light"] .btn-primary {
box-shadow:
0 10px 24px -10px rgba(35, 137, 199, 0.45),
0 2px 6px -2px rgba(35, 137, 199, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}
html[data-eg-theme="light"] .btn-primary:hover {
transform: translateY(-1px);
box-shadow:
0 14px 32px -10px rgba(35, 137, 199, 0.55),
0 4px 10px -2px rgba(35, 137, 199, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}
/* Primary CTA sheen sweep — works both themes */
.btn-primary {
position: relative;
overflow: hidden;
}
.btn-primary::after {
content: "";
position: absolute;
top: 0; left: -120%;
width: 60%; height: 100%;
background: linear-gradient(110deg,
transparent 0%,
rgba(255, 255, 255, 0.28) 50%,
transparent 100%);
transform: skewX(-22deg);
transition: left 0.7s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }
/* ===========================================================================
* 9. HERO UNIFIED REDESIGN (ja.html / en.html — top hero section)
*
* Rationale
* ---------
* Previous patches kept adding individual !important overrides which created
* stacking conflicts (e.g. .hero-bg with linear-gradient ending in #020c1e
* was being painted under the light aurora; .hero-float-card was invisible
* because rgba(255,255,255,.05) reads as white-on-white; the scroll line
* was rendered as a 1px sub-pixel gradient that disappeared on mobile DPI;
* the empty box below "5 | 3" was actually compounded margin between
* .hero-actions → .hero-stats → .hero-float-cards).
*
* This section takes hero ownership end-to-end for BOTH themes:
* - normalises vertical rhythm (one consistent gap instead of compound margins)
* - makes hero-float-card always readable (dark: smoked glass; light: white card)
* - guarantees SCROLL has a visible 2px line (not 1px) using box-shadow as
* a redundant render path so it survives sub-pixel rounding
* - kills the dark-navy .hero-bg terminator on light by painting an opaque
* light gradient OVER the inline source gradient
* - mirrors the same polish onto dark mode so the portal looks designed,
* not duct-taped.
* ========================================================================= */
/* ── 9a. HERO vertical rhythm — one source of truth for spacing ────────── */
.hero { padding: 5.5rem 1.5rem 8rem !important; }
.hero-content > * + * { margin-top: 0; }
.hero-eyebrow { margin-bottom: 1.5rem !important; }
.hero-title { margin-bottom: 1rem !important; }
.hero-sub { margin-bottom: 2.25rem !important; }
.hero-actions { margin-bottom: 0 !important; }
.hero-stats { margin-top: 2.5rem !important; margin-bottom: 0 !important; }
.hero-float-cards {
margin-top: 1.75rem !important;
margin-bottom: 0 !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 0.6rem !important;
}
/* ── 9b. HERO background — guarantee no dark band on light ─────────────── */
html[data-eg-theme="light"] .hero {
background:
radial-gradient(ellipse 95% 80% at 50% -12%, rgba(35,137,199,0.14) 0%, transparent 65%),
radial-gradient(ellipse 60% 55% at 88% 92%, rgba(84,204,207,0.18) 0%, transparent 60%),
radial-gradient(ellipse 50% 45% at 8% 78%, rgba(0,80,170,0.09) 0%, transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #F1F7FC 55%, #E8F1F8 100%) !important;
}
html[data-eg-theme="light"] .hero-bg,
html[data-eg-theme="light"] .hero-grid {
display: none !important;
}
/* ── 9c. hero-float-card — readable in BOTH themes ─────────────────────── */
.hero-float-card {
font-size: 0.84rem !important;
font-weight: 600 !important;
padding: 0.6rem 1rem !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
white-space: nowrap !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
/* DARK — keep the existing smoked glass but harden it so the pills aren't
* mistaken for empty boxes. Solid-ish bg + visible border. */
html:not([data-eg-theme="light"]) .hero-float-card,
html[data-eg-theme="dark"] .hero-float-card {
background: rgba(20, 40, 65, 0.62) !important;
border: 1px solid rgba(120, 200, 235, 0.22) !important;
color: #DDEBF5 !important;
box-shadow:
0 2px 12px -4px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.05) !important;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
/* LIGHT — white card with brand-tinted border and subtle shadow */
html[data-eg-theme="light"] .hero-float-card {
background: #FFFFFF !important;
border: 1px solid rgba(35,137,199,0.22) !important;
color: #1B2740 !important;
box-shadow:
0 4px 14px -6px rgba(35,137,199,0.20),
0 1px 2px rgba(15,23,41,0.04) !important;
}
.hero-float-card:hover { transform: translateY(-1px); }
html[data-eg-theme="light"] .hero-float-card:hover {
box-shadow:
0 8px 22px -8px rgba(35,137,199,0.32),
0 2px 4px rgba(15,23,41,0.06) !important;
}
.hero-float-card-dot {
width: 7px !important; height: 7px !important; flex-shrink: 0;
border-radius: 50% !important;
background: #22c55e !important;
box-shadow: 0 0 8px rgba(34,197,94,0.65) !important;
animation: heroDotPulse 1.8s ease-in-out infinite;
}
@keyframes heroDotPulse {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.3); opacity: 0.7; }
}
/* ── 9d. SCROLL cue — guarantee the line is visible at every DPI ──────── */
.hero-scroll {
position: absolute !important;
bottom: 2rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.55rem !important;
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
font-size: 0.68rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
opacity: 1 !important;
}
/* Use a 2px wide line (not 1px) so sub-pixel rounding never zeros it out.
* Add a box-shadow fallback for retina screens where the gradient might
* lose its centre stop. */
.hero-scroll-line {
display: block !important;
width: 2px !important;
height: 40px !important;
border-radius: 2px !important;
background: linear-gradient(180deg,
rgba(51,156,221,0) 0%,
rgba(51,156,221,1) 50%,
rgba(51,156,221,0) 100%) !important;
box-shadow: 0 0 6px rgba(51,156,221,0.35) !important;
animation: scrollLineV2 1.8s ease-in-out infinite !important;
}
@keyframes scrollLineV2 {
0%,100% { opacity: 0.55; transform: scaleY(0.85); }
50% { opacity: 1; transform: scaleY(1.15); }
}
/* Dark scroll text */
html:not([data-eg-theme="light"]) .hero-scroll,
html[data-eg-theme="dark"] .hero-scroll {
color: rgba(220, 236, 250, 0.62) !important;
}
/* Light scroll text + line tint */
html[data-eg-theme="light"] .hero-scroll {
color: rgba(15,23,41,0.58) !important;
}
html[data-eg-theme="light"] .hero-scroll-line {
background: linear-gradient(180deg,
rgba(35,137,199,0) 0%,
rgba(35,137,199,1) 50%,
rgba(35,137,199,0) 100%) !important;
box-shadow: 0 0 6px rgba(35,137,199,0.30) !important;
}
/* ── 9e. hero-stats — bigger, more confident numbers ───────────────────── */
.hero-stats {
display: inline-flex !important;
align-items: center !important;
gap: 1.75rem !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.hero-stat-val {
font-size: 2rem !important;
font-weight: 900 !important;
letter-spacing: -0.045em !important;
line-height: 1 !important;
}
.hero-stat-label {
font-size: 0.7rem !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
margin-top: 0.35rem !important;
display: block !important;
}
.hero-stat-sep {
width: 1px !important;
height: 32px !important;
align-self: center !important;
}
html:not([data-eg-theme="light"]) .hero-stat-sep,
html[data-eg-theme="dark"] .hero-stat-sep {
background: rgba(255,255,255,0.18) !important;
}
html[data-eg-theme="light"] .hero-stat-sep {
background: rgba(15,23,41,0.16) !important;
}
html[data-eg-theme="light"] .hero-stat-label {
color: rgba(15,23,41,0.55) !important;
}
/* ── 9f. Dark hero polish — make the portal look DESIGNED, not patched ── */
html:not([data-eg-theme="light"]) .hero-title-grad,
html[data-eg-theme="dark"] .hero-title-grad {
background: linear-gradient(120deg,
#FFFFFF 0%,
#C6E4F5 35%,
#54CCCF 65%,
#339CDD 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Mobile: tighten paddings, shrink stat numbers slightly */
@media (max-width: 640px) {
.hero { padding: 4.5rem 1.25rem 7rem !important; }
.hero-stat-val { font-size: 1.75rem !important; }
.hero-stats { gap: 1.25rem !important; }
.hero-float-cards { gap: 0.5rem !important; margin-top: 1.5rem !important; }
.hero-float-card { font-size: 0.78rem !important; padding: 0.5rem 0.85rem !important; }
}
/* ===========================================================================
* 10. HERO GIMMICKS (paired with the JS in enhance.js heroGimmicks IIFE)
*
* Visual language
* ---------------
* - LIVE PULSE: red heartbeat dot + small uppercase label, pill-shaped.
* Sits above the eyebrow on its own line. Reads as "this is live, not
* a screenshot."
* - rotating tagline: monospaced ↳ arrow + animated text, indents under
* the sub-copy. Vertical motion of 6px on swap.
* - cursor-glare: a 320px radial highlight that follows the pointer at
* `--gx,--gy`. Multiply-friendly mix-blend so it adds light, not haze.
* - flow particles: handled in SVG by the JS, just needs filter/blur.
* - CTA microbadge: a tiny 11px chip pinned to the right of the primary
* CTA, signalling "3件受付中".
* ========================================================================= */
/* ── 10a. LIVE PULSE pill ─────────────────────────────────────────────── */
/* v11: dock to the TOP-LEFT of the hero-title. Hero is text-align:center;
* we wrap the pulse in a flex row that pushes itself to the left edge of
* the title block, sitting just above it. */
.eg-live-pulse {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.35rem 0.85rem 0.35rem 0.55rem !important;
border-radius: 999px !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
/* anchor to the left, not centred */
margin: 0 0 0.65rem 0 !important;
align-self: flex-start;
animation: egPulsePillFadeIn 0.7s var(--ease, ease) 0.05s both;
}
/* Wrap the title + pulse in a left-aligned column so the pulse pins to
* the title's left edge. We toggle the hero-content to flex-column with
* align-items:flex-start ONLY around the title block via a JS-applied
* wrapper. CSS hook below. */
.eg-title-block {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100%;
max-width: 760px;
margin: 0 auto;
text-align: left;
}
.eg-title-block .hero-title { text-align: left !important; margin: 0 !important; }
html:not([data-eg-theme="light"]) .eg-live-pulse,
html[data-eg-theme="dark"] .eg-live-pulse {
background: rgba(220, 38, 38, 0.10);
border: 1px solid rgba(220, 38, 38, 0.30);
color: #FFD3D1;
box-shadow:
0 0 0 1px rgba(220, 38, 38, 0.05),
0 6px 18px -8px rgba(220, 38, 38, 0.45);
}
html[data-eg-theme="light"] .eg-live-pulse {
background: rgba(220, 38, 38, 0.06);
border: 1px solid rgba(220, 38, 38, 0.28);
color: #B91C1C;
}
.eg-live-pulse-dot {
position: relative;
width: 8px; height: 8px;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
animation: egHeartbeat 2.6s ease-out infinite;
flex-shrink: 0;
}
.eg-live-pulse-label {
font-weight: 800 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
}
.eg-live-pulse-sub {
font-weight: 500 !important;
letter-spacing: 0.02em !important;
opacity: 0.8;
padding-left: 0.4rem;
border-left: 1px solid currentColor;
margin-left: 0.1rem;
}
@keyframes egHeartbeat {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65); transform: scale(1); }
50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); transform: scale(1.15); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); transform: scale(1); }
}
@keyframes egPulsePillFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 520px) {
.eg-live-pulse-sub { display: none; }
.eg-live-pulse { padding: 0.3rem 0.75rem 0.3rem 0.5rem !important; }
}
/* ── 10b. Rotating tagline ─────────────────────────────────────────────── */
.eg-rotating-tagline {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
margin: -1.5rem auto 2rem !important;
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.4;
max-width: 540px;
text-align: left;
opacity: 0;
animation: egTaglineFadeIn 0.6s var(--ease, ease) 0.5s forwards;
}
.eg-rotating-tagline-arrow {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 0.95em;
flex-shrink: 0;
}
.eg-rotating-tagline-text {
display: inline-block;
transition: opacity 0.28s ease, transform 0.28s ease;
}
html:not([data-eg-theme="light"]) .eg-rotating-tagline,
html[data-eg-theme="dark"] .eg-rotating-tagline {
color: rgba(220, 236, 250, 0.78);
}
html:not([data-eg-theme="light"]) .eg-rotating-tagline-arrow,
html[data-eg-theme="dark"] .eg-rotating-tagline-arrow {
color: #54CCCF;
}
html[data-eg-theme="light"] .eg-rotating-tagline {
color: rgba(15, 23, 41, 0.72);
}
html[data-eg-theme="light"] .eg-rotating-tagline-arrow {
color: var(--acc, #0050AA);
}
@keyframes egTaglineFadeIn {
to { opacity: 1; }
}
/* ── 10c. Cursor glare (desktop only — JS gates this) ─────────────────── */
.eg-cursor-glare {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 0.4s ease;
background:
radial-gradient(circle 320px at var(--gx, 50%) var(--gy, 50%),
rgba(84, 204, 207, 0.18) 0%,
rgba(51, 156, 221, 0.10) 30%,
transparent 70%);
mix-blend-mode: screen;
}
html[data-eg-theme="light"] .eg-cursor-glare {
background:
radial-gradient(circle 320px at var(--gx, 50%) var(--gy, 50%),
rgba(51, 156, 221, 0.14) 0%,
rgba(84, 204, 207, 0.08) 30%,
transparent 70%);
mix-blend-mode: multiply;
}
/* ── 10d. Flow particles (SVG) — JS animated, CSS just adds glow ───────── */
.eg-flow-particle {
/* filter declared inline by JS for cross-browser support */
}
/* ── 10e. CTA microbadge ───────────────────────────────────────────────── */
.hero-actions a.btn-primary {
position: relative;
}
.eg-cta-badge {
display: inline-flex;
align-items: center;
margin-left: 0.65rem;
padding: 0.2rem 0.5rem;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.04em;
background: rgba(255, 255, 255, 0.18);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.32);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
position: relative;
top: -1px;
}
.eg-cta-badge::before {
content: '';
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.85);
margin-right: 0.4rem;
animation: egCtaDot 1.6s ease-in-out infinite;
}
@keyframes egCtaDot {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
/* Mobile: stack the badge under the label so the CTA never wraps ugly */
@media (max-width: 420px) {
.eg-cta-badge {
margin-left: 0.4rem;
font-size: 0.6rem;
padding: 0.15rem 0.4rem;
}
}
/* ── 10f. Reduced motion: kill all animations ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.eg-live-pulse,
.eg-live-pulse-dot,
.eg-rotating-tagline-text,
.eg-cta-badge::before {
animation: none !important;
}
.eg-cursor-glare { display: none !important; }
}
/* ===========================================================================
* 11. v8 FIXES — user feedback (round #11)
*
* a. Light theme hero hexagon network was dying into white-on-white.
* The source SVG uses rgba(51,156,221,0.07..0.18) strokes which are
* invisible on a light aurora background. Stamp the stroke darker in
* light mode (and bump opacity) so the network is *visible*.
*
* b. Kill the 3 fake hero-float-cards (ライブQ&A稼働中 / 🎫QRチェックイン
* 対応 / 🌏日英完全対応). They read as a "ハリボテ slideshow", not as
* product. We replace them via JS with a real, D1-backed live stat
* strip — but in case JS hasn't booted yet, hide them here.
*
* c. Kill the rotating tagline with the ↳ arrow. Variable text width
* makes the arrow jiggle; the user called it "ダサい / やばい".
*
* d. PWA install banner close-button position bug: on small viewports
* the .pwa-badge ('New') and the .pwa-close-btn were colliding at
* different times. Pin the close-btn HIGHER z-index and give it a
* proper hit area that does not collide with the badge regardless
* of badge size.
*
* e. Locale slide-toggle (JP ⇄ EN) for the top nav. The bare 'EN' link
* reads as "broken text"; replace it with a 2-state pill toggle the
* user can clearly see is interactive.
* ========================================================================= */
/* ── 11a. HEXAGON NETWORK — replaced by JS installHexagonNetwork() ────── */
/* The new SVG uses currentColor for all strokes/fills, so we control the
* palette by setting `color` on the .hero-network container.
* Subtle, premium, brand-blue. No grey. */
.hero-network { pointer-events: none; }
html:not([data-eg-theme="light"]) .hero-network,
html[data-eg-theme="dark"] .hero-network {
color: rgba(120, 200, 235, 0.32);
}
html[data-eg-theme="light"] .hero-network {
color: rgba(35, 137, 199, 0.28);
}
/* Hex outline is the strongest line; diagonals are whisper-thin */
.eg-hex-outline {
stroke-width: 1.1 !important;
opacity: 0.85;
}
.eg-hex-spoke {
stroke-width: 0.75 !important;
opacity: 0.55;
}
.eg-hex-diag {
stroke-width: 0.45 !important;
opacity: 0.35;
}
/* Vertex nodes — slightly brighter than the lattice so they read as nodes */
html:not([data-eg-theme="light"]) .eg-hex-node,
html[data-eg-theme="dark"] .eg-hex-node {
fill: rgba(84, 204, 207, 0.85) !important;
filter: drop-shadow(0 0 4px rgba(84, 204, 207, 0.45));
}
html[data-eg-theme="light"] .eg-hex-node {
fill: rgba(35, 137, 199, 0.85) !important;
filter: drop-shadow(0 0 3px rgba(35, 137, 199, 0.35));
}
/* Subtle glow on the whole lattice for both themes */
html:not([data-eg-theme="light"]) .hero-network,
html[data-eg-theme="dark"] .hero-network {
filter: drop-shadow(0 0 8px rgba(84, 204, 207, 0.10));
}
html[data-eg-theme="light"] .hero-network {
filter: drop-shadow(0 0 6px rgba(35, 137, 199, 0.08));
}
/* Data-flow particles ride the brand palette in both modes */
html:not([data-eg-theme="light"]) .eg-flow-particle,
html[data-eg-theme="dark"] .eg-flow-particle {
fill: rgba(132, 218, 220, 0.95) !important;
}
html[data-eg-theme="light"] .eg-flow-particle {
fill: rgba(35, 137, 199, 0.90) !important;
}
/* ── 11b. KILL the 3 fake float cards in BOTH themes ──────────────────── */
.hero-float-cards,
.hero-float-card { display: none !important; }
/* ── 11c. KILL the rotating tagline (variable width, jiggly arrow) ────── */
.eg-rotating-tagline { display: none !important; }
/* ── 11d. PWA install close button — fix collision with .pwa-badge ─────
* - elevate z-index above badge
* - move closer to corner so it never lands under the badge
* - enforce 44x44 hit target (Apple HIG) */
.pwa-close-btn {
position: absolute !important;
top: 0.55rem !important;
right: 0.55rem !important;
width: 32px !important;
height: 32px !important;
z-index: 30 !important;
background: rgba(15, 23, 41, 0.55) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.pwa-close-btn::before {
/* enlarge tap target without moving the visible button */
content: '' !important;
position: absolute !important;
inset: -10px !important;
border-radius: 50% !important;
}
.pwa-close-btn svg { width: 14px !important; height: 14px !important; color: #fff !important; }
/* Push the New badge LEFT so it can never overlap the X */
.pwa-badge {
left: 1rem !important;
right: auto !important;
z-index: 20 !important;
max-width: calc(100% - 4rem) !important;
}
/* iOS body padding-top so badge + close-btn always have room */
.pwa-body { padding-top: 2.6rem !important; }
/* ── 11e. NAV LOCALE SLIDE TOGGLE (JP ⇄ EN) ───────────────────────────── */
.eg-locale-toggle {
position: relative;
display: inline-flex;
align-items: center;
width: 78px;
height: 28px;
padding: 2px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.16);
cursor: pointer;
user-select: none;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
margin-left: 0.6rem;
transition: background 0.15s ease, border-color 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
html[data-eg-theme="light"] .eg-locale-toggle {
background: rgba(7, 49, 100, 0.06);
border-color: rgba(7, 49, 100, 0.20);
}
.eg-locale-toggle:hover { border-color: rgba(84, 204, 207, 0.45); }
.eg-locale-toggle-knob {
position: absolute;
top: 2px; left: 2px;
width: calc(50% - 2px);
height: calc(100% - 4px);
border-radius: 999px;
background: linear-gradient(180deg, #54CCCF 0%, #339CDD 100%);
box-shadow: 0 4px 12px -4px rgba(51, 156, 221, 0.55);
transition: transform 0.28s cubic-bezier(.7,.2,.2,1.2);
z-index: 1;
}
.eg-locale-toggle[data-active="en"] .eg-locale-toggle-knob {
transform: translateX(100%);
}
.eg-locale-toggle-label {
position: relative;
z-index: 2;
flex: 1;
text-align: center;
line-height: 1;
color: rgba(220, 236, 250, 0.55);
transition: color 0.2s ease;
}
html[data-eg-theme="light"] .eg-locale-toggle-label {
color: rgba(7, 49, 100, 0.55);
}
.eg-locale-toggle[data-active="ja"] .eg-locale-toggle-label[data-loc="ja"],
.eg-locale-toggle[data-active="en"] .eg-locale-toggle-label[data-loc="en"] {
color: #fff;
}
/* Hide the bare 'EN'/'JP' anchor that lived in the navbar — we replaced it */
a.nav-locale[data-eg-replaced="1"] { display: none !important; }
/* ── 11f. Engineers GUILD identity overrides ───────────────────────────── */
/* The mirror still says "Engineers GUILD" in the hero gradient. JS swaps the
* text, but we also tighten the gradient so the new wordmark reads. */
.hero-title-grad {
/* let JS set textContent; keep gradient legible in both themes */
background-clip: text !important;
-webkit-background-clip: text !important;
}
/* ===========================================================================
* 12. v9 FIXES — user feedback (round #12)
*
* a. LIVE pill must be BLUE, not red — Engineers GUILD brand is blue.
* b. PWA install banner is too tall and covers half the screen, the
* top whitespace is wasted, and in light theme the body has a
* grey wash that the user doesn't want. Compact it.
* c. Locale toggle (JP⇄EN) must sit to the LEFT of the theme button.
* d. .hero-sub will be relocated below the hero (JS does the move);
* this rule centers it nicely between SCROLL and 直近のイベント.
* e. .hero-eyebrow needs to land BELOW the hero-title (JS moves it).
* ========================================================================= */
/* ── 12a. LIVE pulse → BLUE brand ─────────────────────────────────────── */
html:not([data-eg-theme="light"]) .eg-live-pulse,
html[data-eg-theme="dark"] .eg-live-pulse {
background: rgba(51, 156, 221, 0.12) !important;
border: 1px solid rgba(51, 156, 221, 0.42) !important;
color: #C6E4F5 !important;
box-shadow:
0 0 0 1px rgba(51, 156, 221, 0.08),
0 6px 18px -8px rgba(51, 156, 221, 0.45) !important;
}
html[data-eg-theme="light"] .eg-live-pulse {
background: rgba(51, 156, 221, 0.10) !important;
border: 1px solid rgba(35, 137, 199, 0.40) !important;
color: #0050AA !important;
}
.eg-live-pulse-dot {
background: #339CDD !important;
box-shadow: 0 0 0 0 rgba(51, 156, 221, 0.7) !important;
}
@keyframes egHeartbeat {
0% { box-shadow: 0 0 0 0 rgba(51, 156, 221, 0.65); transform: scale(1); }
50% { box-shadow: 0 0 0 8px rgba(51, 156, 221, 0); transform: scale(1.15); }
100% { box-shadow: 0 0 0 0 rgba(51, 156, 221, 0); transform: scale(1); }
}
/* ── 12b. PWA install banner — compact, kill grey wash ─────────────────── */
#pwa-prompt {
/* allow content to size itself; don't force min-heights */
}
.pwa-sheet {
max-width: 92vw !important;
padding: 0.85rem 1rem 1rem !important;
border-radius: 18px !important;
}
.pwa-body {
padding-top: 0.4rem !important; /* was 2.6rem in 11d, way too tall */
padding-bottom: 0.2rem !important;
display: flex !important;
align-items: flex-start !important;
gap: 0.75rem !important;
}
/* LIGHT MODE — remove the grey wash on the sheet body; pure white */
html[data-eg-theme="light"] .pwa-sheet {
background: #FFFFFF !important;
border: 1px solid rgba(35,137,199,0.18) !important;
box-shadow:
0 12px 32px -10px rgba(15,23,41,0.18),
0 2px 6px rgba(15,23,41,0.04) !important;
}
html[data-eg-theme="light"] .pwa-body,
html[data-eg-theme="light"] .pwa-text,
html[data-eg-theme="light"] .pwa-icon-wrap {
background: transparent !important;
}
html[data-eg-theme="light"] .pwa-title { color: #0B1530 !important; }
html[data-eg-theme="light"] .pwa-sub { color: rgba(15,23,41,0.62) !important; }
html[data-eg-theme="light"] .pwa-close-btn {
background: rgba(15, 23, 41, 0.06) !important;
border-color: rgba(15, 23, 41, 0.14) !important;
}
html[data-eg-theme="light"] .pwa-close-btn svg { color: #0B1530 !important; }
/* Slimmer title + sub */
.pwa-title { font-size: 0.92rem !important; line-height: 1.35 !important; }
.pwa-sub {
font-size: 0.78rem !important;
line-height: 1.5 !important;
margin-top: 0.25rem !important;
/* v30.1: explicit 2-line via
from JS, centered.
* Block layout (default) honours
faithfully; previous
* -webkit-line-clamp swallowed the line break on some engines. */
text-align: center !important;
white-space: normal !important;
}
/* v28.1: title also centered to match the centered sub */
.pwa-title { text-align: center !important; }
.pwa-icon-wrap { width: 40px !important; height: 40px !important; flex-shrink: 0; }
.pwa-icon-wrap svg, .pwa-icon-wrap img { width: 100% !important; height: 100% !important; }
/* v28.1: simplified phone icon — accent color, no fake-logo backdrop */
.pwa-icon-wrap.eg-pwa-icon-simple {
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
border: none !important;
color: var(--p, #339cdd) !important;
}
.pwa-icon-wrap.eg-pwa-icon-simple svg {
width: 28px !important;
height: 28px !important;
}
/* v28.1: the title/sub column takes the remaining space; icon stays left */
.pwa-text {
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* v28.1: iOS step row — center the whole row */
.pwa-ios-steps {
text-align: center !important;
}
.pwa-ios-arrow {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.4rem !important;
flex-wrap: wrap;
margin: 0 auto !important;
padding: 0.55rem 0.75rem !important;
}
/* Position: dock to bottom with safe gap, never half-screen */
#pwa-prompt {
position: fixed !important;
left: 0; right: 0; bottom: 0 !important;
padding: 0 0.6rem max(0.6rem, env(safe-area-inset-bottom)) !important;
z-index: 80 !important;
}
.pwa-sheet { margin: 0 auto !important; }
/* Make sure the New badge doesn't stretch height */
.pwa-badge {
position: absolute !important;
top: -0.65rem !important;
left: 0.85rem !important;
font-size: 0.58rem !important;
padding: 0.12rem 0.45rem !important;
}
/* ── 12c. Locale toggle goes LEFT of the theme button ──────────────────── */
.eg-locale-toggle {
margin-left: 0 !important;
margin-right: 0.55rem !important;
order: -1; /* if parent is flex */
}
/* ── 12d. Relocated hero-sub appears between hero and 直近のイベント ─── */
.eg-hero-sub-relocated {
max-width: 640px;
margin: 1.25rem auto 0;
padding: 0 1.25rem;
font-size: 1.02rem;
font-weight: 500;
line-height: 1.75;
text-align: center;
}
html:not([data-eg-theme="light"]) .eg-hero-sub-relocated,
html[data-eg-theme="dark"] .eg-hero-sub-relocated {
color: rgba(220, 236, 250, 0.82) !important;
}
html[data-eg-theme="light"] .eg-hero-sub-relocated {
color: rgba(15, 23, 41, 0.78) !important;
}
/* ── 12e. The eyebrow now sits BELOW the title, not above it ───────────── */
.eg-eyebrow-below {
margin: 0.5rem auto 2.25rem !important;
}
/* ===========================================================================
* 13. v11 FIXES — round #14
*
* a. eyebrow ("エンジニアによる…") MUST be plain text. No dot, no pill
* frame. The pill was meant for the hero of a generic landing page;
* under our title it reads as duplicate noise. Strip background,
* border, padding, and the pulsing dot.
* b. Mobile: hero is too tall, '直近のイベント' falls below the fold.
* Compress vertical paddings + tighten gaps so the events section
* starts before scroll on a 6.1" screen.
* c. CTA secondary button text was "フィードへ →" — meaningless given
* the user is unauthenticated and the page is the public portal.
* JS rewrites the textContent to a meaningful label per locale and
* drops the arrow. CSS only ensures alignment without the arrow.
* ========================================================================= */
/* ── 13a. Eyebrow → pure text, no pill, no dot, CENTERED (v32) ────────── */
/* Selectors are layered to beat the inline page CSS that ships
* `display:inline-flex; background:rgba(51,156,221,.1); border:...;
* border-radius:999px; padding:.32rem 1rem;` on `.hero-eyebrow`. */
.hero-eyebrow,
.hero-eyebrow.eg-eyebrow-below,
.hero .hero-content .hero-eyebrow,
html[data-eg-theme="dark"] .hero-eyebrow,
html[data-eg-theme="light"] .hero-eyebrow {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
line-height: 1.5 !important;
/* v32: must be block (not inline-flex) so text-align:center actually
* centres the text instead of just centring an inline pill. */
display: block !important;
width: 100% !important;
max-width: 100% !important;
/* User directive: 「センタリングせよ、左上に寄ってるぞ」 */
text-align: center !important;
margin: 0.75rem auto 1.75rem !important;
}
html:not([data-eg-theme="light"]) .hero-eyebrow,
html[data-eg-theme="dark"] .hero-eyebrow {
color: rgba(220, 236, 250, 0.78) !important;
}
html[data-eg-theme="light"] .hero-eyebrow {
color: rgba(15, 23, 41, 0.72) !important;
}
/* Hide the inherited eyebrow dot completely */
.hero-eyebrow .hero-eyebrow-dot,
.hero-eyebrow-dot { display: none !important; }
/* ── 13b. Mobile hero compression — reveal '直近のイベント' above fold ── */
@media (max-width: 640px) {
.hero {
min-height: auto !important;
padding: 3.25rem 1rem 4.5rem !important;
}
.hero-title { font-size: clamp(2rem, 9vw, 2.8rem) !important; margin: 0 !important; }
.eg-live-pulse { margin-bottom: 0.55rem !important; }
.hero-eyebrow { margin: 0.55rem auto 1.35rem !important; font-size: 0.86rem !important; text-align: center !important; }
.hero-actions { margin-top: 1.25rem !important; gap: 0.65rem !important; }
.hero-stats { margin-top: 1.5rem !important; gap: 1.25rem !important; }
.hero-stat-val { font-size: 1.65rem !important; }
/* Mobile: SCROLL hint disappears entirely. It has no information value
* here — content already begins right under the hero — and trying to
* statically render the absolute-positioned line caused it to leak
* sideways next to the CTAs (v11 regression). Just hide it. */
.hero-scroll { display: none !important; }
/* network lattice can be slightly less tall so the hero box shrinks */
.hero-network svg { transform: scale(0.92); transform-origin: center; }
}
/* ── 13c. CTA secondary button — no arrow, normal weight, full alignment─ */
.hero-actions a.btn-secondary,
.hero-actions a.btn-ghost {
letter-spacing: 0.01em;
}
/* ============================================================
v15 (2026-05-29): Auth-aware nav + login button + dedup
============================================================ */
/* Login button (shown to guests when no pulse_session cookie) */
.eg-login-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
color: #fff !important;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
border: 1px solid rgba(56, 189, 248, 0.4);
box-shadow: 0 2px 12px rgba(14, 165, 233, 0.25);
transition: transform .15s ease, box-shadow .15s ease;
cursor: pointer;
}
.eg-login-btn:hover,
.eg-login-btn:focus {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
color: #fff !important;
}
/* Mobile login button stretches full width in slide-over */
.nav-mobile .eg-login-btn {
display: block;
text-align: center;
margin: 8px 0 16px;
}
/* Mobile locale toggle (added by installMobileLocaleToggle) */
.eg-locale-toggle-mobile {
display: block;
padding: 12px 0;
font-size: 0.95rem;
border-top: 1px solid rgba(148, 163, 184, 0.15);
margin-top: 12px;
}
/* Hide duplicate feed posts (safety net; JS also sets display:none) */
article.feed-post[data-eg-dupe="1"] {
display: none !important;
}
/* Hide gated nav elements with !important to win against any inline style */
[data-eg-gate="hidden"] {
display: none !important;
}
/* ============================================================
v16 (2026-05-29): Tier-aware UI + top-of-navbar locale pill
============================================================ */
/* Top-of-navbar JP/EN pill — positioned absolutely so it sits next to
the logo on both desktop and mobile, never inside the hamburger. */
.eg-locale-pill-top {
position: absolute;
top: 50%;
right: 110px; /* leaves room for theme btn + hamburger */
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.25);
text-decoration: none;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
user-select: none;
-webkit-user-select: none;
z-index: 60;
transition: background .15s ease, border-color .15s ease;
}
.eg-locale-pill-top:hover {
background: rgba(15, 23, 42, 0.85);
border-color: rgba(56, 189, 248, 0.5);
}
.eg-locale-pill-top .eg-lp-label {
position: relative;
z-index: 1;
display: inline-block;
padding: 4px 8px;
color: rgba(148, 163, 184, 0.7);
transition: color .15s ease;
}
.eg-locale-pill-top[data-active="ja"] .eg-lp-label[data-loc="ja"],
.eg-locale-pill-top[data-active="en"] .eg-lp-label[data-loc="en"] {
color: #f8fafc;
}
.eg-locale-pill-top .eg-lp-knob {
position: absolute;
top: 4px;
bottom: 4px;
width: calc(50% - 4px);
border-radius: 999px;
background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
box-shadow: 0 1px 6px rgba(14, 165, 233, 0.45);
transition: transform .2s cubic-bezier(.4,0,.2,1);
z-index: 0;
}
.eg-locale-pill-top[data-active="ja"] .eg-lp-knob { transform: translateX(0); }
.eg-locale-pill-top[data-active="en"] .eg-lp-knob { transform: translateX(100%); }
@media (max-width: 768px) {
.eg-locale-pill-top {
right: 72px; /* hamburger is closer to edge on mobile */
font-size: 0.65rem;
}
.eg-locale-pill-top .eg-lp-label { padding: 3px 6px; }
}
/* Hide the in-hamburger locale link added in v15 (we have top-nav pill now) */
.eg-locale-toggle-mobile { display: none !important; }
/* Hide footer locale switcher entirely — we have one in the top nav */
.locale-switcher { display: none !important; }
/* Belt-and-braces hide for gated elements */
[data-eg-gate="hidden"] { display: none !important; }
/* Tier badge colours — make sure the badge in dropdown reflects real tier */
.dropdown-tier-badge.tier-guest { background: rgba(100, 116, 139, 0.16); color: #cbd5e1; }
.dropdown-tier-badge.tier-free { background: rgba(255,255,255,.09); color: rgba(255,255,255,.6); }
.dropdown-tier-badge.tier-paid { background: rgba(51,156,221,.16); color: #7dd3fc; }
.dropdown-tier-badge.tier-core { background: rgba(167,139,250,.16); color: #c4b5fd; }
.dropdown-tier-badge.tier-staff { background: rgba(245,158,11,.16); color: #fcd34d; }
.dropdown-tier-badge.tier-owner { background: rgba(239,68,68,.16); color: #fca5a5; }
/* ──────────────────────────────────────────────────────────────────
* FOUC PREVENTION (v20): hide guest-forbidden UI until enhance.js
* has resolved the user's tier via /auth/me.
*
* Default state: html[data-eg-tier-resolved] is absent (or "false").
* In this state, we hide everything that should NOT show to a T1 guest.
*
* Once enhance.js sets html[data-eg-tier-resolved="true"], these rules
* stop applying and applyTierGating() takes over (showing what each
* tier is allowed to see, hiding what they aren't).
*
* This means: even if a guest momentarily lands on /ja/events with a
* cold cache and slow JS, they will NEVER flash the admin link, the
* hamburger drawer contents, the bottom tabbar, etc.
* ────────────────────────────────────────────────────────────────── */
html:not([data-eg-tier-resolved="true"]) .nav-admin-link,
html:not([data-eg-tier-resolved="true"]) .nav-avatar-btn,
html:not([data-eg-tier-resolved="true"]) #nav-user-wrap,
html:not([data-eg-tier-resolved="true"]) .nav-dropdown,
html:not([data-eg-tier-resolved="true"]) .nav-hamburger,
html:not([data-eg-tier-resolved="true"]) #nav-hamburger,
html:not([data-eg-tier-resolved="true"]) .nav-mobile,
html:not([data-eg-tier-resolved="true"]) #nav-links,
html:not([data-eg-tier-resolved="true"]) .app-tabbar,
html:not([data-eg-tier-resolved="true"]) #open-post-btn,
html:not([data-eg-tier-resolved="true"]) #post-modal,
html:not([data-eg-tier-resolved="true"]) .fab-post,
html:not([data-eg-tier-resolved="true"]) .nav-links-desktop a[href*="/app/"],
html:not([data-eg-tier-resolved="true"]) .nav-mobile a[href*="/app/"],
html:not([data-eg-tier-resolved="true"]) .nav-mobile a[href*="/auth/logout"],
html:not([data-eg-tier-resolved="true"]) [data-eg-min-tier],
html:not([data-eg-tier-resolved="true"]) a[href*="/app/live"],
html:not([data-eg-tier-resolved="true"]) [data-eg-hardcoded-demo] {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
* v26: CLEAN MOBILE NAVIGATION
*
* Decisive split between TOP page (/ja, /en) and everything else.
*
* TOP page (body[data-eg-page="top"])
* SP top nav : [logo] [empty space] [JP/EN] [theme] — that's it
* SP bottom : no tabbar (we're on landing — buttons are inline)
* PC top nav : unchanged (logo + links + JP/EN + theme + login)
*
* AUTH pages (body[data-eg-page="auth"])
* SP top nav : [logo] only
* SP bottom : no tabbar
* PC top nav : [logo] only
*
* APP pages (body[data-eg-page="app"])
* SP top nav : [logo] only ← no JP/EN, no theme, no links
* SP bottom : tabbar = sole navigation (tier-gated)
* PC top nav : unchanged
*
* No floating buttons anywhere. No hamburger anywhere.
* Settings (JP/EN, theme) live in /app/me for signed-in users.
* ═══════════════════════════════════════════════════════════════════ */
/* ── A. KILL ALL FLOATING BUTTONS (v23-v25 baggage) ───────────────── */
.eg-login-btn-floating,
.eg-logout-btn-floating,
.eg-locale-pill-top,
.eg-locale-toggle-floating,
.eg-theme-btn--floating {
display: none !important;
}
/* ── A.1 v26.1: JP/EN + THEME ARE TOP-PAGE-ONLY (any breakpoint) ──── */
/* The native EN links baked into the source
* HTML must not show on auth/app pages either — the rule is identical
* across mobile + desktop: language / theme are "set once on landing".
*/
body[data-eg-page="auth"] a.nav-locale,
body[data-eg-page="app"] a.nav-locale,
body[data-eg-page="auth"] .eg-locale-toggle,
body[data-eg-page="app"] .eg-locale-toggle,
body[data-eg-page="auth"] [data-eg-theme-btn],
body[data-eg-page="app"] [data-eg-theme-btn] {
display: none !important;
}
/* ── B. HAMBURGER + MOBILE DRAWER STAY DEAD ───────────────────────── */
.nav-hamburger,
#nav-hamburger,
.nav-mobile,
#nav-links {
display: none !important;
}
/* ── C. MOBILE TOP-NAV RULES (≤768px) ─────────────────────────────── */
@media (max-width: 768px) {
/* DEFAULT (app + auth pages): hide all top-nav links on mobile.
* Only the logo is visible in the header. Tabbar handles navigation. */
.nav-links-desktop {
display: none !important;
}
/* No JP/EN and no theme toggle on app/auth pages on mobile.
* They are top-page-only (configured once on landing). */
body[data-eg-page="app"] .eg-locale-toggle,
body[data-eg-page="auth"] .eg-locale-toggle,
body[data-eg-page="app"] [data-eg-theme-btn],
body[data-eg-page="auth"] [data-eg-theme-btn] {
display: none !important;
}
/* TOP PAGE only: show a compact right-aligned cluster of
* [JP/EN] + [theme btn] in the header. No nav links, no avatar.
* Login CTA stays in the page body, not the header. */
body[data-eg-page="top"] .nav-links-desktop {
display: flex !important;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 0 !important;
overflow: visible;
}
/* Hide every on the top page (these are
* the link items — フィード / 分科会 / レポート / 管理). They
* belong in the in-page CTA or — once signed-in — the tabbar. */
body[data-eg-page="top"] .nav-links-desktop .nav-link {
display: none !important;
}
/* Keep the .nav-right cluster (which contains the toggle + theme btn) */
body[data-eg-page="top"] .nav-links-desktop .nav-right {
display: flex !important;
gap: 8px;
flex-shrink: 0;
margin-left: 0 !important;
}
/* Locale toggle on top page: pinned at a sensible size */
body[data-eg-page="top"] .eg-locale-toggle {
transform: scale(0.92);
transform-origin: right center;
}
}
/* ── D. AUTH PAGE: even on PC, strip nav down to the logo ─────────── */
body[data-eg-page="auth"] .nav-links-desktop .nav-link {
display: none !important;
}
body[data-eg-page="auth"] .nav-links-desktop .nav-right {
/* Keep theme/locale only for those who need it on PC, but hide on SP */
}
@media (max-width: 768px) {
body[data-eg-page="auth"] .nav-links-desktop {
display: none !important;
}
}
/* ── E. BOTTOM TABBAR is THE mobile navigation (app pages only) ───── */
@media (max-width: 768px) {
body[data-eg-page="top"] .app-tabbar,
body[data-eg-page="auth"] .app-tabbar {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
* v24: PORTAL DESIGN OVERHAUL
*
* 1. Kill the hexagon / orb ambient animation across every page.
* 2. Replace with one cohesive, barely-perceptible smooth gradient
* background (light + dark). 60s motion cycle — vivid but tranquil.
* 3. Floating ログアウト button (mirror of login btn) for signed-in.
* 4. PC font-size + page-margin tune-up (containers were too cramped).
* 5. Subtle scroll-driven gimmick + cohesive typographic rhythm.
*
* Treat the entire site, top to bottom, as one portal experience.
* ═══════════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────────
* v25: KILL THE HEXAGON, FOR REAL THIS TIME.
* The hero-network SVG mesh and the .ambient orb cluster are gone.
* The portal gradient sheet (body::before) is the only ambient now.
* ────────────────────────────────────────────────────────────────── */
.ambient,
.hero-network,
svg.hero-network,
div.hero-network,
.eg-hex,
.eg-hex-group,
.eg-hex-node,
.eg-hex-outline,
.eg-hex-spoke,
.eg-hex-diag,
.hex-network,
.hero-bg-network,
.bg-network,
.network-bg,
[data-eg-hexnet] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
animation: none !important;
}
/* v25: Also kill the network particles overlay if any older inline JS
* injected a