/* Theme Name: IAIM Theme URI: https://iaim.ai/ Author: Greenbelt Ventures Description: Custom theme for The Institute of Artificial Intelligence Management (AIMP certification). Design system 2.0: Newsreader display serif, Manrope text, navy / blue / gold. Works with WooCommerce, LearnDash, Paid Member Subscriptions and WPForms. Version: 2.1.0 Text Domain: iaim */ /* ---------- fonts (self-hosted, Latin subsets) ---------- */ @font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Manrope"; src: url("assets/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } /* Metric-matched fallbacks (Georgia and Arial scaled to the real average glyph widths and vertical metrics) so nothing moves when the web fonts arrive. */ @font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 96.8%; ascent-override: 75.9%; descent-override: 27.4%; line-gap-override: 0%; } @font-face { font-family: "Newsreader Fallback"; src: local("Times New Roman"); size-adjust: 105.7%; ascent-override: 69.5%; descent-override: 25.1%; line-gap-override: 0%; unicode-range: U+0000-00FF; } /* Italic fallbacks sized to Newsreader italic (measured widths: Georgia italic 112%, Times New Roman italic 100.4%), so headline emphasis does not re-wrap when the web font arrives. */ @font-face { font-family: "Newsreader Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 89.1%; ascent-override: 82.5%; descent-override: 29.8%; line-gap-override: 0%; } @font-face { font-family: "Newsreader Fallback"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); size-adjust: 99.6%; ascent-override: 73.8%; descent-override: 26.6%; line-gap-override: 0%; unicode-range: U+0000-00FF; } @font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 104.8%; ascent-override: 101.7%; descent-override: 28.6%; line-gap-override: 0%; } /* ---------- tokens (see redesign/DESIGN-SYSTEM.md) ---------- */ :root { --navy-950: #04101F; --navy-900: #071A33; --navy-800: #0C2447; --navy-700: #123463; --navy-600: #1A4580; --blue: #1F6BFF; --blue-700: #1557D6; --sky: #5CB1FF; --sky-100: #E3F1FF; --sky-50: #F1F8FF; --gold: #E0A93C; --gold-700: #B8842A; --gold-50: #FBF3E1; --ink: #0E1626; --ink-2: #425066; --ink-3: #56647A; --line: #DCE4EF; --line-2: #EAF0F7; --paper: #F4F7FB; --paper-2: #EDF2F8; --white: #fff; --on-dark-2: #D6E4F3; --on-dark-3: #BFD3E8; --on-dark-4: #A9C0D9; --ff-s: "Newsreader", "Newsreader Fallback", Georgia, serif; --ff-d: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --ff-b: var(--ff-d); --t-1: .78rem; --t-2: .9rem; --t-3: 1rem; --t-4: 1.0625rem; --t-5: 1.2rem; --t-6: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); --t-7: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); --t-8: clamp(2.5rem, 1.6rem + 3.6vw, 4.6rem); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --wrap: 1200px; --gut: 24px; --r: 16px; --r-lg: 24px; --r-sm: 10px; --ease: cubic-bezier(.2, .7, .2, 1); --dur-1: .15s; --dur-2: .25s; --dur-3: .6s; --sh: 0 1px 2px rgba(7, 26, 51, .05), 0 10px 30px -18px rgba(7, 26, 51, .25); --sh-lg: 0 30px 70px -30px rgba(7, 26, 51, .45); --z-header: 90; --z-sub: 95; --z-bar: 80; --z-modal: 120; --z-skip: 200; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--ff-b); font-size: var(--t-4); line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { margin: 0 0 .5em; color: inherit; overflow-wrap: anywhere; text-wrap: balance; } h1, h2 { font-family: var(--ff-s); font-weight: 500; letter-spacing: -.015em; } h1 { font-size: var(--t-8); line-height: 1.04; } h2 { font-size: var(--t-7); line-height: 1.1; } h1 em, h2 em { font-style: italic; font-weight: 400; color: inherit; } .dark h1 em, .dark h2 em, .hero h1 em, .phero h1 em { color: var(--sky); } h3, h4 { font-family: var(--ff-d); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; } h3 { font-size: var(--t-6); } h4 { font-size: 1.05rem; } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--blue-700); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Links inside running text are underlined, never distinguished by colour alone (WCAG 1.4.1). Buttons, nav, cards and the .link pattern are exempt. */ .lede a, .sub a, .small a, .fine a, .note a, .meta a, .faq-a a, .prose a:not(.btn):not(.wp-block-button__link), .prose-page .lead-box a:not(.btn):not(.button), .form-area a:not(.btn):not(.button), .woocommerce-privacy-policy-link, .pms-form a, .pms-block-container a:not(.button), .woocommerce-form a, td a, .rcard a, .card p a, .checklist a, .steps-v a, .outcomes a, .hero-note a, .legal a, .ft-brand p a, .cb a, .post-cta p a, .woo-wrap .summary a:not(.button), .woo-wrap .woocommerce-tabs a, .woo-wrap .posted_in a, .woo-wrap .tagged_as a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } ul, ol { margin: 0; padding: 0; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, textarea, select { font: inherit; color: inherit; } [hidden] { display: none !important; } [inert] { pointer-events: none; } :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -999px; top: 8px; background: var(--navy-900); color: #fff; padding: 10px 14px; z-index: var(--z-skip); border-radius: 8px; } .skip:focus { left: 8px; } .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); } .ic { width: 1.1em; height: 1.1em; flex: none; } .small { font-size: var(--t-2); color: var(--ink-3); } .muted { color: var(--ink-2); } .eyebrow { font-family: var(--ff-d); font-size: var(--t-1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; flex: none; } .lede { font-size: var(--t-5); line-height: 1.6; color: var(--ink-2); max-width: 62ch; } .sub { font-size: var(--t-5); line-height: 1.55; max-width: 58ch; } .serif { font-family: var(--ff-s); font-weight: 500; letter-spacing: -.01em; } .num { font-family: var(--ff-s); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 24px; border-radius: var(--r-sm); font-family: var(--ff-d); font-weight: 700; font-size: var(--t-3); line-height: 1.2; letter-spacing: -.005em; text-decoration: none !important; border: 2px solid transparent; transition: transform var(--dur-2) var(--ease), background var(--dur-1), color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-2); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.99); } .btn .ic-arrow { transition: transform var(--dur-2) var(--ease); } .btn:hover .ic-arrow { transform: translateX(3px); } .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -12px rgba(31, 107, 255, .8); } .btn-primary:hover { background: var(--blue-700); color: #fff; } .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; } .btn-ghost-dark { background: transparent; color: var(--navy-900); border-color: var(--line); } .btn-ghost-dark:hover { border-color: var(--navy-900); color: var(--navy-900); } .btn-gold { background: var(--gold); color: var(--navy-950); } .btn-gold:hover { background: #EBBA55; color: var(--navy-950); } .btn-white { background: #fff; color: var(--navy-900); } .btn-white:hover { background: var(--sky-100); color: var(--navy-900); } .btn-sm { min-height: 44px; padding: 9px 16px; font-size: .92rem; } .btn-lg { min-height: 58px; padding: 16px 30px; font-size: 1.08rem; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .link { font-weight: 700; color: var(--blue-700); display: inline-flex; align-items: center; gap: 6px; } .link .ic { transition: transform var(--dur-2) var(--ease); } .link:hover .ic { transform: translateX(3px); } /* ---------- header ---------- */ .hd { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255, 255, 255, .94); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur-2), box-shadow var(--dur-2); } .hd.scrolled { border-color: var(--line); box-shadow: 0 8px 30px -20px rgba(7, 26, 51, .3); } .hd-in { display: flex; align-items: center; gap: 24px; min-height: 76px; } .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--navy-900); text-decoration: none !important; flex: none; } .logo img { width: 44px; height: 44px; } .logo .lt b { font-family: var(--ff-d); font-weight: 800; font-size: 1.45rem; letter-spacing: .14em; line-height: 1; display: block; } .logo .lt small { display: block; font-size: .62rem; line-height: 1.25; letter-spacing: .03em; font-weight: 600; color: var(--ink-2); margin-top: 3px; } .logo-w { color: #fff; } .logo-w .lt small { color: var(--on-dark-3); } .nav { margin-left: auto; } .nav > ul { display: flex; gap: 2px; list-style: none; } .nav > ul > li { position: relative; display: flex; align-items: center; } .nav > ul > li > a { font-family: var(--ff-d); font-weight: 600; font-size: .95rem; color: var(--navy-900); padding: 10px 12px; border-radius: 10px; text-decoration: none !important; } .nav > ul > li > a:hover { background: var(--paper); } .sub-tog { width: 28px; height: 36px; display: grid; place-items: center; color: var(--ink-2); margin-left: -8px; border-radius: 8px; } .sub-tog .ic { transition: transform var(--dur-1); } .has-sub.open .sub-tog .ic { transform: rotate(180deg); } .nav .sub { position: absolute; top: 100%; left: 0; padding-top: 10px; display: none; z-index: var(--z-sub); font-size: 1rem; max-width: none; } .nav .has-sub.open .sub { display: block; } .nav .sub ul { list-style: none; width: 330px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); padding: 10px; } .nav .sub a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none !important; } .nav .sub a:hover { background: var(--paper); } .nav .sub a b { display: block; font-family: var(--ff-d); font-weight: 700; font-size: .95rem; color: var(--navy-900); } .nav .sub a span { display: block; font-size: .85rem; color: var(--ink-3); line-height: 1.4; } .hd-cta { display: flex; align-items: center; gap: 10px; flex: none; } .mbtn { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 12px; font-family: var(--ff-d); font-weight: 700; color: var(--navy-900); } .mbtn .ic { width: 22px; height: 22px; } /* ---------- mobile nav (modal) ---------- */ .mnav { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(4, 16, 31, .6); opacity: 0; transition: opacity var(--dur-2); } .mnav.show { opacity: 1; } .mnav-in { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--navy-900); color: #fff; padding: 18px 20px 32px; overflow-y: auto; transform: translateX(16px); transition: transform .3s var(--ease); display: flex; flex-direction: column; gap: 18px; } .mnav.show .mnav-in { transform: none; } .mnav-top { display: flex; align-items: center; justify-content: space-between; } .mclose { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; } .mclose .ic { width: 22px; height: 22px; } .mnav nav { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, .12); } .mlink, .mgroup summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; font-family: var(--ff-d); font-weight: 600; font-size: 1.1rem; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .12); text-decoration: none !important; cursor: pointer; list-style: none; } .mgroup summary::-webkit-details-marker { display: none; } .mgroup summary .ic { transition: transform var(--dur-1); } .mgroup[open] summary .ic { transform: rotate(180deg); } .mgroup ul { list-style: none; padding: 4px 0 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .mgroup ul a { display: block; padding: 9px 4px; color: #CFE0F2; font-size: 1rem; text-decoration: none !important; } .mnav-cta { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } .mnav-cta .small { color: var(--on-dark-3); margin: 8px 0 0; } .mnav-cta .small a { color: #fff; } body.nav-open { overflow: hidden; } /* ---------- sections ---------- */ .sec { padding: clamp(64px, 9vw, 128px) 0; } .sec-tight { padding: clamp(40px, 5vw, 64px) 0; } .paper { background: var(--paper); } .dark { background: var(--navy-900); color: #fff; } .dark .eyebrow { color: var(--sky); } .dark .lede, .dark .sub { color: var(--on-dark-2); } .dark a { color: #fff; } .dark .small { color: var(--on-dark-4); } .sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); } .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; } .sec-head.center .eyebrow { justify-content: center; } .sec-head.center .lede { margin-left: auto; margin-right: auto; } .g2, .g3, .g4 { display: grid; gap: 20px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g2 > *, .g3 > *, .g4 > * { min-width: 0; } .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .split > * { min-width: 0; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ---------- cards ---------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; box-shadow: var(--sh); } .card h3 { margin-top: 16px; } .card p:last-child { margin-bottom: 0; } .card-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--sky-100); color: var(--blue-700); display: grid; place-items: center; } .card-ic .ic { width: 24px; height: 24px; } .dark .card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); box-shadow: none; } .dark .card-ic { background: rgba(92, 177, 255, .18); color: var(--sky); } .dark .card p { color: #CFE0F2; } .card.link-card { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2), border-color var(--dur-2); } .card.link-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: #C9D6E8; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--sky-100); color: var(--navy-800); font-family: var(--ff-d); font-weight: 700; font-size: var(--t-1); letter-spacing: .02em; } .chip.gold { background: var(--gold-50); color: #6B4D0F; } .dark .chip { background: rgba(255, 255, 255, .12); color: #fff; } /* ---------- home hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(900px 520px at 85% 15%, rgba(31, 107, 255, .32), transparent 60%), radial-gradient(700px 400px at 5% 95%, rgba(92, 177, 255, .14), transparent 60%), linear-gradient(160deg, var(--navy-950), var(--navy-900) 55%, var(--navy-800)); color: #fff; } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 100%); pointer-events: none; } .hero .wrap { position: relative; } .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(64px, 8vw, 112px) 0 clamp(44px, 5vw, 72px); } .hero-grid > * { min-width: 0; } .hero .eyebrow { color: var(--on-dark-3); } .hero h1 { margin-bottom: 22px; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.4rem); max-width: 16ch; } .hero .sub { color: var(--on-dark-2); } .hero-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--on-dark-3); font-size: .95rem; } .hero-note .stars { --star: var(--gold); } .hero-visual { position: relative; } /* Sample certificate: flat, framed, clearly labelled */ .cert-card { position: relative; background: #fff; border-radius: 12px; padding: 10px; box-shadow: var(--sh-lg), 0 0 0 1px rgba(255, 255, 255, .18); transition: transform .5s var(--ease); } .cert-card img { border-radius: 6px; width: 100%; } .cert-cap { margin: 14px 2px 0; font-size: .86rem; line-height: 1.45; color: var(--on-dark-3); display: flex; gap: 10px; align-items: flex-start; } .cert-cap .ic { color: var(--gold); margin-top: 2px; } .cert-cap b { color: #fff; font-weight: 700; } .cert-badge { position: absolute; right: -14px; bottom: -18px; background: var(--navy-900); color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: var(--sh-lg); font-size: .85rem; line-height: 1.3; } .cert-badge .ic { width: 26px; height: 26px; color: var(--gold); } .cert-badge b { display: block; font-family: var(--ff-d); font-size: .9rem; } .cert-pill { position: absolute; left: -18px; top: 22px; background: #fff; color: var(--navy-900); border-radius: 999px; padding: 8px 14px 8px 10px; display: flex; align-items: center; gap: 8px; font-family: var(--ff-d); font-weight: 700; font-size: .85rem; box-shadow: var(--sh-lg); } .cert-pill .ic { color: var(--blue); } .trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 26px 0 clamp(44px, 5vw, 60px); border-top: 1px solid rgba(255, 255, 255, .14); } .trust > div { display: flex; gap: 12px; align-items: flex-start; min-width: 0; } .trust .ic { width: 24px; height: 24px; color: var(--sky); flex: none; margin-top: 3px; } .trust b { display: block; font-family: var(--ff-d); font-size: 1rem; line-height: 1.25; } .trust span { display: block; color: var(--on-dark-3); font-size: .88rem; line-height: 1.4; margin-top: 2px; } .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 28px 0 clamp(44px, 5vw, 64px); border-top: 1px solid rgba(255, 255, 255, .14); } .facts > div { min-width: 0; } .facts b { display: block; font-family: var(--ff-s); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1; letter-spacing: -.02em; color: #fff; } .facts b small { font-family: var(--ff-d); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-left: 6px; vertical-align: .35em; } .facts span { display: block; color: var(--on-dark-3); font-size: .9rem; line-height: 1.4; margin-top: 8px; } /* ---------- page hero ---------- */ .phero { padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); background: radial-gradient(800px 400px at 90% 0%, rgba(31, 107, 255, .28), transparent 60%), linear-gradient(160deg, var(--navy-950), var(--navy-900) 60%, var(--navy-800)); } .phero h1 { max-width: 18ch; } .phero .eyebrow { color: var(--on-dark-3); } .crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: var(--on-dark-4); margin-bottom: 22px; } .crumbs a { color: var(--on-dark-2); } .crumbs span::before { content: "/"; margin: 0 6px 0 0; color: #6E87A6; } .crumbs [aria-current] { color: #fff; } .crumbs span span::before { content: none; } /* ---------- steps / path ---------- */ .path { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; counter-reset: step; position: relative; } .path li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 22px 24px; counter-increment: step; min-width: 0; } .path li::before { content: counter(step, decimal-leading-zero); font-family: var(--ff-s); font-weight: 500; font-size: 1.5rem; letter-spacing: -.02em; color: var(--blue-700); display: block; margin-bottom: 12px; line-height: 1; } .path li .card-ic { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 12px; } .path li .card-ic .ic { width: 20px; height: 20px; } .path h3 { font-size: 1.08rem; margin: 0 0 8px; padding-right: 44px; } .path p { font-size: .95rem; color: var(--ink-2); margin: 0; } /* ---------- outcomes ---------- */ .outcomes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: o; } .outcomes li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; counter-increment: o; display: grid; grid-template-columns: 38px 1fr; gap: 12px; min-width: 0; } .outcomes li::before { content: counter(o); width: 34px; height: 34px; border-radius: 10px; background: var(--navy-900); color: #fff; font-family: var(--ff-s); font-weight: 500; display: grid; place-items: center; font-size: 1.05rem; } .outcomes b { display: block; font-family: var(--ff-d); font-weight: 700; font-size: 1rem; line-height: 1.3; margin-bottom: 4px; } .outcomes span { font-size: .92rem; color: var(--ink-2); line-height: 1.5; } /* ---------- pricing ---------- */ .price-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; } .price-grid > * { min-width: 0; } .price-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); } .price-card .ph { background: var(--navy-900); color: #fff; padding: 26px 30px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; border-top: 3px solid var(--gold); } .price-card .ph h3 { margin: 0 0 4px; font-size: 1.35rem; } .price-card .ph p { margin: 0; color: var(--on-dark-3); font-size: .95rem; } .price { font-family: var(--ff-s); font-weight: 500; font-size: 2.8rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: lining-nums; } .price small { font-family: var(--ff-d); font-size: .95rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; margin-left: 6px; } .dark .price small, .price-card .ph .price small { color: var(--on-dark-3); } .price-card .pb { padding: 26px 30px 30px; } .inc { list-style: none; display: grid; gap: 10px; margin: 0 0 22px; } .inc li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; } .inc .ic { width: 20px; height: 20px; color: var(--blue); flex: none; margin-top: 3px; } .price-card .pb .btn { width: 100%; } .price-card .fine { margin: 14px 0 0; font-size: .86rem; color: var(--ink-3); } .price-side { display: grid; gap: 16px; } .price-side .card h3 { margin-top: 0; font-size: 1.1rem; } .price-side .price { font-size: 1.9rem; color: var(--navy-900); margin: 6px 0 4px; } /* ---------- curriculum ---------- */ .chapters { display: grid; gap: 8px; } .chapters details { background: #fff; border: 1px solid var(--line); border-radius: 14px; } .chapters summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; font-family: var(--ff-d); font-weight: 600; font-size: 1rem; } .chapters summary::-webkit-details-marker { display: none; } .chapters summary .lab { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); font-weight: 700; } .chapters summary .tag { font-size: .8rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; display: flex; align-items: center; gap: 6px; } .chapters summary .tag .ic { width: 16px; height: 16px; } .chapters .cb { padding: 0 18px 16px 128px; color: var(--ink-2); font-size: .95rem; } .chapters details[open] summary { border-bottom: 1px solid var(--line-2); } .xall { font-weight: 700; color: var(--blue-700); min-height: 44px; padding: 0 6px; } /* ---------- reviews ---------- */ .stars { --star: var(--gold); display: inline-flex; gap: 2px; } .stars i { width: 16px; height: 16px; background: var(--line); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .stars i.on { background: var(--star); } .rating-box { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 24px; } .rating-box .num { font-size: 2.8rem; line-height: 1; color: var(--navy-900); } .rating-box p { margin: 4px 0 0; color: var(--ink-2); font-size: .95rem; } .rcard { display: flex; flex-direction: column; gap: 14px; } .rcard blockquote { margin: 0; font-family: var(--ff-s); font-weight: 400; font-style: italic; font-size: 1.12rem; line-height: 1.55; color: var(--ink); } .rcard blockquote::before { content: "\201C"; font-family: var(--ff-s); font-size: 2.6rem; line-height: 0; color: var(--gold); display: block; height: 14px; margin-top: 12px; font-style: normal; } .rcard footer { margin-top: auto; } .rcard footer b { display: block; font-family: var(--ff-d); font-size: .95rem; } .rcard footer span { font-size: .88rem; color: var(--ink-3); } .rlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .rlist .card { padding: 22px; } .rlist .meta { font-size: .85rem; color: var(--ink-3); margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px; } .rlist blockquote { margin: 0; font-size: .97rem; font-family: var(--ff-b); font-style: normal; } .rlist footer { margin-top: 12px; font-family: var(--ff-d); font-weight: 700; font-size: .92rem; } /* ---------- faq ---------- */ .faq { display: grid; gap: 10px; max-width: 860px; } .faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; } .dark .faq details { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; font-family: var(--ff-d); font-weight: 600; font-size: 1.02rem; min-height: 56px; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ic { flex: none; transition: transform var(--dur-1); color: var(--blue-700); } .dark .faq summary .ic { color: var(--sky); } .faq details[open] summary .ic { transform: rotate(180deg); } .faq .faq-a { padding: 0 20px 18px; color: var(--ink-2); } .dark .faq .faq-a { color: #CFE0F2; } .faq .faq-a p { margin: 0; } /* ---------- cta band ---------- */ .cta-band { background: radial-gradient(700px 380px at 15% 0%, rgba(31, 107, 255, .32), transparent 60%), var(--navy-900); padding: clamp(64px, 9vw, 112px) 0; } .cta-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .cta-grid > * { min-width: 0; } .cta-stack { display: flex; flex-direction: column; gap: 12px; } .cta-stack .btn { width: 100%; } .cta-stack .small { margin: 6px 0 0; } /* ---------- org / lead form ---------- */ .form { display: grid; gap: 14px; } .form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .field { display: grid; gap: 6px; min-width: 0; } .field.full { grid-column: 1 / -1; } .field label { font-family: var(--ff-d); font-weight: 700; font-size: .9rem; } .field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color var(--dur-1), box-shadow var(--dur-1); } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 107, 255, .15); } .form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .form-msg { margin: 0; font-size: .95rem; } .form-msg.ok { color: #0E5A2A; background: #E6F6EC; border-radius: 12px; padding: 14px 16px; } .form-msg.err { color: #8A1C1C; } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .lead-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--sh-lg); } /* ---------- WPForms / Woo / PMS forms inherit the theme look ---------- */ .prose .wpforms-container, .form-area .wpforms-container { margin: 0; } .wpforms-form input[type="text"], .wpforms-form input[type="email"], .wpforms-form input[type="tel"], .wpforms-form input[type="number"], .wpforms-form select, .wpforms-form textarea, .woocommerce-form input[type="text"], .woocommerce-form input[type="email"], .woocommerce-form input[type="password"], .pms-form input[type="text"], .pms-form input[type="email"], .pms-form input[type="password"], .ld-cvss-search-form input[type="text"] { width: 100% !important; min-height: 50px; padding: 12px 14px !important; border: 1.5px solid var(--line) !important; border-radius: 12px !important; background: #fff; font: inherit !important; max-width: 100% !important; } .wpforms-form .wpforms-field-label, .woocommerce-form label, .pms-form label { font-family: var(--ff-d); font-weight: 700 !important; font-size: .9rem !important; } .wpforms-form button[type="submit"], .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit, .pms-form input[type="submit"], .ld-cvss-search-form button, .ld-cvss-search-form input[type="submit"], .woocommerce-message a.button, .wc-block-components-button, #ld-cvss-search-form button, .learndash-wrapper .ld-button, .learndash-wrapper .btn-join, .learndash-wrapper #btn-join { background: var(--blue) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; font-family: var(--ff-d) !important; font-weight: 700 !important; min-height: 50px; padding: 12px 24px !important; font-size: 1rem !important; line-height: 1.2 !important; cursor: pointer; } .wpforms-form button[type="submit"]:hover, .woocommerce button.button:hover, .woocommerce a.button:hover, .pms-form input[type="submit"]:hover { background: var(--blue-700) !important; color: #fff !important; } .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-top-color: var(--blue); border-radius: 12px; } .pms-subscription-plan label, .pms_subscription_plan label { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; } /* Form text that plugins print in light grey is brought up to AA on white and paper. */ .woocommerce-form label, .woocommerce-form__label, .woocommerce-form__label span, .woocommerce form .form-row label, .woocommerce-form-login p, .woocommerce-form-register p, .woocommerce-ResetPassword p, .pms-form label, .pms-form p, .lead-box p, .form-area p, .woocommerce-privacy-policy-text, .wpforms-field-description, .wpforms-field-sublabel { color: var(--ink) !important; } .woocommerce-form .show-password-input, .woocommerce form .show-password-input { width: 44px; height: 44px; top: 50%; transform: translateY(-50%); right: 6px; display: grid; place-items: center; border-radius: 10px; } .woocommerce-form .show-password-input::after { position: static; } .pms-form-fields-wrapper { margin: 0 0 14px; padding: 0; display: grid; gap: 12px; list-style: none; } .pms-form .pms-field { margin: 0; list-style: none; } .pms-form .pms-field label { display: block; margin-bottom: 6px; } .pms-form .pms-field input[type="radio"], .pms-form .pms-field input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin: 0; } .pms-form .pms-field-subscriptions label { align-items: center; } /* ---------- prose ---------- */ .prose { max-width: 820px; font-size: 1.06rem; overflow-wrap: anywhere; } .prose h2 { font-size: 1.75rem; margin-top: 1.6em; } .prose h3 { margin-top: 1.4em; } .prose p, .prose ul, .prose ol { margin-bottom: 1.1em; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin-bottom: .4em; } .prose img { border-radius: 14px; } .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; } .prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; } .prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--gold); color: var(--ink-2); font-family: var(--ff-s); font-style: italic; font-size: 1.15rem; } .prose .wp-block-buttons .wp-block-button__link { background: var(--blue); color: #fff; border-radius: 12px; } /* Legal pages: text pasted from a word processor arrives with .p1/.s1 classes and light inline colours; render it as ordinary prose. */ .prose p, .prose li, .prose span, .prose strong, .prose em, .prose h2, .prose h3, .prose h4 { color: inherit !important; font-family: inherit !important; font-size: inherit; background: transparent !important; } .prose h2 { font-family: var(--ff-s) !important; } .prose h3, .prose h4 { font-family: var(--ff-d) !important; } .prose .p1, .prose .p2 { margin-bottom: 1.1em; } .prose a { color: var(--blue-700) !important; } .prose .legal-updated { font-family: var(--ff-d); font-weight: 700; font-size: .9rem; color: var(--ink-2) !important; } .prose-page { padding: clamp(40px, 6vw, 80px) 0; } .two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 64px); align-items: start; } .aside { display: grid; gap: 16px; } .aside .card h3 { margin-top: 0; font-size: 1.08rem; } .aside .card p { font-size: .95rem; } .aside .card .btn { width: 100%; margin-top: 10px; } /* ---------- insights ---------- */ .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2); } .pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } .pimg { display: block; aspect-ratio: 16 / 10; background: var(--navy-900); overflow: hidden; } .pimg img { width: 100%; height: 100%; object-fit: cover; } .pph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--sky); } .pph .ic { width: 40px; height: 40px; } .pbody { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; } .pbody .meta { font-size: .84rem; color: var(--ink-3); margin: 0; } .pbody h3 { font-size: 1.12rem; margin: 0; } .pbody h3 a { color: var(--navy-900); } .pbody p:last-child { margin: 0; color: var(--ink-2); font-size: .95rem; } .pcard.big { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr .9fr; } .pcard.big .pimg { aspect-ratio: auto; min-height: 320px; } .pcard.big .pbody { padding: 32px; justify-content: center; } .pcard.big h3 { font-size: 1.6rem; font-family: var(--ff-s); font-weight: 500; } .post-hero { padding: clamp(40px, 6vw, 72px) 0 32px; } .post-hero h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); max-width: 24ch; } .post-hero .meta { color: var(--on-dark-4); font-size: .92rem; } .post-img { margin: 0 auto 36px; max-width: 980px; } .post-img img { width: 100%; border-radius: var(--r-lg); } .post-body { padding-bottom: clamp(40px, 6vw, 80px); } .post-cta { margin-top: 40px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .post-cta p { margin: 0; } .post-cta b { font-family: var(--ff-d); display: block; font-size: 1.1rem; } /* ---------- misc components ---------- */ .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; } .stat b { display: block; font-family: var(--ff-s); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -.02em; color: var(--navy-900); margin-bottom: 8px; } .stat span { font-size: .9rem; color: var(--ink-2); } .dark .stat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); } .dark .stat b { color: #fff; } .dark .stat span { color: var(--on-dark-3); } .checklist { list-style: none; display: grid; gap: 10px; } .checklist li { display: flex; gap: 12px; align-items: flex-start; } .checklist .ic { width: 22px; height: 22px; color: var(--blue); flex: none; margin-top: 2px; background: var(--sky-100); border-radius: 50%; padding: 4px; } .dark .checklist .ic { color: var(--navy-900); background: var(--sky); } .steps-v { list-style: none; display: grid; gap: 14px; counter-reset: sv; } .steps-v li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; counter-increment: sv; } .steps-v li::before { content: counter(sv); width: 40px; height: 40px; border-radius: 12px; background: var(--navy-900); color: #fff; font-family: var(--ff-s); font-weight: 500; font-size: 1.1rem; display: grid; place-items: center; } .steps-v b { display: block; font-family: var(--ff-d); font-weight: 700; margin-bottom: 2px; } .steps-v p { margin: 0; color: var(--ink-2); font-size: .95rem; } .res-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .res-links a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; min-height: 44px; border-radius: 10px; background: var(--sky-100); color: var(--navy-900); font-weight: 700; font-size: .9rem; } .res-links a:hover { background: var(--sky); text-decoration: none; } .note { background: var(--sky-50); border: 1px solid #CFE6FF; border-radius: 14px; padding: 16px 18px; font-size: .95rem; color: var(--ink-2); } .note b { color: var(--navy-900); } .verify-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--sh-lg); } .verify-box form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .verify-box label { font-family: var(--ff-d); font-weight: 700; font-size: .9rem; display: block; margin-bottom: 6px; } /* Certificate verification result (LearnDash Certificate Verify and Share template): readable greys, named share links. */ .ld-cvss-certificate-id, .ld-cvss-certificate-user-designation, .ld-cvss-course-issue-date-title, .ld-cvss-course-expiry-date-title, .ld-cvss-course-issue-date-date, .ld-cvss-course-expiry-date-date, .ld-cvss-verification-title, .ld-cvss-container .ld-cvss-certificate-user-name, .ld-cvss-container p, .ld-cvss-container span { color: var(--ink-2) !important; } .ld-cvss-course-info-title, .ld-cvss-container a:not(.ld-cvss-social-button-link):not(.ld-cvss-button):not([id*="download"]) { color: var(--blue-700) !important; } #ld-cvss-download-certificate-pdf, .ld-cvss-container .ld-cvss-button, .ld-cvss-container a[id*="download"] { background: var(--blue-700) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; font-family: var(--ff-d) !important; font-weight: 700 !important; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px !important; text-decoration: none !important; } .ld-cvss-certificate-id { font-family: var(--ff-d); font-weight: 700; letter-spacing: .04em; } .ld-cvss-social-button-link { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; } .registration-login-link, .learndash-wrapper p a:not(.ld-button), .woo-wrap p a:not(.button), .woo-wrap li:not(.product) > a:not(.button), .woo-wrap .woocommerce-product-details__short-description a { text-decoration: underline !important; text-underline-offset: 3px; } .badge-img { width: 160px; } .badge-row { display: flex; gap: 16px; align-items: center; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; max-width: 560px; } .badge-row img { flex: none; width: 96px; height: 96px; } .member-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .plan { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); padding: 28px; position: relative; } .plan.best { border-color: var(--blue); box-shadow: var(--sh-lg); } .plan .best-tag { position: absolute; top: -14px; left: 24px; } .plan h3 { margin: 6px 0 2px; } .plan .price { color: var(--navy-900); font-size: 2.3rem; margin: 8px 0 4px; } .plan .inc { margin-top: 18px; } .pms-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 36px); box-shadow: var(--sh); } .woo-wrap { padding: clamp(32px, 5vw, 64px) var(--gut); } .woo-wrap .woocommerce-breadcrumb { font-size: .88rem; color: var(--ink-3); margin-bottom: 20px; } .woo-wrap .product .summary .price { font-size: 2rem; color: var(--navy-900); } .woo-wrap .products .product { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; } .woo-wrap .product_title { font-size: 1.8rem; } .ld-wrap { padding: clamp(28px, 4vw, 48px) var(--gut); max-width: 1040px; margin: 0 auto; overflow-x: clip; } .ld-wrap .ld-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-bottom: 18px; } .learndash-wrapper .ld-tooltip { flex-wrap: wrap; max-width: 100%; min-width: 0; } .learndash-wrapper .ld-tooltip__text { max-width: 100%; white-space: normal; } .form-area .elementor-button, .prose .elementor-button, .form-area .elementor-button:hover { background: var(--blue) !important; color: #fff !important; border-radius: 12px !important; font-family: var(--ff-d) !important; font-weight: 700 !important; font-size: 1rem !important; padding: 14px 24px !important; text-decoration: none !important; display: inline-flex; } .form-area .elementor-widget-button { margin-top: 18px; } .form-area .wp-block-button__link, .form-area .wp-block-button .wp-block-button__link { background: var(--blue) !important; color: #fff !important; border-radius: 12px; font-family: var(--ff-d); font-weight: 700; padding: 14px 24px; text-transform: none; } .woo-wrap div.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .woo-wrap div.product div.woocommerce-product-gallery, .woo-wrap div.product div.images { float: none; width: 100%; max-width: 420px; margin: 0; } .woo-wrap div.product div.woocommerce-product-gallery--without-images, .woo-wrap div.product img.woocommerce-placeholder { display: none; } .woo-wrap div.product div.summary { float: none; width: 100%; max-width: 760px; margin: 0; } .woo-wrap div.product div.woocommerce-tabs, .woo-wrap div.product section.related { clear: both; width: 100%; max-width: 980px; } .woo-wrap div.product .product_title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); } .woo-wrap div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0; } .woo-wrap div.product form.cart .quantity .qty { min-height: 50px; border: 1.5px solid var(--line); border-radius: 12px; width: 80px; } .woo-wrap #reviews .commentlist { list-style: none; padding: 0; display: grid; gap: 12px; } .woo-wrap #reviews .commentlist li .comment_container { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; } .woo-wrap #reviews .commentlist li img.avatar { display: none; } .woo-wrap #reviews .commentlist li .comment-text { margin: 0 !important; border: 0 !important; padding: 0 !important; } .err404 { text-align: center; padding-top: clamp(60px, 10vw, 120px); padding-bottom: clamp(60px, 10vw, 120px); } .err404 .eyebrow { justify-content: center; } .err404 .lede { margin: 0 auto 24px; } /* ---------- student portal, checkout, cart (WooCommerce and LearnDash output inside theme layouts) ---------- */ .h3 { font-family: var(--ff-d); font-weight: 700; font-size: var(--t-6); letter-spacing: -.01em; } .auth-box, .ia-login .lead-box, .ia-password-reset .lead-box, .ia-reset-password .lead-box, .ia-registration .lead-box, .ia-register .lead-box { max-width: 560px !important; } .ia-account .lead-box { max-width: 980px !important; } .auth-box .woocommerce-form-login, .auth-box .woocommerce-form-register { border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0; } .auth-box .u-columns { display: grid; gap: 28px; } .auth-box .u-column1, .auth-box .u-column2 { width: 100% !important; float: none !important; max-width: none; } .auth-box .u-column2 { padding-top: 22px; border-top: 1px solid var(--line); } .auth-box .u-column2 h2, .auth-box .u-column1 h2 { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; } .auth-box .u-columns > div:only-child h2 { display: none; } .auth-box .form-row { margin: 0 0 14px; padding: 0; } .auth-box .woocommerce-form-login__rememberme { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; } .auth-box .woocommerce-form-login__rememberme input { width: 20px; height: 20px; margin: 0; } .auth-box .woocommerce-form-login__submit { width: 100%; min-height: 52px !important; } .auth-box .woocommerce-LostPassword { margin: 14px 0 0; font-size: .95rem; } .auth-box .woocommerce-privacy-policy-text { font-size: .9rem; color: var(--ink-2) !important; } .portal-tiles .card h3 { margin-top: 14px; font-size: 1.15rem; } .portal-tiles .card p { color: var(--ink-2); font-size: .97rem; } .portal-tiles a.card { text-decoration: none !important; color: inherit; } .portal-courses .learndash-wrapper .ld-profile-summary { display: none; } .portal-courses .learndash-wrapper .ld-item-list .ld-item-list-item, .portal-courses .learndash-wrapper .ld-item-list .ld-section-heading { border: 1px solid var(--line); border-radius: 14px; background: #fff; } .portal-courses .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-name { font-family: var(--ff-d); font-weight: 700; color: var(--navy-900); } .portal-courses .learndash-wrapper .ld-progress-bar { height: 8px; border-radius: 99px; background: var(--line); } .portal-courses .learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage { background: linear-gradient(90deg, var(--blue), var(--sky)); } .portal-courses .learndash-wrapper .ld-expand-button { border-radius: 99px; min-height: 32px; } .portal-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; } .portal-account .woocommerce-notices-wrapper { grid-column: 1 / -1; } .portal-account .woocommerce-MyAccount-navigation { float: none; width: auto; grid-column: 1; grid-row: 1; } .portal-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; } .portal-account .woocommerce-MyAccount-navigation ul { list-style: none; display: grid; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; } .portal-account .woocommerce-MyAccount-navigation-link a { display: block; padding: 11px 14px; border-radius: 10px; font-family: var(--ff-d); font-weight: 600; color: var(--navy-900); text-decoration: none !important; min-height: 44px; } .portal-account .woocommerce-MyAccount-navigation-link a:hover { background: var(--paper); } .portal-account .woocommerce-MyAccount-navigation-link.is-active a { background: var(--navy-900); color: #fff; } .portal-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ink-3); } .portal-account .woocommerce-MyAccount-content { float: none; width: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: clamp(18px, 3vw, 28px); min-width: 0; } .portal-account .woocommerce-MyAccount-content > p:first-child { font-size: 1.02rem; } .portal-account .woocommerce-MyAccount-content h2, .portal-account .woocommerce-MyAccount-content h3, .portal-account legend { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; } .portal-account table.shop_table, .woo-wrap table.shop_table, .co-main table.shop_table { border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .97rem; } .portal-account table.shop_table th, .co-main table.shop_table th { background: var(--paper); font-family: var(--ff-d); font-weight: 700; font-size: .86rem; letter-spacing: .02em; } .portal-account table.shop_table td, .portal-account table.shop_table th, .co-main table.shop_table td, .co-main table.shop_table th { padding: 12px 14px; border-bottom: 1px solid var(--line-2); border-top: 0; vertical-align: middle; } .portal-account .woocommerce-button, .portal-account .button { min-height: 44px !important; padding: 10px 16px !important; font-size: .92rem !important; } .portal-account .form-row { margin: 0 0 14px; padding: 0; } .portal-account fieldset { border: 0; padding: 0; margin: 22px 0 0; } .portal-account .woocommerce-Address { background: var(--paper); border-radius: 12px; padding: 16px 18px; } .portal-account .woocommerce-Address-title h2 { font-size: 1rem; } .portal-account .woocommerce-Address-title .edit { font-weight: 700; } /* checkout */ .co-sec { padding-top: clamp(32px, 5vw, 56px); } .co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 4vw, 56px); align-items: start; } .co-aside { display: grid; gap: 16px; } .co-aside .price small { color: var(--ink-2); } .co-aside .fine { font-size: .86rem; color: var(--ink-3); margin: 14px 0 0; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; } .co-aside .fine .ic { flex: none; margin-top: 3px; color: var(--blue-700); } .co-main .woocommerce-notices-wrapper .woocommerce-message { display: none; } .co-main .woocommerce-form-coupon-toggle .woocommerce-info, .co-main .woocommerce-form-login-toggle .woocommerce-info { background: var(--paper); border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; font-size: .95rem; } .co-main .woocommerce-form-coupon-toggle .woocommerce-info::before, .co-main .woocommerce-form-login-toggle .woocommerce-info::before { display: none; } .co-main form.checkout_coupon, .co-main form.woocommerce-form-login { border: 1px solid var(--line) !important; border-radius: 12px; padding: 16px !important; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .co-main form.checkout_coupon .form-row { margin: 0; padding: 0; flex: 1 1 220px; } .co-main form.checkout_coupon .form-row input { min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; width: 100%; } .co-main form.checkout { display: block; } .co-main #customer_details { display: grid; grid-template-columns: 1fr; gap: 0; } .co-main #customer_details .col-1, .co-main #customer_details .col-2 { float: none; width: 100%; max-width: none; } .co-main .woocommerce-billing-fields h3, .co-main #order_review_heading, .co-main .woocommerce-additional-fields h3, .co-main .woocommerce-shipping-fields h3 { font-family: var(--ff-d); font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; } .co-main #order_review_heading { margin-top: 28px; } .co-main .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .co-main .form-row { margin: 0 0 14px; padding: 0; float: none; width: auto; } .co-main .form-row-wide, .co-main .form-row.notes, .co-main #billing_email_field, .co-main #billing_address_1_field, .co-main #billing_company_field, .co-main #billing_country_field { grid-column: 1 / -1; } .co-main .form-row label { font-family: var(--ff-d); font-weight: 700; font-size: .9rem; color: var(--ink) !important; display: block; margin-bottom: 6px; } .co-main .form-row label .optional { color: var(--ink-3); font-weight: 500; } .co-main .form-row .input-text, .co-main .form-row select, .co-main .form-row textarea, .co-main .select2-container .select2-selection--single { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; box-shadow: none; } .co-main .select2-container .select2-selection--single .select2-selection__rendered { line-height: 24px; padding-left: 0; color: var(--ink); } .co-main .select2-container .select2-selection--single .select2-selection__arrow { height: 48px; right: 10px; } .co-main .form-row .input-text:focus, .co-main .form-row select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 107, 255, .15); } .co-main .woocommerce-input-wrapper { display: block; } .co-main table.shop_table.woocommerce-checkout-review-order-table { margin: 0 0 20px; } .co-main table.shop_table .product-name { font-weight: 600; } .co-main table.shop_table tfoot th { background: transparent; } .co-main table.shop_table .order-total td, .co-main table.shop_table .order-total th { font-family: var(--ff-d); font-weight: 800; font-size: 1.1rem; border-top: 2px solid var(--line); } .co-main #payment { background: var(--paper) !important; border: 1px solid var(--line); border-radius: 14px !important; } .co-main #payment ul.payment_methods { padding: 16px 18px !important; border-bottom: 1px solid var(--line) !important; } .co-main #payment ul.payment_methods li { font-family: var(--ff-d); font-weight: 600; } .co-main #payment div.payment_box { background: #fff !important; border: 1px solid var(--line); border-radius: 12px; color: var(--ink) !important; font-size: .95rem; } .co-main #payment div.payment_box::before { display: none; } .co-main #payment div.form-row.place-order { padding: 16px 18px 18px !important; } .co-main #place_order, .co-main button#place_order { width: 100%; min-height: 56px !important; font-size: 1.05rem !important; font-family: var(--ff-d) !important; font-weight: 700 !important; border-radius: 12px !important; background: var(--blue) !important; color: #fff !important; box-shadow: 0 10px 24px -12px rgba(31, 107, 255, .8); } .co-main .woocommerce-privacy-policy-text, .co-main .woocommerce-terms-and-conditions-wrapper { font-size: .9rem; color: var(--ink-2) !important; } .co-main .woocommerce-terms-and-conditions-checkbox-text { font-weight: 500; } .co-main .woocommerce-NoticeGroup, .co-main .woocommerce-error { border-radius: 12px; } .co-main .wc_payment_method label { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; } .co-main .wc_payment_method img { max-height: 24px; } /* order received */ .co-main .woocommerce-order { display: grid; gap: 22px; } .co-main .woocommerce-thankyou-order-received { font-family: var(--ff-s); font-weight: 500; font-size: 1.6rem; color: var(--navy-900); margin: 0; } .co-main .woocommerce-order-overview { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; } .co-main .woocommerce-order-overview li { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: .86rem; color: var(--ink-3); margin: 0; float: none; } .co-main .woocommerce-order-overview li strong { display: block; font-family: var(--ff-d); font-size: 1rem; color: var(--navy-900); margin-top: 4px; } .co-main .woocommerce-order-details, .co-main .woocommerce-customer-details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; } .co-main .woocommerce-order-details__title, .co-main .woocommerce-column__title { font-family: var(--ff-d); font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; } /* cart (page.php app layout) */ .ia-cart .lead-box { max-width: 980px !important; } .ia-cart .woocommerce-cart-form table.shop_table { border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; } .ia-cart table.shop_table th { background: var(--paper); font-family: var(--ff-d); font-weight: 700; font-size: .86rem; } .ia-cart table.shop_table td, .ia-cart table.shop_table th { padding: 12px 14px; border-bottom: 1px solid var(--line-2); border-top: 0; vertical-align: middle; } .ia-cart table.shop_table td.product-name a { font-weight: 600; } .ia-cart .coupon { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ia-cart .coupon .input-text { min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; width: 160px !important; } .ia-cart .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 420px; margin: 20px 0 0 auto; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; } .ia-cart .cart-collaterals .cart_totals h2 { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; } .ia-cart .cart_totals table.shop_table { border: 0; } .ia-cart .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px !important; } .ia-cart .woocommerce-message, .ia-cart .woocommerce-info { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-radius: 12px; } .ia-cart .woocommerce-message .button { order: 2; margin-left: auto; min-height: 44px !important; padding: 10px 16px !important; font-size: .92rem !important; } @media (max-width: 1023px) { .portal-account .woocommerce { grid-template-columns: 1fr; } .portal-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; } .portal-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: 2; } .portal-account .woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .co-grid { grid-template-columns: 1fr; } .co-aside { order: -1; } .co-aside .card:last-child { display: none; } } @media (max-width: 640px) { .co-main .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } .portal-account .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr; } .portal-account table.shop_table, .co-main table.shop_table { font-size: .92rem; } .portal-account table.shop_table td, .portal-account table.shop_table th { padding: 10px; } } /* ---------- credential standard, directory, portal extras ---------- */ .std-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .std-table table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 560px; } .std-table th { background: var(--paper); text-align: left; font-family: var(--ff-d); font-weight: 700; font-size: .84rem; letter-spacing: .04em; padding: 12px 16px; } .std-table td { padding: 11px 16px; border-top: 1px solid var(--line-2); vertical-align: top; font-variant-numeric: tabular-nums; } .std-table td:nth-child(2), .std-table td:nth-child(3), .std-table th:nth-child(2), .std-table th:nth-child(3) { text-align: right; white-space: nowrap; } .std-table tr.total td { font-family: var(--ff-d); font-weight: 700; border-top: 2px solid var(--line); } .dir-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dir-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; gap: 14px; align-items: flex-start; min-width: 0; } .dir-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--navy-900); color: #fff; display: grid; place-items: center; font-family: var(--ff-s); font-weight: 500; font-size: 1.25rem; letter-spacing: .02em; } .dir-body { display: grid; gap: 3px; min-width: 0; } .dir-name { font-family: var(--ff-d); font-weight: 700; font-size: 1.05rem; color: var(--navy-900); } .dir-role { color: var(--ink-2); font-size: .95rem; } .dir-loc, .dir-since { color: var(--ink-3); font-size: .86rem; } .dir-links { display: flex; gap: 14px; margin-top: 6px; font-size: .9rem; font-weight: 700; } .alumni-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; } .alumni-opt input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; } .alumni-form .form-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .share-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-left: 4px solid var(--gold); } @media (max-width: 1023px) { .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .dir-grid, .alumni-form .form-fields { grid-template-columns: 1fr; } .share-row .cta-row { width: 100%; } .share-row .cta-row .btn { flex: 1 1 auto; } } /* ---------- footer ---------- */ .ft { padding: clamp(56px, 7vw, 96px) 0 28px; background: var(--navy-950); } .ft-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; } .ft-grid > * { min-width: 0; } .ft-brand p { color: var(--on-dark-3); font-size: .95rem; max-width: 36ch; margin-top: 16px; } .ft-brand .ft-contact a { color: #fff; font-weight: 700; } .ft-h { font-family: var(--ff-d); font-weight: 700; font-size: var(--t-1); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin: 0 0 14px; } .ft-col ul { list-style: none; display: grid; gap: 8px; } .ft-col a { color: var(--on-dark-2); font-size: .95rem; display: inline-block; padding: 4px 0; } .ft-col a:hover { color: #fff; } .social { list-style: none; display: flex; gap: 10px; margin-top: 18px; } .social a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #fff; } .social a:hover { background: var(--blue); } .social svg { width: 20px; height: 20px; } .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .86rem; color: var(--on-dark-4); } .legal a { color: var(--on-dark-2); } /* ---------- phone bottom bar ---------- */ .mbar { display: none; } /* ---------- reveal ---------- */ .js .rv-pending { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); transition-delay: calc(var(--d, 0) * 70ms); } .js .rv-pending.in { opacity: 1; transform: none; } .js .rv-instant { transition: none !important; } @media (prefers-reduced-motion: reduce) { .js .rv-pending { opacity: 1; transform: none; transition: none; } .btn, .card.link-card, .pcard, .cert-card, .link .ic { transition: none; } html { scroll-behavior: auto; } } /* ---------- tablets and phones (overrides stay at the end) ---------- */ @media (max-width: 1100px) { .path { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-grid { grid-template-columns: 1fr 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } } @media (max-width: 1259px) { .nav, .hd-cta .btn { display: none; } .mbtn { display: inline-flex; } } @media (max-width: 1023px) { :root { --gut: 20px; } .hd-in { min-height: 68px; } .hero-grid, .split, .cta-grid, .price-grid, .two-col, .pcard.big { grid-template-columns: 1fr; } .g3, .outcomes, .rlist, .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-visual { max-width: 560px; } .hero h1 { max-width: none; } .pcard.big .pimg { min-height: 0; aspect-ratio: 16 / 10; } .two-col .aside { position: static; } } @media (max-width: 760px) { :root { --gut: 16px; } body { font-size: 1rem; } .g2, .g3, .g4, .outcomes, .rlist, .pgrid, .path, .member-plans, .form-fields, .stat-row, .trust, .facts { grid-template-columns: 1fr; } .facts { gap: 14px; } .logo .lt small { display: none; } .logo img { width: 40px; height: 40px; } .hero-grid { padding-top: 44px; gap: 32px; } .hero h1 { font-size: clamp(2.1rem, 1.3rem + 5vw, 2.8rem); } .sub, .lede { font-size: 1.05rem; } .cta-row .btn { width: 100%; } .cert-card { transform: none; margin: 0 0 8px; } .cert-badge { right: 8px; bottom: -14px; } .cert-pill { left: 8px; top: -14px; } .trust { padding-top: 16px; gap: 12px; } .trust > div { align-items: center; } .path li { padding: 22px 18px 20px; } .chapters summary { grid-template-columns: 1fr auto; } .chapters summary .lab { grid-column: 1 / -1; } .chapters .cb { padding-left: 18px; } .price-card .ph, .price-card .pb { padding: 20px; } .price { font-size: 2.2rem; } .rating-box { flex-direction: column; align-items: flex-start; } .ft-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .legal { flex-direction: column; } .phero h1 { max-width: none; } .post-cta { flex-direction: column; align-items: flex-start; } .post-cta .btn { width: 100%; } .verify-box form > * { width: 100%; } .card { padding: 22px; } .mbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: var(--z-bar); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: rgba(7, 26, 51, .96); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 10px; box-shadow: var(--sh-lg); transform: translateY(120%); opacity: 0; transition: transform .35s var(--ease), opacity .35s; } .mbar.show { transform: none; opacity: 1; } .mbar .btn { min-height: 48px; padding: 10px 12px; font-size: .95rem; } body.ia-home .sec:last-of-type, .cta-band { padding-bottom: calc(clamp(64px, 9vw, 112px) + 40px); } .ft { padding-bottom: 96px; } } @media (max-width: 400px) { .hero h1 { font-size: 2rem; } h2 { font-size: 1.7rem; } .btn { padding-left: 16px; padding-right: 16px; font-size: .95rem; } .mbar .btn { font-size: .88rem; } } /* ========================================================================== Phase 4 (2.1.0): membership tiers, comparison table, Insights editorial, member gate, newsletter ========================================================================== */ .tier-now { background: var(--sky-50); border-bottom: 1px solid #CFE6FF; } .tier-now p { margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: var(--t-2); color: var(--ink-2); } .tier-now a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: 8px; } .tier { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px 24px; min-width: 0; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2), border-color var(--dur-1); } .tier:hover { transform: translateY(-3px); box-shadow: var(--sh); } .tier h3 { font-family: var(--ff-s); font-weight: 500; font-size: 1.55rem; letter-spacing: -.01em; margin: 0 0 6px; } .tier-for { color: var(--ink-3); font-size: var(--t-2); margin: 0 0 18px; min-height: 2.9em; } .tier-price { display: flex; flex-direction: column; gap: 2px; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line-2); } .tier-price .num { font-size: 2.6rem; line-height: 1; color: var(--navy-900); font-weight: 300; } .tier-price small { font-size: var(--t-2); color: var(--ink-3); } .tier-points { list-style: none; display: grid; gap: 11px; margin: 0 0 20px; flex: 1 1 auto; align-content: start; } .tier-points li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; line-height: 1.45; } .tier-points .ic { width: 18px; height: 18px; color: var(--blue-700); margin-top: 2px; } .tier-note { font-size: var(--t-2); color: var(--ink-2); background: var(--paper); border-radius: var(--r-sm); padding: 10px 12px; margin: 0 0 16px; } .tier .btn { width: 100%; white-space: normal; text-align: center; } .tier-current { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin: 0; border-radius: var(--r-sm); background: var(--paper); font-weight: 700; color: var(--navy-900); } .tier-feature { border: 2px solid var(--blue); box-shadow: var(--sh-lg); } .tier-flag { position: absolute; top: -13px; left: 22px; margin: 0; padding: 4px 11px; border-radius: 999px; background: var(--blue); color: #fff; font-size: var(--t-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .tier-certified { background: linear-gradient(180deg, var(--gold-50), #fff 38%); border-color: #EBD3A2; } .tier-certified .tier-points .ic { color: var(--gold-700); } .tier-org { background: var(--navy-900); border-color: var(--navy-900); color: #fff; } .tier-org h3, .tier-org .tier-price .num { color: #fff; } .tier-org .tier-for, .tier-org .tier-price small { color: var(--on-dark-3); } .tier-org .tier-price { border-bottom-color: rgba(255, 255, 255, .12); } .tier-org .tier-points .ic { color: var(--sky); } .tier-org .btn-ghost-dark { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; } .tier-org .btn-ghost-dark:hover { background: #fff; color: var(--navy-900); border-color: #fff; } .is-current { outline: 3px solid var(--sky); outline-offset: 2px; } .tiers-fine { max-width: 760px; margin: 22px auto 0; text-align: center; } .center { text-align: center; } .cmp-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .cmp { width: 100%; border-collapse: collapse; font-size: .96rem; font-variant-numeric: tabular-nums; } .cmp th, .cmp td { padding: 15px 18px; border-bottom: 1px solid var(--line-2); text-align: center; vertical-align: middle; } .cmp thead th { background: var(--paper-2); border-bottom: 1px solid var(--line); vertical-align: bottom; } .cmp-h span { display: block; font-family: var(--ff-s); font-weight: 500; font-size: 1.15rem; color: var(--navy-900); } .cmp-h small { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-top: 2px; } .cmp-member { box-shadow: inset 0 3px 0 var(--blue); } .cmp-certified { box-shadow: inset 0 3px 0 var(--gold); } .cmp tbody th[scope="row"] { text-align: left; font-weight: 600; color: var(--ink); width: 32%; } .cmp-group th { text-align: left; background: #fff; padding-top: 26px; padding-bottom: 10px; font-size: var(--t-1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); border-bottom: 1px solid var(--line); } .cmp td .yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sky-100); color: var(--blue-700); } .cmp td .yes .ic { width: 15px; height: 15px; } .cmp td .no { color: #8A97AA; font-size: 1.1rem; } .cmp td .txt { font-size: .9rem; line-height: 1.35; color: var(--ink-2); font-weight: 600; } .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; } .cmp tbody tr:not(.cmp-group):hover { background: var(--sky-50); } .path-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 28px; } .path-strip p { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-width: 0; } .path-strip b { display: block; font-family: var(--ff-s); font-weight: 500; font-size: 1.1rem; color: var(--navy-900); } .path-strip span { font-size: var(--t-2); color: var(--ink-3); } .ps-arrow { color: var(--blue-700); } .ps-arrow .ic { width: 20px; height: 20px; } .join-terms { margin-top: 26px; } .join-terms b { color: var(--navy-900); } .pms-auto { margin: 14px 0 0; } /* Insights: cards, filters, featured */ .cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; } .cat-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 700; font-size: .92rem; text-decoration: none; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); } .cat-nav a:hover { border-color: var(--blue-700); color: var(--blue-700); text-decoration: none; } .cat-nav a[aria-current] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; } .cat-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--sky-100); color: var(--navy-800); font-size: var(--t-1); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } a.cat-chip:hover { background: #fff; text-decoration: none; } .mem-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--gold-50); color: #6B4D0F; font-size: var(--t-1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .mem-badge .ic { width: 12px; height: 12px; } .mem-badge.on-dark { background: rgba(224, 169, 60, .16); color: #F2CF86; } .feature-row { margin-bottom: 24px; } .agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .acard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 0; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2); } .acard:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); } .acard-img { display: block; aspect-ratio: 16 / 10; background: var(--paper-2); overflow: hidden; } .acard-img img { width: 100%; height: 100%; object-fit: cover; } .acard-img .pph { display: grid; place-items: center; height: 100%; color: var(--ink-3); } .acard-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1 1 auto; } .acard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .85rem; color: var(--ink-3); } .acard-h { font-family: var(--ff-s); font-weight: 500; font-size: 1.32rem; line-height: 1.22; letter-spacing: -.01em; margin: 0; } .acard-h a { color: var(--navy-900); } .acard-h a::after { content: ""; position: absolute; inset: 0; } .acard { position: relative; } .acard-meta a, .acard-meta .cat-chip { position: relative; z-index: 1; } .acard-dek { margin: 0; color: var(--ink-2); font-size: .97rem; } .acard-foot { margin: auto 0 0; font-size: .85rem; color: var(--ink-3); } .acard-big { display: grid; grid-template-columns: 1.15fr .85fr; } .acard-big .acard-img { aspect-ratio: auto; min-height: 340px; } .acard-big .acard-body { padding: clamp(24px, 3vw, 44px); justify-content: center; gap: 14px; } .acard-big .acard-h { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.12; } .acard-big .acard-foot { margin-top: 6px; } .pager { justify-content: center; align-items: center; margin-top: 36px; } .author-std { max-width: 760px; margin: 0 0 32px; padding: 18px 20px; border-left: 3px solid var(--gold); background: var(--paper); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .author-std p:last-child { margin: 0; color: var(--ink-2); } .news-ok { margin-bottom: 24px; } /* Article */ .post-kicker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; } .post-hero .cat-chip { background: rgba(92, 177, 255, .16); color: #CFE6FF; } .post-hero a.cat-chip:hover { background: rgba(92, 177, 255, .28); } .post-dek { font-family: var(--ff-s); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.45; color: var(--on-dark-2); max-width: 46ch; margin: 0 0 18px; } .post-hero .meta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .post-img { margin: 32px auto 0; max-width: 980px; } .article-col { max-width: 720px; margin: 40px auto 0; } .article-col .prose { margin: 0; max-width: none; } .article-prose > p:first-of-type::first-letter { font-family: var(--ff-s); float: left; font-size: 3.6em; line-height: .86; padding: 6px 10px 0 0; color: var(--navy-900); } .archive-note, .allowance-note { margin: 0 0 28px; } .allowance-note { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-50); border-color: #EBD3A2; } .allowance-note .ic { color: #6B4D0F; margin-top: 3px; } .article-teaser { position: relative; } .article-gated { height: 120px; margin-top: -120px; position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; } .gate { margin: 8px 0 40px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); background: var(--navy-900); color: #fff; position: relative; overflow: hidden; } .gate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 260px at 100% 0%, rgba(31, 107, 255, .35), transparent 60%); pointer-events: none; } .gate > * { position: relative; } .gate-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(224, 169, 60, .16); color: var(--gold); margin-bottom: 16px; } .gate h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); margin: 0 0 12px; color: #fff; } .gate p { color: var(--on-dark-2); max-width: 56ch; } .gate .cta-row { margin-top: 20px; } .gate .btn-ghost-dark { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; } .gate .btn-ghost-dark:hover { background: #fff; color: var(--navy-900); } .gate-login { margin: 18px 0 0; color: var(--on-dark-3) !important; } .gate-login a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .sources { margin: 44px 0 0; padding: 24px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); } .sources h2 { font-family: var(--ff-d); font-size: var(--t-1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); margin: 0 0 14px; } .sources ol { padding-left: 22px; display: grid; gap: 9px; font-size: .95rem; } .sources li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; } .sources a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .src-host { color: var(--ink-3); font-size: .85rem; } .sources .small { margin: 14px 0 0; } .author-box { display: flex; gap: 16px; align-items: flex-start; margin: 32px 0 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .author-mark { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--navy-900); display: grid; place-items: center; } .author-mark img { width: 34px; height: 34px; filter: brightness(0) invert(1); } .author-name { margin: 0 0 4px; font-weight: 800; } .author-name a { color: var(--navy-900); } .author-box .small { margin: 0; } .news-inline { margin-top: 36px; } .related { margin-top: clamp(56px, 7vw, 88px); } .related .eyebrow { margin-bottom: 20px; font-size: var(--t-1); } /* Newsletter */ .news { display: grid; gap: 18px; } .news-h { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin: 0 0 8px; } .news-copy p:last-child { margin: 0; } .news-row { display: flex; gap: 10px; } .news-row input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: 1rem; } .news-row input:focus { outline: 3px solid var(--sky); outline-offset: 1px; border-color: var(--blue-700); } .news-row .btn { flex: none; } .news-fine { margin: 10px 0 0; font-size: .85rem; color: var(--ink-3); } .news-fine a { text-decoration: underline; text-underline-offset: 3px; } .news .form-msg { margin: 8px 0 0; min-height: 1.4em; } .news .form-msg.ok { color: #1B5E34; font-weight: 700; } .news .form-msg.err { color: #9B1C1C; font-weight: 700; } .news-inline .news { padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, var(--sky-50), #fff); } .news-inline .news-h { font-size: 1.5rem; } .news-band { grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 5vw, 72px); align-items: center; } .news-sec { padding: clamp(56px, 7vw, 96px) 0; background: radial-gradient(700px 320px at 0% 100%, rgba(224, 169, 60, .14), transparent 60%), var(--navy-950); } .news-sec .eyebrow { color: var(--gold); } .news-sec .news-copy p { color: var(--on-dark-2); max-width: 52ch; } .news-sec .news-fine { color: var(--on-dark-3); } .news-sec .news-fine a { color: #fff; } .news-sec .news-row input { border-color: rgba(255, 255, 255, .2); } .news-sec .form-msg.ok { color: #9BE7B4; } .news-sec .form-msg.err { color: #FFB4B4; } .ft-news { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: center; padding: 28px 0; margin-top: 36px; border-top: 1px solid rgba(255, 255, 255, .12); } .ft-news .ft-h { margin: 0 0 4px; } .ft-news .small { color: var(--on-dark-3); margin: 0; } .ft-news .news-row input { border-color: rgba(255, 255, 255, .2); } .ft-news .news-fine { color: var(--on-dark-4); } .ft-news .news-fine a { color: var(--on-dark-2); } .ft-news .form-msg.ok { color: #9BE7B4; } .ft-news .form-msg.err { color: #FFB4B4; } @media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .tier-for { min-height: 0; } .path-strip { grid-template-columns: 1fr 1fr; } .ps-arrow { display: none; } } @media (max-width: 1023px) { .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acard-big { grid-template-columns: 1fr; } .acard-big .acard-img { min-height: 0; aspect-ratio: 16 / 9; } .news-band, .ft-news { grid-template-columns: 1fr; } } @media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } .cmp-wrap { border-radius: var(--r); background: transparent; border: 0; overflow: visible; } .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; } .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cmp tbody tr:not(.cmp-group) { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; } .cmp tbody tr:not(.cmp-group):hover { background: #fff; } .cmp tbody th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 14px 16px 10px; border-bottom: 1px solid var(--line-2); background: var(--paper-2); } .cmp td { text-align: left; padding: 10px 16px 12px; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .cmp td::before { content: attr(data-tier); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .cmp td:nth-of-type(even) { border-left: 1px solid var(--line-2); } .cmp tbody tr:not(.cmp-group) td:nth-last-of-type(-n+2) { border-bottom: 0; } .cmp-group th { background: transparent; border: 0; padding: 18px 2px 10px; } .path-strip { grid-template-columns: 1fr; } .agrid { grid-template-columns: 1fr; } .news-row { flex-direction: column; } .news-row .btn { width: 100%; } .article-prose > p:first-of-type::first-letter { font-size: 3em; } .sources { padding: 20px; } .gate .cta-row .btn { width: 100%; white-space: normal; } .join-split .pms-wrap { margin-top: 8px; } } @media (prefers-reduced-motion: reduce) { .tier, .acard { transition: none; } .tier:hover, .acard:hover { transform: none; } } /* PMS plan picker as selectable cards */ .pms-field-subscriptions { display: grid; gap: 10px; margin: 6px 0 4px; } .pms-form .pms-subscription-plan, .pms-subscription-plan { position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: #fff; transition: border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1); } .pms-subscription-plan:hover { border-color: var(--blue-700); } .pms-subscription-plan:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: var(--sky-50); } .pms-form .pms-subscription-plan label, .pms-subscription-plan label { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin: 0 !important; cursor: pointer; font-weight: 700; color: var(--navy-900); } .pms-subscription-plan label::after { content: ""; position: absolute; inset: 0; } .pms-form .pms-subscription-plan input[type="radio"], .pms-subscription-plan input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--blue); } .pms-subscription-plan .pms-divider { display: none; } .pms-subscription-plan-price { justify-self: end; font-family: var(--ff-s); font-weight: 500; font-size: 1.15rem; white-space: nowrap; } .pms-subscription-plan-duration::before { content: "/ "; } .pms-subscription-plan-duration { font-family: var(--ff-d); font-size: .85rem; color: var(--ink-3); font-weight: 600; margin-left: 2px; } .pms-subscription-plan-trial:empty, .pms-subscription-plan-sign-up-fee:empty { display: none; } .pms-subscription-plan-description { margin: 6px 0 0 34px; font-style: normal !important; font-size: .88rem; line-height: 1.5; color: var(--ink-3); } .pms-form-submit, .pms-form input[type="submit"] { width: 100%; } .tier .btn { padding: 13px 16px; font-size: .95rem; gap: 8px; } .cmp thead th { vertical-align: top; padding-top: 22px; } /* Community (bbPress) */ .community .bbp-wrap { max-width: 960px; } #bbpress-forums { font-size: .98rem; } #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-replies { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; } #bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer { background: var(--paper-2); border-color: var(--line); font-weight: 800; font-size: var(--t-1); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } #bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic { border-top: 1px solid var(--line-2); padding: 16px; } #bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-permalink { font-family: var(--ff-s); font-size: 1.2rem; font-weight: 500; color: var(--navy-900); } #bbpress-forums .bbp-forum-content { color: var(--ink-3); font-size: .92rem; } #bbpress-forums fieldset.bbp-form { border: 1px solid var(--line); border-radius: var(--r); padding: 20px; } #bbpress-forums input[type="text"], #bbpress-forums textarea, #bbpress-forums select { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; min-height: 44px; } #bbpress-forums .button.submit, #bbpress-forums button[type="submit"] { background: var(--blue); color: #fff; border: 0; border-radius: var(--r-sm); min-height: 48px; padding: 10px 20px; font-weight: 700; } .community-rules { margin-top: 24px; max-width: 760px; } @media (max-width: 760px) { #bbpress-forums li.bbp-forum-info, #bbpress-forums li.bbp-topic-title { width: 100%; float: none; } #bbpress-forums li.bbp-forum-topic-count, #bbpress-forums li.bbp-forum-reply-count, #bbpress-forums li.bbp-forum-freshness, #bbpress-forums li.bbp-topic-voice-count, #bbpress-forums li.bbp-topic-reply-count, #bbpress-forums li.bbp-topic-freshness { display: none; } } /* Organization dashboard (group leaders) */ .org-dash { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); margin-bottom: 24px; } .org-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .org-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0; } .org-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; } .org-stats p { margin: 0; background: var(--paper); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .org-stats b { font-size: 2rem; line-height: 1; color: var(--navy-900); } .org-stats small { font-size: 1rem; color: var(--ink-3); } .org-stats span { font-size: var(--t-2); color: var(--ink-3); } .org-table-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; } .org-table { width: 100%; border-collapse: collapse; font-size: .94rem; font-variant-numeric: tabular-nums; } .org-table th, .org-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; } .org-table thead th { background: var(--paper-2); font-size: var(--t-1); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .org-table tbody th span { display: block; font-weight: 700; } .org-table tbody th small, .org-table td small { color: var(--ink-3); font-weight: 400; } .org-table tbody tr:last-child th, .org-table tbody tr:last-child td { border-bottom: 0; } .org-bar { display: inline-block; width: 80px; height: 6px; border-radius: 6px; background: var(--line); vertical-align: middle; overflow: hidden; margin-right: 6px; } .org-bar i { display: block; height: 100%; background: var(--blue); } .org-add textarea { width: 100%; } @media (max-width: 760px) { .org-stats { grid-template-columns: 1fr 1fr; } .org-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .org-table, .org-table tbody, .org-table tr, .org-table th, .org-table td { display: block; width: 100%; } .org-table tbody tr { border-bottom: 1px solid var(--line); padding: 8px 0; } .org-table tbody th, .org-table td { border: 0; padding: 4px 14px; } .org-table td::before { content: attr(data-l) ": "; color: var(--ink-3); font-size: .85rem; } } /* Portal: LearnDash's own "Your Courses" heading duplicates the theme's; keep only its Expand All control */ .ia-my-account .ld-course-list > .ld-section-heading > h3 { display: none; } .ia-my-account .ld-course-list > .ld-section-heading { justify-content: flex-end; border: 0; padding: 0 0 8px; background: none; } .btn:disabled, .btn[disabled], button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none; } textarea:disabled { background: var(--paper); cursor: not-allowed; } /* Checkout fields: beat WooCommerce's ".woocommerce form .form-row .input-text" (0,3,1) and make the wrappers full width */ .co-main form .form-row .input-text, .co-main form .form-row select, .co-main form .form-row textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font: inherit; box-shadow: none; } .co-main form .form-row .input-text:focus, .co-main form .form-row select:focus, .co-main form .form-row textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 107, 255, .15); } .co-main .woocommerce-input-wrapper { display: block; width: 100%; } .co-price-was { font-size: 1rem; color: var(--ink-3); text-decoration: line-through; margin-left: 8px; font-family: var(--ff-d); } .co-price-note { margin: -8px 0 14px; font-size: var(--t-2); color: #1B5E34; font-weight: 700; } .co-main .form-row-first, .co-main .form-row-last { width: auto !important; float: none !important; } /* AIMO kit page */ .kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .kit-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; min-width: 0; } .kit-prev { border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line-2); align-self: start; box-shadow: var(--sh); } .kit-prev img { width: 100%; height: auto; } .kit-code { margin: 0 0 4px; font-size: var(--t-1); font-weight: 800; letter-spacing: .12em; color: var(--gold-700); } .kit-body h3 { font-family: var(--ff-s); font-weight: 500; font-size: 1.35rem; margin: 0 0 8px; } .kit-body p { color: var(--ink-2); font-size: .96rem; } .kit-inside { list-style: none; display: grid; gap: 6px; font-size: .9rem; color: var(--ink-2); } .kit-inside li { padding-left: 16px; position: relative; } .kit-inside li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 2px; background: var(--blue-700); } .kit-buy { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; } /* Protected download lists (AIMO library, course toolkit) */ .dl-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; } .dl-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; } .dl-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--sky-100); color: var(--navy-800); font-size: .72rem; font-weight: 800; letter-spacing: .06em; } .dl-body b { display: block; color: var(--navy-900); } .dl-body span { display: block; font-size: .88rem; color: var(--ink-3); line-height: 1.45; } .dl-locked { background: var(--paper); } .dl-locked .dl-ic { background: var(--paper-2); } .dl-unlock { font-weight: 700; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } @media (max-width: 1023px) { .kit-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .kit-card { grid-template-columns: 1fr; } .kit-prev { max-width: 260px; } .kit-buy { grid-template-columns: 1fr; } .dl-item { grid-template-columns: 40px minmax(0, 1fr); } .dl-item .btn, .dl-item .dl-unlock { grid-column: 1 / -1; justify-self: start; } } /* Membership: plan choice links (the sign-up form itself is on /register/) */ .join-pick { display: grid; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px); box-shadow: var(--sh); } .join-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); color: var(--navy-900); text-decoration: none !important; transition: border-color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-2) var(--ease); } .join-opt:hover { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); transform: translateY(-1px); } .join-opt.is-best { border-color: var(--blue); background: var(--sky-50); } .jo-name { font-weight: 800; display: flex; flex-direction: column; gap: 2px; } .jo-name small { font-weight: 500; color: var(--ink-3); font-size: .86rem; } .jo-price { text-align: right; display: flex; flex-direction: column; } .jo-price .num { font-size: 1.5rem; line-height: 1; } .jo-price small { font-size: .8rem; color: var(--ink-3); } .join-opt .ic { color: var(--blue-700); } @media (prefers-reduced-motion: reduce) { .join-opt { transition: none; } .join-opt:hover { transform: none; } } /* AI readiness assessment */ .as-form { max-width: 820px; } .as-progress { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; } .as-progress-bar { flex: 1 1 auto; height: 6px; background: var(--line); border-radius: 6px; overflow: hidden; } .as-progress-bar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 6px; transition: width var(--dur-3) var(--ease); } .as-progress-label { font-size: var(--t-2); color: var(--ink-3); white-space: nowrap; } .js .as-step { display: none; } .js .as-step.is-on { display: block; } .as-step { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); margin: 0 0 16px; background: #fff; } .as-step legend { float: left; width: 100%; padding: 0; margin: 0 0 18px; font-family: var(--ff-s); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 500; color: var(--navy-900); display: flex; align-items: center; gap: 12px; } .as-step legend + * { clear: both; } .as-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sky-100); color: var(--navy-800); font-family: var(--ff-d); font-size: .95rem; font-weight: 800; flex: none; } .as-q { margin: 0 0 22px; clear: both; } .as-qt { font-weight: 700; color: var(--ink); margin: 0 0 10px; } .as-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .as-opt { position: relative; display: flex; } .as-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .as-opt span { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font-size: .92rem; font-weight: 600; color: var(--ink-2); transition: border-color var(--dur-1), background var(--dur-1), color var(--dur-1); } .as-opt:hover span { border-color: var(--blue-700); } .as-opt input:checked + span { border-color: var(--blue); background: var(--sky-50); color: var(--navy-900); box-shadow: 0 0 0 1px var(--blue); } .as-opt input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; } .as-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; clear: both; } .as-err { color: #9B1C1C; font-weight: 700; margin: 0; flex-basis: 100%; min-height: 1.2em; } .as-consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 6px; font-size: .95rem; color: var(--ink-2); } .as-consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--blue); } .as-result { max-width: 860px; } .as-head { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 28px; align-items: center; margin: 0 0 20px; } .as-ring { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--line) 0); position: relative; } .as-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #fff; } .as-ring .num { position: relative; font-size: 2.2rem; color: var(--navy-900); } .as-head h2 { margin: 0 0 6px; } .as-report { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px); margin: 0 0 20px; } .as-bar { display: inline-block; width: 160px; height: 8px; background: var(--line); border-radius: 4px; vertical-align: middle; margin-right: 8px; overflow: hidden; } .as-bar i { display: block; height: 100%; background: var(--blue); } @media (max-width: 760px) { .as-opts { grid-template-columns: 1fr 1fr; } .as-head { grid-template-columns: 1fr; gap: 16px; } .as-ring { width: 120px; height: 120px; } .as-bar { width: 96px; } } @media (prefers-reduced-motion: reduce) { .as-progress-bar i, .as-opt span { transition: none; } } /* Pattern: any plain link inside running text is underlined (WCAG 1.4.1), not only links inside the named components above */ main p a:not([class]), main li a:not([class]), main td a:not([class]), main dd a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Exit offer dialog */ .exit-offer { max-width: 560px; width: calc(100% - 32px); border: 0; border-radius: var(--r-lg); padding: 36px 36px 30px; box-shadow: var(--sh-lg); color: var(--ink); } .exit-offer::backdrop { background: rgba(4, 16, 31, .55); } .exit-offer h2 { font-size: 1.75rem; margin: 0 0 10px; } .exit-offer p { color: var(--ink-2); } .exit-close-f { position: absolute; top: 12px; right: 12px; margin: 0; } .exit-close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); } .exit-close:hover { background: var(--paper); color: var(--navy-900); } .exit-offer[open] { animation: exit-in var(--dur-2) var(--ease); } @keyframes exit-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .exit-offer[open] { animation: none; } } .mod-read { margin: 12px 0 0; } .mod-read a { text-decoration: underline; text-underline-offset: 3px; } .mod-link { margin: 28px 0 0; } .chapters details { scroll-margin-top: 96px; } /* Help centre */ .help-search { max-width: 720px; margin: 0 0 20px; } .help-search input { width: 100%; min-height: 56px; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: var(--r); font-size: 1.05rem; background: #fff; } .help-search input:focus { outline: 3px solid var(--sky); outline-offset: 1px; border-color: var(--blue-700); } .help-topic { max-width: 860px; margin: 0 0 40px; scroll-margin-top: 96px; } .help-topic h2 { margin: 0 0 12px; } /* Student portal: free-account inclusions; membership account (Paid Member Subscriptions) in the house style (2026-10-16, Phase 7). */ .incl-list { margin: 0; padding: 0; gap: 12px; } .incl-list li { color: var(--ink-2); line-height: 1.55; } .incl-list b { color: var(--navy-900); } .incl-list a { white-space: nowrap; } .pms-account-navigation ul { list-style: none; margin: 0 0 22px; padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; } .pms-account-navigation li { margin: 0; } .pms-block-container .pms-account-navigation a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 10px; font-family: var(--ff-d); font-weight: 600; font-size: .95rem; color: var(--navy-900); text-decoration: none !important; } .pms-block-container .pms-account-navigation a:hover { background: #fff; } .pms-block-container .pms-account-navigation a.pms-account-navigation-link--active { background: var(--navy-900); color: #fff; } .pms-account-navigation-link--logout { margin-left: auto !important; } .pms-account-subscription-details-table { width: 100%; border-collapse: collapse; margin: 0 0 8px; } .pms-account-subscription-details-table td { padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .pms-account-subscription-details-table tr:last-child td { border-bottom: 0; } .pms-account-subscription-details-table td:first-child { width: 38%; padding-right: 16px; font-family: var(--ff-d); font-weight: 700; font-size: .9rem; color: var(--ink-2); } .pms-account-subscription-details-table .status-active { color: #17663a; font-weight: 600; } .pms-account-subscription-details-table__actions td:last-child { display: flex; flex-wrap: wrap; gap: 10px; } .pms-block-container a.pms-account-subscription-action-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 12px; font-family: var(--ff-d); font-weight: 600; font-size: .95rem; color: var(--navy-900); text-decoration: none !important; } .pms-block-container a.pms-account-subscription-action-link:hover { border-color: var(--blue); color: var(--blue-700); } .pms-block-container a.pms-account-subscription-action-link__change, .pms-block-container a.pms-account-subscription-action-link__upgrade { background: var(--blue); border-color: var(--blue); color: #fff; } .pms-block-container a.pms-account-subscription-action-link__change:hover, .pms-block-container a.pms-account-subscription-action-link__upgrade:hover { background: var(--blue-700); color: #fff; } .acct-back { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); } @media (max-width: 560px) { .pms-account-navigation-link--logout { margin-left: 0 !important; } .pms-account-subscription-details-table td:first-child { width: 42%; } .incl-list a { white-space: normal; } } /* Public credential page (/certificate-verification//, 2026-10-16, Phase 7). */ .cred-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; margin-bottom: clamp(40px, 6vw, 72px); } .cred-cert { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(10px, 1.5vw, 16px); box-shadow: var(--sh); } .cred-cert img { display: block; width: 100%; height: auto; border-radius: 10px; } .cred-cert a { display: block; } .cred-cert-ph { display: grid !important; place-items: center; gap: 10px; aspect-ratio: 11 / 8.5; border-radius: 10px; background: var(--paper); color: var(--navy-900); font-family: var(--ff-d); font-weight: 700; text-decoration: none !important; } .cred-cert-ph svg { width: 40px; height: 40px; color: var(--gold-700, #B8842A); } .cred-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); } .cred-status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; font-family: var(--ff-d); font-weight: 700; font-size: .85rem; letter-spacing: .02em; } .cred-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .cred-active { background: #EEF9F2; color: #17663a; } .cred-expiring { background: #FFF7E6; color: #7A4E00; } .cred-expired { background: #FDECEC; color: #9B1C1C; } .cred-line { margin: 0 0 18px; color: var(--ink-2); } .cred-dl { margin: 0 0 22px; display: grid; } .cred-dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-2); } .cred-dl dt { font-family: var(--ff-d); font-weight: 700; font-size: .85rem; color: var(--ink-3); } .cred-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } .cred-dl .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92rem; letter-spacing: .03em; } .cred-actions { margin: 0 0 12px; flex-wrap: wrap; } .cred-share { margin: 0; color: var(--ink-3); } .cred-notes { margin-top: 0; } @media (max-width: 900px) { .cred-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .cred-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .cred-actions .btn { width: 100%; justify-content: center; } } .pms-block-container .pause-box, .lead-box .pause-box { margin: 0 0 20px; } .pause-box form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } /* Order received overview: WooCommerce's clearfix pseudo-elements became empty grid cells and its last-item rule dropped the border (2026-10-16, Phase 7). */ .co-main .woocommerce-order-overview::before, .co-main .woocommerce-order-overview::after { display: none !important; content: none !important; } .co-main .woocommerce-order-overview li, .co-main .woocommerce-order-overview li:last-of-type { border: 1px solid var(--line) !important; min-width: 0; text-transform: none; } .co-main .woocommerce-order-overview li strong { overflow-wrap: anywhere; } .co-main .woocommerce-order-overview { margin: 18px 0 28px !important; } .co-main .woocommerce-thankyou-order-received { display: none; } /* the hero already confirms the order */ /* Accessibility fixes from the Phase 7 axe scan (2026-10-16). */ .std-table:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; } div.wpforms-container-full .wpforms-form .wpforms-field-sublabel, div.wpforms-container-full .wpforms-form .wpforms-field-label, div.wpforms-container-full .wpforms-form legend.wpforms-field-label { color: var(--ink-2) !important; } div.wpforms-container-full .wpforms-form .wpforms-field-label, div.wpforms-container-full .wpforms-form legend.wpforms-field-label { color: var(--ink) !important; } /* Review round 1 layout fixes (2026-10-16). */ .mbar.one { grid-template-columns: 1fr; } body.typing .mbar { display: none !important; } .hd { background: rgba(255, 255, 255, .97); } :focus-visible { outline-color: var(--blue-700); } .dark :focus-visible, .phero :focus-visible, .ft :focus-visible, footer :focus-visible, .mbar :focus-visible, .mnav :focus-visible { outline-color: var(--sky); } label, legend, .btn, h1, h2, h3, h4, .wpforms-field-label, .wpforms-field-sublabel { -webkit-hyphens: manual; hyphens: manual; } .form select, .lead-form select, .field select, div.wpforms-container-full .wpforms-form select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 50px; line-height: 1.3 !important; padding: 12px 42px 12px 14px !important; border: 1.5px solid var(--line) !important; border-radius: 12px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23425066' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important; font: inherit !important; color: var(--ink) !important; height: auto !important; } .form select:focus, .lead-form select:focus, div.wpforms-container-full .wpforms-form select:focus { border-color: var(--blue-700) !important; } @media (max-width: 1259px) { .hd-cta { margin-left: auto; } } @media (min-width: 640px) and (max-width: 1259px) { .hd-cta .btn-primary { display: inline-flex; } } @media (max-width: 600px) { div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"] { width: 100%; } .std-table table, .std-table thead, .std-table tbody, .std-table tr, .std-table th, .std-table td { display: block; width: 100%; } .std-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .std-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); } .std-table td { border: 0 !important; padding: 2px 0 !important; text-align: left !important; } .std-table table { min-width: 0; } .std-table td { white-space: normal !important; overflow-wrap: anywhere; } .std-table td[data-l]:not(:first-child)::before { content: attr(data-l) ": "; color: var(--ink-3); } } /* Community (bbPress) in the house style, independent of bbPress's own stylesheet (2026-10-16, review round 1). */ #bbpress-forums ul, #bbpress-forums li { list-style: none; margin: 0; padding: 0; } #bbpress-forums .bbp-breadcrumb, #bbpress-forums .bbp-pagination-count:only-child, #bbpress-forums li.bbp-footer { display: none; } #bbpress-forums .bbp-search-form { margin: 0 0 18px; } #bbpress-forums .bbp-search-form form > div { display: flex; gap: 8px; max-width: 520px; } #bbpress-forums .bbp-search-form input[type="text"] { flex: 1; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; } #bbpress-forums .bbp-search-form .button { min-height: 46px; padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy-900); font-family: var(--ff-d); font-weight: 700; cursor: pointer; } #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-replies { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; margin-bottom: 22px; } #bbpress-forums ul.forum-titles, #bbpress-forums li.bbp-body > ul { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px 190px; gap: 16px; align-items: center; padding: 16px 20px; } #bbpress-forums li.bbp-header { background: var(--paper); border-bottom: 1px solid var(--line); } #bbpress-forums ul.forum-titles li { font-family: var(--ff-d); font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } #bbpress-forums li.bbp-body > ul + ul { border-top: 1px solid var(--line-2); } #bbpress-forums .bbp-forum-topic-count, #bbpress-forums .bbp-forum-reply-count, #bbpress-forums .bbp-topic-voice-count, #bbpress-forums .bbp-topic-reply-count { text-align: center; font-variant-numeric: tabular-nums; color: var(--ink-2); } #bbpress-forums .bbp-forum-freshness, #bbpress-forums .bbp-topic-freshness { font-size: .86rem; color: var(--ink-3); } #bbpress-forums .bbp-forum-freshness a, #bbpress-forums .bbp-topic-freshness a { color: var(--blue-700); } #bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-permalink { font-family: var(--ff-s); font-size: 1.2rem; font-weight: 500; color: var(--navy-900); text-decoration: none; } #bbpress-forums .bbp-forum-content, #bbpress-forums .bbp-topic-meta { color: var(--ink-3); font-size: .9rem; margin-top: 4px; } #bbpress-forums .bbp-author-avatar { display: none; } #bbpress-forums .bbp-template-notice { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; } #bbpress-forums .bbp-template-notice li { list-style: none; } #bbpress-forums #subscription-toggle { display: inline-block; margin: 0 0 14px; } #bbpress-forums #subscription-toggle a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--ff-d); font-weight: 700; font-size: .9rem; color: var(--navy-900); text-decoration: none; } #bbpress-forums .bbp-pagination { display: flex; justify-content: space-between; color: var(--ink-3); font-size: .88rem; margin: 0 0 12px; } #bbpress-forums .quicktags-toolbar, #bbpress-forums .wp-editor-tabs { display: none; } #bbpress-forums fieldset.bbp-form legend { font-family: var(--ff-s); font-size: 1.3rem; color: var(--navy-900); padding: 0 6px; } #bbpress-forums fieldset.bbp-form label { display: block; font-family: var(--ff-d); font-weight: 700; font-size: .9rem; margin: 10px 0 6px; } #bbpress-forums textarea { min-height: 180px; padding: 12px 14px; font: inherit; } #bbpress-forums input[type="text"], #bbpress-forums textarea { border: 1.5px solid var(--line); border-radius: 12px; } #bbpress-forums .bbp-reply-content, #bbpress-forums .bbp-topic-content { font-size: 1.02rem; line-height: 1.65; } @media (max-width: 767px) { #bbpress-forums li.bbp-header { display: none; } #bbpress-forums li.bbp-body > ul { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px; } #bbpress-forums .bbp-forum-topic-count, #bbpress-forums .bbp-forum-reply-count, #bbpress-forums .bbp-topic-voice-count, #bbpress-forums .bbp-topic-reply-count { display: none; } } /* Newsletter result on dark bands (was mint on mint, 1.3:1). */ .dark .news .form-msg.ok, .ft .form-msg.ok, footer .form-msg.ok, .ft-news .form-msg.ok { color: #9BE7B4; background: transparent; padding: 0; } #bbpress-forums .bbp-search-form label, #bbpress-forums #bbp_topic_tags, #bbpress-forums label[for="bbp_topic_tags"] { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #bbpress-forums #bbp_topic_tags { display: none; } #bbpress-forums .bbp-form p:has(#bbp_topic_tags) { display: none; } #bbpress-forums .bbp-form input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; } #bbpress-forums .bbp-form input[type="checkbox"] + label { display: inline; } .co-refund { margin: 0 0 12px; color: var(--ink-2); } .resume-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 0 16px 16px 0; background: #fff; box-shadow: var(--sh); } .resume-box .eyebrow { margin: 0 0 4px; } .resume-t { margin: 0; font-family: var(--ff-d); font-weight: 700; color: var(--navy-900); } @media (max-width: 560px) { .resume-box .btn { width: 100%; justify-content: center; } } .prog { display: block; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 12px; } .prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--sky)); } .course-card h3 { font-size: 1.05rem; } .m0-next { margin: 36px 0 8px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); } .m0-next h2 { font-size: 1.5rem; margin: 6px 0 8px; } .dl-locked .dl-ic { color: var(--ink-3); } /* Privacy policy data table: labeled rows on phones. */ @media (max-width: 600px) { .page-id-3 main table, .page-id-3 main tbody, .page-id-3 main tr, .page-id-3 main td { display: block; width: 100%; } .page-id-3 main thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .page-id-3 main tr { padding: 12px 0; border-bottom: 1px solid var(--line); } .page-id-3 main td { border: 0 !important; padding: 2px 0 !important; } .page-id-3 main td:first-child { font-weight: 700; color: var(--navy-900); } .page-id-3 main td:nth-child(2)::before { content: "When: "; color: var(--ink-3); } .page-id-3 main td:nth-child(3)::before { content: "Why: "; color: var(--ink-3); } } .checklist .ic { background: var(--blue); color: #fff; } .pms-login { margin: 14px 0 0; } #pms_register-form { display: flex; flex-direction: column; } #pms_register-form .pms-field-subscriptions { order: -1; margin-bottom: 18px; } .co-main .woocommerce-order-overview li { padding: 14px 16px !important; } .co-main .woocommerce-order-overview li, .co-main .woocommerce-order-overview li strong { text-transform: none !important; letter-spacing: 0 !important; } .co-main .woocommerce-customer-details address { border: 0 !important; padding: 0 !important; } .co-main .woocommerce-table--order-details tfoot tr:last-child { display: none; } #pms_register-form .pms-form-fields-wrapper, #pms_register-form .pms-account-section-wrapper { display: flex; flex-direction: column; gap: 12px; } #pms_register-form .pms-field-subscriptions { order: -1; } /* Article reading experience (review round 1): real heading scale, a 660 px measure, lists at body size. */ .article-col { max-width: 660px; } .article-prose h2 { font-size: clamp(1.32rem, 1.12rem + .8vw, 1.62rem) !important; line-height: 1.25; margin: 2em 0 .55em; color: var(--navy-900) !important; } .article-prose h3 { font-size: 1.15rem !important; font-family: var(--ff-d) !important; font-weight: 700; margin: 1.6em 0 .4em; } .article-prose ul, .article-prose ol { font-size: inherit; } .article-prose li { font-size: inherit !important; } .agreement { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 0 20px; } .agreement summary { cursor: pointer; padding: 18px 0; font-family: var(--ff-d); font-weight: 700; color: var(--navy-900); list-style: none; } .agreement summary::after { content: "+"; float: right; font-size: 1.3rem; line-height: 1; } .agreement[open] summary::after { content: "−"; } .agreement .prose { padding-bottom: 20px; max-height: none; } .kit-prev { position: relative; display: block; } .kit-zoom { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(7, 26, 51, .86); color: #fff; font-family: var(--ff-d); font-weight: 700; font-size: .8rem; } .as-result ul { list-style: none; padding: 0; } .as-result ul li { position: relative; padding-left: 18px; margin-bottom: 6px; } .as-result ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); } .org-act .link { background: none; border: 0; padding: 4px 0; margin-right: 10px; cursor: pointer; font: inherit; font-weight: 700; color: var(--blue-700); } /* download rows with a PDF and an editable Word/Excel version */ .dl-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } @media (max-width: 760px) { .dl-item .dl-acts { grid-column: 1 / -1; justify-content: flex-start; } .dl-item .dl-acts .btn { grid-column: auto; } } .ft-news-link { justify-self: end; } @media (max-width: 1023px) { .ft-news-link { justify-self: start; } } /* Community thread view (Phase 7 round 2): compact topic header, post cards with an author column, one row of quiet actions, labelled composer */ .sec.community { padding-top: clamp(36px, 4.5vw, 64px); } body.single-topic .phero { padding: clamp(36px, 4.5vw, 64px) 0 clamp(28px, 3.5vw, 48px); } body.single-topic .phero h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); max-width: 32ch; } #bbpress-forums .bbp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; } #bbpress-forums #subscription-toggle { font-size: 0; margin: 0; } #bbpress-forums #favorite-toggle a, #bbpress-forums #subscription-toggle a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 10px; font-family: var(--ff-d); font-weight: 700; font-size: .9rem; color: var(--navy-900); text-decoration: none; background: #fff; } #bbpress-forums #favorite-toggle { display: inline-block; margin: 0 0 14px 8px; } #bbpress-forums ul.bbp-replies li.bbp-header { display: none; } #bbpress-forums ul.bbp-replies li.bbp-body > .bbp-reply-header { padding: 16px 24px 0; font-size: .85rem; color: var(--ink-3); } #bbpress-forums ul.bbp-replies li.bbp-body > .bbp-reply-header ~ .bbp-reply-header { border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 18px; } #bbpress-forums .bbp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; } #bbpress-forums .bbp-meta .bbp-admin-links { margin-left: auto; } #bbpress-forums .bbp-meta a { color: var(--blue-700); font-weight: 600; text-decoration: none; } #bbpress-forums .bbp-meta .bbp-reply-permalink { color: var(--ink-3); font-weight: 400; } #bbpress-forums ul.bbp-replies li.bbp-body > .bbp-reply-header + div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 12px 24px 24px; } #bbpress-forums .bbp-reply-author a { text-decoration: none; } #bbpress-forums .bbp-reply-author .bbp-author-name { font-family: var(--ff-d); font-weight: 700; color: var(--navy-900); } #bbpress-forums .bbp-author-role { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: .74rem; font-weight: 700; letter-spacing: .03em; } #bbpress-forums .bbp-reply-content > p { margin: 0 0 .85em; } #bbpress-forums .bbp-reply-content > p:last-child { margin-bottom: 0; } #bbpress-forums fieldset.bbp-form { padding: 22px 24px 24px; } #bbpress-forums fieldset.bbp-form legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font-size: 1.25rem; line-height: 1.3; } #bbpress-forums fieldset.bbp-form legend + * { clear: both; } #bbpress-forums .bbp-the-content-wrapper + p, #bbpress-forums .bbp-submit-wrapper { margin-top: 12px; } #bbpress-forums .bbp-search-form input[type="text"]::placeholder { color: var(--ink-3); } @media (max-width: 760px) { #bbpress-forums ul.bbp-replies li.bbp-body > .bbp-reply-header { padding: 14px 16px 0; } #bbpress-forums ul.bbp-replies li.bbp-body > .bbp-reply-header + div { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 16px 18px; } #bbpress-forums fieldset.bbp-form { padding: 16px; } } /* price on the navy card header must stay light (the .price-side rule set it to navy: invisible) */ .price-side .price-card .ph .price { color: #fff; } /* Fixed bars are fully opaque (round 2: text showed through the 94-97% header and the 96% phone bar while scrolling, worst in Safari with backdrop-filter) */ .hd { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .mbar { background: #071A33 !important; -webkit-backdrop-filter: none; backdrop-filter: none; } /* WPForms (affiliate registration and any remaining WPForms form): full-width fields, no hyphenated labels, no empty band above the form (round 2) */ div.wpforms-container-full .wpforms-form .wpforms-field-medium, div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium { max-width: 100% !important; width: 100% !important; } div.wpforms-container-full .wpforms-form .wpforms-field-label, div.wpforms-container-full .wpforms-form .wpforms-field-description, div.wpforms-container-full .wpforms-form .wpforms-field-sublabel { hyphens: manual !important; -webkit-hyphens: manual !important; } div.wpforms-container-full { margin-top: 0 !important; } div.wpforms-container-full .wpforms-form .wpforms-head-container, div.wpforms-container-full .wpforms-form .wpforms-title:empty, div.wpforms-container-full .wpforms-form .wpforms-description:empty { display: none; } /* inline citation markers */ sup.cite { font-family: var(--ff-d); font-size: .68em; font-weight: 700; line-height: 0; margin-left: 1px; } sup.cite a { color: var(--blue-700); text-decoration: none; padding: 0 1px; } sup.cite a:hover, sup.cite a:focus-visible { text-decoration: underline; } .sources li:target { background: var(--sky-50); border-radius: 6px; } /* Credential standard: full capstone rubric (2026-10-16, review round 2 A19) and padded stacked rows on phones (A54). */ .rubric-full { margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 0 18px; } .rubric-full > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-family: var(--ff-d); font-weight: 700; color: var(--blue-700); list-style: none; } .rubric-full > summary::-webkit-details-marker { display: none; } .rubric-full > summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; line-height: 1; } .rubric-full[open] > summary::after { content: "\2212"; } .rubric-full[open] { padding-bottom: 18px; } .std-table.rubric { border-radius: 10px; } .std-table.rubric table { min-width: 880px; font-size: .92rem; } .std-table.rubric th, .std-table.rubric td { text-align: left !important; white-space: normal !important; } .std-table.rubric tbody th { font-family: var(--ff-d); font-weight: 700; font-size: .92rem; letter-spacing: 0; background: #fff; border-top: 1px solid var(--line-2); vertical-align: top; width: 19%; padding: 11px 16px; } @media (max-width: 600px) { .std-table tr { padding: 12px 16px; } .std-table.rubric table { min-width: 0; } .std-table.rubric tbody th { width: 100%; border: 0; padding: 0 0 4px; } .std-table.rubric td::before { content: attr(data-l) ": " !important; color: var(--ink-3); font-weight: 600; } .std-table.rubric td { padding: 3px 0 !important; } } /* Site search form (Insights search, 404, search results; 2026-10-16 round 2 A42/B m18). */ .site-search { display: flex; gap: 10px; align-items: stretch; } .site-search input[type="search"] { flex: 1; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; color: var(--ink); background: #fff; } .site-search input[type="search"]:focus { border-color: var(--blue-700); outline: 3px solid var(--sky-100); outline-offset: 0; } .site-search .btn { flex: none; } .phero h1 span { font-style: italic; } .ins-search { max-width: 480px; margin: -14px 0 32px; } @media (max-width: 600px) { /* category chips: one scrollable row on phones instead of three wrapped rows (B m33) */ .cat-nav { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 6px; scrollbar-width: none; } .cat-nav::-webkit-scrollbar { display: none; } .cat-nav a { flex: none; } .site-search .btn { padding-left: 18px; padding-right: 18px; } } .form-privacy { grid-column: 1 / -1; margin: 2px 0 0; color: var(--ink-3); } /* Round 2 polish (A52, A53, A55, A57, A59). */ .card.link-card p { color: var(--ink-2); } .path-strip { align-items: stretch; } .path-strip p { display: flex; flex-direction: column; justify-content: center; } .path-strip .ps-arrow { align-self: center; } @media (min-width: 1024px) { .cmp thead th { white-space: nowrap; } } .co-aside .fine { font-size: .95rem; color: var(--ink-2); } @media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Team dashboard: Remove is a destructive action, set apart from Resend (round 2 C40); directory fields read-only before certification (C39). */ .link.link-danger { color: #B42318; margin-left: 14px; } .link.link-danger:hover, .link.link-danger:focus-visible { color: #8A1A12; } .al-fs { border: 0; padding: 0; margin: 0; min-width: 0; } .al-fs[disabled] input { background: var(--paper); color: var(--ink-3); cursor: not-allowed; } /* Source domains never hyphenate mid-word (round 2 B m31). */ .sources li, .src-host { hyphens: manual; -webkit-hyphens: manual; } .src-host { display: inline-block; overflow-wrap: anywhere; } /* Cards in dark sections keep light body text (round 3 A4: the light-section link-card colour leaked into the dark home section). */ .dark .card.link-card p, .dark .card p { color: #CFE0F2; } /* Certificate verification search: stacked form (round 3 A6). */ .verify-form { display: block; } .verify-form .field { display: block; margin: 0 0 14px; } .verify-form .field input { width: 100%; } .verify-form .btn { width: auto; } /* Membership comparison: equal tier columns, no sideways page scroll at tablet widths (round 3 A7, A8). */ @media (min-width: 761px) { .cmp { table-layout: fixed; } .cmp thead th:first-child, .cmp tbody th[scope="row"] { width: 28%; } .cmp-wrap { overflow-x: auto; } } @media (min-width: 1024px) { .cmp thead th { white-space: normal; } } .search-help { margin: 0 0 32px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); } .search-help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .search-help-list li { display: grid; gap: 2px; } .search-help-list span { color: var(--ink-2); font-size: .95rem; } /* Checkout on phones: the form first, the summary and add-ons after it (round 3 A10). */ @media (max-width: 1023px) { .co-grid .co-aside { order: 1; } } /* Leave plan screen: "Keep my plan" primary, "Close my plan" quiet and destructive (round 3 C10). */ .leave-plan input[name="pms_confirm_abandon_subscription"] { background: #fff !important; color: #B42318 !important; border: 1.5px solid #E7B9B4 !important; box-shadow: none !important; } .leave-plan input[name="pms_redirect_back"] { background: var(--blue) !important; color: #fff !important; } /* My account login: the page heading already says "Log in"; WooCommerce's own "Login" heading is hidden (round 3 C6). */ .woocommerce h2:has(+ form.woocommerce-form-login), .u-column1 > h2:has(+ form.login) { display: none; } /* Price lines with a long qualifier wrap instead of widening the card (round 3 audit: /certification/ renewal card overflowed at 360/390 WebKit). */ .price-side .price { white-space: normal; } .price-side .price small { display: inline-block; margin-left: 0; } .price-side { min-width: 0; } /* Account hub tab bar (round 3 C7): shared by the student portal and the membership screens */ .acct-tabs { margin: 0 0 20px; } .acct-tabs ul { list-style: none; margin: 0; padding: 6px; display: flex; gap: 4px; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .acct-tabs ul::-webkit-scrollbar { display: none; } .acct-tabs li { flex: 0 0 auto; } .acct-tabs a, .acct-tabs a:hover { display: block; padding: 10px 14px; border-radius: 10px; font-family: var(--ff-d); font-weight: 600; font-size: .95rem; color: var(--navy-900); text-decoration: none !important; white-space: nowrap; } .acct-tabs a:focus-visible { outline: 2px solid var(--blue-600, #1F6BFF); outline-offset: 2px; } .acct-tabs a:hover { background: var(--paper); } .acct-tabs a[aria-current="page"] { background: var(--navy-900); color: #fff; } .acct-tabs .acct-out { margin-left: auto; padding-right: 22px; } .acct-tabs .acct-out a { color: var(--ink-3); font-weight: 500; } @media (min-width: 1024px) { .acct-tabs ul { -webkit-mask-image: none; mask-image: none; } .acct-tabs .acct-out { padding-right: 0; } } .pms-account-navigation { display: none; } .portal-account-1 .woocommerce { display: block; } .portal-account-1 .woocommerce-MyAccount-content { max-width: 860px; } .past-plans { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; } .past-plans summary { cursor: pointer; font-family: var(--ff-d); font-weight: 600; color: var(--ink-2); padding: 6px 0; } .past-plans table { opacity: .85; } /* Enrolled course page: the buyer-facing overview folds away (round 3 C19) */ details.about-program { margin: 8px 0 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; } details.about-program > summary { cursor: pointer; padding: 16px 20px; font-family: var(--ff-d); font-weight: 600; color: var(--navy-900); list-style: none; display: flex; justify-content: space-between; gap: 12px; } details.about-program > summary::-webkit-details-marker { display: none; } details.about-program > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--ink-3); } details.about-program[open] > summary::after { content: "\2212"; } details.about-program > :not(summary) { margin-left: 20px; margin-right: 20px; } details.about-program[open] { padding-bottom: 12px; } /* Team dashboard (round 3 C45): actions side by side, dates on one line, a visible confirm state instead of a browser dialog */ .org-act { white-space: nowrap; } .org-act .link { margin-right: 14px; } .org-act .link.armed { color: #fff; background: #9B2C2C; border-radius: 999px; padding: 6px 12px; } .org-table td[data-l="Last activity"] { white-space: nowrap; } .org-table td[data-l="Status"] small { display: block; } @media (max-width: 767px) { .org-act { white-space: normal; } } /* Checkout and login polish (round 3 A33, C40-C43) */ .woocommerce-checkout #terms, .woocommerce-form__input-checkbox { width: 22px; height: 22px; accent-color: var(--blue); vertical-align: -5px; margin-right: 8px; } .woocommerce-order-overview li strong, .woocommerce-order-overview__email strong { overflow-wrap: normal; word-break: normal; } .woocommerce-order-overview__email { grid-column: 1 / -1; } .woocommerce-order-overview__email strong { overflow-wrap: anywhere; } .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; } .woocommerce-ResetPassword input.input-text, .woocommerce-ResetPassword input[type="text"] { border-radius: 12px; border: 1px solid var(--line); padding: 12px 14px; width: 100%; font: inherit; } /* Article share row (round 3 B28), source back-links (B37), card deks clamped by lines (B32), chip row fade (B33), a lone card spans the row (B20) */ .share-links { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 0; } .share-a { appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, .28); color: #fff; border-radius: 999px; padding: 7px 14px; font: 600 .85rem/1 var(--ff-d); text-decoration: none; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; } .share-a:hover, .share-a:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; } .sources .src-back { text-decoration: none; margin-left: 4px; font-size: .9em; color: var(--blue-700); } .acard .acard-dek { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 767px) { .cat-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 28px; } } .agrid > :only-child { grid-column: 1 / -1; } /* Round 3 A19, A34, A37, A47 */ .woocommerce-additional-fields > h3 { display: none; } body.cta-visible .mbar { transform: translateY(110%); opacity: 0; pointer-events: none; } .mbar { transition: transform .25s var(--ease), opacity .25s var(--ease); } .cart-empty.woocommerce-info, .wc-empty-cart-message .cart-empty { display: block !important; } .cart-empty.woocommerce-info::before { display: none !important; } #payment .payment_box, #payment .wc_payment_method .payment_box { border: 0 !important; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; } /* Hero with a right-hand visual (round 3 A15) */ .phero.has-aside .phero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .phero.has-aside h1 { max-width: 16ch; } .phero-aside { min-width: 0; } .hero-cert { margin: 0; transform: rotate(-1.2deg); } .hero-cert img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); } .hero-doc { margin: 0 auto; max-width: 340px; } .hero-doc img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 18px 18px 0 -2px rgba(255, 255, 255, .06); } .hero-map { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; counter-reset: none; } .hero-map li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #DCE6F2; font-size: .92rem; line-height: 1.35; } .hero-map span { font-family: var(--ff-s); color: var(--gold); font-size: 1.05rem; min-width: 1.6em; } .hero-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); } .hero-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); } .hero-facts dt { color: #BFD3E8; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; } .hero-facts dd { margin: 0; color: #fff; font-family: var(--ff-s); font-size: 1.15rem; text-align: right; } @media (max-width: 1023px) { .phero.has-aside .phero-grid { display: block; } .phero-aside { display: none; } } /* Article tables (archive expansion): a calm reference table on desktop, stacked label/value cards on phones */ .prose .table-wrap { margin: 1.4em 0 1.8em; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; } .prose .table-wrap:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; } .prose .rtable { margin: 0; font-size: .93rem; line-height: 1.5; } .prose .rtable th { background: var(--paper); font-family: var(--ff-d); font-size: .8rem; letter-spacing: .04em; color: var(--navy-900); } .prose .rtable th, .prose .rtable td { border: 0; border-bottom: 1px solid var(--line-2); } .prose .rtable tr:last-child td { border-bottom: 0; } @media (max-width: 640px) { .prose .table-wrap { border: 0; overflow: visible; } .prose .rtable, .prose .rtable tbody, .prose .rtable tr, .prose .rtable td { display: block; width: 100%; } .prose .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .prose .rtable tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; background: #fff; } .prose .rtable td { border: 0; padding: 4px 0; } .prose .rtable td::before { content: attr(data-l); display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 2px; } } /* Institute seal (round 7 marks, 2026-10-17): footer legal row and the credential page */ .legal-seal { display: inline-flex; align-items: center; gap: 12px; } .legal-seal img { width: 48px; height: 48px; flex: none; } .cred-panel { position: relative; } .cred-seal { float: right; width: 96px; height: 96px; margin: 0 0 12px 16px; } @media (max-width: 480px) { .cred-seal { width: 72px; height: 72px; margin-left: 12px; } } /* AI regulatory calendar (/ai-regulatory-calendar/), 2026-10-17 */ .rc-wrap { max-width: 980px; } .rc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper, #FBFAF6); margin-bottom: 28px; } .rc-bar p { margin: 0; max-width: 62ch; } .rc-bar .btn svg { width: 18px; height: 18px; } .rc-gate { margin: 0 0 32px; } .rc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; } .rc-filter button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); } .rc-filter button:hover { border-color: var(--navy-800); color: var(--navy-900); } .rc-filter button[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; } .rc-h { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); margin: 8px 0 18px; } .rc-list { display: grid; gap: 0; margin-bottom: 44px; border-top: 1px solid var(--line); } .rc-item { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--line); } .rc-item[hidden] { display: none; } .rc-when time { display: block; font-family: var(--ff-s, inherit); font-size: 1.12rem; font-weight: 600; color: var(--navy-900); line-height: 1.3; } .rc-juris { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--sky-100); color: var(--navy-800); font-size: var(--t-1); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .rc-body h3 { margin: 0 0 6px; font-size: 1.12rem; line-height: 1.35; } .rc-body > p { margin: 0 0 10px; color: var(--ink-2); max-width: 68ch; } .rc-dl { display: grid; gap: 10px; margin: 12px 0; padding: 14px 16px; border-left: 3px solid var(--gold); background: var(--gold-50); border-radius: 0 var(--r-md, 10px) var(--r-md, 10px) 0; } .rc-dl div { display: grid; gap: 2px; } .rc-dl dt { font-size: var(--t-1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B4D0F; } .rc-dl dd { margin: 0; color: var(--ink); } .rc-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; color: var(--ink-3, var(--ink-2)); } .rc-links a { overflow-wrap: anywhere; } .rc-note { margin-top: -16px; } @media (max-width: 760px) { .rc-item { grid-template-columns: minmax(0, 1fr); padding: 20px 0; } .rc-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .rc-juris { margin-top: 0; } .rc-bar { padding: 16px; } } /* Verification form (round 4 A-M5): heading on its own line, full-width monospace ID field and the button on one row, aligned to the input */ .verify-box form.verify-form { display: block; } .verify-form .vf-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .verify-form .vf-row .field { flex: 1 1 280px; margin: 0; min-width: 0; } .verify-form .vf-row input { width: 100%; min-height: 50px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: .02em; } .verify-form .vf-row .btn { min-height: 50px; flex: none; } @media (max-width: 520px) { .verify-form .vf-row .btn { width: 100%; justify-content: center; } } /* Round 4 A polish: path card titles share a two-line box on wide screens; footer bottom row centered on the seal */ @media (min-width: 1024px) { .path li h3 { min-height: 2.6em; } } .legal { align-items: center; } @media (max-width: 600px) { .org-cost tr { padding: 12px 16px; } } /* Round 4 B M3: the "In short" answer is a summary block, not a drop cap; the drop cap moves to the first narrative paragraph */ .article-prose > p:first-of-type:has(> strong:first-child)::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; font-family: inherit; color: inherit; } .article-prose > p:first-of-type:has(> strong:first-child) { background: var(--paper); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; padding: 16px 20px; } .article-prose > p:first-of-type:has(> strong:first-child) + p::first-letter { font-family: var(--ff-s); float: left; font-size: 3.6em; line-height: .86; padding: 6px 10px 0 0; color: var(--navy-900); } @media (max-width: 760px) { .article-prose > p:first-of-type:has(> strong:first-child) + p::first-letter { font-size: 3em; } } .prose .table-wrap caption.sr { caption-side: top; } /* PMS change-plan form (round 4 C33): "Go back" is a secondary action with its own space */ .pms-form input[type="submit"][name="pms_redirect_back"] { background: #fff !important; color: var(--navy-900) !important; border: 1.5px solid var(--line) !important; box-shadow: none !important; margin-top: 12px !important; } .pms-form input[type="submit"][name="pms_redirect_back"]:hover { border-color: var(--navy-800) !important; } .leave-plan input[type="submit"] + input[type="submit"] { margin-top: 12px !important; } .update-note { border-left: 3px solid var(--blue-700); background: var(--sky-100); } .update-note a { text-decoration: underline; text-underline-offset: 3px; } /* Round 4 C19: the card fields sit in WooCommerce's fieldset without the browser's default groove; C15: sign-up errors in red */ .woocommerce-checkout fieldset.wc-payment-form, .woocommerce-checkout fieldset[id^="wc-"][id$="-cc-form"] { border: 0; padding: 0; margin: 0; } .pms-form .pms_field-errors-wrapper, .pms-form .pms_field-errors-wrapper p { color: #B42318 !important; font-weight: 600; } /* Pillar guides (round 4 SEO M1) */ .pillar .pillar-short { background: var(--paper); border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; padding: 16px 20px; } .pillar-faq-h { margin: 2em 0 .6em; } .cat-intro { max-width: 760px; margin: 4px 0 28px; } .cat-intro p { color: var(--ink-2); } .ins-guides { margin: 14px 0 14px; position: relative; z-index: 1; } @media (min-width: 761px) { .ins-guides a { white-space: nowrap; } } /* Round 4 C32: the team table becomes cards below 1100 px so the status column never squeezes */ @media (max-width: 1100px) { .org-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .org-table, .org-table tbody, .org-table tr, .org-table th, .org-table td { display: block; width: 100%; } .org-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line); } .org-table td { padding: 4px 0 !important; } .org-table td[data-l]::before { content: attr(data-l) ": "; color: var(--ink-3); } } /* Round 4 A p7: the help center is one centered reading column on wide screens (no empty right third) */ @media (min-width: 1024px) { .help-sec .help-search, .help-sec .help-nav, .help-sec .help-topic { max-width: 860px; margin-left: auto; margin-right: auto; } .help-sec .help-nav { justify-content: center; } } /* Round 5 B M1/M2, A M1/M2: article tables never break words mid-word on desktop; comparison and team-price tables are left-aligned with wrapping cells; the three AIMO tiers sit in one row from 1024px */ .prose th, .prose td { overflow-wrap: normal; word-break: normal; } .prose th:first-child, .prose td:first-child { min-width: 8.5rem; } .cmp-table th, .cmp-table td, .org-cost th, .org-cost td { text-align: left !important; white-space: normal !important; } .cmp-table table { table-layout: fixed; } .cmp-table th:nth-child(1) { width: 18%; } .cmp-table th:nth-child(2) { width: 8%; } .cmp-table th:nth-child(3) { width: 22%; } .cmp-table th:nth-child(4) { width: 26%; } .cmp-table th:nth-child(5) { width: 13%; } .cmp-table th:nth-child(6) { width: 13%; } @media (max-width: 760px) { .cmp-table table { table-layout: auto; } .prose th:first-child, .prose td:first-child { min-width: 0; } } @media (min-width: 1024px) { .kit-buy-3 { grid-template-columns: repeat(3, minmax(0, 340px)); } } /* Round 5 C M7: cart notices are plain paragraphs (the flex layout is only for messages that carry a button), so inline links keep their punctuation */ .ia-cart .woocommerce-info { display: block; } .ia-cart .woocommerce-info a { padding: 0; display: inline; } /* Round 5 A M2: the worked team-price table sits in a narrow column, so it wraps instead of scrolling sideways */ .org-cost table { min-width: 0; } /* Round 5 C M9: the card form keeps its final height from the first paint */ .co-main .wcpay-upe-form fieldset.wc-payment-form { min-height: 130px; } /* Credential visuals (2026-10-17, owner): Home shows the AIMP badge, About shows the Institute Seal; the full certificate appears only as a SPECIMEN on /certification/ */ .cred-panel { display: grid; justify-items: center; gap: 22px; padding: 34px 28px 28px; border-radius: 18px; background: radial-gradient(120% 90% at 50% 30%, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 70%); border: 1px solid rgba(255, 255, 255, .14); } .cred-badge { width: min(72%, 340px); height: auto; filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .38)); } .cred-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 380px; } .cred-points li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; line-height: 1.4; color: var(--on-dark-2, rgba(255, 255, 255, .86)); } .cred-points .ic { color: var(--gold); flex: none; margin-top: 2px; } .cert-cap a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .seal-figure { margin: 0; display: grid; justify-items: center; gap: 16px; text-align: center; } .seal-figure img { width: min(78%, 320px); height: auto; filter: drop-shadow(0 16px 34px rgba(7, 26, 51, .18)); } .seal-figure figcaption { font-size: .92rem; line-height: 1.5; color: var(--ink-2); max-width: 360px; } .cert-spec { margin: 12px 2px 0; color: var(--ink-3); } @media (max-width: 760px) { .cred-panel { padding: 26px 18px 22px; } .cred-badge { width: min(64%, 260px); } } /* ===== Round 5 lane A (reviews/r5-css-A.css, merged 2026-10-17) ===== */ /* Round 5, reviewer A (marketing), lane A. Append to style.css (any position after the existing .cmp, .price-side and .pms-auto rules). */ /* m5. Blank column beside long FAQs and under the shorter price card. At 1024px and wider the FAQ heading block (/certification/, /membership/, /aimo/; templates add .faq-split) and the $695 price card on /certification/ stay in view while the longer column scrolls past. Static below 1024px (mobile rule). */ @media (min-width: 1024px) { .faq-split > :first-child { position: sticky; top: 112px; align-self: start; } } /* the price card is about 790px tall: only pin it when the whole card (with its Enroll button) fits under the header */ @media (min-width: 1024px) and (min-height: 920px) { .price-grid > .price-card { position: sticky; top: 96px; align-self: start; } } /* m8. /register/: space between the auto-renewal paragraph and the "Create my account" button. */ .pms-auto, form .pms-auto { margin: 14px 0 16px; } /* p3. /membership/ on phones: the comparison shows one tier at a time. The template renders .cmp-switch with an inline display:none (so it never shows on desktop or before this CSS lands) and sets .cmp-wrap[data-show="1..4"]. */ @media (max-width: 760px) { .cmp-switch { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; } .cmp-switch .btn { width: 100%; justify-content: center; } .cmp-switch .btn[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: #fff; } .cmp-wrap[data-show="1"] .cmp td:not(:nth-of-type(1)), .cmp-wrap[data-show="2"] .cmp td:not(:nth-of-type(2)), .cmp-wrap[data-show="3"] .cmp td:not(:nth-of-type(3)), .cmp-wrap[data-show="4"] .cmp td:not(:nth-of-type(4)) { display: none; } .cmp-wrap[data-show] .cmp tbody tr:not(.cmp-group) { grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: center; margin-bottom: 8px; } .cmp-wrap[data-show] .cmp tbody th[scope="row"] { grid-column: auto; padding: 12px 14px; border-bottom: 0; background: #fff; font-size: .95rem; line-height: 1.4; } .cmp-wrap[data-show] .cmp td { border: 0 !important; padding: 12px 14px 12px 0; align-items: flex-end; text-align: right; max-width: 46vw; } .cmp-wrap[data-show] .cmp td::before { display: none; } } /* p4. /certification/ price side cards: the caption under a price ("a year, or included in ...") gets air and line-height. */ .price-side .price small { line-height: 1.45; margin-top: 4px; } /* p7. /aimo/: the workshop and implementation forms now share one section with a "What do you need?" selector; the pricing-card links (#workshop, #implementation) land on a panel, so keep its heading clear of the sticky header. */ .aimo-panel { scroll-margin-top: 96px; } /* ===== Round 5 lane B (reviews/r5-css-B.css, merged 2026-10-17) ===== */ /* Round 5 lane B (AI Insights, community) minor/polish CSS. Append to theme/iaim/style.css. */ /* B m13: visible label above the featured card on /ai-insights/ ("Featured: the latest free briefing" or "Latest briefing", printed by ia_insights_list()). */ .feature-row .feature-label { margin: 0 0 10px; } /* B m18: "No replies yet" line under a thread's opening post (printed by bbpress.php). */ .community-empty { margin: 4px 0 22px; padding: 14px 18px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink-2); font-size: .95rem; } /* B m19: the forum list ran to 960px inside the 1200px wrap, leaving an empty right third under the full-width hero at 1440px. Run it full width; the guidelines line stays at reading width. */ .community .bbp-wrap { max-width: none; } /* B p5: one newsletter capture per page. When the page already shows the band or the inline form, the footer printed a second "Subscribe to the Briefing" button (.ft-news-link); hide that footer block instead. Pages without a form keep the footer form. */ .ft-news:has(.ft-news-link) { display: none; } /* B p11: /aimo/ seven kit cards in a two-column grid left an orphan at the end; center the last card when it is alone on its row (two-column layout only). */ @media (min-width: 1024px) { .kit-grid > .kit-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); } } /* ===== Round 5 lane C (reviews/r5-css-C.css, merged 2026-10-17) ===== */ /* Round 5 lane C: CSS for style.css (append at the end). Each block names its item. */ /* m8: on a single-plan join form (e.g. /register/?plan=3925) the plan has no radio, so the name fell into the 22px radio column ("AIMP / Certified"). Let it span the card. */ .pms-subscription-plan.pms-hidden label { grid-template-columns: minmax(0, 1fr) auto !important; } /* m8: 16px between the disclosure paragraph and the pay/submit button on every sign-up form (was 0). The new "What happens next" line sits above the disclosure. */ .pms-form .pms-auto { margin-bottom: 16px; } .pms-form .pms-next { margin: 14px 0 0; color: var(--ink-2); } /* m9: order confirmation tiles: one row of four (number, date, total, method), the email underneath at full width; the date never wraps. */ .co-main .woocommerce-order-overview { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .co-main .woocommerce-order-overview__email { order: 5; grid-column: 1 / -1; } .co-main .woocommerce-order-overview__date strong { white-space: nowrap; } @media (max-width: 760px) { .co-main .woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* p2: team table as cards (below 1100px): row labels get the same 16px inner padding as the names (the td padding was 0). */ @media (max-width: 1100px) { .org-table tbody tr { padding: 12px 0 !important; } .org-table tbody th, .org-table td { padding: 4px 16px !important; } } /* ===== Round 5 lane SEO (reviews/r5-css-SEO.css, merged 2026-10-17) ===== */ /* Round 5 SEO lane (2026-10-17). Append to theme/iaim/style.css. Calendar entries now have id anchors (linked from the ItemList schema and from each event in the members' calendar feed): keep the heading clear of the sticky site header when a link jumps to one. The #subscribe block carries the same rule inline. */ .rc-item { scroll-margin-top: 96px; } /* Cookie consent banner (launch 8.2): bottom card, equal-weight buttons, clear of the phone bottom bar */ .iaim-consent { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-lg); padding: 16px 18px; display: grid; gap: 12px; font-size: .92rem; line-height: 1.45; } .iaim-consent[hidden] { display: none !important; } .iaim-consent p { margin: 0; } .iaim-consent a { text-decoration: underline; text-underline-offset: 3px; } .iaim-consent-actions { display: flex; gap: 10px; justify-content: flex-end; } .iaim-consent-actions .btn { min-width: 110px; justify-content: center; } @media (max-width: 820px) { .iaim-consent { bottom: 84px; } .iaim-consent-actions .btn { flex: 1 1 0; } }