/* ========================================================================== StainRescue — design tokens Concept: an emergency response card, not a blog. Clarity and speed of reading beat decoration everywhere. ========================================================================== */ :root { --ink: #151B26; --ink-soft: #4B5563; --paper: #FAFAF7; --paper-raised: #FFFFFF; --line: #E3E0D6; --amber: #DC8A1E; --amber-bg: #FCF1DE; --danger: #B23A2E; --danger-bg: #FBEAE7; --safe: #2F6E4E; --safe-bg: #E9F3EC; --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Public Sans', system-ui, sans-serif; --radius: 4px; --max-w: 760px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--ink); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } h1, h2 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; margin: 0 0 0.5em; } /* ---------------------------------- header --------------------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--paper-raised); flex-wrap: wrap; } .logo { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--ink); letter-spacing: -0.01em; } .logo span { color: var(--amber); } .site-search { display: flex; gap: 0.5rem; flex: 1; max-width: 420px; min-width: 220px; } .site-search input { flex: 1; padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.95rem; background: var(--paper); } .site-search button { padding: 0.55rem 0.9rem; border: none; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; } .site-search button:hover { background: #2B3444; } /* ---------------------------------- translate widget ---------------------- */ .translate-widget { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; } .translate-widget-icon { width: 18px; height: 18px; color: var(--ink-soft); flex: 0 0 18px; } .translate-widget-icon svg { width: 100%; height: 100%; } /* Google renders #google_translate_element itself; this just keeps its default select box from looking totally out of place next to the rest of the header. Google requires the "powered by" wording to stay visible, so it's kept, just shrunk and muted rather than hidden. */ #google_translate_element .goog-te-gadget { font-family: var(--font-body) !important; font-size: 0.72rem !important; color: var(--ink-soft) !important; } #google_translate_element .goog-te-gadget-simple { background: var(--paper-raised) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; padding: 0.35rem 0.5rem !important; display: inline-flex !important; align-items: center !important; } #google_translate_element .goog-te-menu-value { color: var(--ink) !important; font-size: 0.85rem !important; } #google_translate_element img { display: none !important; } /* Google's little flag/globe icon — we show our own above */ /* Google injects a full-width banner iframe across the top of on activation and pushes everything down with inline top/position styles — both undone here so layout doesn't jump. */ .goog-te-banner-frame { display: none !important; } body { top: 0 !important; position: static !important; } .goog-tooltip, .goog-tooltip:hover { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* ---------------------------------- main layout ------------------------ */ .page-shell { display: flex; align-items: flex-start; gap: 2rem; max-width: calc(var(--max-w) + 160px + 2rem); margin: 0 auto; padding: 0 1.25rem; } main { flex: 1 1 auto; min-width: 0; max-width: var(--max-w); margin: 0; padding: 2.5rem 0 4rem; } /* ---------------------------------- ad rail ----------------------------- */ .ad-rail { flex: 0 0 160px; padding-top: 2.5rem; align-self: flex-start; position: sticky; top: 1.5rem; } .ad-slot-vertical { position: relative; width: 160px; min-height: 600px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper-raised); display: flex; align-items: center; justify-content: center; } .ad-slot-label { position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .ad-slot-placeholder { text-align: center; font-size: 0.8rem; line-height: 1.4; color: var(--ink-soft); padding: 0 0.5rem; } /* Below ~1024px there isn't room for content + a 160px rail side by side without squeezing the reading column, so the ad rail is hidden rather than pushed below the fold or narrowed illegibly. */ @media (max-width: 1024px) { .ad-rail { display: none; } } .crumbs { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1.5rem; } .crumbs a { color: var(--ink-soft); text-decoration: underline; } /* ---------------------------------- homepage hero ---------------------- */ .hero-eyebrow { display: inline-block; color: var(--amber); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.75rem; } .hero { display: grid; grid-template-columns: 1fr auto; column-gap: 2rem; align-items: start; } .hero-text { grid-column: 1; } .hero-art { grid-column: 2; grid-row: 1; width: 170px; color: var(--ink-soft); } .hero-art svg { width: 100%; height: auto; display: block; } .hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); max-width: 14ch; } .hero-sub { max-width: 52ch; color: var(--ink-soft); font-size: 1.05rem; } .quickpick { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); } .quickpick h2 { font-size: 0.95rem; font-family: var(--font-body); font-weight: 600; color: var(--ink-soft); margin-bottom: 0.75rem; } .quickpick ul { list-style: none; margin: 0; padding: 0; } .quickpick li { border-bottom: 1px solid var(--line); } .quickpick a { display: block; padding: 0.6rem 0; text-decoration: none; font-weight: 500; } .quickpick a:hover { color: var(--amber); } .full-index { margin-top: 3rem; } .full-index h2 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; color: var(--ink-soft); } .index-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .index-chip { padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 0.88rem; color: var(--ink-soft); background: var(--paper-raised); } .index-chip:hover { border-color: var(--ink); color: var(--ink); } /* ---------------------------------- categories --------------------------- */ .categories { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); } .categories h2 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; color: var(--ink-soft); margin-top: 1.75rem; } .categories h2:first-child { margin-top: 0; } .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.6rem; margin-top: 0.9rem; } .category-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); text-decoration: none; color: var(--ink); font-size: 0.9rem; font-weight: 600; } .category-card:hover { border-color: var(--amber); color: var(--amber); } .category-card-icon { width: 22px; height: 22px; flex: 0 0 22px; color: var(--amber); } .category-card-icon svg { width: 100%; height: 100%; } .category-card:hover .category-card-icon { color: inherit; } .category-icon-large { width: 44px; height: 44px; color: var(--amber); margin-bottom: 0.5rem; } .category-icon-large svg { width: 100%; height: 100%; } /* small icon glued in front of a heading, e.g. the clock on "First 60 seconds" */ .icon-inline { display: inline-flex; width: 1.1em; height: 1.1em; vertical-align: -0.18em; margin-right: 0.15em; } .icon-inline svg { width: 100%; height: 100%; } /* ---------------------------------- hub pages --------------------------- */ .hub-eyebrow { display: inline-block; font-weight: 600; font-size: 0.85rem; padding: 0.25rem 0.65rem; border-radius: 999px; margin-bottom: 0.9rem; background: var(--safe-bg); color: var(--safe); } .hub-eyebrow.urgency-high { background: var(--danger-bg); color: var(--danger); } .hub h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); } .hub-note { color: var(--ink-soft); max-width: 62ch; } .surface-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 2rem; } .surface-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); text-decoration: none; color: var(--ink); transition: border-color 0.15s ease; } .surface-card:hover { border-color: var(--ink); } .surface-card-name { font-weight: 700; font-family: var(--font-display); } .surface-card-hint { font-size: 0.82rem; color: var(--ink-soft); } /* ---------------------------------- protocol (combo) page --------------- */ .protocol-head h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); max-width: 20ch; } .protocol-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .meta-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink-soft); } .meta-pill .icon-inline { width: 1rem; height: 1rem; margin-right: 0; } .meta-pill.urgency-high { background: var(--danger-bg); color: var(--danger); border-color: transparent; } .meta-pill.urgency-medium { background: var(--amber-bg); color: var(--amber); border-color: transparent; } .meta-pill.urgency-low { background: var(--safe-bg); color: var(--safe); border-color: transparent; } .meta-pill-difficulty svg { display: block; } .protocol section { margin-top: 2.25rem; } .protocol h2 { font-size: 1.15rem; font-family: var(--font-display); } .first-minute { background: var(--amber-bg); border-left: 4px solid var(--amber); padding: 1.1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0; } .first-minute h2 { color: #96650F; margin-bottom: 0.4rem; } .first-minute p { margin: 0; } .countdown-badge { float: right; border: 1px solid var(--amber); background: var(--paper-raised); color: var(--amber); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; margin-left: 0.75rem; } .countdown-badge:hover { background: var(--amber); color: #fff; } .tools-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.75rem 0 0; padding: 0; } .tools-list li { display: flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line); background: var(--paper-raised); padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.88rem; } .tools-list li .icon-inline { color: var(--amber); margin-right: 0; } .steps ol { margin: 0.75rem 0 0; padding-left: 1.4rem; } .steps li { margin-bottom: 0.85rem; } .steps li::marker { font-weight: 700; color: var(--amber); } .avoid-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .avoid-list li { display: flex; align-items: flex-start; gap: 0.55rem; background: var(--danger-bg); border-left: 4px solid var(--danger); padding: 0.7rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.95rem; } .avoid-list .avoid-icon { color: var(--danger); margin-top: 0.15em; margin-right: 0; flex: 0 0 1.1em; } .avoid-list strong { color: var(--danger); } .pro-note { background: var(--paper-raised); border: 1px dashed var(--line); padding: 1rem 1.25rem; border-radius: var(--radius); font-size: 0.95rem; color: var(--ink-soft); } .faq details { border-bottom: 1px solid var(--line); padding: 0.85rem 0; } .faq summary { cursor: pointer; font-weight: 600; font-family: var(--font-display); } .faq p { color: var(--ink-soft); margin: 0.6rem 0 0; } .related-list { list-style: none; margin: 0.6rem 0 1.5rem; padding: 0; columns: 2; } .related-list a { display: block; padding: 0.3rem 0; font-size: 0.92rem; text-decoration: underline; color: var(--ink-soft); } .related-list a:hover { color: var(--ink); } /* ---------------------------------- not found --------------------------- */ .not-found { padding: 3rem 0; } /* ---------------------------------- search results ----------------------- */ .search-results h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); } .search-results h2 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; color: var(--ink-soft); margin-top: 2rem; } .search-results .surface-grid { margin-top: 0.75rem; } /* ---------------------------------- footer ------------------------------ */ .site-footer { border-top: 1px solid var(--line); padding: 1.5rem; text-align: center; font-size: 0.82rem; color: var(--ink-soft); } /* ---------------------------------- responsive --------------------------- */ @media (max-width: 640px) { .quickpick { grid-template-columns: 1fr; } .related-list { columns: 1; } .site-header { flex-direction: column; align-items: stretch; } .hero { grid-template-columns: 1fr; } .hero-art { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }