/* ========================================================================== Hyperhidrosis Solutions Guide - stylesheet Theme is driven by data-theme on ("dark" | "light"). See theme.js. ========================================================================== */ :root { --accent: #19b8a6; --warn: #c0603f; --danger: #b23a2e; --page-bg: #13181b; --surface: #1b2127; --ink: #eef2f3; --body-text: #aab6bd; --muted: #7e8d96; --line: #2b333a; --track: #2b333a; --chip-bg: #262d34; --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --radius-card: 16px; --radius-tip: 14px; --card-padding: 24px; --page-width: 860px; } [data-theme="light"] { --accent: #0e8a7d; --page-bg: #eef2f3; --surface: #ffffff; --ink: #16242e; --body-text: #3a4b56; --muted: #5d6f7a; --line: #dfe5e8; --track: #e7ecee; --chip-bg: #eef2f3; } /* --------------------------------------------------------------- base --- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 40px 24px 64px; background: var(--page-bg); color: var(--body-text); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; text-wrap: pretty; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } strong { color: var(--ink); font-weight: 600; } .page { max-width: var(--page-width); margin: 0 auto; } /* ------------------------------------------------------------- header --- */ .site-header { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 12px 16px; margin-bottom: 36px; } .eyebrow, .disclaimer-note { grid-column: 1 / -1; } .disclaimer-flag { grid-column: 1; justify-self: start; } .header-actions { grid-column: 2; justify-self: end; } .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .disclaimer-note { font-size: 12.5px; color: var(--muted); } .disclaimer-flag { /* inline-flex so it still takes a top margin once the header goes to a plain block for the PDF and the image export. */ display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 5px 11px; border-radius: 99px; background: var(--chip-bg); color: var(--ink); white-space: nowrap; } .header-actions { display: flex; align-items: center; gap: 8px; } .theme-toggle, .pdf-button, .image-button { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); cursor: pointer; } .theme-toggle:hover, .pdf-button:hover, .image-button:hover { color: var(--ink); border-color: var(--muted); } .image-button[disabled] { cursor: default; color: var(--accent); } /* Icon only, so it stays a circle rather than a pill. */ .theme-toggle { width: 32px; padding: 0; } .theme-toggle .icon { width: 15px; height: 15px; display: none; } /* Show the theme you'd switch to, not the one you're in. */ [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Carries the guide's name into the PDF and the first image, where the browser tab title isn't there to do it. Never shown on screen. */ .export-title { display: none; margin: 0 0 10px; font-size: 29px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); } /* -------------------------------------------------------- section rule --- */ .section-rule { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .section-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); } .section-rule-label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); } .section-rule--danger .section-rule-label { color: var(--danger); } /* ------------------------------------------------------------- panels --- */ .panel, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--card-padding); margin-bottom: 40px; } .card { position: relative; } .card--danger { border-color: rgba(178, 58, 46, 0.4); } .card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; } .card-title { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .card-subtitle { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); } .card-intro { margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; max-width: 72ch; } .card-outro { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; color: var(--muted); } .badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 6px 12px; border-radius: 99px; background: rgba(25, 184, 166, 0.14); color: var(--accent); white-space: nowrap; } .badge--danger { background: rgba(178, 58, 46, 0.16); color: var(--danger); } /* ------------------------------------------------------------ ratings --- */ .ratings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-bottom: 24px; } .rating-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .rating-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); } .rating-value { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink); } .rating-track { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; } .rating-fill { height: 100%; border-radius: 99px; background: var(--warn); } .rating-fill--good { background: var(--accent); } .rating-fill--danger { background: var(--danger); } /* -------------------------------------------------------- pros & cons --- */ .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .column-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; } .column-label--pro { color: var(--accent); } .column-label--con { color: var(--warn); } .column-label--danger { color: var(--danger); } .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .list-item { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; } .marker { flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 600; } .marker--pro { background: rgba(25, 184, 166, 0.14); color: var(--accent); } .marker--con { background: rgba(192, 96, 63, 0.14); color: var(--warn); font-size: 14px; } .marker--danger { background: rgba(178, 58, 46, 0.14); color: var(--danger); font-size: 14px; } .marker--none { background: var(--chip-bg); color: var(--muted); } /* -------------------------------------------------------------- notes --- */ .note { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; padding: 15px 17px; border-radius: 11px; border: 1px solid var(--line); background: var(--chip-bg); font-size: 14px; line-height: 1.55; } .note--lead { margin: 0 0 22px; } .note--danger { background: rgba(178, 58, 46, 0.08); border-color: rgba(178, 58, 46, 0.28); } .note-icon { flex: none; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; background: var(--track); color: var(--muted); } .note--danger .note-icon { background: rgba(178, 58, 46, 0.16); color: var(--danger); } .note--danger strong { color: var(--danger); } /* ---------------------------------------------------------- checklist --- */ .check-groups { display: flex; flex-direction: column; gap: 24px; } .check-group-head { margin-bottom: 13px; } .check-group-name { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .check-group-note { font-size: 13px; color: var(--muted); } .check-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; } .check { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.45; } .check-mark { flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: rgba(25, 184, 166, 0.14); color: var(--accent); } .check-footnote { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--muted); } /* -------------------------------------------------------------- steps --- */ .steps { display: flex; flex-direction: column; gap: 18px; } .step { display: flex; gap: 14px; align-items: flex-start; } .step-number { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent); padding-top: 2px; } .step-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); } .step-body { margin: 0; font-size: 14.5px; line-height: 1.55; } /* --------------------------------------------------------------- tips --- */ .tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 40px; } .tip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tip); padding: var(--card-padding); } .tip-kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .tip-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .tip-subtitle { margin: 5px 0 16px; font-size: 13px; color: var(--muted); } .tip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .tip-item { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; } .tip-marker { flex: none; font-weight: 700; } .tip-marker--pro { color: var(--accent); } .tip-marker--con { color: var(--warn); } .lead { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; max-width: 72ch; } /* ------------------------------------------------------------- footer --- */ .site-footer { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--muted); } .site-footer p { margin: 0 0 10px; } /* ------------------------------------------------------------- legend --- */ /* Built by legend.js from the section rules. A pop-up menu by default, a rail alongside the page once there's room for one. Screen only - it is left out of both the PDF and the image export. */ .legend { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100% - 32px); } .legend-title { display: none; } .legend-toggle { order: 1; /* below the list, which opens upwards */ display: inline-flex; align-items: center; height: 34px; padding: 0 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); } .legend-toggle:hover { border-color: var(--muted); } .legend-list { display: none; list-style: none; margin: 0; padding: 7px; max-height: 60vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26); } .legend.is-open .legend-list { display: block; } .legend-link { display: flex; gap: 10px; padding: 7px 10px; border-radius: 9px; font-size: 13.5px; line-height: 1.35; color: var(--body-text); } .legend-link:hover { background: var(--chip-bg); color: var(--ink); text-decoration: none; } .legend-index { flex: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding-top: 2px; color: var(--muted); } .legend-item--current .legend-link, .legend-item--current .legend-index { color: var(--accent); } @media (min-width: 1280px) { .legend { top: 40px; right: auto; bottom: auto; /* Parked in the gutter, one gap to the left of the content column. */ left: calc(50% - (var(--page-width) / 2) - 196px); width: 172px; align-items: stretch; gap: 12px; max-width: none; } .legend-toggle { display: none; } .legend-title { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-left: 10px; } .legend-list { display: block; padding: 0; max-height: calc(100vh - 120px); border: 0; background: none; box-shadow: none; } .legend-link { border-left: 2px solid transparent; border-radius: 0 8px 8px 0; padding-left: 8px; } .legend-item--current .legend-link { border-left-color: var(--accent); } } /* --------------------------------------------------------------- jump --- */ html { scroll-behavior: smooth; } .section-rule { scroll-margin-top: 28px; } /* -------------------------------------------------------------- small --- */ /* Everything here is scoped to .page on purpose. A media query answers to the viewport, and the image export lays sections out off-page at a fixed desktop width - unscoped, a phone would export phone-shaped columns into a 900px image. Keep new small-screen rules under .page too. */ @media (max-width: 640px) { /* The bottom padding clears the floating section menu. */ body { padding: 28px 16px 88px; } .page .ratings, .page .columns, .page .check-items { grid-template-columns: 1fr; } .page .columns { gap: 24px; } .page .card-title { font-size: 20px; } } /* ------------------------------------------------------- image export --- */ /* The off-screen clone images.js lays each section out in. On screen only in the sense that it never reaches the screen - it is parked off-canvas. */ .export-stage { padding: 32px; box-sizing: border-box; background: var(--page-bg); } .export-stage > :last-child { margin-bottom: 0; } .export-stage .site-header { display: block; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .export-stage .export-title { display: block; } .export-stage .disclaimer-flag { margin-top: 9px; } /* --------------------------------------------------------- pdf export --- */ /* Triggered by the PDF button (see print.js) or a plain Ctrl/Cmd-P. */ @media print { /* The export always prints on the light palette, whatever is on screen, nudged darker so the ink holds up on paper. */ :root, [data-theme="dark"], [data-theme="light"] { --accent: #0a6f64; --warn: #9c4a2c; --danger: #962f24; --page-bg: #ffffff; --surface: #ffffff; --ink: #101a20; --body-text: #2c3a44; --muted: #55656f; --line: #c9d2d7; --track: #e2e8ea; --chip-bg: #f2f5f6; } @page { margin: 14mm 12mm; } body { padding: 0; background: #fff; font-size: 10.5pt; line-height: 1.45; /* Keep the rating bars, badges and markers - they carry meaning. */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page { max-width: none; } /* Controls and navigation don't belong on paper. */ .header-actions, .legend { display: none; } .site-header { display: block; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .export-title { display: block; margin: 0 0 8px; font-size: 20pt; } .disclaimer-flag { margin-top: 7px; } /* Don't split a block across a page, and never strand a heading. */ .panel, .card, .tip, .step, .rating, .note, .check-group, .list-item { break-inside: avoid; } .section-rule, .card-head, .card-intro, .check-group-head, .column-label, .tip-title, .tip-subtitle { break-after: avoid; } .panel, .card, .tips { margin-bottom: 22px; } /* Links can't be followed on paper, so spell the destination out. */ a { color: var(--ink); text-decoration: underline; } .site-footer a::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: var(--muted); word-break: break-all; } }