/* ==========================================================================
 PLUS for Node-RED - Modern CSS Base
 Mobile-First | CSS Custom Properties | Modern CSS Features
 ========================================================================== */
/* ==========================================================================
 FONTS - Optimized with font-display: swap
 ========================================================================== */
 
@font-face {
 font-family: 'Gilroy';
 font-weight: 900;
 font-style: normal;
 font-display: swap;
 src: url('../assets/fonts/Gilroy-Black.ttf') format('truetype');
}
@font-face {
 font-family: 'Gilroy';
 font-weight: 800;
 font-style: normal;
 font-display: swap;
 src: url('../assets/fonts/Gilroy-ExtraBold.ttf') format('truetype');
}
@font-face {
 font-family: 'Gilroy';
 font-weight: 700;
 font-style: normal;
 font-display: swap;
 src: url('../assets/fonts/Gilroy-Bold.ttf') format('truetype');
}
@font-face {
 font-family: 'Gilroy';
 font-weight: 600;
 font-style: normal;
 font-display: swap;
 src: url('../assets/fonts/Gilroy-SemiBold.ttf') format('truetype');
}
@font-face {
 font-family: 'Gilroy';
 font-weight: 500;
 font-style: normal;
 font-display: swap;
 src: url('../assets/fonts/Gilroy-Medium.ttf') format('truetype');
}
@font-face {
 font-family: 'Gilroy';
 font-weight: 400;
 font-style: normal;
 font-display: swap;
 src: url('../assets/fonts/Gilroy-Regular.ttf') format('truetype');
}
@font-face {
 font-family: 'Gilroy';
 font-weight: 300;
 font-style: normal;
 font-display: swap;
 src: url('../assets/fonts/Gilroy-Light.ttf') format('truetype');
}
/* ==========================================================================
 CSS CUSTOM PROPERTIES (Design Tokens)
 ========================================================================== */
:root {
 /* ========== Color System ========== */
 /* Primary Colors */
 --color-primary: #E20036;
 --color-primary-light: #ff1a4d;
 --color-primary-dark: #b8002b;
 --color-primary-glow: rgba(226, 0, 54, 0.4);
 
 /* Accent Colors */
 --color-accent: #8CE2E7;
 --color-accent-light: #b0ecef;
 --color-accent-dark: #07a096;
 --color-accent-glow: rgba(140, 226, 231, 0.3);
 
 /* Background Colors */
 --color-bg-primary: #1F2937;
 --color-bg-secondary: #19222D;
 --color-bg-tertiary: #0f161d;
 --color-bg-card: rgba(31, 41, 55, 0.85);
 --color-bg-card-hover: rgba(31, 41, 55, 0.95);
 --color-bg-overlay: rgba(15, 22, 29, 0.8);
 
 /* Surface Colors */
 --color-surface-light: #e6e6e6;
 --color-surface-lighter: #f3f4f6;
 --color-surface-white: #ffffff;
 
 /* Text Colors */
 --color-text-primary: #e6e6e6;
 --color-text-secondary: #c4c4c4;
 --color-text-muted: #9ca3af;
 --color-text-dark: #19222D;
 --color-text-accent: #8CE2E7;
 
 /* Border Colors */
 --color-border: rgba(255, 255, 255, 0.1);
 --color-border-accent: rgba(140, 226, 231, 0.5);
 --color-border-primary: rgba(226, 0, 54, 0.5);
 
 /* ========== Spacing System (8px base grid) ========== */
 --space-3xs: 0.125rem; /* 2px */
 --space-2xs: 0.25rem; /* 4px */
 --space-xs: 0.5rem; /* 8px */
 --space-sm: 0.75rem; /* 12px */
 --space-md: 1rem; /* 16px */
 --space-lg: 1.5rem; /* 24px */
 --space-xl: 2rem; /* 32px */
 --space-2xl: 3rem; /* 48px */
 --space-3xl: 4rem; /* 64px */
 --space-4xl: 6rem; /* 96px */
 --space-5xl: 8rem; /* 128px */
 
 /* ========== Typography Scale (Fluid) ========== */
 --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
 --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
 --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
 --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
 --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
 --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
 --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
 --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
 --text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
 
 /* Line Heights */
 --leading-none: 1;
 --leading-tight: 1.25;
 --leading-snug: 1.375;
 --leading-normal: 1.5;
 --leading-relaxed: 1.625;
 --leading-loose: 2;
 
 /* Font Weights */
 --font-light: 300;
 --font-normal: 400;
 --font-medium: 500;
 --font-semibold: 600;
 --font-bold: 700;
 --font-extrabold: 800;
 
 /* ========== Shadows ========== */
 --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
 --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
 --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
 --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
 --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.5);
 --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.6);
 --shadow-glow-accent: 0 0 30px var(--color-accent-glow);
 --shadow-glow-primary: 0 0 30px var(--color-primary-glow);
 --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
 
 /* ========== Border Radius ========== */
 --radius-xs: 0.25rem; /* 4px */
 --radius-sm: 0.375rem; /* 6px */
 --radius-md: 0.5rem; /* 8px */
 --radius-lg: 0.75rem; /* 12px */
 --radius-xl: 1rem; /* 16px */
 --radius-2xl: 1.5rem; /* 24px */
 --radius-full: 9999px;
 
 /* ========== Transitions ========== */
 --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
 --ease-in: cubic-bezier(0.4, 0, 1, 1);
 --ease-out: cubic-bezier(0, 0, 0.2, 1);
 --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
 --duration-fast: 150ms;
 --duration-base: 250ms;
 --duration-slow: 400ms;
 --duration-slower: 600ms;
 
 --transition-fast: var(--duration-fast) var(--ease-default);
 --transition-base: var(--duration-base) var(--ease-default);
 --transition-slow: var(--duration-slow) var(--ease-default);
 --transition-bounce: var(--duration-slow) var(--ease-bounce);
 
 /* ========== Z-Index Scale ========== */
 --z-dropdown: 100;
 --z-sticky: 200;
 --z-fixed: 300;
 --z-modal-backdrop: 400;
 --z-modal: 500;
 --z-popover: 600;
 --z-tooltip: 700;
 
 /* ========== Container Widths ========== */
 --container-sm: 640px;
 --container-md: 768px;
 --container-lg: 1024px;
 --container-xl: 1280px;
 --container-2xl: 1536px;
 
 /* ========== Navbar Height ========== */
 --navbar-height: 4rem;
 --navbar-height-lg: 5rem;
}
/* ==========================================================================
 CSS RESET - Modern Minimal Reset
 ========================================================================== */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
