/* General Styling & Color Variables */
:root {
--font-en: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-jp: "TildeFix", "Lato", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-ko: "TildeFix", "Lato", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--main-font: var(--font-en);
--font-display: "Lato", sans-serif;
/* Default to Exploring theme */
--tier-color: #CC0000;
--tier-color-hover: #CC0000;
--tier-color-active: #CC0000;
--tier-color-visited: #CC0000;
--tier-color-light: #CC0000;
/* Responsive breakpoints (for reference - use in media queries) */
--bp-mobile-sm: 480px;
--bp-mobile: 640px;
--bp-tablet: 768px;
--bp-tablet-lg: 992px;
--bp-desktop: 1200px;
--bp-desktop-lg: 1400px;
--bp-desktop-xl: 1920px;
/* Responsive spacing - scales down on smaller viewports */
--container-padding: 2rem;
/* Define the color palettes for each theme */
--color-explorer: #CC0000;
--color-explorer-light: #CC0000;
--color-adopter: #CC0000;
--color-adopter-light: #CC0000;
--color-leader: #CC0000;
--color-leader-light: #CC0000;
--color-dark-text: #0d2240;
--color-light-grey: #e9ecef;
--bg-color: #f5f5f5;
--text-color: #333;
--text-color-strong: #333333;
--text-color-muted: #555555;
--text-color-inverse: #ffffff;
--neutral-100: #ffffff;
--neutral-200: #f5f5f5;
--neutral-300: #e0e0e0;
--neutral-600: #5A5A5A;
--neutral-700: #4a4a4a;
--shadow-overlay: rgba(0, 0, 0, 0.15);
--shadow-soft: rgba(0, 0, 0, 0.08);
--overlay-dark: rgba(0, 0, 0, 0.7);
--overlay-light: rgba(255, 255, 255, 0.2);
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--toast-success: #198754;
--toast-info: #2196F3;
--toast-warning: #FF9800;
}
html[lang="jp"],
html[data-lang="jp"] {
--main-font: var(--font-jp);
}
html[lang="ko"],
html[data-lang="ko"] {
--main-font: var(--font-ko);
}
body {
font-family: var(--main-font);
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
font-feature-settings: "kern"1, "liga"1, "calt"1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Required for absolute positioning of bubble decoration */
position: relative;
min-height: 100vh;
}
button,
input,
select,
textarea {
font-family: var(--main-font);
}
/*
* Fallback for any remaining U+FF5E / U+301C: map those code points to a Latin system font
* so they visually match Lato. Primary fix is JS: normalizeLatinCompatibleRangeSeparators (en dash).
*/
@font-face {
font-family: 'TildeFix';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Segoe UI');
unicode-range: U+FF5E, U+301C;
}
/* ============================================================================
Japanese typography — Noto Sans JP (Regular 400 from Google Fonts; 500–700 loaded for UI).
Note: Noto Sans SC is Simplified Chinese; for Japanese use Noto Sans JP only.
Activate with .
============================================================================ */
/* TildeFix first: U+FF5E / U+301C use local Latin font so any uncaught tildes align with Lato digits */
html[lang="jp"] body {
font-weight: 400;
font-synthesis: none;
line-height: 1.85;
letter-spacing: 0.02em;
}
/*
* JP wrapping: do NOT target the whole .question-card — that made flex children
* (e.g. .question-number) shrink and "15" stack vertically (overflow-wrap:anywhere).
* Scope wrapping to real text containers + buttons only.
*/
html[lang="jp"] button,
html[lang="jp"] .nav-button,
html[lang="jp"] .landing-page__btn,
html[lang="jp"] .card {
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
html[lang="jp"] .question-card .question-text {
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
line-break: strict;
}
html[lang="jp"] .question-area .section-name,
html[lang="jp"] .question-area .section-description {
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
line-break: strict;
}
/* Keep multi-digit question indices on one line (JP + flex shrink). */
html[lang="jp"] .question-number {
white-space: nowrap !important;
word-break: normal !important;
overflow-wrap: normal !important;
flex-shrink: 0 !important;
}
/* Korean typography (Noto Sans KR loaded on home/landing) */
html[lang="ko"] body {
line-height: 1.75;
letter-spacing: -0.01em;
}
html[lang="ko"] button,
html[lang="ko"] .nav-button,
html[lang="ko"] .landing-page__btn,
html[lang="ko"] .card {
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: keep-all !important;
}
html[lang="ko"] .question-card .question-text,
html[lang="ko"] .question-area .section-name,
html[lang="ko"] .question-area .section-description {
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: keep-all !important;
}
html[lang="ko"] .question-number {
white-space: nowrap !important;
word-break: normal !important;
overflow-wrap: normal !important;
flex-shrink: 0 !important;
}
/* Special case: quiz navigation buttons have hard `nowrap` overrides. */
html[lang="jp"] .quiz-nav-arrows button {
white-space: normal !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
flex-wrap: nowrap !important;
/* keep icon + text in the same control */
}
html[lang="jp"] .quiz-nav-arrows button span {
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
line-height: 1.2 !important;
}
/* Toast Notifications */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
left: auto;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 9999;
max-width: calc(100vw - 40px);
pointer-events: none;
}
.toast-container>* {
pointer-events: auto;
}
@media (max-width: 480px) {
.toast-container {
top: auto;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
left: calc(12px + env(safe-area-inset-left, 0px));
right: calc(12px + env(safe-area-inset-right, 0px));
max-width: none;
align-items: stretch;
}
}
.toast {
min-width: 260px;
max-width: min(420px, calc(100vw - 24px));
padding: 12px 16px;
border-radius: 8px;
color: var(--text-color-inverse);
box-shadow: 0 6px 18px var(--shadow-overlay);
font-size: 0.95em;
line-height: 1.4;
opacity: 0;
transform: translateY(-8px);
animation: toast-in 250ms ease-out forwards;
}
.toast-success {
background-color: var(--toast-success);
}
.toast-error {
background-color: var(--danger-color);
}
.toast-info {
background-color: var(--toast-info);
}
.toast-warning {
background-color: var(--toast-warning);
}
@keyframes toast-in {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes toast-out {
to {
opacity: 0;
transform: translateY(-8px);
}
}
/* Global Loading Indicator */
.loader-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9998;
}
.loader-spinner {
width: 50px;
height: 50px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--tier-color, var(--tier-color));
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.main-container {
max-width: 1240px;
width: 100%;
margin: 0 auto;
padding-left: max(var(--container-padding), env(safe-area-inset-left, 0px));
padding-right: max(var(--container-padding), env(safe-area-inset-right, 0px));
box-sizing: border-box;
background-color: #f5f5f5;
border-radius: 10px;
/* Allow footer to visually extend beyond the main
content width while keeping the card background. */
overflow: visible;
display: flex;
flex-direction: column;
min-height: 100vh;
/* Add padding-top to account for fixed header */
padding-top: 80px;
}
/* Professional Quiz Header Styles */
.quiz-header {
background-color: #f5f5f5;
padding: 0;
/* Fixed positioning so header stays at top when scrolling */
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 100;
/* Allow pseudo-element border to overflow container */
overflow: visible;
/* CSS custom property for header height - used by border positioning */
--header-height: 80px;
/* Ensure header has proper background to cover content scrolling underneath */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/**
* Full-width border-bottom using pseudo-element technique
*
* This approach allows the border to span the full viewport width
* while the header content remains constrained within the container.
*
* Technique: Uses fixed positioning relative to viewport to break out of
* container constraints. The border is positioned using viewport coordinates,
* ensuring it spans edge-to-edge regardless of container width, positioning,
* or overflow settings.
*
* Best Practices:
* - Uses ::after pseudo-element for semantic separation
* - Positioned fixed relative to viewport (not affected by container overflow)
* - Uses viewport width (100vw) for true full-screen span
* - Positioned at left: 0 to start from viewport edge
* - Calculates bottom position from header's bottom edge
* - Accounts for potential scrollbar width (100vw includes scrollbar)
* - Maintains proper z-index layering
* - Works across all screen sizes and orientations
* - Completely bypasses container overflow constraints
* - Performance optimized with hardware acceleration
*/
.quiz-header::after {
content: '';
position: fixed;
/* Position from viewport left edge for true full-width */
left: 0;
/* Use viewport width for full screen span */
width: 100vw;
height: 1px;
background-color: #e5e5e5;
z-index: 99;
/* Position below header - since header is now fixed at top: 0,
border should be at the bottom of the header (header height) */
top: var(--header-bottom, var(--header-height, 80px));
/* Ensure it appears below header content but above other content */
pointer-events: none;
/* Prevent any potential overflow issues */
box-sizing: border-box;
/* Performance optimization - hardware acceleration */
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
/* Ensure consistent rendering across browsers */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.quiz-header__container {
/* Match landing/marketing layout width for consistent
alignment across experiences while keeping content
centered on large viewports. */
max-width: 1280px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px var(--container-padding);
min-height: 80px;
box-sizing: border-box;
/* Keep header descendants (tooltips/menus) unclipped. */
overflow: visible !important;
}
.quiz-header__logo {
display: flex;
align-items: center;
}
.quiz-header__logo-link {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
border-radius: 6px;
transition: background-color 0.2s ease;
}
.quiz-header__logo-link:hover {
background-color: rgba(0, 0, 0, 0.04);
}
.quiz-header__logo-image {
width: 225px;
height: 44px;
object-fit: contain;
display: block;
}
.quiz-header__nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.lang-switcher {
display: flex;
align-items: center;
position: relative;
margin-left: 8px;
z-index: 999;
overflow: visible;
}
.lang-switcher__toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
border-radius: 10px;
padding: 8px 12px;
background: rgba(13, 34, 64, 0.06);
border: 1px solid rgba(13, 34, 64, 0.18);
color: var(--color-dark-text, #0d2240);
font-family: var(--main-font);
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: normal;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.lang-switcher__toggle:hover {
background: rgba(13, 34, 64, 0.1);
border-color: rgba(90, 155, 213, 0.6);
}
.lang-switcher__chevron {
color: var(--color-dark-text, #0d2240);
}
.lang-switcher__menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1001;
display: none;
min-width: 176px;
padding: 8px;
border-radius: 12px;
background: rgba(13, 34, 64, 0.92);
border: 1px solid rgba(90, 155, 213, 0.65);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
}
.lang-switcher--open .lang-switcher__menu {
display: block;
}
.lang-switcher--disabled {
opacity: 0.6;
}
.lang-switcher--disabled .lang-switcher__toggle {
cursor: not-allowed;
}
.lang-switcher--disabled .lang-switcher__toggle:hover {
background: rgba(13, 34, 64, 0.06);
border-color: rgba(13, 34, 64, 0.18);
}
/* Instant custom tooltip for disabled language switcher (localized via data-tooltip). */
.lang-switcher--disabled[data-tooltip] {
position: relative;
z-index: 999;
overflow: visible;
}
.lang-switcher--disabled[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 10px);
right: 0;
left: auto;
bottom: auto;
transform: translateY(-2px);
max-width: none;
padding: 8px 12px;
border-radius: 8px;
background: rgba(13, 34, 64, 0.96);
color: var(--text-color-inverse);
font-family: var(--main-font);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
text-align: center;
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
z-index: 99999;
transition: opacity 0.08s ease-out, transform 0.08s ease-out, visibility 0.08s ease-out;
}
.lang-switcher--disabled[data-tooltip]:hover::after,
.lang-switcher--disabled[data-tooltip]:focus-within::after {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lang-switcher__item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
padding: 10px 12px;
border-radius: 10px;
border: 0;
background: transparent;
color: var(--text-color-inverse);
font-family: var(--main-font);
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: normal;
text-align: left;
}
.lang-switcher__item:hover {
background: rgba(90, 155, 213, 0.22);
}
.lang-switcher__item--active {
background: rgba(90, 155, 213, 0.3);
}
.lang-switcher__item-left {
display: inline-flex;
align-items: center;
gap: 10px;
}
.lang-switcher__label {
white-space: nowrap;
}
.lang-switcher__flag {
flex-shrink: 0;
font-size: 16px;
line-height: 1;
}
.lang-switcher__item-flag {
flex-shrink: 0;
font-size: 16px;
line-height: 1;
}
.lang-switcher__globe {
flex-shrink: 0;
display: block;
/* Avoid baseline alignment differences across browsers */
width: 18px;
height: 18px;
overflow: visible;
color: inherit;
vertical-align: middle;
/* Crisp strokes when scaled; avoids fuzzy or uneven outline on retina */
shape-rendering: geometricPrecision;
}
.lang-switcher__chevron {
display: block;
/* Avoid baseline alignment differences across browsers */
}
.lang-switcher__check {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-color-inverse);
opacity: 0;
transform: translateY(1px);
transition: opacity 0.12s ease, transform 0.12s ease;
}
.lang-switcher__item--active .lang-switcher__check {
opacity: 1;
transform: translateY(0);
}
.quiz-header__home-link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--tier-color);
font-family: var(--main-font);
font-size: 16px;
font-style: normal;
font-weight: 800;
line-height: normal;
padding: 8px 12px;
border-radius: 6px;
transition: all 0.2s ease;
}
.quiz-header__home-link:hover {
background-color: #f8f8f8;
color: var(--tier-color-hover);
}
.quiz-header__home-icon {
width: 24px;
height: 24px;
object-fit: contain;
flex-shrink: 0;
}
/* Professional Quiz Footer Styles */
.quiz-footer {
background-color: #f5f5f5;
border-top: 1px solid #e5e5e5;
padding: 0;
margin-top: auto;
/* Visually break the footer out of the 1240px
main content width and center it at 1318px
while still being inside .main-container. */
position: relative;
left: 50%;
transform: translateX(-50%);
width: 1318px;
}
.quiz-footer__container {
/* Footer content width – slightly wider than the
main content to align with the design spec. */
max-width: 1318px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
min-height: 60px;
}
/* Responsive: avoid horizontal scrolling on narrow viewports */
@media (max-width: 1318px) {
.quiz-footer {
left: 0;
transform: none;
width: 100%;
}
.quiz-footer__container {
max-width: 100%;
}
}
.quiz-footer__links {
display: flex;
align-items: center;
gap: 8px;
z-index: 2;
}
.quiz-footer__link {
color: #666;
text-decoration: none;
font-size: 14px;
font-weight: 400;
transition: color 0.2s ease;
}
.quiz-footer__link:hover {
color: var(--tier-color);
text-decoration: underline;
}
.quiz-footer__separator {
color: #999;
font-size: 14px;
font-weight: 400;
margin: 0 4px;
}
.quiz-footer__copyright {
color: #666;
font-size: 14px;
font-weight: 400;
}
/* Responsive Design for Header and Footer (tablet & mobile) */
@media (max-width: 1024px) {
.main-container {
/* Adjust padding-top for mobile header height */
padding-top: 70px;
}
.quiz-header {
/* Adjust header height for mobile */
--header-height: 70px;
}
.quiz-header__container {
padding: 12px var(--container-padding);
min-height: 70px;
}
.quiz-header__logo-image {
width: 180px;
height: 35px;
}
.quiz-header__home-link {
font-size: 14px;
padding: 6px 10px;
}
.quiz-header__home-icon {
width: 20px;
height: 20px;
}
/* Ensure full-width border works on mobile */
.quiz-header::after {
/* Maintain full-width border on mobile devices */
left: 0;
width: 100vw;
/* Border positioned at header height (70px on mobile) */
top: var(--header-bottom, var(--header-height, 70px));
}
.quiz-footer__container {
padding: 15px 20px;
flex-direction: column;
gap: 15px;
text-align: center;
}
.quiz-footer__links {
order: 1;
}
.quiz-footer__copyright {
order: 2;
}
/* Quiz layout: stack stepper + question area on tablet/mobile */
#assessment-app {
flex-direction: column;
min-height: auto;
}
.stepper-nav {
width: 100% !important;
max-width: 100% !important;
padding: 24px 0 44px 0 !important;
flex-shrink: 0 !important;
border-bottom: 1px solid #e5e5e5 !important;
margin-bottom: 0 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 0 !important;
overflow: hidden !important;
/* clip any over-long connectors at edges */
--stepper-dot-size: 32px;
}
.stepper-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-bottom: 0 !important;
/* Ensure dot row height is consistent so all dots align on same line */
min-height: 32px !important;
}
.stepper-item:last-child {
margin-bottom: 0;
}
/* Hide vertical connector - use horizontal instead for row layout */
.stepper-item:not(:last-child)::before {
display: none !important;
}
/* Horizontal connector: anchored to DOT (not item) so it stays centered on dot regardless of label */
.stepper-item {
position: relative !important;
}
.stepper-item:not(:last-child) .stepper-dot::before {
content: "" !important;
position: absolute !important;
left: 100% !important;
top: 50% !important;
/* Make connector extremely long; overflow on the nav clips
the ends so the line always appears continuous between dots
on all intermediate responsive widths. */
width: 200vw !important;
height: 2px !important;
background-color: var(--tier-color) !important;
transform: translateY(-50%) !important;
z-index: 0 !important;
pointer-events: none !important;
}
.stepper-dot {
width: 32px;
height: 32px;
font-size: 12px;
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
flex-shrink: 0 !important;
}
.stepper-item.active {
padding-top: 0 !important;
}
.stepper-item.active .stepper-dot {
/* Use scale without shifting - keep dot aligned with others */
transform: scale(1.1) !important;
transform-origin: center center !important;
}
/* Completed steps: show checkmark (desktop style, adapted for responsive dot size) */
.stepper-item.completed .stepper-dot {
background-color: var(--tier-color) !important;
font-size: 0 !important;
/* hide number */
color: transparent !important;
}
.stepper-item.completed .stepper-dot::after {
content: "✔" !important;
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--text-color-inverse) !important;
font-size: 14px !important;
line-height: 1 !important;
background-color: transparent !important;
/* ensure we don't paint a bar */
}
/* Only show label for active stepper-item on responsive */
.stepper-item .stepper-label {
display: none !important;
}
/* Label: single line, can extend under other stepper items */
.stepper-item.active .stepper-label {
display: block !important;
position: absolute !important;
left: 0 !important;
top: 100% !important;
margin-top: 8px !important;
margin-left: 0 !important;
white-space: nowrap !important;
width: max-content !important;
max-width: min(calc(100vw - 48px), 400px) !important;
text-align: left !important;
font-size: 12px !important;
line-height: 1.3 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-wrap: unset !important;
overflow-wrap: unset !important;
hyphens: none !important;
}
.question-area {
/* Take full width of assessment-app, use same horizontal padding */
width: 100% !important;
padding: 24px 0 80px 0 !important;
box-sizing: border-box;
flex: 1;
}
.question-card {
/* Full width inside question-area (which already matches assessment-app width) */
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 24px;
}
.question-area .section-name {
font-size: 20px;
}
.question-area .section-description {
font-size: 15px;
margin-bottom: 24px;
}
}
@media (max-width: 480px) {
:root {
--container-padding: 1rem;
}
.main-container {
/* Adjust padding-top for small mobile header height */
padding-top: 60px;
}
.quiz-header {
/* Adjust header height for small mobile */
--header-height: 60px;
}
.quiz-header__container {
padding: 10px var(--container-padding);
min-height: 60px;
}
.quiz-header__logo-image {
width: 150px;
height: 30px;
}
.quiz-header__home-link {
font-size: 14px;
padding: 4px 8px;
}
.quiz-header__home-icon {
width: 18px;
height: 18px;
}
/* Ensure full-width border works on small mobile devices */
.quiz-header::after {
/* Maintain full-width border on small screens */
left: 0;
width: 100vw;
/* Border positioned at header height (60px on small mobile) */
top: var(--header-bottom, var(--header-height, 60px));
}
.quiz-footer__container {
padding: 12px 15px;
}
.quiz-footer__links {
flex-wrap: wrap;
justify-content: center;
}
/* Extra small mobile: tighter quiz layout, keep row + active-label-only */
.stepper-nav {
padding: 20px 0 40px 0 !important;
justify-content: space-between !important;
gap: 0 !important;
overflow: hidden !important;
/* clip over-long connectors at edges */
--stepper-dot-size: 28px;
}
.stepper-item.active .stepper-label {
max-width: min(calc(100vw - 32px), 280px) !important;
font-size: 11px !important;
}
.stepper-item {
padding-left: 0 !important;
margin-bottom: 0 !important;
}
.stepper-item:not(:last-child)::before {
display: none !important;
}
.stepper-item:not(:last-child) .stepper-dot::before {
/* Shorter connector on very small screens, but still long
enough to visually meet the next dot. */
width: 56px !important;
}
.stepper-dot {
width: 28px;
height: 28px;
font-size: 11px;
}
/* Smaller check icon on very small dots */
.stepper-item.completed .stepper-dot::after {
font-size: 12px;
}
.question-area {
padding: 20px 12px 32px;
}
.question-card {
padding: 16px 12px;
}
.question-area .section-name {
font-size: 18px;
}
.question-area .section-description {
font-size: 14px;
margin-bottom: 20px;
}
}
#assessment-app {
display: flex;
flex: 1;
/* Ensure the quiz content area always stretches
to visually fill the viewport between the fixed
header (80px) and footer (~60px), so short
questions still match the full-height design. */
/* min-height: calc(100vh); */
}
/* .stepper-nav {
width: 30%;
padding: 40px 0;
flex-shrink: 0;
}
.stepper-item {
display: flex;
align-items: flex-start;
position: relative;
padding-left: 30px;
margin-bottom: 25px;
}
.stepper-item:not(:last-child)::before {
content: "";
position: absolute;
left: 7px;
top: 16px;
width: 2px;
height: 100%;
background-color: #e0e0e0;
} */
/* .stepper-dot {
position: absolute;
left: 0;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #e0e0e0;
border: 3px solid var(--neutral-100);
z-index: 1;
}
.stepper-label {
font-weight: 500;
color: #888;
font-size: 0.9em;
}
.stepper-item.active .stepper-dot {
background-color: var(--tier-color);
transform: scale(1.1);
}
.stepper-item.active .stepper-label {
color: var(--color-dark-text);
font-weight: bold;
}
.stepper-item.completed .stepper-dot {
background-color: var(--color-dark-text);
}
.stepper-item.completed .stepper-label {
color: #555;
} */
/* In style.css */
.stepper-nav {
width: 30%;
padding: 60px 0 0 20px;
flex-shrink: 0;
}
/* Question area typography */
.question-area .section-title {
font-size: 16px;
margin-bottom: 16px;
}
.question-area .section-name {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
/* 28.8px */
margin-bottom: 16px;
}
.question-area .section-description {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 135%;
/* 21.6px */
margin-bottom: 40px;
}
.stepper-item {
/* --- KEY CHANGES FOR ALIGNMENT --- */
display: flex;
align-items: center;
/* This vertically centers the label */
position: relative;
padding-left: 53px;
/* Increased padding for the larger dot and spacing */
margin-bottom: 25px;
min-height: 36px;
/* Ensures the container is tall enough for the dot */
}
/* The connecting line, now drawn between the centers of the dots */
.stepper-item:not(:last-child)::before {
content: "";
position: absolute;
left: 18px;
/* Aligns with the center of the 36px dot */
top: 50%;
/* Starts at the vertical center */
width: 2px;
height: calc(100% + 25px);
/* Fills the container and the margin below */
background-color: var(--tier-color);
z-index: 0;
/* Positioned behind the dot */
}
.stepper-dot {
/* Sizing */
width: 36px;
height: 36px;
/* --- More Robust Positioning --- */
position: absolute;
left: 0;
top: 50%;
/* Position at the vertical midpoint */
transform: translateY(-50%);
/* Shift up by half its height for perfect center */
/* Number styling (from previous step) */
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
color: var(--text-color-inverse);
/* Appearance */
background-color: #A5A5A5;
border-radius: 0;
z-index: 1;
/* Ensures dot is on top of the line */
transition: all 0.3s ease;
}
.stepper-label {
font-weight: 500;
color: #888;
font-size: 0.9em;
}
/***************************************************/
/***** START: အသစ်ထည့်သွင်းရန် CSS Code အပိုင်း *****/
/***************************************************/
/* active section item အတွက် background အရောင်နှင့် padding ထည့်ခြင်း */
.stepper-item.active {
background-color: transparent;
border-radius: 8px;
padding-top: 8px;
padding-bottom: 8px;
/* Adjust left padding to account for the new background */
padding-left: 53px;
/* Smooth transition for color changes */
transition: background-color 0.3s ease;
}
/***************************************************/
/***** END: အသစ်ထည့်သွင်းရန် CSS Code အပိုင်း *******/
/***************************************************/
.stepper-item.active .stepper-dot {
background-color: var(--tier-color);
color: white;
transform: translateY(-50%) scale(1.1);
/* Combine transforms */
}
.stepper-item.active .stepper-label {
color: var(--color-dark-text);
font-weight: bold;
}
.stepper-item.completed .stepper-dot {
background-color: var(--tier-color);
font-size: 0;
color: transparent;
}
.stepper-item.completed .stepper-dot::after {
content: "✔";
color: white;
font-size: 16px;
line-height: 1;
}
.stepper-item.completed .stepper-label {
color: #555;
}
.question-area {
width: 68%;
padding: 60px 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.question-card {
background-color: var(--neutral-100);
border: 1px solid #e0e0e0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
padding: 24px;
width: 100%;
}
.question-header {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 25px;
}
.question-number {
font-size: 1.5em;
font-weight: bold;
color: var(--tier-color);
position: relative;
padding-right: 15px;
border-right: 4px solid var(--tier-color);
/* Prevent flex layout from squeezing "12", "15", etc. onto multiple lines */
flex-shrink: 0;
white-space: nowrap;
}
.question-number::after {
content: none;
}
.question-text {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 120%;
margin: 0;
}
.options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.option-button {
width: 100%;
height: 100%;
padding: 15px 20px;
touch-action: manipulation;
-webkit-appearance: none;
appearance: none;
background-color: var(--neutral-100);
border: 2px solid #e0e0e0;
text-align: left;
font-size: 1em;
font-family: inherit;
color: var(--neutral-600);
-webkit-text-fill-color: var(--neutral-600);
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s, color 0.2s;
line-height: 1.5;
display: flex;
align-items: center;
gap: 12px;
box-sizing: border-box;
}
.option-button:hover {
border-color: var(--tier-color);
}
.option-button.selected {
border-color: var(--tier-color);
background-color: var(--tier-color);
color: white;
-webkit-text-fill-color: white;
font-weight: bold;
}
.option-button.selected .checkmark-icon {
background-color: white;
border-color: white;
background-image: none;
position: relative;
}
.option-button.selected .checkmark-icon::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid var(--tier-color);
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.checkmark-icon {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
transition: all 0.2s;
flex-shrink: 0;
}
.option-dropdown {
width: 100%;
padding: 15px;
font-size: 1em;
border-radius: 8px;
border: 2px solid #e0e0e0;
background-color: var(--neutral-100);
cursor: pointer;
}
.quiz-nav-arrows {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
margin-top: 40px;
}
/* Strong overrides for any quiz nav buttons (legacy-safe) */
.quiz-nav-arrows button {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
gap: 12px !important;
/* ensure text and arrow icon are side-by-side with spacing */
}
.quiz-nav-arrows button span,
.quiz-nav-arrows button svg {
display: inline-block !important;
vertical-align: middle !important;
}
.quiz-nav-arrows button:not(:disabled) {
cursor: pointer !important;
}
/* First button = Previous (outlined grey) */
.quiz-nav-arrows button:first-child {
background: var(--neutral-100) !important;
color: var(--neutral-600) !important;
border: 2px solid var(--neutral-600) !important;
font-family: var(--main-font);
font-size: 14px !important;
font-style: normal !important;
font-weight: 800 !important;
line-height: normal !important;
letter-spacing: 1.05px !important;
text-transform: uppercase !important;
}
/* Ensure text styling applies to span elements inside buttons */
.quiz-nav-arrows button:first-child span {
color: var(--neutral-600) !important;
font-family: var(--main-font);
font-size: 14px !important;
font-style: normal !important;
font-weight: 800 !important;
line-height: normal !important;
letter-spacing: 1.05px !important;
text-transform: uppercase !important;
}
.quiz-nav-arrows button:first-child:hover:not(:disabled) {
border-color: #4a4a4a !important;
color: #4a4a4a !important;
}
.quiz-nav-arrows button:first-child:hover:not(:disabled) span {
color: #4a4a4a !important;
}
/* Second button = Next (solid red) */
.quiz-nav-arrows button:last-child {
background: var(--tier-color) !important;
color: var(--text-color-inverse) !important;
border: 2px solid var(--tier-color) !important;
font-family: var(--main-font);
font-size: 14px !important;
font-style: normal !important;
font-weight: 800 !important;
line-height: normal !important;
letter-spacing: 1.05px !important;
text-transform: uppercase !important;
}
/* Ensure text styling applies to span elements inside buttons */
.quiz-nav-arrows button:last-child span {
color: var(--text-color-inverse) !important;
font-family: var(--main-font);
font-size: 14px !important;
font-style: normal !important;
font-weight: 800 !important;
line-height: normal !important;
letter-spacing: 1.05px !important;
text-transform: uppercase !important;
}
.quiz-nav-arrows button:last-child:hover:not(:disabled) {
background: var(--tier-color-hover) !important;
border-color: var(--tier-color-hover) !important;
}
.quiz-nav-arrows button:last-child:hover:not(:disabled) span {
color: var(--text-color-inverse) !important;
}
/* Icon sizing regardless of element type */
.quiz-nav-arrows button svg,
.quiz-nav-arrows button .nav-btn__icon {
width: 24px !important;
height: 24px !important;
display: inline-block !important;
object-fit: contain !important;
}
/* Disable legacy circular style */
.quiz-nav-arrows .arrow-button {
border-radius: 0 !important;
width: auto !important;
height: auto !important;
}
/* Disabled state */
.quiz-nav-arrows .nav-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Focus visibility */
.quiz-nav-arrows .nav-btn:focus-visible {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
}
/* A11y utility: visually hidden but readable by screen readers */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Generic responsive image helper */
.responsive-img {
max-width: 100%;
height: auto;
display: block;
}
/* Responsive stacking on small screens */
@media (max-width: 640px) {
.quiz-nav-arrows {
flex-direction: column;
align-items: stretch;
}
.quiz-nav-arrows .nav-btn {
width: 100%;
min-width: 0;
}
/* Options grid: single column on mobile for better touch targets */
.options-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.option-button {
padding: 14px 16px;
min-height: 52px;
}
}
/* --- Result Page Styles --- */
.result-area {
width: 100%;
padding: 40px;
box-sizing: border-box;
}
/* Result page wrapper styles (quiz results) */
.result-page-wrapper {
border-top: 4px solid var(--tier-color);
background: var(--neutral-100);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
display: flex;
width: 1240px;
max-width: calc(100% - 80px);
padding: 40px;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 40px auto;
box-sizing: border-box;
}
/* Report header for PDF/Report page */
.report-header {
width: 100%;
margin: 0 0 14px 0;
}
.report-title {
display: none;
}
/* THEME DEFINITIONS for 3 tiers */
.result-page-wrapper.theme-explorer {
/* Unified tier color on report page */
--tier-color: #CC0000;
--tier-color-light: #CC0000;
--tier-color-hover: #CC0000;
--tier-color-active: #CC0000;
--tier-color-visited: #CC0000;
}
.result-page-wrapper.theme-adopter {
/* Unified tier color on report page */
--tier-color: #CC0000;
--tier-color-light: #CC0000;
--tier-color-hover: #CC0000;
--tier-color-active: #CC0000;
--tier-color-visited: #CC0000;
}
.result-page-wrapper.theme-leader {
/* Unified tier color on report page */
--tier-color: #CC0000;
--tier-color-light: #CC0000;
--tier-color-hover: #CC0000;
--tier-color-active: #CC0000;
--tier-color-visited: #CC0000;
}
/* --- Result grid: two-column layout (tier card | dimension scores) --- */
.result-grid {
display: grid;
/* minmax(0, 1fr) prevents grid blowout from long/unbreakable content */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 30px;
width: 100%;
align-items: start;
box-sizing: border-box;
}
.result-col {
border: none;
border-radius: 0;
padding: 0;
/* Critical for grid: allow column to shrink and prevent overflow */
min-width: 0;
width: 100%;
box-sizing: border-box;
}
/* Dimension scores: responsive chart container so radar chart scales with layout */
.dimension-scores {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
}
.dimension-scores .chart-container {
position: relative;
width: 100%;
max-width: 100%;
aspect-ratio: 1;
min-height: 220px;
max-height: min(420px, 50vw);
/* Ensure Chart.js has a measurable container for responsive resize */
contain: layout style;
}
/* Chart.js resizes canvas to fit container; container drives responsive size */
#result-radar-chart {
display: block;
max-width: 100%;
width: 100%;
height: 100%;
}
/* Result grid, result-page-wrapper, result-area: breakpoints */
/* Tablet landscape / small desktop: slightly tighter gap */
@media (max-width: 1024px) {
.result-grid {
gap: 24px;
}
.result-page-wrapper {
max-width: calc(100% - 48px);
padding: 32px 28px;
}
}
/* Tablet portrait: single column, comfortable spacing */
@media (max-width: 768px) {
.result-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.result-page-wrapper {
max-width: calc(100% - 32px);
padding: 24px 20px;
margin: 24px auto;
}
.result-area {
padding: 24px 16px;
}
.tier-name-box {
font-size: 26px;
padding: 6px 20px;
}
.tier-card p {
font-size: 20px;
}
/* Radar chart: taller aspect on narrow viewport for readability */
.dimension-scores .chart-container {
min-height: 260px;
max-height: min(360px, 85vw);
}
}
/* Large phone: tighter padding and gaps */
@media (max-width: 600px) {
.result-grid {
gap: 20px;
}
/* Center the Dimension Scores block and chart on mobile */
.dimension-scores {
align-items: center;
text-align: center;
}
.dimension-scores .chart-container {
margin: 0 auto;
}
.result-page-wrapper {
max-width: calc(100% - 28px);
padding: 22px 18px;
margin: 20px auto;
}
.result-area {
padding: 22px 14px;
}
.tier-section-title {
font-size: 18px;
margin-bottom: 12px;
}
.tier-steps {
gap: 6px;
margin-top: 6px;
}
.tier-step {
padding: 12px 0;
}
.tier-step-stat {
font-size: 12px;
}
.tier-step-labels {
gap: 6px;
margin-top: 10px;
}
.tier-step-labels span {
font-size: 13px;
}
.dimension-scores h3 {
font-size: 1rem;
margin-bottom: 10px;
}
.dimension-scores .chart-container {
min-height: 240px;
max-height: min(320px, 90vw);
}
.tier-banner {
width: 100%;
max-width: 100%;
font-size: 20px;
padding: 8px 20px;
}
}
/* Small phone: minimal margins, compact typography */
@media (max-width: 480px) {
.result-grid {
gap: 18px;
}
/* Compact, thumb-friendly buttons on small screens */
.nav-button,
.confirmation-card .nav-button {
padding: 11px !important;
}
.tier-banner {
width: 100%;
font-size: 18px;
padding: 6px 16px;
}
.tier-description {
padding: 12px;
margin-top: 14px;
}
.tier-description-text {
font-size: 13px;
}
.result-page-wrapper {
max-width: calc(100% - 24px);
padding: 20px 16px;
margin: 16px auto;
}
.result-area {
padding: 20px 12px;
}
.tier-name-box {
font-size: 22px;
padding: 6px 16px;
margin-bottom: 24px;
}
.tier-card p {
font-size: 18px;
}
.tier-section-title {
font-size: 17px;
margin-bottom: 10px;
}
.tier-steps {
gap: 4px;
margin-top: 4px;
}
.tier-step {
padding: 10px 2px;
}
.tier-step-stat {
font-size: 11px;
}
.tier-step-labels {
gap: 4px;
margin-top: 8px;
}
.tier-step-labels span {
font-size: 11px !important;
line-height: 1.2;
}
.dimension-scores h3 {
font-size: 0.95rem;
margin-bottom: 8px;
}
.dimension-scores .chart-container {
min-height: 220px;
max-height: min(280px, 92vw);
}
}
/* Ultra-small devices (e.g. 320px width) */
@media (max-width: 360px) {
.result-page-wrapper {
max-width: calc(100% - 16px);
padding: 18px 12px;
margin: 12px auto;
}
.result-area {
padding: 16px 8px;
}
.result-grid {
gap: 14px;
}
.tier-name-box {
font-size: 20px;
padding: 6px 12px;
margin-bottom: 18px;
}
.tier-banner {
font-size: 16px;
padding: 6px 12px;
}
.tier-section-title {
font-size: 16px;
margin-bottom: 8px;
}
.tier-description {
padding: 10px;
margin-top: 10px;
}
.tier-description-text {
font-size: 12px;
line-height: 1.3;
}
.tier-card p {
font-size: 16px;
}
.tier-steps {
gap: 3px;
margin-top: 4px;
}
.tier-step {
padding: 8px 0;
}
.tier-step-stat {
font-size: 10px;
}
.tier-step-labels {
gap: 3px;
margin-top: 6px;
}
.tier-step-labels span {
font-size: 13px !important;
}
.dimension-scores h3 {
font-size: 0.9rem;
margin-bottom: 6px;
}
.dimension-scores .chart-container {
min-height: 200px;
max-height: min(240px, 95vw);
}
}
.tier-card p {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
margin: 0 0 16px 0;
}
.tier-name-box {
background-color: var(--tier-color);
display: flex;
padding: 8px 24px;
justify-content: center;
align-items: center;
gap: 8px;
color: var(--text-color-inverse);
font-family: var(--main-font);
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%;
margin-bottom: 40px;
border-radius: 0;
}
.tier-name {
font-size: 1.5em;
color: white;
margin: 0;
font-weight: bold;
letter-spacing: 1px;
}
.tier-description {
background-color: var(--tier-color-light);
padding: 15px;
border-radius: 6px;
margin-top: 20px;
transition: background-color 0.3s;
overflow-wrap: break-word;
word-wrap: break-word;
}
.tier-description h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.2em;
}
.tier-description p {
font-size: 1em;
line-height: 1.5;
color: #333;
}
.dimension-scores h3 {
text-align: left;
margin-top: 0;
font-weight: 600;
margin-bottom: 12px;
}
.dimension-scores canvas {
margin-top: 0;
}
.recommendations {
padding: 0;
border-radius: 8px;
width: 100%;
}
.recommendations h3 {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
margin-top: 0;
margin-bottom: 24px;
}
.recommendations .icon {
margin-right: 10px;
}
.recommendations ol {
padding-left: 0;
list-style: none;
width: 100%;
}
.recommendations li {
margin-bottom: 15px;
line-height: 1.6;
display: flex;
align-items: flex-start;
text-align: left;
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 16px;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
flex: 1;
min-width: 0;
max-width: 100%;
}
.recommendations li::before {
content: counter(list-item);
counter-increment: list-item;
background-color: var(--tier-color);
display: flex;
width: 32px;
height: 32px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
aspect-ratio: 1/1;
color: var(--text-color-inverse);
font-family: var(--main-font);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-right: 15px;
flex-shrink: 0;
transition: background-color 0.3s;
}
/* Style paragraph tags inside recommendation list items */
.recommendations li p {
padding: 0;
display: block;
flex: 1;
min-width: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
}
/* Specific styling for Building AI recommendation text paragraphs */
.recommendations li p.recommendation-text {
margin: 0 !important;
}
/* Ensure bold label wraps naturally at word boundaries without splitting */
.recommendations li strong {
font-weight: 700;
color: var(--neutral-600);
font-family: var(--main-font);
display: inline;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
word-wrap: break-word;
/* Prevent word splitting - only break at word boundaries */
hyphens: none;
}
/* Keep recommendation label (bold text) and first word together on one line */
.recommendation-label-text {
white-space: nowrap;
display: inline;
flex-shrink: 0;
margin-right: 4px;
}
/* Style links within recommendations - natural text flow with proper word boundaries */
.recommendations li a {
color: var(--tier-color);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
font-weight: 500;
display: inline;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
word-wrap: break-word;
}
.recommendations li a:hover,
.recommendations li a:focus {
color: var(--tier-color-active);
text-decoration-color: var(--tier-color-active);
outline: 2px solid var(--tier-color);
outline-offset: 2px;
border-radius: 2px;
}
.recommendations li a:visited {
color: var(--tier-color-visited);
}
.recommendations li a:active {
color: #660000;
}
.section-separator {
width: 100%;
max-width: 1065px;
height: 1px;
background: #CCC;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
margin: 24px auto;
}
.elevate-section {
margin-bottom: 0;
}
.elevate-section h3 {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 120%;
margin-bottom: 12px;
}
.elevate-section p {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 135%;
margin-bottom: 24px;
}
.module-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
margin-top: 20px;
max-width: 100%;
}
/* Ensure exactly 4 columns on larger screens (desktop) */
@media (min-width: 1200px) {
.module-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
}
/* 2x2 layout on tablets (medium screens) */
@media (max-width: 1199px) and (min-width: 768px) {
.module-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* Single column on mobile (small screens) */
@media (max-width: 768px) {
.module-grid {
grid-template-columns: 1fr;
gap: 15px;
}
}
.module-card {
border: 1px solid #e0e0e0;
border-radius: 0;
padding: 20px;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
background-color: #F5F5F5;
}
.module-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.module-icon {
display: none;
}
.module-title {
font-weight: 600;
font-size: 1.1em;
padding-bottom: 8px;
color: var(--neutral-600);
}
.module-description {
font-weight: 500;
font-size: 0.9em;
}
/* Summary text after module grid */
.module-grid-summary {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.6;
margin-top: 32px;
margin-bottom: 0;
text-align: left;
max-width: 100%;
padding: 0;
}
/* Bold styling for tier names in summary text */
.module-grid-summary strong {
font-weight: 700;
color: var(--neutral-600);
font-family: var(--main-font);
}
/* Responsive adjustments for summary text */
@media (max-width: 768px) {
.module-grid-summary {
font-size: 14px;
line-height: 1.5;
margin-top: 24px;
text-align: left;
padding: 0 10px;
}
}
.result-footer {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
/* Allow buttons to wrap on smaller screens */
}
.result-footer .nav-button.secondary {
background: var(--neutral-100);
color: var(--neutral-600);
border: 1px solid var(--neutral-600);
display: inline-flex;
align-items: center;
gap: 14px;
}
.result-footer .share-btn img,
.result-footer .download-btn img {
width: 20px;
height: 20px;
display: inline-block;
}
/* Force download & contact buttons to brand red */
.result-footer .download-btn {
background: var(--tier-color);
border: 1px solid var(--tier-color);
}
.result-footer .contact-btn {
background: var(--tier-color) !important;
border: 1px solid var(--tier-color) !important;
color: var(--text-color-inverse) !important;
}
/* NEW: Secondary footer for less prominent actions */
.result-footer-secondary {
display: none;
}
/* Share and Download buttons styling */
.share-btn,
.download-btn {
border-radius: 0;
color: var(--text-color-inverse);
font-family: var(--main-font);
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: normal;
letter-spacing: 1.05px;
text-transform: uppercase;
}
.nav-button-link {
background: none;
border: none;
color: #555;
text-decoration: underline;
cursor: pointer;
font-size: 0.9em;
padding: 0;
font-family: inherit;
}
.nav-button {
padding: 12px 25px;
border: 1px solid var(--tier-color);
border-radius: 0;
background-color: var(--tier-color);
color: white;
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s, color 0.2s, opacity 0.2s;
text-decoration: none;
/* For tags styled as buttons */
display: inline-block;
/* For tags */
}
.nav-button-link:hover {
color: var(--tier-color);
}
.nav-button:hover {
opacity: 0.85;
}
.nav-button.secondary {
background-color: var(--tier-color);
color: var(--text-color-inverse);
border: 1px solid #ccc;
border-radius: 0;
font-family: var(--main-font);
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: normal;
letter-spacing: 1.05px;
text-transform: uppercase;
}
.nav-button.secondary:hover {
background-color: var(--color-light-grey);
opacity: 1;
}
.result-area {
text-align: center;
}
.result-area--confirmation {
position: relative;
max-width: 960px;
margin: 0 auto;
z-index: 2;
}
/* Responsive refinements for result-area and confirmation layout */
@media (max-width: 768px) {
.result-area {
padding: 24px 16px;
}
.result-area--confirmation {
max-width: 100%;
padding: 0 16px;
box-sizing: border-box;
}
}
@media (max-width: 480px) {
.result-area {
padding: 20px 12px;
}
.result-area--confirmation {
padding: 0 12px;
}
}
/* Confirmation Card */
.confirmation-card {
max-width: 590px;
margin: 60px auto;
background: var(--neutral-100);
border: 1px solid #e5e7eb;
border-top: 4px solid var(--tier-color);
border-radius: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
/**
* Confirmation Page Bubble Decoration
*
* Positioned outside assessment-app container for proper layering.
* Uses fixed positioning relative to viewport for consistent placement
* across different screen sizes and scroll positions.
*
* Best Practices:
* - Fixed positioning for viewport-relative placement
* - Proper z-index to appear above content but below modals
* - Responsive scaling for mobile devices
* - Hardware acceleration via transform for smooth rendering
* - Accessibility: decorative only, hidden from screen readers
* - Pointer events disabled to prevent interaction interference
*/
.confirmation-page-bubble {
position: fixed;
/* Default desktop position: anchored near top-right like bubble-decoration */
top: 81px;
right: -70px;
z-index: 1;
/* below modals, above page background */
/* Above content but below modals/toasts (z-index: 9999) */
pointer-events: none;
/* Enable hardware acceleration for smooth rendering */
will-change: transform;
/* Prevent layout shifts */
contain: layout style paint;
/* Rotation transform for visual enhancement */
transform: rotate(18.687deg);
/* Set rotation origin to center for natural rotation */
transform-origin: center center;
}
.confirmation-page-bubble img {
display: block;
/* Match HTML width/height attributes (436x436) for original image size */
width: 436px;
height: 436px;
max-width: none;
/* Preserve aspect ratio */
object-fit: contain;
/* Optimize rendering quality */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
/* Enable hardware acceleration */
will-change: auto;
/* Prevent subpixel rendering issues */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Large laptop / small desktop: pull slightly into the viewport */
@media (max-width: 1200px) {
.confirmation-page-bubble img {
/* Proportional scaling: ~93% of base size (436px) */
width: 405px;
height: 405px;
}
}
/* Tablet: keep in the top-right corner, smaller size */
@media (max-width: 768px) {
.confirmation-page-bubble img {
/* Smaller size on tablet/mobile so it doesn't overpower the card */
width: 300px;
height: 300px;
}
}
/* Small phones: anchor to very top-right, even smaller */
@media (max-width: 480px) {
.confirmation-page-bubble img {
/* Further reduce bubble size for very small screens */
width: 220px;
height: 220px;
}
}
/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
.confirmation-page-bubble {
will-change: auto;
}
.confirmation-page-bubble img {
will-change: auto;
}
}
.confirmation-card__body {
padding: 40px 40px 24px 40px;
text-align: center;
}
.confirmation-card__title {
margin: 0 0 24px 0;
color: var(--neutral-600);
font-weight: bold;
font-size: 32px;
line-height: 1.2;
letter-spacing: -0.02em;
}
.confirmation-card__subtitle {
margin: 0 0 0 0;
color: var(--neutral-600);
font-size: 16px;
line-height: 1.6;
font-weight: 400;
}
.confirmation-card__actions {
display: flex;
justify-content: center;
gap: 16px;
padding: 0 40px 40px 40px;
}
.confirmation-card .nav-button {
min-width: 160px;
padding: 10px 20px;
font-family: var(--main-font);
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: normal;
letter-spacing: 1.05px;
text-transform: uppercase;
border-radius: 0;
transition: all 0.3s ease;
cursor: pointer;
outline: none;
}
.confirmation-card .nav-button.secondary {
background: var(--neutral-100);
color: var(--neutral-600);
border: 1px solid var(--neutral-600);
font-weight: 800;
}
.confirmation-card .nav-button.secondary:hover {
background: #f9fafb;
border-color: var(--neutral-600);
transform: translateY(-1px);
color: var(--neutral-600);
}
.confirmation-card .nav-button:not(.secondary) {
background: var(--tier-color);
color: var(--text-color-inverse);
border: 2px solid var(--tier-color);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 800;
}
.confirmation-card .nav-button:not(.secondary):hover {
background: var(--tier-color-hover);
border-color: var(--tier-color-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.25);
}
.confirmation-card .nav-button:focus-visible {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
}
/* Generate Report button arrow icon styling */
.confirmation-card .nav-button .btn-arrow-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform 0.2s ease;
stroke: currentColor;
}
.confirmation-card .nav-button:hover .btn-arrow-icon {
transform: translateX(2px);
}
.confirmation-card .nav-button:not(.secondary) .btn-arrow-icon {
color: var(--text-color-inverse);
}
@media (prefers-contrast: high) {
.confirmation-card {
border-width: 2px;
}
.confirmation-card .nav-button {
border-width: 2px;
}
}
@media (max-width: 640px) {
.confirmation-card__body {
padding: 32px 24px 24px 24px;
}
.confirmation-card__title {
font-size: 24px;
}
.confirmation-card__subtitle {
font-size: 15px;
}
.confirmation-card__actions {
flex-direction: column;
gap: 12px;
padding: 0 24px 32px 24px;
}
.confirmation-card .nav-button {
min-width: auto;
width: 100%;
}
}
.navigation-controls .nav-button {
background-color: var(--neutral-100);
color: #333;
border: 1px solid #ccc;
}
.navigation-controls .nav-button:hover {
background-color: var(--color-light-grey);
}
.navigation-controls .nav-button#generate-btn {
background-color: var(--tier-color);
color: white;
border-color: var(--tier-color);
}
.navigation-controls .nav-button#generate-btn:hover {
opacity: 0.85;
}
/* New theme for the "Integrating" tier */
.result-page-wrapper.theme-scaler {
/* Unified tier color on report page */
--tier-color: #CC0000;
--tier-color-light: #CC0000;
--tier-color-hover: #CC0000;
--tier-color-active: #CC0000;
--tier-color-visited: #CC0000;
}
/* --- Stepped Tier Chart Styles (4 Tiers) --- */
.tier-chart-container {
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 15px;
height: 350px;
padding: 0px 10px 20px;
margin-bottom: 10px;
border-bottom: 2px solid var(--color-light-grey);
}
.tier-chart-item {
display: flex;
flex-direction: column;
align-items: center;
width: 22%;
}
/* MODIFIED: Your new height rules for each tier item */
.tier-chart-item:nth-child(1) {
height: 40%;
}
.tier-chart-item:nth-child(2) {
height: 60%;
}
.tier-chart-item:nth-child(3) {
height: 80%;
}
.tier-chart-item:nth-child(4) {
height: 100%;
}
.tier-chart-bar {
width: 100%;
background-color: var(--color-light-grey);
border-radius: 4px 4px 0 0;
position: relative;
flex-grow: 1;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 10px;
}
/* FIX: The fill element now takes 100% of its parent's height */
.tier-chart-bar::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
/* This is the key change */
background-color: transparent;
border-radius: 4px 4px 0 0;
transition: background-color 0.4s ease-in-out;
}
.tier-chart-icon {
font-size: 2em;
color: #888;
transition: color 0.4s;
z-index: 1;
}
.tier-chart-label {
font-weight: 500;
color: #888;
margin-top: 10px;
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 0.5px;
width: 100%;
text-align: center;
padding: 5px 0;
position: relative;
}
/* This rule now works correctly because the ::before element has a height */
.tier-chart-item.active .tier-chart-bar::before {
background-color: var(--tier-color);
}
.tier-chart-item.active .tier-chart-icon {
color: white;
}
.tier-chart-item.active .tier-chart-label {
color: var(--color-dark-text);
font-weight: bold;
}
.tier-chart-item.active .tier-chart-label::after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 5px;
background-color: var(--tier-color);
}
/* --- Answer Log Styles --- */
.answers-log-container {
margin-top: 30px;
border: 1px solid #e0e0e0;
border-radius: 8px;
max-height: 40vh;
overflow-y: auto;
padding: 0 30px;
background-color: #f8f9fa;
}
.answers-log-container h3 {
text-align: center;
color: var(--color-dark-text);
border-bottom: 2px solid var(--color-light-grey);
margin: 0;
padding: 20px 0 10px 0;
position: sticky;
top: 0;
background-color: #f8f9fa;
z-index: 10;
}
.log-section-title {
color: var(--color-dark-text);
font-size: 1.1em;
margin: 25px 0 15px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--tier-color);
}
.log-item {
padding: 15px 0;
border-bottom: 1px solid #e0e0e0;
}
.log-item:last-child {
border-bottom: none;
}
.log-question {
font-weight: 600;
color: #333;
margin: 0 0 10px 0;
line-height: 1.4;
}
.log-answer {
font-weight: 400;
color: #555;
margin: 0;
padding-left: 15px;
border-left: 3px solid var(--tier-color);
line-height: 1.5;
}
/* --- NEW: Styles for Checkbox with Rating --- */
.rating-options-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.rating-option-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
transition: border-color 0.2s;
}
.rating-option-row.selected {
border-color: var(--tier-color);
}
.rating-option-label {
cursor: default;
font-size: 1em;
flex-grow: 1;
margin-right: 15px;
}
.rating-dots {
display: flex;
gap: 8px;
}
/* MODIFIED: This is now a numbered circle */
.rating-dot {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #e0e0e0;
color: white;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
}
/* Hover effect */
.rating-dot:hover {
transform: scale(1.1);
background-color: var(--tier-color);
opacity: 0.7;
}
/* Active state */
.rating-dot.active {
background-color: var(--tier-color);
opacity: 1;
}
/* --- NEW: Styles for Disabled Rating Option --- */
.rating-option-row.disabled {
opacity: 0.5;
background-color: #f8f9fa;
pointer-events: none;
/* Disables all clicks on the row */
}
/* Allow the "None of the above" option to be clickable even when others are disabled */
.rating-option-row.is-none-option {
pointer-events: auto;
}
/* --- NEW: Styles for "Other" Text Input --- */
.other-text-input {
width: 100%;
margin-top: 10px;
padding: 12px 15px;
border: 1px solid #ced4da;
border-radius: 0;
font-size: 1em;
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.2s;
}
.other-text-input:focus {
outline: none;
border-color: var(--tier-color);
}
.other-text-input.error {
border-color: #dc3545;
/* Red border for validation error */
}
.other-error-message {
color: #dc3545;
font-size: 0.8em;
margin-top: 5px;
text-align: left;
}
/* --- NEW: Fixes for Option Layout and "Other" Input --- */
.options-grid>div {
display: flex;
flex-direction: column;
}
.other-text-input {
width: 100%;
margin-top: 10px;
padding: 12px 15px;
border: 1px solid #ced4da;
border-radius: 0;
font-size: 1em;
font-family: inherit;
box-sizing: border-box;
transition: border-color 0.2s;
}
.other-text-input:focus {
outline: none;
border-color: var(--tier-color);
}
.other-text-input.error {
border-color: #dc3545;
/* Red border for validation error */
}
/* Styles for PDF Export Preparation - Clean Professional Layout */
.pdf-export-prepare {
/* Optimize for clean single A4 page layout */
width: 800px !important;
min-height: auto !important;
max-height: 1100px !important;
background-color: var(--neutral-100) !important;
box-shadow: none !important;
border: none !important;
overflow: visible !important;
padding: 12px !important;
box-sizing: border-box !important;
font-size: 11px !important;
line-height: 1.4 !important;
page-break-inside: avoid;
font-family: var(--main-font);
}
/* PDF header tightening */
.pdf-export-prepare .report-header {
margin-bottom: 10px !important;
}
.pdf-export-prepare .report-title {
font-size: 18px !important;
}
/* Hide elements that might cause overflow */
.pdf-export-prepare .result-footer,
.pdf-export-prepare .result-footer-secondary {
display: none !important;
}
/* Clean content spacing for professional layout */
.pdf-export-prepare .result-grid {
margin-bottom: 20px !important;
gap: 20px !important;
page-break-inside: avoid;
}
.pdf-export-prepare .result-col {
padding: 15px !important;
page-break-inside: avoid;
break-inside: avoid;
border: 1px solid #e0e0e0 !important;
border-radius: 8px !important;
background: #fafafa !important;
}
.pdf-export-prepare .tier-name-box {
padding: 8px 16px !important;
margin-bottom: 12px !important;
border-radius: 6px !important;
text-align: center !important;
}
.pdf-export-prepare .tier-name {
font-size: 1.3em !important;
font-weight: 700 !important;
margin: 0 !important;
}
.pdf-export-prepare .tier-description {
padding: 10px !important;
margin-top: 10px !important;
background: #f8f9fa !important;
border-radius: 6px !important;
font-size: 0.9em !important;
line-height: 1.4 !important;
}
.pdf-export-prepare .tier-description h3 {
font-size: 0.9em !important;
margin-bottom: 3px !important;
}
.pdf-export-prepare .tier-description p {
font-size: 0.8em !important;
line-height: 1.2 !important;
}
.pdf-export-prepare .dimension-scores h3 {
font-size: 0.9em !important;
margin-bottom: 8px !important;
}
.pdf-export-prepare .recommendations {
margin-bottom: 6px !important;
padding: 6px !important;
}
.pdf-export-prepare .recommendations h3 {
font-size: 11px !important;
margin-bottom: 3px !important;
}
.pdf-export-prepare .recommendations li {
font-size: 8px !important;
margin-bottom: 1px !important;
line-height: 1.1 !important;
align-items: flex-start !important;
text-align: left !important;
}
/* Keep recommendation label and first word together in PDF export */
.pdf-export-prepare .recommendation-label-text {
white-space: nowrap !important;
display: inline !important;
}
/* Ensure bold styling in PDF export - prevent word splitting */
.pdf-export-prepare .recommendations li strong {
font-weight: 700 !important;
color: #555 !important;
font-family: var(--main-font);
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
}
.pdf-export-prepare .elevate-section {
margin-bottom: 0 !important;
padding: 15px !important;
background: #f8f9fa !important;
border-radius: 8px !important;
border: 1px solid #e0e0e0 !important;
}
.pdf-export-prepare .elevate-section h3 {
font-size: 1.1em !important;
margin-bottom: 8px !important;
color: #333 !important;
font-weight: 600 !important;
}
.pdf-export-prepare .elevate-section p {
font-size: 0.9em !important;
margin-bottom: 8px !important;
line-height: 1.4 !important;
color: #555 !important;
}
/* Summary text styling for PDF export */
.pdf-export-prepare .module-grid-summary {
font-size: 0.85em !important;
margin-top: 10px !important;
margin-bottom: 0 !important;
line-height: 1.4 !important;
color: #555 !important;
text-align: left !important;
padding: 0 5px !important;
}
/* Bold styling for tier names in PDF export summary text */
.pdf-export-prepare .module-grid-summary strong {
font-weight: 700 !important;
color: #555 !important;
font-family: var(--main-font);
}
/* Clean module grid layout - professional 4x1 design (4 boxes in 1 line) */
.pdf-export-prepare .module-grid {
margin-bottom: 12px !important;
margin-top: 12px !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
page-break-inside: avoid;
display: grid !important;
width: 100% !important;
align-items: stretch !important;
}
.pdf-export-prepare .module-card {
padding: 8px !important;
page-break-inside: avoid;
break-inside: avoid;
min-height: 90px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
overflow: visible !important;
word-wrap: break-word !important;
border-radius: 8px !important;
border: 1px solid #e0e0e0 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
/* Ensure all 4 module cards are visible */
.pdf-export-prepare .module-card:nth-child(1),
.pdf-export-prepare .module-card:nth-child(2),
.pdf-export-prepare .module-card:nth-child(3),
.pdf-export-prepare .module-card:nth-child(4) {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.pdf-export-prepare .module-icon {
font-size: 1.5em !important;
margin-bottom: 6px !important;
line-height: 1 !important;
}
.pdf-export-prepare .module-title {
font-size: 0.9em !important;
padding-bottom: 3px !important;
margin-bottom: 3px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
color: #333 !important;
}
.pdf-export-prepare .module-description {
font-size: 0.75em !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
color: #666 !important;
}
/* Optimize tier chart for single page PDF */
.pdf-export-prepare .tier-chart-container {
height: 120px !important;
padding: 0px 3px 5px !important;
margin-bottom: 6px !important;
page-break-inside: avoid;
}
.pdf-export-prepare .tier-chart-label {
font-size: 0.6em !important;
margin-top: 3px !important;
}
.pdf-export-prepare .tier-chart-icon {
font-size: 1em !important;
}
/* Add page break controls for better PDF layout */
.pdf-export-prepare .recommendations,
.pdf-export-prepare .elevate-section,
.pdf-export-prepare .module-grid {
page-break-inside: avoid;
break-inside: avoid;
}
/* Ensure proper spacing between sections - optimized for single page */
.pdf-export-prepare .recommendations {
margin-bottom: 8px !important;
}
.pdf-export-prepare .elevate-section {
margin-bottom: 0 !important;
}
/* Better text rendering for PDF */
.pdf-export-prepare * {
-webkit-print-color-adjust: exact !important;
-webkit-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* Additional single-page optimizations */
.pdf-export-prepare .result-page-wrapper {
margin: 0 !important;
padding: 0 !important;
}
.pdf-export-prepare .result-page-wrapper>* {
margin-bottom: 4px !important;
}
.pdf-export-prepare .result-page-wrapper>*:last-child {
margin-bottom: 0 !important;
}
/* Optimize canvas size for radar chart */
.pdf-export-prepare .dimension-scores .chart-container {
min-height: 0 !important;
max-height: 180px !important;
aspect-ratio: auto !important;
height: 180px !important;
}
.pdf-export-prepare #result-radar-chart {
width: 180px !important;
height: 180px !important;
}
/* Compact list styling */
.pdf-export-prepare .recommendations ol {
margin: 0 !important;
padding-left: 12px !important;
}
.pdf-export-prepare .recommendations li::before {
width: 16px !important;
height: 16px !important;
line-height: 16px !important;
font-size: 9px !important;
margin-right: 6px !important;
}
/* Ensure module grid container is properly sized */
.pdf-export-prepare .elevate-section {
overflow: visible !important;
max-height: none !important;
}
/* Force module grid to show all 4 cards in 4x1 layout (single row) */
.pdf-export-prepare .module-grid::after {
content: "" !important;
display: none !important;
}
/* Additional module card visibility fixes */
.pdf-export-prepare .module-card {
position: relative !important;
z-index: 1 !important;
}
/* Ensure module text is fully visible and not truncated */
.pdf-export-prepare .module-card * {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
max-width: none !important;
width: auto !important;
}
/* Specific fixes for module titles and descriptions */
.pdf-export-prepare .module-title,
.pdf-export-prepare .module-description {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
max-width: none !important;
width: 100% !important;
display: block !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
}
/* Ensure module grid container allows full content */
.pdf-export-prepare .elevate-section {
overflow: visible !important;
max-height: none !important;
min-height: auto !important;
}
/* Force module grid to accommodate all content */
.pdf-export-prepare .module-grid {
overflow: visible !important;
max-height: none !important;
min-height: auto !important;
}
/* ===============================================
Tier Section Design (Based on Attached Image)
=============================================== */
/* Tier progression bar */
.tier-progression {
display: flex;
width: 100%;
margin-top: 20px;
}
.tier-segment {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 8px;
position: relative;
}
.tier-segment.inactive {
background-color: #f5f5f5;
color: var(--neutral-600);
}
.tier-segment.active {
background-color: var(--tier-color);
color: var(--text-color-inverse);
}
.tier-segment:not(:last-child) {
border-right: 1px solid #e0e0e0;
}
.tier-percentage {
font-family: var(--main-font);
font-size: 12px;
font-weight: 600;
margin-bottom: 4px;
}
.tier-segment-name {
font-family: var(--main-font);
font-size: 12px;
font-weight: 600;
text-align: center;
}
/* Tier description box */
.tier-description {
background-color: #f5f5f5;
padding: 16px 20px;
border-radius: 0;
margin: 16px 0;
position: relative;
}
.tier-description::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #f5f5f5;
}
.tier-description-text {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 14px;
font-weight: 400;
line-height: 1.4;
margin: 0;
text-align: left;
}
/* Tier banner styling: responsive width so it doesn't overflow on small screens */
.tier-banner {
background-color: var(--tier-color);
width: min(47%, 320px);
min-width: fit-content;
max-width: 100%;
color: var(--text-color-inverse);
font-family: var(--main-font);
font-size: 23px;
font-style: normal;
font-weight: 700;
line-height: 120%;
display: flex;
padding: 8px 24px;
justify-content: center;
align-items: center;
gap: 8px;
box-sizing: border-box;
}
/* Align the speech pointer under the active tier (0..3) */
.tier-description.desc-pos-0::after {
left: 12.5%;
}
.tier-description.desc-pos-1::after {
left: 37.5%;
}
.tier-description.desc-pos-2::after {
left: 62.5%;
}
.tier-description.desc-pos-3::after {
left: 87.5%;
}
/* Tighten radar chart spacing */
.dimension-scores h3 {
margin-bottom: 8px;
}
/* Current tier badge */
.current-tier-badge {
background-color: var(--tier-color);
color: var(--text-color-inverse);
padding: 8px 24px;
border-radius: 4px;
display: inline-block;
margin: 8px 0;
}
.current-tier-text {
font-family: var(--main-font);
font-size: 18px;
font-weight: 700;
text-align: center;
}
/* Tier section title */
.tier-section-title {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 20px;
font-weight: 600;
margin-bottom: 16px;
}
/* Simple 4-step percentage bar (matches attached design) */
.tier-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
width: 100%;
margin: 8px 0 0 0;
}
.tier-step {
background: #EDEDED;
color: var(--neutral-600);
text-align: center;
padding: 16px 0;
font-family: var(--main-font);
font-weight: 800;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease, color 0.3s ease;
}
.tier-step.active {
background: var(--tier-color);
color: var(--text-color-inverse);
}
.tier-step-stat {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
display: block;
}
.tier-step-labels {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 12px;
}
.tier-step-labels span {
text-align: center;
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 16px;
font-weight: 600;
}
.tier-step-labels span.active {
color: var(--tier-color);
}
/* ===============================================
Landing Page Styles (src/pages/index.html)
=============================================== */
/* --- 1. Best Practices: Global Styles & CSS Variables --- */
:root {
/* Color Palette */
--bg-light: #ffffff;
--bg-gray: #f0f0f0;
--bg-dark: #333333;
--text-primary: #333333;
--text-secondary: #555555;
--text-light: #ffffff;
--border-color: #e0e0e0;
--accent-color: #d9534f;
/* Red color for titles */
--icon-bg-color: #f0f0f0;
}
/* Professional Font Optimization - GOAT Level Implementation */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Lato Light'), local('Lato-Light'),
url('https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'),
url('https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Lato Bold'), local('Lato-Bold'),
url('https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 900;
font-display: swap;
src: local('Lato Black'), local('Lato-Black'),
url('https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Enhanced Typography System */
:root {
/* Professional Lato Font Family - GOAT Level Implementation */
--font-primary: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-bold: 700;
--font-weight-black: 900;
/* Typography Scale */
--font-size-xs: 0.75rem;
/* 12px */
--font-size-sm: 0.875rem;
/* 14px */
--font-size-base: 1rem;
/* 16px */
--font-size-lg: 1.125rem;
/* 18px */
--font-size-xl: 1.25rem;
/* 20px */
--font-size-2xl: 1.5rem;
/* 24px */
--font-size-3xl: 1.875rem;
/* 30px */
--font-size-4xl: 2.25rem;
/* 36px */
--font-size-5xl: 3rem;
/* 48px */
/* Line Heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Layout - Optimized for 1440px design */
--container-width: 1440px;
--content-width: 1280px;
/* Max width for inner content */
--container-padding: 5rem;
--main-content-padding: 6rem;
}
/* A modern CSS reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--main-font);
color: var(--text-primary);
background-color: #f5f5f5;
line-height: 1.6;
font-feature-settings: "kern"1, "liga"1, "calt"1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Required for absolute positioning of bubble decoration */
position: relative;
min-height: 100vh;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--main-font);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-top: 0;
color: var(--text-primary);
font-feature-settings: "kern"1, "liga"1, "calt"1;
text-rendering: optimizeLegibility;
}
/* Ensure all text elements use Lato font */
p, span, div, a, button, input, textarea, select, label, li, td, th {
font-family: var(--main-font);
}
/* Specific elements that need explicit font family */
.landing-page__logo,
.landing-page__site-nav a,
.landing-page__intro-left-content p,
.landing-page__info-box h2,
.landing-page__steps-list li,
.landing-page__reason-item h3,
.landing-page__reason-item p,
.landing-page__cta-content h2,
.landing-page__btn,
.landing-page__footer-links a,
.landing-page__footer-copyright {
font-family: var(--main-font);
}
h2 {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
}
h3 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
}
main {
display: block;
}
/* --- 2. Shared Components (Buttons) --- */
.landing-page__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
background-color: var(--tier-color);
color: var(--text-light);
padding: 12px 20px;
border: none;
cursor: pointer;
font-size: 16px;
font-weight: 800;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 0;
box-shadow:
0 6px 16px rgba(204, 0, 0, 0.4),
0 2px 4px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.landing-page__btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.landing-page__btn:hover {
background-color: var(--tier-color-hover);
transform: translateY(-2px);
box-shadow:
0 8px 24px rgba(204, 0, 0, 0.5),
0 4px 8px rgba(0, 0, 0, 0.3);
}
.landing-page__btn:hover::before {
left: 100%;
}
.landing-page__btn:active {
transform: translateY(0);
transition: all 0.1s ease;
}
/* --- 3. Unified Hero Section - GOAT Level Professional Implementation --- */
.landing-page__unified-hero {
position: relative;
/* Let content dictate height but keep a strong hero presence */
min-height: min(821px, 100vh);
height: auto;
background-image: url('/ai-infrastructure-readiness/assets/images/first-row.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
/* Avoid clipping vertical content; horizontal overflow handled globally */
overflow-x: hidden;
overflow-y: visible;
display: flex;
flex-direction: column;
}
/* Enhanced fixed height optimization for professional appearance */
.landing-page__unified-hero {
/* Ensure proper stacking context */
isolation: isolate;
/* Optimize for fixed height */
contain: layout style;
}
/* Ensure content fits within fixed height */
.landing-page__intro-left-content,
.landing-page__info-box {
max-height: 100%;
overflow: visible;
}
/* Header within unified hero - Ultra Clean Transparent Design */
.landing-page__hero-header {
position: relative;
z-index: 3;
background: transparent;
}
/* Enhanced focus indicators for ultra clean transparent header */
.landing-page__site-nav a:focus {
outline: 2px solid var(--neutral-100);
outline-offset: 4px;
background: rgba(204, 0, 0, 0.8);
color: var(--text-color-inverse);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.3);
}
/* Smooth scrolling optimization */
@media (prefers-reduced-motion: no-preference) {
.landing-page__hero-header {
transition: background-color 0.3s ease;
}
}
.landing-page__header-container {
max-width: var(--container-width);
margin-left: auto;
margin-right: auto;
padding: 2.5rem var(--container-padding) 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
gap: 1rem;
}
.landing-page__header-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
/* Language switcher on dark hero: frosted control (quiz header uses light background) */
.landing-page .lang-switcher {
position: relative;
z-index: 5;
margin-left: 0;
}
.landing-page .lang-switcher__toggle {
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.32);
color: var(--text-color-inverse);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.landing-page .lang-switcher__toggle:hover {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.45);
}
.landing-page .lang-switcher__chevron {
color: var(--text-color-inverse);
}
/* Professional Logo Styling - Enhanced for Ultra Clean Design */
.landing-page__logo {
display: flex;
align-items: center;
position: relative;
/* Performance optimization */
contain: layout style;
will-change: transform;
}
.landing-page__logo-image {
width: 225px;
height: 44px;
object-fit: contain;
transition: opacity 0.3s ease, transform 0.3s ease;
/* Slight brightness/contrast boost so logo color stays vivid on dark hero */
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) brightness(1.08) contrast(1.05);
}
.landing-page__logo-image:hover {
opacity: 0.9;
transform: scale(1.02);
}
/* Enhanced focus indicators for logo accessibility */
.landing-page__logo-image:focus {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
border-radius: 4px;
}
.landing-page__site-nav a {
text-decoration: none;
color: var(--text-color-inverse);
font-weight: 600;
transition: all 0.3s ease;
padding: 0.875rem 1.5rem;
border-radius: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.landing-page__site-nav a:hover {
color: var(--text-color-inverse);
background: rgba(204, 0, 0, 0.9);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(204, 0, 0, 0.4);
}
/* Main hero content */
.landing-page__hero-content {
flex: 1;
display: flex;
position: relative;
z-index: 2;
min-height: 0;
/* Allow flex item to shrink */
align-items: center;
/* Center content vertically */
}
/* Ensure all content is properly positioned */
.landing-page__unified-hero>* {
position: relative;
}
.landing-page__intro-left,
.landing-page__intro-right {
flex: 1 1 50%;
padding: var(--main-content-padding);
display: flex;
align-items: center;
background: transparent;
/* Remove individual backgrounds */
min-height: 0;
/* Allow flex items to shrink without clipping text */
overflow: visible;
}
.landing-page__intro-left {
justify-content: flex-end;
}
.landing-page__intro-left-content {
max-width: 547px;
width: 100%;
}
.landing-page__intro-left-content h1 {
font-size: 48px;
color: var(--neutral-600);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: 1.5rem;
max-width: 519px;
width: 100%;
}
.landing-page__intro-left-content p {
font-size: 16px;
color: var(--neutral-600);
margin-bottom: 24px;
margin-top: 0;
max-width: 547px;
line-height: 1.6;
font-weight: 400;
}
/* Enhanced paragraph typography for professional appearance */
.landing-page__intro-left-content p {
font-family: var(--main-font);
font-feature-settings: "kern"1, "liga"1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.landing-page__intro-right {
justify-content: flex-start;
background: transparent;
/* Remove individual background */
}
.landing-page__info-box {
background-color: var(--neutral-100);
padding: 2.5rem;
max-width: 536px;
width: 100%;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 8px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
}
.landing-page__info-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
pointer-events: none;
z-index: 1;
}
.landing-page__info-box::after {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
#D6CFFF 0.91%,
#F95F8D 27.91%,
#FFA77A 60.91%,
#DCAFED 100.91%);
pointer-events: none;
z-index: 2;
}
.landing-page__info-box>* {
position: relative;
z-index: 3;
}
/* Enhanced info box styling for professional appearance */
.landing-page__info-box {
/* Ensure proper stacking context */
isolation: isolate;
}
/* Enhanced focus indicators for info box content */
.landing-page__info-box h2:focus,
.landing-page__info-box ol:focus {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
}
.landing-page__info-box h2 {
font-size: 24px;
color: var(--neutral-600);
font-weight: bold;
margin-bottom: 1.5rem;
}
/* Enhanced h2 typography for professional appearance */
.landing-page__info-box h2 {
font-family: var(--main-font);
font-feature-settings: "kern"1, "liga"1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.landing-page__steps-list {
list-style: none;
padding: 1.5rem 0 0;
margin: 0 0 2rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
position: relative;
}
.landing-page__steps-list::before {
content: '';
position: absolute;
top: 40px;
left: 10%;
right: 10%;
border-top: 1px dashed #D4D4D4;
z-index: 0;
}
.landing-page__steps-item {
flex: 1 1 0;
text-align: center;
min-width: 0;
position: relative;
}
.landing-page__steps-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #F3F3F3;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
position: relative;
z-index: 1;
}
.landing-page__steps-icon img {
width: 48px;
height: 48px;
object-fit: contain;
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.landing-page__steps-label {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--neutral-600);
letter-spacing: 0.01em;
}
/* Keep "Integrating AI" on one line in the landing info box. */
.landing-page__steps-label[data-i18n="landingTierIntegrating"] {
white-space: nowrap;
font-size: 0.9rem;
}
.landing-page__steps-cta {
margin-top: 2.5rem;
display: flex;
justify-content: center;
}
.landing-page__btn--primary--inline {
width: 100%;
max-width: 420px;
justify-content: center;
}
@media (max-width: 900px) {
.landing-page__steps-list {
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.landing-page__steps-list {
flex-wrap: wrap;
justify-content: center;
row-gap: 1.5rem;
}
.landing-page__steps-list::before {
display: none;
}
.landing-page__steps-item {
flex: 0 1 45%;
padding-bottom: 1.5rem;
}
/* Vertical connector lines between steps for mobile layouts */
.landing-page__steps-item::after {
content: '';
position: absolute;
top: 56px;
/* just below the circular icon (48px) */
left: 50%;
transform: translateX(-50%);
width: 0;
height: calc(100% - 56px);
border-left: 1px dashed #D4D4D4;
opacity: 0.7;
pointer-events: none;
}
/* Do not draw connector after the last step */
.landing-page__steps-item:last-child::after {
display: none;
}
/* Steps CTA: mobile layout */
.landing-page__steps-cta {
margin-top: 2rem;
padding: 0 var(--container-padding);
}
.landing-page__btn--primary--inline {
max-width: 100%;
width: 100%;
min-height: 48px;
}
}
@media (max-width: 480px) {
.landing-page__steps-item {
flex: 0 1 100%;
padding-bottom: 0;
}
.landing-page__steps-cta {
margin-top: 1.5rem;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.landing-page__btn--primary--inline {
font-size: 0.9rem;
}
}
/* --- 5. "Reasons" Section (Row 3) --- */
.landing-page__reasons-section {
padding: 100px var(--container-padding) 80px;
background-color: var(--neutral-100);
/* Performance optimization */
contain: layout style;
will-change: transform;
}
.landing-page__reasons-container {
max-width: var(--content-width);
margin: 0 auto;
display: flex;
align-items: flex-start;
gap: 60px;
}
.landing-page__reasons-left {
flex: 1 1 9%;
}
.landing-page__reasons-left h2 {
font-size: 40px;
font-weight: bold;
color: var(--neutral-600);
margin-bottom: 1.5rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
/* Enhanced focus indicators for reasons h2 */
.landing-page__reasons-left h2:focus {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
border-radius: 4px;
}
/* Enhanced h2 typography for professional appearance */
.landing-page__reasons-left h2 {
font-family: var(--main-font);
font-feature-settings: "kern"1, "liga"1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.landing-page__reasons-left p {
color: var(--text-secondary);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
margin-bottom: 0;
}
/* Enhanced focus indicators for reasons paragraph */
.landing-page__reasons-left p:focus {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
border-radius: 4px;
}
/* Enhanced paragraph typography for professional appearance */
.landing-page__reasons-left p {
font-family: var(--main-font);
font-feature-settings: "kern"1, "liga"1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.landing-page__reasons-right {
flex: 1 1 50%;
display: grid;
/* 6-column grid: first row 2 items (span 3 each), second row 3 items (span 2 each) */
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
/* First row: 2 items, each spanning 3 columns */
.landing-page__reasons-right .landing-page__reason-item:nth-child(1),
.landing-page__reasons-right .landing-page__reason-item:nth-child(2) {
grid-column: span 3;
}
/* Second row: 3 items, each spanning 2 columns */
.landing-page__reasons-right .landing-page__reason-item:nth-child(3),
.landing-page__reasons-right .landing-page__reason-item:nth-child(4),
.landing-page__reasons-right .landing-page__reason-item:nth-child(5) {
grid-column: span 2;
}
.landing-page__reason-item .landing-page__reason-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--neutral-100);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Icon loading and fallback styles */
.landing-page__reason-item .landing-page__reason-icon img {
width: auto;
height: auto;
object-fit: contain;
display: block;
transition: transform 0.2s ease;
/* Ensure proper rendering for SVG icons */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
/* Fallback for older browsers */
-ms-interpolation-mode: nearest-neighbor;
/* Preserve aspect ratio for professional icons */
max-width: 100%;
max-height: 100%;
}
/* Loading state for icons */
.landing-page__reason-item .landing-page__reason-icon img[loading="lazy"] {
opacity: 0;
transition: opacity 0.3s ease;
}
.landing-page__reason-item .landing-page__reason-icon img[loading="lazy"].loaded {
opacity: 1;
}
/* Error state for failed image loads */
.landing-page__reason-item .landing-page__reason-icon img:not([src]) {
background-color: var(--tier-color);
border-radius: 4px;
}
.landing-page__reason-item .landing-page__reason-icon img:not([src]):after {
content: "?";
color: white;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Hover effects for icons */
.landing-page__reason-item:hover .landing-page__reason-icon img {
transform: scale(1.1);
}
/* Responsive icon sizing - rely on auto dimensions within the 48px container.
We keep max-width/height on the base rule so icons scale naturally. */
.landing-page__reason-item {
background-color: #F5F5F5;
padding: 1.5rem;
border: 1px solid #e0e0e0;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landing-page__reason-item h3 {
color: var(--neutral-600);
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.landing-page__reason-item p {
margin: 0;
color: var(--neutral-600);
font-size: 1rem;
line-height: 1.6;
}
/* --- 6. Call-to-Action Section (Row 3) - Professional Design with Background Image --- */
.landing-page__cta-section {
position: relative;
height: 482px;
background-color: #1a1a1a;
background-image: url('/ai-infrastructure-readiness/assets/images/footerBG.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
/* Allow decorative bubble to extend slightly above the section */
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
/* Performance optimization */
contain: layout style;
will-change: transform;
}
/* Diagonal white section using clip-path for perfect geometric cut */
.landing-page__cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--neutral-100);
clip-path: polygon(0 0, 0 25%, 100% 0);
z-index: 1;
pointer-events: none;
}
/**
* CTA Section Bubble Decoration - Top Right Corner
* Decorative bubble that sits visually in the top-right of the CTA hero.
* Absolutely positioned with right/top so it stays anchored to the corner.
*/
.landing-page__cta-bubble-decoration {
position: absolute;
/* Sit just under the white diagonal without being clipped */
top: -60px;
right: -40px;
z-index: 2;
/* above diagonal ::before (1), below CTA content (20) */
pointer-events: none;
}
.landing-page__cta-bubble-decoration img {
display: block;
width: 312px;
height: 312px;
max-width: none;
}
@media (max-width: 1200px) {
.landing-page__cta-bubble-decoration {
top: -60px;
right: -20px;
}
.landing-page__cta-bubble-decoration img {
width: 328px;
height: 328px;
}
}
@media (max-width: 768px) {
.landing-page__cta-bubble-decoration {
top: -40px;
right: -10px;
}
.landing-page__cta-bubble-decoration img {
width: 260px;
height: 260px;
}
}
@media (max-width: 480px) {
.landing-page__cta-bubble-decoration {
top: -30px;
right: -5px;
}
.landing-page__cta-bubble-decoration img {
width: 190px;
height: 190px;
}
}
.landing-page__cta-container {
position: relative;
z-index: 20;
max-width: 1318px;
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.landing-page__cta-content {
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
width: 100%;
padding: 2rem 0 100px 0;
flex: 1;
/* Enhanced spacing control */
box-sizing: border-box;
}
.landing-page__cta-content h2 {
font-size: 40px;
font-weight: 700;
color: var(--text-color-inverse);
margin-bottom: 1.5rem;
line-height: 1.2;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
max-width: 900px;
letter-spacing: -0.01em;
text-align: center;
position: relative;
font-family: var(--main-font);
}
.landing-page__btn--primary {
background: linear-gradient(135deg, var(--tier-color), #E53935);
color: var(--text-color-inverse);
padding: 12px 20px;
font-size: 1rem;
font-weight: 700;
border-radius: 0;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.75rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 24px rgba(204, 0, 0, 0.3);
border: 2px solid transparent;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.landing-page__btn--primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.landing-page__btn--primary::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.landing-page__btn--primary:hover::before {
left: 100%;
}
.landing-page__btn--primary:hover::after {
width: 300px;
height: 300px;
}
.landing-page__btn--primary:hover {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 12px 32px rgba(204, 0, 0, 0.4);
background: linear-gradient(135deg, #E53935, var(--tier-color));
}
.landing-page__btn--primary:active {
transform: translateY(0) scale(1);
transition: all 0.1s ease;
}
.btn-arrow {
width: 24px;
height: 24px;
display: inline-block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
}
.landing-page__btn--primary:hover .btn-arrow {
transform: translateX(6px) scale(1.05);
}
.landing-page__cta-footer {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin-top: 0;
position: relative;
z-index: 10;
}
.landing-page__cta-footer .landing-page__footer-links {
display: flex;
gap: 2.5rem;
padding: 0;
margin: 0;
list-style: none;
}
.landing-page__cta-footer .landing-page__footer-links li:not(:last-child)::after {
content: "|";
margin-left: 2.5rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 300;
}
.landing-page__cta-footer .landing-page__footer-links a {
color: var(--text-color-inverse);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.landing-page__cta-footer .landing-page__footer-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--tier-color);
transition: width 0.3s ease;
}
.landing-page__cta-footer .landing-page__footer-links a:hover {
color: var(--tier-color);
}
.landing-page__cta-footer .landing-page__footer-links a:hover::after {
width: 100%;
}
.landing-page__cta-footer .landing-page__footer-copyright {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin: 0;
font-weight: 400;
}
/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
.landing-page__cta-section.reduced-motion .landing-page__btn--primary {
transition: none;
}
.landing-page__cta-section.reduced-motion .landing-page__btn--primary:hover {
transform: none;
}
.landing-page__cta-section.reduced-motion .btn-arrow {
transition: none;
}
}
/* --- 7. Footer (Row 5) --- */
.landing-page__site-footer {
background-color: var(--bg-light);
padding: 2.5rem 0;
border-top: 1px solid var(--border-color);
color: var(--text-secondary);
font-size: 0.9rem;
}
.landing-page__footer-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
display: flex;
justify-content: space-between;
align-items: center;
}
.landing-page__footer-links {
display: flex;
gap: 1rem;
/* Space between links */
padding: 0;
margin: 0;
list-style: none;
}
.landing-page__footer-links li:not(:last-child)::after {
content: "|";
margin-left: 1rem;
color: var(--border-color);
}
.landing-page__footer-links a {
text-decoration: none;
color: var(--text-secondary);
transition: color 0.2s ease;
}
.landing-page__footer-links a:hover {
color: var(--text-primary);
}
.landing-page__footer-copyright {
margin: 0;
}
/* Prevent horizontal overflow on landing page - safe for notch/safe-area */
html:has(.landing-page__unified-hero),
body.landing-page {
overflow-x: hidden;
}
/* --- 8. Responsive Design --- */
@media (max-width: 992px) {
.landing-page__reasons-container {
flex-direction: column;
gap: 40px;
}
/* Tablet: 2-column grid for reason cards (769px–992px) */
.landing-page__reasons-right {
grid-template-columns: repeat(2, 1fr);
}
.landing-page__reasons-right .landing-page__reason-item:nth-child(n) {
grid-column: span 1;
}
/* Tablet h2 optimization */
.landing-page__reasons-left h2 {
font-size: 36px;
color: var(--neutral-600);
font-weight: bold;
margin-bottom: 1.5rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
/* Tablet paragraph optimization */
.landing-page__reasons-left p {
font-size: 16px;
color: var(--text-secondary);
font-weight: 400;
line-height: 1.6;
}
/* Tablet reasons-right gap optimization */
.landing-page__reasons-right {
gap: 20px;
}
/* Tablet CTA content optimization */
.landing-page__cta-content {
padding: 2rem 0 100px 0;
}
}
@media (max-width: 768px) {
:root {
--container-padding: 1.5rem;
--main-content-padding: 2rem;
}
.landing-page__intro-left-content {
text-align: center;
max-width: 100%;
}
.landing-page__reasons-section {
padding: 60px var(--container-padding) 50px;
padding-left: max(var(--container-padding), env(safe-area-inset-left, 1rem));
padding-right: max(var(--container-padding), env(safe-area-inset-right, 1rem));
}
.landing-page__reasons-container {
gap: 30px;
}
.landing-page__reasons-left {
text-align: left;
max-width: 36rem;
}
/* Mobile h2 optimization - fluid typography */
.landing-page__reasons-left h2 {
font-size: clamp(1.75rem, 5vw, 32px);
color: var(--neutral-600);
font-weight: bold;
margin-bottom: 1.25rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
/* Mobile paragraph optimization */
.landing-page__reasons-left p {
font-size: 16px;
color: var(--text-secondary);
font-weight: 400;
line-height: 1.6;
}
.landing-page__reasons-right {
grid-template-columns: 1fr;
gap: 18px;
}
/* Reset grid-column spans for single-column mobile layout */
.landing-page__reasons-right .landing-page__reason-item:nth-child(n) {
grid-column: span 1;
}
.landing-page__reason-item {
text-align: left;
padding: 1.5rem;
}
.landing-page__reason-item .landing-page__reason-icon {
margin-left: 0;
margin-right: 0;
margin-bottom: 1rem;
}
/* CTA Section Responsive - min-height for content flow, allow scroll if needed */
.landing-page__cta-section {
min-height: 482px;
height: auto;
padding: 2rem 0;
padding-left: max(var(--container-padding), env(safe-area-inset-left, 1rem));
padding-right: max(var(--container-padding), env(safe-area-inset-right, 1rem));
background-attachment: scroll;
background-size: cover;
background-position: center center;
}
.landing-page__cta-container {
min-height: 420px;
height: auto;
padding: 0 var(--container-padding);
}
.landing-page__cta-content h2 {
font-size: clamp(1.5rem, 6vw, 32px);
font-weight: 700;
margin-bottom: 2.5rem;
line-height: 1.2;
padding: 0 0.5rem;
}
.landing-page__cta-content {
padding: 1.5rem 0 2.5rem;
margin-bottom: 0;
}
/* Touch target: min 44px height for accessibility */
.landing-page__btn--primary {
padding: 14px 20px;
min-height: 48px;
font-size: 0.9rem;
border-radius: 0;
}
.landing-page__cta-footer {
flex-direction: column;
gap: 1.5rem;
text-align: center;
padding: 1.25rem 0;
margin-top: 0;
}
.landing-page__cta-footer .landing-page__footer-links {
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem 1.5rem;
}
.landing-page__cta-footer .landing-page__footer-links li:not(:last-child)::after {
display: none;
}
/* Footer responsiveness */
.landing-page__footer-container {
flex-direction: column-reverse;
gap: 1.5rem;
}
.landing-page__footer-copyright,
.landing-page__footer-links {
text-align: center;
}
}
/* ============================================================
LANDING PAGE - SMALL PHONES (480px and below)
Professional responsive enhancements per WCAG 2.2
============================================================ */
@media (max-width: 480px) {
:root {
--container-padding: 1rem;
--main-content-padding: 1.25rem;
}
.landing-page__header-container {
padding: 1.5rem var(--container-padding) 1.25rem;
}
.landing-page__logo-image {
width: 160px;
height: 31px;
}
.landing-page__intro-left,
.landing-page__intro-right {
padding: 1.5rem var(--container-padding);
}
.landing-page__intro-left-content h1 {
font-size: clamp(1.5rem, 8vw, 28px);
line-height: 1.2;
}
.landing-page__intro-left-content p {
font-size: 15px;
}
.landing-page__info-box {
padding: 1.5rem 1.25rem;
margin: 0 auto;
max-width: calc(100% - 2rem);
}
.landing-page__info-box h2 {
font-size: clamp(1.125rem, 5vw, 20px);
}
.landing-page__steps-list {
padding: 1rem 0 0;
margin-bottom: 1.5rem;
}
.landing-page__steps-icon {
width: 44px;
height: 44px;
}
.landing-page__steps-icon img {
width: 36px;
height: 36px;
}
.landing-page__steps-cta {
margin-top: 1.5rem;
}
.landing-page__btn--primary--inline {
min-height: 48px;
padding: 12px 16px;
}
.landing-page__reasons-section {
padding: 40px var(--container-padding) 36px;
}
.landing-page__reasons-left h2 {
font-size: clamp(1.5rem, 6vw, 28px);
}
.landing-page__reason-item {
padding: 1.25rem 1rem;
}
.landing-page__cta-section {
min-height: 420px;
padding: 1.5rem 0;
}
.landing-page__cta-content h2 {
font-size: clamp(1.25rem, 6vw, 24px);
margin-bottom: 1.5rem;
}
.landing-page__cta-footer .landing-page__footer-links a {
font-size: 0.875rem;
}
.landing-page__cta-footer .landing-page__footer-copyright {
font-size: 0.8rem;
}
}
/* ============================================================
LANDING PAGE - EXTRA SMALL (360px and below)
============================================================ */
@media (max-width: 360px) {
.landing-page__logo-image {
width: 140px;
height: 27px;
}
.landing-page__info-box {
padding: 1.25rem 1rem;
}
}
/* ============================================================
SLIDER/RATING STYLES FOR QUESTION 5
============================================================ */
.slider-rating-container {
display: flex;
flex-direction: column;
gap: 16px;
margin: 20px 0;
padding: 0;
background: transparent;
}
.slider-card {
background: linear-gradient(135deg, var(--neutral-100) 0%, #f8f9fa 100%);
padding: 28px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(102, 126, 234, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.slider-card:hover {
box-shadow: 0 16px 48px rgba(102, 126, 234, 0.15);
transform: translateY(-4px);
border-color: rgba(102, 126, 234, 0.2);
}
/* .slider-card::before pseudo-element removed as requested */
.category-header {
margin-bottom: 20px;
}
.category-title {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 120%;
margin: 0 0 12px 0;
}
.category-examples {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 16px;
font-style: italic;
font-weight: 400;
line-height: 135%;
margin: 0;
}
.slider-container {
margin: 20px 0;
}
.ai-deployment-slider {
width: 100%;
height: 8px;
border-radius: 4px;
background: linear-gradient(to right, #dc3545 0%, #ffc107 50%, #28a745 100%);
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
margin-bottom: 24px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.ai-deployment-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--neutral-100) 0%, #f8f9fa 100%);
border: 4px solid #667eea;
cursor: pointer;
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-deployment-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.6);
border-color: #5a67d8;
}
.ai-deployment-slider::-moz-range-thumb {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--neutral-100) 0%, #f8f9fa 100%);
border: 4px solid #667eea;
cursor: pointer;
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.slider-labels {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
}
.slider-label {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
padding: 16px 20px;
border-radius: 4px;
background: var(--neutral-100);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
min-width: 200px;
opacity: 0.7;
transform: scale(0.95);
border: 2px solid transparent;
/* Shadow/lg */
box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.slider-label:hover {
opacity: 0.9;
transform: scale(1.02);
background: rgba(255, 255, 255, 0.8);
border-color: rgba(102, 126, 234, 0.2);
}
.slider-label.active {
opacity: 1;
transform: scale(1.08);
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(102, 126, 234, 0.4);
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}
/* Active slider label border colors by value */
.slider-label.active[data-value="0"] {
border-color: var(--tier-color);
}
.slider-label.active[data-value="1"] {
border-color: #FFB300;
}
.slider-label.active[data-value="2"] {
border-color: #57C389;
}
.label-circle {
width: 20px;
height: 20px;
border-radius: 50%;
margin-bottom: 10px;
border: 3px solid var(--neutral-100);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
}
.label-text {
font-size: 14px;
font-weight: 700;
margin-bottom: 0;
color: inherit;
letter-spacing: -0.01em;
}
/* Enhanced visual feedback for better UX */
.slider-label.active .label-circle {
transform: scale(1.2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.slider-label.active .label-text {
font-weight: 800;
color: #1a202c;
}
/* Focus states for accessibility */
.ai-deployment-slider:focus {
outline: 3px solid rgba(102, 126, 234, 0.3);
outline-offset: 2px;
}
.slider-label:focus {
outline: 2px solid rgba(102, 126, 234, 0.5);
outline-offset: 2px;
}
/* Smooth animations for better user experience */
.slider-card {
animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive design for slider */
@media (max-width: 768px) {
.slider-card {
padding: 20px;
margin: 0 -10px;
}
.category-title {
font-size: 16px;
}
.category-examples {
font-size: 13px;
}
.slider-labels {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.slider-label {
flex-direction: row;
justify-content: space-between;
text-align: left;
min-width: auto;
padding: 12px 16px;
}
.label-circle {
margin-bottom: 0;
margin-right: 12px;
}
/* Summary responsive styles removed as requested */
}
/* ============================================================
RESPONSIVE DESIGN FOR UNIFIED HERO SECTION - GOAT LEVEL
============================================================ */
/* Mobile optimization for unified hero */
@media (max-width: 768px) {
.landing-page__unified-hero {
min-height: 600px;
height: auto;
background-attachment: scroll;
background-size: cover;
background-position: center center;
/* Prevent horizontal overflow from decorations */
overflow-x: clip;
}
/* Dark overlay behind hero content on small screens for readability */
.landing-page__unified-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.55) 40%,
rgba(0, 0, 0, 0.85) 100%);
z-index: 1;
pointer-events: none;
}
.landing-page__hero-header {
background: transparent;
position: relative;
z-index: 3;
}
/* Mobile logo optimization - fluid sizing */
.landing-page__logo-image {
width: auto !important;
height: auto !important;
object-fit: contain !important;
/**
* Mobile logo color treatment:
* Convert brand SVG to a clean white mark (var(--neutral-100)) for maximum contrast
* on the dark hero, without editing the SVG file.
*
* - brightness(0) → flatten to black silhouette
* - invert(1) → black → white (var(--neutral-100))
* - contrast(1.05) keeps edges crisp
*/
filter:
brightness(0) invert(1) contrast(1.05) !important;
}
/* Mobile navigation optimization */
.landing-page__site-nav a {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
padding: 0.7rem 1.2rem;
min-height: 44px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.landing-page__header-container {
padding: 1.75rem max(var(--container-padding), env(safe-area-inset-left, 1rem)) 1.5rem;
padding-right: max(var(--container-padding), env(safe-area-inset-right, 1rem));
}
.landing-page__hero-content {
flex-direction: column;
align-items: stretch;
position: relative;
z-index: 2;
}
.landing-page__intro-left,
.landing-page__intro-right {
flex: 1 1 100%;
padding: 2rem max(var(--container-padding), env(safe-area-inset-left, 1rem));
padding-right: max(var(--container-padding), env(safe-area-inset-right, 1rem));
justify-content: center;
min-height: auto;
}
/* Mobile heading - fluid typography */
.landing-page__intro-left-content h1 {
font-size: clamp(1.75rem, 7vw, 36px);
color: var(--text-color-inverse) !important;
text-align: left;
max-width: 100%;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}
.landing-page__intro-left-content p {
font-size: clamp(0.9375rem, 2.5vw, 16px);
color: var(--text-color-inverse) !important;
text-align: left;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
/* Ensure intro text block is clearly readable on small screens */
.landing-page__intro-left {
align-items: flex-start;
}
.landing-page__intro-left-content {
max-width: 32rem;
padding: 1.25rem 1.5rem;
margin: 0;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.75),
rgba(0, 0, 0, 0.55));
border-radius: 12px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
/* Softer border so it doesn't overpower the hero */
border: 1px solid rgba(255, 255, 255, 0.18);
outline: 1px solid rgba(255, 255, 255, 0.10);
outline-offset: 0;
}
/* Intro-right (info box) mobile layout */
.landing-page__intro-right {
align-items: center;
/* margin-top: 1.75rem; */
}
.landing-page__info-box {
width: 100%;
max-width: min(536px, calc(100% - 2rem));
}
/* Enhanced info box for mobile */
.landing-page__info-box {
background-color: var(--neutral-100);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 12px 24px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
padding: 2rem;
margin: 0 auto;
max-width: min(536px, calc(100% - 2rem));
}
.landing-page__info-box h2 {
font-size: clamp(1.125rem, 5vw, 20px);
color: var(--neutral-600);
font-weight: bold;
}
}
/* Tablet optimization */
@media (max-width: 992px) and (min-width: 769px) {
.landing-page__unified-hero {
height: 821px;
background-attachment: scroll;
background-size: cover;
background-position: center center;
}
/* Tablet h2 optimization */
.landing-page__info-box h2 {
font-size: 22px;
color: var(--neutral-600);
font-weight: bold;
}
.landing-page__intro-left-content p {
font-size: 16px;
color: var(--neutral-600);
}
.landing-page__intro-left-content h1 {
font-size: 42px;
color: var(--neutral-600);
}
.landing-page__logo-image {
width: 200px;
height: 39px;
filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.55));
}
/* Tablet navigation optimization */
.landing-page__site-nav a {
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(11px);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
padding: 0.8rem 1.3rem;
border: 1px solid rgba(255, 255, 255, 0.28);
}
.landing-page__hero-content {
flex-direction: column;
align-items: stretch;
/* Stretch items to full width */
}
.landing-page__intro-left,
.landing-page__intro-right {
flex: 1 1 100%;
padding: 3rem var(--container-padding);
justify-content: center;
min-height: auto;
/* Allow natural height on tablet */
}
}
/* Large desktop h2 optimization */
@media (min-width: 1400px) {
.landing-page__info-box h2 {
font-size: 24px;
color: var(--neutral-600);
font-weight: bold;
}
/* Large desktop reasons h2 optimization */
.landing-page__reasons-left h2 {
font-size: 40px;
color: var(--neutral-600);
font-weight: bold;
margin-bottom: 1.5rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
/* Large desktop paragraph optimization */
.landing-page__reasons-left p {
font-size: 16px;
color: var(--text-secondary);
font-weight: 400;
line-height: 1.6;
}
/* Large desktop reasons-right gap optimization */
.landing-page__reasons-right {
gap: 24px;
}
/* Large desktop CTA content optimization */
.landing-page__cta-content {
padding: 2rem 0 100px 0;
}
}
/* Ultra-wide displays h2 optimization */
@media (min-width: 1920px) {
.landing-page__info-box h2 {
font-size: 24px;
color: var(--neutral-600);
font-weight: bold;
}
/* Ultra-wide reasons h2 optimization */
.landing-page__reasons-left h2 {
font-size: 40px;
color: var(--neutral-600);
font-weight: bold;
margin-bottom: 1.5rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
/* Ultra-wide paragraph optimization */
.landing-page__reasons-left p {
font-size: 16px;
color: var(--text-secondary);
font-weight: 400;
line-height: 1.6;
}
/* Ultra-wide reasons-right gap optimization */
.landing-page__reasons-right {
gap: 24px;
}
/* Ultra-wide CTA content optimization */
.landing-page__cta-content {
padding: 2rem 0 100px 0;
}
}
/* Ultra-wide displays paragraph optimization */
@media (min-width: 1920px) {
.landing-page__intro-left-content p {
font-size: 16px;
color: var(--neutral-600);
}
}
/* Ultra-wide displays heading optimization */
@media (min-width: 1920px) {
.landing-page__intro-left-content h1 {
font-size: 48px;
color: var(--neutral-600);
}
}
/* High DPI displays optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.landing-page__unified-hero {
background-image: url('/ai-infrastructure-readiness/assets/images/first-row.jpg');
background-size: cover;
}
}
/* Large desktop optimization */
@media (min-width: 1400px) {
.landing-page__unified-hero {
height: 821px;
background-size: cover;
background-position: center center;
}
/* Large desktop logo optimization */
.landing-page__logo-image {
width: 225px;
height: 44px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
}
/* Ultra-wide displays optimization */
@media (min-width: 1920px) {
.landing-page__unified-hero {
height: 821px;
background-size: cover;
background-position: center center;
}
/* Ultra-wide logo optimization */
.landing-page__logo-image {
width: 225px;
height: 44px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
}
/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
.landing-page__unified-hero {
background-attachment: scroll;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.landing-page__hero-header {
background: transparent;
}
.landing-page__logo-image {
width: 225px;
height: 44px;
filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.4)) brightness(1.2);
}
.landing-page__site-nav a {
color: var(--text-color-inverse);
background: rgba(255, 255, 255, 0.18);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.landing-page__site-nav a:hover {
color: var(--text-color-inverse);
background: rgba(204, 0, 0, 0.95);
text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
}
.landing-page__intro-left-content h1 {
color: var(--neutral-600);
}
.landing-page__intro-left-content p {
color: var(--neutral-600);
}
.landing-page__info-box {
background-color: var(--neutral-100);
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 32px;
}
.landing-page__info-box h2 {
color: var(--neutral-600);
}
/* Dark mode reasons h2 */
.landing-page__reasons-left h2 {
color: var(--neutral-600);
}
/* Dark mode reasons paragraph */
.landing-page__reasons-left p {
color: var(--text-secondary);
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.landing-page__hero-header {
background: rgba(255, 255, 255, 0.95);
}
.landing-page__logo-image {
width: 225px;
height: 44px;
filter: contrast(1.5) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}
.landing-page__site-nav a {
color: #000000;
font-weight: 700;
background: rgba(255, 255, 255, 0.95);
border: 2px solid #000000;
text-shadow: none;
}
.landing-page__site-nav a:hover {
color: var(--text-color-inverse);
background: var(--tier-color);
border-color: #000000;
}
.landing-page__intro-left-content h1 {
color: var(--neutral-600);
font-weight: 900;
}
.landing-page__intro-left-content p {
color: var(--neutral-600);
font-weight: 600;
}
.landing-page__info-box {
background-color: var(--neutral-100);
border: 3px solid #000000;
box-shadow:
0 0 0 3px var(--neutral-100),
0 20px 40px rgba(0, 0, 0, 0.5);
}
.landing-page__info-box h2 {
color: var(--neutral-600);
font-weight: 900;
}
/* High contrast reasons h2 */
.landing-page__reasons-left h2 {
color: var(--neutral-600);
font-weight: 900;
}
/* High contrast reasons paragraph */
.landing-page__reasons-left p {
color: var(--text-secondary);
font-weight: 600;
}
}
/* ============================================================
ACCESSIBILITY & PERFORMANCE OPTIMIZATIONS
============================================================ */
/* Focus indicators for keyboard navigation */
.landing-page__btn:focus,
.landing-page__site-nav a:focus,
.landing-page__footer-links a:focus {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.landing-page__btn {
border: 2px solid #000;
}
}
/* Print styles optimization */
@media print {
.landing-page__unified-hero {
background-image: none !important;
background-color: #f0f0f0 !important;
}
.landing-page__hero-header {
background: var(--neutral-100) !important;
}
.landing-page__logo-image {
width: 225px !important;
height: 44px !important;
filter: none !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.landing-page__site-nav a {
color: #000000 !important;
background: transparent !important;
text-shadow: none !important;
border: 1px solid #000000 !important;
}
.landing-page__intro-left-content h1 {
color: var(--neutral-600) !important;
}
.landing-page__intro-left-content p {
color: var(--neutral-600) !important;
}
.landing-page__info-box {
background-color: var(--neutral-100) !important;
border: 1px solid #000000 !important;
box-shadow: none !important;
}
.landing-page__info-box h2 {
color: var(--neutral-600) !important;
}
/* Print styles reasons h2 */
.landing-page__reasons-left h2 {
color: var(--neutral-600) !important;
font-size: 40px !important;
font-weight: bold !important;
}
/* Print styles reasons paragraph */
.landing-page__reasons-left p {
color: var(--text-secondary) !important;
font-size: 16px !important;
font-weight: 400 !important;
}
}
/* Performance optimization for unified hero */
.landing-page__unified-hero {
will-change: transform;
transform: translateZ(0);
/* Hardware acceleration */
}
/* Font loading optimization */
@supports (font-display: swap) {
.landing-page__logo,
.landing-page__intro-left-content h1,
.landing-page__btn {
font-display: swap;
}
}
@media (max-width: 480px) {
.slider-card {
padding: 16px;
}
.category-title {
font-size: 15px;
}
.category-examples {
font-size: 12px;
}
.ai-deployment-slider {
height: 6px;
}
.ai-deployment-slider::-webkit-slider-thumb {
width: 20px;
height: 20px;
}
/* Removed current-selection responsive styles as requested */
/* Summary mobile styles removed as requested */
}
/* One-row enforcement for nav buttons */
.nav-btn {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
.nav-btn>span, .nav-btn>svg, .nav-btn>img {
display: inline-block !important;
vertical-align: middle !important;
}
/* ===============================================
Contact Modal Styles
=============================================== */
/* Modal Overlay */
.contact-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
opacity: 1;
transition: opacity 0.3s ease;
overflow-y: auto;
}
/* Modal Content - Matching Marketo Landing Page Design */
.contact-modal-content {
background: var(--neutral-100);
max-width: 640px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideInModal 0.3s ease;
border: 1px solid #E5E7EB;
border-top: 4px solid var(--tier-color);
}
@keyframes slideInModal {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Close Button - Matching Marketo Landing Page Design */
.contact-modal-close {
position: absolute;
top: 20px;
right: 20px;
background: #f5f5f5;
border: 1px solid #E5E7EB;
font-size: 24px;
color: #333333;
cursor: pointer;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 1;
line-height: 1;
padding: 0;
font-weight: 300;
}
.contact-modal-close:hover {
background-color: #e8e8e8;
border-color: var(--tier-color);
color: var(--tier-color);
transform: scale(1.05);
}
.contact-modal-close:active {
transform: scale(0.95);
}
.contact-modal-close:focus {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
}
/* Modal Header - Clean Design with Title, Subtitle, and Required Note */
.contact-modal-header {
padding: 40px 40px 24px;
background: var(--neutral-100);
border-bottom: none;
}
.contact-modal-header h1 {
color: #333333;
font-family: var(--main-font);
font-size: 28px;
font-weight: 700;
margin: 0 0 12px 0;
line-height: 1.3;
letter-spacing: -0.01em;
text-align: left;
display: block;
}
.contact-modal-subtitle {
color: #666666;
font-family: var(--main-font);
font-size: 15px;
font-weight: 400;
margin: 0 0 16px 0;
line-height: 1.6;
text-align: left;
display: block;
}
.contact-modal-required-note {
color: #333333;
font-family: var(--main-font);
font-size: 14px;
font-weight: 400;
margin: 0;
line-height: 1.5;
font-style: normal;
text-align: left;
display: block;
}
/* Contact Form Container - Clean, Simple Design */
.contact-form-container {
padding: 0 40px 40px 40px;
background: var(--neutral-100);
width: 100%;
min-height: 200px;
}
/* Ensure form container has proper spacing */
.contact-form-container .mktoForm {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* Marketo Form Container - Ensure visibility */
.marketo-form-container {
width: 100% !important;
min-height: 200px !important;
position: relative !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
padding: 0 !important;
}
/* Marketo Form Styles - Force visibility */
#mktoForm_2211,
[id^="mktoForm_"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
min-height: 200px !important;
}
/* Marketo Form Elements - Ensure visibility */
.mktoForm,
.mktoFormRow,
.mktoFieldWrap,
.mktoFormCol {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.mktoFormRow {
margin-bottom: 24px !important;
display: block !important;
visibility: visible !important;
width: 100% !important;
clear: both !important;
}
.mktoFormRow.mktoFormHide,
.mktoFormRow.mktoHide {
display: block !important;
visibility: visible !important;
}
.mktoFieldWrap {
display: block !important;
visibility: visible !important;
width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 !important;
padding: 0 !important;
}
.mktoFormCol {
display: block !important;
visibility: visible !important;
width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 !important;
padding: 0 !important;
}
/* Marketo Form Fields - Ensure visibility */
.mktoForm input,
.mktoForm select,
.mktoForm textarea,
.mktoForm label {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.mktoForm input[type="text"],
.mktoForm input[type="email"],
.mktoForm input[type="tel"],
.mktoForm select,
.mktoForm textarea {
width: 100% !important;
padding: 10px 12px !important;
border: 1px solid #CCCCCC !important;
border-radius: 0 !important;
font-family: var(--main-font);
font-size: 14px !important;
color: #333333 !important;
background-color: var(--neutral-100) !important;
box-sizing: border-box !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 1.5 !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
.mktoForm input[type="text"]:focus,
.mktoForm input[type="email"]:focus,
.mktoForm input[type="tel"]:focus,
.mktoForm select:focus,
.mktoForm textarea:focus {
outline: none !important;
border-color: var(--tier-color) !important;
box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.1) !important;
}
.mktoForm label {
display: block !important;
visibility: visible !important;
color: #333333 !important;
font-family: var(--main-font);
font-size: 14px !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
margin-top: 0 !important;
line-height: 1.4 !important;
text-align: left !important;
width: 100% !important;
}
/* Required field asterisk styling - Red color */
.mktoForm label .mktoAsterix,
.mktoForm label .mktoRequired,
.mktoForm label::after {
color: var(--tier-color) !important;
font-weight: 700 !important;
}
/* Ensure asterisks are red */
.mktoForm .mktoRequiredField label::after,
.mktoForm .mktoRequired label::after {
content: '*' !important;
color: var(--tier-color) !important;
margin-left: 2px !important;
font-weight: 700 !important;
}
.mktoForm input[type="submit"],
.mktoForm button[type="submit"] {
width: auto !important;
min-width: 120px !important;
padding: 12px 32px !important;
background-color: var(--tier-color) !important;
color: var(--text-color-inverse) !important;
border: 1px solid var(--tier-color) !important;
border-radius: 0 !important;
font-weight: 700 !important;
font-size: 14px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
margin-top: 8px !important;
margin-left: 0 !important;
margin-right: auto !important;
font-family: var(--main-font);
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transition: background-color 0.2s ease, border-color 0.2s ease !important;
}
.mktoForm input[type="submit"]:hover,
.mktoForm button[type="submit"]:hover {
background-color: var(--tier-color-active) !important;
border-color: var(--tier-color-active) !important;
}
.mktoForm input[type="submit"]:active,
.mktoForm button[type="submit"]:active {
background-color: #770000 !important;
border-color: #770000 !important;
}
/* Contact Form - Matching Marketo Landing Page Design */
.contact-form {
padding: 32px 40px 40px;
background: var(--neutral-100);
}
.contact-form-group {
margin-bottom: 24px;
}
.contact-form-group:last-of-type {
margin-bottom: 0;
}
.contact-form-group label {
display: block;
color: #333333;
font-family: var(--main-font);
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.4;
}
.contact-form-group label.required {
font-weight: 600;
}
.required-asterisk {
color: var(--tier-color);
margin-left: 2px;
font-weight: 700;
}
.optional-label {
color: #999;
font-weight: 400;
font-size: 12px;
margin-left: 4px;
}
.contact-form-group input[type="text"],
.contact-form-group input[type="email"],
.contact-form-group input[type="tel"] {
width: 100%;
padding: 12px 16px;
border: 1px solid #CCCCCC;
border-radius: 4px;
font-family: var(--main-font);
font-size: 14px;
color: #333333;
background-color: var(--neutral-100);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
box-sizing: border-box;
line-height: 1.5;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.contact-form-group input::placeholder {
color: #999999;
opacity: 1;
}
.contact-form-group input:hover {
border-color: #999999;
}
.contact-form-group input:focus {
outline: none;
border-color: var(--tier-color);
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.1);
background-color: var(--neutral-100);
}
.contact-form-group input.error {
border-color: #f44336;
}
.contact-form-group input.error:focus {
border-color: #f44336;
box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
}
.error-message {
display: none;
color: #d32f2f;
font-family: var(--main-font);
font-size: 13px;
margin-top: 6px;
line-height: 1.4;
font-weight: 400;
}
.error-message:not(:empty) {
display: block;
}
/* Privacy Checkbox - Matching Marketo Landing Page Design */
.contact-privacy-group {
margin-top: 28px;
margin-bottom: 32px;
padding-top: 24px;
border-top: 1px solid #E5E7EB;
}
.contact-privacy-checkbox {
display: flex;
align-items: flex-start;
cursor: pointer;
gap: 12px;
}
.contact-privacy-checkbox input[type="checkbox"] {
margin: 0;
margin-top: 3px;
width: 18px;
height: 18px;
min-width: 18px;
cursor: pointer;
flex-shrink: 0;
accent-color: var(--tier-color);
border: 1px solid #CCCCCC;
border-radius: 3px;
}
.contact-privacy-checkbox input[type="checkbox"]:focus {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
}
.contact-privacy-checkbox input[type="checkbox"]:checked {
background-color: var(--tier-color);
border-color: var(--tier-color);
}
/* Marketo interest checkbox: override Marketo's inline text-field styles
so the checkbox renders as a proper checkbox with a visible tick. */
.mktoLogicalField.mktoCheckboxList.mktoHasWidth input.mktoField[type="checkbox"] {
/* Restore native checkbox look instead of text-input look */
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
appearance: checkbox !important;
/* Ensure appropriate size for a checkbox, not a full-width text field */
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
/* Reset text-input specific styles that Marketo applies inline */
padding: 0 !important;
box-shadow: none !important;
border-radius: 3px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: #CCCCCC !important;
line-height: normal !important;
/* Make it clearly interactive */
cursor: pointer !important;
flex-shrink: 0 !important;
}
.mktoLogicalField.mktoCheckboxList.mktoHasWidth input.mktoField[type="checkbox"]:focus-visible {
outline: 2px solid var(--tier-color) !important;
outline-offset: 2px !important;
}
.mktoLogicalField.mktoCheckboxList.mktoHasWidth input.mktoField[type="checkbox"]:checked {
/* Let the browser draw the native checkmark, but tighten colors */
border-color: var(--tier-color) !important;
}
.privacy-text {
color: #333333;
font-family: var(--main-font);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
margin: 0;
}
.privacy-text a {
color: var(--tier-color);
text-decoration: underline;
transition: color 0.2s ease;
font-weight: 500;
}
.privacy-text a:hover {
color: var(--tier-color-active);
}
/* Form Actions - Matching Marketo Landing Page Design */
.contact-form-actions {
display: flex;
gap: 16px;
justify-content: flex-end;
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid #E5E7EB;
}
.contact-btn-primary,
.contact-btn-secondary {
padding: 14px 32px;
border-radius: 4px;
font-family: var(--main-font);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
line-height: 1.4;
min-width: 120px;
text-align: center;
}
.contact-btn-primary {
background-color: var(--tier-color);
color: var(--text-color-inverse);
border-color: var(--tier-color);
}
.contact-btn-primary:hover:not(:disabled) {
background-color: var(--tier-color-active);
border-color: var(--tier-color-active);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(204, 0, 0, 0.2);
}
.contact-btn-primary:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(204, 0, 0, 0.15);
}
.contact-btn-primary:disabled {
background-color: #cccccc;
border-color: #cccccc;
color: #666666;
cursor: not-allowed;
opacity: 0.7;
transform: none;
box-shadow: none;
}
.contact-btn-secondary {
background-color: var(--neutral-100);
color: #333333;
border: 1px solid #CCCCCC;
}
.contact-btn-secondary:hover {
background-color: #f9f9f9;
border-color: #999999;
color: #333333;
}
.contact-btn-secondary:active {
background-color: #f5f5f5;
transform: translateY(0);
}
/* Responsive Design - Matching Marketo Landing Page Design */
@media (max-width: 768px) {
.contact-modal-overlay {
/* Keep some breathing room so modal appears as a centered box, not full-screen */
padding: 16px;
}
.contact-modal-content {
/* Centered modal on smaller screens, without rounded corners */
max-width: 420px;
width: 100%;
margin: 0 auto;
border-radius: 0;
max-height: calc(100vh - 200px);
}
.contact-modal-header {
padding: 32px 24px 24px;
}
.contact-modal-header h1 {
font-size: 24px;
margin-bottom: 12px;
}
.contact-modal-subtitle {
font-size: 15px;
}
.contact-modal-required-note {
font-size: 12px;
}
.contact-form {
padding: 24px;
}
.contact-form-container {
padding: 0 20px 20px 20px;
}
.contact-form-group {
margin-bottom: 20px;
}
.contact-form-actions {
flex-direction: column;
gap: 12px;
margin-top: 24px;
padding-top: 24px;
}
.contact-btn-primary,
.contact-btn-secondary {
width: 100%;
min-width: unset;
}
}
/* Small phone refinements for contact modal */
@media (max-width: 480px) {
.contact-modal-content {
/* Inherit no-radius behaviour on very small screens as well */
border-radius: 0;
}
.contact-modal-header {
padding: 24px 16px 20px;
}
.contact-modal-header h1 {
font-size: 20px;
}
.contact-modal-subtitle {
font-size: 14px;
}
.contact-modal-required-note {
font-size: 12px;
}
.contact-form {
padding: 20px 16px 24px;
}
.contact-form-group {
margin-bottom: 16px;
}
.contact-modal-close {
top: 14px;
right: 14px;
width: 32px;
height: 32px;
font-size: 22px;
}
}
/* Ultra-small devices (e.g. 320px width) */
@media (max-width: 360px) {
.contact-modal-header {
padding: 20px 12px 16px;
}
.contact-modal-header h1 {
font-size: 18px;
}
.contact-modal-subtitle {
font-size: 13px;
}
.contact-form {
padding: 18px 12px 20px;
}
.contact-form-actions {
gap: 10px;
margin-top: 20px;
}
}
/* Toast Animation - Enhanced for better UX */
@keyframes slideInToast {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideOutToast {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
}
/* Toast Animation */
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
}
/* ===============================================
Confirmation Modal Styles
=============================================== */
/* Confirmation Modal Overlay */
.confirmation-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
padding: 20px;
opacity: 1;
transition: opacity 0.3s ease;
overflow-y: auto;
}
/* Confirmation Modal Content */
.confirmation-modal-content {
background: var(--neutral-100);
max-width: 590px;
width: 100%;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
animation: slideInModal 0.3s ease;
margin: 0 auto;
overflow: hidden;
border-top: 4px solid #cc3333;
}
/* Close Button */
.confirmation-modal-close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: 1px solid #E5E7EB;
font-size: 20px;
color: var(--neutral-600);
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
z-index: 1;
line-height: 1;
padding: 0;
}
.confirmation-modal-close:hover {
background-color: #f5f5f5;
color: var(--tier-color);
border-color: var(--tier-color);
}
.confirmation-modal-close:focus {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
}
/* Modal Animation */
@keyframes slideInModal {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Confirmation Modal Body */
.confirmation-modal-body {
padding: 48px 40px 32px 40px;
text-align: center;
}
.confirmation-modal-title {
color: #333333;
font-family: var(--main-font);
font-size: 28px;
font-weight: 700;
margin: 0 0 24px 0;
line-height: 1.3;
letter-spacing: -0.02em;
}
.confirmation-modal-text {
color: #666666;
font-family: var(--main-font);
font-size: 16px;
font-weight: 400;
margin: 0;
line-height: 1.6;
}
/* Confirmation Modal Actions */
.confirmation-modal-actions {
display: flex;
gap: 16px;
justify-content: center;
padding: 0 40px 40px 40px;
border-top: none;
}
.confirmation-btn-edit,
.confirmation-btn-generate {
padding: 12px 24px;
border-radius: 4px;
font-family: var(--main-font);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.05px;
cursor: pointer;
transition: all 0.2s ease;
min-width: 160px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid transparent;
outline: none;
}
/* EDIT RESPONSES Button - Secondary/Outline Style */
.confirmation-btn-edit {
background-color: var(--neutral-100);
color: #333333;
border: 1px solid #cccccc;
}
.confirmation-btn-edit:hover:not(:disabled) {
background-color: #f9fafb;
border-color: #aaaaaa;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.confirmation-btn-edit:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.confirmation-btn-edit:focus-visible {
outline: 2px solid #cc3333;
outline-offset: 2px;
}
/* GENERATE REPORT Button - Primary/Red Style */
.confirmation-btn-generate {
background-color: #cc3333;
color: var(--text-color-inverse);
border: 1px solid #cc3333;
}
.confirmation-btn-generate:hover:not(:disabled) {
background-color: var(--tier-color-hover);
border-color: var(--tier-color-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(204, 51, 51, 0.25);
}
.confirmation-btn-generate:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(204, 51, 51, 0.2);
}
.confirmation-btn-generate:focus-visible {
outline: 2px solid #cc3333;
outline-offset: 2px;
}
/* Arrow Icon in GENERATE REPORT Button */
.confirmation-btn-arrow {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.2s ease;
stroke: currentColor;
}
.confirmation-btn-generate:hover:not(:disabled) .confirmation-btn-arrow {
transform: translateX(2px);
}
/* Disabled State */
.confirmation-btn-edit:disabled,
.confirmation-btn-generate:disabled {
background-color: #cccccc;
color: #666666;
border-color: #cccccc;
cursor: not-allowed;
opacity: 0.7;
transform: none;
}
/* Responsive Design */
@media (max-width: 768px) {
.confirmation-modal-overlay {
padding: 16px;
}
.confirmation-modal-content {
max-width: 100%;
margin: 0;
max-height: 90vh;
border-top-width: 3px;
}
.confirmation-modal-body {
padding: 40px 24px 28px 24px;
}
.confirmation-modal-title {
font-size: 24px;
margin-bottom: 20px;
line-height: 1.3;
}
.confirmation-modal-text {
font-size: 15px;
line-height: 1.6;
}
.confirmation-modal-actions {
flex-direction: row;
gap: 12px;
padding: 0 24px 32px 24px;
justify-content: center;
flex-wrap: wrap;
}
.confirmation-btn-edit,
.confirmation-btn-generate {
width: 100%;
min-width: unset;
flex: 1 1 auto;
max-width: 200px;
}
}
/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
.confirmation-modal-content {
max-width: 540px;
}
.confirmation-modal-body {
padding: 44px 36px 28px 36px;
}
.confirmation-modal-actions {
padding: 0 36px 36px 36px;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.confirmation-modal-content {
border-top-width: 5px;
border-top-color: var(--tier-color);
}
.confirmation-btn-edit {
border-width: 2px;
}
.confirmation-btn-generate {
border-width: 2px;
}
}
/* ===============================================
Success Modal Styles (Thank You Modal)
=============================================== */
/* Success Modal Overlay */
.success-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
padding: 20px;
opacity: 1;
transition: opacity 0.3s ease;
overflow-y: auto;
}
/* Success Modal Content */
.success-modal-content {
background: var(--neutral-100);
max-width: 590px;
width: 100%;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideInModal 0.3s ease;
margin: 0 auto;
overflow: hidden;
border-top: 4px solid var(--tier-color);
}
/* Success Modal Body */
.success-modal-body {
padding: 48px 40px 32px 40px;
text-align: center;
}
/* Success Checkmark Icon */
.success-checkmark-icon {
margin: 0 auto 24px;
display: flex;
justify-content: center;
align-items: center;
}
.success-checkmark-icon svg {
display: block;
}
/* Success Modal Title */
.success-modal-title {
color: #333333;
font-family: var(--main-font);
font-size: 28px;
font-weight: 700;
margin: 0 0 16px 0;
line-height: 1.3;
letter-spacing: -0.01em;
}
/* Success Modal Text */
.success-modal-text {
color: #333333;
font-family: var(--main-font);
font-size: 16px;
font-weight: 400;
margin: 0 0 12px 0;
line-height: 1.6;
}
.success-modal-text-secondary {
color: #666666;
font-family: var(--main-font);
font-size: 15px;
font-weight: 400;
margin: 0;
line-height: 1.6;
}
/* Success Modal Actions */
.success-modal-actions {
display: flex;
gap: 16px;
justify-content: center;
padding: 0 40px 40px 40px;
}
/* Success Close Button */
.success-btn-close {
padding: 12px 32px;
border-radius: 0;
font-family: var(--main-font);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.2s ease;
min-width: 120px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--tier-color);
outline: none;
background-color: var(--tier-color);
color: var(--text-color-inverse);
}
.success-btn-close:hover:not(:disabled) {
background-color: var(--tier-color-active);
border-color: var(--tier-color-active);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(204, 0, 0, 0.25);
}
.success-btn-close:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(204, 0, 0, 0.2);
}
.success-btn-close:focus-visible {
outline: 2px solid var(--tier-color);
outline-offset: 2px;
}
.success-btn-close:disabled {
background-color: #cccccc;
color: #666666;
border-color: #cccccc;
cursor: not-allowed;
opacity: 0.7;
transform: none;
}
/* Success Modal Responsive Design */
@media (max-width: 768px) {
.success-modal-overlay {
padding: 16px;
}
.success-modal-content {
max-width: 100%;
margin: 0;
max-height: 90vh;
border-radius: 0;
}
.success-modal-body {
padding: 40px 24px 28px 24px;
}
.success-modal-title {
font-size: 24px;
margin-bottom: 16px;
}
.success-modal-text {
font-size: 15px;
}
.success-modal-text-secondary {
font-size: 14px;
}
.success-modal-actions {
padding: 0 24px 32px 24px;
}
.success-btn-close {
width: 100%;
min-width: unset;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.confirmation-modal-overlay {
transition: none;
}
.confirmation-modal-content {
animation: none;
}
.confirmation-btn-edit,
.confirmation-btn-generate {
transition: background-color 0.1s ease, color 0.1s ease;
}
.confirmation-btn-edit:hover:not(:disabled),
.confirmation-btn-generate:hover:not(:disabled) {
transform: none;
}
.confirmation-btn-arrow {
transition: none;
}
}
/* ===============================================
Tier Bar Chart Styles (Score vs Total Participants)
=============================================== */
/* Bar Chart Container */
.tier-bar-chart-container {
margin: 24px 0;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
}
.tier-bar-chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.tier-bar-chart-title {
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 16px;
font-weight: 600;
margin: 0;
}
.tier-bar-chart-stats {
display: flex;
gap: 16px;
font-family: var(--main-font);
font-size: 12px;
color: var(--neutral-600);
}
.stat-item {
font-weight: 600;
}
.stat-loading,
.stat-error {
color: #999;
font-style: italic;
}
/* Bar Chart Bars */
.tier-bar-chart-bars {
display: flex;
flex-direction: column;
gap: 12px;
}
.tier-bar-item {
position: relative;
}
.tier-bar-label {
font-family: var(--main-font);
font-size: 14px;
font-weight: 600;
color: var(--neutral-600);
margin-bottom: 6px;
}
.tier-bar-item.active .tier-bar-label {
color: var(--tier-color);
font-weight: 700;
}
.tier-bar-wrapper {
position: relative;
height: 32px;
background: #EDEDED;
border-radius: 4px;
overflow: hidden;
}
.tier-bar-fill {
height: 100%;
background: var(--neutral-600);
border-radius: 4px;
transition: width 0.5s ease, background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 8px;
min-width: 40px;
}
.tier-bar-fill.active {
background: var(--tier-color);
}
.tier-bar-value {
font-family: var(--main-font);
font-size: 12px;
font-weight: 700;
color: var(--text-color-inverse);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.tier-bar-user-marker {
position: absolute;
top: -4px;
width: 3px;
height: 40px;
background: var(--tier-color);
border-radius: 2px;
z-index: 10;
box-shadow: 0 0 4px rgba(204, 0, 0, 0.5);
}
.tier-bar-chart-labels {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #E5E7EB;
}
.tier-bar-chart-labels span {
text-align: center;
color: var(--neutral-600);
font-family: var(--main-font);
font-size: 14px;
font-weight: 600;
}
.tier-bar-chart-labels span.active {
color: var(--tier-color);
font-weight: 700;
}
.tier-bar-chart-user-info {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #E5E7EB;
}
.user-score-indicator {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--main-font);
font-size: 14px;
font-weight: 600;
color: var(--tier-color);
}
.indicator-dot {
width: 12px;
height: 12px;
background: var(--tier-color);
border-radius: 50%;
box-shadow: 0 0 4px rgba(204, 0, 0, 0.5);
}
.tier-bar-chart-loading,
.tier-bar-chart-error {
text-align: center;
padding: 20px;
color: #999;
font-family: var(--main-font);
font-size: 14px;
}
/* Responsive Design */
@media (max-width: 768px) {
.tier-bar-chart-container {
padding: 16px;
}
.tier-bar-chart-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.tier-bar-chart-stats {
flex-direction: column;
gap: 8px;
}
.tier-bar-chart-labels {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================
Bubble Decoration - Bottom Left Corner
============================================ */
/**
* Professional decorative bubble element positioned at bottom-left
* of all pages except the Result Page.
*
* Best Practices:
* - Absolute positioning relative to page content (not floating/fixed)
* - Precise positioning with rotation for design accuracy
* - Low z-index to stay behind interactive content
* - Responsive scaling for mobile devices
* - Optimized image loading attributes
* - Accessibility: decorative only, hidden from screen readers
* - Hardware acceleration via transform for smooth rendering
* - CSS custom properties for maintainable responsive values
*/
.bubble-decoration {
/* CSS Custom Properties for maintainable responsive positioning */
--bubble-left-offset: -74px;
--bubble-bottom-offset: 63.474px;
/* Absolute positioning relative to the page (body),
so the bubble sits at the visual bottom-left
of the layout, but scrolls naturally with the
document instead of floating over content. */
position: absolute;
left: var(--bubble-left-offset);
bottom: var(--bubble-bottom-offset);
z-index: 1;
/* Ensure it doesn't interfere with footer or interactive elements */
pointer-events: none;
/* Smooth fade-in animation */
opacity: 0;
animation: bubble-fade-in 0.6s ease-out 0.3s forwards;
/* Enable hardware acceleration for smooth rendering */
will-change: transform, opacity;
/* Prevent layout shifts */
contain: layout style paint;
}
.bubble-decoration img {
display: block;
width: 435.975px;
height: 435.975px;
/* PNG image dimensions: 1283x1819 (aspect ratio ~0.705:1) */
/* Maintain square display area while preserving PNG's natural aspect ratio */
aspect-ratio: 435.97 / 435.97;
/* Professional PNG image implementation - optimized for bubble decoration */
/* PNG doesn't have internal transforms like SVG, so no rotation compensation needed */
/* If image appears incorrectly oriented, uncomment one of the transform options below */
transform: none;
/* No transform needed for PNG - image should display in natural orientation */
/* Orientation fix options (uncomment if image appears flipped):
- transform: rotate(180deg); for complete flip
- transform: scaleY(-1); for vertical flip (upside-down fix)
- transform: scaleX(-1); for horizontal flip (left-right mirror)
- transform: scaleX(-1) scaleY(-1); for both flips (equivalent to 180deg rotation)
*/
/* Preserve aspect ratio and prevent distortion */
object-fit: contain;
/* Optimize rendering quality for PNG images */
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
/* Enable hardware acceleration for smooth rendering (if transforms are applied) */
will-change: auto;
/* Set to 'transform' if using transforms above */
/* Prevent subpixel rendering issues */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/* Set transform origin to center for any potential transforms */
transform-origin: center center;
}
/* Fade-in animation for smooth appearance */
/* Note: Transform is applied to img element, so animation only affects opacity */
@keyframes bubble-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Responsive adjustments for mobile devices */
/* Maintain proportional scaling while preserving design specifications */
@media (max-width: 1200px) {
.bubble-decoration {
left: -100px;
bottom: 50px;
}
.bubble-decoration img {
width: 326.98px;
height: 326.98px;
/* Scale proportionally: 435.975 * 0.75 = 326.98 */
}
}
@media (max-width: 768px) {
.bubble-decoration {
left: -80px;
bottom: 40px;
}
.bubble-decoration img {
width: 261.59px;
height: 261.59px;
/* Scale proportionally: 435.975 * 0.6 = 261.59 */
}
}
@media (max-width: 480px) {
.bubble-decoration {
left: -60px;
bottom: 30px;
}
.bubble-decoration img {
width: 160px;
height: 160px;
/* Scale proportionally: 435.975 * 0.4 = 174.39 */
}
}
/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
.bubble-decoration {
animation: none;
opacity: 1;
}
.bubble-decoration img {
/* Maintain natural orientation for PNG image even with reduced motion */
transform: none;
/* PNG doesn't need rotation compensation */
will-change: auto;
/* Disable will-change for reduced motion */
}
}
/* Hide bubble decoration on Report Page (Result View) */
/* When .result-page-wrapper is present inside #assessment-app, hide the bubble */
body:has(#assessment-app .result-page-wrapper) .bubble-decoration,
#assessment-app:has(.result-page-wrapper)~.bubble-decoration {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Fallback for browsers that don't support :has() selector */
/* Use JavaScript-based approach or check for .result-page-wrapper class */
/* Alternative: Add class to body when report view is active */
body.report-view-active .bubble-decoration {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}