:root { --learn-ink: #10284c; --learn-teal: #148890; --learn-paper: #fbfaf7; --learn-line: #d7dedf; --learn-muted: #526475; color: var(--learn-ink); background: var(--learn-paper); font-family: Georgia, "Times New Roman", serif; }
* { box-sizing: border-box; } body { margin: 0; line-height: 1.55; } a { color: inherit; } .skip-link { position: fixed; z-index: 10; top: .75rem; left: .75rem; transform: translateY(-160%); padding: .7rem 1rem; color: white; background: var(--learn-ink); } .skip-link:focus { transform: translateY(0); }
.learn-header, .learn-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; width: min(1160px, calc(100% - 2.5rem)); margin: auto; font-family: Inter, ui-sans-serif, system-ui, sans-serif; } .learn-header { min-height: 5.4rem; border-bottom: 1px solid var(--learn-line); } .learn-brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; letter-spacing: -.03em; } .learn-brand img { width: 2.5rem; height: 2.5rem; } .learn-header nav { display: flex; gap: 1.25rem; color: var(--learn-muted); font-size: .78rem; font-weight: 750; } .learn-header nav a { text-decoration: none; } .learn-header nav a:hover, .text-link:hover { color: var(--learn-teal); }
.learn-main, .guide-main { width: min(1160px, calc(100% - 2.5rem)); margin: auto; } .learn-intro, .guide-hero { padding: clamp(4rem, 9vw, 9rem) 0 clamp(3rem, 6vw, 6rem); } .learn-intro { max-width: 52rem; } .eyebrow { margin: 0 0 .8rem; color: var(--learn-teal); font: 800 .68rem/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; } h1, h2, p { margin-top: 0; } h1 { max-width: 12ch; margin-bottom: 1.2rem; font-size: clamp(3.5rem, 8vw, 7rem); letter-spacing: -.075em; line-height: .88; } .learn-intro > p:not(.eyebrow), .guide-lede { max-width: 43rem; color: var(--learn-muted); font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.65; } .button { display: inline-flex; align-items: center; gap: .55rem; border-radius: .45rem; padding: .8rem 1rem; font: 800 .78rem/1 Inter, ui-sans-serif, system-ui, sans-serif; text-decoration: none; } .button-primary { color: white; background: var(--learn-ink); } .text-link { font: 750 .78rem/1.4 Inter, ui-sans-serif, system-ui, sans-serif; text-underline-offset: .25rem; }
.guide-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--learn-line); margin-bottom: 6rem; background: var(--learn-line); } .guide-card { min-height: 17rem; padding: 1.5rem; background: var(--learn-paper); } .guide-card:hover { background: #fff; } .guide-card img, .guide-hero img { width: 4rem; height: 4rem; margin-bottom: 1.25rem; } .guide-card h2 { margin-bottom: .7rem; font-size: 1.55rem; letter-spacing: -.04em; } .guide-card h2 a { text-decoration: none; } .guide-card p:not(.eyebrow) { color: var(--learn-muted); font-size: .91rem; }
.guide-hero { display: grid; grid-template-columns: minmax(0, 46rem) 1fr; min-height: 28rem; align-items: center; } .guide-hero h1 { margin-bottom: 1rem; } .guide-grid, .guide-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-top: 1px solid var(--learn-line); border-bottom: 1px solid var(--learn-line); background: var(--learn-line); } .guide-grid article, .guide-detail > div { min-height: 17rem; padding: clamp(1.75rem, 5vw, 4rem); background: var(--learn-paper); } .guide-grid h2, .guide-detail h2 { max-width: 18ch; font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1; letter-spacing: -.06em; } .guide-grid p:not(.eyebrow), .guide-detail li { color: var(--learn-muted); font-size: 1rem; } .guide-detail { margin-top: 4rem; } .guide-detail ul { margin: 1.5rem 0 0; padding-left: 1.2rem; } .guide-detail li + li { margin-top: .8rem; } .guide-note { max-width: 54rem; margin: 5rem 0; border-left: .3rem solid var(--learn-teal); padding: 1.2rem 1.5rem; color: var(--learn-muted); font: .95rem/1.6 Inter, ui-sans-serif, system-ui, sans-serif; } .guide-note strong { color: var(--learn-ink); }
.learn-footer { min-height: 6rem; border-top: 1px solid var(--learn-line); color: var(--learn-muted); font-size: .76rem; } .learn-footer a { color: var(--learn-ink); font-weight: 750; }
@media (max-width: 720px) { .guide-list, .guide-grid, .guide-detail { grid-template-columns: 1fr; } .learn-header { align-items: flex-start; flex-direction: column; justify-content: center; padding: 1rem 0; } .learn-header nav { width: 100%; justify-content: space-between; } .guide-grid article, .guide-detail > div { min-height: auto; } .learn-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding: 1.5rem 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }