.qv-tt, .qv-tt * { box-sizing: border-box; } .qv-tt { --qv-green: #123f35; --qv-deep: #082d26; --qv-gold: #dfb72d; --qv-cream: #f8f5ec; --qv-white: #ffffff; --qv-text: #263b35; --qv-muted: #60716b; --qv-border: #e5decc; width: 100%; margin: 0 !important; padding: 0 !important; color: var(--qv-text); background: var(--qv-white); font-family: inherit; } .qv-tt article, .qv-tt section, .qv-tt header, .qv-tt footer { min-height: 0 !important; height: auto !important; } .qv-tt article { margin: 0 !important; padding: 0; } .qv-tt section, .qv-tt header, .qv-tt footer { margin: 0 !important; } .qv-tt h1, .qv-tt h2, .qv-tt h3, .qv-tt p, .qv-tt ul, .qv-tt ol, .qv-tt blockquote, .qv-tt figure { margin-top: 0; } .qv-tt a { color: var(--qv-green); text-decoration-thickness: 1px; text-underline-offset: 3px; } .qv-tt a:hover, .qv-tt a:focus { color: #8d6900; } .qv-tt__hero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 92px) 20px 0; background: radial-gradient(circle at 12% 12%, rgba(223, 183, 45, .18), transparent 27%), linear-gradient(145deg, var(--qv-deep), var(--qv-green)); } .qv-tt__hero-inner, .qv-tt__container { width: 100%; max-width: 1120px; margin: 0 auto; } .qv-tt__hero-copy { max-width: 850px; margin: 0 auto 34px; text-align: center; } .qv-tt__eyebrow { display: inline-block; margin-bottom: 13px; color: #f3ce55; font-size: 13px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } .qv-tt h1 { margin-bottom: 18px; color: var(--qv-white); font-size: clamp(37px, 5.5vw, 67px); line-height: 1.06; letter-spacing: -.035em; } .qv-tt__lead { max-width: 760px; margin: 0 auto; color: rgba(255, 255, 255, .86); font-size: clamp(17px, 2vw, 20px); line-height: 1.75; } .qv-tt__hero-figure { overflow: hidden; margin: 0 !important; border: 5px solid rgba(255, 255, 255, .16); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 24px 65px rgba(0, 0, 0, .24); } .qv-tt__hero-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .qv-tt__body { padding: clamp(54px, 7vw, 94px) 20px; } .qv-tt__flow { display: flex; flex-direction: column; gap: clamp(42px, 5vw, 66px); } .qv-tt__intro-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 22px; align-items: stretch; } .qv-tt__intro-main, .qv-tt__myth { padding: clamp(25px, 4vw, 39px); border-radius: 22px; } .qv-tt__intro-main { background: var(--qv-cream); border: 1px solid var(--qv-border); } .qv-tt__myth { color: var(--qv-white); background: var(--qv-green); } .qv-tt__label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 13px; color: #9b7200; font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .qv-tt__myth .qv-tt__label { color: #f4ce57; } .qv-tt h2 { margin-bottom: 16px; color: var(--qv-deep); font-size: clamp(29px, 4vw, 45px); line-height: 1.14; letter-spacing: -.025em; } .qv-tt h3 { margin-bottom: 9px; color: var(--qv-green); font-size: clamp(19px, 2.3vw, 24px); line-height: 1.3; } .qv-tt p, .qv-tt li { color: var(--qv-text); font-size: 16px; line-height: 1.8; } .qv-tt p:last-child, .qv-tt ul:last-child, .qv-tt ol:last-child { margin-bottom: 0; } .qv-tt__myth h2, .qv-tt__myth h3, .qv-tt__myth p { color: var(--qv-white); } .qv-tt__section-head { max-width: 780px; margin: 0 auto 24px; text-align: center; } .qv-tt__section-head p { margin-bottom: 0; color: var(--qv-muted); } .qv-tt__definition-grid, .qv-tt__levels, .qv-tt__evidence-grid, .qv-tt__steps, .qv-tt__link-grid { display: grid; gap: 16px; } .qv-tt__definition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qv-tt__definition, .qv-tt__level, .qv-tt__evidence, .qv-tt__step, .qv-tt__link-card { min-width: 0; margin: 0 !important; height: auto !important; } .qv-tt__definition { padding: clamp(25px, 4vw, 38px); background: var(--qv-white); border: 1px solid var(--qv-border); border-radius: 21px; box-shadow: 0 13px 35px rgba(18, 63, 53, .07); } .qv-tt__definition:first-child { border-top: 5px solid var(--qv-green); } .qv-tt__definition:last-child { border-top: 5px solid var(--qv-gold); } .qv-tt__definition ul { margin-bottom: 0; padding-left: 21px; } .qv-tt__definition li + li { margin-top: 5px; } .qv-tt__verse { padding: clamp(28px, 5vw, 48px); text-align: center; background: radial-gradient(circle at center, rgba(223, 183, 45, .14), transparent 57%), var(--qv-cream); border: 1px solid var(--qv-border); border-radius: 23px; } .qv-tt__verse blockquote { margin-bottom: 12px; color: var(--qv-deep); font-family: Georgia, serif; font-size: clamp(27px, 4vw, 41px); font-weight: 700; line-height: 1.6; } .qv-tt__verse p { max-width: 780px; margin: 0 auto; color: var(--qv-muted); } .qv-tt__table-wrap { overflow-x: auto; border: 1px solid var(--qv-border); border-radius: 20px; box-shadow: 0 12px 32px rgba(18, 63, 53, .06); } .qv-tt__table { width: 100%; min-width: 720px; border-collapse: collapse; background: var(--qv-white); } .qv-tt__table th, .qv-tt__table td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--qv-border); font-size: 15px; line-height: 1.65; } .qv-tt__table th { color: var(--qv-white); background: var(--qv-green); font-weight: 800; } .qv-tt__table tr:last-child td { border-bottom: 0; } .qv-tt__table td:first-child { color: var(--qv-deep); font-weight: 800; } .qv-tt__priority { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 20px; align-items: start; padding: clamp(26px, 4vw, 40px); color: var(--qv-white); background: linear-gradient(145deg, var(--qv-green), var(--qv-deep)); border-radius: 22px; } .qv-tt__priority-icon { display: grid; place-items: center; width: 70px; height: 70px; color: var(--qv-deep); background: var(--qv-gold); border-radius: 20px; font-size: 31px; font-weight: 900; } .qv-tt__priority h2, .qv-tt__priority p { color: var(--qv-white); } .qv-tt__priority p { margin-bottom: 0; opacity: .88; } .qv-tt__levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qv-tt__level { position: relative; overflow: hidden; padding: 27px; background: var(--qv-cream); border: 1px solid var(--qv-border); border-radius: 19px; } .qv-tt__level-number { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 15px; color: var(--qv-deep); background: var(--qv-gold); border-radius: 13px; font-weight: 900; } .qv-tt__note { margin-top: 16px !important; padding: 22px 24px; background: #fff9e8; border: 1px solid #efd57c; border-left: 5px solid var(--qv-gold); border-radius: 15px; } .qv-tt__listening { padding: clamp(27px, 4vw, 42px); background: var(--qv-white); border: 1px solid var(--qv-border); border-radius: 22px; box-shadow: 0 14px 38px rgba(18, 63, 53, .07); } .qv-tt__evidence-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .qv-tt__evidence { padding: 24px; background: var(--qv-cream); border: 1px solid var(--qv-border); border-radius: 17px; } .qv-tt__evidence-tag { display: inline-block; margin-bottom: 10px; color: #8b6700; font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .qv-tt__evidence p { margin-bottom: 12px; } .qv-tt__evidence a { font-weight: 750; } .qv-tt__poem { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 22px; align-items: center; padding: clamp(28px, 5vw, 48px); background: var(--qv-cream); border-radius: 23px; } .qv-tt__poem-lines { padding: 24px; color: var(--qv-white); background: var(--qv-green); border-radius: 18px; text-align: center; } .qv-tt__poem-lines p { margin-bottom: 8px; color: var(--qv-white); font-family: Georgia, serif; font-size: 19px; line-height: 1.75; } .qv-tt__poem-lines p:last-child { margin-bottom: 0; } .qv-tt__steps { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); } .qv-tt__step { padding: 24px; background: var(--qv-white); border: 1px solid var(--qv-border); border-radius: 17px; } .qv-tt__step-count { display: inline-block; margin-bottom: 13px; color: #987000; font-size: 13px; font-weight: 900; letter-spacing: .1em; } .qv-tt__faq { padding: clamp(27px, 4vw, 42px); background: var(--qv-cream); border-radius: 23px; } .qv-tt__faq details { margin: 0 !important; padding: 18px 20px; background: var(--qv-white); border: 1px solid var(--qv-border); border-radius: 14px; } .qv-tt__faq details + details { margin-top: 12px !important; } .qv-tt__faq summary { cursor: pointer; color: var(--qv-deep); font-size: 17px; font-weight: 800; line-height: 1.45; } .qv-tt__faq details p { margin: 13px 0 0; color: var(--qv-muted); } .qv-tt__link-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .qv-tt__link-card { display: block; padding: 23px; text-decoration: none; background: var(--qv-white); border: 1px solid var(--qv-border); border-radius: 17px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .qv-tt__link-card:hover, .qv-tt__link-card:focus { transform: translateY(-3px); border-color: #d5b94f; box-shadow: 0 12px 30px rgba(18, 63, 53, .09); } .qv-tt__link-card strong { display: block; margin-bottom: 7px; color: var(--qv-deep); font-size: 18px; } .qv-tt__link-card span { display: block; color: var(--qv-muted); font-size: 14px; line-height: 1.65; } .qv-tt__cta { padding: clamp(34px, 6vw, 58px); text-align: center; color: var(--qv-white); background: radial-gradient(circle at 80% 10%, rgba(223, 183, 45, .23), transparent 28%), linear-gradient(145deg, var(--qv-green), var(--qv-deep)); border-radius: 25px; } .qv-tt__cta h2, .qv-tt__cta p { color: var(--qv-white); } .qv-tt__cta p { max-width: 720px; margin-right: auto; margin-left: auto; opacity: .87; } .qv-tt__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 23px; } .qv-tt__button { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; padding: 14px 20px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 800; line-height: 1.3; text-decoration: none !important; } .qv-tt__button--gold { color: var(--qv-deep) !important; background: var(--qv-gold); } .qv-tt__button--light { color: var(--qv-white) !important; background: transparent; border-color: rgba(255, 255, 255, .55); } .qv-tt__sources { padding-top: 26px; border-top: 1px solid var(--qv-border); } .qv-tt__sources h2 { font-size: 25px; } .qv-tt__sources ul { margin-bottom: 0; padding-left: 21px; } .qv-tt__sources li + li { margin-top: 7px; } @media (max-width: 820px) { .qv-tt__intro-card, .qv-tt__definition-grid, .qv-tt__levels, .qv-tt__poem { grid-template-columns: 1fr; } .qv-tt__priority { grid-template-columns: 55px minmax(0, 1fr); gap: 15px; } .qv-tt__priority-icon { width: 55px; height: 55px; border-radius: 16px; font-size: 25px; } } @media (max-width: 560px) { .qv-tt__hero, .qv-tt__body { padding-right: 15px; padding-left: 15px; } .qv-tt__hero { padding-top: 47px; } .qv-tt__hero-figure { border-width: 3px; border-bottom: 0; border-radius: 18px 18px 0 0; } .qv-tt__flow { gap: 38px; } .qv-tt__definition-grid, .qv-tt__levels, .qv-tt__evidence-grid, .qv-tt__steps, .qv-tt__link-grid { grid-template-columns: 1fr; gap: 12px; } .qv-tt__priority { grid-template-columns: 1fr; } .qv-tt__button { width: 100%; } }