html {
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}
body {
 min-height: 100vh;
 min-height: 100dvh; /* Dynamic viewport height for mobile */
 width: 100%;
 overflow-x: hidden;
 background-color: var(--color-bg-primary);
 color: var(--color-text-primary);
 font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 font-size: var(--text-base);
 font-weight: var(--font-normal);
 line-height: var(--leading-normal);
}
/* ==========================================================================
 TYPOGRAPHY - Mobile First
 ========================================================================== */
h1, h2, h3, h4, h5, h6 {
 color: var(--color-text-primary);
 font-weight: var(--font-bold);
 line-height: var(--leading-tight);
 text-wrap: balance;
}
h1 {
 font-size: var(--text-3xl);
 font-weight: var(--font-extrabold);
}
h2 {
 font-size: var(--text-2xl);
 font-weight: var(--font-bold);
}
h3 {
 font-size: var(--text-xl);
 font-weight: var(--font-semibold);
}
h4 {
 font-size: var(--text-lg);
 font-weight: var(--font-semibold);
}
h5 {
 font-size: var(--text-base);
 font-weight: var(--font-medium);
 line-height: var(--leading-normal);
}
h6 {
 font-size: var(--text-sm);
 font-weight: var(--font-medium);
}
p {
 color: var(--color-text-secondary);
 font-size: var(--text-base);
 line-height: var(--leading-relaxed);
 text-wrap: pretty;
}
/* Desktop Typography Enhancement */
@media (min-width: 1024px) {
 h1 {
 font-size: var(--text-4xl);
 }
 
 h2 {
 font-size: var(--text-3xl);
 }
}
/* ==========================================================================
 BASE ELEMENTS
 ========================================================================== */
a {
 color: var(--color-text-primary);
 text-decoration: none;
 transition: color var(--transition-fast);
}
a:hover {
 color: var(--color-accent);
}
img,
picture,
video,
canvas,
svg {
 display: block;
 max-width: 100%;
 height: auto;
}
img {
 object-fit: cover;
}
ul, ol {
 list-style: none;
}
hr {
 border: none;
 border-top: 1px solid var(--color-border);
 margin: var(--space-lg) 0;
}
/* ==========================================================================
 UTILITY CLASSES
 ========================================================================== */
/* Container */
.container {
 width: 100%;
 max-width: var(--container-xl);
 margin-inline: auto;
 padding-inline: var(--space-md);
}
@media (min-width: 768px) {
 .container {
 padding-inline: var(--space-xl);
 }
}
/* Section Spacing */
.section {
 padding-block: var(--space-3xl);
}
@media (min-width: 768px) {
 .section {
 padding-block: var(--space-4xl);
 }
}
@media (min-width: 1024px) {
 .section {
 padding-block: var(--space-5xl);
 }
}
/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }
/* Background Utilities */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-surface { background-color: var(--color-surface-light); }
/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
/* Grid Utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) {
 .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
 .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
 .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Visibility */
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}
/* ==========================================================================
 FOCUS STATES (Accessibility)
 ========================================================================== */
:focus {
 outline: none;
}
:focus-visible {
 outline: 3px solid var(--color-accent);
 outline-offset: 3px;
 border-radius: var(--radius-sm);
}
/* ==========================================================================
 SELECTION STYLES
 ========================================================================== */
::selection {
 background-color: var(--color-accent);
 color: var(--color-bg-secondary);
}
/* ==========================================================================
 SCROLLBAR STYLES
 ========================================================================== */
::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}
::-webkit-scrollbar-track {
 background: var(--color-bg-tertiary);
}
::-webkit-scrollbar-thumb {
 background: var(--color-text-muted);
 border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
 background: var(--color-accent);
}
/* Firefox */
* {
 scrollbar-width: thin;
 scrollbar-color: var(--color-text-muted) var(--color-bg-tertiary);
}
/* ==========================================================================
 BUTTON SYSTEM
 ========================================================================== */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: var(--space-xs);
 padding: var(--space-sm) var(--space-lg);
 font-family: inherit;
 font-size: var(--text-base);
 font-weight: var(--font-semibold);
 line-height: var(--leading-none);
 text-decoration: none;
 white-space: nowrap;
 border-radius: var(--radius-md);
 border: 2px solid transparent;
 cursor: pointer;
 transition: 
 background-color var(--transition-fast),
 color var(--transition-fast),
 border-color var(--transition-fast),
 transform var(--transition-fast),
 box-shadow var(--transition-fast);
}
.btn:active {
 transform: scale(0.98);
}
/* Primary Button (Accent Color) */
.btn-primary {
 background-color: var(--color-accent);
 border-color: var(--color-accent);
 color: var(--color-bg-secondary);
}
.btn-primary:hover {
 background-color: transparent;
 color: var(--color-accent);
 transform: translateY(-2px);
 box-shadow: var(--shadow-glow-accent);
}
/* Secondary Button (Outline) */
.btn-secondary {
 background-color: transparent;
 border-color: var(--color-text-primary);
 color: var(--color-text-primary);
}
.btn-secondary:hover {
 background-color: var(--color-text-primary);
 color: var(--color-bg-secondary);
 transform: translateY(-2px);
}
/* Accent Button (Primary Color - Red) */
.btn-accent {
 background-color: var(--color-primary);
 border-color: var(--color-primary);
 color: var(--color-text-primary);
}
.btn-accent:hover {
 background-color: var(--color-primary-light);
 border-color: var(--color-primary-light);
 transform: translateY(-2px);
 box-shadow: var(--shadow-glow-primary);
}
/* Ghost Button */
.btn-ghost {
 background-color: transparent;
 border-color: var(--color-text-primary);
 color: var(--color-text-primary);
}
.btn-ghost:hover {
 background-color: var(--color-text-primary);
 color: var(--color-bg-primary);
 transform: translateY(-2px);
}
/* Light Buttons (for dark/colored backgrounds) */
.btn-light {
 background-color: white;
 border-color: white;
 color: var(--color-primary);
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.btn-light:hover {
 background-color: rgba(255, 255, 255, 0.9);
 border-color: white;
 color: var(--color-primary-dark);
 transform: translateY(-2px);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.btn-outline-light {
 background-color: rgba(255, 255, 255, 0.1);
 border-color: white;
 color: white;
}
.btn-outline-light:hover {
 background-color: white;
 border-color: white;
 color: var(--color-primary);
 transform: translateY(-2px);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
/* Button Sizes */
.btn-sm {
 padding: var(--space-xs) var(--space-md);
 font-size: var(--text-sm);
}
.btn-lg {
 padding: var(--space-md) var(--space-xl);
 font-size: var(--text-lg);
}
/* Button Group */
.btn-group {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: var(--space-md);
 justify-content: center;
 width: 100%;
}
.btn-group .btn {
 width: 100%;
 max-width: 280px;
}
@media (min-width: 640px) {
 .btn-group {
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 width: auto;
 }
 .btn-group .btn {
 width: auto;
 max-width: none;
 }
}
@media (min-width: 1024px) {
 .btn-group {
 justify-content: flex-start;
 }
}
/* ==========================================================================
 CARD SYSTEM
 ========================================================================== */
.card {
 position: relative;
 background: var(--color-bg-card);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-xl);
 padding: var(--space-lg);
 transition: 
 transform var(--transition-slow),
 border-color var(--transition-base),
 box-shadow var(--transition-slow);
}
.card:hover {
 transform: translateY(-8px);
 border-color: var(--color-border-accent);
 box-shadow: var(--shadow-xl), var(--shadow-glow-accent);
}
.card-accent {
 border-color: var(--color-accent);
}
.card-accent:hover {
 border-color: var(--color-accent-light);
}
/* ==========================================================================
 DIVIDER
 ========================================================================== */
.divider {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: var(--space-lg) 0;
}
.divider svg {
 width: min(70%, 800px);
 height: auto;
 opacity: 0.6;
}
.divider.dark svg path {
 stroke: var(--color-bg-primary);
 stroke-width: 2px;
}
/* ==========================================================================
 SECTION TITLE
 ========================================================================== */
.section-header {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: var(--space-md);
 margin-bottom: var(--space-2xl);
 max-width: 720px;
 margin-inline: auto;
}
.section-header h2 {
 color: var(--color-text-primary);
}
.section-header p,
.section-header h5 {
 color: var(--color-text-secondary);
}
.section-header.dark h2,
.section-header.dark h5,
.section-header.dark p {
 color: var(--color-text-dark);
}
/* ==========================================================================
 HIGHLIGHT TEXT
 ========================================================================== */
.highlight {
 color: var(--color-primary);
}
.highlight-accent {
 color: var(--color-accent);
}
.gradient-text {
 background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}
/* ==========================================================================
 ANIMATIONS - Base Keyframes
 ========================================================================== */
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}
@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(30px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
@keyframes fadeInDown {
 from {
 opacity: 0;
 transform: translateY(-30px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
@keyframes slideInLeft {
 from {
 opacity: 0;
 transform: translateX(-50px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}
@keyframes slideInRight {
 from {
 opacity: 0;
 transform: translateX(50px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}
@keyframes scaleIn {
 from {
 opacity: 0;
 transform: scale(0.9);
 }
 to {
 opacity: 1;
 transform: scale(1);
 }
}
@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
}
@keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-10px); }
}
/* Animation Classes */
.animate-fade-in { animation: fadeIn var(--duration-slow) var(--ease-out); }
.animate-fade-in-up { animation: fadeInUp var(--duration-slow) var(--ease-out); }
.animate-fade-in-down { animation: fadeInDown var(--duration-slow) var(--ease-out); }
.animate-slide-in-left { animation: slideInLeft var(--duration-slow) var(--ease-out); }
.animate-slide-in-right { animation: slideInRight var(--duration-slow) var(--ease-out); }
.animate-scale-in { animation: scaleIn var(--duration-slow) var(--ease-out); }
/* Scroll Animation Classes */
.scroll-animate {
 opacity: 0;
 transform: translateY(40px);
 transition: 
 opacity var(--duration-slower) var(--ease-out),
 transform var(--duration-slower) var(--ease-out);
}
.scroll-animate.is-visible {
 opacity: 1;
 transform: translateY(0);
}
/* Stagger Delays */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 100ms; }
.stagger-3 { transition-delay: 200ms; }
.stagger-4 { transition-delay: 300ms; }
.stagger-5 { transition-delay: 400ms; }
.stagger-6 { transition-delay: 500ms; }
/* ==========================================================================
 REDUCED MOTION
 ========================================================================== */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
 
 .scroll-animate {
 opacity: 1;
 transform: none;
 }
}
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://plus4nodered.com/css/base.css">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://plus4nodered.com/css/base.css" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>