and leaves a trailing gap. Scoped to .editor-content so it only touches authored course content. */ .editor-content p:has(> img), .editor-content p:has(> .btn) { margin-bottom: 0; } /* Shared corner radius for every button */ .btn { border-radius: 5px; } /* #endregion GLOBAL TI OVERRIDES */ /* #region GLOBAL CHANGES ======================================== */ /* Site background */ body { background: var(--aalas-bg-panel); } /* Italicize all figure and image captions */ figcaption { font-style: italic; } /* #endregion GLOBAL CHANGES */ /* #region SPACING UTILITIES ===================================== */ /* Stack alongside any class to override its margin or padding */ :root { /* --- Padding scale --- */ --di-padding-xsm: 0.5rem; --di-padding-sm: 1rem; --di-padding-md: 1.5rem; --di-padding-lg: 2rem; --di-padding-xl: 2.5rem; --di-padding-2xl: 3rem; /* --- Margin scale --- */ --di-margin-xsm: 0.5rem; --di-margin-sm: 1rem; --di-margin-md: 1.5rem; --di-margin-lg: 2rem; --di-margin-xl: 2.5rem; --di-margin-2xl: 3rem; } /* --- All sides --- */ .di-padding-xsm { padding: var(--di-padding-xsm) !important; } .di-padding-sm { padding: var(--di-padding-sm) !important; } .di-padding-md { padding: var(--di-padding-md) !important; } .di-padding-lg { padding: var(--di-padding-lg) !important; } .di-padding-xl { padding: var(--di-padding-xl) !important; } .di-padding-2xl { padding: var(--di-padding-2xl) !important; } .di-padding-none { padding: 0 !important; } /* --- Top --- */ .di-padding-top-xsm { padding-top: var(--di-padding-xsm) !important; } .di-padding-top-sm { padding-top: var(--di-padding-sm) !important; } .di-padding-top-md { padding-top: var(--di-padding-md) !important; } .di-padding-top-lg { padding-top: var(--di-padding-lg) !important; } .di-padding-top-xl { padding-top: var(--di-padding-xl) !important; } .di-padding-top-2xl { padding-top: var(--di-padding-2xl) !important; } .di-padding-top-none { padding-top: 0 !important; } /* --- Bottom --- */ .di-padding-bottom-xsm { padding-bottom: var(--di-padding-xsm) !important; } .di-padding-bottom-sm { padding-bottom: var(--di-padding-sm) !important; } .di-padding-bottom-md { padding-bottom: var(--di-padding-md) !important; } .di-padding-bottom-lg { padding-bottom: var(--di-padding-lg) !important; } .di-padding-bottom-xl { padding-bottom: var(--di-padding-xl) !important; } .di-padding-bottom-2xl { padding-bottom: var(--di-padding-2xl) !important; } .di-padding-bottom-none { padding-bottom: 0 !important; } /* --- Horizontal (left & right) --- */ .di-padding-horiz-xsm { padding-left: var(--di-padding-xsm) !important; padding-right: var(--di-padding-xsm) !important; } .di-padding-horiz-sm { padding-left: var(--di-padding-sm) !important; padding-right: var(--di-padding-sm) !important; } .di-padding-horiz-md { padding-left: var(--di-padding-md) !important; padding-right: var(--di-padding-md) !important; } .di-padding-horiz-lg { padding-left: var(--di-padding-lg) !important; padding-right: var(--di-padding-lg) !important; } .di-padding-horiz-xl { padding-left: var(--di-padding-xl) !important; padding-right: var(--di-padding-xl) !important; } .di-padding-horiz-2xl { padding-left: var(--di-padding-2xl) !important; padding-right: var(--di-padding-2xl) !important; } .di-padding-horiz-none { padding-left: 0 !important; padding-right: 0 !important; } /* --- Vertical (top & bottom) --- */ .di-padding-vert-xsm { padding-top: var(--di-padding-xsm) !important; padding-bottom: var(--di-padding-xsm) !important; } .di-padding-vert-sm { padding-top: var(--di-padding-sm) !important; padding-bottom: var(--di-padding-sm) !important; } .di-padding-vert-md { padding-top: var(--di-padding-md) !important; padding-bottom: var(--di-padding-md) !important; } .di-padding-vert-lg { padding-top: var(--di-padding-lg) !important; padding-bottom: var(--di-padding-lg) !important; } .di-padding-vert-xl { padding-top: var(--di-padding-xl) !important; padding-bottom: var(--di-padding-xl) !important; } .di-padding-vert-2xl { padding-top: var(--di-padding-2xl) !important; padding-bottom: var(--di-padding-2xl) !important; } .di-padding-vert-none { padding-top: 0 !important; padding-bottom: 0 !important; } /* --- All sides --- */ .di-margin-xsm { margin: var(--di-margin-xsm) !important; } .di-margin-sm { margin: var(--di-margin-sm) !important; } .di-margin-md { margin: var(--di-margin-md) !important; } .di-margin-lg { margin: var(--di-margin-lg) !important; } .di-margin-xl { margin: var(--di-margin-xl) !important; } .di-margin-2xl { margin: var(--di-margin-2xl) !important; } .di-margin-none { margin: 0 !important; } /* --- Top --- */ .di-margin-top-xsm { margin-top: var(--di-margin-xsm) !important; } .di-margin-top-sm { margin-top: var(--di-margin-sm) !important; } .di-margin-top-md { margin-top: var(--di-margin-md) !important; } .di-margin-top-lg { margin-top: var(--di-margin-lg) !important; } .di-margin-top-xl { margin-top: var(--di-margin-xl) !important; } .di-margin-top-2xl { margin-top: var(--di-margin-2xl) !important; } .di-margin-top-none { margin-top: 0 !important; } /* --- Bottom --- */ .di-margin-bottom-xsm { margin-bottom: var(--di-margin-xsm) !important; } .di-margin-bottom-sm { margin-bottom: var(--di-margin-sm) !important; } .di-margin-bottom-md { margin-bottom: var(--di-margin-md) !important; } .di-margin-bottom-lg { margin-bottom: var(--di-margin-lg) !important; } .di-margin-bottom-xl { margin-bottom: var(--di-margin-xl) !important; } .di-margin-bottom-2xl { margin-bottom: var(--di-margin-2xl) !important; } .di-margin-bottom-none { margin-bottom: 0 !important; } /* --- Horizontal (left & right) --- */ .di-margin-horiz-xsm { margin-left: var(--di-margin-xsm) !important; margin-right: var(--di-margin-xsm) !important; } .di-margin-horiz-sm { margin-left: var(--di-margin-sm) !important; margin-right: var(--di-margin-sm) !important; } .di-margin-horiz-md { margin-left: var(--di-margin-md) !important; margin-right: var(--di-margin-md) !important; } .di-margin-horiz-lg { margin-left: var(--di-margin-lg) !important; margin-right: var(--di-margin-lg) !important; } .di-margin-horiz-xl { margin-left: var(--di-margin-xl) !important; margin-right: var(--di-margin-xl) !important; } .di-margin-horiz-2xl { margin-left: var(--di-margin-2xl) !important; margin-right: var(--di-margin-2xl) !important; } .di-margin-horiz-none { margin-left: 0 !important; margin-right: 0 !important; } /* --- Vertical (top & bottom) --- */ .di-margin-vert-xsm { margin-top: var(--di-margin-xsm) !important; margin-bottom: var(--di-margin-xsm) !important; } .di-margin-vert-sm { margin-top: var(--di-margin-sm) !important; margin-bottom: var(--di-margin-sm) !important; } .di-margin-vert-md { margin-top: var(--di-margin-md) !important; margin-bottom: var(--di-margin-md) !important; } .di-margin-vert-lg { margin-top: var(--di-margin-lg) !important; margin-bottom: var(--di-margin-lg) !important; } .di-margin-vert-xl { margin-top: var(--di-margin-xl) !important; margin-bottom: var(--di-margin-xl) !important; } .di-margin-vert-2xl { margin-top: var(--di-margin-2xl) !important; margin-bottom: var(--di-margin-2xl) !important; } .di-margin-vert-none { margin-top: 0 !important; margin-bottom: 0 !important; } /* --- Small screens — the large steps compress hardest --- */ @media (max-width: 40em) { :root { --di-padding-xsm: 0.5rem; --di-padding-sm: 0.75rem; --di-padding-md: 1rem; --di-padding-lg: 1.25rem; --di-padding-xl: 1.5rem; --di-padding-2xl: 1.75rem; --di-margin-xsm: 0.5rem; --di-margin-sm: 0.75rem; --di-margin-md: 1rem; --di-margin-lg: 1.25rem; --di-margin-xl: 1.5rem; --di-margin-2xl: 1.75rem; } } /* #endregion SPACING UTILITIES */ /* #region COURSE PAGES ========================================== */ /* #region GENERAL ============================================= */ /* Page background for all course pages */ body.course { background: var(--aalas-bg-page); } /* Remove the default sidebar so content spans the full width */ /* Text pages */ .topic__container.topic__container__text .topic__content.topic__content--text { width: 100%; } .topic__container.topic__container__text .topic__container.topic__container__text { display: none; } /* Match pair */ .topic__container.topic__container__match-pair-set .topic__content { width: 100%; } .topic__container.topic__container__match-pair-set .topic__sidebar { display: none; } /* Flip cards */ .topic__container.topic__container__flip-card-set .topic__content { width: 100%; } .topic__container.topic__container__flip-card-set .topic__sidebar { display: none; } /* Page-type spacing fixes — list roll and quiz containers */ .list-roll__container .topic__list { padding: 0 1rem; margin: 0; } .quiz__container--learner .question__container { padding: 0; } /* Default list indentation inside the content editor */ .editor-content ol, .editor-content ul { padding-left: 1rem; } /* Body link color (buttons excluded) */ .editor-content a:not(.btn) { color: var(--aalas-link); } /* Hide the auto-generated section number in syllabus titles */ .syllabus__section-title-index { display: none; } /* #endregion GENERAL */ /* #region HEADINGS ============================================ */ /* Section title — largest heading, green rule underneath */ h1.di-section-heading { font-size: 3rem; font-weight: 700; font-family: "Work Sans", sans-serif !Important; letter-spacing: .5px; margin-bottom: 1.5rem; color: var(--aalas-green); border-bottom: solid 6px var(--aalas-green-mid); padding-bottom: 5px; } /* Page heading */ h1.di-heading { font-size: 2.5rem; font-weight: 700; font-family: "Work Sans", sans-serif !Important; letter-spacing: .5px; margin-bottom: 1rem; color: var(--aalas-green); } /* Sub-heading — gray */ h2.di-heading { font-size: 1.5rem; font-weight: 500; font-family: "Work Sans", sans-serif !Important; letter-spacing: .5px; margin-bottom: 0.25rem; margin-top: 1.25rem; color: var(--aalas-text-label); } /* Third-level heading — gray */ h3.di-heading { font-size: 1.25rem; font-weight: 500; font-family: "Work Sans", sans-serif !Important; letter-spacing: .5px; margin-bottom: 0.25rem; margin-top: 1.25rem; color: var(--aalas-text-label); } /* Uppercase kicker/label above a block of content */ p.di-gray-sub-heading { text-transform: uppercase; margin-bottom: 0.75rem; margin-top: 1.5rem; font-size: 1.1rem; font-weight: 700; font-family: "Work Sans", sans-serif !Important; } /* Centered italic instruction line */ p.di-directions { text-align: center; font-size: 0.95rem; margin-bottom: 0; margin-top: 1.5rem; font-style: italic; } /* Caption bar for image credits and citations */ p.di-image-citation { background: var(--aalas-bg-tint); padding: 5px; text-align: center; font-style: italic; font-size: 0.85rem; } /* Large green pull-out statement */ p.di-callout-text-green { font-size: 1.5rem; color: var(--aalas-green-callout); font-weight: 900; } /* Large gold pull-out statement */ p.di-callout-text-gold { font-size: 1.5rem; color: var(--aalas-gold-ada); font-weight: 900; } /* #endregion HEADINGS */ /* #region BUTTONS ============================================= */ /* Primary button sizing inside content areas */ .editor-content .btn--primary { font-size: 1rem; margin-top: 1rem; } /* Primary buttons follow the theme accent color */ .btn--primary, .btn-primary { background-color: var(--accent-color) !Important; border-color: var(--accent-color) !Important; color: var(--accent-contrast-color) !Important; } /* Carries both classes — stays a link, not a filled button */ .btn--link.btn--primary { color: var(--accent-color) !important; background: transparent !important; } /* #endregion BUTTONS */ /* #region IMAGES ============================================== */ /* Remove the trailing gap under an image paragraph */ p.di-image { margin-bottom: 0; } /* Right-floated images at 30 / 40 / 50% width */ .di-right-30-image { float: right; width: 30%; margin-left: 1.5rem; margin-bottom: 1rem; } .di-right-40-image { float: right; width: 40%; margin-left: 1.5rem; margin-bottom: 1rem; } .di-right-50-image { float: right; width: 50%; margin-left: 1.5rem; margin-bottom: 1rem; } /* #endregion IMAGES */ /* #region VIDEO WRAPPER ======================================= */ /* Responsive 16:9 video container */ .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; border: none; padding-top: .5rem; margin-right: 25%; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* #endregion VIDEO WRAPPER */ /* #region LISTS =============================================== */ /* Ordered lists — green numbers */ ol.di-ordered-list.di-marker-light-green > li::marker { color: var(--aalas-green-mid); font-size: 1.2rem; line-height: 1.3rem; font-weight: 700; } /* Ordered lists — gold numbers */ ol.di-ordered-list.di-marker-yellow > li::marker { color: var(--aalas-gold-ada); font-size: 1.2rem; line-height: 1.3rem; font-weight: 700; } /* Ordered list spacing */ ol.di-ordered-list > li { padding-left: 0.5rem; margin-bottom: 0.75rem; } ol.di-ordered-list { padding-left: 1.25rem; margin-bottom: 1.5rem; } /* Unordered lists — square bullet drawn with ::before */ ul.di-unordered-list { padding-left: 1.4rem; margin-bottom: 1.5rem; list-style: square; } ul.di-unordered-list > li { list-style-type: none; position: relative; margin-bottom: 0.75rem; } /* Unordered lists — green square bullet */ ul.di-unordered-list.di-marker-light-green > li::before { content: ""; position: absolute; left: -0.6em; font-size: 3rem; background-color: var(--aalas-green-mid); height: 0.85rem; min-width: 0.85rem; top: 5px; } /* Unordered lists — gold square bullet */ ul.di-unordered-list.di-marker-yellow > li::before { content: ""; position: absolute; left: -0.6em; font-size: 3rem; background-color: var(--aalas-gold); height: 0.85rem; min-width: 0.85rem; top: 5px; } /* Nested lists revert to standard round bullets */ ul.di-unordered-list ul { list-style-type: disc; padding-left: 0.5rem; margin-top: 2px; } ul.di-unordered-list ul li { list-style-type: disc; position: static; margin-bottom: 0.4rem; } ul.di-unordered-list ul li::before { content: none; } /* Checkmark list — double-checkmark image in place of a bullet */ ul.di-checkmark-list { padding-left: 1.75rem; margin-bottom: 1.5rem; list-style: none; } ul.di-checkmark-list li { position: relative; margin-bottom: 0.75rem; } ul.di-checkmark-list li::before { content: ""; position: absolute; left: -2.5em; background: url("https://media.thoughtindustries.com/course-uploads/75c970fd-0d00-4d8a-b289-3f478a4e8018/7fcy781rr43u-DoubleCheckmark.png"); height: 16px; width: 27px; background-size: contain; background-repeat: no-repeat; top: 5px; } /* #endregion LISTS */ /* #region INTERACTIVE PAGE TYPE =============================== */ /* Popup caption text */ .popup__caption p { margin-bottom: 10px; font-size: 0.85rem; } /* Popup heading — gold underline */ p.di-popup-heading { font-size: 1.3rem; border-bottom: solid 2px var(--aalas-gold); padding: 0 10px 3px 0; margin-bottom: 10px; width: fit-content; color: var(--aalas-text-dark); font-weight: 900; line-height: 1.2; } /* Circular hotspot marker on tagged images */ .btn--image-tag i { border-radius: 100%; display: flex; font-size: 2rem; height: 50px; padding: 0; text-align: center; width: 50px; align-content: center; align-items: center; justify-content: center; } .popup__caption { padding: 1rem; } /* Breathing room around topic images */ .topic__image { padding: 0 3rem; } /* #endregion INTERACTIVE PAGE TYPE */ /* #region SLIDESHOW =========================================== */ /* Remove default side borders on slideshow content */ .topic__contained__container .topic__contained__content { border-top: var(--aalas-green-alt); border-left: none; border-right: 0; } .topic__contained__container .topic__contained__wrapper .topic__contained__sidebar { border-top: var(--aalas-green-alt); } /* Slide detail padding */ .topic__contained__container .topic__contained__sidebar .slide__detail { padding: 1.5rem; } /* Slide sidebar caption heading */ .topic__contained__container .topic__contained__sidebar .topic__sidebar__caption h3 { font-family: 'Mulish' !Important; font-size: 1.5rem; } /* Slideshow next/prev buttons */ .slide-show__controls .btn--primary { color: var(--accent-contrast-color); padding: 0.5rem 2rem; border-radius: 5px; background-color: var(--aalas-green-alt); border-color: var(--aalas-green-alt) } /* Slideshow top bar — transparent with a green rule */ .slide-show__top-bar { background-color: transparent; color: var(--aalas-text-soft); border-bottom: solid 5px var(--aalas-green-alt); } /* Slide counter */ .slide-show__count { padding: .25em 1rem; font-size: 14px; color: var(--aalas-text-dark); } .slide-show__top-bar > .row > .column { padding-right: 0; } /* #endregion SLIDESHOW */ /* #region QUIZ START MESSAGES ================================= */ /* Quiz intro card — var(--aalas-white) with a heavy green border */ .quiz-start__content { background-color: var(--aalas-white); border: solid 6px var(--aalas-green-alt); } .quiz-start__content .quiz-start__text { padding: 0; } /* Quiz intro title — reversed out on green */ .quiz-start__content .quiz-start__text h1 { text-align: center; font-size: 3rem; font-weight: 700; font-family: "Work Sans", sans-serif !Important; text-transform: uppercase; margin-bottom: 0; background: var(--aalas-green-alt); padding: 1.5rem; color: var(--aalas-white); } /* Quiz intro body copy */ .quiz-start__content .quiz-start__text p { text-align: center; margin-top: 1.5rem; margin-bottom: 2rem; font-size: 1.25rem; } .quiz-start__text .quiz-start__sub-text { margin-top: 1rem; } /* Square start button flush to the card edge */ .quiz-start__content .quiz-start__text .btn { margin-bottom: 0; border-radius: 0; } /* #endregion QUIZ START MESSAGES */ /* #region QUIZ QUESTIONS ====================================== */ /* Question text — centered */ .quiz__container.quiz__container--learner.quiz__container--quiz.quiz__container--test--taking .question__body h2 { font-family: "Work Sans", sans-serif !Important; font-size: 2.5rem; margin-bottom: 1.5rem; text-align: center; margin-top: -2rem; } /* Answer choices — full width */ .quiz__container.quiz__container--learner.quiz__container--quiz.quiz__container--test--taking .choices__list li .choice { width: 100%; font-size: 1rem; } .quiz__container.quiz__container--learner.quiz__container--quiz.quiz__container--test--taking .choice__index { max-width: fit-content; padding-right: 0; margin-left: 0.5rem; } /* Left-align the answer review feedback */ .quiz__container--assessment .choice__review, .quiz__container--learner .choice__review { text-align: left !important; margin-left: 1.75rem; margin-top: -5px; } /* #endregion QUIZ QUESTIONS */ /* #endregion COURSE PAGES */ /* #region WIDGETS =============================================== */ /* #region INFO ICON NOTE ====================================== */ /* Note box — double green border with an icon heading straddling the top edge */ .di-green-note { margin-top: 2.5rem; border: double 3px var(--aalas-green-dark); padding: 2rem 2rem 1rem 2rem; margin-left: 1rem; position: relative; } .di-green-note > p { position: relative; z-index: 100; } .di-green-note .di-green-note-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 0; background: var(--aalas-white); margin-left: -4rem; margin-top: -4.25rem; max-width: fit-content; padding: 0.75rem; position: absolute; } .di-green-note .di-green-note-heading p { margin-bottom: 0; } .di-green-note .di-green-note-heading img { max-width: 40px; } .di-green-note .di-green-note-heading p:last-of-type { font-size: 1.25rem; font-weight: 700; font-family: "Work Sans", sans-serif !Important; color: var(--aalas-green-dark); } /* #endregion INFO ICON NOTE */ /* #region COMPARISON BOXES ==================================== */ /* Two side-by-side cards with an icon overlapping the top border */ .row.di-comparison-image { display: flex; gap: 30px; margin: 2rem; justify-content: center; margin-top: 5rem; } .row.di-comparison-image .large-6.columns { border: solid 3px var(--aalas-green-alt); border-radius: 10px; padding: 2rem; position: relative; padding-bottom: 5rem; } .row.di-comparison-image .large-6.columns p:first-child { margin-top: -6rem; margin-bottom: 10px; } .row.di-comparison-image .large-6.columns img { height: 110px; border: solid 10px var(--aalas-white); background: var(--aalas-white); } .row.di-comparison-image .large-6.columns p { text-align: center; } .row.di-comparison-image .large-6.columns h3 { text-align: center; font-size: 1.2rem; margin-bottom: 10px; font-family: 'Mulish' !Important; text-transform: uppercase; } .row.di-comparison-image .large-6.columns a { margin-top: 2rem; width: 50%; position: absolute; bottom: 1rem; left: 25%; } /* #endregion COMPARISON BOXES */ /* #region QUOTE CALLOUT BOX =================================== */ /* Quote framed by top and bottom rules with quote-mark icons */ .di-quote-box { width: 100%; margin: 2rem 0; } .di-quote-box .quote-line { position: relative; display: flex; align-items: center; margin: 12px 0; } .di-quote-box .quote-line::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 3px; } /* Rule color variants */ .di-quote-box .quote-line.green::before { background: var(--aalas-green); } .di-quote-box .quote-line.yellow::before { background: var(--aalas-gold); } /* Shared styling for both quote-mark icons */ .di-quote-box .quote-line.top::after, .di-quote-box .quote-line.bottom::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: var(--aalas-white); padding: 0 2rem; } /* Opening quote mark — sits on the top rule */ .di-quote-box .quote-line.top::after { left: 50px; width: 36px; height: 28px; background-repeat: no-repeat; background-size: contain; background-position: center; } .di-quote-box .quote-line.top.green::after { background-image: url("https://media.thoughtindustries.com/course-uploads/75c970fd-0d00-4d8a-b289-3f478a4e8018/oto2s95lq500-image.png"); } .di-quote-box .quote-line.top.yellow::after { background-image: url("https://media.thoughtindustries.com/course-uploads/75c970fd-0d00-4d8a-b289-3f478a4e8018/xy29frj0er8c-image.png"); } /* Closing quote mark — sits on the bottom rule, rotated */ .di-quote-box .quote-line.bottom::after { right: 50px; width: 36px; height: 28px; background-repeat: no-repeat; background-size: contain; background-position: center; transform: translateY(-50%) rotate(180deg); } .di-quote-box .quote-line.bottom.green::after { background-image: url("https://media.thoughtindustries.com/course-uploads/75c970fd-0d00-4d8a-b289-3f478a4e8018/oto2s95lq500-image.png"); } .di-quote-box .quote-line.bottom.yellow::after { background-image: url("https://media.thoughtindustries.com/course-uploads/75c970fd-0d00-4d8a-b289-3f478a4e8018/xy29frj0er8c-image.png"); } .di-quote-box .di-quote-body { margin: 1.5rem 1rem; line-height: 1.6; } /* #endregion QUOTE CALLOUT BOX */ /* #region SIMPLE QUOTE ======================================== */ /* Inline quote with a small icon in the left column */ .di-simple-quote { display: flex; flex-wrap: nowrap; gap: 20px; margin-bottom: 1.5rem; } .di-simple-quote p:first-of-type { flex: 0 0 70px; } .di-simple-quote p { margin-bottom: 0; font-size: 1.2rem; color: var(--aalas-gold-ada); } .di-simple-quote img { margin-top: 10px; } /* #endregion SIMPLE QUOTE */ /* #region GOLD TEXT BOX ======================================= */ /* Full-bleed gold band — negative margins push it past the content column */ .di-gold-box { background: var(--aalas-gold-ada); padding: 1.5rem 4rem; margin-left: -4.75em; margin-right: -4em; margin-top: 2rem; } .di-gold-box p { color: var(--aalas-white); margin-bottom: 0; } /* #endregion GOLD TEXT BOX */ /* #region GREEN TEXT BOX ====================================== */ /* Full-bleed green band — negative margins push it past the content column */ .di-green-box { background: var(--aalas-green); padding: 1.5rem 4rem; margin-left: -4.75em; margin-right: -4em; margin-top: 2rem; } .di-green-box p { color: var(--aalas-white); margin-bottom: 0; } .di-green-box a { color: var(--aalas-gold-bright) !important; } /* #endregion GREEN TEXT BOX */ /* #region BOOKMARK HEADING ==================================== */ /* Heading with a gold rule filling the remaining width */ .di-bookends-container { width: 100%; display: flex; align-items: center; padding: 0; background-color: var(--aalas-white); box-sizing: border-box; margin-bottom: 1rem; } .di-bookends-spacer { height: 0.25rem; width: 100%; border-radius: 0.15rem; background-color: var(--aalas-gold); } .di-bookends-body { box-sizing: border-box; white-space: nowrap; font-weight: 500; font-size: 2rem; line-height: 1.5rem; letter-spacing: 0.36px; padding: 0rem; margin-right: 20px; color: var(--aalas-green); font-family: "Work Sans", sans-serif !Important; } /* #endregion BOOKMARK HEADING */ /* #endregion WIDGETS */ /* #region LIST ROLL ============================================= */ /* Hide the default list roll heading */ .list-roll__container .heading.heading--primary { display: none; } /* Thumbnail / text column split — wider thumb when expanded */ .list-roll__container .topic__list__thumb { width: 8%; } .list-roll__container .topic__list__item--expanded .topic__list__thumb { width: 10%; } .list-roll__container .topic__list__info--column { width: 92%; } .list-roll__container .topic__list__item--expanded .topic__list__info--column { width: 90%; } /* Expand link color */ .list-roll__container .topic__list__info .btn--link { color: var(--aalas-gold-ada); } /* Card treatment for each list item */ .list-roll__container .topic__list__item { display: flex; align-items: center; padding: 0.75rem 0; border: 2px solid var(--aalas-white); margin-bottom: 1rem !important; box-shadow: 0 0 5px var(--aalas-shadow-soft); } .list-roll__container .topic__list__item.topic__list__item--expanded { align-items: flex-start; padding-top: 1.2rem; } /* Item title */ .list-roll__container .topic__list__title .h3 { font-size: 1.75rem; color: var(--aalas-green); } /* #endregion LIST ROLL */ /* #region REFLECTION PAGE ======================================= */ /* Remove Standard Heading */ .quiz__container.quiz__container--learner.quiz__container--survey .heading.heading--no-margin { display: none; } /* Banner — green gradient over a background image */ .di-reflection-heading { display: flex; gap: 20px; align-items: center; border-bottom: solid 6px var(--aalas-green-mid); padding: 18px 1.5rem; background: linear-gradient(to right, var(--aalas-green-overlay), var(--aalas-green-overlay), var(--aalas-green-overlay-fade)), url("https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/75c970fd-0d00-4d8a-b289-3f478a4e8018/yz0zxwkmrvj5-BackgroundExample_NoLogo.png"); justify-content: flex-start; background-position: right; background-repeat: no-repeat; background-size: cover; border-radius: 2px 2px 0 0; } .di-reflection-heading img { max-width: 60px; } .di-reflection-heading p { margin-bottom:0; } .di-reflection-heading h1 { margin-bottom: 0; font-size: 3rem; font-family: "Work Sans", sans-serif !Important; letter-spacing: -.5px; color: var(--aalas-white); text-transform: uppercase; font-weight: 300; } /* Body — gold rule separating the side-note column */ .di-reflection-body { padding: 1.25rem 0; display: flex; } .row.di-reflection-body .large-3.columns { border-left: solid 1px var(--aalas-gold); } .row.di-reflection-body .large-3.columns p { font-style: italic; margin-bottom: 0; font-size: 0.95rem; } /* Questions */ .di-reflection-question { font-weight: bold; font-size: 1.1rem; } ol.di-reflection-question, ul.di-reflection-question { padding-left: 1.5rem; } .di-reflection-question:last-child { margin-bottom: 0; } /* #endregion REFLECTION PAGE */ /* #region REMINDER HEADING ====================================== */ /* Green gradient header bar with a rotated diamond badge */ .di-header { position: relative; background: linear-gradient(90deg, var(--aalas-green-deep), var(--aalas-green)); padding: 20px 175px 20px 30px; display: flex; align-items: center; overflow: visible; } /* Header title — scales with the viewport */ .di-title { margin: 0; letter-spacing: .5px; font-size: clamp(18px, 2.4vw, 46px); line-height: 1.15; color: var(--aalas-white); font-family: "Work Sans", sans-serif !Important; text-transform: uppercase; } /* Diamond badge — square rotated 45°, contents counter-rotated */ .di-badge { position: absolute; right: 50px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 100px; height: 100px; background: var(--aalas-white); display: grid; place-items: center; border: solid 3px var(--aalas-green); box-shadow: 0 0 0 4px var(--aalas-white); } .di-badge-mark { display: block; font-weight: 700; font-size: clamp(42px, 5vw, 90px); line-height: 1; color: var(--aalas-green); transform: rotate(-45deg); font-family: "Work Sans", sans-serif ! Important; } /* Reminder body copy */ .di-body { margin: 30px 0 40px 0; padding: 0 20px; font-size: 1.05rem; } /* Matching gradient rule */ .di-rule { border: none; height: 3px; background: linear-gradient(90deg, var(--aalas-green-deep), var(--aalas-green)); } /* Small screens — shrink the badge */ @media (max-width: 640px) { .di-badge { width: 75px; height: 75px; } } /* #endregion REMINDER HEADING */ /* #region TABS ================================================== */ /* Tab strip — CSS-only tabs driven by hidden radio inputs */ .di-tabs { display: flex; position: relative; left: 0px; top: 0px; flex-flow: row wrap; padding: 0.5em 2em 0 0; font-size: 1em; line-height: initial; } .di-tabs .di-tab-container { float: left; } /* Tab labels */ .di-tabs label { font-size: 1em; line-height: inherit; position: relative; display: inline-block; padding: 0.75rem 1.25rem; box-sizing: content-box; min-width: 6.25em; text-align: center; margin-left: -2px !important; margin-top: -2px !important; margin-bottom: 0 !important; margin-right: 0 !important; cursor: pointer; color: var(--aalas-text-dark); background-color: var(--aalas-white); } /* Tab panels */ .di-tab-content-container { width: 100%; } .di-tabs .di-tab-content h3 { font-family: 'Mulish' !Important; font-size: 1.35rem !Important; } /* Panel — hidden until its radio is checked */ .di-tabs .di-tab-content { padding: 1rem 0.5rem; position: relative; display: none; margin-left: -2px; font-size: 1rem; border-bottom: solid 2px var(--aalas-green); } /* Visually hidden, NOT display:none — display:none drops the radios out of the tab order and the accessibility tree, making the tabs keyboard- unreachable and hiding panels 2-5 from screen readers (WCAG 2.1.1). */ .di-tabs input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The radio is invisible, so its focus has to show on the label */ .di-tabs #di-tab-selector-client-1:focus-visible~.di-tab-client-1, .di-tabs #di-tab-selector-client-2:focus-visible~.di-tab-client-2, .di-tabs #di-tab-selector-client-3:focus-visible~.di-tab-client-3, .di-tabs #di-tab-selector-client-4:focus-visible~.di-tab-client-4, .di-tabs #di-tab-selector-client-5:focus-visible~.di-tab-client-5 { outline: 3px solid var(--aalas-focus-ring); outline-offset: 2px; z-index: 5; } /* Rounded tab labels with a green border */ .di-tabs-client label { border-radius: 20px 20px 0 0; z-index: 3; font-size: 1.1rem; flex-grow: 1; flex-shrink: 0; width: min-content; } .di-tabs-client label { border: solid 2px var(--aalas-green); } /* Tabs 1-5 — show the matching panel and highlight the active label. To add a tab, copy one block and bump the number. */ /* Tab 1 */ .di-tabs #di-tab-selector-client-1:checked~.di-tab-content-container > .di-tab-client-1-content { display: block; } .di-tabs #di-tab-selector-client-1:checked~.di-tab-client-1 { z-index: 4; /* above the 3 on inactive labels, so the active tab overlaps its neighbours */ position: relative; left: 0px; top: 0px; cursor: initial; font-size: 1.1rem; } .di-tabs #di-tab-selector-client-1:checked~.di-tab-client-1 { background-color: var(--aalas-green); color: var(--aalas-white); } /* Tab 2 */ .di-tabs #di-tab-selector-client-2:checked~.di-tab-content-container > .di-tab-client-2-content { display: block; } .di-tabs #di-tab-selector-client-2:checked~.di-tab-client-2 { z-index: 4; /* above the 3 on inactive labels, so the active tab overlaps its neighbours */ position: relative; left: 0px; top: 0px; cursor: initial; font-size: 1.1rem; } .di-tabs #di-tab-selector-client-2:checked~.di-tab-client-2 { background-color: var(--aalas-green); color: var(--aalas-white); } /* Tab 3 */ .di-tabs #di-tab-selector-client-3:checked~.di-tab-content-container > .di-tab-client-3-content { display: block; } .di-tabs #di-tab-selector-client-3:checked~.di-tab-client-3 { z-index: 4; /* above the 3 on inactive labels, so the active tab overlaps its neighbours */ position: relative; left: 0px; top: 0px; cursor: initial; font-size: 1.1rem; } .di-tabs #di-tab-selector-client-3:checked~.di-tab-client-3 { background-color: var(--aalas-green); color: var(--aalas-white); } /* Tab 4 */ .di-tabs #di-tab-selector-client-4:checked~.di-tab-content-container > .di-tab-client-4-content { display: block; } .di-tabs #di-tab-selector-client-4:checked~.di-tab-client-4 { z-index: 4; /* above the 3 on inactive labels, so the active tab overlaps its neighbours */ position: relative; left: 0px; top: 0px; cursor: initial; font-size: 1.1rem; } .di-tabs #di-tab-selector-client-4:checked~.di-tab-client-4 { background-color: var(--aalas-green); color: var(--aalas-white); } /* Tab 5 */ .di-tabs #di-tab-selector-client-5:checked~.di-tab-content-container > .di-tab-client-5-content { display: block; } .di-tabs #di-tab-selector-client-5:checked~.di-tab-client-5 { z-index: 4; /* above the 3 on inactive labels, so the active tab overlaps its neighbours */ position: relative; left: 0px; top: 0px; cursor: initial; font-size: 1.1rem; } .di-tabs #di-tab-selector-client-5:checked~.di-tab-client-5 { background-color: var(--aalas-green); color: var(--aalas-white); } /* Narrow screens — stack the tabs */ @media only screen and (max-width: 200px) { .di-tabs-client { display: block; } } /* #endregion TABS */ /* #region FOLDED FLAG =========================================== */ /* Callout with a folded-ribbon title tab */ div.di-callout-folded-flag-main { display: block; } .di-callout-folded-flag { background-color: var(--aalas-bg-panel); padding: 1rem 1rem 0.75rem 0; margin-bottom: 1rem; display: flex; } /* Title ribbon — pulled left past the box edge */ .di-callout-folded-flag-title { font-size: 1.25rem; line-height: 1.25rem; font-weight: 600; letter-spacing: 1px; transform: translateX(-1rem) translateY(0); } .di-callout-folded-flag-title-text { white-space: nowrap; padding: 0.25rem 1.5rem 0.4rem 1.25rem; width: fit-content; } /* Ribbon color variants */ .di-callout-folded-flag-title-text.green { color: var(--aalas-white); background-color: var(--aalas-green); } .di-callout-folded-flag-title-text.gold { color: var(--aalas-white); background-color: var(--aalas-gold-ada); } /* Triangular fold under the ribbon — darker shade of the ribbon color */ .di-callout-folded-flag-title-doodad { height: 0.5rem; width: 1rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0) } .di-callout-folded-flag-title-doodad.green { background: color-mix(in srgb, var(--aalas-green) 40%, black); } .di-callout-folded-flag-title-doodad.gold { background: color-mix(in srgb, var(--aalas-gold-ada) 40%, black); } /* Callout body */ .di-callout-folded-flag-content { color: var(--aalas-text-mid); line-height: 1.5rem; font-size: 1.1rem; display: flex; } div.di-callout-folded-flag-content-content-below { margin-left: 1.5rem; } /* #endregion FOLDED FLAG */ /* #region SITE HEADER & NAV ===================================== */ /* AALAS Academy header + nav restyle (v4). Targets TI's own microsite header classes, so none of these selectors are ours. Applies to every microsite page that renders .header--microsite, not the homepage alone. */ .header--microsite nav.top-bar { border-top: none; } /* Top row layout: logo + Manager Access/Cart share one flex row, nav.top-bar wraps to its own full-width row below */ .header--microsite .header__inner { display: flex; flex-wrap: wrap; align-items: center; /* Extra top space to balance against the gap below the logo row. Note: header.header's own padding-top is being held at 16px by something else on the page (likely a JS-driven layout routine), so this padding lives here on header__inner instead, where it isn't fought over. Total gap above the logo = header's 16px + this 8px = 24px, matching the 24px gap below (nav.top-bar's margin-top). */ padding-top: 8px; } .header--microsite .company-logo__container { order: 1; /* Alignment now comes from --di-gutter; see FLUSH-WIDTH WIDGETS */ margin-left: 0; } .header--microsite .company-logo__container img { width: 205px; height: auto; max-width: 100%; } .header--microsite nav.nav--top { order: 2; float: none; margin-left: auto; } .header--microsite nav.nav--top ul { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } /* Top-right row: Manager Access (Sign In) + Cart */ .header--microsite nav.nav--top li a, .header--microsite nav.nav--top #cart-button { text-transform: none; font-size: 14px; font-weight: 400; } .header--microsite nav.nav--top li a[href="/learn/manager"] { display: inline-block; padding: 8px 20px; border: 1px solid var(--aalas-green); border-radius: 4px; color: var(--aalas-green-darkest); background-color: transparent; } .header--microsite nav.nav--top li a[href="/learn/manager"]:hover { background-color: color-mix(in srgb, var(--aalas-green) 6%, transparent); } .header--microsite nav.nav--top #cart-button { color: var(--aalas-green-darkest); border: none; background: none; padding: 0; margin: 0; } /* Main nav bar: Home / Full Catalog / Memberships / Support */ .header--microsite nav.top-bar, .header--microsite nav.top-bar .top-bar-section, .header--microsite nav.top-bar .top-bar-section ul.left, .header--microsite nav.top-bar .top-bar-section ul.left li { background-color: var(--aalas-green); } /* Link text lands on the gutter; the 20px is the link's own side padding. The hover box starts left of the text, which is expected. */ .header--microsite nav.top-bar .top-bar-section ul.left { padding-left: calc(var(--di-gutter, 56px) - 20px); } .header--microsite nav.top-bar .top-bar-section ul.left li a { padding: 20px 20px; color: var(--aalas-white); background-color: transparent; } /* Desktop only. Applied at every width these forced the mobile hamburger menu to render expanded instead of collapsing. */ /* The links carry 20px padding, so they are taller than Foundation's fixed 45px bar. Without height:auto the bar's green stops short and the list's green hangs below it — the stepped edge. But height:auto also defeats the mobile collapse, so it is scoped to TI's own top-bar breakpoint. Measured on the live site: at 768px the header still shows the hamburger, at 769px it does not — so desktop starts at 769. */ @media (min-width: 769px) { .header--microsite nav.top-bar, .header--microsite nav.top-bar .top-bar-section, .header--microsite nav.top-bar .top-bar-section ul.left, .header--microsite nav.top-bar .top-bar-section ul.left li { height: auto; } .header--microsite nav.top-bar .top-bar-section ul.left li a { display: flex; align-items: center; height: auto; line-height: normal; } } .header--microsite nav.top-bar .top-bar-section ul.left li a:hover { background-color: var(--aalas-green-soft); color: var(--aalas-white); } /* Was :focus sharing the hover background — 1.46:1 against the bar, which no one can see. White on the green bar is 8.5:1; the inset offset keeps the ring inside the bar so it is not clipped. */ .header--microsite nav.top-bar .top-bar-section ul.left li a:focus-visible { background-color: var(--aalas-green-soft); color: var(--aalas-white); outline: 3px solid var(--aalas-white); outline-offset: -3px; } /* Hamburger toggle — label and bars reversed out on the green bar */ .top-bar .toggle-topbar button { color: var(--aalas-white); } .top-bar .toggle-topbar.menu-icon button span:after { -webkit-box-shadow: 0 0 0 1px var(--aalas-white), 0 7px 0 1px var(--aalas-white), 0 14px 0 1px var(--aalas-white); box-shadow: 0 0 0 1px var(--aalas-white), 0 7px 0 1px var(--aalas-white), 0 14px 0 1px var(--aalas-white); } /* Balance the space above/below the hero heading (was 0 top / 21px bottom) */ /* .editor-content h1 { margin-top: 21px; } */ /* Smaller screens */ @media (max-width: 640px) { .header--microsite .company-logo__container img { width: 150px; } .header--microsite nav.nav--top ul { gap: 20px; } .header--microsite nav.top-bar .top-bar-section ul.left { padding-left: calc(var(--di-gutter, 24px) - 14px); } .header--microsite nav.top-bar .top-bar-section ul.left li a { padding: 16px 14px; } } /* #endregion SITE HEADER & NAV */ /* #region SITE FOOTER =========================================== */ /* TI's own .footer classes, restyled. No markup changes. Site-wide. */ /* Side padding comes from --di-gutter; see FLUSH-WIDTH WIDGETS */ .footer { margin-top: 3rem; margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; background-color: var(--aalas-green); color: var(--aalas-green-contrast); font-family: var(--aalas-font); } /* Flex replaces TI's floats so the two blocks centre and stack cleanly */ .footer .footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; width: 100%; max-width: 100%; margin: 0 auto; padding: 2rem 0; border-top: 0; font-size: 0.875rem; line-height: 1.45; } /* TI's clearfix would otherwise count as a flex item */ .footer .footer__inner::after { display: none; } .footer .footer__company__info, .footer .footer__links { float: none; margin: 0; padding: 0; color: inherit; font-size: inherit; line-height: inherit; } /* Powered By runs inline with the copyright — drops TI's divider and 12px */ .footer .footer__powered-by { display: inline; margin: 0; padding: 0; border-left: 0; font-size: inherit; line-height: inherit; } .footer .footer__links .link { display: inline; padding-right: 0; font-size: inherit; line-height: inherit; } .footer .footer__links strong { font-weight: 400; } /* Same white in every state; hover changes only the cursor */ .footer .footer__inner a, .footer .footer__inner a:link, .footer .footer__inner a:visited, .footer .footer__inner a:hover, .footer .footer__inner a:focus, .footer .footer__inner a:active { color: var(--aalas-green-contrast); background-color: transparent; text-decoration: none; outline: none; box-shadow: none; } .footer .footer__inner a:hover { cursor: pointer; } /* Keyboard focus stays visible (WCAG 2.4.7); mouse clicks do not trigger it */ .footer .footer__inner a:focus-visible { outline: 2px solid var(--aalas-green-contrast); outline-offset: 3px; border-radius: 2px; } /* #endregion SITE FOOTER */ /* #region HOMEPAGE ============================================== */ /* AALAS homepage widgets */ /* #region HOMEPAGE SNIPPETS =================================== */ /* Layout — text left, pig panel right */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); /* 1fr spacers centre the text block against the pig */ grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--aalas-hero-gap); row-gap: 0; font-family: var(--aalas-font) !important; } /* Eyebrow sits outside __content so the pill can top-align with the headline */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero > h1 { grid-column: 1; grid-row: 2; align-self: end; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero > h2 { grid-column: 1; grid-row: 3; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__content { grid-column: 1; grid-row: 4; align-self: start; min-width: 0; } /* Columns pinned so DOM order does not decide placement */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__media { grid-column: 2; grid-row: 1 / 6; } /* Eyebrow — gold rule then small caps */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero > h1 { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 1.25rem; font-family: var(--aalas-font) !important; font-size: 0.8125rem; font-weight: 600; letter-spacing: 1.5px; line-height: 1.3; text-transform: uppercase; color: var(--aalas-hero-eyebrow); } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero > h1::before { content: ""; flex-shrink: 0; width: 2.5rem; height: 2px; /* centres on line one, not the whole block */ margin-top: calc((1.3em - 2px) / 2); background: var(--aalas-hero-eyebrow); } /* Headline */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero > h2 { margin: 0 0 1.5rem; font-family: var(--aalas-font) !important; /* vw, not cqw — TI rejects container queries */ font-size: clamp(1.75rem, 3.8vw, 3.25rem); font-weight: 700; letter-spacing: -0.5px; line-height: 1.12; color: var(--aalas-ink); } /* Body copy */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__content p { max-width: var(--aalas-hero-measure); margin: 0 0 2rem; font-size: 1.0625rem; line-height: 1.65; color: var(--aalas-body); } /* Flatten TI's
wrapper so the button's margins pass through */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__content p:has(> .btn) { margin: 0; } /* Zero the margin on whatever precedes the button, wrapped or not */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__content p:has(+ p > .btn), .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__content p:has(+ .btn) { margin-bottom: 0; } /* Media column — the green panel and its rounded corners are baked into the PNG */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__media { position: relative; align-self: stretch; display: flex; align-items: flex-end; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__image { position: relative; z-index: 1; display: block; width: 100%; height: auto; } /* Stat card — floats over the panel's lower-left corner */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat { position: absolute; z-index: 2; left: 0; bottom: 2.5rem; transform: translateX(-25%); display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1.25rem; background: var(--aalas-white); border-radius: var(--aalas-hero-card-radius); box-shadow: var(--aalas-hero-card-shadow); } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat-icon { flex-shrink: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--aalas-green-tint); } /* Icon is masked, so its color comes from background-color */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat-icon::before { content: ""; width: 1.4rem; height: 1.4rem; background-color: var(--aalas-green); -webkit-mask: var(--aalas-icon-graduation-cap) center / contain no-repeat; mask: var(--aalas-icon-graduation-cap) center / contain no-repeat; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat-number { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.2; color: var(--aalas-ink); } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat-label { display: block; font-size: 0.875rem; line-height: 1.3; color: var(--aalas-muted); } /* Widget is pinned at 928px here, so pin the headline too */ @media (min-width: 1024px) and (max-width: 1440px) { .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero > h2 { font-size: 2.5rem; } } /* Narrow — everything stacks. Viewport, not container queries */ @media (max-width: 1023px) { /* Everything stacks in source order: eyebrow, headline, image, copy. */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero { display: block; } /* Headline runs the full width here, so it can be bigger again */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero > h2 { /* Widget pinned at 673px here — cap the size */ font-size: clamp(2rem, 5vw, 2.5rem); margin-bottom: 1.75rem; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__media { display: block; margin: 0 0 1.75rem; } /* Pill sits inside the image's lower-left rather than hanging off it */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat { left: 1.5rem; bottom: 1.5rem; transform: none; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__content p { max-width: none; } } /* Below 769 the widget stops being pinned and scales down — trim the pill */ @media (max-width: 768px) { .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat { gap: 0.625rem; padding: 0.75rem 0.875rem; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat-icon { width: 2rem; height: 2rem; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat-icon::before { width: 1.15rem; height: 1.15rem; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat-number { font-size: 1rem; } .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .aalas-hero__stat-label { font-size: 0.8125rem; } } /* #region SECTION TITLE ===================================== */ /* Section heading — add another widget by appending its selector */ .widget--one-column.widget--one-column_standard.aalas.homepage.most-popular-title h2, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas h2, .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe h2 { margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--aalas-green); font-family: var(--aalas-font) !important; color: var(--aalas-text-dark); } /* #endregion SECTION TITLE */ /* #region MOST POPULAR ====================================== */ /* TI's own catalog-grid markup, restyled. Title h2 is in SECTION TITLE. */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular { padding-top: 0; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item { border: 0; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__asset { border: solid 1px var(--aalas-cert-border); border-radius: 5px; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__body { padding: 0; padding-top: 18px; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__title { font-weight: 700; font-size: 1.2rem; font-family: var(--aalas-font) !important; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__source { text-transform: uppercase; color: var(--aalas-gold-ada); font-weight: 500; margin-bottom: 10px; font-family: var(--aalas-font) !important; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__source > strong { font-weight: 500; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__hr { display: none; } /* The one gap that keeps the button off the copy, at every width */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__description { margin-bottom: 1.25rem; } /* "Completed" badge on cards the learner has already finished */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__completed-container { border-radius: 5px; background: var(--aalas-white-scrim); } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__completed i { background: var(--aalas-gold-ada); color: var(--aalas-white); } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__completed p { margin-bottom: 4px; padding-top: 5px; font-family: var(--aalas-font) !important; font-size: 0.85rem; font-weight: 500; text-transform: uppercase; color: var(--aalas-ink); } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .btn--primary { background-color: var(--aalas-green) !important; /* full shorthand — border-color alone has no width or style to paint, so the hover state had nothing to fall back to and read as a link */ border: 1.5px solid var(--aalas-green) !important; color: var(--aalas-green-contrast) !important; font-family: var(--aalas-font) !important; font-weight: 500; width: 100%; text-align: center; border-radius: 5px; padding: 1em !important; float: left; max-width: 225px; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* Second content line is the alt-text syntax: the arrow is decorative, so "" keeps screen readers from announcing it. Browsers without the slash syntax ignore that line and keep the first. Both are needed. */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__cta-container .btn::after { content: " \2192"; content: " \2192" / ""; font-weight: 500; } /* Standard hover — the fill knocks out to white */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .btn--primary:hover, .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .btn--primary:focus-visible { background-color: var(--aalas-white) !important; border-color: var(--aalas-green) !important; color: var(--aalas-green) !important; cursor: pointer; } /* Keyboard focus (ADA) */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .btn--primary:focus-visible { outline: 3px solid var(--aalas-focus-ring); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .btn--primary { transition: none; } } /* Equal-height card rows + a divider between them. Desktop only — below this TI's own float layout stands. */ @media only screen and (min-width: 48.0625em) { /* Grid replaces TI's floats so a row's cards share a bottom edge. TI's own gutters are untouched. */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .featured-content-block-grid { display: grid; grid-template-columns: repeat(3, 1fr); } /* TI's clearfix pseudos would become stray grid items */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .featured-content-block-grid::before, .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .featured-content-block-grid::after { display: none; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .featured-content-block-grid > li { float: none; width: auto; display: flex; } /* Flex chain down to the body, so the CTA can sit on the card floor */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .featured-content-block-grid > li > .catalog-item { width: 100%; display: flex; flex-direction: column; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-item > .catalog-grid-item { flex: 1; display: flex; flex-direction: column; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item > .row { flex: 1; display: flex; flex-direction: column; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item > .row::before, .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item > .row::after { display: none; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item > .row > .column:has(> .catalog-grid-item__body) { flex: 1; display: flex; flex-direction: column; } .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__body { flex: 1; display: flex; flex-direction: column; } /* margin-top:auto adds the slack on shorter cards; on the tallest it resolves to 0 and the description's own margin is the gap. */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .catalog-grid-item__cta-container { margin-top: auto; } /* Divider between the two card rows — the ul's ::after placed as a full-width grid item on row 2, so the dashes run as one line flush with the card edges. nth-of-type because TI's script tags are also children of the ul. */ .widget--featured-content.widget--featured-content_standard.aalas.homepage.most-popular .featured-content-block-grid:has(> li:nth-of-type(4))::after { content: ""; display: block; grid-column: 1 / -1; grid-row: 2; height: 2px; margin: 1.5rem 10px 2.75rem; background-image: repeating-linear-gradient( to right, var(--aalas-rule) 0, var(--aalas-rule) 6px, transparent 6px, transparent 11px ); } } /* #endregion MOST POPULAR */ /* #region LEARNING AREAS ==================================== */ /* Row list — no hover, focus or visited treatment by design */ .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row { display: flex; align-items: center; gap: 1.25rem; padding: 2rem 0; border-bottom: 2px dashed var(--aalas-rule); text-decoration: none; } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:last-child { border-bottom: 0; } /* All states pinned to the same values */ .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:link, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:visited, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:hover, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:focus, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:active { color: inherit; text-decoration: none; } /* Masked icon — colour from background-color, art from --aalas-areas-icon */ .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; background-color: var(--aalas-gold-ada); -webkit-mask: var(--aalas-areas-icon) center / contain no-repeat; mask: var(--aalas-areas-icon) center / contain no-repeat; } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__icon--heart { --aalas-areas-icon: var(--aalas-icon-heart); } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__icon--shield-check { --aalas-areas-icon: var(--aalas-icon-shield-check); } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__icon--beaker { --aalas-areas-icon: var(--aalas-icon-beaker); } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__icon--scale { --aalas-areas-icon: var(--aalas-icon-scale); } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__icon--dna { --aalas-areas-icon: var(--aalas-icon-dna); } /* Title — a paragraph, not a heading */ .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__title, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:hover .aalas-areas__title, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:focus .aalas-areas__title, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:visited .aalas-areas__title { margin: 0; font-family: var(--aalas-font) !important; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--aalas-green); } /* Supporting copy — pushed right, sits just left of the arrow */ .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__desc, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:hover .aalas-areas__desc, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:focus .aalas-areas__desc, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:visited .aalas-areas__desc { margin: 0 0 0 auto; padding-left: 1.5rem; font-family: var(--aalas-font) !important; font-size: 0.875rem; line-height: 1.4; text-align: right; color: var(--aalas-muted); } /* Arrow — a text character, not an icon */ .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__arrow, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:hover .aalas-areas__arrow, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:focus .aalas-areas__arrow, .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row:visited .aalas-areas__arrow { flex-shrink: 0; margin-left: 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--aalas-gold-ada); align-self: flex-start; } /* Narrow — grid, not wrapping flex, which would push the arrow to its own line */ @media (max-width: 640px) { .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1rem; row-gap: 0.5rem; padding: 1.5rem 0; } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__icon { grid-column: 1; grid-row: 1; } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__title { grid-column: 2 / 4; grid-row: 1; } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__desc { grid-column: 2; grid-row: 2; margin: 0; padding-left: 0; text-align: left; } .widget--one-column.widget--one-column_standard.aalas.homepage.learning-areas .aalas-areas__arrow { grid-column: 3; grid-row: 2; margin-left: 0; justify-self: end; } } /* #endregion LEARNING AREAS */ /* #region CERTIFICATION CARDS =============================== */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications { background: var(--aalas-rule); margin-bottom: 2rem; margin-left: calc(-1 * var(--di-gutter, 16px)); margin-right: calc(-1 * var(--di-gutter, 16px)); width: auto; min-width: 0; max-width: none; padding: 0 var(--di-gutter) 3.75rem; } /* Title band */ .widget--one-column.widget--one-column_standard.aalas.homepage.certifications-title { background: var(--aalas-rule); margin-left: calc(-1 * var(--di-gutter, 16px)); margin-right: calc(-1 * var(--di-gutter, 16px)); width: auto; min-width: 0; max-width: none; padding-top: 3.5rem; padding-left: var(--di-gutter, 24px); padding-right: var(--di-gutter, 24px); margin-bottom: 0; } /* Shared by both title widgets — append a selector to add another */ .widget--one-column.widget--one-column_standard.aalas.homepage.certifications-title h2, .widget--one-column.widget--one-column_standard.aalas.homepage.become-member-title h2 { font-family: var(--aalas-font) !important; color: var(--aalas-text-dark); text-align: center; } /* Fixed measure, not a percentage — the two widgets are different widths */ .widget--one-column.widget--one-column_standard.aalas.homepage.certifications-title p, .widget--one-column.widget--one-column_standard.aalas.homepage.become-member-title p { max-width: 36em; margin-inline: auto; text-align: center; } /* Flex chain so the three cards match height across separate column editors */ /* Foundation's clearfix pseudo-elements would count as flex items */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .row::before, .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .row::after, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .row::before, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .row::after { display: none; } .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .row, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .row { display: flex; flex-wrap: wrap; align-items: stretch; } .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .row > .columns, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .row > .columns { display: flex; flex-direction: column; float: none; } .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .row > .columns > .editor-content, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .row > .columns > .editor-content { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; } /* The card. position:relative anchors the stretched link below. */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; padding: 2.75rem 2rem; /* No side/bottom border — a 1px side meeting the 6px top miters into a taper at the corners. Same treatment as the course detail card. */ border: 0; border-top: var(--aalas-cert-accent-size) solid var(--aalas-cert-accent); border-radius: var(--aalas-cert-radius); background: var(--aalas-white); box-shadow: var(--aalas-cert-shadow); font-family: var(--aalas-font) !important; text-align: center; transition: transform 0.25s ease; } .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert:hover { transform: scale(var(--aalas-cert-hover-scale)); } /* The movement is the whole effect, so it goes too, not just its timing */ @media (prefers-reduced-motion: reduce) { .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert, .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert:hover { transition: none; transform: none; } } /* Credential variants — each sets only the accent colour */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert--alat { --aalas-cert-accent: var(--aalas-cert-alat); } .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert--lat { --aalas-cert-accent: var(--aalas-cert-lat); } .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert--latg { --aalas-cert-accent: var(--aalas-cert-latg); } /* Logo — the
is TI's own image wrapper */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__logo { margin: 0 0 2rem; } .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__logo img { display: inline-block; width: auto; max-width: 100%; /* height, not width — the logos are different proportions */ height: 80px; } /* Title — a paragraph, not a heading, so it inherits nothing unexpected */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__title { margin: 0 0 1.25rem; font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--aalas-ink); } .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__desc { margin: 0 0 2rem; font-size: 1rem; line-height: 1.7; color: var(--aalas-muted); } /* margin-top:auto pins the CTA to the card floor */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__cta { margin: auto 0 0; } /* All states pinned to the same values */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__link, .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__link:link, .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__link:visited, .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__link:hover, .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__link:focus, .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__link:active { font-size: 1.125rem; font-weight: 500; line-height: 1.3; color: var(--aalas-green); text-decoration: none; } /* Whole card is the click target. The overlay belongs to the existing anchor, so no second link is added and the markup is unchanged. */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__link::after { content: ""; position: absolute; inset: 0; } /* Keyboard focus (ADA) — the only state that shows, and it has to */ .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert__link:focus-visible { outline: 3px solid var(--aalas-focus-ring); outline-offset: 3px; border-radius: 2px; } /* 40em, not 40.0625em — both queries match at exactly 641px */ @media (max-width: 40em) { .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .aalas-cert { margin-bottom: 1.5rem; } .widget--three-column.widget--three-column_standard.aalas.homepage.certifications .row > .columns:last-child .aalas-cert { margin-bottom: 0; } } /* #endregion CERTIFICATION CARDS */ /* #region MAKES DIFFERENT =================================== */ /* Full-bleed wash band, same colour as the search bar */ .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different { background: var(--aalas-green-wash); margin-bottom: 2rem; margin-left: calc(-1 * var(--di-gutter, 56px)); margin-right: calc(-1 * var(--di-gutter, 56px)); width: auto; min-width: 0; max-width: none; padding: 4.5rem var(--di-gutter, 56px); } .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: center; font-family: var(--aalas-font) !important; } .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different__stat { text-align: center; } .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different__figure { margin: 0 0 0.875rem; font-size: clamp(4rem, 9vw, 7.5rem); font-weight: 500; line-height: 1; letter-spacing: -2px; color: var(--aalas-text-dark); } /* Masked icon, so the stroke weight is set by the SVG not the font */ .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different__plus { display: inline-block; width: 0.55em; height: 0.55em; vertical-align: 0.08em; background-color: var(--aalas-gold); -webkit-mask: var(--aalas-icon-plus) center / contain no-repeat; mask: var(--aalas-icon-plus) center / contain no-repeat; } .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different__label { margin: 0; font-size: 0.9375rem; letter-spacing: 1px; line-height: 1.3; text-transform: uppercase; color: var(--aalas-muted); } .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different__content p { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.7; color: var(--aalas-body); } .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different__content p:last-child { margin-bottom: 0; } /* Eyebrow — gold rule, green text, intentionally mismatched */ .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different__content p.aalas-different__eyebrow { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 1.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 1.5px; line-height: 1.3; text-transform: uppercase; color: var(--aalas-green); } .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different__eyebrow::before { content: ""; flex-shrink: 0; width: 2.5rem; height: 2px; /* centres on line one, not the whole block */ margin-top: calc((1.3em - 2px) / 2); background: var(--aalas-gold-ada); } .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different__content h2 { margin: 0 0 1.5rem; font-family: var(--aalas-font) !important; font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; color: var(--aalas-green-darkest); } /* Stack — stat above the copy */ @media (max-width: 40em) { .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different { padding-top: 3rem; padding-bottom: 3rem; } .widget--one-column.widget--one-column_standard.aalas.homepage.makes-different .aalas-different { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; } } /* #endregion MAKES DIFFERENT */ /* #region BECOME MEMBER ===================================== */ /* Title h2 + p and the equal-height flex chain live in CERTIFICATION CARDS above */ /* The card. --featured is the middle one; every other rule keys off these three vars. */ .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan { --aalas-plan-border: var(--aalas-cert-border); --aalas-plan-badge-bg: var(--aalas-bg-panel); --aalas-plan-badge-fg: var(--aalas-text-label); display: flex; flex-direction: column; flex: 1 1 auto; padding: 2.5rem 2.25rem; border: 1px solid var(--aalas-plan-border); border-radius: var(--aalas-cert-radius); background: var(--aalas-white); font-family: var(--aalas-font) !important; } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan--featured { --aalas-plan-border: var(--aalas-green-border); --aalas-plan-badge-bg: var(--aalas-green); --aalas-plan-badge-fg: var(--aalas-green-contrast); box-shadow: var(--aalas-cert-shadow); } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__badge { align-self: flex-start; margin: 0 0 2rem; padding: 0.5rem 1.25rem; border-radius: 999px; background: var(--aalas-plan-badge-bg); color: var(--aalas-plan-badge-fg); font-size: 0.8125rem; font-weight: 500; letter-spacing: 1px; line-height: 1.2; text-transform: uppercase; } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__name { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--aalas-ink); } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__price { margin: 0 0 1.5rem; font-size: 2.75rem; font-weight: 500; line-height: 1.1; letter-spacing: -1px; color: var(--aalas-green); } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__term { font-size: 1.125rem; font-weight: 400; letter-spacing: 0; color: var(--aalas-muted); } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__desc { margin: 0 0 2rem; font-size: 1rem; line-height: 1.7; color: var(--aalas-muted); } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__features { margin: 0 0 2rem; padding: 0; list-style: none; } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__features li { position: relative; margin-bottom: 1rem; padding-left: 2rem; font-size: 1rem; line-height: 1.5; color: var(--aalas-text-dark); } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__features li:last-child { margin-bottom: 0; } /* Masked icon — colour comes from background-color */ .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__features li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.25rem; height: 1.25rem; background-color: var(--aalas-green); -webkit-mask: var(--aalas-icon-check) center / contain no-repeat; mask: var(--aalas-icon-check) center / contain no-repeat; } /* margin-top:auto pins the button to the card floor */ .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__cta { margin: auto 0 0; } /* Sits on TI's .btn — colour and box are forced past TI's own button rules */ .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__button, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__button:link, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__button:visited { /* flex + min-height so a wrapped label still matches a one-line one */ display: flex; align-items: center; justify-content: center; min-height: 3.5rem; margin: 0; padding: 0.75rem 1.5rem; border: 1px solid var(--aalas-plan-border) !important; border-radius: 5px; background: transparent !important; color: var(--aalas-green) !important; font-family: var(--aalas-font) !important; font-size: 1rem; font-weight: 500; line-height: 1.2; text-align: center; text-transform: none; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan--featured .aalas-plan__button, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan--featured .aalas-plan__button:link, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan--featured .aalas-plan__button:visited { background: var(--aalas-green) !important; color: var(--aalas-green-contrast) !important; } /* Hover inverts, same as the hero button: outline fills, filled knocks out */ .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__button:hover, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__button:focus-visible { border-color: var(--aalas-green) !important; background: var(--aalas-green) !important; color: var(--aalas-green-contrast) !important; text-decoration: none; cursor: pointer; } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan--featured .aalas-plan__button:hover, .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan--featured .aalas-plan__button:focus-visible { background: var(--aalas-white) !important; color: var(--aalas-green) !important; } @media (prefers-reduced-motion: reduce) { .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__button { transition: none; } } /* Keyboard focus (ADA) */ .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan__button:focus-visible { outline: 3px solid var(--aalas-focus-ring); outline-offset: 3px; } /* Stacked — same gap treatment as the certification cards */ @media (max-width: 40em) { .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .aalas-plan { margin-bottom: 1.5rem; } .widget--three-column.widget--three-column_standard.aalas.homepage.become-member .row > .columns:last-child .aalas-plan { margin-bottom: 0; } } /* #endregion BECOME MEMBER */ /* #region TESTIMONIALS ====================================== */ /* Auto-rotating with pure CSS: every slide runs the same 21s keyframe, staggered 7s apart, so exactly one is visible at a time. No JS. */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials { background: var(--aalas-green-darkest); margin-bottom: 2rem; margin-left: calc(-1 * var(--di-gutter, 56px)); margin-right: calc(-1 * var(--di-gutter, 56px)); width: auto; min-width: 0; max-width: none; padding: 5rem var(--di-gutter, 56px) 4rem; font-family: var(--aalas-font) !important; text-align: center; } /* Static — outside the rotation */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials h2 { font-family: var(--aalas-font) !important; color: var(--aalas-green-contrast); text-align: center; font-size: 2rem; font-weight: 600; } /* Static — masked icon, colour from background-color */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__mark { width: 2.375rem; height: 2.375rem; margin: 2rem auto 1.5rem; background-color: var(--aalas-gold); -webkit-mask: var(--aalas-icon-quote) center / contain no-repeat; mask: var(--aalas-icon-quote) center / contain no-repeat; } /* All slides share one grid cell, so the stage is as tall as the tallest */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__stage { display: grid; max-width: 58em; margin: 0 auto 2rem; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; opacity: 0; animation: aalas-testimonial-fade 21s infinite; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial:nth-child(2) { animation-delay: 7s; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial:nth-child(3) { animation-delay: 14s; } /* Long quotes get --md or --sm on the
so all three end up a similar height; 0.85rem is the floor. */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__quote { margin: 0 0 1.5rem; font-size: clamp(1.125rem, 2.2vw, 1.5rem) !important; font-weight: 400 !important; line-height: 1.5; color: var(--aalas-green-contrast); } /* !important here too, or the base rule above would win */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__quote--md { font-size: clamp(1rem, 1.8vw, 1.25rem) !important; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__quote--sm { font-size: clamp(0.85rem, 1.5vw, 1.0625rem) !important; } /* gold-bright, not gold — 7.4:1 on this band against gold's 5.0:1 */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__name { margin: 0 0 0.375rem; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--aalas-gold-bright); } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__role { margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.3; color: var(--aalas-green-contrast-muted); } /* Static — indicators only, driven by the same 21s clock */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__dots { display: flex; justify-content: center; align-items: center; gap: 0.625rem; margin: 0; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; background-color: var(--aalas-green-soft); animation: aalas-testimonial-dot 21s infinite; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__dot:nth-child(2) { animation-delay: 7s; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__dot:nth-child(3) { animation-delay: 14s; } /* The only pause (WCAG 2.2.2). A checkbox, not a button, so the state is announced and the whole thing works without JavaScript. Hover does NOT pause — an invisible state change reads as a stuck carousel. */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials:has(.aalas-testimonial__pause-input:checked) .aalas-testimonial, .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials:has(.aalas-testimonial__pause-input:checked) .aalas-testimonial__dot { animation-play-state: paused; } /* Hidden but focusable — see the tabs note; display:none would drop it out of the tab order and defeat the point. */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause { --aalas-pause-icon: var(--aalas-icon-pause); display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 1.5rem 0 0; padding: 0; border: 1px solid var(--aalas-green-contrast-muted); border-radius: 999px; background: transparent; cursor: pointer; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials:has(.aalas-testimonial__pause-input:checked) .aalas-testimonial__pause { --aalas-pause-icon: var(--aalas-icon-play); } /* Masked, so the glyph colour comes from background-color */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause::before { content: ""; width: 1.125rem; height: 1.125rem; background-color: var(--aalas-green-contrast); -webkit-mask: var(--aalas-pause-icon) center / contain no-repeat; mask: var(--aalas-pause-icon) center / contain no-repeat; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause:hover { border-color: var(--aalas-green-contrast); } /* Ring shows on the label, since the checkbox itself is invisible */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause-input:focus-visible + .aalas-testimonial__pause { outline: 3px solid var(--aalas-focus-ring-dark); outline-offset: 3px; } /* Off-screen but read aloud — this is the button's accessible name, and it tracks the state. display:none keeps the inactive word out of it. */ .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause-on, .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause-off { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause-off { display: none; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials:has(.aalas-testimonial__pause-input:checked) .aalas-testimonial__pause-on { display: none; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials:has(.aalas-testimonial__pause-input:checked) .aalas-testimonial__pause-off { display: inline; } @keyframes aalas-testimonial-fade { 0% { opacity: 0; } 2% { opacity: 1; } 31% { opacity: 1; } 33.334% { opacity: 0; } 100% { opacity: 0; } } @keyframes aalas-testimonial-dot { 0% { width: 2.25rem; background-color: var(--aalas-gold); } 31% { width: 2.25rem; background-color: var(--aalas-gold); } 33.334% { width: 0.625rem; background-color: var(--aalas-green-soft); } 97% { width: 0.625rem; background-color: var(--aalas-green-soft); } 100% { width: 2.25rem; background-color: var(--aalas-gold); } } /* No motion — show all three stacked and drop the indicators */ @media (prefers-reduced-motion: reduce) { .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__stage { display: block; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial { opacity: 1; animation: none; margin-bottom: 3rem; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial:last-child { margin-bottom: 0; } .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__dots, .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause, .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials .aalas-testimonial__pause-input { display: none; } } /* Same 5:4 ratio as desktop — even padding reads bottom-heavy here */ @media (max-width: 40em) { .widget--one-column.widget--one-column_standard.aalas.homepage.testimonials { padding-top: 3.75rem; padding-bottom: 3rem; } } /* #endregion TESTIMONIALS */ /* #region SUBSCRIBE ======================================== */ /* Heading and its green rule come from SECTION TITLE above */ .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; font-family: var(--aalas-font) !important; } .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__copy { flex: 1 1 34%; max-width: 26em; margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--aalas-body); } .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__form { display: flex; flex: 1 1 60%; max-width: 40rem; gap: 0.75rem; margin: 0; } /* A placeholder is not a label (WCAG 3.3.2) — this one is read, not seen */ .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Matches the search bar's field, the other form control on this page */ .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__input { flex: 1 1 auto; min-width: 0; width: auto; height: 3rem; box-sizing: border-box; margin: 0; padding: 0 1.25rem; border: 1px solid var(--aalas-border-field); border-radius: 5px; box-shadow: none; background-color: var(--aalas-white); font-family: var(--aalas-font); font-size: 1rem; color: var(--aalas-ink); } .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__input::placeholder { color: var(--aalas-muted); opacity: 1; } .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__input:focus, .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__input:focus-visible { border-color: var(--aalas-green); outline: 3px solid var(--aalas-focus-ring); outline-offset: 2px; } /* Sits on TI's .btn. Mockup shows a pill; standard 5px used instead. */ .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__button { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 3rem; margin: 0; padding: 0 2rem; border: 1.5px solid var(--aalas-green) !important; border-radius: 5px; background: var(--aalas-green) !important; color: var(--aalas-green-contrast) !important; font-family: var(--aalas-font) !important; font-size: 1rem; font-weight: 600; line-height: 1; text-transform: none; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* Standard hover — the fill knocks out to white */ .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__button:hover, .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__button:focus-visible { border-color: var(--aalas-green) !important; background: var(--aalas-white) !important; color: var(--aalas-green) !important; cursor: pointer; } .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__button:focus-visible { outline: 3px solid var(--aalas-focus-ring); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__button { transition: none; } } /* Percentage bases never overflow, so the stack is explicit. 1023px matches the hero's breakpoint. */ @media (max-width: 1023px) { .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__copy { flex: 1 1 100%; max-width: 34em; } .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__form { flex: 1 1 100%; } } /* Stacked — field and button each take the full width */ @media (max-width: 40em) { .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__form { flex-wrap: wrap; max-width: none; } .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__input, .widget--one-column.widget--one-column_standard.aalas.homepage.subscribe .aalas-subscribe__button { flex: 1 1 100%; width: 100%; } } /* #endregion SUBSCRIBE */ /* #region SEARCH BAR ======================================== */ /* AALAS Academy search bar restyle */ .widget--searchbar.widget--searchbar_standard.aalas.homepage.search { background-color: var(--aalas-green-wash); padding: 30px 0; position: relative; z-index: 2; } .widget--searchbar.widget--searchbar_standard.aalas.homepage.search .search-bar-widget { max-width: 830px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } .widget--searchbar.widget--searchbar_standard.aalas.homepage.search form { display: flex; align-items: stretch; gap: 12px; } .widget--searchbar.widget--searchbar_standard.aalas.homepage.search form input { flex: 1 1 0%; min-width: 0; width: auto; height: 46px; box-sizing: border-box; padding: 0 20px; font-size: 16px; border: 1px solid var(--aalas-border-field); border-radius: 5px; box-shadow: none; background-color: var(--aalas-white); } /* Class repeated to out-specify a same-named button style elsewhere */ .widget--searchbar.widget--searchbar_standard.aalas.homepage.search.widget--searchbar.widget--searchbar_standard.aalas.homepage.search form button { position: relative; flex: 0 0 auto; margin: 0; height: 46px; box-sizing: border-box; padding: 0 28px; border: none; border-radius: 5px !important; display: flex; align-items: center; justify-content: center; background-color: var(--aalas-green) !important; color: var(--aalas-white); text-transform: none; font-family: var(--aalas-font) !Important; font-size: 1rem; font-weight: 500; } .widget--searchbar.widget--searchbar_standard.aalas.homepage.search form button .icon-search { display: none; } .widget--searchbar.widget--searchbar_standard.aalas.homepage.search.widget--searchbar.widget--searchbar_standard.aalas.homepage.search form button:hover, .widget--searchbar.widget--searchbar_standard.aalas.homepage.search.widget--searchbar.widget--searchbar_standard.aalas.homepage.search form button:focus { background-color: var(--aalas-green) !important; border: none; color: var(--aalas-white); cursor: pointer; } /* Small screens — field and button stack */ @media (max-width: 40.0625em) { .widget--searchbar.widget--searchbar_standard.aalas.homepage.search form { flex-wrap: wrap; } .widget--searchbar.widget--searchbar_standard.aalas.homepage.search form input { flex: 1 1 100%; } .widget--searchbar.widget--searchbar_standard.aalas.homepage.search.widget--searchbar.widget--searchbar_standard.aalas.homepage.search form button { flex: 1 1 100%; width: 100%; } } /* #endregion SEARCH BAR */ /* #endregion HOMEPAGE SNIPPETS */ /* #region HOMEPAGE OVERRIDES ================================== */ /*
gap fix — the widget renders outside .editor-content */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot p:has(> img) { margin-bottom: 0; } /* Widget class is .hero-spot because TI already styles .hero */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot { margin-bottom: -25px; } @media (max-width: 1023px) { .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot { margin-bottom: 1.5rem; } } /* .btn is TI's class — restyled for the hero */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .btn { /* block + fit-content so margins collapse through TI's
wrapper */ display: block; width: fit-content; margin-top: var(--aalas-hero-cta-gap); margin-bottom: 2rem; padding: 1.25rem 2.25rem; border: 1.5px solid var(--aalas-hero-btn-bg) !important; background-color: var(--aalas-hero-btn-bg) !important; color: var(--aalas-green-contrast) !important; font-family: var(--aalas-font) !important; font-size: 1rem; font-weight: 500; line-height: 1; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* Hover — knock out to var(--aalas-white), keep the border, swap to ADA-safe text */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .btn:hover, .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .btn:focus-visible { border-color: var(--aalas-hero-btn-bg) !important; background-color: var(--aalas-hero-btn-bg-hover) !important; color: var(--aalas-hero-btn-fg-hover) !important; } /* Keyboard focus (ADA) */ .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .btn:focus-visible { outline: 3px solid var(--aalas-focus-ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .widget--one-column.widget--one-column_standard.aalas.homepage.hero-spot .btn { transition: none; } } /* #endregion HOMEPAGE OVERRIDES */ /* #endregion HOMEPAGE */ /* #region COURSE DETAIL PAGES ================================== */ /* AALAS course detail pages — the tabbed copy under the course title. */ /* #region DETAIL PAGE GLOBAL ================================= */ /* Page layout — the tabs row runs full width below both columns. TI's own course-detail markup; no classes of ours. */ /* Course title — the subtitle paragraph is hidden, so the h1 stands alone */ .course__detail__header p { display: none; } .course__detail__content > .course__detail__header { padding-bottom: 4px; } .course__detail__header h1 { font-size: 2rem; font-family: var(--aalas-font) !important; color: var(--aalas-text-dark); } .course__detail__asset img { border: solid 1px var(--aalas-cert-border); border-radius: 5px; } .widget--course-purchase.widget--course-purchase_standard .btn { padding: 0.75em; } /* Purchase card. !important only where TI provably overrides: the font stack (their serif beats us on the title) and the enrolled strip's padding (theirs survives even id-level specificity). */ .course__detail__sidebar .widget--course-purchase > div:has(> .panel) { background: var(--aalas-white); border: 0; border-top: 6px solid var(--aalas-green); border-radius: 5px; box-shadow: 0 1px 4px var(--aalas-shadow-soft), var(--aalas-cert-shadow); overflow: hidden; margin: 0 0 16px; } .course__detail__sidebar .widget--course-purchase .enroll__title, .course__detail__sidebar .widget--course-purchase .enroll__price, .course__detail__sidebar .widget--course-purchase .btn span { font-family: var(--aalas-font) !important; } .course__detail__sidebar .widget--course-purchase .panel { background: none; border-radius: 0; margin: 0; padding: 24px 24px 20px; } .course__detail__sidebar .widget--course-purchase .enroll__title { color: var(--aalas-green); font-weight: 500; letter-spacing: 1px; margin: 0 0 6px; } .course__detail__sidebar .widget--course-purchase .enroll__price { color: var(--aalas-ink); font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin: 0 0 20px; } .course__detail__sidebar .widget--course-purchase .enroll__buy .btn--primary { display: block; width: 100%; margin: 0; padding: 14px 16px; border-radius: 5px; font-size: 17px; font-weight: 500; } .course__detail__sidebar .widget--course-purchase .enroll hr { margin: 20px 0; border-top-color: var(--aalas-rule); } .course__detail__sidebar .widget--course-purchase .enroll__secondary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; } .course__detail__sidebar .widget--course-purchase .enroll__secondary-actions .btn--link { color: var(--aalas-text-dark); font-size: 14px; white-space: nowrap; padding: 0; margin: 0; } .course__detail__sidebar .widget--course-purchase .enroll__secondary-actions .btn--link i { color: var(--aalas-green-alt); font-size: 15px; margin-right: 8px; } .course__detail__sidebar .widget--course-purchase .course__detail__enrolled { margin: 0; padding: 14px 24px !important; background: var(--aalas-bg-tint); border: 0; border-radius: 0; text-align: left; } .course__detail__sidebar .widget--course-purchase .course__detail__enrolled .btn { display: inline-flex; align-items: center; width: auto; margin: 0; padding: 0; color: var(--aalas-green-darkest); font-size: 14px; } .course__detail__sidebar .widget--course-purchase .course__detail__enrolled .btn i { display: none; } /* All widths: spacing between the tabs block and the content above it. Top only — below the breakpoint TI's column wrapper still provides the side gutters. */ .course__detail__content > .row:has(.tabs) { padding-top: 16px; } @media only screen and (min-width: 48.0625em) { .course__detail__container { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto 1fr auto; padding: 32px 0 0; } /* Hand the columns' children to the grid. The :has() catches the unclassed Ember wrapper TI renders around the sidebar. */ .course__detail__container > .course__detail__content, .course__detail__container > :has(> .course__detail__sidebar), .course__detail__container .course__detail__sidebar { display: contents; } /* Each item takes over the exact side padding the dissolved column wrappers were providing. The header's is 32px because TI nests its own 16px inside the column's 16px. */ .course__detail__content > .course__detail__header { grid-column: 1; grid-row: 1; padding: 0 32px 4px; } .course__detail__content > .row:not(:has(.tabs)) { grid-column: 1; grid-row: 2; padding: 0 16px; } .course__detail__content > .row:has(.tabs) { grid-column: 1 / -1; grid-row: 3; padding: 16px 16px 0; } .course__detail__sidebar .layout__content--sidebar { grid-column: 2; grid-row: 2; padding: 0 16px; } } /* Stacked — panel directly under the title. 56.25em is where the panel would outgrow the image. Declared after the desktop block so it wins in the 769-899px overlap. */ @media only screen and (max-width: 56.1875em) { .course__detail__container { display: grid; grid-template-columns: 1fr; grid-template-rows: none; } .course__detail__container > .course__detail__content, .course__detail__container > :has(> .course__detail__sidebar), .course__detail__container .course__detail__sidebar { display: contents; } .course__detail__content > .course__detail__header { grid-column: 1; grid-row: 1; padding: 0 32px 4px; } /* 32px so the panel's box lands on the same edge as the image, which sits inside TI's 16px column plus the row's 16px. */ .course__detail__sidebar .layout__content--sidebar { grid-column: 1; grid-row: 2; padding: 0 32px; } .course__detail__content > .row:not(:has(.tabs)) { grid-column: 1; grid-row: 3; padding: 0 16px; } .course__detail__content > .row:has(.tabs) { grid-column: 1; grid-row: 4; padding: 16px 16px 0; } /* Detail images are 675px natural; fill the column when stacked. */ .course__detail__content .course__detail__asset img { width: 100%; height: auto; } } /* #endregion DETAIL PAGE GLOBAL */ /* #region DETAIL PAGE TABS =================================== */ /* The tab strip itself — TI's own .tabs markup. Scoped to the course detail row: .tabs is a shared TI component and courses use it too. */ .course__detail__content > .row:has(.tabs) .tabs { border-bottom: solid 2px var(--aalas-green) !Important; } .course__detail__content > .row:has(.tabs) .tabs .tab-title { margin-right: 2px !Important; } .course__detail__content > .row:has(.tabs) .tabs .tab-title > a { font-family: var(--aalas-font) !important; font-weight: 500; text-transform: uppercase; border-radius: 5px 5px 0 0; border-color: var(--aalas-bg-panel) !important; } .course__detail__content > .row:has(.tabs) .tabs .tab-title.active > a, .course__detail__content > .row:has(.tabs) .tabs .tab-title > a.active { background-color: var(--aalas-green); border-color: var(--aalas-green) !important; color: var(--aalas-green-contrast); } /* Course-detail tab copy. Wrapper class only — no TI markup needed. One wrapper for every tab on the page. */ .aalas-detail-page { padding-top: 0.5rem; font-family: var(--aalas-font); } .aalas-detail-page h2 { font-family: var(--aalas-font) !important; font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--aalas-text-dark); margin-bottom: 0.75rem; } .aalas-detail-page p { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.75; color: var(--aalas-body); } /* Section labels — no rule of any kind */ .aalas-detail-page__subhead { margin: 2rem 0 0.875rem !important; font-size: 0.8125rem !important; font-weight: 700; letter-spacing: 1.5px; line-height: 1.3 !important; text-transform: uppercase; color: var(--aalas-green) !important; } /* Checkmark list. Single column by default so any length reads correctly; two columns only once there are enough items to fill both. */ /* ul./ol. qualifier + wrapper: .editor-content ol,ul sets padding-left:1rem and would otherwise beat a single class here, breaking marker alignment */ .aalas-detail-page ul.aalas-detail-page__list { margin: 0 0 1.25rem; padding: 0; list-style: none; column-gap: 2.5rem; } /* :not() sits on the base rule so the modifier does not have to out-specify a :has() selector to win */ .aalas-detail-page__list:not(.aalas-detail-page__list--full):has(> li:nth-child(7)) { columns: 2; } /* Full-width items — sentences rather than short topics */ .aalas-detail-page__list--full { columns: 1; } /* 2.5625rem leaves a 16px gap after the checkmark, matching the square bullets on the Who-Is-This-For tab */ .aalas-detail-page__list li { position: relative; margin-bottom: 0.75rem; padding-left: 2.5625rem; font-size: 1rem; line-height: 1.55; color: var(--aalas-text-dark); break-inside: avoid; } .aalas-detail-page__list li:last-child { margin-bottom: 0; } /* left, not a padding on the ul — with columns:2 a list padding would indent the first column only, and the second would sit 8px shallower */ .aalas-detail-page__list li::before { content: ""; position: absolute; left: 0.5rem; top: 0.1em; width: 1.25rem; height: 1.25rem; background-color: var(--aalas-green); -webkit-mask: var(--aalas-icon-check) center / contain no-repeat; mask: var(--aalas-icon-check) center / contain no-repeat; } /* Numbered list — used where the items are outcomes rather than topics. Single column always: two columns break the reading order of numbers. */ /* 1.875rem on the ol sets where the number sits; the li padding below opens the same 16px gap the other two lists use */ .aalas-detail-page ol.aalas-detail-page__ordered { margin: 0 0 1.25rem; padding-left: 1.875rem; list-style: decimal; } .aalas-detail-page__ordered li { margin-bottom: 0.75rem; padding-left: 0.6875rem; font-size: 1rem; line-height: 1.55; color: var(--aalas-text-dark); } .aalas-detail-page__ordered li:last-child { margin-bottom: 0; } .aalas-detail-page__ordered li::marker { color: var(--aalas-green); font-weight: 700; } /* The shared square-bullet list, matched to this page's line-height and marker colour. Both scoped to the wrapper — course pages are untouched. */ .aalas-detail-page ul.di-unordered-list li { line-height: 1.55; margin-bottom: 0.875rem; } .aalas-detail-page ul.di-unordered-list.di-marker-light-green > li::before { background-color: var(--aalas-green); } .aalas-detail-page__callout { display: flex; gap: 1rem; margin: 2.25rem 0 0; padding: 1.5rem; border-radius: var(--aalas-cert-radius); background: var(--aalas-green-wash); } .aalas-detail-page__callout::before { content: ""; flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; background-color: var(--aalas-green); -webkit-mask: var(--aalas-icon-shield-check) center / contain no-repeat; mask: var(--aalas-icon-shield-check) center / contain no-repeat; } .aalas-detail-page__callout p { margin: 0 !important; color: var(--aalas-text-mid) !important; } .aalas-detail-page__series { margin: 2rem 0 0 !important; padding-top: 1.25rem; border-top: 2px dashed var(--aalas-rule); font-size: 0.9375rem !important; color: var(--aalas-muted) !important; } @media (max-width: 40em) { .aalas-detail-page__list:not(.aalas-detail-page__list--full):has(> li:nth-child(7)) { columns: 1; } } /* #endregion DETAIL PAGE TABS */ /* #endregion COURSE DETAIL PAGES */ /* #region FLUSH-WIDTH WIDGETS =================================== */ /* One gutter value per container. Last in the file so it wins. */ .home__content#main-content, header.header.header--microsite, .footer { --di-gutter: 24px; padding-left: var(--di-gutter); padding-right: var(--di-gutter); } /* Page width cap — TI's own wrapper. border-box, so 1280px is the outer edge. Bands bleed to the gutter containers inside, which sit at this width, so the whole page boxes above 1280. */ .home .container { --di-container-max: 1280px; box-sizing: border-box; max-width: var(--di-container-max); margin-inline: auto; } @media (min-width: 641px) { .home__content#main-content, header.header.header--microsite, .footer { --di-gutter: 32px; } } @media (min-width: 1024px) { .home__content#main-content, header.header.header--microsite, .footer { --di-gutter: 56px; } } /* TI insets every widget via .layout__content .widget. The gutter already owns the page edge, so drop the horizontal half and let one number place everything. Vertical padding is left alone, and .row is not touched. */ .home__content .widget { padding-left: 0; padding-right: 0; } /* Top bar — flex-grow fills the line, negative margins reach the edges */ .header--microsite nav.top-bar { order: 3; flex: 1 1 100%; width: auto; min-width: 0; max-width: none; margin: 24px calc(-1 * var(--di-gutter, 16px)) 0; } @media (max-width: 640px) { .header--microsite nav.top-bar { margin-top: 20px; } } /* Search bar — max-width:none stops TI's .row cap */ .widget--searchbar.widget--searchbar_standard.aalas.homepage.search { width: auto; min-width: 0; max-width: none; margin: -5px calc(-1 * var(--di-gutter, 16px)) 1.5rem; } /* #endregion FLUSH-WIDTH WIDGETS */ /* ========================================================================== ========================================================================== >>> END — DIGITAL INTELLECTIVE UPDATED CSS <<< ========================================================================== ========================================================================== */