/* Generado por scripts/build-css.cjs. Editar los CSS fuente. */
:root{--hero-link-brush:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%20112%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cmask%20id%3D%22dry-brush%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M25%2022%2061%2016%2047%2013%20137%2011%20127%208%20263%208%20280%205%20365%206%20352%2010%20440%208%20433%2014%20458%2014%20451%2021%20467%2024%20459%2030%20468%2035%20461%2043%20470%2046%20460%2050%20466%2058%20460%2064%20468%2068%20456%2072%20464%2079%20448%2080%20455%2087%20421%2090%20435%2093%20340%2097%20359%20100%20226%20101%20217%20105%20116%20103%20125%20100%2043%20104%2049%2099%2015%2099%2022%2091%2012%2088%2019%2081%2013%2074%2019%2068%209%2062%2020%2057%2015%2051%2024%2047%2018%2042%2025%2036%2019%2032%2032%2028Z%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20stroke-width%3D%223%22%20d%3D%22m22%2025%2040-4m-47%2019%2020-2m-23%2025%2019-3m-13%2033%2047-4m-29%2012%2055-5m324-75%2045-2m-22%2011%2037-2m-27%2042%2029-3m-51%2017%2038-3M119%2013l34-1m174-2%2036%201m-164%2090%2038-1%22%2F%3E%3Cpath%20stroke-width%3D%221.5%22%20d%3D%22m26%2033%2022-3m-30%2044%2023-2m-17%2015%2014-1m401-60%2017%201m-7%2016%2016-1m-18%2032%2013-2M71%2017l23-1m211-4%2019%201M80%2098l34-2m245-3%2038-2%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%2349b7aa%22%3E%3Cpath%20mask%3D%22url(%23dry-brush)%22%20d%3D%22M0%200h480v112H0z%22%2F%3E%3Cpath%20opacity%3D%22.65%22%20d%3D%22m40%2011%2091-5-40%205-42%203Zm120-5%20112-3-28%203Zm207-1%2073-3-12%203ZM18%20103l88-1-38%204-54%201Zm289-1%20121-8-17%205-67%205Z%22%2F%3E%3Cpath%20opacity%3D%22.4%22%20d%3D%22m6%2052%2013-2-3%203-12%202Zm451-36%2017-1-2%203-13%201ZM8%2092l14-2-1%203-16%202Zm421%209%2034-5-8%204-27%204Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--cream); color: var(--ink); font: 500 16px/1.6 var(--sans); } a { color: inherit; text-decoration: none; } .site-header { height: 78px; max-width: 1200px; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; } .brand { font: 700 27px/1 var(--sans); letter-spacing: -1.8px; } nav { display: flex; gap: 26px; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; } nav a { padding: 7px 0; border-bottom: 2px solid transparent; } nav a:hover, nav .active { border-color: var(--orange); } .menu-toggle { display: none; } .hero { min-height: 570px; background: #e5efe0; display: grid; grid-template-columns: minmax(0, 1.1fr) 0.9fr; gap: 55px; align-items: center; padding: 70px max(28px, calc((100vw - 1144px) / 2)); } .eyebrow { margin: 0 0 13px; color: #b95c3c; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .hero h1, h2, h3 { line-height: 1.08; letter-spacing: -0.035em; } .hero h1 { font: clamp(42px, 5.3vw, 70px)/1.02 var(--serif); margin: 23px 0px 23px; } .lead { font-size: 20px; line-height: 1.55; } .section { max-width: 1144px; margin: auto; padding: 95px 0; } .intro { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 65px; } .section h2 { font: clamp(34px, 4.2vw, 55px)/1.05 var(--serif); margin: 0 0 18px; } .soft { max-width: none; background: #f0e9dc; padding-left: max(28px, calc((100vw - 1144px) / 2)); padding-right: max(28px, calc((100vw - 1144px) / 2)); } .text-link { display: inline-block; margin-top: 29px; font-weight: bold; } .knowledge-band h2 { font-family: var(--serif); font-size: 49px; line-height: 1.05; margin: 0 0 18px; } footer { background: #dfeae0; padding: 45px max(28px, calc((100vw - 1144px) / 2)); display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 20px; font-size: 14px; } footer p { margin: 0; } .page-hero { padding: 75px max(28px, calc((100vw - 1144px) / 2)); background: #e5efe0; } .page-hero h1 { font: clamp(44px, 6vw, 72px)/1 var(--serif); max-width: 850px; margin: 0 0 19px; } .page-hero .lead { max-width: 800px; } .categories { max-width: 1144px; margin: 0 auto; padding: 65px 0; } .faq { background: #e5efe0; padding: 80px max(28px, calc((100vw - 1144px) / 2)); } .faq-inner { max-width: 850px; } .faq details { border-bottom: 1px solid #b7ccc0; padding: 19px 0; } .faq summary { cursor: pointer; font-weight: bold; font-size: 18px; } .faq details p { color: var(--muted); } @media (max-width: 760px) { .site-header { height: 65px; padding: 0 20px; } .menu-toggle { display: block; background: none; border: 0; color: var(--ink); font-weight: bold; } nav { display: none; position: absolute; z-index: 2; top: 65px; left: 0; right: 0; padding: 20px; background: #fff; flex-direction: column; gap: 14px; } nav.open { display: flex; } .hero { grid-template-columns: 1fr; padding: 58px 28px; gap: 35px; } .section, .categories { padding: 60px 28px; } .intro { grid-template-columns: 1fr; gap: 30px; } .knowledge-band h2 { font-size: 40px; } footer { grid-template-columns: 1fr; padding: 35px 28px; } } .home-header { position: absolute; z-index: 5; left: 0; right: 0; color: #fff; } .home-header nav a:hover, .home-header nav .active { border-color: #c5df77; } .home-header .menu-toggle { color: #fff; } .hero { min-height: 680px; display: block; padding: 0; color: #fff; } .hero-copy { max-width: 670px; padding: 195px max(28px, calc((100vw - 1144px) / 2)) 100px; } .hero .eyebrow { color: #d9ee95; } .hero h1 { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.07em; max-width: 650px; } .hero-copy > p:not(.eyebrow) { max-width: 575px; font-size: 18px; } .hero-link { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 20px; width: 390px; max-width: 100%; min-height: 94px; margin-top: 25px; padding: 24px 36px; border: 0; color: #ffffff; font: 900 clamp(17px, 1.5vw, 20px)/1.15 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -0.045em; text-transform: uppercase; transition: transform 180ms ease; } .hero-link::before { content: ''; position: absolute; z-index: -1; inset: 0; background-color: #29a862; -webkit-mask: var(--hero-link-brush) center / 100% 100% no-repeat; mask: var(--hero-link-brush) center / 100% 100% no-repeat; transition: filter 180ms ease; } .hero-link span { flex: 0 0 auto; font: 400 36px/1 Arial, sans-serif; transition: transform 180ms ease; } .hero-link:hover { transform: translateY(-2px); } .hero-link:hover::before { filter: brightness(1.12); } .hero-link:hover span { transform: translateX(4px); } .hero-link:focus-visible { outline: 3px solid #fff; outline-offset: 5px; } @media (max-width: 380px) { .hero-link { gap: 12px; padding-inline: 28px; } } @media (prefers-reduced-motion: reduce) { .hero-link, .hero-link::before, .hero-link span { transition: none; } } .intro { position: relative; grid-template-columns: 385px minmax(0, 1fr); align-items: center; max-width: 1050px; padding: 105px 0; gap: 70px; } .intro:after { content: ''; position: absolute; width: 370px; height: 370px; border-radius: 50%; background: #ebe2ff; right: -205px; bottom: 25px; z-index: -1; } .intro-photo { position: relative; height: 405px; border-radius: 190px 190px 58px 58px; overflow: hidden; } .intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .intro-photo:after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(13, 36, 36, 0.73)); } .intro-copy h2 { font-family: var(--sans); font-weight: 750; color: #5f9d82; } .intro-copy > p:not(.eyebrow) { max-width: 620px; color: #477d72; } .soft { max-width: none; background: #062a3d; color: #fff; display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 65px; align-items: center; overflow: hidden; } .soft .eyebrow { color: #7ce4df; } .soft h2 { font-family: var(--sans); font-weight: 750; } .knowledge-copy { max-width: 620px; } .knowledge-band h2 { font: clamp(42px, 5vw, 67px)/1 var(--serif); } @media (max-width: 760px) { .home-header { position: absolute; } .home-header nav { color: var(--ink); } .hero { min-height: 620px; background-position: 62% center; } .hero-copy { padding: 140px 28px 55px; } .hero h1 { font-size: 43px; } .intro { grid-template-columns: 1fr; padding: 65px 28px; gap: 35px; } .intro:after { right: -220px; } .intro-photo { height: 330px; max-width: 330px; } .soft { grid-template-columns: 1fr; padding: 65px 28px; } .knowledge-band h2 { font-size: 42px; } } :root { --nav-height: 78px; --primary: #2f80c1; --vital: #a9dff5; --brain: #153f5b; --trust: #56a8d1; --balance: #78a6c2; --wellbeing: #f4fafe; --ink: var(--brain); --muted: #587184; --cream: var(--wellbeing); --lime: var(--vital); --orange: var(--primary); --line: color-mix(in srgb, var(--balance) 28%, var(--wellbeing)); --white: #fff; --serif: Georgia, 'Times New Roman', serif; --sans: Arial, sans-serif; } body { background: var(--wellbeing); color: var(--brain); font: 16px/1.6 var(--sans); } nav a:hover, nav .active { border-color: var(--primary); } .eyebrow { color: var(--primary); } footer { background: color-mix(in srgb, var(--balance) 17%, var(--wellbeing)); } .page-hero, .faq { background: color-mix(in srgb, var(--primary) 8%, var(--wellbeing)); } .faq details { border-color: color-mix(in srgb, var(--balance) 40%, var(--wellbeing)); } .home-header nav a:hover, .home-header nav .active { border-color: var(--vital); } .hero { background: linear-gradient( 90deg, rgba(49, 150, 218, 0.72) 0%, rgba(17, 118, 201, 0.4) 42%, rgba(114, 189, 226, 0.08) 70% ), url('../Ima/inicio-conecta-vital.webp') center/cover no-repeat; } .hero .eyebrow { color: #ffff; } .intro:after { background: color-mix(in srgb, var(--primary) 14%, var(--wellbeing)); } .intro-photo:after { background: linear-gradient(transparent, rgba(21, 63, 91, 0.68)); } .intro-copy h2 { color: var(--balance); } .intro-copy > p:not(.eyebrow) { color: var(--balance); } .soft { background: var(--brain); } .soft .eyebrow { color: var(--vital); } .soft:before { content: ''; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient( circle, rgba(86, 168, 209, 0.13) 1px, transparent 1.5px ); background-size: 14px 14px; -webkit-mask-image: linear-gradient( 90deg, transparent 0 58%, #000 84%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0 58%, #000 84%, transparent 100% ); pointer-events: none; } .soft .eyebrow { color: var(--primary); } .soft h2 { max-width: 440px; color: var(--brain); font-family: var(--serif); font-weight: 700; letter-spacing: -0.045em; } .soft h2 em { display: block; color: var(--trust); font-family: 'Segoe Script', 'Brush Script MT', cursive; font-weight: 500; letter-spacing: -0.06em; } .site-footer { --footer-unit: calc(100vw / 2084); --footer-accent: #b1e779; --footer-text: #e5e9eb; display: block; max-width: none; min-height: 0; margin: 0; padding: 0; border-top: 2px solid #0b2e3b; background: #05222e; color: var(--footer-text); font: 400 calc(20 * var(--footer-unit))/1.6 Arial, Helvetica, sans-serif; } .footer-grid { display: grid; grid-template-columns: 342fr 279fr 322fr 349fr 367fr 250fr; align-items: start; width: calc(1909 * var(--footer-unit)); max-width: none; margin: 0 0 0 calc(104 * var(--footer-unit)); padding: calc(84 * var(--footer-unit)) 0 calc(28 * var(--footer-unit)); gap: 0; } .site-footer section { position: relative; min-width: 0; padding: 0 calc(34 * var(--footer-unit)) 0 calc(38 * var(--footer-unit)); } .site-footer section + section::before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: calc(333 * var(--footer-unit)); background: rgb(184 215 222 / 26%); } .site-footer section:first-child { padding: 0 calc(34 * var(--footer-unit)) 0 0; } .site-footer section:last-child { padding: 0 0 0 calc(48 * var(--footer-unit)); } .site-footer h2 { margin: 0 0 calc(24 * var(--footer-unit)); color: #f0f2f3; font: 700 calc(24 * var(--footer-unit))/1.3 Arial, Helvetica, sans-serif; letter-spacing: 0; white-space: nowrap; } .site-footer h2::after, .footer-brand p::before { content: ''; display: block; width: calc(46 * var(--footer-unit)); height: calc(3 * var(--footer-unit)); margin-top: calc(14 * var(--footer-unit)); border-radius: 2px; background: var(--footer-accent); } .site-footer a { color: inherit; transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease; } .site-footer a:hover { color: var(--footer-accent); } .site-footer a:focus-visible { outline: 2px solid var(--footer-accent); outline-offset: 5px; } .site-footer .footer-logo { display: block; width: calc(315 * var(--footer-unit)); height: calc(150 * var(--footer-unit)); margin: calc(-32 * var(--footer-unit)) 0 0 calc(-6 * var(--footer-unit)); } .footer-logo > span { display: block; width: 100%; height: 100%; background-image: url('../Ima/logo-conecta-vital-footer.webp'); background-repeat: no-repeat; background-size: 100% 100%; background-position: center; } .footer-brand p { max-width: none; margin: 0; font-size: calc(22 * var(--footer-unit)); line-height: calc(32 * var(--footer-unit)); } .footer-brand p::before { margin: calc(17 * var(--footer-unit)) 0 calc(18 * var(--footer-unit)); } .footer-links > a { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--footer-unit)); min-height: calc(46 * var(--footer-unit)); margin: 0; white-space: normal; } .footer-links > a::after { content: ''; flex: 0 0 auto; width: calc(8 * var(--footer-unit)); height: calc(8 * var(--footer-unit)); border-top: calc(2 * var(--footer-unit)) solid var(--footer-accent); border-right: calc(2 * var(--footer-unit)) solid var(--footer-accent); transform: rotate(45deg); margin-right: calc(3 * var(--footer-unit)); } .footer-help p { margin: 0 0 calc(30 * var(--footer-unit)); line-height: calc(31 * var(--footer-unit)); white-space: nowrap; } .site-footer .contact-card { display: flex; align-items: center; gap: calc(18 * var(--footer-unit)); width: 100%; min-height: calc(88 * var(--footer-unit)); margin: 0 0 calc(24 * var(--footer-unit)); padding: calc(14 * var(--footer-unit)) calc(20 * var(--footer-unit)); border: 1px solid rgb(177 231 121 / 56%); border-radius: calc(18 * var(--footer-unit)); background: linear-gradient(110deg, transparent, rgb(53 120 119 / 13%)); } .site-footer .contact-card:hover { border-color: var(--footer-accent); background-color: rgb(177 231 121 / 8%); } .site-footer .contact-card:last-child { margin-bottom: 0; } .contact-card-copy { flex: 1; min-width: 0; line-height: 1.45; } .contact-card-copy strong, .contact-card-copy > span { display: block; } .contact-card-copy strong { color: #f0f2f3; font-weight: 700; } .contact-card-copy > span { color: var(--footer-text); white-space: nowrap; } .footer-icon { display: block; flex: 0 0 auto; width: calc(30 * var(--footer-unit)); height: calc(30 * var(--footer-unit)); color: var(--footer-accent); } .contact-card .footer-icon { width: calc(46 * var(--footer-unit)); height: calc(46 * var(--footer-unit)); } .footer-icon--phone, .footer-icon--whatsapp, .footer-icon--mail { fill: currentColor; stroke: none; } .site-footer .footer-contact-row { display: flex; align-items: flex-start; gap: calc(16 * var(--footer-unit)); margin: 0 0 calc(34 * var(--footer-unit)); line-height: calc(34 * var(--footer-unit)); white-space: normal; } .footer-contact-row > span { min-width: 0; } .site-footer .footer-contact { padding-inline: calc(18 * var(--footer-unit)) calc(12 * var(--footer-unit)); } .footer-contact-row[href^="mailto:"] > span, .footer-hours-line { white-space: nowrap; overflow-wrap: normal; } .footer-hours-line { display: block; } .footer-contact-row .footer-icon { margin-top: calc(3 * var(--footer-unit)); } .footer-contact-row:last-child { margin-bottom: 0; } .footer-partners img { --partner-ratio: 5 / 2; display: block; width: calc(200 * var(--footer-unit)); max-width: 100%; height: auto; aspect-ratio: var(--partner-ratio); margin: 0 0 calc(16 * var(--footer-unit)); padding: calc(8 * var(--footer-unit)) calc(12 * var(--footer-unit)); border: 1px solid #d8e0e3; border-radius: calc(8 * var(--footer-unit)); background: #fff; object-fit: contain; } .footer-partners .footer-partner-logo--portrait { --partner-ratio: 4 / 3; } .footer-partners img:last-child { margin-bottom: 0; } @media (max-width: 1000px) { .site-footer { --footer-unit: 1px; min-height: 0; border-top-width: 2px; font-size: 1rem; } .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: calc(100% - 48px); margin: 0 auto; padding: 32px 0 24px; gap: 28px 24px; } .site-footer section, .site-footer section:first-child, .site-footer section:last-child { padding: 0; } .site-footer section + section::before { display: none; } .site-footer h2 { font-size: 1.125rem; white-space: normal; } .site-footer .footer-logo { --footer-unit: 0.68px; margin-top: 0; margin-left: -4px; } .footer-brand p { font-size: 1rem; line-height: 1.55; } .footer-desktop-break { display: none; } .footer-links > a { min-height: 48px; white-space: normal; } .footer-help p, .site-footer .footer-contact-row { white-space: normal; line-height: 1.55; } .site-footer .contact-card { padding: 12px; gap: 10px; min-height: 64px; border-radius: 14px; margin-bottom: 14px; } .contact-card .footer-icon { width: 32px; height: 32px; } .site-footer .footer-contact { grid-column: span 2; padding: 0; } .site-footer .footer-contact-row { gap: 12px; margin-bottom: 24px; } .footer-icon { width: 26px; height: 26px; } .footer-partners img { max-width: 100%; } } @media (max-width: 760px) { .footer-grid { width: calc(100% - 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 28px; } .footer-brand, .footer-help, .footer-contact, .footer-partners { grid-column: 1 / -1; } .site-footer .footer-contact { grid-column: 1 / -1; } .site-footer .footer-logo { --footer-unit: 0.95px; } .footer-brand p { max-width: 440px; } .site-footer .contact-card { max-width: 320px; } .footer-links > a { align-items: flex-start; } .footer-links > a::after { margin-top: 8px; } .footer-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); align-items: start; gap: 16px; } .footer-partners h2 { grid-column: 1 / -1; margin-bottom: 8px; } .footer-partners img { width: 100%; margin: 0; } } @media (max-width: 380px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } .site-footer .footer-logo { --footer-unit: 0.84px; } } @media (prefers-reduced-motion: reduce) { .site-footer a { transition: none; } } .site-header .brand { display: flex; align-items: center; height: 100%; } .site-header .brand img { display: block; width: auto; height: 80px; max-width: 210px; object-fit: contain; } @media (max-width: 760px) { .site-header .brand img { height: 48px; max-width: 175px; } } html, body { max-width: 100%; overflow-x: clip; } img { max-width: 100%; height: auto; } .site-header, .section:not(.soft):not(.knowledge-band), .categories { width: 100%; padding-inline: clamp(20px, 4vw, 28px); } @media (min-width: 761px) and (max-width: 980px) { .intro { grid-template-columns: 1fr; gap: 38px; } .intro { padding-top: 72px; padding-bottom: 72px; } .intro-photo { max-width: 385px; } } @media (max-width: 760px) { .site-header, .section:not(.soft):not(.knowledge-band), .categories { padding-inline: 20px; } .page-hero, .faq, footer { padding-inline: 20px; } } @media (max-width: 760px) { .soft:before { opacity: 0.55; mask-image: none; -webkit-mask-image: none; } .soft h2 { font-size: clamp(38px, 11vw, 50px); } } html { scroll-padding-top: calc(var(--nav-height) + 18px); } [id] { scroll-margin-top: calc(var(--nav-height) + 18px); } .site-header { position: sticky; z-index: 100; top: 0; width: 100%; max-width: none; padding-inline: max(28px, calc((100vw - 1144px) / 2)); background: rgba(244, 250, 254, 0.96); border-bottom: 1px solid rgba(21, 63, 91, 0.12); box-shadow: 0 5px 18px rgba(21, 63, 91, 0.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .home-header { position: sticky; margin-bottom: 0; background: #1f88b3; color: #fff; border-bottom-color: rgba(255, 255, 255, 0.16); } @media (max-width: 760px) { :root { --nav-height: 65px; } html { scroll-padding-top: calc(var(--nav-height) + 14px); } [id] { scroll-margin-top: calc(var(--nav-height) + 14px); } .site-header { padding-inline: 20px; } .home-header { position: sticky; margin-bottom: 0; } nav { max-height: calc(100dvh - var(--nav-height)); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 12px 24px rgba(21, 63, 91, 0.14); } } .program-services { max-width: 1144px; margin: 0 auto; padding: 0 28px 48px; } @media (max-width: 760px) { .program-services { padding-inline: 20px; } } .categories.knowledge-library { max-width: 1240px; padding-block: 52px 60px; } .library-heading { margin-bottom: 46px; } .library-heading .eyebrow { margin-bottom: 10px; } .library-heading h2 { margin: 0; font: 700 clamp(28px, 3vw, 40px)/1.15 var(--sans); letter-spacing: -0.035em; } .knowledge-library #library-title { color: #bcf653; } .library-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 85%; gap: clamp(15px, 2.55vw, 34px); list-style: none; margin: 0 auto; padding: 0; } .library-shelf > li { min-width: 0; } .library-book { display: block; height: 100%; border-radius: 12px; } .library-book-cover { position: relative; isolation: isolate; display: flex; align-items: center; aspect-ratio: 5/7; overflow: hidden; border-radius: 3px; padding: 0; background: #fff; box-shadow: 0 8px 18px rgba(21, 63, 91, 0.12); transition: transform 0.2s, box-shadow 0.2s; } .library-book-cover img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } .library-book-cover:after { content: none; position: absolute; z-index: -1; inset: 0; background: linear-gradient( 180deg, rgba(8, 29, 44, 0.04) 25%, rgba(8, 29, 44, 0.92) 100% ); } .library-book h3 { margin: 14px 0 4px; color: var(--brain); font: 700 16px/1.3 var(--sans); letter-spacing: -0.015em; } .library-book p { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.5; } .library-tag { display: inline-block; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: #e4eff4; color: #31546a; font-size: 12px; line-height: 1.45; } .library-book:focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; } @media (max-width: 1000px) { .library-shelf { width: 100%; } .library-shelf { gap: 17px; } } @media (max-width: 760px) { .categories.knowledge-library { padding-block: 40px 48px; } .library-heading { margin-bottom: 42px; } .library-shelf { display: flex; width: auto; gap: 19px; overflow-x: auto; margin-inline: -20px; padding: 5px 20px 20px; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: thin; scrollbar-color: #78a6c2 transparent; } .library-shelf > li { flex: 0 0 134px; scroll-snap-align: start; } } @media (prefers-reduced-motion: reduce) { .library-book-cover { transition: none; } } .site-header { gap: 24px; } .site-header #main-nav { margin-left: auto; align-items: center; } .site-header .header-contact.hero-link { flex: 0 0 auto; width: 158px; min-height: 50px; margin: 0; padding: 14px 22px; border: 0; border-radius: 0; background: transparent; color: #006880; font: 900 16px/1.15 'Arial Black', Arial, Helvetica, sans-serif; letter-spacing: -.045em; } .site-header .header-contact.hero-link::before { background: #bcf653; } .site-header .header-contact:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } @media (min-width: 761px) and (max-width: 1100px) { .site-header { gap: 16px; padding-inline: 24px; } .site-header .brand img { max-width: 155px; } .site-header #main-nav { gap: 16px; font-size: 12px; } .site-header .header-contact.hero-link { width: 132px; font-size: 14px; } } @media (max-width: 760px) { .site-header { gap: 10px; padding-inline: 16px; } .site-header .brand { margin-right: auto; } .site-header .brand img { max-width: 112px; } .site-header .menu-toggle { padding: 10px 4px; min-height: 44px; } .site-header #main-nav { align-items: stretch; } .site-header .header-contact.hero-link { width: 116px; min-height: 44px; padding: 12px 16px; font-size: 13px; } } @media (max-width: 360px) { .site-header { gap: 6px; padding-inline: 12px; } .site-header .brand img { max-width: 96px; } .site-header .header-contact.hero-link { width: 108px; padding-inline: 12px; } } :root { --paragraph-size: clamp(18px, 1.25vw, 26px); } body p { font-size: var(--paragraph-size) !important; } body .site-footer p { line-height: 1.45; white-space: normal; } body .site-footer .footer-desktop-break { display: none; } body .site-footer .footer-hours-line { white-space: normal; }