/* NightHawk Labs 1.0 Theme Canonical shared theme for Synology-hosted NightHawk widgets. Usage: The live color/font tokens are imported from the RT_SWSv6 GUI Lab token file. */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800;900&display=swap"); @import url("/assets/nighthawk-theme/nighthawk_gui_tokens.css"); :root { --nh-radius-sm: var(--nh-theme-radius-sm, 6px); --nh-radius: var(--nh-theme-radius, 8px); --nh-radius-pill: var(--nh-theme-radius-pill, 999px); --nh-stroke-dark: var(--nh-theme-stroke-dark, #24303a); --nh-stroke-dark-strong: var(--nh-theme-stroke-dark-strong, #364553); --nh-stroke-light: var(--nh-theme-stroke-light, #9dbbd0); --nh-stroke-light-strong: var(--nh-theme-stroke-light-strong, #6ea6c3); --nh-float-shadow: var(--nh-theme-float-shadow, 4px 6px 0 rgba(0, 0, 0, .34), -2px -3px 14px rgba(95, 148, 190, .08), 0 16px 24px rgba(0, 0, 0, .32)); --nh-float-shadow-strong: var(--nh-theme-float-shadow-strong, 5px 8px 0 rgba(0, 0, 0, .38), -2px -4px 18px rgba(88, 230, 255, .08), 0 24px 38px rgba(0, 0, 0, .40)); --nh-float-shadow-light: var(--nh-theme-float-shadow-light, 3px 5px 0 rgba(105, 132, 150, .18), -2px -3px 12px rgba(255, 255, 255, .72), 0 14px 28px rgba(16, 32, 51, .12)); --nh-float-shadow-strong-light: var(--nh-theme-float-shadow-strong-light, 4px 7px 0 rgba(105, 132, 150, .22), -2px -4px 16px rgba(255, 255, 255, .78), 0 22px 42px rgba(16, 32, 51, .16)); --nh-button-shadow: var(--nh-theme-button-shadow, 2px 3px 0 rgba(0, 0, 0, .30), -1px -2px 8px rgba(95, 148, 190, .07)); --nh-button-shadow-light: var(--nh-theme-button-shadow-light, 2px 3px 0 rgba(105, 132, 150, .18), -1px -2px 8px rgba(255, 255, 255, .72)); --nh-button-gradient-dark: var(--nh-theme-button-gradient, linear-gradient(180deg, rgba(38, 71, 98, .92), rgba(9, 22, 35, .96))); --nh-button-gradient-light: var(--nh-theme-button-gradient-light, linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(226, 240, 250, .94))); --nh-button-text-dark: var(--nh-theme-button-text, #f8fbff); --nh-button-text-light: var(--nh-theme-button-text-light, #102033); --nh-button-border-dark: var(--nh-theme-button-border, #24303a); --nh-button-border-light: var(--nh-theme-button-border-light, #9dbbd0); --nh-button-bevel-dark: var(--nh-theme-button-bevel, inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .34)); --nh-button-bevel-light: var(--nh-theme-button-bevel-light, inset 0 1px 0 rgba(255, 255, 255, .88), inset 0 -1px 0 rgba(105, 132, 150, .20)); --nh-button-gloss-opacity-dark: var(--nh-theme-button-gloss-opacity, .34); --nh-button-gloss-opacity-light: var(--nh-theme-button-gloss-opacity-light, .48); --nh-hover-lift: var(--nh-theme-hover-lift, -2px); --nh-hover-glow-opacity: var(--nh-theme-hover-glow-opacity, .22); --nh-motion-speed: var(--nh-theme-motion-speed, 180ms); --nh-shimmer-opacity: var(--nh-theme-shimmer-opacity, .22); --nh-emoji-effect: var(--nh-theme-emoji-effect, "✦"); --nh-emoji-size: var(--nh-theme-emoji-size, 16px); --nh-focus-ring: var(--nh-theme-focus-ring, 0 0 0 1px rgba(88, 230, 255, .22), 0 0 18px rgba(0, 194, 199, .16)); --nh-focus-ring-light: var(--nh-theme-focus-ring-light, 0 0 0 1px rgba(0, 159, 199, .24), 0 0 18px rgba(131, 88, 220, .12)); } .nh-theme { font-family: var(--nh-font-family, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-weight: var(--nh-body-weight, 400); letter-spacing: var(--nh-letter-spacing, 0); color: var(--nh-text); background: var(--nh-page-gradient); background-attachment: fixed; --nh-hover-glow: 0 0 22px rgba(88, 230, 255, var(--nh-hover-glow-opacity)), 0 0 28px rgba(255, 79, 216, calc(var(--nh-hover-glow-opacity) * .45)); } .nh-theme *, .nh-theme *::before, .nh-theme *::after { box-sizing: border-box; } .nh-theme button, .nh-theme input, .nh-theme select, .nh-theme textarea { font: inherit; } .nh-brand-slot, .nh-parent-logo, .nh-parent-video { display: inline-flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; } .nh-brand-logo-img { display: block; width: var(--nh-brand-logo-width, auto); height: var(--nh-brand-logo-height, 56px); max-width: var(--nh-brand-logo-max-width, 220px); max-height: var(--nh-brand-logo-max-height, 120px); object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .32)); } .nh-brand-video-el { display: block; width: var(--nh-brand-video-width, 100%); max-width: var(--nh-brand-video-max-width, 420px); aspect-ratio: var(--nh-brand-video-aspect, 1 / 1); object-fit: contain; border: 1px solid var(--nh-border); border-radius: var(--nh-radius); background: var(--nh-panel-strong); box-shadow: var(--nh-surface-shadow); } .nh-theme button, .nh-theme [role="button"], .nh-theme .nh-button { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; word-break: keep-all; text-align: center; line-height: 1; } .nh-dark, [data-nh-theme="dark"] { color-scheme: dark; --nh-page-bg: var(--nh-dark-page-bg, #050b14); --nh-panel: var(--nh-dark-panel, #0d1a26); --nh-panel-alt: var(--nh-dark-panel-alt, #101d2b); --nh-panel-strong: var(--nh-dark-panel-strong, #08101a); --nh-text: var(--nh-dark-text, #f8fbff); --nh-muted: var(--nh-dark-muted, #b8c7d9); --nh-border: var(--nh-dark-border, #28455f); --nh-border-strong: var(--nh-dark-border-strong, #31536e); --nh-cyan: var(--nh-dark-cyan, #58e6ff); --nh-blue: var(--nh-dark-blue, #2f80ff); --nh-peacock: var(--nh-dark-peacock, #00c2c7); --nh-violet: var(--nh-dark-violet, #b26dff); --nh-pink: var(--nh-dark-pink, #ff4fd8); --nh-highlight: var(--nh-dark-highlight, #d9b57a); --nh-hover: var(--nh-dark-hover, #16344a); --nh-input: var(--nh-dark-input, #0a1723); --nh-page-gradient: var(--nh-dark-page-gradient); --nh-panel-gradient: var(--nh-dark-panel-gradient); --nh-row-odd-gradient: var(--nh-dark-row-odd-gradient); --nh-row-even-gradient: var(--nh-dark-row-even-gradient); --nh-bar-gradient: var(--nh-dark-bar-gradient); --nh-stroke: var(--nh-stroke-dark); --nh-stroke-strong: var(--nh-stroke-dark-strong); --nh-surface-shadow: var(--nh-float-shadow); --nh-surface-shadow-strong: var(--nh-float-shadow-strong); --nh-control-shadow: var(--nh-button-shadow); --nh-button-gradient-current: var(--nh-button-gradient-dark); --nh-button-text-current: var(--nh-button-text-dark); --nh-button-border-current: var(--nh-button-border-dark); --nh-button-bevel-current: var(--nh-button-bevel-dark); --nh-button-gloss-opacity-current: var(--nh-button-gloss-opacity-dark); --nh-ring: var(--nh-focus-ring); --nh-card-accent-opacity-current: var(--nh-theme-card-accent-opacity, .82); --nh-grid-opacity-current: var(--nh-theme-grid-opacity, .55); } .nh-light, [data-nh-theme="light"] { color-scheme: light; --nh-page-bg: var(--nh-light-page-bg, #f4f8fc); --nh-panel: var(--nh-light-panel, #ffffff); --nh-panel-alt: var(--nh-light-panel-alt, #f4f9fd); --nh-panel-strong: var(--nh-light-panel-strong, #e8f2fb); --nh-text: var(--nh-light-text, #102033); --nh-muted: var(--nh-light-muted, #5d7188); --nh-border: var(--nh-light-border, #c9dceb); --nh-border-strong: var(--nh-light-border-strong, #9dbbd0); --nh-cyan: var(--nh-light-cyan, #009fc7); --nh-blue: var(--nh-light-blue, #1d5cff); --nh-peacock: var(--nh-light-peacock, #008f98); --nh-violet: var(--nh-light-violet, #8358dc); --nh-pink: var(--nh-light-pink, #d72aad); --nh-highlight: var(--nh-light-highlight, #9a6a26); --nh-hover: var(--nh-light-hover, #e7f5fb); --nh-input: var(--nh-light-input, #ffffff); --nh-page-gradient: var(--nh-light-page-gradient); --nh-panel-gradient: var(--nh-light-panel-gradient); --nh-row-odd-gradient: var(--nh-light-row-odd-gradient); --nh-row-even-gradient: var(--nh-light-row-even-gradient); --nh-bar-gradient: var(--nh-light-bar-gradient); --nh-stroke: var(--nh-stroke-light); --nh-stroke-strong: var(--nh-stroke-light-strong); --nh-surface-shadow: var(--nh-float-shadow-light); --nh-surface-shadow-strong: var(--nh-float-shadow-strong-light); --nh-control-shadow: var(--nh-button-shadow-light); --nh-button-gradient-current: var(--nh-button-gradient-light); --nh-button-text-current: var(--nh-button-text-light); --nh-button-border-current: var(--nh-button-border-light); --nh-button-bevel-current: var(--nh-button-bevel-light); --nh-button-gloss-opacity-current: var(--nh-button-gloss-opacity-light); --nh-ring: var(--nh-focus-ring-light); --nh-card-accent-opacity-current: var(--nh-theme-card-accent-opacity-light, .72); --nh-grid-opacity-current: var(--nh-theme-grid-opacity-light, .22); } .nh-theme.nh-dark::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(rgba(88, 230, 255, .032) 1px, transparent 1px), linear-gradient(90deg, rgba(178, 109, 255, .026) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 80%); opacity: var(--nh-grid-opacity-current, .55); } .nh-shell { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 24px; } .nh-card, .nh-panel, .nh-stat, .nh-record, .nh-dialog { position: relative; border: 1px solid var(--nh-stroke); border-radius: var(--nh-radius); background: var(--nh-panel-gradient); box-shadow: var(--nh-surface-shadow); color: var(--nh-text); transition: transform var(--nh-motion-speed) ease, box-shadow var(--nh-motion-speed) ease, border-color var(--nh-motion-speed) ease; } .nh-card::before, .nh-panel::before, .nh-stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: var(--nh-radius) var(--nh-radius) 0 0; background: var(--nh-bar-gradient); opacity: var(--nh-card-accent-opacity-current, .82); } .nh-panel-header, .nh-toolbar, .nh-table th { background: var(--nh-panel-alt); border-color: var(--nh-border); color: var(--nh-text); } .nh-stat { min-height: 92px; padding: 16px; overflow: hidden; } .nh-label, .nh-table th { color: var(--nh-muted); font-size: 11px; font-weight: var(--nh-label-weight, 800); letter-spacing: .08em; text-transform: uppercase; } .nh-metric { color: var(--nh-text); font-size: 28px; font-weight: var(--nh-metric-weight, 900); line-height: 1; text-shadow: 0 0 16px rgba(88, 230, 255, .14); } .nh-total, .nh-total .nh-metric { color: var(--nh-highlight); text-shadow: 0 0 14px rgba(217, 181, 122, .18); } .nh-button, .nh-icon-button, .nh-input, .nh-select, .nh-pill { border: 1px solid #303943; border-radius: var(--nh-radius); background: linear-gradient(180deg, var(--nh-panel-alt), var(--nh-input)); color: var(--nh-text); box-shadow: var(--nh-control-shadow); } .nh-button, .nh-icon-button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; height: auto; padding: 7px 12px; border-color: var(--nh-button-border-current); background: var(--nh-button-gradient-current); color: var(--nh-button-text-current); box-shadow: var(--nh-control-shadow), var(--nh-button-bevel-current); font-weight: var(--nh-button-weight, 800); text-shadow: 0 1px 0 rgba(0, 0, 0, .34); cursor: pointer; transition: transform var(--nh-motion-speed) ease, box-shadow var(--nh-motion-speed) ease, border-color var(--nh-motion-speed) ease, filter var(--nh-motion-speed) ease; } .nh-icon-button { display: inline-grid; place-items: center; width: 36px; min-width: 36px; padding: 0; white-space: nowrap; } .nh-button::before, .nh-icon-button::before { content: ""; position: absolute; inset: 1px 1px 50%; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 62%, transparent); opacity: var(--nh-button-gloss-opacity-current); pointer-events: none; } .nh-button:hover, .nh-icon-button:hover, .nh-button:focus-visible, .nh-icon-button:focus-visible { border-color: var(--nh-stroke-strong); box-shadow: var(--nh-control-shadow), var(--nh-ring), var(--nh-hover-glow); outline: none; } .nh-button:hover, .nh-icon-button:hover { transform: translateY(var(--nh-hover-lift)); filter: saturate(1.08); } .nh-theme [data-nh-button-effect] { position: relative; isolation: isolate; overflow: hidden; --nh-effect-a: var(--nh-cyan); --nh-effect-b: var(--nh-violet); --nh-effect-c: var(--nh-pink); --nh-effect-speed: 1.6s; --nh-effect-shadow: 0 0 18px color-mix(in srgb, var(--nh-effect-a) 34%, transparent); } .nh-theme [data-nh-button-effect]:hover, .nh-theme [data-nh-button-effect]:focus-visible { border-color: color-mix(in srgb, var(--nh-effect-a) 72%, var(--nh-button-border-current)); box-shadow: var(--nh-control-shadow), var(--nh-button-bevel-current), var(--nh-effect-shadow), 0 0 28px color-mix(in srgb, var(--nh-effect-b) 18%, transparent); } .nh-theme [data-nh-button-effect]:active { transform: translateY(1px) scale(.985); filter: saturate(1.14) brightness(.96); } .nh-theme [data-nh-button-effect]::after { content: ""; position: absolute; inset: -40% -30% auto; height: 70%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--nh-effect-a) 34%, transparent), transparent); opacity: 0; transform: translateX(-70%); pointer-events: none; } .nh-theme [data-nh-button-effect]:hover::after { opacity: .9; animation: nh-button-effect-sweep var(--nh-effect-speed) ease; } .nh-theme [data-nh-button-effect="BTN-FX-001"] { --nh-effect-a: #ff4fd8; --nh-effect-b: #b26dff; --nh-effect-c: #ff8fea; --nh-effect-speed: 1.15s; --nh-effect-shadow: 0 0 20px rgba(255, 79, 216, .52), 0 0 38px rgba(178, 109, 255, .24); } .nh-theme [data-nh-button-effect="BTN-FX-002"] { --nh-effect-a: #58e6ff; --nh-effect-b: #2f80ff; --nh-effect-c: #00c2c7; --nh-effect-speed: 1.25s; --nh-effect-shadow: 0 0 20px rgba(88, 230, 255, .44), 0 0 36px rgba(47, 128, 255, .24); } .nh-theme [data-nh-button-effect="BTN-FX-003"] { --nh-effect-a: #ffd257; --nh-effect-b: #ff9f2f; --nh-effect-c: #ff4f4f; --nh-effect-speed: 1.05s; --nh-effect-shadow: 0 0 20px rgba(255, 210, 87, .46), 0 0 34px rgba(255, 79, 79, .22); } .nh-theme [data-nh-button-effect="BTN-FX-004"] { --nh-effect-a: #daf1ff; --nh-effect-b: #7aa7c4; --nh-effect-c: #ffffff; --nh-effect-speed: .85s; --nh-effect-shadow: inset 0 1px 0 rgba(255, 255, 255, .52), 0 0 18px rgba(218, 241, 255, .20); } .nh-theme [data-nh-button-effect="BTN-FX-005"] { --nh-effect-a: rgba(255, 255, 255, .86); --nh-effect-b: #58e6ff; --nh-effect-c: #b26dff; --nh-effect-speed: 1.8s; --nh-effect-shadow: 0 0 16px rgba(88, 230, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .30); } .nh-theme [data-nh-button-effect="BTN-FX-006"] { --nh-effect-a: #00c2c7; --nh-effect-b: #32d384; --nh-effect-c: #adffd2; --nh-effect-speed: 1.35s; --nh-effect-shadow: 0 0 18px rgba(0, 194, 199, .38), 0 0 34px rgba(50, 211, 132, .22); } .nh-theme [data-nh-button-effect="BTN-FX-007"] { --nh-effect-a: #58e6ff; --nh-effect-b: #d9b57a; --nh-effect-c: #f8fbff; --nh-effect-speed: 1.1s; --nh-effect-shadow: 0 0 0 2px rgba(88, 230, 255, .18), 0 0 22px rgba(217, 181, 122, .20); } .nh-theme [data-nh-button-effect="BTN-FX-008"] { --nh-effect-a: #9fb0cd; --nh-effect-b: #31536e; --nh-effect-c: #f8fbff; --nh-effect-speed: 2.4s; --nh-effect-shadow: 0 0 0 1px rgba(159, 176, 205, .12), 0 8px 18px rgba(0, 0, 0, .18); } .nh-theme [data-nh-button-effect="BTN-FX-009"] { --nh-effect-a: #4de8ff; --nh-effect-b: #9f6dff; --nh-effect-c: #ff62d0; --nh-effect-speed: 1.2s; --nh-effect-shadow: 0 0 18px rgba(77, 232, 255, .32), 0 0 36px rgba(255, 98, 208, .20); } .nh-theme [data-nh-button-effect="BTN-FX-010"] { --nh-effect-a: #b8c7d9; --nh-effect-b: #58e6ff; --nh-effect-c: #ffffff; --nh-effect-speed: 1.9s; --nh-effect-shadow: 0 10px 22px rgba(0, 0, 0, .24); } .nh-theme [data-nh-button-effect="BTN-FX-011"] { --nh-effect-a: #ff5275; --nh-effect-b: #ff9f2f; --nh-effect-c: #fff2a8; --nh-effect-speed: .95s; --nh-effect-shadow: 0 0 20px rgba(255, 82, 117, .46), 0 0 34px rgba(255, 159, 47, .20); } .nh-theme [data-nh-button-effect="BTN-FX-012"] { --nh-effect-a: #ffd257; --nh-effect-b: #d9b57a; --nh-effect-c: #fff0bd; --nh-effect-speed: 1.1s; --nh-effect-shadow: 0 0 18px rgba(255, 210, 87, .34), inset 0 1px 0 rgba(255, 255, 255, .42); } .nh-theme [data-nh-button-effect="BTN-FX-001"].is-attention, .nh-theme [data-nh-button-effect="BTN-FX-002"].is-attention, .nh-theme [data-nh-button-effect="BTN-FX-003"].is-attention, .nh-theme [data-nh-button-effect="BTN-FX-011"].is-attention { animation: nh-button-effect-pulse var(--nh-effect-speed) ease-in-out infinite; } @keyframes nh-button-effect-sweep { from { transform: translateX(-70%); } to { transform: translateX(120%); } } @keyframes nh-button-effect-pulse { 0%, 100% { box-shadow: var(--nh-control-shadow), var(--nh-button-bevel-current), 0 0 0 color-mix(in srgb, var(--nh-effect-a) 0%, transparent); } 50% { box-shadow: var(--nh-control-shadow), var(--nh-button-bevel-current), var(--nh-effect-shadow), 0 0 36px color-mix(in srgb, var(--nh-effect-c) 28%, transparent); } } .nh-theme.nh-fx-emoji .nh-button, .nh-theme.nh-fx-emoji .nh-icon-button { overflow: visible; } .nh-card:hover, .nh-panel:hover, .nh-stat:hover, .nh-record:hover { transform: translateY(calc(var(--nh-hover-lift) / 2)); box-shadow: var(--nh-surface-shadow-strong), var(--nh-hover-glow); } .nh-theme.nh-fx-emoji .nh-button:hover::after, .nh-theme.nh-fx-emoji .nh-pill:hover::after { content: var(--nh-emoji-effect); position: absolute; right: -8px; top: -10px; font-size: var(--nh-emoji-size); line-height: 1; pointer-events: none; filter: drop-shadow(0 0 10px rgba(88, 230, 255, .55)); animation: nh-emoji-pop var(--nh-motion-speed) ease both; } @keyframes nh-emoji-pop { from { opacity: 0; transform: translateY(6px) scale(.8) rotate(-10deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } } .nh-input, .nh-select { min-height: 36px; padding: 0 10px; } .nh-pill { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 9px; border-radius: var(--nh-radius-pill); background: rgba(88, 230, 255, .12); font-size: 12px; font-weight: 800; line-height: 1.2; } .nh-pill.is-ok { background: rgba(0, 194, 199, .16); } .nh-pill.is-dm, .nh-pill.is-category { background: rgba(178, 109, 255, .16); } .nh-pill.is-alert { background: rgba(255, 79, 216, .13); } .nh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .nh-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; } .nh-table th { padding: 8px 12px; text-align: left; } .nh-table td { padding: 13px 12px; background: var(--nh-row-odd-gradient); border-top: 1px solid rgba(88, 230, 255, .16); border-bottom: 1px solid rgba(88, 230, 255, .12); } .nh-table tr:nth-child(even) td { background: var(--nh-row-even-gradient); } .nh-table td:first-child { border-left: 1px solid rgba(88, 230, 255, .16); border-radius: var(--nh-radius) 0 0 var(--nh-radius); } .nh-table td:last-child { border-right: 1px solid rgba(88, 230, 255, .16); border-radius: 0 var(--nh-radius) var(--nh-radius) 0; } .nh-table tbody tr { filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, .24)) drop-shadow(0 16px 18px rgba(0, 0, 0, .22)); } .nh-progress { height: 10px; overflow: hidden; border: 1px solid rgba(88, 230, 255, .25); border-radius: var(--nh-radius-pill); background: var(--nh-panel-strong); } .nh-progress > span, .nh-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--nh-bar-gradient); box-shadow: 0 0 16px rgba(88, 230, 255, .22), 0 0 18px rgba(255, 79, 216, .10); } .nh-map, .nh-theme.nh-dark .leaflet-container { background: #07111c; } .nh-theme.nh-dark .leaflet-control-zoom a, .nh-theme.nh-dark .leaflet-control-attribution, .nh-theme.nh-dark .leaflet-popup-content-wrapper, .nh-theme.nh-dark .leaflet-popup-tip { background: rgba(8, 22, 35, .94); border-color: var(--nh-stroke); color: var(--nh-text); } @media (max-width: 640px) { .nh-shell { padding: 12px; } .nh-grid { grid-template-columns: 1fr; } }