DataScope26/WEB

1/* =====================2   Tutorial.css — DataScope3   ===================== */4 5.tutorial-page {6  background: var(--bg);7  color: var(--color-text);8  font-family: var(--font-text);9  width: 100%;10  overflow-x: hidden;11}12 13.tutorial-page h1,14.tutorial-page h2,15.tutorial-page h3 {16  font-family: var(--font-title);17  font-style: normal;18}19 20.tutorial-page p,21.tutorial-page li,22.tutorial-page a,23.tutorial-page span {24  font-family: var(--font-text);25  font-style: normal;26}27 28/* ---- Hero ---- */29.tutorial-hero {30  text-align: center;31  padding: 8.25rem 1.5rem 3.75rem;32  max-width: 64rem;33  margin: 0 auto;34}35 36.tutorial-title {37  font-family: var(--font-title);38  font-size: clamp(2.25rem, 4vw, 3rem);39  font-weight: 700;40  color: var(--color-text);41  letter-spacing: -0.0938rem;42  line-height: 1.1;43  margin: 0 0 1.375rem;44}45 46.tutorial-subtitle {47  font-size: 1.0625rem;48  line-height: 1.75;49  color: var(--muted);50  max-width: 40rem;51  margin: 0 auto;52}53 54/* ---- Steps ---- */55.tutorial-steps {56  width: calc(100% - 3rem);57  max-width: 64rem;58  margin: 2.5rem auto 5rem;59  padding: 0;60  display: flex;61  flex-direction: column;62  gap: 2rem;63}64 65.tutorial-step {66  display: grid;67  grid-template-columns: 1fr 1fr;68  align-items: stretch;69  background: var(--surface);70  border: 0.0625rem solid var(--color-border);71  border-radius: 1.25rem;72  overflow: hidden;73}74 75.tutorial-step__text {76  padding: 3.5rem;77  display: flex;78  flex-direction: column;79  justify-content: center;80  gap: 1rem;81}82 83.tutorial-step__number {84  display: inline-block;85  width: fit-content;86  font-size: 0.8125rem;87  font-weight: 700;88  letter-spacing: 0.04em;89  color: var(--color-accent);90  background: var(--green-20);91  padding: 0.25rem 0.75rem;92  border-radius: 0.5rem;93}94 95.tutorial-step__title {96  font-family: var(--font-title);97  font-size: 1.5rem;98  font-weight: 700;99  color: var(--color-text);100  letter-spacing: -0.0313rem;101  margin: 0;102}103 104.tutorial-step__desc {105  font-size: 1rem;106  line-height: 1.75;107  color: var(--muted);108  margin: 0;109}110 111.tutorial-step__btn {112  display: inline-flex;113  gap: 0.5rem;114  width: fit-content;115  background: var(--color-accent);116  color: var(--black);117  font-family: var(--font-text);118  font-weight: 600;119  font-size: 0.875rem;120  padding: 0.75rem 1.375rem;121  border-radius: 0.625rem;122  text-decoration: none;123  transition: opacity 0.2s, transform 0.15s;124}125 126.tutorial-step__btn:hover {127  opacity: 0.85;128  transform: translateY(-0.125rem);129}130 131html[data-theme='light'] .tutorial-step__btn {132  background: var(--green);133  color: #000000;134}135 136html[data-theme='light'] .button {137  border: 1px solid var(--color-border);138}139 140.tutorial-step__meta {141  display: flex;142  align-items: center;143  gap: 0.375rem;144  font-size: 0.7813rem;145  color: var(--muted);146  margin: 0;147}148 149.tutorial-step__meta svg {150  color: var(--color-accent);151  flex-shrink: 0;152}153 154.tutorial-step__features {155  list-style: none;156  margin: 0.25rem 0 0;157  padding: 0;158  display: flex;159  flex-direction: column;160  gap: 0.75rem;161}162 163.tutorial-step__features li {164  display: flex;165  align-items: center;166  gap: 0.625rem;167  font-size: 0.875rem;168  color: var(--muted);169}170 171.tutorial-step__features li svg {172  color: var(--color-accent);173  flex-shrink: 0;174}175 176.tutorial-step__media {177  background: var(--surface-2);178  display: flex;179  align-items: center;180  justify-content: center;181  padding: 2.5rem;182}183 184/* ---- Mockup: Paso 1 (Chrome) ---- */185.tutorial-chrome-card {186  width: 13.75rem;187  height: 13.75rem;188  background: var(--surface-2);189  border: 0.0625rem solid var(--color-border);190  border-radius: 1.125rem;191  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);192  display: flex;193  align-items: center;194  justify-content: center;195}196 197.tutorial-chrome-card__icon {198  color: var(--green);199}200 201/* ---- Mockup: Paso 2 (Login) ---- */202.tutorial-login-mock {203  width: 100%;204  max-width: 17.5rem;205  background: var(--surface-2);206  border: 0.0625rem solid var(--color-border);207  border-radius: 1rem;208  padding: 1.875rem 1.625rem;209  display: flex;210  flex-direction: column;211  align-items: center;212  gap: 0.75rem;213  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);214  cursor: default;215}216 217.tutorial-login-mock__logo {218  width: 2.75rem;219  height: 2.75rem;220  object-fit: contain;221  margin-bottom: 0.125rem;222}223 224.tutorial-login-mock__brand {225  margin: 0;226  font-size: 0.9375rem;227  font-weight: 700;228  letter-spacing: 0.04em;229  color: var(--color-text);230}231 232.tutorial-login-mock__sub {233  margin: -0.5rem 0 0.375rem;234  font-size: 0.5625rem;235  letter-spacing: 0.18em;236  color: var(--muted);237}238 239.tutorial-login-mock__field {240  width: 100%;241}242 243.tutorial-login-mock__label {244  display: block;245  font-size: 0.5625rem;246  letter-spacing: 0.1em;247  color: var(--muted);248  margin-bottom: 0.25rem;249}250 251.tutorial-login-mock__input {252  width: 100%;253  box-sizing: border-box;254  background: var(--surface-2);255  border: 0.0625rem solid var(--color-border);256  border-radius: 0.5rem;257  padding: 0.5625rem 0.75rem;258  font-size: 0.75rem;259  color: var(--muted);260}261 262.tutorial-login-mock__btn {263  width: 100%;264  margin-top: 0.5rem;265  font-size: 0.8125rem;266  padding: 0.625rem 0;267  cursor: default !important;268}269 270.tutorial-login-mock__btn:hover {271  transform: translateY(0) !important;272}273 274.tutorial-login-mock__footer {275  margin: 0.25rem 0 0;276  font-size: 0.6563rem;277  color: var(--muted);278}279 280.tutorial-login-mock__footer span {281  color: var(--color-accent);282  font-weight: 600;283}284 285/* ---- Mockup: Paso 3 (Chart) ---- */286.tutorial-chart-mock {287  position: relative;288  width: 100%;289  max-width: 22.5rem;290  aspect-ratio: 8 / 5;291  background: var(--surface-2);292  border: 0.0625rem solid var(--color-border);293  border-radius: 1rem;294  padding: 1rem;295  box-sizing: border-box;296  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);297}298 299.tutorial-chart-mock svg {300  width: 100%;301  height: 100%;302  display: block;303}304 305.tutorial-chart-mock__badge {306  position: absolute;307  bottom: 0.75rem;308  left: 1rem;309  font-size: 0.625rem;310  letter-spacing: 0.08em;311  font-weight: 600;312  color: var(--color-accent);313}314 315 316/* ---- Light Theme Overrides ---- */317html[data-theme='light'] .tutorial-chart-mock {318  background: linear-gradient(160deg, #f3f4f6, #e5e7eb);319  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.1);320}321 322/* ---- Responsive ---- */323@media (max-width: 56.25rem) {324  .tutorial-step {325    grid-template-columns: 1fr;326  }327 328  .tutorial-step__media {329    order: -1;330    padding: 2rem;331  }332 333  .tutorial-step__text {334    padding: 2.5rem 2rem;335  }336}337 338@media (max-width: 48rem) {339  .tutorial-steps {340    width: calc(100% - 2.5rem);341  }342 343  .tutorial-hero {344    padding: 7.25rem 1.25rem 2.5rem;345  }346 347  .tutorial-cta-box {348    padding: 3.5rem 1.75rem;349  }350}