/* ========================================================================== frontend-doctor — demo site stylesheet -------------------------------------------------------------------------- Conventions: - Design tokens as CSS custom properties; components never hardcode color. - Light theme is the default; dark theme via [data-theme="dark"] override and prefers-color-scheme fallback (manual toggle always wins). - Motion is opt-out: every animation is disabled under prefers-reduced-motion, and scroll reveals only hide content when the runtime adds the `js` class to (progressive enhancement). Table of contents: 1. Design tokens (light / dark) 2. Base & resets 3. Typography 4. Layout primitives (.wrap, sections) 5. Header & navigation 6. Buttons 7. Hero & patient chart (EKG) 8. Symptoms 9. Clinic (interactive before/after) 10. Departments 11. Vitals monitor 12. Prescription (Rx) 13. Install 14. Footer 15. Scroll reveal ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { --paper: #faf6ef; --card: #ffffff; --ink: #152430; --ink-soft: #44586582; --ink-mute: #3d5361; --line: #152430; --line-soft: #15243022; --teal: #0e6f66; --teal-soft: #0e6f6614; --red: #b3401e; --red-soft: #b3401e14; --amber: #8a5a00; --amber-soft: #8a5a0018; --good: #166534; --good-soft: #16653414; --shadow: 6px 6px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink); --grid-line: #15243010; color-scheme: light; } [data-theme="dark"] { --paper: #0d1519; --card: #15222a; --ink: #e9e2d4; --ink-soft: #b7c4cc82; --ink-mute: #aebcc4; --line: #e9e2d4; --line-soft: #e9e2d426; --teal: #4fd8c6; --teal-soft: #4fd8c61a; --red: #ff9c78; --red-soft: #ff9c781a; --amber: #ffcf6e; --amber-soft: #ffcf6e1c; --good: #7fdc9a; --good-soft: #7fdc9a1a; --grid-line: #e9e2d40d; color-scheme: dark; } /* System preference applies only while there is no manual override. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0d1519; --card: #15222a; --ink: #e9e2d4; --ink-soft: #b7c4cc82; --ink-mute: #aebcc4; --line: #e9e2d4; --line-soft: #e9e2d426; --teal: #4fd8c6; --teal-soft: #4fd8c61a; --red: #ff9c78; --red-soft: #ff9c781a; --amber: #ffcf6e; --amber-soft: #ffcf6e1c; --good: #7fdc9a; --good-soft: #7fdc9a1a; --grid-line: #e9e2d40d; color-scheme: dark; } } /* -------------------------------------------------------------------------- 2. Base & resets -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--paper); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.6; /* Chart-paper grid texture */ background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; } ::selection { background: var(--teal); color: var(--paper); } img, svg { max-width: 100%; height: auto; } a { color: var(--teal); } :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 20px; font-weight: 700; } .skip-link:focus { left: 12px; top: 12px; } /* -------------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------------- */ h1, h2, h3 { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 1.2rem + 5.2vw, 4.3rem); font-weight: 700; } h2 { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem); } h3 { font-size: 1.22rem; } .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; } .eyebrow { font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--teal); flex: none; } .lede { font-size: 1.12rem; color: var(--ink-mute); max-width: 58ch; } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .wrap { width: min(1080px, calc(100% - 40px)); margin-inline: auto; } section { padding: clamp(52px, 8vw, 96px) 0; } .section-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); } /* -------------------------------------------------------------------------- 5. Header & navigation -------------------------------------------------------------------------- */ header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 2px solid var(--line); } .nav { display: flex; align-items: center; gap: 18px; min-height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); text-decoration: none; font-size: 1.02rem; } .brand .pulse-mark { width: 34px; height: 34px; flex: none; border: 2px solid var(--line); border-radius: 50%; background: var(--teal-soft); display: grid; place-items: center; } .nav-links { display: flex; gap: 4px; margin-left: auto; list-style: none; flex-wrap: wrap; } .nav-links a { display: block; padding: 10px 12px; color: var(--ink-mute); text-decoration: none; font-size: 0.9rem; font-weight: 600; border-radius: 8px; } .nav-links a:hover { background: var(--teal-soft); color: var(--ink); } .theme-btn { margin-left: 6px; min-width: 44px; min-height: 44px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 1.05rem; cursor: pointer; } .theme-btn:hover { background: var(--teal-soft); } @media (max-width: 720px) { .nav-links { display: none; } } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 11px 22px; border: 2px solid var(--line); border-radius: 12px; font-weight: 700; font-size: 0.98rem; text-decoration: none; cursor: pointer; color: var(--ink); background: var(--card); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn-primary { background: var(--teal); border-color: var(--teal); color: var(--paper); } /* On dark themes --paper is dark; primary buttons keep a dark label on the teal fill for contrast. */ [data-theme="dark"] .btn-primary { color: #0d1519; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #0d1519; } } .btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); } .btn:active { transform: translate(0, 0); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } } /* -------------------------------------------------------------------------- 7. Hero & patient chart (EKG) -------------------------------------------------------------------------- */ .hero { padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 80px); } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 em { font-style: italic; color: var(--teal); } .hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .hero-tags { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; list-style: none; } .hero-tags li { font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem; font-weight: 700; padding: 6px 12px; border: 1.5px solid var(--line-soft); border-radius: 999px; color: var(--ink-mute); } .chart-card { background: var(--card); border: 2px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; } .chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 2px solid var(--line); font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; } .chart-head .status { color: var(--good); } .ekg-box { padding: 10px 6px 0; background: var(--teal-soft); } .ekg-box svg { display: block; } .ekg-base { stroke: var(--line-soft); stroke-width: 2; fill: none; } .ekg-live { stroke: var(--teal); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 820; stroke-dashoffset: 820; animation: ekg 3.4s linear infinite; } @keyframes ekg { 0% { stroke-dashoffset: 820; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 88% { opacity: 0.25; } 100% { stroke-dashoffset: 0; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ekg-live { animation: none; stroke-dashoffset: 0; } } .chart-vitals { display: grid; grid-template-columns: repeat(3, 1fr); } .chart-vitals > div { padding: 16px 12px; text-align: center; border-top: 2px solid var(--line); } .chart-vitals > div + div { border-left: 2px solid var(--line); } .chart-vitals .v-num { font-family: ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 800; color: var(--teal); display: block; } .chart-vitals .v-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } /* -------------------------------------------------------------------------- 8. Symptoms -------------------------------------------------------------------------- */ .symptoms { border-block: 2px solid var(--line); background: var(--card); } .symptom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .symptom { border: 2px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper); position: relative; } .symptom blockquote { font-family: Georgia, serif; font-style: italic; font-size: 1.06rem; line-height: 1.45; } .symptom p { margin-top: 12px; font-size: 0.9rem; color: var(--ink-mute); } .symptom .sym-tag { position: absolute; top: -13px; left: 16px; background: var(--red); color: var(--paper); font-family: ui-monospace, Consolas, monospace; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--line); } /* On dark themes the tag keeps a dark label on the red fill. */ [data-theme="dark"] .symptom .sym-tag { color: #0d1519; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .symptom .sym-tag { color: #0d1519; } } /* -------------------------------------------------------------------------- 9. Clinic (interactive before/after) -------------------------------------------------------------------------- */ .clinic-grid { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; } @media (max-width: 880px) { .clinic-grid { grid-template-columns: 1fr; } } .patient { background: var(--card); border: 2px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 22px; } .patient-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; } .patient-head .p-state { padding: 4px 10px; border-radius: 999px; border: 2px solid var(--line); } .patient[data-state="sick"] .p-state { background: var(--red-soft); color: var(--red); } .patient[data-state="healthy"] .p-state { background: var(--good-soft); color: var(--good); } /* Demo checkout UI (decorative: not part of the page's real content) */ .fakeui { border: 2px solid var(--line-soft); border-radius: 12px; padding: 18px; background: var(--paper); } .fakeui .f-title { font-weight: 800; font-size: 1.02rem; } .fakeui .f-price { font-variant-numeric: tabular-nums; font-weight: 800; } .fakeui .f-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .fakeui .f-field { margin-top: 14px; } .fakeui label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 5px; } .fakeui input { width: 100%; padding: 10px 12px; border: 2px solid var(--line-soft); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 0.92rem; } .fakeui .f-err { display: none; font-size: 0.8rem; color: var(--red); font-weight: 700; margin-top: 5px; } .fakeui .f-pay { margin-top: 16px; width: 100%; justify-content: center; } /* Sick state: the five deliberate defects */ .patient[data-state="sick"] .fakeui label { display: none; } .patient[data-state="sick"] .fakeui .f-price { opacity: 0.32; } .patient[data-state="sick"] .fakeui .f-pay { border-color: transparent; background: var(--teal-soft); color: var(--ink-soft); box-shadow: none; transform: none; } /* Healthy state: defects treated */ .patient[data-state="healthy"] .fakeui .f-err { display: block; } .patient[data-state="healthy"] .fakeui input[aria-invalid="true"] { border-color: var(--red); } .treat-btn { margin-top: 18px; width: 100%; justify-content: center; } .findings { list-style: none; display: grid; gap: 12px; } .finding { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; border: 2px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; background: var(--card); } .finding .sev { font-family: ui-monospace, Consolas, monospace; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; margin-top: 2px; white-space: nowrap; } .sev-blocker { background: var(--red-soft); color: var(--red); border: 1.5px solid var(--red); } .sev-high { background: var(--amber-soft); color: var(--amber); border: 1.5px solid var(--amber); } .sev-polish { background: var(--teal-soft); color: var(--teal); border: 1.5px solid var(--teal); } .finding b { display: block; font-size: 0.95rem; } .finding span.fix { display: block; font-size: 0.86rem; color: var(--ink-mute); margin-top: 2px; } .finding .done { display: none; color: var(--good); font-weight: 800; font-size: 0.8rem; margin-top: 4px; } .findings.treated .finding { border-color: var(--good); opacity: 0.92; } .findings.treated .finding .done { display: block; } /* -------------------------------------------------------------------------- 10. Departments -------------------------------------------------------------------------- */ .departments { background: var(--card); border-block: 2px solid var(--line); } .dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } .dept { border: 2px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper); transition: transform 0.15s ease, box-shadow 0.15s ease; } .dept:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); } @media (prefers-reduced-motion: reduce) { .dept { transition: none; } .dept:hover { transform: none; } } .dept .d-icon { font-size: 1.5rem; } .dept h3 { margin: 10px 0 6px; } .dept p { font-size: 0.9rem; color: var(--ink-mute); } .dept .d-ref { display: inline-block; margin-top: 12px; font-family: ui-monospace, Consolas, monospace; font-size: 0.68rem; font-weight: 700; color: var(--teal); background: var(--teal-soft); padding: 4px 9px; border-radius: 6px; overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- 11. Vitals monitor -------------------------------------------------------------------------- */ .vitals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .vital { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm); } .vital .v-name { font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: var(--ink-mute); } .vital .v-reading { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; font-variant-numeric: tabular-nums; } .vital .v-big { font-family: Georgia, serif; font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--teal); } .vital .v-unit { font-size: 1rem; color: var(--ink-mute); font-weight: 700; } .vital .v-bar { height: 10px; border: 2px solid var(--line); border-radius: 999px; margin-top: 16px; overflow: hidden; background: var(--paper); } .vital .v-bar i { display: block; height: 100%; background: var(--teal); width: 0%; transition: width 1.1s ease 0.15s; } .vitals-live .v-bar i { width: var(--fill); } @media (prefers-reduced-motion: reduce) { .vital .v-bar i { transition: none; width: var(--fill); } } .vital .v-note { margin-top: 10px; font-size: 0.84rem; color: var(--ink-mute); } .vital .v-note b { color: var(--good); } /* -------------------------------------------------------------------------- 12. Prescription (Rx) -------------------------------------------------------------------------- */ .rx-card { max-width: 660px; margin-inline: auto; background: var(--card); border: 2px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: clamp(24px, 4vw, 44px); position: relative; } .rx-card::before { content: "℞"; font-family: Georgia, serif; font-size: 3.4rem; line-height: 1; color: var(--teal); position: absolute; top: 22px; right: 28px; opacity: 0.85; } .rx-card h2 { max-width: 14ch; } .rx-list { list-style: none; margin-top: 22px; display: grid; gap: 12px; } .rx-list li { display: flex; gap: 12px; align-items: baseline; border-bottom: 1.5px dashed var(--line-soft); padding-bottom: 12px; } .rx-list li::before { content: "✓"; font-weight: 900; color: var(--good); flex: none; } .rx-sign { margin-top: 26px; text-align: right; font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 1.3rem; color: var(--teal); transform: rotate(-2deg); } /* -------------------------------------------------------------------------- 13. Install -------------------------------------------------------------------------- */ .install { background: var(--card); border-top: 2px solid var(--line); } .install-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ink); border-radius: 14px; padding: 18px 20px; margin-top: 26px; border: 2px solid var(--line); overflow-x: auto; } /* The box is dark in both themes, so the command color is a constant. */ .install-box code { font-family: ui-monospace, Consolas, monospace; font-size: 0.95rem; color: #f2ecdf; white-space: nowrap; } [data-theme="dark"] .install-box { background: #050a0d; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .install-box { background: #050a0d; } } .install-box .copy-btn { margin-left: auto; flex: none; } .copy-status { font-size: 0.85rem; font-weight: 700; color: var(--good); min-height: 1.4em; display: block; margin-top: 10px; } .companion { margin-top: 18px; font-size: 0.92rem; color: var(--ink-mute); max-width: 62ch; } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ footer { border-top: 2px solid var(--line); padding: 34px 0 46px; } .foot { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; } .foot p { font-size: 0.88rem; color: var(--ink-mute); } .foot nav { display: flex; gap: 18px; flex-wrap: wrap; } .foot a { font-size: 0.88rem; font-weight: 600; } /* -------------------------------------------------------------------------- 15. Scroll reveal -------------------------------------------------------------------------- Content is only hidden when the runtime confirms it can reveal it (html.js is added by main.js when IntersectionObserver is available and the user has not requested reduced motion). Without JS, everything is visible from the start. -------------------------------------------------------------------------- */ html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } html.js .reveal.in { opacity: 1; transform: none; }