/* ========================= Base Styles for 48v.me (Light theme with optional dark mode) ========================= */ /* CSS Variables (light) */ :root{ --bg: #ffffff; --surface: #f6f7f9; --border: #e5e7eb; --text: #111827; /* gray-900 */ --text-muted: #6b7280; /* gray-500 */ --link: #2563eb; /* blue-600 */ --link-hover: #1d4ed8; /* blue-700 */ --accent: #0ea5e9; /* sky-500 */ --accent-2: #14b8a6; /* teal-500 */ --ok: #10b981; /* emerald-500 */ --warn: #f59e0b; /* amber-500 */ --danger: #ef4444; /* red-500 */ --shadow: 0 10px 30px rgba(0,0,0,.06); --radius: 14px; --wrap: 1080px; } /* Dark theme (optional): add class="theme-dark" to */ .theme-dark{ --bg:#0b1020; --surface:#111827; --border:#1f2937; --text:#e5e7eb; --text-muted:#9ca3af; --link:#60a5fa; --link-hover:#3b82f6; --shadow: 0 16px 40px rgba(0,0,0,.45); } /* Reset-ish */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body{ margin:0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Helvetica, Arial, sans-serif; line-height: 1.75; letter-spacing: .01em; } /* Links */ a{ color: var(--link); text-decoration: none; } a:hover{ color: var(--link-hover); text-decoration: underline; } a.button, button.button{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius: 999px; border:1px solid transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; box-shadow: var(--shadow); text-decoration:none; } a.button:hover, button.button:hover{ filter: brightness(1.05); text-decoration:none; } /* Layout */ .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 20px; } .section{ padding: 28px 0; } .section + .section{ border-top: 1px solid var(--border); } /* Header / Nav */ header{ position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .nav{ display:flex; align-items:center; justify-content:space-between; gap: 16px; } .logo{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size: 1.05rem; } .logo .mark{ width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow); } nav a{ color: var(--text); opacity:.85; } nav a:hover{ opacity:1; color: var(--link); } /* Footer */ .footer{ padding: 40px 0 64px; font-size: .925rem; color: var(--text-muted); } /* Typography */ h1, h2, h3{ line-height: 1.25; margin: .2rem 0 .6rem; font-weight: 800; } h1{ font-size: clamp(28px, 4.4vw, 40px); } h2{ font-size: clamp(22px, 3.2vw, 28px); } h3{ font-size: clamp(18px, 2.6vw, 22px); } p{ margin: .4rem 0 1rem; } .muted{ color: var(--text-muted); } .lead{ font-size: clamp(16px, 2.2vw, 18px); color: var(--text-muted); } /* Title + inline logo row (for H2とロゴを同じ列に) */ .title-row{ display:flex; align-items:center; gap: 10px; position: relative; } .title-row img{ height: 40px; width:auto; } @media (max-width: 540px){ .title-row{ flex-wrap: wrap; } .title-row img{ height: 32px; } } /* Pills / Badges */ .pill{ display:inline-block; border:1px solid var(--border); color: var(--text-muted); padding: 4px 10px; border-radius: 999px; font-size: 12px; margin-bottom: 6px; } .badge{ display:inline-flex; align-items:center; gap:8px; font-size: 14px; color:#0a2538; font-weight: 700; background: linear-gradient(90deg, var(--warn), var(--ok)); padding:6px 10px; border-radius:999px; box-shadow: var(--shadow); } /* Cards & Containers */ .cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; margin: 18px 0; } .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } /* Grid utilities */ .grid2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 20px; } @media (max-width: 900px){ .grid2{ grid-template-columns: 1fr; } } /* Placeholder (for images coming later) */ .placeholder{ min-height: 200px; display:flex; align-items:center; justify-content:center; color: var(--text-muted); background: repeating-linear-gradient(45deg, rgba(2,6,23,.04), rgba(2,6,23,.04) 10px, rgba(2,6,23,.02) 10px, rgba(2,6,23,.02) 20px); border: 1px dashed var(--border); border-radius: var(--radius); } /* Lists, Tables, Media */ ul, ol{ padding-inline-start: 1.1rem; margin: .2rem 0 1rem; } li{ margin: .2rem 0 .4rem; } table{ width:100%; border-collapse: collapse; margin: 12px 0; font-size: .98rem; } th, td{ border:1px solid var(--border); padding: .6rem .7rem; } th{ background: var(--surface); text-align:left; } img{ max-width: 100%; height: auto; } /* Event block (used on ORB page) */ .event{ display:flex; flex-direction:column; gap:6px; border-left: 3px solid var(--accent); padding-left: 12px; margin: 8px 0; } .event time{ font-weight: 700; } /* Access map container */ .mapbox{ border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow); } /* Utilities */ .center{ text-align: center; } .right{ text-align: right; } .max-w-prose{ max-width: 72ch; } .mt-0{ margin-top: 0 !important; } .mb-0{ margin-bottom: 0 !important; } .mt-1{ margin-top: .25rem !important; } .mt-2{ margin-top: .5rem !important; } .mt-3{ margin-top: .75rem !important; } .mt-4{ margin-top: 1rem !important; } /* Buttons (secondary / outline) */ .button-outline{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .95rem; border-radius: 999px; border:1px solid var(--border); color: var(--text); text-decoration:none; background: transparent; } .button-outline:hover{ border-color: var(--link); color: var(--link); text-decoration:none; } /* Print (simple) */ @media print{ header, .footer{ display:none !important; } .wrap{ max-width: 900px; padding: 0; } a{ color: black; text-decoration: underline; } }