Spaces:
Running
Running
| :root { | |
| --ink: #14213d; | |
| --muted: #596579; | |
| --paper: #f7f8fa; | |
| --white: #ffffff; | |
| --blue: #3c5488; | |
| --teal: #00a087; | |
| --red: #e64b35; | |
| --sky: #4dbbd5; | |
| --orange: #f39b7f; | |
| --gold: #efc000; | |
| --line: #dce2ea; | |
| --shadow: 0 18px 55px rgba(20, 33, 61, 0.13); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| overflow: hidden; | |
| background: #dfe5ec; | |
| color: var(--ink); | |
| font-family: Inter, "Helvetica Neue", Arial, sans-serif; | |
| } | |
| button { | |
| font: inherit; | |
| } | |
| .deck { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| } | |
| .slide { | |
| position: absolute; | |
| inset: 0; | |
| display: grid; | |
| grid-template-rows: auto 1fr auto; | |
| gap: 1.6rem; | |
| padding: clamp(2rem, 4.2vw, 5rem) clamp(2.2rem, 6vw, 7rem) 2.2rem; | |
| background: | |
| radial-gradient(circle at 94% 4%, rgba(77, 187, 213, 0.10), transparent 25%), | |
| var(--paper); | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateX(3%); | |
| transition: opacity 260ms ease, transform 260ms ease; | |
| } | |
| .slide.active { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateX(0); | |
| z-index: 2; | |
| } | |
| .slide::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 7px; | |
| background: linear-gradient(90deg, var(--blue), var(--teal), var(--red)); | |
| } | |
| .title-slide { | |
| background: | |
| linear-gradient(118deg, rgba(20, 33, 61, 0.98), rgba(60, 84, 136, 0.94)), | |
| var(--ink); | |
| color: var(--white); | |
| } | |
| .title-slide::after { | |
| content: ""; | |
| position: absolute; | |
| width: min(56vw, 850px); | |
| height: min(56vw, 850px); | |
| right: -18vw; | |
| bottom: -35vw; | |
| border: 2px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.025), | |
| 0 0 0 140px rgba(255, 255, 255, 0.02); | |
| } | |
| .kicker { | |
| margin: 0 0 0.6rem; | |
| color: var(--teal); | |
| font-size: clamp(0.8rem, 1.1vw, 1.1rem); | |
| font-weight: 800; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| } | |
| .title-slide .kicker { | |
| color: #77dfd0; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| p { | |
| margin-top: 0; | |
| } | |
| h1 { | |
| max-width: 1100px; | |
| margin-bottom: 1.2rem; | |
| font-size: clamp(2.9rem, 6vw, 6.8rem); | |
| line-height: 0.98; | |
| letter-spacing: -0.055em; | |
| } | |
| h2 { | |
| margin-bottom: 0; | |
| font-size: clamp(2rem, 3.4vw, 4rem); | |
| line-height: 1.04; | |
| letter-spacing: -0.035em; | |
| } | |
| h3 { | |
| margin-bottom: 0.5rem; | |
| font-size: clamp(1.05rem, 1.45vw, 1.55rem); | |
| } | |
| .subtitle { | |
| max-width: 850px; | |
| color: rgba(255, 255, 255, 0.78); | |
| font-size: clamp(1.15rem, 1.8vw, 1.85rem); | |
| line-height: 1.45; | |
| } | |
| .title-meta { | |
| align-self: end; | |
| display: flex; | |
| gap: 2rem; | |
| color: rgba(255, 255, 255, 0.68); | |
| font-size: 1rem; | |
| } | |
| .content { | |
| min-height: 0; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .grid-2 { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: clamp(1.5rem, 3vw, 3.5rem); | |
| align-items: center; | |
| } | |
| .grid-3 { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: clamp(1rem, 2vw, 2rem); | |
| } | |
| .card { | |
| height: 100%; | |
| padding: clamp(1.1rem, 2vw, 2rem); | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: rgba(255, 255, 255, 0.88); | |
| box-shadow: 0 8px 28px rgba(20, 33, 61, 0.06); | |
| } | |
| .card.accent-blue { | |
| border-top: 6px solid var(--blue); | |
| } | |
| .card.accent-teal { | |
| border-top: 6px solid var(--teal); | |
| } | |
| .card.accent-red { | |
| border-top: 6px solid var(--red); | |
| } | |
| .big-number { | |
| display: block; | |
| margin-bottom: 0.35rem; | |
| color: var(--blue); | |
| font-size: clamp(2.2rem, 4vw, 4.7rem); | |
| font-weight: 800; | |
| line-height: 1; | |
| letter-spacing: -0.05em; | |
| } | |
| .metric-label { | |
| color: var(--muted); | |
| font-size: clamp(0.86rem, 1.15vw, 1.12rem); | |
| line-height: 1.35; | |
| } | |
| .question { | |
| max-width: 850px; | |
| padding-left: 1.3rem; | |
| border-left: 6px solid var(--red); | |
| font-size: clamp(1.4rem, 2.5vw, 2.8rem); | |
| font-weight: 700; | |
| line-height: 1.25; | |
| } | |
| .plain-list { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .plain-list li { | |
| position: relative; | |
| margin: 0.8rem 0; | |
| padding-left: 1.4rem; | |
| color: var(--muted); | |
| font-size: clamp(0.95rem, 1.3vw, 1.3rem); | |
| line-height: 1.4; | |
| } | |
| .plain-list li::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0.55em; | |
| left: 0; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--teal); | |
| } | |
| .cycle-flow { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0.8rem; | |
| width: 100%; | |
| } | |
| .cycle { | |
| position: relative; | |
| padding: 1.5rem 1rem; | |
| border-radius: 16px; | |
| background: var(--white); | |
| border: 1px solid var(--line); | |
| text-align: center; | |
| box-shadow: 0 8px 26px rgba(20, 33, 61, 0.06); | |
| } | |
| .cycle:not(:last-child)::after { | |
| content: "→"; | |
| position: absolute; | |
| top: 50%; | |
| right: -1rem; | |
| z-index: 1; | |
| transform: translateY(-50%); | |
| color: var(--red); | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| } | |
| .cycle strong { | |
| display: block; | |
| color: var(--blue); | |
| font-size: clamp(1.5rem, 2.4vw, 2.7rem); | |
| } | |
| .cycle span { | |
| color: var(--muted); | |
| } | |
| .workflow { | |
| width: 100%; | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| gap: 0.65rem; | |
| align-items: center; | |
| } | |
| .workflow-step { | |
| position: relative; | |
| padding: 1.25rem 0.8rem; | |
| border-radius: 14px; | |
| background: var(--white); | |
| border: 1px solid var(--line); | |
| text-align: center; | |
| font-weight: 700; | |
| } | |
| .workflow-step:not(:last-child)::after { | |
| content: "›"; | |
| position: absolute; | |
| right: -0.58rem; | |
| top: 50%; | |
| z-index: 1; | |
| transform: translateY(-52%); | |
| color: var(--red); | |
| font-size: 1.8rem; | |
| } | |
| .formula { | |
| padding: 1.4rem 1.8rem; | |
| border-radius: 14px; | |
| background: var(--ink); | |
| color: var(--white); | |
| font-family: Georgia, serif; | |
| font-size: clamp(1.1rem, 1.65vw, 1.7rem); | |
| line-height: 1.5; | |
| text-align: center; | |
| } | |
| .image-wrap { | |
| position: relative; | |
| min-height: 0; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .result-image { | |
| display: block; | |
| max-width: 100%; | |
| max-height: min(64vh, 700px); | |
| object-fit: contain; | |
| border-radius: 10px; | |
| background: var(--white); | |
| box-shadow: var(--shadow); | |
| cursor: zoom-in; | |
| } | |
| .result-image.tall { | |
| max-height: min(67vh, 760px); | |
| } | |
| .caption { | |
| margin-top: 0.7rem; | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| line-height: 1.35; | |
| } | |
| .metrics { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0.8rem; | |
| } | |
| .metric { | |
| padding: 1rem; | |
| border-radius: 14px; | |
| background: var(--white); | |
| border: 1px solid var(--line); | |
| text-align: center; | |
| } | |
| .metric b { | |
| display: block; | |
| color: var(--blue); | |
| font-size: clamp(1.6rem, 2.7vw, 3rem); | |
| } | |
| .metric span { | |
| color: var(--muted); | |
| } | |
| .comparison { | |
| width: 100%; | |
| border-collapse: collapse; | |
| overflow: hidden; | |
| border-radius: 14px; | |
| background: var(--white); | |
| box-shadow: 0 8px 28px rgba(20, 33, 61, 0.06); | |
| } | |
| .comparison th, | |
| .comparison td { | |
| padding: 0.75rem 1rem; | |
| border-bottom: 1px solid var(--line); | |
| text-align: center; | |
| font-size: clamp(0.9rem, 1.2vw, 1.2rem); | |
| } | |
| .comparison th { | |
| background: var(--ink); | |
| color: var(--white); | |
| } | |
| .comparison tr:last-child td { | |
| border-bottom: 0; | |
| } | |
| .comparison .best { | |
| color: var(--teal); | |
| font-weight: 800; | |
| } | |
| .callout { | |
| padding: 1rem 1.2rem; | |
| border-left: 5px solid var(--gold); | |
| background: rgba(239, 192, 0, 0.10); | |
| color: var(--ink); | |
| font-size: clamp(0.95rem, 1.25vw, 1.25rem); | |
| line-height: 1.4; | |
| } | |
| .status { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.45rem 0.8rem; | |
| border-radius: 999px; | |
| background: rgba(0, 160, 135, 0.12); | |
| color: #007d6b; | |
| font-weight: 800; | |
| } | |
| .status::before { | |
| content: ""; | |
| width: 0.55rem; | |
| height: 0.55rem; | |
| border-radius: 50%; | |
| background: var(--teal); | |
| } | |
| .takeaway { | |
| font-size: clamp(1.1rem, 1.7vw, 1.7rem); | |
| line-height: 1.45; | |
| } | |
| .takeaway strong { | |
| color: var(--red); | |
| } | |
| .footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| color: #7b8594; | |
| font-size: 0.78rem; | |
| letter-spacing: 0.02em; | |
| } | |
| .title-slide .footer { | |
| color: rgba(255, 255, 255, 0.48); | |
| } | |
| .controls { | |
| position: fixed; | |
| right: 1.2rem; | |
| bottom: 1.05rem; | |
| z-index: 20; | |
| display: flex; | |
| gap: 0.4rem; | |
| } | |
| .control { | |
| width: 2.4rem; | |
| height: 2.4rem; | |
| border: 1px solid rgba(20, 33, 61, 0.14); | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.88); | |
| color: var(--ink); | |
| cursor: pointer; | |
| box-shadow: 0 4px 14px rgba(20, 33, 61, 0.12); | |
| } | |
| .control:hover { | |
| background: var(--ink); | |
| color: var(--white); | |
| } | |
| .progress { | |
| position: fixed; | |
| left: 0; | |
| bottom: 0; | |
| z-index: 25; | |
| height: 5px; | |
| width: 0; | |
| background: var(--red); | |
| transition: width 220ms ease; | |
| } | |
| .counter { | |
| position: fixed; | |
| left: 1.2rem; | |
| bottom: 1.25rem; | |
| z-index: 20; | |
| color: #667184; | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| } | |
| .overview .slide { | |
| position: relative; | |
| inset: auto; | |
| width: min(44vw, 700px); | |
| height: min(40vh, 430px); | |
| display: grid; | |
| flex: none; | |
| padding: 1.5rem; | |
| opacity: 1; | |
| visibility: visible; | |
| transform: none; | |
| overflow: hidden; | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| } | |
| .overview .deck { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1.5rem; | |
| align-content: flex-start; | |
| justify-content: center; | |
| height: auto; | |
| min-height: 100%; | |
| padding: 2rem; | |
| } | |
| body.overview { | |
| overflow: auto; | |
| } | |
| .overview .slide > * { | |
| transform: scale(0.62); | |
| transform-origin: top left; | |
| width: 160%; | |
| } | |
| .overview .controls, | |
| .overview .counter { | |
| position: fixed; | |
| } | |
| .notes-panel { | |
| position: fixed; | |
| left: 50%; | |
| bottom: 1rem; | |
| z-index: 30; | |
| width: min(800px, calc(100vw - 8rem)); | |
| max-height: 30vh; | |
| padding: 1rem 1.2rem; | |
| overflow: auto; | |
| transform: translateX(-50%); | |
| border-radius: 14px; | |
| background: rgba(20, 33, 61, 0.96); | |
| color: var(--white); | |
| box-shadow: var(--shadow); | |
| display: none; | |
| line-height: 1.45; | |
| } | |
| .notes-panel.visible { | |
| display: block; | |
| } | |
| .lightbox { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 50; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2rem; | |
| background: rgba(8, 16, 31, 0.93); | |
| } | |
| .lightbox.visible { | |
| display: flex; | |
| } | |
| .lightbox img { | |
| max-width: 96vw; | |
| max-height: 94vh; | |
| object-fit: contain; | |
| } | |
| .lightbox-close { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1.2rem; | |
| border: 0; | |
| background: transparent; | |
| color: var(--white); | |
| font-size: 2.4rem; | |
| cursor: pointer; | |
| } | |
| @media (max-width: 900px) { | |
| .slide { | |
| padding: 2rem 1.4rem 3rem; | |
| gap: 1rem; | |
| } | |
| .grid-2, | |
| .grid-3 { | |
| grid-template-columns: 1fr; | |
| } | |
| .grid-3 { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| .workflow { | |
| grid-template-columns: 1fr; | |
| } | |
| .workflow-step:not(:last-child)::after { | |
| display: none; | |
| } | |
| .content { | |
| overflow: auto; | |
| align-items: flex-start; | |
| } | |
| .cycle-flow { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .cycle::after { | |
| display: none; | |
| } | |
| .metrics { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .slide, | |
| .progress { | |
| transition: none; | |
| } | |
| } | |