:root { --font: Inter; --alt-font: Inter; --accent-color: #f6821f; --secondary-color: #fbad41; --link-color: #a9a9a9; --accent-highlight-color: #773905; --accent-highlight-background-color: #feefe3; --accent-tinted-color-70: #fcdabc; --accent-tinted-color-80: #fde6d2; --accent-tinted-color-90: #fef3e9; --accent-contrast-color: #111; --accent-contrast-tinted-background-color: #fff; --accent-hover-color: #d96909; --secondary-hover-color: #fa970f; --secondary-contrast-color: #111; --link-hover-color: #767676; } .company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/96e5cdef-d137-41bf-9896-24eba5b5d779/j1i1xa2hr12i-CFlogo.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;} .company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/96e5cdef-d137-41bf-9896-24eba5b5d779/j1i1xa2hr12i-CFlogo.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;} @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); /* ============================================================ CLOUDFLARE UNIVERSITY LMS — LIVE SITE CUSTOM CSS ============================================================ File: LiveSite_CSS_8-13_WorkingFile.css Updated: August 13, 2026 Author: Lauren Hatfield Platform: Thought Industries (learn.cloudflare.com) VERSION HISTORY ~~~~~~~~~~~~~~~ 8-13 CSS audit and dead-code cleanup pass. Added .umCatalog2 .catalog-aggregation__value:hover (bg-subtle, black text — !important required to beat TI base styles). Removed: #account-picker rules (no DOM match), bare unscoped .learner-access / .recently-viewed / .explore-catalog-cta layout rules (scoped versions remain in Sections 11 and 13), .secondary__buttons rule (undefined --secondary-color variable, no active use), empty @media (max-width: 767px) shell, and duplicate select.enroll__session__select + body.redeem subtitle-injection blocks from Section X (canonical rules in Sections 20c and 16). --text-ghost (#707070) contrast ratio corrected to 4.95:1 (passes WCAG AA for normal and large text — previously noted as 3.54:1 in error). --geomtetric-fade-bg typo fixed to --geometric-fade-bg throughout. umBanner1–4 and umGetStarted removed (confirmed zero DOM matches on all audited pages). .preview-link (Preview/Start Course button) restored to Section 20c after accidental removal. Section map comment updated: Sections 4 and 10 marked Removed, Section 15 header updated to reflect active vs. removed um* classes. Master CSS documentation updated to match all changes. 8-10 Variable system overhauled — all stray hex codes replaced with tokens; :root reorganized into grouped, documented sections. Border shorthand variables added. Warm card colors restored (#FFFAF8, #FFA58A) as named variables. Course/Duration pill backgrounds added (--color-pill-bg). Live carousel hover updated to match catalog card hover. Redemption page responsive fixes (mobile + tablet). Typography consistency audit + fixes: missing semicolons on card descriptions fixed (live rendering bug), card titles standardized, subtitle colors unified to --text-muted, --font-weight-medium token added, --font-size-form-title added. Design system inconsistencies resolved: nav font tokens applied, mega menu raw values tokenized, border colors unified to --color-btn-border across all pill buttons, dead .cta-btn ruleset removed, .login-btn hover changed from ruby to tangerine. Section map renumbered (21/22 -> 20/21). Known inconsistencies documented. 8-07 Redemption page (Section 16) button hierarchy defined: Register (primary pill) / Validate (blackberry soft fill) / Add Another Code (muted text link) / Sign In (blackberry underline link). Orange removed as any default state. 8-06 Redemption page layout and button initial styling pass. 8-05 Homepage cfuLiveCarousel, cfuEnterpriseCard, and cfuEnterpriseBanner sections added/refined. Tab panel grid system finalized. Dot-grid background applied. 7-17 Initial refactor from legacy flat CSS into numbered section architecture. :root token system established. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ⚠ READ-ONLY BASE SHEETS — DO NOT EDIT TI_CSS_86528_7-8.css TI_CSS_94166_7-8.css All overrides go in this working file only. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HOW TO SAFELY MAKE CHANGES ~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1. COLORS / TOKENS — edit ONLY the :root block (Section 1). Every color, border, shadow, and spacing value is defined there as a variable. Never hard-code a hex value anywhere else in the file. If a value is used more than once, it must be a variable. 2. FIND THE RIGHT SECTION — use the Section Map below. Section numbers match the Sandbox file for easy swapping. 3. USING !important — only where TI inline styles or specificity cannot be beaten any other way. Always add a short comment explaining why it's needed. 4. ADDING A NEW PAGE/WIDGET — add a new numbered section at the bottom, scope ALL rules to a unique class name, and add the section to the map below. 5. ARCHIVE RULE — before publishing, copy this file to the dated Archive file. Never edit the Archive. RESPONSIVE BREAKPOINTS ~~~~~~~~~~~~~~~~~~~~~~ ≤ 480px mobile-xs ≤ 600px mobile ← redemption page, small phones ≤ 767px mobile-lg ← general mobile ≤ 900px tablet-sm ← redemption tablet ≤ 979px tablet ≤ 1024px tablet-lg ≤ 1279px desktop-sm ← nav collapses to hamburger ≥ 1280px desktop SECTION MAP ~~~~~~~~~~~ 1. CSS Custom Properties (:root) 2. Global Resets & Base Styles 3. Homepage — Hero 4. (Removed — was Homepage Search Bar) 5. Homepage — Sections & Widgets 6. Custom Header — Level 1 (cloudflare-nav / global nav bar) 7. Custom Header — Level 2 (level2Menu, l2nav, search bar) 8. Custom Header — Responsive / Mobile 9. Catalog Page 10. (Removed — was Course Page & Learner Sidebar) 11. Learner Dashboard — Hero & Layout 12. Learner Dashboard — Stats 13. Learner Dashboard — Widgets 14. Custom Footer 15. Widget Classes (umCatalog2 full card system — umBanner1–4 and umGetStarted removed 8-13) 16. Page-Specific — Redemption Page 17. Page-Specific — Course Event Page (in-person-event) 18. Page-Specific — Course Hero (hero-short-and-clear) 19. Utility Classes 20. Course Detail Page 20b. ↳ Sidebar (bordered card + corner squares) 20c. ↳ Purchase Widget (pills + button) 20d. ↳ Enterprise Blurb (widget__title / subtitle) 20e. ↳ What's Included 20f. ↳ Related Courses 20g. ↳ Responsive 21. Page-Specific — Sign-In Page (Multi-Path Card) 21b. ↳ Native TI Login Form (card treatment) X. Legacy / Misc (pending cleanup) ============================================================ BUTTON STYLE GUIDE ============================================================ Orange/tangerine NEVER appears as a default button state — it is a hover signal only. The standard primary button is the outline pill (white bg, gray border, black text). The SSO button on the Sign-In card is a deliberate one-off exception: it uses a tangerine fill to signal the single recommended action on that page. It is NOT the pattern to follow elsewhere — it is context-specific emphasis. TIER 1 — OUTLINE PILL (white bg, gray border, black text) ┌─────────────────────────────────────────────────────────┐ │ Background: var(--color-white) │ │ Border: 1px solid var(--color-btn-border) #b0b0b0 │ │ Text: var(--color-black) │ │ Weight: var(--font-weight-semibold) 600 │ │ Size: var(--font-size-body-sm) 14px │ │ Radius: var(--radius-pill) 22px │ │ Padding: 12px 32px (compact: 9px 22px) │ │ Hover: border + text → var(--color-tangerine) │ │ bg → var(--color-ruby-tint) #FFF7F5 │ │ Classes: .btn--primary.btn--expand (Register), │ │ .cf-btn-secondary, .whats-next-blurb CTA, │ │ Enterprise banner/card CTAs, Help Cards, │ │ course launch, catalog calendar register │ │ Use: The standard primary action button used │ │ throughout the site. Register, Launch │ │ Course, Sign In (form), Learn More, etc. │ └─────────────────────────────────────────────────────────┘ TIER 2 — SOFT FILL PILL (subtle fill, branded text, no border) ┌─────────────────────────────────────────────────────────┐ │ Background: var(--bg-subtle) #f3f3f3 (or tinted) │ │ Border: none │ │ Text: var(--color-blackberry) #0F006B │ │ Radius: var(--radius-pill) 22px │ │ Hover: bg → tangerine tint, text → tangerine │ │ Classes: .btn--primary.btn--submit (Validate) │ │ Use: Functional secondary action alongside a │ │ Tier 1 button. Quieter — reads as useful │ │ but not urgent. Currently: Validate on │ │ the redemption page only. │ └─────────────────────────────────────────────────────────┘ TIER 3 — GHOST LINK (no fill, no border, muted text) ┌─────────────────────────────────────────────────────────┐ │ Background: none │ │ Border: none │ │ Text: var(--text-ghost) #707070 or │ │ var(--text-muted) #767676 │ │ Hover: text → var(--color-blackberry), underline │ │ Classes: .btn--link (view details, add code, etc.) │ │ Use: Tertiary/utility actions most users won't │ │ need. Should not draw the eye. │ │ "Add Another Code", "View Details" links. │ └─────────────────────────────────────────────────────────┘ TIER 4 — INLINE TEXT LINK (no fill, no border, underlined) ┌─────────────────────────────────────────────────────────┐ │ Background: none │ │ Border: none │ │ Text: var(--color-blackberry) #0F006B │ │ Style: underline always │ │ Hover: text → var(--color-tangerine) │ │ Classes: .btn--link.btn--inherit-font, │ │ general tags in body copy │ │ Use: In-sentence links ("Sign In", T&C links, │ │ "Employee? Sign in here"). Look like │ │ links, not buttons. │ └─────────────────────────────────────────────────────────┘ SPECIAL CASE — SIGN-IN SSO BUTTON (one-off, do not replicate) ┌─────────────────────────────────────────────────────────┐ │ Background: var(--color-tangerine) #F6821F │ │ Text: var(--color-white) │ │ Border: none │ │ Radius: var(--radius-pill) 22px │ │ Hover: var(--brand-primary-hover) #d96909 │ │ Class: .cf-btn-primary │ │ Use: Context-specific emphasis on the Sign-In │ │ card only. Signals the single recommended │ │ path (SSO). Do NOT use elsewhere. │ └─────────────────────────────────────────────────────────┘ KNOWN INCONSISTENCIES & INTENTIONAL EXCEPTIONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ INTENTIONAL (not inconsistencies): → Header "Sign In" nav button hover stays gray/white. This is a unique nav CTA that intentionally does not follow the tangerine hover convention — it links to TI's native sign-in page and should feel distinct from content CTAs. → Dashboard row CTA uses background: transparent. Rows have a white background so this is visually identical — and allows the button to adapt if row bg ever changes. OUTSTANDING / FUTURE CLEANUP: - Search bar button border still uses --color-gray (#DFDFDF) instead of --color-btn-border (#b0b0b0). Lower priority since the search bar button has a distinct purpose and context. - Native TI sign-in form submit renders as Tier 2 outline pill after a tangerine SSO row — visual weight drops. Could match the tangerine fill for the submit action in a future pass. - Legacy widget sections (15, X) use undefined variables (--secondary-color, --accent-color, etc.) from the old TI theme. Left in for backward compat — not part of the current design system. ============================================================ TYPOGRAPHY STYLE GUIDE ============================================================ All font sizes and weights use CSS tokens from Section 1. Never hard-code a px value in active sections. Legacy widget sections (15, X) are exempt — they predate the token system. TYPE SCALE ~~~~~~~~~~ Token Size Use --font-size-hero 64px Homepage hero h1, dashboard hero h1 --font-size-h1 60px ⚠ DEFINED BUT UNUSED in active CSS Only appears in legacy widgets. --font-size-h2 42px ⚠ DEFINED BUT UNUSED in active CSS Only appears in legacy widgets (raw). Use var(--font-size-h2) if adding new large widget headings. --font-size-h3 32px Major section headings, explore-catalog cta heading, course detail h1 --font-size-h4 23px Widget/card titles — most common heading token. Tab panel titles, enterprise headings, help card headings, carousel widget title --font-size-form-title 22px Form card headings — redemption page widget title, sign-in card heading. Distinct from h4 (23px) because these are enclosed card contexts not open page headings --font-size-sm-heading 18px Compact card headings, widget subtitles, mega menu section headers --font-size-body-lg 20px Hero subtitles, card subheadings in carousels, enterprise feature headings --font-size-body 16px Default paragraph text, tab labels, nav links, most body copy --font-size-body-sm 14px Secondary body text, CTA button labels, most link text, pill labels, filter text NOTE: this is the most-used size token --font-size-label 13px Eyebrow labels, sidebar toggle text, footer text, mega menu body copy --font-size-caption 12px Very small metadata, responsive overrides, badge/tag text --font-size-small 11px Form field labels (ALL CAPS treatment), the smallest deliberate text on the site OUTLIERS (intentional single-use sizes — raw values left in place) - 44px / 32px hero h1 responsive breakpoints (≤900px, ≤600px) — single-use responsive override; raw values are fine here - 17px — testimonial quote text; one-off layout quirk in legacy widget - 1.1rem — sign-in card icon size; unitless relative size is intentional FONT WEIGHT SCALE ~~~~~~~~~~~~~~~~~ Token Value Use --font-weight-light 300 ⚠ DEFINED BUT UNUSED in active CSS --font-weight-regular 400 Body copy, pill labels, ghost links, card descriptions, "view details" text --font-weight-medium 500 Nav links (level 1 + 2), form selects, preview buttons, header buttons --font-weight-semibold 600 Headings, CTA button labels, card titles, active tab labels — the most-used weight --font-weight-bold 700 Hero headings, dashboard stat values, high-emphasis display text WEIGHT CONVENTIONS - Buttons always semibold (600) unless they are ghost/text links - Ghost links (.btn--link, "view details") use regular (400) - Nav items use medium (500) — they're not headings but need some visual weight above body copy - Raw 600/700/bold in legacy sections (15, X) are expected and should not be changed without visual QA TEXT COLOR HIERARCHY ~~~~~~~~~~~~~~~~~~~~ Token Value Use --text-primary black Headings, labels, primary body copy --text-secondary #555 Supporting text, metric labels, link hover --text-body #444 Card descriptions, general body paragraphs --text-subtle #6b6b6b Inactive tab text, subtitles, captions --text-muted #767676 Muted utility text, tertiary links --text-ghost #707070 "View details" links, lowest-emphasis labels --text-icon-muted #909090 Placeholder text, icon fills, counts --text-inverse white Text on dark/colored backgrounds LINK + INTERACTIVE TEXT COLORS - Default links: var(--link-color) = var(--color-blackberry) #0F006B - Active / hover: var(--color-tangerine) #F6821F - Inline sign-in links: var(--color-blackberry) with underline - T&C links: var(--color-blackberry) - "Employee sign in" footer link: var(--text-icon-muted) ============================================================ */ /* ============================================================ 1. CSS CUSTOM PROPERTIES All colors, fonts, spacing, and radii live here. To change a color site-wide, change the token — not the rule. ============================================================ */ :root { /* ========================================================= BRAND COLORS — Core palette per Cloudflare guidelines. These are the raw named colors. Use semantic aliases below for actual styling — don't reach for these directly. ========================================================= */ /* Primary — should appear in every layout */--color-ruby: #FF6633; /* gradient start, focus rings, pill borders */--color-tangerine: #F6821F; /* lead brand color, active tabs, hover states */--color-mango: #FBAD41; /* gradient end, secondary highlights */--color-black: #000000; /* type only — never as a background fill */--color-white: #FFFFFF; /* page bg, card bg, inverse text */ /* Secondary — accents, diagrams, illustrations only */--color-lemon: #FFD43C;--color-blueberry: #3EAFFF;--color-blackberry: #0F006B; /* sign-in links, secondary link color */--color-cherry: #960C3E; /* form validation errors */--color-raspberry: #CE2F55; /* dashboard stat bars */--color-purple-light: #B176BB;--color-green-light: #A9DDC5;--color-yellow-light: #FEFBB0; /* Accent — homepage warm accent, basis for card bg/border tints */--color-accent-100: #ff5e1f; /* homepage warm accent; source for opacity-derived card tokens */ /* Grays — UI surfaces, borders, dividers */--color-gray: #DFDFDF; /* standard UI border (inputs, form fields, containers) */--color-gray-light: #F0F0F0; /* tab hover bg, subtle surface fills */--light-gray-accent: #ebebeb; /* hairline dividers, card side borders, corner squares */ /* ========================================================= SEMANTIC ALIASES — What colors do, not what they are. Always prefer these over raw color tokens in rules. ========================================================= */ /* Brand roles */--brand-primary: var(--color-tangerine); /* primary action color */--brand-primary-hover: #d96909; /* darkened tangerine for hover */--brand-secondary: var(--color-mango);--brand-secondary-hover: #fa970f;--brand-accent: var(--color-ruby); /* Text hierarchy — 5 levels from body copy to ghost */--text-primary: var(--color-black); /* headings, labels, primary body */--text-secondary: #555555; /* supporting text, metric labels, link hover */--text-body: #444444; /* card descriptions, general body copy */--text-subtle: #6b6b6b; /* inactive tabs, subtitles, secondary captions */--text-muted: #767676; /* muted utility text, "add another code" links */--text-ghost: #707070; /* "view details" links, low-emphasis labels */--text-icon-muted: #909090; /* placeholder text, icon fills, catalog counts */--text-inverse: var(--color-white); /* text on dark/colored backgrounds */ /* Links */--link-color: var(--color-blackberry); /* default link color site-wide */ /* Hover backgrounds — ruby/orange tint wash used on button + card hovers */--color-ruby-tint: #FFF7F5; /* all outline-pill button hovers, card row hovers */ /* Warm card system — original brand values. Use these for the Enterprise card, whats-next-blurb, and any section with the warm salmon card treatment. */--color-warm-card-bg: #FFFAF8; /* warm off-white fill — Enterprise card, whats-next-blurb bg */--color-warm-border: #FFA58A; /* salmon border — Enterprise card, whats-next-blurb border + corners */ /* Pill badge system — Course/Duration type pills on catalog cards */--color-pill-bg: rgba(255, 102, 51, 0.07); /* ruby at 7% opacity — subtle pill fill */--color-pill-border: var(--color-ruby); /* ruby — pill dashed border */--color-pill-text: var(--color-ruby); /* ruby — pill label text */ /* Surfaces — page regions, menus, filter areas */--bg-primary: var(--color-white);--bg-dark: #060030; /* footer, dark hero areas */--bg-light: var(--color-gray-light);--bg-subtle: #f3f3f3; /* filter hover, mobile nav separators, submenu bg */--bg-tab-strip: #f5f5f5; /* tab strip background (homepage + course detail) */--bg-menu-sidebar: #f9fafb; /* mega menu sidebar panel */--bg-row-hover: #FAFAFA; /* sign-in / dashboard row hover */--footer-bg: #060030; /* same as --bg-dark; kept separate for clarity */ /* Specialty */--color-badge-earned: #15803d; /* green "Earned" badge pill bg + border */--color-selection-bg: #ffe9e0; /* text selection highlight background */--color-selection-text: #ff500a; /* text selection highlight foreground */ /* ========================================================= IMAGE URLS -- Stored within Production Pages. Use "Copy URL" to fetch direct image URL ========================================================= */--hero-bg-image: url('https://media.thoughtindustries.com/course-uploads/96e5cdef-d137-41bf-9896-24eba5b5d779/2wkphmqeabwc-CF_HeroImage.png');--geometric-pattern: url('https://media.thoughtindustries.com/course-uploads/96e5cdef-d137-41bf-9896-24eba5b5d779/xij7mlde9k19-pattern.png'); /* ========================================================= GRADIENTS ========================================================= */--gradient-dawn: linear-gradient(to right, #FF6633 0%, #F6821F 50%, #FBAD41 100%); /* Dawn gradient — hero strip, redemption page accent bar. One gradient element per layout per brand guidelines. */--geometric-fade-bg: linear-gradient( to bottom, var(--color-warm-card-bg) 10%, /* Fully transparent at the very top */ rgba(255, 255, 255, .5) 40%, /* Quickly reaches full opacity */ rgba(255, 255, 255, 0) 100% /* Stays fully opaque to the bottom */ ), var(--geometric-pattern); /* Variable used here instead of the direct URL */ /* ========================================================= TYPOGRAPHY ========================================================= */--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;--font-cjk: 'Noto Sans CJK', sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Font weights — 5 levels */--font-weight-light: 300; /* ⚠ defined but not used in active sections */--font-weight-regular: 400; /* body copy, pill labels, ghost links */--font-weight-medium: 500; /* nav links, preview buttons, form selects */--font-weight-semibold: 600; /* headings, CTA buttons, card titles — most common */--font-weight-bold: 700; /* hero headings, dashboard stat values */ /* Font sizes — type scale hero → large marketing headings (homepage hero, dashboard hero) h1 → ⚠ defined (60px) but unused in active CSS; legacy widget only h2 → ⚠ defined (42px) but unused in active CSS; legacy widget only h3 → section headings (explore-catalog, course detail h1) h4 → widget/card titles throughout (most common heading token) sm-heading → 18px; compact card headings, widget subtitles form-title → 22px; redemption + sign-in card form headings (sits between sm-heading and h4; distinct enough to name) body-lg → 20px; hero subtitles, card headings in carousels body → 16px; default paragraph text, tab strip labels body-sm → 14px; secondary body, button labels, most CTAs label → 13px; eyebrow labels, sidebar toggles, footer text caption → 12px; very small metadata, responsive overrides small → 11px; form field labels (ALL CAPS), badge text */--font-size-hero: 64px;--font-size-h1: 60px; /* ⚠ unused in active CSS — legacy widget only */--font-size-h2: 42px; /* ⚠ unused in active CSS — legacy widget only */--font-size-h3: 32px;--font-size-h4: 23px;--font-size-form-title: 22px; /* redemption + sign-in card form headings */--font-size-sm-heading: 18px;--font-size-body-lg: 20px;--font-size-body: 16px;--font-size-body-sm: 14px;--font-size-label: 13px;--font-size-caption: 12px;--font-size-small: 11px;--line-height-headline: 1.0;--line-height-body: 1.2;--letter-spacing: -0.02em; /* ========================================================= SPACING ========================================================= */--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--spacing-3xl: 64px;--spacing-4xl: 100px;--section-padding-x: 9%;--section-padding-y: 64px;--widget-padding-x: 9%;--widget-padding-y: 32px; /* ========================================================= BORDER RADIUS ========================================================= */--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 15px;--radius-2xl: 20px;--radius-pill: 22px;--radius-round: 50%; /* ========================================================= BORDERS — Full shorthand declarations. Use these as drop-in values: border: var(--border-ui); ========================================================= */ /* Structural dividers */--border-subtle: 1px solid var(--light-gray-accent); /* hairline card sides, section dividers */--border-ui: 1px solid var(--color-gray); /* inputs, containers, search form */--border-tab-panel: 1px solid #e8e8e8; /* homepage tab panel + grid cell edges */ /* Interactive elements */--border-btn: 1px solid var(--color-btn-border); /* outline-pill buttons at rest */--border-tab-active: 2px solid var(--color-tangerine); /* active tab underline indicator */--border-focus: 1px solid var(--color-ruby); /* input focus border */ /* Warm card system */--border-warm: 1px solid var(--color-warm-border); /* Enterprise card, whats-next-blurb */ /* Catalog pills */--border-pill: 1.5px dashed var(--color-pill-border); /* Course/Duration type pills */ /* Navigation */--border-nav-sep: 1px solid var(--bg-subtle); /* mobile nav item separators */ /* Utility */--border-none: none; /* ========================================================= BUTTON BORDER COLOR (used inside --border-btn above) ========================================================= */--color-btn-border: #b0b0b0; /* mid-gray — all outline-pill buttons at rest */ /* ========================================================= SHADOWS ========================================================= */--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06); /* --shadow-card — sign-in card, redemption card, any lifted white card */ /* ========================================================= TRANSITIONS ========================================================= */--transition-fast: 150ms ease;--transition-normal: 200ms ease;--transition-slow: 300ms ease; /* ========================================================= LMS-SPECIFIC — Dashboard progress bar colors ========================================================= */--dashavail-color: var(--color-mango);--dashstart-color: var(--color-tangerine);--dashcolab-color: var(--color-raspberry);--dashcompl-color: var(--color-ruby);--dashcert-color: var(--color-raspberry); /* ========================================================= BUTTONS ========================================================= */--btn-padding-x: 32px;--btn-padding-y: 12px;--btn-padding-x-sm: 16px;--btn-padding-y-sm: 6px;--btn-font-size: 18px;--btn-font-size-sm: 14px;--btn-radius: var(--radius-md);--btn-radius-pill: var(--radius-pill); /* ========================================================= CARDS ========================================================= */--card-padding: 1rem;--card-radius: var(--radius-lg);--card-border: 1px solid var(--color-mango); /* ========================================================= DECORATIVE CORNER SQUARES Reusable token set for the open-border corner accent squares. To apply: position: relative on container, use ::before/::after with these tokens for top corners; last-child pseudo for bottom. ALL corner squares must use border-radius: var(--corner-sq-radius) — always 1px. Never 0 (too sharp) or higher (loses the square feel). ========================================================= */--corner-sq-size: 10px;--corner-sq-offset: -6px;--corner-sq-radius: 1px;--corner-sq-color: var(--light-gray-accent);--corner-sq-border: var(--border-subtle); /* Warm card corner variant — matches --border-warm color */--corner-sq-warm-color: var(--color-warm-border);--corner-sq-warm-border: var(--border-warm); /* ========================================================= LEGACY ALIASES — referenced by older rules; do not remove ========================================================= */--black-color: var(--color-black);--white-color: var(--color-white);--cf-footer: var(--bg-dark);--color-raspberry-light: var(--color-raspberry); /* duplicate kept for backward compat */--color-blue-light: var(--color-blueberry); /* duplicate kept for backward compat */} /* ============================================================ 2. GLOBAL RESETS & BASE STYLES Applies to every page on the site. ============================================================ */ /* Text selection highlight — brand-colored when you drag to select text */ ::selection { color: var(--color-selection-text); background-color: var(--color-selection-bg); } /* Global link color */ a { color: var(--link-color); } /* Hover — !important needed to beat TI's base `a:focus, a:hover { color: #236c96 }` */ a:hover { color: var(--color-black) !important; text-decoration: underline; } /* TI button base — secondary color border */ .btn--primary, .btn-primary { border-color: var(--brand-secondary); } .btn--link.btn--primary { color: var(--brand-secondary); } /* One-column widget section titles */ .widget--one-column .widget__title { padding-top: 2rem; color: var(--color-black); font-family: var(--font-primary); font-weight: var(--font-weight-semibold); } /* Resize the "Small" elements - TI default is 60% which renders too small on laptops */ small { font-size: 80%; } /* Padding utility classes used inline in some widget HTML */ .pad15rem { padding: 0 15rem; } .pad10rem { padding: 0 10rem; } input[type=search]:focus { background: transparent; } /* ============================================================ 3. HOMEPAGE — HERO ============================================================ */ /* Hero band — white, full-width; the orange banner sits centered inside. */ .home.index .hero-area { background: var(--color-white); padding: 25px 16px 24px; display: flex; justify-content: center; width: 100%; box-sizing: border-box; border-bottom: 1px solid var(--light-gray-accent); } #hero-area-text { width: min(80%, 1200px); max-width: none; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; text-align: left; color: var(--color-white); border-radius: var(--radius-2xl); padding: 50px 40px 50px; position: relative; overflow: hidden; background-color: var(--color-tangerine); background-image: var(--hero-bg-image); background-size: cover; background-position: 20% 85%; background-repeat: no-repeat; height: 300px; } @media (max-width: 1279px) { #hero-area-text { width: 90%; } } @media (max-width: 900px) { #hero-area-text { flex-direction: column; align-items: flex-start; gap: 28px; padding: 40px 32px 44px; } } @media (max-width: 767px) { #hero-area-text { width: 95%; } } /* Left column — heading + cycler */ .hero-copy { flex: 1 1 auto; min-width: 0; } .home.index .hero-area .title { margin-left: 0; } .home.index .hero-area .title .h1 { font-family: var(--font-primary); font-style: normal; font-weight: var(--font-weight-regular); font-size: var(--font-size-hero); line-height: 1.05; letter-spacing: var(--letter-spacing); margin: 0; color: var(--color-white); } .home.index .hero-area .title .h1 .text-secondary { display: block; color: var(--color-white); } @media (max-width: 900px) { .home.index .hero-area .title .h1 { font-size: 44px; } } @media (max-width: 600px) { .home.index .hero-area .title .h1 { font-size: 32px; } } /* Subtitle */ .home.index .hero-subtitle { margin-top: 28px; } .home.index .hero-subtitle p { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-body-lg); line-height: 1.4; color: var(--color-white); margin: 0; max-width: 46ch; } /* Right column — info card */ .hero-info-card { flex: 0 0 auto; max-width: 40%; box-sizing: border-box; background: rgb(163 69 0 / 30%); border: 1px solid rgba(255, 255, 255, 0.38); border-radius: var(--radius-lg); padding: 18px; -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px); } @media (max-width: 900px) { .hero-info-card { width: 100%; max-width: none; } } .hero-info-card__text { font-family: var(--font-primary); font-size: var(--font-size-body); line-height: 1.5; color: var(--color-white); margin: 0 0 20px; } /* CTA button */ .hero-cta { display: block; width: fit-content; margin: 0 auto; background: var(--color-white); color: var(--color-black); font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-body-sm); padding: 10px 22px; border: 1px solid transparent; border-radius: var(--radius-pill); text-decoration: none; transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal); } .hero-cta:hover { background: rgba(255, 255, 255, 0.15); color: var(--color-white) !important; border-color: rgba(255, 255, 255, 0.75); text-decoration: none; } /* Animated text cycler */ .text-cycler-container { height: 1.18em; line-height: 1.18em; overflow: hidden; position: relative; } @keyframes cycleVertical { 0%, 25% { transform: translateY(0); } 33.33%, 58.33% { transform: translateY(-1.18em); } 66.66%, 91.66% { transform: translateY(-2.36em); } 100% { transform: translateY(-3.54em); } } .text-cycler { position: absolute; top: 0; left: 0; animation-name: cycleVertical; animation-duration: 9s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .text-cycler span { display: block; height: 1.18em; line-height: 1.18em; font-weight: var(--font-weight-semibold); } /* 4. Section 4 was the homepage search bar which has been removed! Must update #s */ /* ============================================================ 5. HOMEPAGE — SECTIONS & WIDGETS Tab nav widget, tab panels, homepage cards. ============================================================ */ /* Queue button fix on homepage catalog items */ .home.index .catalog-grid-item__cta-container-with-queue { display: flex; justify-content: end; } .home.index .catalog-grid-item__cta-container-with-queue > span:first-child { display: none; } /* Catalog widget on homepage */ .home.index .layout__content .widget.umCatalog2 { padding: 0; max-width: 1200px; margin: 0 auto; } /* Tab nav + panels — constrain width */ .widget.tab-panel, .tab-nav-widget { max-width: min(80%, 1200px); margin-left: auto; margin-right: auto; } /* Tab nav container */ .tab-nav-widget { background: var(--color-white); border: 1px solid var(--color-gray); border-radius: 0; border-top: none; overflow: visible; position: relative; } /* Tab strip */ .tabs { display: flex; align-items: stretch; padding: 0; margin-bottom: 0; background: var(--bg-tab-strip); width: 100%; box-sizing: border-box; gap: 0; border-bottom: none; } /* Hide Foundation's ::before clearfix on .tabs */ .tabs::before { display: none; } /* Individual tab button */ .tab { font-family: var(--font-primary); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); color: var(--text-subtle); padding: 10px 20px; background: var(--bg-tab-strip); border-top: none; border-left: none; border-right: 1px solid var(--color-gray); border-bottom: 2px solid transparent; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; appearance: none; -webkit-appearance: none; cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); white-space: nowrap; outline: none; position: relative; margin: 0; box-shadow: none; } .tab:hover { color: var(--text-primary) background: var(--color-gray-light); border-bottom: 2px solid transparent; border-radius: 0; } .tab.active { font-weight: var(--font-weight-semibold); color: var(--color-black); background: var(--color-white); border-right: 1px solid var(--color-gray); border-bottom: 2px solid var(--color-tangerine); border-radius: 0; margin-bottom: -1px; } .tab:focus { outline: none; box-shadow: none; } .tab:focus-visible { outline: 2px solid var(--color-tangerine); outline-offset: -2px; } /* Tab panels — hidden by default; JS shows the active one */ .widget.tab-panel { display: none; position: relative; padding: 0; margin-top: 0; border: var(--border-tab-panel); border-top: none; background: var(--color-white); } /* Hard cap: never show more than 6 items per tab */ .widget.tab-panel ul.featured-content-block-grid > li:nth-of-type(n+7) { display: none; } /* Zero out Foundation row/column gaps inside tab panels */ .widget.tab-panel > .row, .widget.tab-panel > .columns, .widget.tab-panel > .row > .columns { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } /* Grid inside tab panels */ .widget.tab-panel ul.featured-content-block-grid { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0; padding: 0; width: 100%; } /* Grid cells — 3-column desktop */ .widget.tab-panel ul.featured-content-block-grid > li { display: flex; flex-direction: column; float: none; width: 33.333%; padding: 0; margin: 0; box-sizing: border-box; border-right: var(--border-tab-panel); border-bottom: var(--border-tab-panel); height: auto; } /* Responsive: 3 → 2 → 1 columns */ @media (max-width: 900px) { .widget.tab-panel ul.featured-content-block-grid > li { width: 50%; } } @media (max-width: 600px) { .widget.tab-panel ul.featured-content-block-grid > li { width: 100%; } } /* Edge borders set by JS geometry */ .widget.tab-panel ul.featured-content-block-grid > li.cf-row-end { border-right: none; } .widget.tab-panel ul.featured-content-block-grid > li.cf-last-row { border-bottom: none; } /* Anchor fills full cell */ .widget.tab-panel ul.featured-content-block-grid > li > a { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; text-decoration: none; margin: 0; padding: 0; } /* Card */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item { padding: 10px 24px; border-radius: 0; border: none; background: var(--color-white); transition: background var(--transition-fast); display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; box-sizing: border-box; margin: 0; position: static; } /* Card hover */ .widget.tab-panel ul.featured-content-block-grid > li > a:hover .catalog-grid-item { background-color: #fefcfc } /* Card title */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item__title { font-family: var(--font-primary); font-size: var(--font-size-h4); font-weight: var(--font-weight-regular); color: var(--color-black); margin-bottom: 10px; letter-spacing: var(--letter-spacing); line-height: 1.3; } /* Source pills container */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item__source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; background: transparent; border: none; padding: 0; font-size: var(--font-size-body-sm); color: var(--color-ruby); } /* Type pill — strong */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item__source strong { font-family: var(--font-mono); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--color-pill-text); background: var(--color-pill-bg); border: var(--border-pill); border-radius: 20px; padding: 4px 14px; display: inline-block; letter-spacing: 0.02em; text-transform: uppercase; } /* Duration pill — injected by footer JS */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item__source .cf-duration-pill { font-family: var(--font-mono); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--color-pill-text); background: var(--color-pill-bg); border: var(--border-pill); border-radius: 20px; padding: 4px 14px; display: inline-block; letter-spacing: 0.02em; text-transform: uppercase; } /* Card description */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item__description { font-family: var(--font-primary); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); color: var(--text-body); line-height: 1.5; flex: 1; margin-bottom: 0; } /* Card body — flex to push CTA to bottom */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item__body { display: flex; flex-direction: column; flex: 1; min-height: 0; justify-content: space-between; } /* CTA pinned to bottom */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item__cta-container { margin-top: auto; padding-top: 16px; flex-shrink: 0; } /* Hide HR divider */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item__hr { display: none; } /* "View Details" link */ .widget.tab-panel ul.featured-content-block-grid .btn--link { font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--text-ghost); background: none; border: none; border-bottom: none; padding: 0; border-radius: 0; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; margin-top: 0; transition: color var(--transition-fast); } /* Arrow */ .widget.tab-panel ul.featured-content-block-grid .btn--link::after { content: '→'; font-size: var(--font-size-body-sm); display: inline-block; text-decoration: none; transform: translateX(0); transition: transform var(--transition-fast); } /* Hover: text darkens, arrow slides right */ .widget.tab-panel ul.featured-content-block-grid > li > a:hover .btn--link { color: var(--text-secondary); text-decoration: none; } .widget.tab-panel ul.featured-content-block-grid > li > a:hover .btn--link .cf-link-text { text-decoration: underline; text-underline-offset: 2px; } .widget.tab-panel ul.featured-content-block-grid > li > a:hover .btn--link::after { transform: translateX(4px); text-decoration: none; } /* Thread flex through Foundation row/column wrappers inside each card */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item > .row { display: flex; flex-direction: column; flex: 1; width: 100%; margin: 0; padding: 0; align-items: stretch; } .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item > .row > .column.medium-12 { display: flex; flex-direction: column; flex: 1; padding: 0; align-self: stretch; height: auto; } /* First column (image) — collapse to zero */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item > .row > .column.medium-12:first-child { flex: 0 0 0px; height: 0; overflow: hidden; padding: 0; } /* Last column (body) — fill remaining space */ .widget.tab-panel ul.featured-content-block-grid .catalog-grid-item > .row > .column.medium-12:last-child { flex: 1 1 auto; height: auto; } /* ============================================================ 5. DOT GRID BACKGROUND Applies to .layout__content and .home__content so the pattern tiles seamlessly regardless of which element TI uses. ============================================================ */ #main-content, .layout__content, .home__content { background-image: radial-gradient(circle, var(--light-gray-accent) 1px, transparent 1px); background-size: 16px 16px; background-color: var(--color-white); } /* ============ */ .tab-nav-widget::before { content: ''; position: absolute; top: var(--corner-sq-offset); left: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--corner-sq-border); border-radius: var(--corner-sq-radius); background: var(--color-white); z-index: 2; pointer-events: none; } .tab-nav-widget::after { content: ''; position: absolute; top: var(--corner-sq-offset); right: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--corner-sq-border); border-radius: var(--corner-sq-radius); background: var(--color-white); z-index: 2; pointer-events: none; } .widget.tab-panel::before { content: ''; position: absolute; bottom: var(--corner-sq-offset); left: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--corner-sq-border); border-radius: var(--corner-sq-radius); background: var(--color-white); z-index: 2; pointer-events: none; } .widget.tab-panel::after { content: ''; position: absolute; bottom: var(--corner-sq-offset); right: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--corner-sq-border); border-radius: var(--corner-sq-radius); background: var(--color-white); z-index: 2; pointer-events: none; } /* ============================================================ 5. HOMEPAGE — ENTERPRISE BANNER (four-column widget) Real DOM: div.medium-6.large-3.columns × 4 Layout: [15% spacer] [50% text] [15% button] [20% spacer] ============================================================ */ /* Full-width band: white bg, hairline top/bottom borders */ .fourcol-banner-blurb { background: var(--color-white); border-top: 1px solid var(--light-gray-accent); border-bottom: 1px solid var(--light-gray-accent); width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Row: flex container so column widths are respected */ .fourcol-banner-blurb .row { display: flex; align-items: center; flex-wrap: nowrap; width: 100%; max-width: 100%; margin: 0; } /* All columns: base styles */ .fourcol-banner-blurb .medium-6.large-3.columns { display: flex; align-items: center; padding-top: 28px; padding-bottom: 36px; box-sizing: border-box; flex-shrink: 0; width: 50%; } /* Col 1 (left spacer): 22% */ .fourcol-banner-blurb .medium-6.large-3.columns:nth-of-type(1) { width: 22%; padding: 0; } /* Col 2 (heading + subtitle): 50% */ .fourcol-banner-blurb.medium-6.large-3.columns:nth-of-type(2) { width: 50%; flex-direction: column; align-items: flex-start; justify-content: center; } /* Col 3 (Learn more button): 28% */ .fourcol-banner-blurb .medium-6.large-3.columns:nth-of-type(3) { width: 28%; justify-content: flex-start; } /* Col 4 (right spacer): 20% */ .fourcol-banner-blurb .medium-6.large-3.columns:nth-of-type(4) { width: 20%; padding: 0; } /* editor-content wrapper inside col 2 */ .fourcol-banner-blurb .medium-6.large-3.columns:nth-of-type(2) .editor-content { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } /* Heading */ .fourcol-banner-blurb .medium-6.large-3.columns strong { font-family: var(--font-primary); font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); color: var(--color-black); line-height: 1.2; display: block; } /* Subtitle */ .fourcol-banner-blurb .medium-6.large-3.columns p { font-family: var(--font-primary); font-size: var(--font-size-body); color: var(--text-muted); margin: 0; line-height: 1.4; } /* "Learn more" — outline pill button. color and text-decoration keep !important to beat the global a:hover { color: black !important } rule in Section 2. */ .fourcol-banner-blurb .medium-6.large-3.columns a { display: inline-block; background: var(--color-white); border: 1px solid var(--color-btn-border); border-radius: var(--radius-pill); color: var(--color-black); font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); padding: 9px 22px; text-decoration: none; white-space: nowrap; transition: border-color var(--transition-normal), color var(--transition-normal); } .fourcol-banner-blurb .medium-6.large-3.columns a:hover { border-color: var(--color-tangerine); color: var(--color-tangerine) !important; text-decoration: none; background-color: var(--color-ruby-tint); } /* Responsive: hide spacers, stack text + button */ @media (max-width: 767px) { .fourcol-banner-blurb .row { flex-wrap: wrap; } .fourcol-banner-blurb .medium-6.large-3.columns:nth-of-type(1), .fourcol-banner-blurb .medium-6.large-3.columns:nth-of-type(4) { display: none; } .fourcol-banner-blurb .medium-6.large-3.columns:nth-of-type(2), .fourcol-banner-blurb .medium-6.large-3.columns:nth-of-type(3) { width: 90%; margin: 0 auto; padding-top: 12px; padding-bottom: 12px; } .fourcol-banner-blurb .medium-6.large-3.columns strong { font-size: var(--font-size-h4); } } /* ============================================================ 5. HOMEPAGE — cfuEnterpriseCard Two-column card: feature list (left) + sign-in CTA (right) ============================================================ */ .home.index .cfuEnterpriseCard { max-width: min(70%, 1200px); margin: 0 auto; background: var(--white-color); border: 1px solid var(--light-gray-accent); border-top: none; border-bottom: none; padding: 20px; position: relative; } .home.index .cfuEnterpriseCard .row { position: relative; display: flex; flex-direction: row; align-items: stretch; background: var(--color-warm-card-bg); border: var(--border-warm); margin: 0 auto; max-width: 90%; width: 100%; box-sizing: border-box; } /* Corner squares */ .home.index .cfuEnterpriseCard .row::before { content: ''; position: absolute; top: var(--corner-sq-offset); left: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--border-warm); border-radius: var(--corner-sq-radius); background: var(--color-warm-card-bg); z-index: 2; pointer-events: none; } .home.index .cfuEnterpriseCard .row::after { content: ''; position: absolute; bottom: var(--corner-sq-offset); left: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--border-warm); border-radius: var(--corner-sq-radius); background: var(--color-warm-card-bg); z-index: 2; pointer-events: none; } .home.index .cfuEnterpriseCard .medium-6.columns { box-sizing: border-box; padding: 24px 28px; margin: 0; flex-shrink: 0; position: relative; } .home.index .cfuEnterpriseCard .medium-6.columns:first-of-type { width: 60%; background: var(--color-warm-card-bg); border-right: var(--border-warm); } .home.index .cfuEnterpriseCard .medium-6.columns:last-of-type { width: 40%; background-color: var(--color-warm-card-bg); background: var(--geometric-fade-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-position: 100% 100%,100% 100%; background-repeat: no-repeat; background-size: cover,cover; } /* Top-right and bottom-right corner squares */ .home.index .cfuEnterpriseCard .medium-6.columns:last-of-type::before { content: ''; position: absolute; top: var(--corner-sq-offset); right: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--border-warm); border-radius: var(--corner-sq-radius); background: var(--color-warm-card-bg); z-index: 2; pointer-events: none; } .home.index .cfuEnterpriseCard .medium-6.columns:last-of-type::after { content: ''; position: absolute; bottom: var(--corner-sq-offset); right: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--border-warm); border-radius: var(--corner-sq-radius); background: var(--color-warm-card-bg); z-index: 2; pointer-events: none; } .home.index .cfuEnterpriseCard .medium-6.columns:last-of-type .editor-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; height: 100%; } .home.index .cfuEnterpriseCard .medium-6.columns:last-of-type p { font-family: var(--font-primary); font-size: var(--font-size-body-lg); color: var(--color-black); margin: 0; line-height: 1.4; } .home.index .cfuEnterpriseCard .enterprisecard-cta { display: block; margin-top: 8px; } .home.index .cfuEnterpriseCard .enterprisecard-cta a { display: inline-block; background: var(--color-white); border: 1px solid var(--color-btn-border); border-radius: var(--radius-pill); color: var(--color-black) ; font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); padding: 9px 28px; text-decoration: none; white-space: nowrap; transition: border-color var(--transition-normal), color var(--transition-normal); } .home.index .cfuEnterpriseCard .enterprisecard-cta a:hover { border-color: var(--color-tangerine); color: var(--color-tangerine) !important; text-decoration: none; background-color: var(--color-ruby-tint); } .home.index .cfuEnterpriseCard .cfuEnterpriseFeatures__heading { font-family: var(--font-primary); font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); color: var(--color-black); margin: 0 0 26px 0; line-height: 1.3; } .home.index .cfuEnterpriseCard .cfuEnterpriseFeatures__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .home.index .cfuEnterpriseCard .cfuEnterpriseFeatures__item { display: flex; align-items: center; gap: 12px; font-family: var(--font-primary); font-size: var(--font-size-body); color: var(--text-body); line-height: 2.5; margin: 0; padding: 0; list-style: none; } .home.index .cfuEnterpriseCard .cfuEnterpriseFeatures__item svg, .home.index .cfuEnterpriseCard .cfuEnterpriseFeatures__item img { width: 32px; height: 32px; flex-shrink: 0; } @media (max-width: 767px) { .home.index .cfuEnterpriseCard { max-width: 92%; } .home.index .cfuEnterpriseCard .row { flex-direction: column; } .home.index .cfuEnterpriseCard .medium-6.columns:first-of-type, .home.index .cfuEnterpriseCard .medium-6.columns:last-of-type { width: 100%; } .home.index .cfuEnterpriseCard .medium-6.columns:first-of-type { border-right: none; border-bottom: 1px solid var(--color-warm-border); } } /* ============================================================ 5. HOMEPAGE — cfuLiveCarousel Horizontally scrolling carousel of live/instructor-led courses ============================================================ */ .home.index .cfuLiveCarousel { background: var(--color-white); max-width: min(70%, 1200px); border-right: 1px solid var(--light-gray-accent); border-left: 1px solid var(--light-gray-accent); position: relative; } .home.index .cfuLiveCarousel .row { margin: 0 auto; box-sizing: border-box; } .home.index .cfuLiveCarousel .widget__title { font-family: var(--font-primary); font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); color: var(--color-black); text-align: left; margin: 0 0 24px 0; line-height: 1.2; } .home.index .cfuLiveCarousel ul.featured-content-block-grid li { height: 220px; } .home.index .cfuLiveCarousel a.catalog-item { text-decoration: none; display: block; height: 100%; } .home.index .cfuLiveCarousel .featured-content-multi-carousel-item { background: var(--color-white); border: var(--border-ui); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; height: 90%; box-sizing: border-box; text-align: left; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } /* Hover: ruby border + lift shadow — matches catalog card hover */ .home.index .cfuLiveCarousel a.catalog-item:hover .featured-content-multi-carousel-item { border-color: var(--color-ruby); box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.06); } .home.index .cfuLiveCarousel .featured-content-multi-carousel-item__body { padding: 20px; display: flex; flex-direction: column; flex: 1; justify-content: space-between; text-align: left; } .home.index .cfuLiveCarousel .featured-content-multi-carousel-item__title { font-family: var(--font-primary); font-size: var(--font-size-sm-heading); font-weight: var(--font-weight-semibold); color: var(--color-black); margin: 0 0 8px 0; line-height: 1.3; letter-spacing: var(--letter-spacing); text-align: left; } .home.index .cfuLiveCarousel .featured-content-multi-carousel-item__start-date { font-family: var(--font-primary); font-size: var(--font-size-body-sm); color: var(--text-muted); margin: 0 0 6px 0; text-align: left; } .home.index .cfuLiveCarousel .featured-content-multi-carousel-item__source { margin: 0; padding: 0; background: none; border: none; text-align: left; } .home.index .cfuLiveCarousel .featured-content-multi-carousel-item__source strong { font-family: var(--font-mono); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--color-ruby); background: var(--color-pill-bg); border: var(--border-pill); border-radius: 20px; padding: 4px 14px; display: inline-block; letter-spacing: 0.02em; text-transform: uppercase; } /* "view details →" pseudo-element — matches catalog .btn--link default state */ .home.index .cfuLiveCarousel .featured-content-multi-carousel-item__body::after { content: 'View Details'; font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--text-ghost); display: block; text-align: right; transition: color var(--transition-normal); margin-top: 10%; } /* Hover: matches catalog .btn--link hover — --text-secondary + underline */ .home.index .cfuLiveCarousel a.catalog-item:hover .featured-content-multi-carousel-item__body::after { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; } /* Fade overlay on right edge */ .cfuLiveCarousel::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 100%; background: linear-gradient(to right, transparent, var(--color-white)); pointer-events: none; z-index: 1; } .home.index .cfuLiveCarousel .featured-content-multi-carousel__nav-right { background: none; padding: 8px; cursor: pointer; color: var(--color-black); z-index: 1; transition: border-color 0.2s ease, color 0.2s ease; } .home.index .cfuLiveCarousel .featured-content-multi-carousel__nav-right:hover { border-color: var(--color-tangerine); } @media (max-width: 767px) { .home.index .cfuLiveCarousel .row { max-width: 92%; } .home.index .cfuLiveCarousel ul.featured-content-block-grid li { height: auto; } } .cfuLiveCarousel .catalog-item__queue-button{ display: none; } /* ============================================================ 6. CUSTOM HEADER — LEVEL 1 (Global Nav Bar) 7. CUSTOM HEADER — LEVEL 2 (level2Menu, l2nav) 8. CUSTOM HEADER — RESPONSIVE / MOBILE The full custom header: Cloudflare global nav + University level 2 bar. Responsive hamburger drawer at ≤1279px. ============================================================ */ .index .header--microsite, .dashboard .header--dashboard, .page .header--microsite { position: absolute; top: 0; left: 0; width: 100%; padding: 0; padding: 0 8%; z-index: 2000; } .index .header--microsite .company__beta-logo, .page .header--microsite .company__beta-logo { position: absolute; top: 15px; left: 8%; } .header--microsite .top-bar { border: 0; display: inline-block; width: calc(100% - 160px - 300px);margin-left: 300px; background: none; padding: 0px 0; margin-top: 12px;} .nav--top {margin-top: 12px;} .header--microsite .top-bar .top-bar-section { display: block; text-align: center; width: 100%; } .header--microsite .top-bar .top-bar-section ul { display: block; width: 100%; text-align: center; } .header--microsite .top-bar .top-bar-section::after { content: ''; display: block; clear: both; } .header--microsite .top-bar .top-bar-section li { display: inline-block; float: none; padding: 0; background: none; } .header--microsite .top-bar .top-bar-section li:not(.has-form) a:not(.button) { background: none; color: var(--color-white); } .nav--top ul li:nth-last-child(3) { display: none; } /* Custom Header CSS - Start ----------------> */ .index .header--microsite, .dashboard .header--dashboard, .page .header--microsite {position: relative; padding: 0;} .header--article, .header--dashboard, .header--microsite {padding: 0;} .nav--top ul a, .nav--top ul button {padding: 8px 16px;} .nav--top #cart-button {display: none;} .nav--top ul li a.rounded-md, .nav--top ul li a.rounded-md:hover {background: var(--color-ruby); color: var(--color-white);} .nav--top {position: absolute; top: 52px; right: calc((100% - 1200px) / 2); z-index: 1001;} .application .container {max-width: 100%;} .customHeader .cloudflare-nav { background: var(--color-white); border-bottom: 1px solid var(--color-gray); position: relative; z-index: 1000; padding-top: 40px;} .customHeader .nav-container {max-width: min(94%, 1400px);margin: 0 auto;display: flex;align-items: center;justify-content: flex-start;padding: 8px 20px;height: 64px;} .customHeader .nav-brand {display: flex;align-items: center;margin-right: 3em;} .customHeader .nav-menu { display: flex; align-items: center; gap: 32px;} .customHeader .nav-item, .customHeader .nav-item a { position: static; cursor: pointer; font-size: var(--font-size-body); padding: 20px 0; font-family: var(--font-primary); font-weight: var(--font-weight-medium); color: var(--text-primary); transition: color 0.2s ease;} .customHeader .nav-item:hover, .customHeader .nav-item a:hover { color: var(--color-ruby);} .customHeader .nav-actions { display: flex; align-items: center; gap: 12px;} .customHeader .login-btn { padding: 8px 16px; border: 1px solid var(--color-gray); background: var(--color-white); border-radius: 6px; font-weight: var(--font-weight-medium); cursor: pointer; transition: all 0.2s ease;} .customHeader .login-btn:hover { border-color: var(--color-tangerine); color: var(--color-tangerine);} /* Mega Menu Styles */ .customHeader .mega-menu { position: absolute; top: 105px; left: 5%; right: 0; background: var(--color-white); border: 1px solid var(--color-gray); border-top: none; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; display: flex; min-height: 500px; z-index: 9999; backdrop-filter: blur(10px); width: 90%;} .customHeader .nav-item:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0);} .customHeader .menu-content { flex: 1; padding: 40px; display: flex; flex-direction: column; gap: 40px; background: var(--color-white);} .customHeader .menu-sidebar { width: 280px; background: var(--bg-menu-sidebar); padding: 40px 30px; border-left: 1px solid var(--color-gray); position: relative; z-index: 1;} .customHeader .menu-section { margin-bottom: 32px;} .customHeader .section-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px;} .customHeader .section-header h3 { font-size: var(--font-size-sm-heading); font-weight: var(--font-weight-semibold); margin: 0 0 8px 0; color: var(--text-primary);} .customHeader .section-header p { color: var(--text-muted); margin: 0; line-height: 1.5;} .customHeader .section-title { font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); color: var(--color-ruby); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 20px 0;} .customHeader .menu-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px;} .customHeader .menu-column h4 { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0 0 12px 0;} .customHeader .menu-column p { font-size: var(--font-size-label); color: var(--text-muted); margin: 0 0 16px 0; line-height: 1.4;} .customHeader .menu-column ul { list-style: none; padding: 0; margin: 0;} .customHeader .menu-column li { padding: 4px 0; font-size: var(--font-size-label); color: var(--text-primary); cursor: pointer; transition: color 0.2s ease;} .customHeader .menu-column li:hover { color: var(--color-ruby);} /* Mobile Menu Toggle */ .customHeader .mobile-menu-toggle { display: none; flex-direction: column; cursor: pointer; padding: 8px;} .customHeader .mobile-menu-toggle span { width: 20px; height: 2px; background: var(--text-primary); margin: 5px 0; transition: 0.3s; display: block;} .customHeader .mobile-menu-toggle::before, .customHeader .mobile-menu-toggle::after {content:''; display: block; width: 20px; height: 2px; background: var(--text-primary); margin: 2px 0; transition: 0.3s; transform-origin: left center;} body.openMenu .customHeader .mobile-menu-toggle span {opacity: 0;} body.openMenu .customHeader .mobile-menu-toggle::before {transform: rotate(45deg);} body.openMenu .customHeader .mobile-menu-toggle::after {transform: rotate(-45deg);} .customHeader .nav-actions {visibility: hidden; opacity: 0;} .customHeader .mega-menu .menu-back {display: none;} /* Level 2 menu for Cloudflare University */ .level2Menu {border-top: 1px solid var(--color-gray);} .level2Menu .nav-container { display: flex; justify-content:flex-start} .level2Menu .university {font-weight: var(--font-weight-bold); width: 210px; flex-shrink: 0;} .level2Menu .university a {color: inherit; text-decoration: none; transition: color 0.2s ease;} .level2Menu .university a:hover {color: var(--color-ruby);} .level2Menu .l2nav ul {display: flex; align-items: center; list-style: none; margin: 0; padding: 0;} .level2Menu .l2nav ul > li {position: relative; margin-right: 1.1em;} .level2Menu .l2nav ul > li:last-child {margin-right: 0;} .level2Menu .l2nav ul > li a {display: block; color: inherit; text-decoration: none; font-size: var(--font-size-body); padding: 20px 0; font-family: var(--font-primary); font-weight: var(--font-weight-medium);} .level2Menu .l2nav ul > li a:hover {color: var(--color-ruby);} .level2Menu .l2nav ul > li.submenu a i {display: inline-block; vertical-align: middle; font-size: var(--font-size-body-sm); margin-left: 4px; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; font-style: normal;} .level2Menu .l2nav ul > li.submenu ul {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 240px; display: none; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); padding: 12px 0; border-radius: 12px; overflow: hidden; background: var(--color-white);} .level2Menu .l2nav ul > li.submenu:hover ul {display: block;} .level2Menu .l2nav ul > li.submenu ul li {display: block; margin: 0;} .level2Menu .l2nav ul > li.submenu ul li a {display: block; padding: 8px 20px;} .level2Menu .l2nav ul > li.submenu ul li a:hover {background: var(--bg-subtle);} /* Level 2 Account dropdown */ .level2Menu .l2nav ul > li.l2account {margin-left: auto; margin-right: 0;} /* Level 2 right slot: search form + auth button */ .level2Menu .l2-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin: 1em; } .l2-search-form { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--color-white); border: 1px solid var(--color-gray); border-radius: var(--radius-pill); transition: border-color var(--transition-normal); min-width: 200px; max-width: 400px; width: 300px; box-sizing: border-box; } .l2-search-form:focus-within, .l2-search-form:hover { border-color: var(--color-tangerine); } .l2-search-icon { flex-shrink: 0; color: var(--text-icon-muted); transition: color var(--transition-normal); } .l2-search-form:focus-within .l2-search-icon, .l2-search-form:hover .l2-search-icon { color: var(--color-tangerine); } .l2-search-form .l2-search-input { flex: 1; min-width: 0; border: none; outline: none; box-shadow: none; background: transparent; font-family: var(--font-primary); font-size: var(--font-size-body-sm); color: var(--text-primary); height: auto; margin: 0; padding: 0; line-height: 1.2; } .l2-search-form .l2-search-input:focus { border: none; outline: none; box-shadow: none; background: transparent; } .l2-search-input::placeholder { color: var(--text-icon-muted); opacity: 1; } #cfu-auth { flex-shrink: 0; display: flex; align-items: center; } /* Responsive Design */ @media (max-width: 1279px) { body.openMenu {overflow: hidden;} .customHeader .nav-container {display: block; height: auto; padding: 0;} .customHeader .nav-brand {display: inline-block;} .customHeader .mobile-menu-toggle {display: inline-block; float: right; padding: 5px 20px; margin-top: 12px;} .customHeader .nav-actions {display: none;} .nav--top {display: block; position: static; margin: 12px 0;} .customHeader .menuWrap {display: none; width: 100vw; left: 0; background: var(--color-white); overflow-x: hidden; padding-top: 20px; overflow-y: hidden;} .customHeader .menuWrap .nav-menu {display: block;} .openMenu .customHeader .menuWrap {display: block; position: relative; width: 100%;} .customHeader .nav-item {padding: 0; border-bottom: 1px solid var(--bg-subtle);} .customHeader .nav-item > span {padding: 1rem; /* border-bottom: 1px solid var(--bg-subtle); */ display: block;} .customHeader .nav-item > span::before {content: '\f054'; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; position: absolute; right: 1rem;} .customHeader .mega-menu {right: 0; top: 0; left: 100%; width: 100%; visibility: visible; opacity: 1; transform: none;} .customHeader .nav-item.active .mega-menu {left: 0%; display: block;} .customHeader .mega-menu {padding-top: 60px;} .customHeader .mega-menu .menu-back {display: block; position: absolute; top: 0; padding: 0 1rem; border-bottom: 1px solid var(--bg-subtle); line-height: 57px; width: 100%;} .customHeader .mega-menu .menu-back i {display: inline-block; /* margin-right: 12px; */ width: 46px; height: 28px; text-align: center; cursor: pointer;} .customHeader .mega-menu .menu-back span {display: inline-block; border-bottom: 2px solid rgba(246 130 31);} .customHeader .nav-brand {padding: 5px 20px;} .customHeader .cloudflare-nav {padding: 10px 0;} .openMenu .customHeader .cloudflare-nav {position: fixed; top: 0; left: 0; width: 100vw; height: 100%; overflow-x: hidden; overflow-y: auto;} .level2Menu {display: none;} .openMenu .level2Menu {display: block;} .customHeader .globalNav {text-align: left;} .customHeader .globalNav {position: relative; background: rgba(248 248 251);} .customHeader .globalNav::after {content: ''; display: block; clear: both;} /* .level2Menu {padding: 20px 0;} */ .level2Menu .university {padding: 1rem;} .level2Menu .l2nav ul > li {display: block; border-bottom: 1px solid var(--bg-subtle); margin: 0;} .level2Menu .l2nav ul > li > a {padding: 1rem;} .level2Menu .l2Signup {padding: 1rem;} .level2Menu .l2Signup a {display: inline-block;} .level2Menu .l2nav ul > li.submenu ul {position: relative; width: 100%; margin: 0 auto; background: var(--bg-subtle); padding: 0; left: auto; transform: none; border-radius: 0;} .level2Menu .l2nav ul > li.submenu a i {position: absolute; right: 20px; top: 20px; transform: rotate(-90deg);} } @media (max-width: 1024px) { /* .customHeader .nav-container { padding: 0 16px; } */ /* .customHeader .nav-menu { gap: 24px; } */ .customHeader .menu-content { padding: 32px 24px; } .customHeader .menu-sidebar { width: 240px; padding: 32px 20px; } } @media (max-width: 768px) { .customHeader .nav-menu { display: none; /* position: absolute; top: 100%; left: 0; right: 0; */ background: var(--color-white); flex-direction: column; gap: 0; } .customHeader .nav-menu.active { display: flex; } .customHeader .nav-item { width: 100%; border-bottom: 1px solid var(--bg-subtle); } .customHeader .nav-item:last-child { border-bottom: none; } .customHeader .mega-menu { opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; flex-direction: column; min-height: auto; max-height: none; margin-top: 16px; } .customHeader .menu-content { padding: 20px; gap: 24px; } .customHeader .menu-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--color-gray); padding: 20px; } .customHeader .menu-columns { grid-template-columns: 1fr; gap: 20px; } .customHeader .cxo-grid, .pricing-grid { grid-template-columns: 1fr; gap: 12px; } .customHeader .section-header { gap: 12px; } .customHeader .section-header h3 { font-size: var(--font-size-body); } .customHeader .nav-actions { gap: 8px; } .customHeader .login-btn, .cta-btn { padding: 6px 12px; font-size: var(--font-size-body-sm); } } @media (max-width: 480px) { /* .customHeader .nav-container { padding: 0 12px; height: 56px; } .customHeader .menu-content { padding: 16px; gap: 20px; } .customHeader .menu-sidebar { padding: 16px; } .customHeader .section-header { flex-direction: column; gap: 8px; } .customHeader .cxo-item, .product-item { gap: 8px; } .customHeader .cxo-icon { width: 28px; height: 28px; font-size: var(--font-size-body-sm); } .customHeader .industry-tags { gap: 6px; } .customHeader .tag { padding: 3px 6px; font-size: var(--font-size-small); } .customHeader .nav-actions { flex-direction: column; gap: 4px; } .customHeader .login-btn, .cta-btn { padding: 4px 8px; font-size: 12px; } */ } /* Touch-friendly improvements */ @media (hover: none) and (pointer: coarse) { .customHeader .menu-column li, .sidebar-links a, .engage-item { padding: 8px 0; font-size: var(--font-size-body-sm); } .customHeader .tag { padding: 8px 12px; font-size: var(--font-size-label); } .customHeader .cta-button { padding: 16px 20px; font-size: 16px; } } /* Mega Menu Styles */ .customHeader .mega-menu::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-white); z-index: -1;} /* Learner dashboard */ .learn.dashboard .hero-area { background: var(--hero-bg-image); color: var(--color-white); padding: 35px 16px 10px; max-width: 1200px; margin: 0 auto; } .learn.dashboard .h2.widget__title { text-align: left; } .learn.dashboard .hero-area .h2.widget__title { font-style: normal; font-weight: 400; font-size: 64px; line-height: 72px; margin-bottom: 25px; color: var(--color-white); } .learn.dashboard .widget--dashboard-stats { max-width: 1200px; margin: 0 auto; } .index .header--microsite, .dashboard .header--dashboard, .page .header--microsite { position: absolute; top: 0; left: 0; width: 100%; padding: 0; padding: 0 8%; z-index: 2000; } .index .header--microsite .company__beta-logo, .page .header--microsite .company__beta-logo { position: absolute; top: 15px; left: 8%; } .header--microsite .top-bar { border: 0; display: inline-block; width: calc(100% - 160px - 300px);margin-left: 300px; background: none; padding: 0px 0; margin-top: 12px;} .nav--top {margin-top: 12px;} .header--microsite .top-bar .top-bar-section { display: block; text-align: center; width: 100%; } .header--microsite .top-bar .top-bar-section ul { display: block; width: 100%; text-align: center; } .header--microsite .top-bar .top-bar-section::after { content: ''; display: block; clear: both; } .header--microsite .top-bar .top-bar-section li { display: inline-block; float: none; padding: 0; background: none; } .header--microsite .top-bar .top-bar-section li:not(.has-form) a:not(.button) { background: none; color: var(--color-white); } .nav--top ul li:nth-last-child(3) { display: none; } /* Custom Header CSS - Start ----------------> */ /* ============================================================ 6. CUSTOM HEADER — LEVEL 1 (Global Nav Bar) 7. CUSTOM HEADER — LEVEL 2 (level2Menu, l2nav) 8. CUSTOM HEADER — RESPONSIVE / MOBILE The full custom header: Cloudflare global nav + University level 2 bar. Responsive hamburger drawer at ≤1279px. ============================================================ */ /* sign in button */ .header__inner .nav--top { top: 42px; } .header__inner nav.nav.nav--top ul li a { background: var(--color-white); color: var(--color-black); padding: 8px 16px; border-radius: 8px; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); font-family: var(--font-primary); text-transform: none; border: 1px solid var(--color-gray); transition: border-color var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal); } .header__inner nav.nav.nav--top ul li a:hover { background: var(--bg-row-hover); border-color: var(--color-gray); box-shadow: var(--shadow-sm); color: var(--color-black) !important; text-decoration: none; } .index .header--microsite, .dashboard .header--dashboard, .page .header--microsite {position: relative; padding: 0;} .header--article, .header--dashboard, .header--microsite {padding: 0;} .nav--top #cart-button {display: none;} .nav--top ul li a.rounded-md, .nav--top ul li a.rounded-md:hover {background: var(--color-ruby); color: var(--color-white);} .nav--top {position: absolute; top: 52px; right: calc((100% - 1200px) / 2); z-index: 1001;} .application .container {max-width: 100%;} .customHeader .nav-brand { display: flex; align-items: center;} .customHeader .nav-menu { display: flex; align-items: center; gap: 32px;} .customHeader .nav-item, .customHeader .nav-item a { position: static; cursor: pointer; font-size: var(--font-size-body); padding: 20px 0; font-family: var(--font-primary); font-weight: var(--font-weight-medium); color: var(--text-primary); transition: color 0.2s ease;} .customHeader .nav-item:hover, .customHeader .nav-item a:hover { color: var(--color-ruby);} .customHeader .nav-actions { display: flex; align-items: center; gap: 12px;} .customHeader .login-btn { padding: 8px 16px; border: 1px solid var(--color-gray); background: var(--color-white); border-radius: 6px; font-weight: var(--font-weight-medium); cursor: pointer; transition: all 0.2s ease;} .customHeader .login-btn:hover { border-color: var(--color-tangerine); color: var(--color-tangerine);} /* Mega Menu Styles */ .customHeader .mega-menu { position: absolute; top: 105px; left: 5%; right: 0; background: var(--color-white); border: 1px solid var(--color-gray); border-top: none; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; display: flex; min-height: 500px; z-index: 9999; backdrop-filter: blur(10px); width: 90%;} .customHeader .nav-item:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0);} .customHeader .menu-content { flex: 1; padding: 40px; display: flex; flex-direction: column; gap: 40px; background: var(--color-white);} .customHeader .menu-sidebar { width: 280px; background: var(--bg-menu-sidebar); padding: 40px 30px; border-left: 1px solid var(--color-gray); position: relative; z-index: 1;} .customHeader .menu-section { margin-bottom: 32px;} .customHeader .section-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px;} .customHeader .section-header h3 { font-size: var(--font-size-sm-heading); font-weight: var(--font-weight-semibold); margin: 0 0 8px 0; color: var(--text-primary);} .customHeader .section-header p { color: var(--text-muted); margin: 0; line-height: 1.5;} .customHeader .section-title { font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); color: var(--color-ruby); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 20px 0;} .customHeader .menu-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px;} .customHeader .menu-column h4 { font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin: 0 0 12px 0;} .customHeader .menu-column p { font-size: var(--font-size-label); color: var(--text-muted); margin: 0 0 16px 0; line-height: 1.4;} .customHeader .menu-column ul { list-style: none; padding: 0; margin: 0;} .customHeader .menu-column li { padding: 4px 0; font-size: var(--font-size-label); color: var(--text-primary); cursor: pointer; transition: color 0.2s ease;} .customHeader .menu-column li:hover { color: var(--color-ruby);} /* Mobile Menu Toggle */ .customHeader .mobile-menu-toggle { display: none; flex-direction: column; cursor: pointer; padding: 8px;} .customHeader .mobile-menu-toggle span { width: 20px; height: 2px; background: var(--text-primary); margin: 5px 0; transition: 0.3s; display: block;} .customHeader .mobile-menu-toggle::before, .customHeader .mobile-menu-toggle::after {content:''; display: block; width: 20px; height: 2px; background: var(--text-primary); margin: 2px 0; transition: 0.3s; transform-origin: left center;} body.openMenu .customHeader .mobile-menu-toggle span {opacity: 0;} body.openMenu .customHeader .mobile-menu-toggle::before {transform: rotate(45deg);} body.openMenu .customHeader .mobile-menu-toggle::after {transform: rotate(-45deg);} .customHeader .nav-actions {visibility: hidden; opacity: 0;} .customHeader .mega-menu .menu-back {display: none;} /* Level 2 menu for Cloudflare University */ .level2Menu {border-top: 1px solid var(--color-gray);} .level2Menu .nav-container { display: flex; justify-content:flex-start} .level2Menu .university {font-weight: var(--font-weight-bold); width: 210px; flex-shrink: 0;} .level2Menu .university a {color: inherit; text-decoration: none; transition: color 0.2s ease;} .level2Menu .university a:hover {color: var(--color-ruby);} .level2Menu .l2nav {margin-left: 0; flex: 1;} .level2Menu .l2nav ul {display: flex; align-items: center; list-style: none; margin: 0; padding: 0;} .level2Menu .l2nav ul > li:last-child {margin-right: 0;} .level2Menu .l2nav ul > li a {display: block; color: inherit; text-decoration: none; font-size: var(--font-size-body); padding: 20px 0; font-family: var(--font-primary); font-weight: var(--font-weight-medium);} .level2Menu .l2nav ul > li a:hover {color: var(--color-ruby);} .level2Menu .l2nav ul > li.submenu a i {display: inline-block; vertical-align: middle; font-size: var(--font-size-body-sm); margin-left: 4px; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; font-style: normal;} .level2Menu .l2nav ul > li.submenu ul {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 240px; display: none; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); padding: 12px 0; border-radius: 12px; overflow: hidden; background: var(--color-white);} .level2Menu .l2nav ul > li.submenu:hover ul {display: block;} .level2Menu .l2nav ul > li.submenu ul li {display: block; margin: 0;} .level2Menu .l2nav ul > li.submenu ul li a {display: block; padding: 8px 20px;} .level2Menu .l2nav ul > li.submenu ul li a:hover {background: var(--bg-subtle);} /* Level 2 Account dropdown */ .level2Menu .l2nav ul > li.l2account {margin-left: auto; margin-right: 0;} /* Responsive Design */ @media (max-width: 1279px) { body.openMenu {overflow: hidden;} .customHeader .nav-container {display: block; height: auto; padding: 0;} .customHeader .nav-brand {display: inline-block;} .customHeader .mobile-menu-toggle {display: inline-block; float: right; padding: 5px 20px; margin-top: 12px;} .customHeader .nav-actions {display: none;} .nav--top {display: block; position: static; margin: 12px 0;} .customHeader .menuWrap {display: none; width: 100vw; left: 0; background: var(--color-white); overflow-x: hidden; padding-top: 20px; overflow-y: hidden;} .customHeader .menuWrap .nav-menu {display: block;} .openMenu .customHeader .menuWrap {display: block; position: relative; width: 100%;} .customHeader .nav-item {padding: 0; border-bottom: 1px solid var(--bg-subtle);} .customHeader .nav-item > span {padding: 1rem; /* border-bottom: 1px solid var(--bg-subtle); */ display: block;} .customHeader .nav-item > span::before {content: '\f054'; font-family: 'Font Awesome\ 5 Free'; font-weight: 900; position: absolute; right: 1rem;} .customHeader .mega-menu {right: 0; top: 0; left: 100%; width: 100%; visibility: visible; opacity: 1; transform: none;} .customHeader .nav-item.active .mega-menu {left: 0%; display: block;} .customHeader .mega-menu {padding-top: 60px;} .customHeader .mega-menu .menu-back {display: block; position: absolute; top: 0; padding: 0 1rem; border-bottom: 1px solid var(--bg-subtle); line-height: 57px; width: 100%;} .customHeader .mega-menu .menu-back i {display: inline-block; /* margin-right: 12px; */ width: 46px; height: 28px; text-align: center; cursor: pointer;} .customHeader .mega-menu .menu-back span {display: inline-block; border-bottom: 2px solid rgba(246 130 31);} .customHeader .nav-brand {padding: 5px 20px;} .customHeader .cloudflare-nav {padding: 10px 0;} .openMenu .customHeader .cloudflare-nav {position: fixed; top: 0; left: 0; width: 100vw; height: 100%; overflow-x: hidden; overflow-y: auto;} .level2Menu {display: none;} .openMenu .level2Menu {display: block;} .customHeader .globalNav {text-align: left;} .customHeader .globalNav {position: relative; background: rgba(248 248 251);} .customHeader .globalNav::after {content: ''; display: block; clear: both;} /* .level2Menu {padding: 20px 0;} */ .level2Menu .university {padding: 1rem;} .level2Menu .l2nav ul > li {display: block; border-bottom: 1px solid var(--bg-subtle); margin: 0;} .level2Menu .l2nav ul > li > a {padding: 1rem;} .level2Menu .l2Signup {padding: 1rem;} .level2Menu .l2Signup a {display: inline-block;} .level2Menu .l2nav ul > li.submenu ul {position: relative; width: 100%; margin: 0 auto; background: var(--bg-subtle); padding: 0; left: auto; transform: none; border-radius: 0;} .level2Menu .l2nav ul > li.submenu a i {position: absolute; right: 20px; top: 20px; transform: rotate(-90deg);} } @media (max-width: 1024px) { /* .customHeader .nav-container { padding: 0 16px; } */ /* .customHeader .nav-menu { gap: 24px; } */ .customHeader .menu-content { padding: 32px 24px; } .customHeader .menu-sidebar { width: 240px; padding: 32px 20px; } } @media (max-width: 768px) { .customHeader .nav-menu { display: none; /* position: absolute; top: 100%; left: 0; right: 0; */ background: var(--color-white); flex-direction: column; gap: 0; } .customHeader .nav-menu.active { display: flex; } .customHeader .nav-item { width: 100%; border-bottom: 1px solid var(--bg-subtle); } .customHeader .nav-item:last-child { border-bottom: none; } .customHeader .mega-menu { opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; flex-direction: column; min-height: auto; max-height: none; margin-top: 16px; } .customHeader .menu-content { padding: 20px; gap: 24px; } .customHeader .menu-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--color-gray); padding: 20px; } .customHeader .menu-columns { grid-template-columns: 1fr; gap: 20px; } .customHeader .cxo-grid, .pricing-grid { grid-template-columns: 1fr; gap: 12px; } .customHeader .section-header { gap: 12px; } .customHeader .section-header h3 { font-size: var(--font-size-body); } .customHeader .nav-actions { gap: 8px; } .customHeader .login-btn, .cta-btn { padding: 6px 12px; font-size: var(--font-size-body-sm); } } @media (max-width: 480px) { /* .customHeader .nav-container { padding: 0 12px; height: 56px; } .customHeader .menu-content { padding: 16px; gap: 20px; } .customHeader .menu-sidebar { padding: 16px; } .customHeader .section-header { flex-direction: column; gap: 8px; } .customHeader .cxo-item, .product-item { gap: 8px; } .customHeader .cxo-icon { width: 28px; height: 28px; font-size: var(--font-size-body-sm); } .customHeader .industry-tags { gap: 6px; } .customHeader .tag { padding: 3px 6px; font-size: var(--font-size-small); } .customHeader .nav-actions { flex-direction: column; gap: 4px; } .customHeader .login-btn, .cta-btn { padding: 4px 8px; font-size: 12px; } */ } /* Touch-friendly improvements */ @media (hover: none) and (pointer: coarse) { .customHeader .menu-column li, .sidebar-links a, .engage-item { padding: 8px 0; font-size: var(--font-size-body-sm); } .customHeader .tag { padding: 8px 12px; font-size: var(--font-size-label); } .customHeader .cta-button { padding: 16px 20px; font-size: 16px; } } /* Mega Menu Styles */ .customHeader .mega-menu::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-white); z-index: -1;} /* ============================================================ 9. CATALOG PAGE Standard catalog widget width constraint + global catalog rules. Full card redesign (umCatalog2) is in Section 15. ============================================================ */ /* Catalog page standard widget */ .widget--catalog.widget--catalog_standard { padding: 0; max-width: min(90%, 1280px); margin: 0 auto; background: white; padding: 10px 40px; border-left: 1px solid var(--light-gray-accent); border-right: 1px solid var(--light-gray-accent); } .catalog-banner { background-color: white; border-bottom: 1px solid var(--light-gray-accent); margin: 0 auto; } .catalog-banner .editor-content{ width: min(90%, 1280px); margin: 0 auto; display: block; } .catalog-search-bar { padding: 5px; border-radius: var(--radius-xl); } .umCatalog2 .catalog-search-bar { border: none; } .catalog-filters__selections .catalog-content-type { width: 100%; } select { border: none; background-color: transparent; } .catalog-search-bar .catalog-display-type .btn { margin: 0; } .catalog-active-filter__remove { color: var(--color-blackberry); } /* ── Back Home link — catalog banner Mirrors "View Details →" ghost link pattern from homepage tab panels. Arrow via ::before (left-facing), slides -4px on hover. Text underlines on hover via .cfu-back-text span (same technique as .cf-link-text on tab panel cards — arrow excluded from underline). */ .cfu-back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--text-ghost) !important; text-decoration: none; padding: 0; padding-left: 24px; margin-top: 8px; transition: color var(--transition-fast); } .cfu-back-link::before { content: '←'; font-size: var(--font-size-body-sm); display: inline-block; text-decoration: none; transform: translateX(0); transition: transform var(--transition-fast); } .cfu-back-link:hover { color: var(--text-secondary); text-decoration: none; } .cfu-back-link:hover .cfu-back-text { text-decoration: underline; text-underline-offset: 2px; } .cfu-back-link:hover::before { transform: translateX(-4px); } /* ============================================================ 10. REMOVED - WAS Legacy Course Page ============================================================ */ /* ============================================================ 11. LEARNER DASHBOARD — HERO & LAYOUT Mirrors the sandbox homepage hero pattern exactly: - White outer band (.hero-area equivalent) with bottom border - Orange rounded card inside (#hero-area-text equivalent) uses #learninghub-hero-text with background+border-radius - Left col: headline h1 - Right col: hero-info-card (subtext+CTA) .hub-stats-placeholder (empty — stats are a separate TI widget that renders immediately below) ============================================================ */ /* --- Hide TI's default dashboard header --- */ .learn.dashboard .header__inner { display: none; } /* --- Outer hero band: white, full-width, bottom border --- Matches .home.index .hero-area from sandbox */ .learn.dashboard .widget--html:has(.learninghub-hero) { background: var(--color-white); border-bottom: 1px solid var(--light-gray-accent); padding: 25px 16px 24px; margin: 0; width: 100%; box-sizing: border-box; } /* --- Orange card: constrained width, rounded, gradient bg --- Matches #hero-area-text from sandbox */ .learn.dashboard #learninghub-hero-text { width: min(80%, 1200px); margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; color: var(--color-white); border-radius: var(--radius-2xl); padding: 50px 40px; position: relative; overflow: hidden; background: var(--hero-bg-image); background-size: cover; background-position: 20% 85%; background-repeat: no-repeat; min-height: 220px; } /* --- Left col: headline --- */ .learn.dashboard .learninghub-hero-copy { flex: 1 1 auto; min-width: 0; } .learn.dashboard .learninghub-hero-copy h1 { font-family: var(--font-primary); font-size: clamp(28px, 3.5vw, 48px); font-weight: var(--font-weight-regular); line-height: 1.1; letter-spacing: var(--letter-spacing); color: var(--color-white); margin: 0; width: 85% } .learn.dashboard .learninghub-hero-copy h1 strong { font-weight: var(--font-weight-bold); } /* .learninghub-hero wrapper and .hub-stats-placeholder — no styling needed */ .learn.dashboard .learninghub-hero { display: contents; } .learn.dashboard .hub-stats-placeholder { display: none; } /* --- Layout containers --- */ .learn.dashboard .learner-access { max-width: min(70%, 1200px); margin: 0 auto; background-color: var(--white-color); overflow: hidden; } /* Hero responsive */ @media (max-width: 1279px) { .learn.dashboard #learninghub-hero-text { width: 90%; } } @media (max-width: 900px) { .learn.dashboard #learninghub-hero-text { flex-direction: column; align-items: flex-start; gap: 28px; padding: 40px 32px 44px; } } @media (max-width: 767px) { .learn.dashboard #learninghub-hero-text { width: 95%; } .learn.dashboard .learninghub-hero-copy h1 { font-size: 26px; } } /* ============================================================ 12. LEARNER DASHBOARD — STATS WIDGET (.stats-widget) Separate TI widget below the hero. White bg, constrained. Hides Available + Collaborations. Started + Completed shown as compact callouts: label above, large mono numeral below. No colored tile backgrounds. ============================================================ */ .learn.dashboard .widget { border-right: 1px solid var(--light-gray-accent); border-left: 1px solid var(--light-gray-accent); padding: 0; background-color: var(--color-white); } .learn.dashboard .widget .column, .columns{ padding: 0; } .header--dashboard { top: 17px; padding: 0; } /* Stats widget row: white bg, constrained, no padding mess */ .learn.dashboard .stats-widget { display: none; } /* ============================================================ 13. LEARNER DASHBOARD — WIDGETS Covers: In Progress/Tabs list, Explore Knowledge Credentials, "Ready for what's next?" CTA card, "Need Help?" cards, and hide rules for Recently Viewed. All rules scoped to .learn.dashboard or widget custom class. ============================================================ */ /* Course list panel — white bg, border, no top border (tabs provide top edge) */ .learn.dashboard .dashboard-access { background: var(--color-white); margin-bottom: 0; } /* Course rows */ .learn.dashboard .dashboard-access-list-item { border-bottom: 1px solid var(--light-gray-accent); padding: 8px 16px; color: var(--color-black); font-size: var(--font-size-body-sm); } .learn.dashboard .row .row { width: auto; margin: 0 auto; } .dashboard-access-list-item:nth-of-type(2n){ background: var(--white-color) } /* Expander button */ .learn.dashboard .dashboard-access-list-item-expander { background: transparent; border: none; font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-black); cursor: pointer; padding: 0; display: flex; align-items: center; gap: var(--spacing-sm); } .learn.dashboard .dashboard-access-list-item-expander:hover { color: var(--color-tangerine); text-decoration: none; } /* Both chevron states — same size, same light gray, same weight */ .learn.dashboard .dashboard-access-list-item-expander .icon-navigateright, .learn.dashboard .dashboard-access-list-item-expander .icon-navigatedown { color: var(--color-gray); font-size: 18px; font-weight: var(--font-weight-regular); } .learn.dashboard .dashboard-access-list-item-expander__title { font-size: var(--font-size-body-sm); } /* Type pill */ .learn.dashboard .dashboard-access-list-item .col-span-3, .learn.dashboard .dashboard-access-list-item [class*="col-span-3"] { font-family: var(--font-primary); font-size: var(--font-size-body-sm); color: var(--text-black); border: 1px dashed var(--color-ruby); width: max-content; padding: .2em .6em; border-radius: var(--radius-pill); background-color: var(--color-ruby-tint); } .learn.dashboard .dashboard-access-list-item strong{ font-weight: var(--font-weight-semibold); } /* Row CTA — outline pill matching sandbox */ .learn.dashboard .dashboard-access-list-item .btn.btn--primary.btn--small { background: transparent; color: var(--color-black); border: 1px solid var(--color-gray); border-radius: var(--radius-pill); font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); padding: 5px 14px; white-space: nowrap; text-decoration: none; display: inline-block; margin-bottom: .2em; transition: background var(--transition-fast), color var(--transition-fast); } .learn.dashboard .dashboard-access-list-item .btn.btn--primary.btn--small:hover { background-color: var(--color-ruby-tint); color: var(--color-tangerine) !important; border-color: var(--color-tangerine); text-decoration: none; } /* Expanded row */ .learn.dashboard [id^="dashboard-access-expandable-item-content-"] { padding: var(--spacing-md); background: transparent; } /* Expanded panel image — smaller and vertically centered in its column */ .learn.dashboard .dashboard-access-list-item-expansion .medium-4.columns { display: flex; align-items: center; justify-content: center; } .learn.dashboard .dashboard-access-list-item-expansion .medium-4.columns img { width: 60%; height: auto; display: block; } /* Expanded panel description — narrower so it doesn't span the full column */ .learn.dashboard .dashboard-access-list-item__description { width: 80%; } /* ---------------------------------------------------------- Expanded panel — metrics, progress bar, view details link ---------------------------------------------------------- */ /* Metric labels (TOTAL HOURS, COMPLETE, etc.) */ .learn.dashboard .user-engagement-stat__label { font-family: var(--font-mono); font-size: var(--font-size-label); font-weight: var(--font-weight-regular); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } /* Metric values — target the container so the number, icon, and % sign all pick up the same treatment */ .learn.dashboard .user-engagement-stat__value-container, .learn.dashboard .user-engagement-stat__value--percent { font-family: var(--font-mono); font-size: clamp(28px, 3vw, 44px); font-weight: var(--font-weight-regular); color: var(--color-blackberry); line-height: 1.1; } /* Hide the stopwatch icon TI injects */ .learn.dashboard .user-engagement-stat__value-container i { display: none; } /* Hide the progress bar */ .learn.dashboard .user-engagement-progress-bar { display: none; } /* "View Details" link — strip button chrome, render as plain gray text link with arrow, underline on hover (matches the sandbox catalog card treatment). Positioned to sit directly under the CTA button (top-right of the row) by floating right within the expanded panel. */ .learn.dashboard .dashboard-access-list-item-expansion .small-12 { text-align: right; padding-right: 0; } .learn.dashboard a.dashboard-access-list-view-detail-page { display: inline-block; background: none; border: none; box-shadow: none; padding: 0; font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--text-ghost); text-decoration: none; transition: color var(--transition-fast); } .learn.dashboard a.dashboard-access-list-view-detail-page::after { content: ' →'; } .learn.dashboard a.dashboard-access-list-view-detail-page:hover { color: var(--text-secondary); text-decoration: none; } .learn.dashboard a.dashboard-access-list-view-detail-page:hover span { text-decoration: underline; text-underline-offset: 3px; } /* Responsive */ @media (max-width: 1279px) { .learn.dashboard .widget--dashboard-access { max-width: 90%; } } @media (max-width: 767px) { .learn.dashboard .widget--dashboard-access { max-width: 95%; } .learn.dashboard .dashboard-access-tabs { flex-wrap: wrap; } .learn.dashboard .dashboard-access-tab { margin-bottom: 3px; } } .whats-next-blurb{ width: min(70%, 1200px); border-right: 1px solid var(--light-gray-accent); border-left: 1px solid var(--light-gray-accent); } .whats-next-blurb > div{ width: 80%; margin: 2em auto; border: var(--border-warm); background-color: var(--color-warm-card-bg); padding: 2em; position: relative; } /* Decorative corner squares — top two on the card itself, bottom two on .widget__cta (reliably the last child in this widget). All squares match the salmon border color of the card. */ .whats-next-blurb > div::before, .whats-next-blurb > div::after { content: ''; position: absolute; width: var(--corner-sq-size); height: var(--corner-sq-size); background: var(--color-warm-card-bg); border: var(--border-warm); border-radius: 2px; } /* Top-left */ .whats-next-blurb > div::before { top: var(--corner-sq-offset); left: var(--corner-sq-offset); } /* Top-right */ .whats-next-blurb > div::after { top: var(--corner-sq-offset); right: var(--corner-sq-offset); } /* Bottom corners — anchored to the card's own bottom edge. We give .widget__cta position:relative and use its pseudos so they're positioned relative to it, then push them down and outward to align with the card border. */ .whats-next-blurb div.widget__cta { position: relative; } .whats-next-blurb div.widget__cta::before, .whats-next-blurb div.widget__cta::after { content: ''; position: absolute; width: var(--corner-sq-size); height: var(--corner-sq-size); background: var(--color-warm-card-bg); border: var(--border-warm); /* Push below the card's bottom border edge. parent padding is 2em; offset is -6px. Net: 2em + 6px below widget__cta bottom */ bottom: calc(-2em + var(--corner-sq-offset)); border-radius: 2px; } /* Bottom-left */ .whats-next-blurb div.widget__cta::before { left: calc(-2em + var(--corner-sq-offset)); } /* Bottom-right */ .whats-next-blurb div.widget__cta::after { right: calc(-2em + var(--corner-sq-offset)); } .whats-next-blurb .widget__title { font-size: var(--font-size-h4); margin-top: 0; padding-top: 0; } .whats-next-blurb .widget__subtitle { color: var(--text-muted); /* was `inherit` — explicitly set to match other widget subtitles */ font-size: var(--font-size-body); text-align: left; padding: 0; margin: 0 auto; } .whats-next-blurb .indent-list{ display: none; } .whats-next-blurb div.widget__cta{ margin-top: 1em; padding: 0; } .whats-next-blurb .btn--primary{ margin: 0 auto; background: var(--color-white); border: 1px solid var(--color-btn-border); border-radius: var(--radius-pill); color: var(--color-black); font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); text-decoration: none; white-space: nowrap; transition: border-color var(--transition-normal), color var(--transition-normal); } .whats-next-blurb .btn--primary:hover{ border-color: var(--color-tangerine); color: var(--color-tangerine) !important; text-decoration: none; background-color: var(--color-ruby-tint); } /* ---------------------------------------------------------- 13c. EXPLORE KNOWLEDGE CREDENTIALS Two widgets: Widget 1 — Four Column, custom class: fourcol-banner-blurb & kcred-blurb // ** Current Styling uses: fourcol-banner-blurb to match similar widget on homepage.** Heading + subtitle text left, CTA button right Same pattern as cfuEnterpriseBanner (sandbox) Widget 2 — Credly Badges widget, custom class: kcred-badges TI native badge carousel + status pills ---------------------------------------------------------- */ /* ============================================================ KCRED BADGES (kcred-badges) — Credly Badges widget TI native badge carousel. Earned = full color. Unearned = grayscale. Status pills below each badge. ============================================================ */ /* Hide TI's native "Credly Badges" h3 */ .kcred-badges .dashboard-badges-container h3 { display: none; } .kcred-badges { background-color: transparent; } /* Badge container: constrained, centered */ .kcred-badges .dashboard-badges-container { max-width: min(70%, 1200px); margin: 0 auto; padding: var(--spacing-xl) 0; box-sizing: border-box; box-shadow: none; border-left: 1px solid var(--light-gray-accent); border-right: 1px solid var(--light-gray-accent); background-color: var(--white-color); } /* Badge grid */ .kcred-badges .featured-content-multi-carousel--badges { overflow: visible; } .kcred-badges .featured-content-block-grid { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--spacing-lg); list-style: none; margin: 0 ; padding: 0; width: 100%; justify-content: start; } /* Individual badge card */ .kcred-badges .dashboard-badge { flex: 1 1 0; min-width: 0; background: var(--color-white); border: 1px solid var(--light-gray-accent); border-radius: var(--radius-lg); padding: var(--spacing-lg) var(--spacing-md); display: flex; flex-direction: column; align-items: center; text-align: center; justify-items: center; gap: var(--spacing-sm); max-width: 330px; } /* Badge image */ .kcred-badges .dashboard-badge img { width: 60%; object-fit: contain; display: block; margin: 1em auto; } .kcred-badges .dashboard-badge img.grayscale { filter: grayscale(100%) opacity(0.65); } /* Badge name link */ .kcred-badges .dashboard-badge a.text-blue-600 { font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-blackberry); text-decoration: none; line-height: 1.3; display: block; width: 80%; margin: 0 auto; } .kcred-badges .dashboard-badge a.text-blue-600:hover { text-decoration: underline; } /* Status pill row */ .kcred-badges .dashboard-badge p.text-sm { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; } .kcred-badges .dashboard-badge p.text-sm span { display: inline-block; border-radius: var(--radius-pill); font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; } .kcred-badges .dashboard-badge .text-green-700 { background: var(--color-badge-earned); color: var(--white-color); border: 1px solid var(--color-badge-earned); padding: 3px 10px; } .kcred-badges .dashboard-badge .text-amber-500 { color: var(--text-muted); /* border: 1px solid var(--color-gray); */ } .kcred-badges .dashboard-badge .text-gray-500 { font-family: var(--font-mono); font-size: var(--font-size-body-sm); color: var(--text-muted); background: transparent; border: none; padding: 0; } .kcred-badges .dashboard-badge p.text-gray-500.text-sm { font-family: var(--font-primary); font-size: var(--font-size-body-sm); color: var(--text-muted); margin: 0; display: none; } /* Responsive */ @media (max-width: 1279px) { .kcred-badges .dashboard-badges-container { max-width: 90%; } } @media (max-width: 767px) { .kcred-badges .dashboard-badges-container { max-width: 95%; } .kcred-badges .featured-content-block-grid { flex-direction: column; } } /* ---------------------------------------------------------- 13d. "READY FOR WHAT'S NEXT?" CTA BLOCK (.explore-catalog-cta) Bordered card layout: heading, subtext, "Browse Catalog" btn. The btn itself uses the global dashboard btn--large rule above. ---------------------------------------------------------- */ /* Card container — constrained, floats on dot grid */ .learn.dashboard .explore-catalog-cta { max-width: 1200px; margin: var(--spacing-3xl) auto; padding: 0 var(--spacing-lg); } .learn.dashboard .explore-catalog-cta .row { background: var(--color-white); border: 1px solid var(--light-gray-accent); border-radius: var(--radius-lg); padding: var(--spacing-3xl) var(--spacing-2xl); position: relative; text-align: center; } /* Corner accent squares (reuses --corner-sq tokens from :root) */ .learn.dashboard .explore-catalog-cta .row::before, .learn.dashboard .explore-catalog-cta .row::after { content: ''; position: absolute; width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--corner-sq-border); background: var(--color-white); } .learn.dashboard .explore-catalog-cta .row::before { top: var(--corner-sq-offset); left: var(--corner-sq-offset); } .learn.dashboard .explore-catalog-cta .row::after { top: var(--corner-sq-offset); right: var(--corner-sq-offset); } /* Card heading */ .learn.dashboard .explore-catalog-cta .editor-content h2, .learn.dashboard .explore-catalog-cta .editor-content h3, .learn.dashboard .explore-catalog-cta .cta-heading { font-family: var(--font-primary); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: var(--letter-spacing); margin: 0 0 var(--spacing-md) 0; } /* Card subtext */ .learn.dashboard .explore-catalog-cta .editor-content p, .learn.dashboard .explore-catalog-cta .cta-subtext { font-family: var(--font-primary); font-size: var(--font-size-body); color: var(--text-muted); max-width: 640px; margin: 0 auto var(--spacing-xl) auto; line-height: 1.5; } /* The .widget__cta wrapper that TI renders around the btn */ .learn.dashboard .explore-catalog-cta .widget__cta { padding: 0; text-align: center; } /* Browse Catalog button — inherits the global .btn--large rule above, but centered. Override only if treatment differs from Figma. */ .learn.dashboard .explore-catalog-cta a.btn.btn--primary.btn--centered.btn--large { margin: 0 auto; display: block; width: fit-content; } /* ---------------------------------------------------------- 13e. "NEED HELP?" — cfuHelpSection + cfuHelpCards Unscoped — works on .learn.dashboard, .home.index, and any future page that uses these widget custom classes. ---------------------------------------------------------- */ /* ============================================================ HELP SECTION (cfuHelpSection) ============================================================ */ .cfuHelpSection { background: var(--color-white); border-top: 1px solid var(--light-gray-accent); border-bottom: 1px solid var(--light-gray-accent); width: 100%; padding: 0; margin: 0; } .cfuHelpSection .row { display: none; } .cfuHelpSection .widget__title { display: block; width: min(70%, 1200px); margin-left: auto; margin-right: auto; padding: 32px 0 6px; font-family: var(--font-primary); font-size: var(--font-size-h4) !important; font-weight: var(--font-weight-semibold) !important; color: var(--color-black) !important; text-align: left; line-height: 1.2; } .cfuHelpSection .widget__subtitle { display: block; width: min(70%, 1200px); margin-left: auto; margin-right: auto; padding: 0 0 28px; font-family: var(--font-primary); font-size: var(--font-size-body); color: var(--text-muted); text-align: left; line-height: 1.4; } /* ============================================================ HELP CARDS (cfuHelpCards) ============================================================ */ /* Outer container */ .cfuHelpCards { max-width: min(70%, 1200px); margin: 0 auto 48px; background: var(--color-white); border: 1px solid var(--light-gray-accent); border-top: none; overflow: hidden; padding: 20px; box-sizing: border-box; } /* Inner row */ .cfuHelpCards .row { display: flex; flex-direction: row; align-items: stretch; gap: 16px; margin: 0; padding: 0; width: 100%; max-width: 100%; } /* Each card */ .cfuHelpCards .medium-4.columns { width: 33.333%; box-sizing: border-box; padding: 24px; margin: 0; border: 1px solid var(--light-gray-accent); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-height: 280px; } /* editor-content: space-between pushes button to bottom */ .cfuHelpCards .editor-content { display: flex; flex-direction: column; flex: 1; height: 100%; justify-content: space-between; } /* Card heading */ .cfuHelpCards .editor-content p strong { font-family: var(--font-primary); font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); color: var(--color-black); display: block; margin-bottom: 12px; } /* Card body text */ .cfuHelpCards .editor-content p { font-family: var(--font-primary); font-size: var(--font-size-body); color: var(--text-body); line-height: 1.5; margin: 0 0 16px 0; } /* Link paragraph */ .cfuHelpCards .editor-content p:has(a) { /* margin-top: 1rem; */ margin-bottom: 0; flex-shrink: 0; } /* Button — outline pill, centered */ .cfuHelpCards .editor-content a { display: block; width: fit-content; margin: 0 auto; background: var(--color-white); border: 1px solid var(--color-btn-border); border-radius: var(--radius-pill); color: var(--color-black); font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); padding: 9px 22px; text-decoration: none; white-space: nowrap; text-align: center; transition: border-color 0.2s ease, color 0.2s ease; } .cfuHelpCards .editor-content a:hover { border-color: var(--color-tangerine); color: var(--color-tangerine) !important; text-decoration: none; background-color: var(--color-ruby-tint); } /* Responsive */ @media only screen and (max-width: 767px) { .cfuHelpSection .widget__title, .cfuHelpSection .widget__subtitle { width: 92%; } .cfuHelpCards { max-width: 92%; } .cfuHelpCards .row { flex-direction: column; gap: 12px; } .cfuHelpCards .medium-4.columns { width: 100%; } } /* ============================================================ 14. CUSTOM FOOTER Dark background footer with 5-column link grid, divider, bottom copyright bar, and responsive layout. ============================================================ */ /*---Custom Footer Styling---*/ /* Footer Container */ .footer, footer { padding: 0; background-color: var(--bg-dark); } .footer__inner { border: none; } .site-footer { color: var(--color-white); padding: 60px 5%; font-size: 15px; line-height: 1.6; } /* Main Grid for Links */ .footer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin-bottom: 40px; } /* Individual Column Styling */ .footer-column h3 { font-size: 16px; font-weight: 600; color: var(--color-white); margin-top: 0; margin-bottom: 20px; } .footer-column ul { list-style: none; margin: 0; padding: 0; } .footer-column li { margin-bottom: 12px; } /* Link Styling */ .footer-column a, .footer-bottom-links a { color: var(--color-gray); text-decoration: none; transition: color 0.2s ease-in-out; } .footer-column a:hover, .footer-bottom-links a:hover { color: var(--color-white); } /* Community Icons */ .footer-column .icon { width: 18px; height: 18px; fill: currentColor; /* Icon color inherits from the parent link */ } .footer-column li a { display: flex; align-items: center; gap: 10px; /* Space between icon and text */ } /* Divider Line */ .footer-divider { border: 0; border-top: 1px solid var(--text-body); margin: 0; } /* Bottom Copyright Section */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; font-size: var(--font-size-body-sm); } .footer-bottom-links span { margin: 0 8px; color: var(--text-muted); } .privacy-choices { display: inline-flex; align-items: center; gap: 8px; } .privacy-icon { width: 30px; height: 15px; } /* Responsive Design */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-bottom { flex-direction: column; gap: 20px; text-align: center; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .footer__company__name, .footer__company__info, .footer__powered-by { display: none; } /* ============================================================ 15. WIDGET CLASSES Active: umCatalog2 (full card system with calendar table), umFeaturedContentStd, umCarousel1, umVideo1-5, umRecentlyViewed*, umIbus, umLinkList1-2, umNavigation1-4, umSearchbar1-3, umLearnerAccess1-4, umTestimonials, umHeroSlider1-4, umImageOverlay1-4, umRecomendedCourse1, umAboutIntro, umExploreTopics, umContactBlock, umProfTraining*, umWhatStudentSays, umTestimonial1. Removed 8-13: umBanner1-4, umGetStarted, secondary__buttons, bare unscoped layout rules. ============================================================ */ /* For Widget Page */ /* Css for disabling side margin */ .home__content {padding: 0;} /* ============================================================ WIDGET CLASSES — umCatalog2 (Catalog card grid — ported from Sandbox 7-20) ============================================================ */ .layout__content .widget.umCatalog2 { padding: 2px 5%; } .umCatalog2 h3 { display:none; } .umCatalog2 .catalog-header { display: none; } .umCatalog2 .columns { padding: 0; } .umCatalog2 .js-results-holder { padding-left: 1rem; } /* ------------------------------------------------------------------ umCatalog2 — Filter Sidebar - No horizontal dividers between groups - Section header: left-aligned label, chevron on the right - Expanded children: indented + left vertical accent line - Hover/selected: rounded gray pill background - DO NOT touch TI's internal .row/.column structure inside the header button — it breaks layout. Work around it instead. ------------------------------------------------------------------ */ /* ── Sidebar column ── */ .umCatalog2 .medium-3.columns { padding-right: 20px; } /* ── Each filter group — no border, no background ── */ .umCatalog2 .catalog-aggregation { background: none; border: none; border-bottom: none; padding: 0; margin-bottom: 4px; } .umCatalog2 .catalog-aggregation.catalog-aggregation--expanded { background: none; border-bottom: none; } .umCatalog2 .catalog-aggregation.catalog-aggregation--expanded:hover { background: none; } /* ── Section header button ── TI renders: button > div.row > [div.col.small-1 (chevron)] + [div.col.small-11 (label)] We make the button full-width with relative positioning, then use absolute positioning on the expander to move the chevron to the right. The label column naturally fills the space. */ .umCatalog2 .catalog-aggregation__header { position: relative; display: block; width: 100%; padding: 7px 32px 7px 8px !important; /* right padding reserves space for chevron */ border-radius: var(--radius-md) ; background: none; border: none; font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-black); text-align: left; cursor: pointer; transition: background var(--transition-normal); line-height: 1.5; box-sizing: border-box; } /* Hide TI's internal row/column layout — it contributes nothing useful to the visual since we're controlling via the button itself */ .umCatalog2 .catalog-aggregation__header .row { display: block; margin: 0; } .umCatalog2 .catalog-aggregation__header .column.small-1 { display: none; } /* we reposition chevron below */ .umCatalog2 .catalog-aggregation__header .column.small-11 { display: block; width: 100%; padding: 0; float: none; } /* Label text */ .umCatalog2 .catalog-aggregation__header--label { font-weight: var(--font-weight-semibold); color: var(--color-black); display: block; } /* Chevron — hide TI's icon-navigateright/down, replace with Phosphor chevron-right SVG via mask-image on the ::after pseudo. Collapsed: points right. Expanded: rotates 90deg to point down. */ .umCatalog2 .catalog-aggregation__expander { display: none; } .umCatalog2 .catalog-aggregation__header::after { content: ''; position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(0deg); width: 16px; height: 16px; background-color: var(--text-icon-muted); /* Phosphor chevron-right path (same path as the CF dev docs SVG) */ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z'/%3E%3C/svg%3E") !important; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z'/%3E%3C/svg%3E") !important; mask-size: contain; mask-repeat: no-repeat; mask-position: center; transition: transform var(--transition-fast), background-color var(--transition-fast); flex-shrink: 0; } /* Expanded: rotate 90deg so chevron points down */ .umCatalog2 .catalog-aggregation.catalog-aggregation--expanded .catalog-aggregation__header::after { transform: translateY(-50%) rotate(90deg); } /* Header hover — chevron darkens slightly */ .umCatalog2 .catalog-aggregation__header:hover::after { background-color: var(--text-secondary); } /* Hover — gray pill */ .umCatalog2 .catalog-aggregation__header:hover { background: var(--bg-subtle); color: var(--color-black); text-decoration: none; } /* ── Child list ── margin-left: 30px aligns the left border line under the header label text. border-left is the vertical grouping line. */ .umCatalog2 .catalog-aggregation ul.unlist { margin: 4px 0 8px 30px; padding: 1px; list-style: none; border-left: 1px solid var(--light-gray-accent); } /* Restore expanded group to no extra border/padding */ .umCatalog2 .catalog-aggregation.catalog-aggregation--expanded { border-left: none; padding-left: 0; } .umCatalog2 .catalog-aggregation:not(.catalog-aggregation--expanded) { border-left: none; } .umCatalog2 .catalog-aggregation.catalog-aggregation--expanded .catalog-aggregation__header { margin-left: 0; } .umCatalog2 .catalog-aggregation ul.unlist li { margin: 0 0 0 2px; padding: 0; background: none; } /* ── Filter value buttons ── */ .umCatalog2 .catalog-aggregation__value { display: flex; align-items: center; gap: 4px; width: 100%; padding: 5px 8px 5px 8px; margin: 0; border-radius: var(--radius-md); background: none; border: none; font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--text-body); text-align: left; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); line-height: 1.4; box-sizing: border-box; } .umCatalog2 .catalog-aggregation__value:hover { background: var(--bg-subtle) !important; color: var(--color-black) !important; text-decoration: none; } /* Selected state */ .umCatalog2 .catalog-aggregation__value.active, .umCatalog2 .catalog-aggregation__value.selected, .umCatalog2 .catalog-aggregation__value[aria-pressed="true"], .umCatalog2 .catalog-aggregation__value.catalog-aggregation__value--selected { background: var(--light-gray-accent); color: var(--color-black); font-weight: var(--font-weight-semibold); } /* Count — muted gray, doesn't compete with label */ .umCatalog2 .catalog-aggregation__count { color: var(--text-icon-muted); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); flex-shrink: 0; } /* Focus rings */ .umCatalog2 .catalog-aggregation__header:focus-visible, .umCatalog2 .catalog-aggregation__value:focus-visible { outline: 2px solid var(--color-tangerine); outline-offset: 2px; } @media only screen and (max-width: 1024px) { .umCatalog2 .catalog-aggregation__header, .umCatalog2 .catalog-aggregation__value { font-size: var(--font-size-body-sm); } } /* ------------------------------------------------------------------ umCatalog2 — Course Cards (Figma spec, July 2026) Design goals: - 20px radius card, #EBEBEB default border - Ruby border + subtle shadow on hover - Image bleeds to top edge with white gradient fade at bottom so title text has a clean white background beneath it - All cards in a row share the height of the tallest card; gap between description and CTA absorbs the difference - CTA pinned to card bottom; bookmark/queue button bottom-left ------------------------------------------------------------------ */ /* ── Grid: equal-height rows via stretch ── */ .umCatalog2 .js-results-holder ul.small-block-grid-1, .umCatalog2 .js-results-holder ul.medium-block-grid-2, .umCatalog2 .js-results-holder ul.medium-block-grid-3, .umCatalog2 .js-results-holder ul.large-block-grid-3, .umCatalog2 .js-results-holder ul.large-block-grid-4, .umCatalog2 .js-results-holder ul[class*="block-grid"] { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0; padding: 0; } /* Grid li — stretch to row height */ .umCatalog2 .js-results-holder ul[class*="block-grid"] > li { display: flex; flex-direction: column; height: auto; padding: 8px; box-sizing: border-box; } /* ── catalog-item ── */ .umCatalog2 .catalog-item { padding: 0; margin-bottom: 0; display: flex; flex-direction: column; flex: 1; height: 100%; } /* Anchor wrapping the card — full height */ .umCatalog2 .catalog-item > a, .umCatalog2 .catalog-item > a.catalog-item { display: flex; flex-direction: column; flex: 1; height: 100%; text-decoration: none; } /* ── Card shell ── */ .umCatalog2 .catalog-item .catalog-grid-item { display: flex; flex-direction: column; flex: 1; padding: 0; border-radius: var(--radius-2xl); border: 1px solid var(--light-gray-accent); background: var(--color-white); box-shadow: none; overflow: hidden; transition: border-color var(--transition-normal), box-shadow var(--transition-normal); box-sizing: border-box; width: 100%; margin: 0; position: relative; } /* ── Hover: ruby border + lift shadow ── */ .umCatalog2 .catalog-item .catalog-grid-item:hover { border-color: var(--color-ruby); box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.06); } /* ── Image area — fixed 150px height, cover crop ── */ .umCatalog2 .catalog-item .catalog-grid-item__asset-container { width: 100%; height: 150px; overflow: hidden; flex-shrink: 0; background: var(--color-gray-light); margin: 0; padding: 0; position: relative; } .umCatalog2 .catalog-item .catalog-grid-item__asset-container img { width: 100%; height: 100%; object-fit: cover; display: block; } /* White gradient overlay — fades image into card body */ .umCatalog2 .catalog-item .catalog-grid-item__asset-container::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, transparent 30%, rgba(255, 255, 255, 0.85) 70%, var(--color-white) 100% ); pointer-events: none; } /* ── Foundation row/column plumbing ── */ .umCatalog2 .catalog-item .catalog-grid-item > .row { display: flex; flex-direction: column; flex: 1; margin: 0; padding: 0; width: 100%; } .umCatalog2 .catalog-item .catalog-grid-item > .row > .column.medium-12 { padding: 0; width: 100%; } /* First column = image wrapper */ .umCatalog2 .catalog-item .catalog-grid-item > .row > .column.medium-12:first-child { flex-shrink: 0; padding: 0; } /* Second column = body — overlaps into image gradient */ .umCatalog2 .catalog-item .catalog-grid-item > .row > .column.medium-12:last-child { flex: 1; display: flex; flex-direction: column; padding: 0 10px 0; margin-top: -36px; /* overlap title into image gradient */ position: relative; z-index: 1; } /* ── Card body ── */ .umCatalog2 .catalog-item .catalog-grid-item__body { display: flex; flex-direction: column; flex: 1; min-height: 0; justify-content: flex-start; } /* ── Title ── height: auto !important overrides TI's inline height attribute */ .umCatalog2 .catalog-item .catalog-grid-item__title { font-family: var(--font-primary); font-size: var(--font-size-sm-heading); font-weight: var(--font-weight-semibold); color: var(--color-black); line-height: 1.3; letter-spacing: var(--letter-spacing); margin: 0 0 8px 0; height: auto !important; } /* ── Source pill container ── */ .umCatalog2 .catalog-item .catalog-grid-item__source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; background: transparent; border: none; padding: 0; } /* Course-type pill (strong) */ .umCatalog2 .catalog-item .catalog-grid-item__source strong { font-family: var(--font-mono); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--color-pill-text); background: var(--color-pill-bg); border: var(--border-pill); border-radius: 20px; padding: 4px 14px; display: inline-block; letter-spacing: 0.02em; text-transform: uppercase; } /* Duration pill — injected by fixSourcePills() JS, same spec */ .umCatalog2 .catalog-item .catalog-grid-item__source .cf-duration-pill { font-family: var(--font-mono); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--color-pill-text); background: var(--color-pill-bg); border: var(--border-pill); border-radius: 20px; padding: 4px 14px; display: inline-block; letter-spacing: 0.02em; text-transform: uppercase; } /* ── Description — flex:1 pushes CTA to bottom ── */ .umCatalog2 .catalog-item .catalog-grid-item__description { font-family: var(--font-primary); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); color: var(--text-body); line-height: 1.5; flex: 1; margin-top: 0; margin-bottom: 0; } /* ── Hide TI's internal HR divider ── */ .umCatalog2 .catalog-item .catalog-grid-item__hr { display: none; } /* ── CTA container — pinned to card bottom ── */ .umCatalog2 .catalog-item .catalog-grid-item__cta-container { margin-top: auto; padding-top: 16px; flex-shrink: 0; display: flex; justify-content: flex-end; } /* Fix legacy -webkit-box on the with-queue wrapper */ .umCatalog2 .catalog-item .catalog-grid-item__cta-container-with-queue { display: flex; flex: 1; justify-content: space-between; align-items: center; } /* ── CTA button (View Details / Continue / etc.) ── TI renders native state-aware text — we style only. Gray at rest, darkens + underline on card hover. */ .umCatalog2 .catalog-item .catalog-grid-item .btn--link, .umCatalog2 .catalog-item .catalog-grid-item .btn--link.btn--primary { font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--text-ghost); background: none; border: none; padding: 4px 8px !important; border-radius: var(--radius-pill); display: inline-block; text-decoration: none; transition: color var(--transition-fast); float: none; box-shadow: none; } .umCatalog2 .catalog-item .catalog-grid-item:hover .btn--link, .umCatalog2 .catalog-item .catalog-grid-item:hover .btn--link.btn--primary { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; background: none; } /* ── Queue / Bookmark button ── TI renders: button.catalog-item__queue-button Saved state: button.catalog-item__queue-button--added Text label handled by TI translations — styling only. Icon: Phosphor BookmarkSimple via mask-image (outline → filled). Color: var(--color-blackberry). Hover: lavender-blue pill bg. */ .umCatalog2 .catalog-item button.catalog-item__queue-button { display: inline-flex !important; align-items: center; gap: 5px; padding: 8px 16px; margin: 0; background: none; border: none; border-radius: var(--radius-pill); font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--color-blackberry); cursor: pointer; text-decoration: none; box-shadow: none; transition: box-shadow var(--transition-fast); } /* TI wraps label in — color must target span too */ .umCatalog2 .catalog-item button.catalog-item__queue-button span { color: var(--color-blackberry); font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); vertical-align: middle; } /* Suppress underline bleed from card hover and global a:hover */ .umCatalog2 .catalog-item .catalog-grid-item:hover button.catalog-item__queue-button, .umCatalog2 .catalog-item .catalog-grid-item:hover button.catalog-item__queue-button span { text-decoration: none; } /* Hover: lavender-blue pill via inset box-shadow — zero layout shift */ .umCatalog2 .catalog-item button.catalog-item__queue-button:hover { background: none !important; box-shadow: inset 0 0 0 100px rgba(238,242,255,1); border-radius: var(--radius-pill); } /* Hide TI's native icon (green checkbox) */ .umCatalog2 .catalog-item button.catalog-item__queue-button i { display: none !important; } /* Bookmark icon — outline (default) via mask-image on ::before */ .umCatalog2 .catalog-item button.catalog-item__queue-button::before { content: ''; display: inline-block; width: 14px; height: 14px; flex-shrink: 0; background-color: var(--color-blackberry); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 256 256'%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,177.57-51.77-32.35a8,8,0,0,0-8.48,0L72,209.57V48H184Z'/%3E%3C/svg%3E") !important; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 256 256'%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Zm0,177.57-51.77-32.35a8,8,0,0,0-8.48,0L72,209.57V48H184Z'/%3E%3C/svg%3E") !important; mask-size: contain; mask-repeat: no-repeat; mask-position: center; vertical-align: middle; } /* Saved state: switch to filled bookmark path */ .umCatalog2 .catalog-item button.catalog-item__queue-button--added::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 256 256'%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Z'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 256 256'%3E%3Cpath d='M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Z'/%3E%3C/svg%3E") !important; } /* Saved state — TI adds cursor:default, keep that */ .umCatalog2 .catalog-item button.catalog-item__queue-button--added { cursor: default; } /* ── Responsive ── */ @media only screen and (max-width: 979px) { .umCatalog2 .catalog-item .catalog-grid-item__title { font-size: var(--font-size-body); } .umCatalog2 .catalog-item .catalog-grid-item__asset-container { height: 120px; } } @media only screen and (max-width: 767px) { .umCatalog2 .js-results-holder ul[class*="block-grid"] > li { padding: 6px 0; } } /* ── Search bar + display type + list view ── */ .umCatalog2 .catalog-search-bar { padding: 0; } .umCatalog2 .catalog-search-bar .catalog-search input { padding-left: 20px; } .umCatalog2 .catalog-display-type { padding-right: 1rem; } .umCatalog2 .catalog-display-type button { border: none; } .umCatalog2 .catalog-display-type button.btn--primary { color: var(--link-color); } .umCatalog2 .btn--link.btn--primary { color: var(--color-black); } .umCatalog2 .catalog-list-item { padding: 1rem; border: 1px solid var(--link-color); border-radius: var(--radius-lg); position: relative; margin-right: 0; } .umCatalog2 .catalog-list-item .catalog-list-item__title { display: block; width: calc(100% - 50% - 2rem); height: 25px; overflow: hidden; position: absolute; left: 50%; top: 60px; } .umCatalog2 .catalog-list-item .medium-4, .umCatalog2 .catalog-list-item .medium-8 { width: 50%; } .umCatalog2 .catalog-list-item .catalog-list-item__info { margin-bottom: 60px; } .umCatalog2 .catalog-list-item .catalog-list-item__description .editor-content { height: 45px; overflow: hidden; display: block; color: var(--color-black); margin-bottom: 1rem; } .umCatalog2 .catalog-list-item .catalog-list-item__description::after { content: 'View Details'; display: inline-block; font-size: var(--font-size-caption); padding: 4px 10px !important; border: 1px solid var(--link-color); color: var(--link-color); border-radius: var(--radius-sm); } .umCatalog2 .catalog-list-item .catalog-list-item__asset { width: 100%; } @media only screen and (max-width: 979px) { .umCatalog2 .catalog-list-item .catalog-list-item__title { top: 36px; } .umCatalog2 .catalog-list-item .catalog-list-item__info { margin-bottom: 36px; } } @media only screen and (max-width: 767px) { .umCatalog2 .small-block-grid-1 > li { padding: 0; margin-bottom: 12px; } .umCatalog2 .js-results-holder { padding: 0; } } /* ── Calendar table (Customer Success Events) ── */ .umCatalog2 .catalog-calendar h4, .catalog-calendar h4 { font-size: 18px; font-weight: var(--font-weight-semibold); padding: 16px 32px; margin: 0; border-bottom: 1px solid var(--color-gray); } .umCatalog2 .catalog-calendar, .catalog-calendar { border: 1px solid var(--color-gray); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; } .umCatalog2 .catalog-calendar__table, .catalog-calendar__table { border-collapse: collapse; border: none; width: 100%; } .umCatalog2 .catalog-calendar__table thead tr, .catalog-calendar__table thead tr {border-bottom: 1px solid var(--color-gray);} .umCatalog2 .catalog-calendar__table th, .catalog-calendar__table th { border: none; padding: 16px 28px !important; } .umCatalog2 .catalog-calendar__table td, .catalog-calendar__table td { border: none !important; border-bottom: 1px solid var(--color-gray-light) !important; padding: 24px 32px !important; } .umCatalog2 .catalog-calendar__table tr:last-child td, .catalog-calendar__table tr:last-child td { border-bottom: none; } .umCatalog2 .catalog-calendar__table td:last-child, .catalog-calendar__table td:last-child { text-align: center; } .umCatalog2 .catalog-calendar__table .btn--primary, .catalog-calendar__table .btn--primary { background-color: var(--color-white); color: var(--color-black); border: var(--border-btn); border-radius: var(--radius-pill); padding: 10px 20px; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); font-family: var(--font-primary); text-align: center; min-width: 100px; display: inline-block; box-sizing: border-box; transition: border-color var(--transition-normal), color var(--transition-normal); } .umCatalog2 .catalog-calendar__table .btn--primary:hover, .catalog-calendar__table .btn--primary:hover { background-color: var(--color-ruby-tint); color: var(--color-tangerine) !important; border-color: var(--color-tangerine); text-decoration: none; } .umCatalog2 .catalog-calendar__table button.catalog-item__queue-button, .catalog-calendar__table button.catalog-item__queue-button { display: none !important; } /* For um uFeaturedContent Standard heading - two widget used this is. widget 1 */ .layout__content .widget.umFeaturedContentStdhead {padding: 32px 9%;} .umFeaturedContentStdhead .widget__title {font-size: 60px; margin-bottom: 40px; color: var(--accent-color);} .umFeaturedContentStdhead .widget__subtitle {font-size: 20px; margin-bottom: 0; color: var(--accent-color);} .umFeaturedContentStdhead .btn--centered {background: var(--secondary-color); color: var(--secondary-contrast-color); font-size: 18px; text-transform: uppercase; font-weight: 700; border-radius: 22px; padding: 10px 40px;} .umFeaturedContentStdhead .btn--centered:hover {background: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umFeaturedContentStdhead .widget__title {font-size: 32px; margin-bottom: 20px;} .umFeaturedContentStdhead .widget__subtitle {font-size: var(--font-size-body-sm);} .umFeaturedContentStdhead .btn--centered {font-size: var(--font-size-body-sm);} } /* For um uFeaturedContent Standard heading - two widget used this is. widget 2 */ .layout__content .widget.umFeaturedContentStd {padding: 32px 9%;} .umFeaturedContentStd .catalog-grid-item {padding: 1rem 0; border: 2px solid var(--accent-color); border-radius: 12px; background-color: var(--white-color);} .umFeaturedContentStd .medium-block-grid-4 > li {width: 50%;} .umFeaturedContentStd .catalog-grid-item .catalog-grid-item__title {font-size: 32px; font-weight: 600; margin-bottom: 32px; color: var(--accent-color);} .umFeaturedContentStd .catalog-grid-item .catalog-grid-item__description {font-size: 16px; color: var(--accent-color); height: 64px !important;} .umFeaturedContentStd .catalog-grid-item .catalog-grid-item__hr {display: none;} .umFeaturedContentStd .catalog-grid-item .catalog-grid-item__cta-container {text-align: left;} .umFeaturedContentStd .catalog-grid-item .catalog-grid-item__cta-container .btn--link.btn--primary {float: none; border: 1px solid var(--accent-color); padding: 12px 32px !important; border-radius: 10px; margin-top: 50px; font-weight: 600; color: var(--accent-color); margin-bottom: 10px; font-size: 22px;} .umFeaturedContentStd .catalog-grid-item:hover {background: var(--accent-color);} .umFeaturedContentStd .catalog-grid-item:hover .catalog-grid-item__title {color: var(--accent-contrast-color);} .umFeaturedContentStd .catalog-grid-item:hover .catalog-grid-item__description {color: var(--accent-contrast-color);} .umFeaturedContentStd .catalog-grid-item:hover .catalog-grid-item__cta-container .btn--link.btn--primary {color: var(--accent-contrast-color); border-color: var(--accent-contrast-color);} @media only screen and (max-width: 979px) { .umFeaturedContentStd .medium-block-grid-4 > li {width: 100%;} .umFeaturedContentStd .catalog-grid-item .catalog-grid-item__title {font-size: 20px; height: auto !important; margin-bottom: 20px;} .umFeaturedContentStd .catalog-grid-item .catalog-grid-item__description {font-size: var(--font-size-body-sm); height: auto !important;} .umFeaturedContentStd .catalog-grid-item .catalog-grid-item__cta-container .btn--link.btn--primary {font-size: var(--font-size-body-sm); padding: 6px 18px !important; border-radius: 6px; margin-top: 20px;} } /* For Video1 */ .layout__content .widget.umVideo1 {padding: 32px 9%;} .umVideo1 > .ember-view {border: 2px solid var(--accent-color); padding: 32px; border-radius: 20px; position: relative;} .umVideo1 > .ember-view > .ember-view, .umVideo1 > .ember-view > .row {display: inline-block; width: calc(50% - 4px); vertical-align: top;} .umVideo1 > .ember-view > .ember-view {padding-right: 4%;} .umVideo1 > .ember-view > .row {padding-left: 4%;} .umVideo1 > .ember-view > .ember-view {text-align: left;} .umVideo1 .widget__title {font-size: 50px; font-weight: 900; margin-bottom: 32px; color: var(--accent-color); text-align: left; margin-top: 12px;} .umVideo1 .widget__subtitle {font-size: 20px; color: var(--accent-color); text-align: left; margin-bottom: 4rem;} .umVideo1 > .ember-view > .row .columns, .umVideo1 > .ember-view > .row .video__container {padding: 0;} .umVideo1 > .ember-view .widget__cta {position: absolute; bottom: 32px; left: 32px;} .umVideo1 > .ember-view .widget__cta .btn--centered {margin-bottom: 0; background: none; border: 1px solid var(--secondary-color); border-radius: 6px; font-size: 18px; font-weight: 600; color: var(--secondary-color);} .umVideo1 > .ember-view .widget__cta .btn--centered:hover {background: var(--secondary-hover-color); color: var(--secondary-contrast-color);} @media only screen and (max-width: 979px) { .umVideo1 > .ember-view {padding: 20px;} .umVideo1 > .ember-view > .ember-view, .umVideo1 > .ember-view > .row {width: 100%; padding: 0;} .umVideo1 h2.widget__title {font-size: 28px; margin-bottom: 20px;} .umVideo1 .widget__subtitle {font-size: var(--font-size-body-sm);} .umVideo1 > .ember-view .widget__cta {position: static; text-align: center;} .umVideo1 > .ember-view .widget__cta .btn--centered {font-size: var(--font-size-body-sm);} } /* For umIbus - Course layout */ .layout__content .widget.umIbus {padding: 32px 9%;} .umIbus .widget__title {color: var(--secondary-contrast-color);} .umIbus .featured-content-block-grid {padding: 0;} .umIbus .featured-content-block-grid .featured-content-image-overlay-item {display: block; padding: 20px; border: 2px solid var(--accent-color); border-radius: 12px;} .umIbus .featured-content-block-grid .featured-content-image-overlay-item img {display: inline-block; width: calc(50% - 4px); vertical-align: middle; padding-right: 4%;} .umIbus .featured-content-block-grid .featured-content-image-overlay-item .featured-content-image-overlay-item__overlay {display: inline-block; width: calc(50% - 4px); vertical-align: middle; padding-left: 4%; position: relative; padding: 0; background: none; color: var(--secondary-contrast-color);} .umIbus .featured-content-block-grid .featured-content-image-overlay-item .featured-content-image-overlay-item__title {color: var(--accent-color); font-size: 32px; font-weight: var(--font-weight-medium);} .umIbus .featured-content-block-grid .featured-content-image-overlay-item .featured-content-image-overlay-item__description {font-size: 18px; color: var(--accent-color);} .umIbus .featured-content-block-grid .featured-content-image-overlay-item .featured-content-image-overlay-item__overlay::after {content: 'Read More'; display: inline-block; padding: 6px 16px; border: 1px solid var(--secondary-color); border-radius: 6px; font-size: 18px; color: var(--secondary-color); margin-top: 28px;} @media only screen and (max-width: 979px) { .umIbus .widget__title {font-size: 32px;} .umIbus .featured-content-block-grid .featured-content-image-overlay-item .featured-content-image-overlay-item__title {font-size: 24px;} .umIbus .featured-content-block-grid .featured-content-image-overlay-item .featured-content-image-overlay-item__description {font-size: var(--font-size-body-sm);} .umIbus .featured-content-block-grid .featured-content-image-overlay-item .featured-content-image-overlay-item__overlay::after {font-size: var(--font-size-body-sm); margin-top: 20px;} } @media only screen and (max-width: 767px) { .umIbus .featured-content-block-grid .featured-content-image-overlay-item img {width: 100%; padding: 0; margin-bottom: 12px;} .umIbus .featured-content-block-grid .featured-content-image-overlay-item .featured-content-image-overlay-item__overlay {width: 100%;} } /* For um Carousel1 */ .layout__content .widget.umCarousel1 {padding: 32px 9%;} .umCarousel1 .widget__title {text-align: left; font-size: 42px; font-weight: 700; color: var(--accent-color);} .umCarousel1 .icon-navigateright::before, .umCarousel1 .icon-navigateleft::before {font-size: 60px; color: var(--link-color);} .umCarousel1 .btn--bare-icon {width: 60px; height: 60px; outline: 0; top: 50%; transform: translateY(-50%);} .umCarousel1 .featured-content-multi-carousel__nav-right {right: -32px;} .umCarousel1 .featured-content-multi-carousel__nav-left {left: -32px;} .umCarousel1 .featured-content-multi-carousel-item {padding: 20px; border: 1px solid var(--secondary-color); border-radius: 12px; background: none;} .umCarousel1 .featured-content-multi-carousel-item img {padding: 0;} .umCarousel1 .featured-content-multi-carousel-item .catalog-grid-item__asset-container {margin-bottom: 12px;} .umCarousel1 .featured-content-multi-carousel-item .featured-content-multi-carousel-item__body {padding: 0; text-align: left;} .umCarousel1 .featured-content-multi-carousel-item .featured-content-multi-carousel-item__title {font-size: 18px; color: var(--accent-color);} .umCarousel1 .featured-content-multi-carousel-item .featured-content-multi-carousel-item__description {padding: 0; color: var(--accent-color);} .umCarousel1 .featured-content-multi-carousel-item .featured-content-multi-carousel-item__source {color: var(--accent-color);} .umCarousel1 .featured-content-multi-carousel-item .featured-content-multi-carousel-item__body::after {content: 'Read More'; display: inline-block; padding: 4px 12px; border: 1px solid var(--secondary-color); border-radius: 6px; color: var(--secondary-color); margin-top: 20px; font-size: 12px;} @media only screen and (max-width: 979px) { .umCarousel1 .widget__title {font-size: 32px;} } /* For umRecentlyViewedHead */ .layout__content .widget.umRecentlyViewedHead {margin: 0 auto; max-width: 1200px; padding: 2em 0 0 0;} .umRecentlyViewedHead .ember-view {position: relative;} .umRecentlyViewedHead .widget__title {font-size: 42px; color: var(--accent-color); font-weight: var(--font-weight-medium); text-align: left; display: block; padding-right: 200px;} .umRecentlyViewedHead .widget__cta {position: absolute; top: 0; right: 0; padding: 0;} .umRecentlyViewedHead .widget__cta .btn--centered {background: var(--color-ruby); color: var(--color-black); font-size: 18px; text-transform: uppercase; font-weight: 600; border-radius: 8px; padding: 10px 40px; text-transform: none; border: none;} .umRecentlyViewedHead .widget__cta .btn--centered:hover {background: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umRecentlyViewedHead .widget__title {font-size: 32px;} .umRecentlyViewedHead .widget__cta .btn--centered {font-size: var(--font-size-body-sm);} } @media only screen and (max-width: 767px) { .umRecentlyViewedHead .widget__title {font-size: 28px; padding: 0; margin: 0;} .umRecentlyViewedHead .widget__cta {position: static; text-align: left;} .umRecentlyViewedHead .widget__cta .btn--centered {display: inline-block;} } /* For umRecentlyViewed */ /* For umRecentlyViewedCoursesHead */ .layout__content .widget.umRecentlyViewedCoursesHead {padding: 32px 9%;} .umRecentlyViewedCoursesHead .ember-view {position: relative;} .umRecentlyViewedCoursesHead .ember-view .ember-view {padding-right: 240px} .umRecentlyViewedCoursesHead .widget__title {font-size: 42px; color: var(--accent-color); font-weight: var(--font-weight-medium); text-align: left; display: block;} .umRecentlyViewedCoursesHead .widget__subtitle {font-size: 20px; color: var(--accent-color); text-align: left; display: block; margin: 0;} .umRecentlyViewedCoursesHead .widget__cta {position: absolute; top: 88px; right: 0; padding: 0;} .umRecentlyViewedCoursesHead .widget__cta .btn--centered {background: var(--secondary-color); color: var(--secondary-contrast-color); font-size: 18px; text-transform: uppercase; font-weight: 700; border-radius: 22px; padding: 10px 40px; text-transform: none;} .umRecentlyViewedCoursesHead .widget__cta .btn--centered:hover {background: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umRecentlyViewedCoursesHead .widget__title {font-size: 32px;} .umRecentlyViewedCoursesHead .widget__subtitle {font-size: var(--font-size-body-sm);} .umRecentlyViewedCoursesHead .widget__cta {top: 68px;} .umRecentlyViewedCoursesHead .widget__cta .btn--centered {font-size: var(--font-size-body-sm);} } @media only screen and (max-width: 767px) { .umRecentlyViewedCoursesHead .widget__title {font-size: 28px;} .umRecentlyViewedCoursesHead .ember-view .ember-view {padding: 0;} .umRecentlyViewedCoursesHead .widget__cta {position: static; text-align: left;} .umRecentlyViewedCoursesHead .widget__cta .btn--centered {display: inline-block;} } /* For umAboutIntro */ .layout__content .widget.umAboutIntro {padding: 0;} .umAboutIntro .ember-view {background: var(--accent-color);} .umAboutIntro .ember-view .columns {padding: 0;} .umAboutIntro .ember-view .columns:nth-child(2) {padding: 6% 9% 0 6%; color: var(--accent-contrast-color);} .umAboutIntro h3 {font-size: 42px; color: var(--accent-contrast-color); font-weight: 700px; margin-bottom: 32px;} .umAboutIntro p {font-size: 20px; color: var(--accent-contrast-color); margin-bottom: 0;} @media only screen and (max-width: 979px) { .umAboutIntro h3 {font-size: 24px; margin-bottom: 20px;} .umAboutIntro p {font-size: var(--font-size-body-sm);} } @media only screen and (max-width: 767px) { .umAboutIntro .ember-view .columns:nth-child(2) {padding: 6% 9% 6% 6%;} } /* For umExploreTopics */ .layout__content .widget.umExploreTopics {padding: 64px 9%;} .umExploreTopics .widget__title {font-size: 42px; color: var(--accent-color); font-weight: 700; margin-bottom: 42px;} .umExploreTopics .editor-content {text-align: center;} .umExploreTopics .editor-content a {font-size: 18px; font-weight: 700; color: var(--accent-color); text-decoration: none; display: inline-block; width: calc(25% - 4px - 40px); margin: 0 20px; padding: 12px 12px; border: 2px solid var(--secondary-color); border-radius: 15px;} .umExploreTopics .editor-content a:hover {background: var(--secondary-hover-color); color: var(--secondary-contrast-color);} .umExploreTopics .btn--centered { background: var(--secondary-color); color: var(--secondary-contrast-color); font-size: 18px; text-transform: uppercase; font-weight: 700; border-radius: 22px; padding: 10px 40px; text-transform: none;} .umExploreTopics .btn--centered:hover { background: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umExploreTopics .widget__title {font-size: 28px;} .umExploreTopics .editor-content a {font-size: var(--font-size-body-sm); width: calc(50% - 4px - 40px); margin: 0 18px 12px;} .umExploreTopics .btn--centered {font-size: var(--font-size-body-sm);} } @media only screen and (max-width: 767px) { .umExploreTopics .editor-content a {width: 100%; margin: 0 0 12px;} } /* For um4ImagesOverlay */ .layout__content .widget.um4ImagesOverlay {padding: 32px 9%;} .um4ImagesOverlay .featured-content-image-overlay-item {border: 2px solid var(--accent-color); border-radius: 8px; position: relative; overflow: hidden;} .um4ImagesOverlay .featured-content-image-overlay-item::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--accent-color); opacity: .2;} .um4ImagesOverlay .featured-content-image-overlay-item__overlay {width: 100%; height: 100%; background: none;} .um4ImagesOverlay .featured-content-image-overlay-item__overlay .featured-content-image-overlay-item__title {width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: 0 12px; text-align: center; font-weight: 600; color: var(--color-white);} @media only screen and (max-width: 979px) { .um4ImagesOverlay .featured-content-image-overlay-item__overlay .featured-content-image-overlay-item__title {font-size: 20px;} } /* For umContactBlock */ .layout__content .widget.umContactBlock {padding: 64px 9%; background: var(--accent-color); color: var(--accent-contrast-color);} .umContactBlock .ember-view .columns {display: inline-block; vertical-align: middle; width: calc(50% - 4px); float: none;} .umContactBlock h3 {font-size: 50px; font-weight: 700; color: var(--accent-contrast-color);} .umContactBlock p {font-size: 20px; margin-bottom: .75em; color: var(--accent-contrast-color);} .umContactBlock a {display: inline-block; padding: 12px 20px; border: 2px solid var(--accent-contrast-color); border-radius: 12px; font-weight: 700; text-transform: none; width: 100%; max-width: 280px; color: var(--accent-contrast-color) !important; text-align: center;} .umContactBlock a:hover {background: var(--accent-contrast-color); color: var(--accent-color) !important; text-align: center;} @media only screen and (max-width: 979px) { .umContactBlock h3 {font-size: 28px;} .umContactBlock p {font-size: var(--font-size-body-sm);} .umContactBlock a {font-size: var(--font-size-body-sm); max-width: 160px; padding: 6px 20px; border-radius: 8px;} } @media only screen and (max-width: 767px) { .umContactBlock .ember-view .columns {width: 100%;} .umContactBlock .ember-view .columns img {margin-bottom: 12px;} } /* For umProfTraining */ .layout__content .widget.umProfTraining {padding: 64px 9%;} .umProfTraining picture {display: block; width: 100%; border-radius: 20px; overflow: hidden; margin-bottom: 40px;} .umProfTraining picture img {width: 100%;} .umProfTraining .hero__caption {position: static; color: var(--secondary-contrast-color); padding: 0; width: 100%; transform: none;} .umProfTraining .hero {height: auto;} .umProfTraining .hero .hero__caption .hero__title {color: var(--accent-color); font-size: 42px;} .umProfTraining .hero .hero__caption span {color: var(--accent-color) !important; font-size: 23px; display: block; margin-bottom: 20px;} .umProfTraining .hero .btn--primary { background: var(--secondary-color); color: var(--secondary-contrast-color); font-size: 18px; text-transform: uppercase; font-weight: 700; border-radius: 22px; padding: 10px 40px; text-transform: none;} .umProfTraining .hero .btn--primary:hover { background: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umProfTraining .hero .hero__caption .hero__title {font-size: 28px !important; } .umProfTraining .hero .hero__caption span {font-size: 16px;} .umProfTraining .hero .btn--primary {font-size: var(--font-size-body-sm);} } @media only screen and (max-width: 767px) { .umProfTraining .hero .hero__caption span {font-size: var(--font-size-body-sm);} } /* For umProfTraining2 */ .layout__content .widget.umProfTraining2 {padding: 64px 9%;} .umProfTraining2 .row {display: table; width: 100%;} .umProfTraining2 .row .columns {display: table-cell; float: none; vertical-align: middle;} .umProfTraining2 .row .columns img {border-radius: 12px;} .umProfTraining2 .row .columns:nth-child(2) {border: 2px solid var(--accent-color); border-radius: 12px; padding: 32px;} .umProfTraining2 h3 {font-size: 42px; font-weight: 700; color: var(--accent-color);} .umProfTraining2 p {font-size: 23px; color: var(--accent-color); margin-bottom: 40px;} .umProfTraining2 a { background: var(--secondary-color); color: var(--secondary-contrast-color) !important; font-size: 18px; text-transform: uppercase; font-weight: 700; border-radius: 22px; padding: 10px 40px; text-transform: none;} .umProfTraining2 a:hover { background: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umProfTraining2 h3 {font-size: 28px;} .umProfTraining2 p {font-size: var(--font-size-body-sm);} .umProfTraining2 a {font-size: var(--font-size-body-sm);} .umProfTraining2 .row .columns:nth-child(2) {padding: 20px;} .umProfTraining2 .row .columns:nth-child(1) {margin-bottom: 20px;} .umProfTraining2 .row, .umProfTraining2 .row .columns {display: block; width: 100%; padding: 0;} } /* For umProfTrainingHead */ .layout__content .widget.umProfTrainingHead {padding: 32px 9%;} .umProfTrainingHead .ember-view {position: relative;} .umProfTrainingHead .ember-view .ember-view {padding-right: 260px} .umProfTrainingHead .widget__title {font-size: 48px; color: var(--accent-color); font-weight: 600; text-align: left; display: block;} .umProfTrainingHead .widget__subtitle {font-size: 20px; color: var(--accent-color); text-align: left; display: block; margin: 0;} .umProfTrainingHead .widget__cta {position: absolute; top: 50%; right: 0; padding: 0; transform: translateY(-50%);} .umProfTrainingHead .widget__cta .btn--centered {background: var(--secondary-color); color: var(--secondary-contrast-color); font-size: 22px; text-transform: uppercase; font-weight: 700; border-radius: 22px; padding: 10px 40px; text-transform: none;} .umProfTrainingHead .widget__cta .btn--centered:hover {background: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umProfTrainingHead .widget__title {font-size: 32px;} .umProfTrainingHead .widget__cta .btn--centered {font-size: var(--font-size-body-sm);} .umProfTrainingHead .ember-view .ember-view {padding-right: 204px;} .umProfTrainingHead .widget__subtitle {font-size: var(--font-size-body-sm);} } @media only screen and (max-width: 767px) { .umProfTrainingHead .widget__title {font-size: 28px;} .umProfTrainingHead .ember-view .ember-view {padding: 0;} .umProfTrainingHead .widget__cta {position: static; transform: none; text-align: left;} .umProfTrainingHead .widget__cta .btn--centered {display: inline-block;} } /* For umTestimonials1 */ .layout__content .widget.umTestimonials1 {padding: 32px 9%;} .umTestimonials1 .testimonial-widget {padding: 100px 40px; border: 2px solid var(--accent-color); border-radius: 12px;} .umTestimonials1 .testimonial-quote__text {font-size: 20px; color: var(--accent-color); font-style: italic;} .umTestimonials1 .testimonial-quote__text::before, .umTestimonials1 .testimonial-quote__text::after {content: '"';} .umTestimonials1 .testimonial-quote--center {text-align: left; color: var(--accent-color);} .umTestimonials1 .testimonial .testimonial-quote__author-name {font-size: 16px; font-style: normal; margin-bottom: 0;} .umTestimonials1 .testimonial .testimonial-quote__author-description {font-size: 16px;} .umTestimonials1 .icon-navigateright::before, .umTestimonials1 .icon-navigateleft::before {color: var(--secondary-color); font-size: 44px;} .umTestimonials1 .icon-navigateright:hover:before, .umTestimonials1 .icon-navigateleft:hover:before {color: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umTestimonials1 .testimonial-widget {padding: 50px 22px;} .umTestimonials1 .testimonial-quote__text {font-size: 16px;} .umTestimonials1 .testimonials__nav > i {padding: 0;} .umTestimonials1 .testimonials__nav {height: 40px; width: 40px;} .umTestimonials1 .testimonials__nav--right {right: 2%;} .umTestimonials1 .testimonials__nav--left {left: 2%;} } /* For umWhatStudentSays */ .layout__content .widget.umWhatStudentSays {padding: 64px 0; background: var(--accent-tinted-color-90);} .umWhatStudentSays .featured-content-multi-carousel .featured-content-block-grid > li {padding: 0 9%;} .umWhatStudentSays .testimonial-widget {margin: 0;} .umWhatStudentSays .testimonial {background-size: 48% auto; background-position: center left;} .umWhatStudentSays .testimonial::after {content: ''; display: block; clear: both;} .umWhatStudentSays .testimonial .testimonial-quote--center {width: 48%; float: right; padding: 0; text-align: left; color: var(--accent-color); left: 52%;} .umWhatStudentSays .testimonial .testimonial-quote__text {font-size: 20px; font-style: italic;} .umWhatStudentSays .testimonial .testimonial-quote__author-name {font-size: 16px; font-style: normal;} .umWhatStudentSays .testimonial .testimonial-quote__author-description {font-size: 16px; font-style: normal;} .umWhatStudentSays .testimonial .testimonial-quote--center::before {content: 'What our students say'; display: block; font-size: 80px; margin-bottom: 20px; font-weight: 900; line-height: normal;} .umWhatStudentSays .testimonials__nav>i {color: var(--secondary-color);} .umWhatStudentSays .testimonials__nav>i:hover {color: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umWhatStudentSays .testimonial .testimonial-quote--center {} .umWhatStudentSays .testimonial .testimonial-quote--center::before {font-size: 32px;} .umWhatStudentSays .testimonial .testimonial-quote__text {font-size: var(--font-size-body-sm);} .umWhatStudentSays .testimonial .testimonial-quote__author-name, .umWhatStudentSays .testimonial .testimonial-quote__author-description {font-size: 13px;} .umWhatStudentSays .testimonials__nav {font-size: 40px; width: 40px; height: 40px;} } @media only screen and (max-width: 767px) { .umWhatStudentSays .testimonial {padding-top: 80vw; background-size: auto 80vw; background-position: center top;} .umWhatStudentSays .testimonial .testimonial-quote--center {width: 100%; padding-top: 20px; position: static; transform: none;} /* .umWhatStudentSays .testimonial .testimonial-quote--center::before {font-size: 20px;} .umWhatStudentSays .testimonial .testimonial-quote__text {font-size: 16px;} */ } /* For umTestimonial1 */ .layout__content .widget.umTestimonial1 {padding: 64px 0;} .umTestimonial1 .testimonial {padding: 200px 0; position: relative;} .umTestimonial1 .testimonial::before {content: ''; display: block; width:100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--accent-color); opacity: .2;} .umTestimonial1 .testimonial-widget {margin: 0;} .umTestimonial1 .columns {padding: 0;} .umTestimonial1 .testimonial::after {content: ''; display: block; clear: both;} .umTestimonial1 .testimonial .testimonial-quote--right {width: calc(50% - 9%); padding: 0; text-align: left; color: var(--white-color); position: relative; z-index: 1; float: right; margin-right: 9%;} .umTestimonial1 .testimonial .testimonial-quote__text {font-size: 16px; font-style: italic; font-weight: 600;} .umTestimonial1 .testimonial .testimonial-quote__author-name {font-size: 16px; font-style: normal; color: var(--white-color);} .umTestimonial1 .testimonial .testimonial-quote__author-description {font-size: 16px; font-style: normal; color: var(--white-color);} @media only screen and (max-width: 979px) { .umTestimonial1 .testimonial {padding: 100px 0;} } @media only screen and (max-width: 767px) { .umTestimonial1 .testimonial {padding: 60px 0;} .umTestimonial1 .testimonial .testimonial-quote--right {width: 100%; padding: 0 9%; margin: 0;} } /* For umHeroSlider1 */ .layout__content .widget.umHeroSlider1 {padding: 64px 9%;} .umHeroSlider1 .featured-content-carousel__container {margin: 0;} .umHeroSlider1 .featured-content-carousel-item::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(66, 105, 176, .2);} .umHeroSlider1 .featured-content-carousel-item__overlay {bottom: auto; top: 50%; transform: translateY(-50%); background: none; text-align: center;} .umHeroSlider1 .featured-content-carousel-item__title {font-size: 52px; font-weight: 700; margin-bottom: 32px; color: var(--color-white);} .umHeroSlider1 .featured-content-carousel-item__description {font-size: 16px; color: var(--color-white);} .umHeroSlider1 .btn--primary {background: var(--secondary-color); color: var(--secondary-contrast-color); border: 0; font-size: 20px;} .umHeroSlider1 .btn--primary:hover {background: var(--secondary-hover-color);} .umHeroSlider1 .btn.disabled {background: var(--accent-contrast-tinted-background-color); opacity: 1; border: 0; font-size: 20px;} @media only screen and (max-width: 979px) { .umHeroSlider1 .featured-content-carousel-item__title {font-size: 32px; margin-bottom: 20px;} } @media only screen and (max-width: 979px) { .umHeroSlider1 .featured-content-carousel-item__overlay {position: static; transform: none; padding: 12px 0 56px;} .umHeroSlider1 .featured-content-carousel-item__title {font-size: 28px; text-align: left; margin-bottom: 12px;} .umHeroSlider1 .featured-content-carousel-item__description {color: var(--secondary-contrast-color); text-align: left; font-size: var(--font-size-body-sm);} .umHeroSlider1 .featured-content-carousel-item::before {display: none;} } /* For umHeroSlider2 */ .layout__content .widget.umHeroSlider2 {padding: 64px 9%;} .umHeroSlider2 .featured-content-carousel__container {margin: 0; position: relative;} .umHeroSlider2 .featured-content-carousel-item::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(66, 105, 176, .2);} .umHeroSlider2 .featured-content-carousel-item__overlay {bottom: auto; top: 50%; transform: translateY(-50%); background: none; text-align: center;} .umHeroSlider2 .featured-content-carousel-item__title {font-size: 52px; font-weight: 700; margin-bottom: 32px; color: var(--color-white);} .umHeroSlider2 .featured-content-carousel-item__description {font-size: 16px; font-weight: 600; display: inline-block; padding: 8px 32px; border: 2px solid white; color: var(--color-white); border-radius: 12px;} .umHeroSlider2 .featured-content-carousel-item__description:hover {background: var(--color-white); color: var(--accent-color);} .umHeroSlider2 .btn--primary {background: var(--secondary-color); color: var(--secondary-contrast-color); border: 0; font-size: 20px;} .umHeroSlider2 .btn--primary:hover {background: var(--secondary-hover-color);} .umHeroSlider2 .btn.disabled {background: var(--accent-contrast-tinted-background-color); opacity: 1; border: 0; font-size: 20px;} .umHeroSlider2 .featured-content-carousel__dots {display: block; bottom: 40px;} .umHeroSlider2 .featured-content-carousel__dot {width: 15px; height: 15px; background: var(--white-color); opacity: .4;} .umHeroSlider2 .featured-content-carousel__dot--active {opacity: 1;} .umHeroSlider2 .featured-content-carousel__nav {position: static; opacity: 0;} .umHeroSlider2 .featured-content-carousel:hover .featured-content-carousel__nav {opacity: 1;} .umHeroSlider2 .featured-content-carousel__nav .btn {position: absolute; top: 50%; transform: translateY(-50%);} .umHeroSlider2 .featured-content-carousel__nav .btn:nth-child(1) {left: 0;} .umHeroSlider2 .featured-content-carousel__nav .btn:nth-child(2) {right: 0;} @media only screen and (max-width: 979px) { .umHeroSlider2 .featured-content-carousel-item__title {font-size: 32px; margin-bottom: 20px;} .umHeroSlider2 .featured-content-carousel-item__description {font-size: var(--font-size-body-sm);} } @media only screen and (max-width: 767px) { .umHeroSlider2 .featured-content-carousel-item__overlay {position: static; transform: none; padding: 12px 0;} .umHeroSlider2 .featured-content-carousel-item__title {font-size: 28px; color: var(--secondary-contrast-color); text-align: left;} .umHeroSlider2 .featured-content-carousel__dot {background: var(--secondary-contrast-color); opacity: .6;} .umHeroSlider2 .featured-content-carousel__dot--active {opacity: 1;} } /* For umHeroSlider3 */ .layout__content .widget.umHeroSlider3 {padding: 64px 9%;} .umHeroSlider3 .featured-content-carousel__container {margin: 0; position: relative;} .umHeroSlider3 .featured-content-carousel-item {position: relative; background: var(--accent-color);} .umHeroSlider3 .featured-content-carousel-item::after {content: ''; display: block; clear: both;} .umHeroSlider3 .featured-content-carousel-item picture {width: 50%; float: right;} .umHeroSlider3 .featured-content-carousel-item .featured-content-carousel-item__overlay {width: 50%; padding: 0 80px; bottom: auto; top: 50%; transform: translateY(-50%); background: none;} .umHeroSlider3 .featured-content-carousel-item__title {font-size: 52px; font-weight: 700; margin-bottom: 32px; color: var(--accent-contrast-color);} .umHeroSlider3 .featured-content-carousel-item__description {font-size: 16px; color: var(--accent-contrast-color);} .umHeroSlider3 .featured-content-carousel__nav {position: static;} .umHeroSlider3 .featured-content-carousel__nav button {position: absolute; top: 50%; transform: translateY(-50%); font-size: 60px; padding: 0; border: 0; background: none; color: var(--accent-contrast-color);} .umHeroSlider3 .featured-content-carousel__nav button:nth-child(1) {left: 0;} .umHeroSlider3 .featured-content-carousel__nav button:nth-child(2) {right: 0;} @media only screen and (max-width: 979px) { .umHeroSlider3 .featured-content-carousel-item .featured-content-carousel-item__overlay {padding: 0 20px 0 45px;} .umHeroSlider3 .featured-content-carousel-item__title {font-size: 28px; margin-bottom: 20px;} .umHeroSlider3 .featured-content-carousel-item__description {font-size: var(--font-size-body-sm);} .umHeroSlider3 .featured-content-carousel__nav button {font-size: 40px;} } @media only screen and (max-width: 767px) { .umHeroSlider3 .featured-content-carousel-item picture {width: 100%; float: none; margin-bottom: 12px;} .umHeroSlider3 .featured-content-carousel-item .featured-content-carousel-item__overlay {width: 100%; position: static; transform: none; padding: 20px 40px;} } /* For umHeroSlider4 */ .layout__content .widget.umHeroSlider4 {padding: 64px 9%;} .umHeroSlider4 .featured-content-carousel__container {margin: 0; position: relative;} .umHeroSlider4 .featured-content-carousel-item .featured-content-carousel-item__overlay {width: 50%; padding: 0 80px; bottom: auto; top: 50%; transform: translateY(-50%); background: none;} .umHeroSlider4 .featured-content-carousel-item__title {font-size: 52px; font-weight: 700; margin-bottom: 32px; color: var(--color-white);} .umHeroSlider4 .featured-content-carousel-item__description {font-size: 16px; color: var(--color-white);} .umHeroSlider4 .featured-content-carousel__nav {position: static;} .umHeroSlider4 .featured-content-carousel__nav button {position: absolute; top: 50%; transform: translateY(-50%); font-size: 60px; padding: 0; border: 0; background: none; color: var(--color-white);} .umHeroSlider4 .featured-content-carousel__nav button:nth-child(1) {left: 0;} .umHeroSlider4 .featured-content-carousel__nav button:nth-child(2) {right: 0;} @media only screen and (max-width: 979px) { .umHeroSlider4 .featured-content-carousel-item__title {font-size: 32px; margin-bottom: 20px;} .umHeroSlider4 .featured-content-carousel-item .featured-content-carousel-item__overlay {padding: 0 20px 0 45px;} .umHeroSlider4 .featured-content-carousel-item__description {font-size: var(--font-size-body-sm);} .umHeroSlider4 .featured-content-carousel__nav button {font-size: 40px;} } @media only screen and (max-width: 767px) { .umHeroSlider4 .featured-content-carousel-item .featured-content-carousel-item__overlay {position: static; transform: none; width: 100%;} .umHeroSlider4 .featured-content-carousel-item__title {font-size: 28px; color: var(--secondary-contrast-color);} .umHeroSlider4 .featured-content-carousel-item__description {color: var(--secondary-contrast-color);} .umHeroSlider4 .icon-navigateright::before, .umHeroSlider4 .icon-navigateleft::before {color: var(--secondary-contrast-color);} } /* For umImageOverlay1 */ .layout__content .widget.umImageOverlay1 {padding: 64px 9%;} .umImageOverlay1 .featured-content-image-overlay-item {border-radius: 12px; overflow: hidden;} .umImageOverlay1 .featured-content-image-overlay-item__overlay {bottom: auto; padding: 0 40px; bottom: 40px; background: none;} .umImageOverlay1 .featured-content-image-overlay-item__title {font-size: 20px; font-weight: 700; text-transform: uppercase;} .umImageOverlay1 .featured-content-image-overlay-item__description {font-size: var(--font-size-body-sm);} .umImageOverlay1 .featured-content-image-overlay-item:hover {border: 2px solid var(--accent-color);} .umImageOverlay1 .featured-content-image-overlay-item:hover img {opacity: 0;} .umImageOverlay1 .featured-content-image-overlay-item:hover .featured-content-image-overlay-item__title, .umImageOverlay1 .featured-content-image-overlay-item:hover .featured-content-image-overlay-item__description {color: var(--accent-color);} .umImageOverlay1 .featured-content-block-grid li:nth-child(3) .featured-content-image-overlay-item {border: 2px solid var(--secondary-color);} .umImageOverlay1 .featured-content-block-grid li:nth-child(3) .featured-content-image-overlay-item img {opacity: 0;} .umImageOverlay1 .featured-content-block-grid li:nth-child(3) .featured-content-image-overlay-item .featured-content-image-overlay-item__title, .umImageOverlay1 .featured-content-block-grid li:nth-child(3) .featured-content-image-overlay-item .featured-content-image-overlay-item__description {color: var(--accent-color);} /* For umImageOverlay2Head */ .layout__content .widget.umImageOverlay2Head {padding: 32px 9%;} .umImageOverlay2Head .widget__title {font-size: 52px; font-weight: 700; color: var(--accent-color);} .umImageOverlay2Head .widget__subtitle {font-size: 20px; color: var(--accent-color); margin-bottom: 0;} @media only screen and (max-width: 979px) { .umImageOverlay2Head .widget__title {font-size: 32px;} .umImageOverlay2Head .widget__subtitle {font-size: var(--font-size-body-sm);} } /* For umImageOverlay2 */ .layout__content .widget.umImageOverlay2 {padding: 32px 9%;} .umImageOverlay2 .featured-content-multi-carousel-item {border: 1px solid var(--accent-color); border-radius: 12px; position: relative; padding-bottom: 0.75em; background: none;} .umImageOverlay2 .featured-content-multi-carousel-item__body {display: block; padding: 1rem .75em; background: rgba(0,0,0,.1); position: relative; bottom: .75em; left: .75em; text-align: left; position: absolute; width: calc(100% - (2 * .75em));} .umImageOverlay2 .featured-content-multi-carousel-item__title {font-size: 23px; font-weight: 700; color: var(--accent-contrast-color);} .umImageOverlay2 .featured-content-multi-carousel-item__description {font-size: 10px; color: var(--color-white); display: inline-block; padding: 4px 12px; border: 1px solid white; border-radius: 6px;} .umImageOverlay2 .icon-navigateright::before, .umImageOverlay2 .icon-navigateleft::before {font-size: 60px; color: var(--secondary-color); line-height: 60px;} .umImageOverlay2 .icon-navigateright:hover:before, .umImageOverlay2 .icon-navigateleft:hover:before {color: var(--secondary-hover-color);} .umImageOverlay2 .btn--bare-icon {width: 60px; height: 60px; top: 50%; transform: translateY(-50%);} .umImageOverlay2 .btn--bare-icon i {display: inline-block;} .umImageOverlay2 .featured-content-multi-carousel__nav-right {right: -60px;} .umImageOverlay2 .featured-content-multi-carousel__nav-left {left: -60px;} @media only screen and (max-width: 767px) { .umImageOverlay2 .btn--bare-icon {width: 40px; height: 40px;} .umImageOverlay2 .featured-content-multi-carousel__nav-right {right: -20px;} .umImageOverlay2 .featured-content-multi-carousel__nav-left {left: -20px;} .umImageOverlay2 .icon-navigateright::before, .umImageOverlay2 .icon-navigateleft::before {font-size: 40px; line-height: 40px;} } /* For umImageOverlay3 */ .layout__content .widget.umImageOverlay3 {padding: 32px 9%;} .umImageOverlay3 .featured-content-image-overlay-item {border: 1px solid var(--accent-color); border-radius: 12px; position: relative; padding: 0.75em; } .umImageOverlay3 .featured-content-image-overlay-item::before {content: ''; display: block; width: calc(100% - (2 * .75em)); height: calc(100% - (2 * .75em)); background: var(--accent-color); top: .75em; left: .75em; position: absolute; opacity: .2;} .umImageOverlay3 .featured-content-image-overlay-item__overlay {display: block; padding: 1rem .75em; position: relative; bottom: .75em; left: .75em; text-align: left; position: absolute; width: calc(100% - (2 * .75em)); background: none;} .umImageOverlay3 .featured-content-image-overlay-item__title {font-size: 23px; font-weight: 700; color: var(--color-white); margin-bottom: 12px;} .umImageOverlay3 .featured-content-image-overlay-item__description {font-size: 10px; color: var(--secondary-contrast-color); display: inline-block; padding: 4px 12px; background: var(--secondary-color); border-radius: 6px;} .umImageOverlay3 .featured-content-image-overlay-item__description:hover {background: var(--secondary-hover-color); border-radius: 6px;} /* For umImageOverlay4 */ .layout__content .widget.umImageOverlay4 {padding: 32px 9%;} .umImageOverlay4 .featured-content-multi-carousel-item {background: var(--accent-tinted-color-90);} .umImageOverlay4 .featured-content-multi-carousel-item__body {padding: 0 .75em .75em; text-align: left;} .umImageOverlay4 .catalog-grid-item__asset-container {padding: 0.75em;} .umImageOverlay4 .featured-content-multi-carousel-item img {border-radius: 12px; padding: 0; margin-bottom: 12px;} .umImageOverlay4 .featured-content-multi-carousel-item__title {text-align: left; font-size: 22px; color: var(--accent-color);} .umImageOverlay4 .featured-content-multi-carousel-item__description {padding: 0; color: var(--accent-color); font-size: var(--font-size-body-sm); margin-bottom: 12px;} .umImageOverlay4 .featured-content-multi-carousel-item__body::after {content: 'Explore More'; display: inline-block; font-size: var(--font-size-small); font-weight: 700; background: var(--secondary-color); color: var(--secondary-contrast-color); border-radius: 6px; padding: 6px 12px;} .umImageOverlay4 .btn--bare-icon i {line-height: 60px;} .umImageOverlay4 .btn--bare-icon i::before {color: var(--secondary-color); font-size: 60px;} .umImageOverlay4 .btn--bare-icon i:hover:before {color: var(--secondary-hover-color);} .umImageOverlay4 .featured-content-multi-carousel__nav-right {right: -60px;} .umImageOverlay4 .featured-content-multi-carousel__nav-left {left: -60px;} @media only screen and (max-width: 979px) { .umImageOverlay4 .featured-content-multi-carousel__nav-right {right: -30px;} .umImageOverlay4 .featured-content-multi-carousel__nav-left {left: -30px;} } @media only screen and (max-width: 767px) { .umImageOverlay4 .btn--bare-icon i::before {font-size: 40px; line-height: 40px;} .umImageOverlay4 .featured-content-multi-carousel__nav-right {right: -20px;} .umImageOverlay4 .featured-content-multi-carousel__nav-left {left: -20px;} } /* For RecomendedCourse1Head */ .layout__content .widget.umRecomendedCourse1Head {padding: 32px 9%;} .umRecomendedCourse1Head .ember-view {position: relative;} .umRecomendedCourse1Head .widget__title {font-size: 42px; color: var(--accent-color); font-weight: var(--font-weight-medium); text-align: left; display: block; padding-right: 200px;} .umRecomendedCourse1Head .widget__cta {position: absolute; top: 0; right: 0; padding: 0;} .umRecomendedCourse1Head .widget__cta .btn--centered {background: var(--secondary-color); color: var(--secondary-contrast-color); font-size: 18px; text-transform: uppercase; font-weight: 700; border-radius: 22px; padding: 10px 40px; text-transform: none;} .umRecomendedCourse1Head .widget__cta .btn--centered:hover {background: var(--secondary-hover-color);} @media only screen and (max-width: 979px) { .umRecomendedCourse1Head .widget__title {font-size: 28px;} .umRecomendedCourse1Head .widget__cta .btn--centered {font-size: var(--font-size-body-sm);} } @media only screen and (max-width: 979px) { .umRecomendedCourse1Head .widget__title {padding: 0;} .umRecomendedCourse1Head .widget__cta {position: static; text-align: left;} .umRecomendedCourse1Head .widget__cta .btn--centered {display: inline-block;} } /* For RecomendedCourse1 */ .layout__content .widget.umRecomendedCourse1 {padding: 32px 9%;} .umRecomendedCourse1 .featured-content-image-overlay-item img {margin-bottom: 20px; border-radius: 12px;} .umRecomendedCourse1 .featured-content-image-overlay-item__overlay {position: static; padding: 0; background: none;} .umRecomendedCourse1 .featured-content-image-overlay-item__overlay::after { content: 'Explore More'; display: inline-block; font-size: var(--font-size-small); font-weight: 700; background: var(--secondary-color); color: var(--secondary-contrast-color); border-radius: 6px; padding: 6px 12px;} .umRecomendedCourse1 .featured-content-image-overlay-item__title {color: var(--accent-color); font-size: 16px; font-weight: 600; margin-bottom: 20px; display: block; min-height: 40px;} .umRecomendedCourse1 .featured-content-image-overlay-item__description {color: var(--accent-color); font-size: 12px; display: block; min-height: 66px;} @media only screen and (max-width: 979px) { .umRecomendedCourse1 .featured-content-image-overlay-item__title {min-height: 0;} .umRecomendedCourse1 .featured-content-image-overlay-item__description {min-height: 0; margin-bottom: 20px;} } /* For umLinkList1 */ .layout__content .widget.umLinkList1 {padding: 32px 9%;} .umLinkList1 .catalog-grid-item {border: 1px solid var(--secondary-color); border-radius: 12px; position: relative; min-height: 300px;} .umLinkList1 .catalog-grid-item .catalog-grid-item__asset-container img {opacity: 0;} .umLinkList1 .catalog-grid-item .catalog-grid-item__body {position: absolute; top: 50%; transform: translateY(-50%); text-align: center;} .umLinkList1 .catalog-grid-item .catalog-grid-item__hr {display: none;} .umLinkList1 .catalog-grid-item .catalog-grid-item__cta-container {display: none;} .umLinkList1 .catalog-grid-item__title {margin-bottom: 20px; color: var(--accent-color); font-weight: 600;} .umLinkList1 .catalog-grid-item__description {height: auto !important; display: inline-block; padding: 6px 28px; border: 1px solid var(--secondary-color); border-radius: 10px; color: var(--secondary-color);} .umLinkList1 .catalog-grid-item__description:hover { background: var(--secondary-color); border-radius: 10px; color: var(--secondary-contrast-color);} .umLinkList1 .catalog-grid-item .column {position: static;} @media only screen and (max-width: 979px) { .umLinkList1 .catalog-grid-item__title {height: auto !important;} .umLinkList1 .catalog-grid-item .catalog-grid-item__body {width: calc(100% - 1.5em);} } /* For umLinkList2 */ .layout__content .widget.umLinkList2 {padding: 32px 9%;} .umLinkList2 .featured-content-image-overlay-item {position: relative; border-radius: 12px;} .umLinkList2 .featured-content-image-overlay-item img {opacity: 0;} .umLinkList2 .featured-content-block-grid li:nth-child(3) .featured-content-image-overlay-item {background: var(--accent-hover-color);} .umLinkList2 .featured-content-block-grid li:nth-child(6) .featured-content-image-overlay-item {background: var(--accent-color);} .umLinkList2 .featured-content-block-grid li:nth-child(9) .featured-content-image-overlay-item {background: var(--accent-highlight-color);} .umLinkList2 .featured-content-block-grid li:nth-child(12) .featured-content-image-overlay-item {background: var(--secondary-color);} .umLinkList2 .featured-content-image-overlay-item__overlay {top: 50%; transform: translateY(-50%); text-align: center; bottom: auto; background: none;} @media only screen and (max-width: 979px) { .featured-content-image-overlay-item__title {font-size: 18px;} } /* For umNavigation1 */ .umNavigation1 {display: block; width: calc(100% - 300px - 200px);} .umNavigation1 .navigation-bar .top-bar-section ul > li.navigation-item:not(.has-form) {padding: 0;} .umNavigation1 .navigation-bar .top-bar-section ul > li.navigation-item:not(.has-form) a {padding: 8px 1.5em; font-size: 16px; text-transform: none;} .umNavigation1 .navigation-bar .top-bar-section ul > li.has-dropdown.hover > a {border-bottom: 4px solid var(--link-color);} .umNavigation1 .navigation-bar .top-bar-section .has-dropdown > a::after {display: none;} .umNavigation1 .navigation-bar .top-bar-section ul > li.has-dropdown.hover ul li {box-shadow:none; border-bottom: 1px solid var(--secondary-contrast-color); font-size: var(--font-size-body-sm);} .umNavigation1 .navigation-bar .top-bar-section ul > li.has-dropdown.hover ul li a {font-size: var(--font-size-body-sm);} .umNavigation1 .navigation-bar .top-bar-section ul > li.has-dropdown.hover ul li:hover a {color: var(--link-color);} .umNavigation1 .navigation-bar .top-bar-section ul.left {border: 0;} /* For umNavigation2 */ .umNavigation2 {display: block; width: calc(100% - 300px - 200px);} .umNavigation2 .navigation-bar .top-bar-section ul > li.navigation-item:not(.has-form) {padding: 0;} .umNavigation2 .navigation-bar .top-bar-section ul > li.navigation-item:not(.has-form) a {padding: 8px 1.5em; font-size: 16px; text-transform: none;} .umNavigation2 .navigation-bar .top-bar-section ul > li a {color: var(--accent-contrast-tinted-background-color);} .umNavigation2 .navigation-bar .top-bar-section ul.left {border: 0;} .umNavigation2 .navigation-bar .top-bar-section .has-dropdown > a::after {border-color: var(--accent-contrast-tinted-background-color) transparent transparent; display: inline-block; vertical-align: middle; margin-left: 8px; position: static; margin-top: 0; transform: rotate(-90deg);} .umNavigation2 .navigation-bar .top-bar-section ul > li.hover.navigation-item:not(.has-form) > a {background: var(--accent-tinted-color-70); border-radius: 12px; color: var(--link-color);} .umNavigation2 .navigation-bar .top-bar-section .has-dropdown.hover > a::after {border-color: var(--link-color) transparent transparent; transform: rotate(0);} .umNavigation2 .navigation-bar .top-bar-section ul > li.has-dropdown ul li {border: 0;} .umNavigation2 .navigation-bar .top-bar-section ul > li.has-dropdown ul li a {font-size: var(--font-size-body-sm);} .umNavigation2 .navigation-bar .top-bar-section ul > li.hover.navigation-item:not(.has-form) ul li {border: 0; box-shadow: none;} .umNavigation2 .navigation-bar .top-bar-section ul > li.hover.navigation-item:not(.has-form) ul li a:hover {background: var(--accent-tinted-color-70); border-radius: 12px; color: var(--link-color);} /* For umNavigation3 */ .umNavigation3 {display: block; width: calc(100% - 300px - 200px);} .umNavigation3 .navigation-bar .top-bar-section ul > li.navigation-item:not(.has-form) {padding: 0;} .umNavigation3 .navigation-bar .top-bar-section ul > li.navigation-item:not(.has-form) a {padding: 8px 1.5em; font-size: 16px; text-transform: none; background: none;} .umNavigation3 .navigation-bar .top-bar-section ul > li a {color: var(--accent-contrast-tinted-background-color); background: none;} .umNavigation3 .navigation-bar .top-bar-section ul.left {border: 0;} .umNavigation3 .navigation-bar .top-bar-section .has-dropdown > a::after {border: 0; content: '+'; float: right; position: static; margin-top: 0; margin-left: 8px; font-size: 24px;} .umNavigation3 .navigation-bar .top-bar-section .has-dropdown.hover > a::after {content: '-';} .umNavigation3 .navigation-bar .top-bar-section ul > li.has-dropdown ul li {border: 0;} .umNavigation3 .navigation-bar .top-bar-section ul > li.has-dropdown ul li a {font-size: var(--font-size-body-sm);} .umNavigation3 .navigation-bar .top-bar-section ul > li.hover.navigation-item:not(.has-form) ul li {border: 0; box-shadow: none; background: none;} .umNavigation3 .navigation-bar .top-bar-section ul > li.hover.navigation-item:not(.has-form) ul li a:hover {background: var(--accent-tinted-color-70); color: var(--link-color);} .umNavigation3 .navigation-bar .top-bar-section ul > li.hover.navigation-item:not(.has-form) {border: 1px solid var(--link-color); border-bottom: 0; border-top-left-radius: 8px; border-top-right-radius: 8px;} .umNavigation3 .navigation-bar .top-bar-section ul > li.hover.navigation-item:not(.has-form) ul {border: 1px solid var(--link-color); border-top: 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; width: calc(100% + 2px); left: -1px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background: var(--white-color);} .umNavigation3 .navigation-bar .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {background: none;} /* For umNavigation1 */ .umNavigation4 {display: block; width: calc(100% - 300px - 200px);} .umNavigation4 .navigation-bar .top-bar-section ul > li.navigation-item:not(.has-form) {padding: 0;} .umNavigation4 .navigation-bar .top-bar-section ul > li.navigation-item:not(.has-form) a {padding: 8px 1.5em; font-size: 16px; text-transform: none;} .umNavigation4 .navigation-bar .top-bar-section ul > li.has-dropdown.hover > a {background: var(--link-color); color: var(--white-color);} .umNavigation4 .navigation-bar .top-bar-section .has-dropdown > a::after {display: none;} .umNavigation4 .navigation-bar .top-bar-section ul > li.has-dropdown ul li {box-shadow:none; border: 0; padding: 0;} .umNavigation4 .navigation-bar .top-bar-section ul > li.has-dropdown ul li a {font-size: var(--font-size-body-sm);} .umNavigation4 .navigation-bar .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover {color: var(--link-color); background: var(--accent-tinted-color-70);} .umNavigation4 .navigation-bar .top-bar-section ul.left {border: 0;} /* For umSearchbar1 */ .layout__content .widget.umSearchbar1 {padding: 32px 9%;} .umSearchbar1 button i {display: none;} .umSearchbar1 .search-bar-widget button { background: var(--accent-color); border-color: var(--accent-color); color: var(--accent-contrast-color); font-weight: 600; text-transform: none; height: 50px; font-size: 20px; padding: 0 42px; border-radius: 8px !important;} .umSearchbar1 .search-bar-widget button:hover { background: var(--accent-hover-color);} .umSearchbar1 .search-bar-widget input {height: 50px; width: calc(100% - 156px); border: 0; box-shadow: none; border-radius: 8px; background: var(--accent-tinted-color-80); padding-left: 40px;} @media only screen and (max-width: 979px) { .umSearchbar1 .search-bar-widget button {font-size: var(--font-size-body-sm); height: 42px;} .umSearchbar1 .search-bar-widget input {height: 42px; width: calc(100% - 136px); font-size: var(--font-size-body-sm); padding-left: 20px;} } /* For umSearchbar2 */ .layout__content .widget.umSearchbar2 {padding: 32px 9%;} .umSearchbar2 button i {} .umSearchbar2 .search-bar-widget button { background: var(--accent-color); color: var(--accent-contrast-color); font-weight: 600; text-transform: none; height: 60px; font-size: 20px; padding: 0 32px; border-radius: 0 !important;} .umSearchbar2 .search-bar-widget input {height: 60px; width: 100%; border: 0; box-shadow: none; border-radius: 0; background: var(--white-color); padding-left: 40px; border: 1px solid var(--accent-color);} @media only screen and (max-width: 979px) { .umSearchbar2 .search-bar-widget input {height: 42px; font-size: var(--font-size-body-sm); padding-left: 20px;} .umSearchbar2 .search-bar-widget button {height: 42px; font-size: var(--font-size-body-sm);} } /* For umSearchbar3 */ .layout__content .widget.umSearchbar3 {padding: 32px 9%;} .umSearchbar3 button i { font-size: 35px; color: var(--accent-color);} .umSearchbar3 .search-bar-widget button { background: none; color: var(--white-color); font-weight: 600; text-transform: none; height: 60px; font-size: 20px; padding: 0 32px; border-radius: 0 !important; border: 0;} .umSearchbar3 .search-bar-widget button span {display: none;} .umSearchbar3 .search-bar-widget input {height: 60px; width: 100%; border: 0; box-shadow: none; border-radius: 0; background: var(--white-color); padding-left: 40px; border: 1px solid var(--accent-color); border-radius: 30px;} @media only screen and (max-width: 979px) { .umSearchbar3 button i {display: block; font-size: 26px;} .umSearchbar3 .search-bar-widget button {height: 42px; } .umSearchbar3 .search-bar-widget input {height: 42px; padding-left: 20px; font-size: var(--font-size-body-sm);} } /* For Communities Discussion Board */ .layout__content .widget.widget--discussion-board, .learn.dashboard .widget.widget--discussion-board {padding: 64px 9%;} .widget--discussion-board .columns {padding: 0;} .widget--discussion-board .widget__title {text-align: left; font-size: 32px; font-weight: 600; color: var(--secondary-contrast-color);} .widget--discussion-board .btn--primary { display: inline-block; margin-left: 8%; background: 1px solid var(--accent-color); font-weight: 600; border: 0; border-radius: 6px; color: var(--white-color);} .widget--discussion-board .discussion-search-bar .catalog-filters {border-radius: 24px; overflow: hidden; border: 0; background: var(--accent-tinted-color-80);} .widget--discussion-board .discussion-search-bar .catalog-filters__search {background: none;} .widget--discussion-board .discussion-search-bar input, .widget--discussion-board .discussion-search-bar select {background: none; padding: 0 20px; margin: 0;} .widget--discussion-board .discussion-search-bar {margin-bottom: 60px;} .widget--discussion-board .discussion-search-bar .catalog-filters__sort {border-left: 2px solid var(--white-color); background: none;} .discussion-card__list > li {width: 50%;} .discussion-card__list > li .discussion-card {padding: 4%; border: 2px solid var(--secondary-color);} .discussion-card__list > li .discussion-card .discussion-card__title {font-size: 23px; color: var(--secondary-contrast-color); /*padding-bottom: 20px;*/ font-weight: var(--font-weight-medium);} .discussion-card__list > li .discussion-card .discussion-card__body-text {font-size: var(--font-size-body-sm); color: var(--secondary-contrast-color); /*padding-bottom: 20px;*/} .discussion-card__list > li .discussion-card .btn--primary {color: var(--secondary-color); font-size: 18px; background: none; border: 1px solid var(--secondary-color); font-weight: 700; border-radius: 12px;} .discussion-card__list > li .discussion-card .btn--primary:hover {color: var(--secondary-contrast-color); background: var(--secondary-color);} @media only screen and (max-width: 979px) { .widget--discussion-board .discussion-search-bar {margin-bottom: 40px;} .discussion-card__list > li {width: 100%;} } @media only screen and (max-width: 767px) { .discussion-card__list > li .discussion-card .discussion-card__title {font-size: 18px;} .discussion-card__list > li .discussion-card .discussion-card__body-text {font-size: 12px;} .discussion-card__list > li .discussion-card .btn--primary {font-size: var(--font-size-body-sm);} } /* For umVideo2 */ .layout__content .widget.umVideo2 {padding: 64px 9%;} .umVideo2 .columns {padding: 0;} .umVideo2 > .ember-view {display: block; border: 1px solid var(--link-color); overflow: hidden; border-radius: 12px;} .umVideo2 > .ember-view::after {content: ''; display: block; clear: both;} .umVideo2 > .ember-view > .ember-view {width: 48%; float: right; padding: 4%;} .umVideo2 > .ember-view .video__container {padding: 0;} .umVideo2 > .ember-view > .row {width: 48%; float: left; text-align: left;} .umVideo2 .widget__title {text-align: left; color: var(--secondary-contrast-color);} .umVideo2 .widget__subtitle {text-align: left; margin-bottom: 0; min-height: 80px; color: var(--secondary-contrast-color);} .umVideo2 .widget__cta {text-align: left;} .umVideo2 .btn--centered {display: inline-block; margin-left: 8%; background: var(--link-color); font-weight: 600; border: 0; border-radius: 6px;} @media only screen and (max-width: 979px) { .umVideo2 > .ember-view > .ember-view, .umVideo2 > .ember-view > .row {width: 100%; float: none;} .umVideo2 .widget__subtitle {min-height: 0;} .umVideo2 .widget__cta {text-align: center; padding: 1.5rem 0 0;} } /* For umVideo3 */ .layout__content .widget.umVideo3 {padding: 64px 9%;} .umVideo3 .columns {padding: 0;} .umVideo3 .video__container {padding: 0; border-radius: 12px; overflow: hidden;} .umVideo3 .widget__title {font-size: 42px; font-weight: 600; color: var(--secondary-contrast-color); text-align: left;} .umVideo3 .widget__subtitle {font-size: 20px; color: var(--secondary-contrast-color); text-align: left;} @media only screen and (max-width: 979px) { .umVideo3 .widget__title, .umVideo4 .widget__title {font-size: 28px;} .umVideo3 .widget__subtitle {font-size: var(--font-size-body-sm);} } /* For umVideo4 */ .layout__content .widget.umVideo4 {padding: 64px 9%;} .umVideo4 .columns {padding: 0;} .umVideo4 .video__container {padding: 0;} .umVideo4 > .ember-view {position: relative;} .umVideo4 > .ember-view > .ember-view {padding-bottom: 40px;} .umVideo4 > .ember-view > .ember-view, .umVideo4 > .ember-view > .row {display: inline-block; vertical-align: middle; width: calc(48% - 4px);} .umVideo4 > .ember-view > .row {margin-left: 4%;} .umVideo4 .widget__title {font-size: 42px; font-weight: 600; color: var(--secondary-contrast-color); text-align: left;} .umVideo4 .widget__subtitle {font-size: 20px; color: var(--secondary-contrast-color); text-align: left;} .umVideo4 .widget__cta {position: absolute; bottom: 0; left: 0;} .umVideo4 .btn--centered {display: inline-block; background: var(--link-color); font-weight: 600; border: 0; border-radius: 6px;} @media only screen and (max-width: 979px) { .umVideo4 .widget__title {font-size: 28px;} .umVideo4 .widget__subtitle {font-size: var(--font-size-body-sm);} .umVideo4 > .ember-view > .ember-view, .umVideo4 > .ember-view > .row {width: 100%; margin: 0;} .umVideo4 .widget__cta {position: static; text-align: center;} } /* For umVideo4 */ .layout__content .widget.umVideo5 {padding: 64px 9%;} .umVideo5 .columns {padding: 0;} .umVideo5 .video__container {padding: 0; border-radius: 12px; overflow: hidden;} .umVideo5 > .ember-view {position: relative; display: flex; flex-direction: row-reverse;} .umVideo5 > .ember-view > .ember-view {padding-bottom: 40px; padding: 32px; border: 1px solid var(--link-color); border-radius: 12px;} .umVideo5 > .ember-view > .ember-view, .umVideo5 > .ember-view > .row {display: inline-block; vertical-align: middle; width: calc(49% - 4px);} .umVideo5 > .ember-view > .row {} .umVideo5 .widget__title {font-size: 28px; font-weight: 600; color: var(--secondary-contrast-color); text-align: left;} .umVideo5 .widget__subtitle {font-size: 18px; color: var(--secondary-contrast-color); text-align: left;} .umVideo5 .widget__cta {position: absolute; left: calc(50% + 1% + 32px); bottom: 32px;} .umVideo5 .btn--centered {display: inline-block; background: var(--link-color); font-weight: 600; border: 0; border-radius: 6px; margin: 0;} @media only screen and (max-width: 979px) { .umVideo5 > .ember-view > .ember-view, .umVideo5 > .ember-view > .row {width: 100%;} .umVideo5 > .ember-view > .ember-view {margin-bottom: 20px;} .umVideo5 > .ember-view {display: block;} .umVideo5 .widget__subtitle {font-size: var(--font-size-body-sm); margin: 0;} .umVideo5 .widget__cta {position: static; text-align: center;} } /* For resolving header overlapping issue in admin & user account pages */ .account .header--dashboard, .manager .header--dashboard, .survey .header--dashboard {position: static;} /* ============================================================ 16. PAGE-SPECIFIC — REDEMPTION PAGE Redemption/code-entry page: subtitle text fixes, Dev Docs-aligned card design (white bg, dawn gradient strip, Tangerine buttons, branded form fields). ============================================================ */ /* --- Fix subtitle on redemption page with code applied --- */ /* --- Fix subtitle on redemption page with code applied --- */ /* Hide original: "Fill in your details and click register..." */ body.redeem .widget__subtitle span#i18n-10 { visibility: hidden; display: block; height: 0; } /* Inject Page 1 Text */ body.redeem .widget__subtitle h5:has(#i18n-10):after { content: "Fill out the form below and click register to access your content."; visibility: visible; display: block; font-size: var(--font-size-body-lg); text-align: center; padding-top: 20px; } /* --- PAGE 2: Redemption page without code --- */ /* Hide original: "Fill in your details, validate your code..." */ body.redeem span#i18n-3 { visibility: hidden; display: block; height: 0; } input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],textarea { margin: .5rem 0 .5rem; } /* ============================================ Course Detail Page - Session Dropdown Styling ============================================ */ /* Session dropdown select - focused styling only */ select.enroll__session__select { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: var(--font-weight-medium); color: var(--color-black); background-color: var(--color-white); border: 1px solid var(--color-gray); border-radius: 8px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } select.enroll__session__select:hover { border-color: var(--color-ruby); } select.enroll__session__select:focus { outline: none; border-color: var(--color-ruby); box-shadow: 0 0 0 2px rgba(255, 102, 51, 0.15); } /* Inject Page 2 Text */ body.redeem .widget__subtitle h5:has(#i18n-3):after { content: "Fill out the form, validate your redemption code, and click register to access your content."; visibility: visible; display: block; font-size: var(--font-size-body-lg); text-align: center; padding-top: 20px; } /* ============================================ REDEMPTION PAGE: Dev Docs Alignment ============================================ Added: April 28, 2026 Environment: Production (learn.cloudflare.com) Mirrors the sign-in card design language: - Same card treatment (12px radius, layered shadow) - Same Dawn gradient accent strip (4px) - Same typography scale (Inter, brand tracking) - Same white space rhythm (40px padding) - Same button treatment (Tangerine fill, 8px radius) Dev docs patterns applied: - Content-forward, minimal decoration - White background, ample breathing room - Muted secondary text (#6B6B6B) - Eyebrow labels (ALL CAPS, Semibold, +5% tracking) - Single clear CTA per view state All selectors scoped to body.redeem. ============================================ */ /* ----- Page: white background, centered content ----- Match body.learn.course treatment (Chunk 2). The form should feel like a focused card, not a full-width admin panel. */ body.redeem { background: var(--color-white) !important; } body.redeem .layout__content { max-width: 600px; margin: 60px auto; padding: 0 20px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ----- Card wrapper ----- Same treatment as .cf-signin-card: 12px radius, layered shadow, overflow clip. Targets the widget container TI renders. */ body.redeem .widget, body.redeem .session__content, body.redeem .redeem-widget { background: var(--color-white) !important; /* border-radius: 12px !important; */ overflow: hidden !important; /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06) !important; */ padding: 0 !important; width: 60%; border-left: 1px solid var(--light-gray-accent); border-right: 1px solid var(--light-gray-accent); } /* --- Adjust Margin of Contents */ .widget--redemption-for .medium-centered, .widget--redemption-form_standard .medium-centered { width: 70%; padding-bottom: 2rem; } /* ----- Dawn gradient accent strip ----- 4px strip at top of card. Same as .cf-signin-gradient. Uses ::before on the widget to avoid needing HTML changes. */ body.redeem .widget::before, body.redeem .session__content::before, body.redeem .redeem-widget::before { content: ''; display: block; height: 4px; background: var(--gradient-dawn); } /* ----- Inner content padding ----- Match .cf-signin-head: 40px horizontal, generous vertical spacing. */ body.redeem .widget__title, body.redeem .widget__subtitle { padding-left: 40px !important; padding-right: 40px !important; } body.redeem .widget__title { padding-top: 48px !important; } /* ----- Title: Brand headline ----- Inter Semibold, -3% tracking, 100% leading. Same scale as .cf-signin-txt h3 but larger (this is a page title, not a row heading). */ body.redeem .widget__title, body.redeem h2 { font-family: var(--font-primary) !important; font-weight: var(--font-weight-semibold) !important; font-size: var(--font-size-form-title) !important; letter-spacing: var(--letter-spacing) !important; line-height: var(--line-height-headline) !important; color: var(--color-black) !important; text-align: center !important; } /* ----- Subtitle: Brand body ----- Inter Regular, -2% tracking. Match .cf-signin-subtitle color (#404040) and weight (400). */ body.redeem .widget__subtitle, body.redeem .widget__subtitle h5 { font-family: var(--font-primary) !important; font-weight: var(--font-weight-regular) !important; font-size: var(--font-size-body-sm) !important; letter-spacing: var(--letter-spacing) !important; line-height: 1.4 !important; color: var(--text-muted) !important; /* standardized to match all other widget subtitles */ text-align: center !important; } /* ----- Form area padding ----- The form inside the card needs the same 40px horizontal rhythm as the sign-in card rows. */ body.redeem form, body.redeem .session__form { padding: 24px 40px 56px !important; display: none; } /* ----- Labels: Eyebrow treatment ----- ALL CAPS, Semibold, +5% tracking. Same as .expandable-sidebar__toggle (Chunk 3) and brand spec for eyebrow text. */ body.redeem label, body.redeem .form__label { font-family: var(--font-primary) !important; font-size: var(--font-size-small) !important; font-weight: var(--font-weight-semibold) !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--color-black) !important; display: block !important; margin-bottom: 6px !important; } /* ----- Inputs: Clean, rounded, branded focus ----- Match the session dropdown styling already in place (lines 2699-2719 in full CSS). Consistent border radius, Ruby focus ring. */ body.redeem input[type="text"], body.redeem input[type="email"], body.redeem input[type="password"], body.redeem input[type="tel"], body.redeem .ember-text-field, body.redeem textarea, body.redeem select { font-family: var(--font-primary) !important; font-size: var(--font-size-body-sm) !important; font-weight: var(--font-weight-regular) !important; letter-spacing: var(--letter-spacing) !important; color: var(--color-black) !important; background: var(--color-white) !important; border: var(--border-ui) !important; border-radius: var(--radius-md) !important; padding: 12px 14px !important; transition: border-color var(--transition-normal), box-shadow var(--transition-normal) !important; width: 100% !important; box-sizing: border-box !important; } body.redeem input:focus, body.redeem .ember-text-field:focus, body.redeem textarea:focus, body.redeem select:focus { outline: none !important; border-color: var(--color-ruby) !important; box-shadow: 0 0 0 3px rgba(255, 102, 51, 0.12) !important; } /* ----- Button hierarchy — Redemption Page ----- 1. Register (true primary CTA) White pill, gray border, black text → tangerine on hover. Matches the site-wide primary pill pattern (cfuEnterpriseCard). 2. Validate (functional/secondary) White pill, blackberry border + blackberry text → tangerine on hover. Intentional and active-looking (not disabled), but cooler/quieter than Register so it doesn't compete for the user's main action. 3. + Add Another Code (tertiary/utility) Plain muted text link — no border, no fill. Most users won't need it; it should be present but visually unobtrusive. 4. Sign In (inline link) Blackberry text, underlined → tangerine on hover. Matches global link language, embedded in a sentence. NO element uses orange/tangerine as a default state. Orange appears only on hover. ----------------------------- */ /* --- 1. Register: primary CTA pill --- */ body.redeem .btn.btn--primary, body.redeem .btn--primary { display: inline-block; background: var(--color-white); border: 1px solid var(--color-btn-border); border-radius: var(--radius-pill); color: var(--color-black); font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; padding: 12px 32px; text-decoration: none; white-space: nowrap; transition: border-color var(--transition-normal), color var(--transition-normal), background-color var(--transition-normal) !important; cursor: pointer; } body.redeem .btn.btn--primary:hover, body.redeem .btn--primary:hover { background-color: var(--color-ruby-tint); border-color: var(--color-tangerine); color: var(--color-tangerine); text-decoration: none; } /* --- 2. Validate: soft blackberry fill pill --- Selector uses both .btn--primary AND .btn--submit to beat the Register rule above (Register uses .btn--expand, not .btn--submit, so this only catches Validate). No border — 20% opacity blackberry fill + blackberry text. Reads as intentional/active without competing with Register. */ body.redeem .btn--primary.btn--submit, body.redeem .btn.btn--primary.btn--submit { background: var(--bg-subtle); border: none; color: var(--color-blackberry); border-radius: var(--radius-pill) !important; font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; padding: 12px 24px; white-space: nowrap; text-decoration: none; transition: background-color var(--transition-normal), color var(--transition-normal); cursor: pointer; } body.redeem .btn--primary.btn--submit:hover, body.redeem .btn.btn--primary.btn--submit:hover { background: rgba(246, 130, 31, 0.12); color: var(--color-tangerine); border: none; text-decoration: none; } /* --- 3. + Add Another Code: tertiary plain text link --- No border, no fill. Muted gray — present but unobtrusive. Blackberry on hover signals it's interactive. */ body.redeem .btn--link:not(.btn--inherit-font):not(.btn--submit) { display: inline; background: none; border: none; border-radius: 0; padding: 0; font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--text-muted); text-decoration: none; cursor: pointer; transition: color var(--transition-normal); } body.redeem .btn--link:not(.btn--inherit-font):not(.btn--submit):hover { color: var(--color-blackberry); text-decoration: underline; background: none; border: none; } /* --- 4. Sign In: inline blackberry text link --- */ body.redeem .btn--link.btn--inherit-font { color: var(--color-blackberry); background: none; border: none; padding: 0; font-weight: var(--font-weight-bold); text-decoration: underline; border-radius: 0; cursor: pointer; transition: color var(--transition-normal); } body.redeem .btn--link.btn--inherit-font:hover { color: var(--color-tangerine); text-decoration: underline; background: none; border: none; } /* ----- T&C and other links inside the widget ----- Remove orange default. Use global blackberry link color — no orange on white as a default state. */ body.redeem form a, body.redeem .widget a { color: var(--color-blackberry); text-decoration: none; } body.redeem form a:hover, body.redeem .widget a:hover { color: var(--color-black); text-decoration: underline; } /* ----- Error states ----- Cherry (#960C3E) for form validation. Same font stack, small size. */ body.redeem .error, body.redeem .form-error, body.redeem .alert-box.alert { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; color: var(--color-cherry); letter-spacing: -0.02em; } /* ----- Responsive (< 640px) ----- Same breakpoint as sign-in card. Tighter padding, full-width buttons. */ /* ----- Form layout: First Name / Last Name side-by-side ----- .small-6.name-input divs sit inside a .form-group. Force flex so they share the row evenly with a gap. */ body.redeem .form-group:has(.name-input) { display: flex; flex-direction: row; gap: 12px; width: 100%; } body.redeem .name-input { flex: 1 1 0; min-width: 0; width: auto; } body.redeem .name-input .field, body.redeem .name-input .field__input-wrapper, body.redeem .name-input input { width: 100%; box-sizing: border-box; } /* ----- Code entry row: input + Validate button ----- Real DOM (from TI HTML): .ember-view.row ← outer row .large-12.columns ← full-width column .row.collapse ← inner row with input + button .small-12.medium-8.columns ← code input .small-12.medium-4.columns ← Validate button Strategy: make the inner .row.collapse a flex row with a gap, constrain the input column so it doesn't bleed edge-to-edge, and let the button column shrink to its natural width. */ /* Inner row: flex with breathing room between input and button */ body.redeem .widget--redemption-form .row.collapse { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: nowrap; width: 100%; box-sizing: border-box; margin: 0; } /* Input column: flexible but not edge-to-edge */ body.redeem .widget--redemption-form .row.collapse .small-12.medium-8.columns { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; box-sizing: border-box; } /* Input field itself: full width of its column */ body.redeem .widget--redemption-form .row.collapse .small-12.medium-8.columns input { width: 100%; box-sizing: border-box; } /* Button column: shrinks to the button's natural width */ body.redeem .widget--redemption-form .row.collapse .small-12.medium-4.columns { flex: 0 0 auto; width: auto; display: flex; align-items: center; padding: 0; } /* Kill TI's postfix stretching behaviour */ body.redeem .btn--submit.postfix { width: auto; height: auto; margin: 0; white-space: nowrap; } /* "Add Another Code" row sits below — small top gap */ body.redeem .widget--redemption-form .row.collapse + .row.collapse { margin-top: 10px; flex-wrap: wrap; } /* ===================================================== REDEMPTION PAGE — RESPONSIVE Tablet ≤ 900px Mobile ≤ 600px ===================================================== */ /* --- Tablet (≤ 900px) --- Widget narrows from 60% to 90% of its container. Kill pad10rem horizontal padding at this size too so content doesn't clip on smaller laptops/tablets. */ @media (max-width: 900px) { body.redeem .widget, body.redeem .session__content, body.redeem .redeem-widget { width: 90%; } /* pad10rem = 0 10rem by default — way too much at tablet. Reduce to a sensible value so inner content isn't clipped. */ body.redeem .widget.pad10rem, body.redeem .pad10rem { padding: 0 3rem; } .widget--redemption-for .medium-centered, .widget--redemption-form_standard .medium-centered { width: 90%; } } /* --- Mobile (≤ 600px) --- Full-width card. All inner content padded uniformly by the widget's own padding — not by child columns. */ @media (max-width: 600px) { /* 1. Zero out pad10rem completely — the widget's own padding (set below) handles all breathing room. */ body.redeem .widget.pad10rem, body.redeem .pad10rem { padding: 0; } /* 2. Card: full width, consistent inner padding, no side borders on a phone edge-to-edge layout. */ body.redeem .widget, body.redeem .session__content, body.redeem .redeem-widget { width: 100%; border-left: none; border-right: none; box-sizing: border-box; padding-left: 0; padding-right: 0; } /* 3. Every .row inside the widget gets uniform horizontal padding — this is the single source of truth for left/right breathing room. */ body.redeem .widget .row { padding-left: 20px; padding-right: 20px; box-sizing: border-box; width: 100%; margin-left: 0; margin-right: 0; } /* 4. All Foundation columns go full-width, no float. */ body.redeem .widget .columns { width: 100%; float: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; } /* 5. Inner content wrapper */ .widget--redemption-for .medium-centered, .widget--redemption-form_standard .medium-centered { width: 100%; padding-left: 0; padding-right: 0; } /* 6. Layout content outer margin */ body.redeem .layout__content { margin: 16px auto; padding: 0; } /* 7. Title / subtitle — inherit row padding, no extra */ body.redeem .widget__title, body.redeem .widget__subtitle { padding-left: 20px; padding-right: 20px; } /* 8. Stack First / Last Name vertically */ body.redeem .form-group:has(.name-input) { flex-direction: column; gap: 8px; } /* 9. Code entry row: stack input above Validate */ body.redeem .widget--redemption-form .row.collapse { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; padding-left: 20px; padding-right: 20px; } /* 10. Validate button: full width when stacked */ body.redeem .btn--submit.postfix, body.redeem .btn--primary.btn--submit, body.redeem .btn.btn--primary.btn--submit { width: 100%; text-align: center; display: block; box-sizing: border-box; } /* 11. Register button: full width */ body.redeem .btn.btn--primary.btn--expand, body.redeem .btn--primary.btn--expand { width: 100%; text-align: center; margin-top: 12px; display: block; box-sizing: border-box; } } /* ============================================================ 17. PAGE-SPECIFIC — COURSE EVENT PAGE (in-person-event) Applies to `body.in-person-event` pages (ILT/VILT event detail pages, e.g. /learn/event/). Minimal fix: forces white hero background and hides TI's dark overlay tint so title/subtitle text sits on white instead of the dot-grid site background. ============================================================ */ /* 1. Hero container — force white bg to cover the dot-grid.*/ body.in-person-event .learning-content-hero { background-color: var(--color-white); } /* 2. Hide TI's dark overlay tint layer on the hero. */ body.in-person-event .learning-content-hero__overlay { display: none; } /* 3. Hide the hero image entirely. - NEEDS WORK Event pages don't need the header image — the title, date, and description in the content column carry the page. */ body.in-person-event .learning-content-hero { aspect-ratio: auto !important; height: 200px !important; background-size: cover; background-position: center; } /* 4. Session tile ("Day 1" active meeting) — restyle from TI's orange fill to match the site's card system: white background, ruby border, blackberry title, ghost date. Mirrors the .catalog-item hover treatment (Section 15). */ body.in-person-event .event-sidebar__meeting--active { background: var(--color-white); border: 1px solid var(--color-ruby); border-radius: var(--radius-lg); padding: var(--spacing-md); box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.06); } body.in-person-event .event-sidebar__meeting--active .event-sidebar__meeting__title { font-family: var(--font-primary); font-size: var(--font-size-sm-heading); font-weight: var(--font-weight-semibold); color: var(--color-blackberry); margin-bottom: var(--spacing-xs); } body.in-person-event .event-sidebar__meeting--active .event-sidebar__meeting__date { font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--text-muted); line-height: 1.4; } /* 5. Event content column — white background so the title, description, and meeting details read cleanly instead of sitting on the dot-grid site background. */ body.in-person-event .event-content { background: var(--color-white); border: 1px solid var(--light-gray-accent); border-radius: var(--radius-lg); padding: var(--spacing-xl); } /* ============================================================ 18* PAGE SPECIFIC - DEPRECATED ============================================================ */ /* ============================================================ 19. UTILITY CLASSES Width constraint helpers applied via widget HTML. cf-narrow: 900px | cf-medium: 1100px | cf-wide: 1400px ============================================================ */ /* ----- Narrow: 900px ----- Single-column page layouts with generous side margins. Good for text-heavy content, single-widget pages, about pages. */ .cf-narrow { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* ----- Medium: 1100px ----- Comfortable layout for mixed content: text with images, light grids, featured content blocks. Visible margins on 1440px+. */ .cf-medium { max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* ----- Wide: 1400px ----- Full-featured layouts: catalogs, multi-column grids, dashboards. Prevents full-bleed stretch on ultrawide monitors while filling most of a standard 1440px-1920px viewport. */ .cf-wide { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* ============================================================ 20. COURSE DETAIL PAGE Confirmed HTML structure: body .container header #main-content.home__content ← dot grid lives here .course__detail__container ← white card, no border .course__detail__content ← title, desc, image (hidden), tabs div#ember .course__detail__sidebar .layout__content ← sidebar card (bordered) .widget--course-purchase .course-details-enterprise-blurb .course-details-benefits (hidden) .course-details-related ============================================================ */ /* ── White card — light gray border, floats on dot grid ── */ .course__detail__container { max-width: min(80%, 1200px); margin: 0 auto; background: var(--color-white); border: 1px solid var(--light-gray-accent); border-top: none; box-sizing: border-box; padding: 40px; position: relative; } /* ── Hide course image — cannot CSS-move it to the sidebar ── */ .course__detail__container .course__detail__asset { display: none; } /* ── Course title ── */ .course__detail__container .course__detail__header h1.h2 { font-family: var(--font-primary); font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); color: var(--color-blackberry); letter-spacing: var(--letter-spacing); line-height: 1.15; margin: 0 0 16px 0; } /* ── Short description ── */ .course__detail__container .course__detail__header p { font-family: var(--font-primary); font-size: var(--font-size-body-lg); font-weight: var(--font-weight-regular); color: var(--text-muted); line-height: 1.5; margin: 0 0 28px 0; } /* ── Tab strip — matches homepage tab panel style exactly ── Gray bg strip, no top border, orange bottom border on active tab. Mirrors .tabs / .tab / .tab.active from Section 5. */ .course__detail__container .tabs, .dashboard-access-tabs{ display: flex; align-items: stretch; padding: 0; margin-bottom: 24px; background: var(--bg-tab-strip); width: 100%; box-sizing: border-box; gap: 0; border-bottom: none; border: 1px solid var(--light-gray-accent); } .tabs-content{ border: 1px solid var(--light-gray-accent); border-top: none; padding: 1em; } .tabs-content h3.heading--primary{ display: none; } .event-sidebar__content__container{ display: none; } [class*=column]+[class*=column]:last-child{ float: left; } .event-sidebar--tabs .event-content{ width: 100%; } /* "Add to Calendar" button — blackberry text color */ .event-content .btn--primary { color: var(--color-blackberry); } /* Hide redundant h2 inside event content */ .event-content h2 { display: none; } /* ── Add to Calendar button — calendar icon via CSS ::before ── Injects a calendar SVG icon before the button text. Icon is inline-block sized to match font-size exactly. SVG is the Phosphor CalendarPlus icon encoded as a data URI. */ .event-content .btn--primary span::before { content: ""; display: inline-block; width: 1.25em; /* scales with font size */ height: 1.25em; margin-right: 0.5em; /* gap between icon and text */ vertical-align: -0.2em; /* align with text baseline */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-48-56a8,8,0,0,1-8,8H136v16a8,8,0,0,1-16,0V160H104a8,8,0,0,1,0-16h16V128a8,8,0,0,1,16,0v16h16A8,8,0,0,1,160,152Z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .widget--course-purchase_standard{ border-top: 1px solid var(--light-gray-accent); background-color: var(--color-warm-card-bg); } .layout__content--sidebar .widget--one-column{ padding: 1rem 1rem 0; text-align: left; } .layout__content--sidebar .widget .widget__title { font-size: var(--font-size-body); /* was var(--font-size-body-md) — token didn't exist; 16px is correct for compact sidebar heading */ padding: 0 1rem; text-align: left; } .course__detail__container .tabs::before { display: none !important; /* kill Foundation clearfix */ } .layout__content--sidebar .widget--one-column { padding: 1em 0 0; text-align: left; } .dashboard-access{ border: none; } /* Inactive tab link */ .course__detail__container .tab-title a, .dashboard-access-tab--inactive{ font-family: var(--font-primary); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); color: var(--text-subtle); /* padding: 10px 20px; */ display: block; background: var(--bg-tab-strip); border-top: none; border-left: none; border-right: 1px solid var(--color-gray); border-bottom: 2px solid transparent; border-radius: 0; text-decoration: none; white-space: nowrap; transition: color var(--transition-fast), background var(--transition-fast); } .course__detail__container .tab-title a:hover { color: var(--text-primary) background: var(--color-gray-light); text-decoration: none; } /* Active tab — semibold, white bg, orange bottom border */ .course__detail__container .tab-title.active a, .dashboard-access-tab--active{ font-family: var(--font-primary); font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-black); background: var(--color-white); border-right: 1px solid var(--color-gray); border-bottom: 2px solid var(--color-tangerine); margin-bottom: -1px; border-radius: 0; border-top: none; } /* Tab body text */ .course__detail__container .tabs-content .editor-content p { font-family: var(--font-primary); font-size: var(--font-size-body); color: var(--color-black); line-height: 1.6; margin-bottom: 16px; } /* Subheadings inside tab body */ .course__detail__container .tabs-content h2, .course__detail__container .tabs-content h3 { font-family: var(--font-primary); font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); color: var(--color-black); letter-spacing: var(--letter-spacing); margin: 32px 0 16px 0; padding-bottom: 8px; border-bottom: 1px solid var(--light-gray-accent); } /* ============================================================ 20b. SIDEBAR — bordered card + corner squares ============================================================ */ /* The .layout__content div is the direct parent of all sidebar widgets */ .course__detail__container .course__detail__sidebar .layout__content { background: var(--color-white); border: 1px solid var(--light-gray-accent); position: relative; /* stacking context for corner squares */ box-sizing: border-box; padding: 0; } .course-details-blurb{ border-top: 1px solid var(--light-gray-accent) } .course-details-blurb.row .row { margin: 0 1rem; max-width: 100%; width: auto; } .course__detail__sidebar .course-details-blurb .widget__cta{ margin: 0; padding: 0; } /* Scoped to sidebar only — prevents global paragraph margin collapse on catalog cards, homepage widgets, and other .editor-content areas */ .course__detail__sidebar .editor-content p { margin: 0; } .course__detail__sidebar .course-details-blurb .btn--primary{ background-color: transparent; border: none; display: flex; justify-content: end; color: var(--color-blackberry); font-size: var(--font-size-body-sm); } /* ── Sidebar image — injected by Custom Layout Script (injectSidebarImage) ── Clones .course__detail__asset picture and prepends as .cf-sidebar-image. Sits flush at the very top of the sidebar card, above the purchase widget. overflow:hidden on the wrapper clips the image to the card border. */ .course__detail__container .cf-sidebar-image { width: 100%; margin: 0; padding: 0; line-height: 0; /* collapse whitespace below inline picture element */ overflow: hidden; display: block; } .course__detail__container .cf-sidebar-image picture { display: block; width: 100%; line-height: 0; } .course__detail__container .cf-sidebar-image img { width: 100%; height: 200px; object-fit: cover; object-position: center top; /* keep subject visible — bias toward top */ display: block; } /* ── Four corner squares ── .layout__content is the bordered sidebar card — position:relative. ::before paints TOP-LEFT corner square. ::after paints TOP-RIGHT corner square. Both pseudos ALSO project their matching BOTTOM corner via box-shadow. FINAL CLEAN APPROACH: - Pseudo element: width=0, height=0, no border, no bg - box-shadow 1: renders TOP corner (x=0, y=0, blur=0, spread=5px) - box-shadow 2: renders BOTTOM corner (x=0, y=Npx, blur=0, spread=5px) - Color: white fill... but box-shadow can't do border-only squares. */ .course__detail__container .course__detail__sidebar { position: relative; overflow: visible !important; /* allow corner squares to bleed outside card border */ } /* TOP-LEFT */ .course__detail__container .course__detail__sidebar .layout__content::before { content: ''; position: absolute; top: var(--corner-sq-offset); left: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--corner-sq-border); border-radius: var(--corner-sq-radius); background: var(--color-white); z-index: 10; pointer-events: none; } /* TOP-RIGHT */ .course__detail__container .course__detail__sidebar .layout__content::after { content: ''; position: absolute; top: var(--corner-sq-offset); right: var(--corner-sq-offset); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--corner-sq-border); border-radius: var(--corner-sq-radius); background: var(--color-white); z-index: 10; pointer-events: none; } /* BOTTOM-LEFT .course__detail__sidebar has 16px left padding and 32px bottom margin. The card border (.layout__content) sits 16px in from sidebar's left edge and 32px above sidebar's bottom edge. left = 16px (padding) + offset (-6px) = 10px bottom = 32px (margin) + offset (-6px) = 26px */ .course__detail__container .course__detail__sidebar::before { content: ''; position: absolute; bottom: var(--corner-sq-offset); left: calc(16px + var(--corner-sq-offset)); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--corner-sq-border); border-radius: var(--corner-sq-radius); background: var(--color-white); z-index: 10; pointer-events: none; } /* BOTTOM-RIGHT */ .course__detail__container .course__detail__sidebar::after { content: ''; position: absolute; bottom: var(--corner-sq-offset); right: calc(16px + var(--corner-sq-offset)); width: var(--corner-sq-size); height: var(--corner-sq-size); border: var(--corner-sq-border); border-radius: var(--corner-sq-radius); background: var(--color-white); z-index: 10; pointer-events: none; } /* ============================================================ 20c. PURCHASE WIDGET — pills + button ============================================================ */ /* Strip TI panel box on enrolled state. transparent bg + padding:0 prevents the panel from creating a visible white box that pushes the button into view. */ .course__detail__container .widget--course-purchase .panel { background: transparent; border: none !important; box-shadow: none !important; padding: 1rem 1rem 0; color: var(--black-color); } .course__detail__container .widget--course-purchase .panel li{ list-style: none; } /* Fix heading color for collection course titles */ .heading--primary.collection__course__title, .heading.heading--primary { color: var(--color-black); } /* Remove bottom margin on preview link only — scoped away from .panel to avoid hiding purchase widget content */ .course__detail__sidebar .btn.preview-link { margin-bottom: 0 !important; } /* Hide empty enroll title */ .course__detail__container .widget--course-purchase .enroll__title { display: none !important; } /* ── Pill container — pre-styled, populated by JS (next sprint) ── */ .course__detail__container .cf-detail-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px 16px 0; } .builder__mini-widget, .course__detail__enrolled, .course__detail__social, .example-widget, .multiselect, .panel, .panel--flex, .panel--logs, .topic__sidebar__add { border: none; } .course__related .course__related__title { font-family: var(--font-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-black); text-transform: uppercase; border-top: 1px solid var(--light-gray-accent); border-bottom: 1px solid var(--light-gray-accent); background-color: var(--color-warm-card-bg); } /* Individual pill — same spec as catalog card pills */ .course__detail__container .cf-detail-pill { font-family: var(--font-mono); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-regular); color: var(--color-ruby); background: var(--color-ruby-tint); border: 1px dashed var(--color-ruby); border-radius: 20px; padding: 4px 14px; display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } /* Clock icon on duration pill */ .course__detail__container .cf-detail-pill--duration::before { content: ''; display: inline-block; width: 12px; height: 12px; flex-shrink: 0; background-color: var(--color-ruby); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } /* ── Launch Course / Start Course / Go to Course button ── TI renders (unenrolled) or