/* ============================================================
EPRI — AI for Power Challenge
Production stylesheet: tokens utilities components
Font: Roboto (load Regular 400, Medium 500, SemiBold 600, Bold 700)
------------------------------------------------------------
Authoring rules:
1. Never hard-code a color, size, or spacing value in a component.
Always reference a --token variable. If a value is missing,
add it to :root first, then use it.
2. Component classes live in the .c-* namespace.
Utility classes live in the .u-* namespace.
State classes live in the .is-* / .has-* namespace.
3. Prefer composing utilities on semantic HTML before writing
a new component class.
============================================================ */
/* ---------- 1. Font face ---------- */
/* Load via in , or uncomment if self-hosting:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
*/
/* ---------- 2. Design tokens ---------- */
:root {
/* --- Brand / Primary ------------------------------------- */
--color-brand-900: #0d47a1; /* deepest blue, hover on primary */
--color-brand-800: #1565c0; /* PRIMARY BRAND — EPRI blue */
--color-brand-700: #1976d2; /* dark interactive / pressed */
--color-brand-600: #2196f3; /* active / interactive accent */
--color-brand-500: #49a8f5; /* hover on light surfaces */
--color-brand-400: #71baf6; /* icon fill on white */
--color-brand-300: #99ccf8; /* border on tinted bg */
--color-brand-200: #c0def9; /* subtle border / divider */
--color-brand-100: #e8f1fb; /* tinted bg / pill bg */
--color-brand-050: #f5fafe; /* subtle section tint (Blue 25) */
/* --- Purple ramp ----------------------------------------- */
--color-purple-900: #4a148c; /* deepest purple */
--color-purple-800: #6a1b9a; /* primary purple */
--color-purple-700: #7b1fa2; /* dark interactive */
--color-purple-600: #8e24aa; /* active accent */
--color-purple-500: #9c27b0; /* mid-purple */
--color-purple-400: #ab47bc; /* light interactive */
--color-purple-300: #ce93d8; /* border on tinted bg */
--color-purple-200: #e1bee7; /* subtle border */
--color-purple-100: #f3e5f5; /* tinted bg / pill bg */
--color-purple-050: #fdf5fe; /* subtle section tint */
/* --- Neutrals -------------------------------------------- */
--color-ink-900: #212121; /* primary text */
--color-ink-700: #424242; /* secondary text */
--color-ink-600: #616161; /* supporting text / captions */
--color-ink-500: #797d7f; /* muted text / disabled */
--color-ink-400: #9e9e9e; /* placeholder / dividers-strong */
--color-line-300: #e0e0e0; /* borders, hairlines */
--color-surface-100: #f5f5f6; /* silver 60 — alt card bg */
--color-surface-050: #fafafa; /* neutral section bg */
--color-surface-000: #ffffff; /* page / card */
/* --- Semantic -------------------------------------------- */
--color-accent-danger: #e74c3c; /* alerts, emphasis badge */
--color-success: #2e7d32;
--color-warning: #f9a825;
/* --- Gradients ------------------------------------------- */
--gradient-hero: linear-gradient(
90deg,
var(--color-brand-800) 10.8%,
var(--color-brand-600) 100%
);
--gradient-brand-vert: linear-gradient(
180deg,
var(--color-brand-800) 0%,
var(--color-brand-600) 100%
);
/* --- Typography ------------------------------------------ */
--font-sans: "Roboto", system-ui, -apple-system, Segoe UI, sans-serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Font size scale (1rem = 10px; px shown in name) */
--fs-12: 1.2rem; /* 12 — micro label, legal */
--fs-13: 1.3rem; /* 13 — card summary small */
--fs-14: 1.4rem; /* 14 — body small / card summary */
--fs-16: 1.6rem; /* 16 — body default */
--fs-18: 1.8rem; /* 18 — super label (letter-spaced) */
--fs-20: 2rem; /* 20 — H5 */
--fs-25: 2.5rem; /* 25 — H4, card titles, tier titles */
--fs-32: 3.2rem; /* 32 — H3 / section eyebrow max */
--fs-39: 3.9rem; /* 39 — H2 */
--fs-56: 5.6rem; /* 56 — H1 / hero */
--fs-hero: clamp(4rem, 4.2vw, 5.6rem); /* responsive hero: 40–56px */
/* Line heights */
--lh-tight: 1.2; /* headings */
--lh-snug: 1.35; /* sub-heads */
--lh-normal: 1.5; /* body */
--lh-relaxed: 1.6; /* long-form body */
/* Letter spacing */
--ls-tight: -0.01em;
--ls-normal: 0.25px;
--ls-wide: 1.25px;
--ls-wider: 2.4px; /* uppercase labels */
--ls-widest: 3.6px; /* eyebrow text */
/* --- Spacing scale (8-pt baseline, plus 4/12 half-steps) -- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-30: 120px;
/* --- Section rhythm (use these on wrappers) ----- */
--section-pad-y: var(--space-24); /* default 96px */
--section-pad-y-sm: var(--space-16); /* tight 64px */
--section-pad-y-lg: var(--space-30); /* generous 120px */
--section-pad-x: var(--space-10); /* 40px gutter mobile */
/* --- Layout containers ----------------------------------- */
--container-max: 1440px;
--container-content: 1280px; /* inner content max on 1440 */
--container-narrow: 720px; /* long-form reading width */
/* --- Radius ---------------------------------------------- */
--radius-xs: 2px; /* sharp accent chips */
--radius-sm: 4px;
--radius-md: 8px; /* default buttons / inputs */
--radius-lg: 12px; /* inline "Builds on" blocks */
--radius-xl: 16px;
--radius-2xl: 20px; /* card shell */
--radius-pill: 999px; /* tag pills, avatars */
/* --- Elevation (shadows) --------------------------------- */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.1); /* default card */
--shadow-lg: 0 4px 12px 2px rgba(0, 0, 0, 0.1); /* emphasized card */
--shadow-xl: 0 8px 28px 4px rgba(21, 101, 192, 0.18); /* host tier / hero */
--shadow-focus: 0 0 0 3px rgba(33, 150, 243, 0.35); /* focus ring */
/* --- Motion ---------------------------------------------- */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
/* --- z-index scale --------------------------------------- */
--z-base: 1;
--z-raised: 10;
--z-sticky: 100;
--z-modal: 1000;
--z-toast: 1100;
}
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 0ms;
--dur-base: 0ms;
--dur-slow: 0ms;
}
}
/* ---------- 3. Reset base ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 62.5%; /* 1rem = 10px */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-sans);
font-weight: var(--fw-regular);
font-size: var(--fs-16);
line-height: var(--lh-normal);
color: var(--color-ink-900);
background: var(--color-surface-000);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
svg {
display: block;
max-width: 100%;
}
button {
font: inherit;
cursor: pointer;
}
a {
color: var(--color-brand-800);
text-decoration: none;
}
a:hover {
color: var(--color-brand-900);
text-decoration: underline;
}
:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-sm);
}
div {
box-sizing: border-box;
}
/* ---------- 4. Typography classes ---------- */
/* Use these on semantic HTML (h1/h2/p) instead of styling tags
directly, so you can re-tag without losing visuals. */
.t-hero {
font-family: var(--font-sans);
font-weight: var(--fw-bold);
font-size: var(--fs-hero);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
.t-h2 {
font-weight: var(--fw-bold);
font-size: var(--fs-39);
line-height: var(--lh-tight);
letter-spacing: var(--ls-normal);
}
.t-h3 {
font-weight: var(--fw-semibold);
font-size: var(--fs-32);
line-height: 1.25;
}
.t-h4 {
font-weight: var(--fw-semibold);
font-size: var(--fs-25);
line-height: 1.3;
}
.t-h5 {
font-weight: var(--fw-medium);
font-size: var(--fs-20) !important;
line-height: var(--lh-snug) !important;
}
.t-super {
font-weight: var(--fw-medium);
font-size: var(--fs-18);
line-height: 1.4;
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.t-body {
font-size: var(--fs-16) !important;
line-height: var(--lh-relaxed) !important;
}
.t-body-sm {
font-size: var(--fs-14) !important;
line-height: var(--lh-normal) !important;
}
.t-caption {
font-size: var(--fs-13);
line-height: var(--lh-normal);
color: var(--color-ink-600);
}
.t-micro {
font-size: var(--fs-12);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-weight: var(--fw-medium);
color: var(--color-ink-600);
}
.t-eyebrow {
font-size: var(--fs-12);
letter-spacing: var(--ls-widest);
text-transform: uppercase;
font-weight: var(--fw-bold);
color: var(--color-brand-800);
}
/* Text color helpers */
.t-ink {
color: var(--color-ink-900);
}
.t-ink-muted {
color: var(--color-ink-600);
}
.t-ink-soft {
color: var(--color-ink-500);
}
.t-brand {
color: var(--color-brand-800);
}
.t-invert {
color: var(--color-surface-000);
}
/* Inverted variants when placed on the gradient hero */
.on-brand .t-hero,
.on-brand .t-h2,
.on-brand .t-h3,
.on-brand .t-h4,
.on-brand .t-body,
.on-brand .t-eyebrow,
.on-brand .t-caption {
color: var(--color-surface-000);
}
/* ---------- 5. Layout utilities ---------- */
.u-container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--section-pad-x);
}
.u-container-content {
width: 100%;
max-width: var(--container-content);
margin-inline: auto;
padding-inline: var(--section-pad-x);
}
.u-container-narrow {
width: 100%;
max-width: var(--container-narrow);
margin-inline: auto;
padding-inline: var(--section-pad-x);
}
/* Flex / grid helpers (use sparingly, prefer component classes) */
.u-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
}
.u-col {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.u-center {
display: flex;
align-items: center;
justify-content: center;
}
.u-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
/* Spacing stack (margin-block-start between siblings) */
.u-stack > * * {
margin-top: var(--space-4);
}
.u-stack-sm > * * {
margin-top: var(--space-2);
}
.u-stack-lg > * * {
margin-top: var(--space-8);
}
/* Accessibility */
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Margin utilities
Naming: u-{side}-{scale}
Sides: m=all mt=top mb=bottom my=block(top bottom) mx=inline(left right)
Scale: matches --space-{n} tokens
------------------------------------------------------------------ */
/* Reset */
.u-m-0 {
margin: 0;
}
.u-mt-0 {
margin-top: 0;
}
.u-mb-0 {
margin-bottom: 0 !important;
}
.u-my-0 {
margin-block: 0;
}
.u-mx-0 {
margin-inline: 0;
}
/* Auto (centering / push) */
.u-m-auto {
margin: auto;
}
.u-mx-auto {
margin-inline: auto;
}
.u-ml-auto {
margin-inline-start: auto;
}
.u-mr-auto {
margin-inline-end: auto;
}
/* All sides */
.u-m-1 {
margin: var(--space-1);
}
.u-m-2 {
margin: var(--space-2);
}
.u-m-3 {
margin: var(--space-3);
}
.u-m-4 {
margin: var(--space-4);
}
.u-m-5 {
margin: var(--space-5);
}
.u-m-6 {
margin: var(--space-6);
}
.u-m-8 {
margin: var(--space-8);
}
.u-m-10 {
margin: var(--space-10);
}
.u-m-12 {
margin: var(--space-12);
}
.u-m-16 {
margin: var(--space-16);
}
.u-m-20 {
margin: var(--space-20);
}
.u-m-24 {
margin: var(--space-24);
}
/* Top */
.u-mt-1 {
margin-top: var(--space-1);
}
.u-mt-2 {
margin-top: var(--space-2);
}
.u-mt-3 {
margin-top: var(--space-3);
}
.u-mt-4 {
margin-top: var(--space-4);
}
.u-mt-5 {
margin-top: var(--space-5);
}
.u-mt-6 {
margin-top: var(--space-6);
}
.u-mt-8 {
margin-top: var(--space-8);
}
.u-mt-10 {
margin-top: var(--space-10);
}
.u-mt-12 {
margin-top: var(--space-12);
}
.u-mt-16 {
margin-top: var(--space-16);
}
.u-mt-20 {
margin-top: var(--space-20);
}
.u-mt-24 {
margin-top: var(--space-24);
}
/* Bottom */
.u-mb-1 {
margin-bottom: var(--space-1);
}
.u-mb-2 {
margin-bottom: var(--space-2);
}
.u-mb-3 {
margin-bottom: var(--space-3);
}
.u-mb-4 {
margin-bottom: var(--space-4);
}
.u-mb-5 {
margin-bottom: var(--space-5);
}
.u-mb-6 {
margin-bottom: var(--space-6);
}
.u-mb-8 {
margin-bottom: var(--space-8);
}
.u-mb-10 {
margin-bottom: var(--space-10);
}
.u-mb-12 {
margin-bottom: var(--space-12);
}
.u-mb-16 {
margin-bottom: var(--space-16);
}
.u-mb-20 {
margin-bottom: var(--space-20);
}
.u-mb-24 {
margin-bottom: var(--space-24);
}
/* Block — top bottom together */
.u-my-1 {
margin-block: var(--space-1);
}
.u-my-2 {
margin-block: var(--space-2);
}
.u-my-3 {
margin-block: var(--space-3);
}
.u-my-4 {
margin-block: var(--space-4);
}
.u-my-5 {
margin-block: var(--space-5);
}
.u-my-6 {
margin-block: var(--space-6);
}
.u-my-8 {
margin-block: var(--space-8);
}
.u-my-10 {
margin-block: var(--space-10);
}
.u-my-12 {
margin-block: var(--space-12);
}
.u-my-16 {
margin-block: var(--space-16);
}
.u-my-20 {
margin-block: var(--space-20);
}
.u-my-24 {
margin-block: var(--space-24);
}
/* Inline — left right together */
.u-mx-1 {
margin-inline: var(--space-1);
}
.u-mx-2 {
margin-inline: var(--space-2);
}
.u-mx-3 {
margin-inline: var(--space-3);
}
.u-mx-4 {
margin-inline: var(--space-4);
}
.u-mx-5 {
margin-inline: var(--space-5);
}
.u-mx-6 {
margin-inline: var(--space-6);
}
.u-mx-8 {
margin-inline: var(--space-8);
}
.u-mx-10 {
margin-inline: var(--space-10);
}
.u-mx-12 {
margin-inline: var(--space-12);
}
.u-mx-16 {
margin-inline: var(--space-16);
}
.u-mx-20 {
margin-inline: var(--space-20);
}
.u-mx-24 {
margin-inline: var(--space-24);
}
/* ---------- 6. Section component ---------- */
.c-section {
padding-block: var(--section-pad-y);
background: var(--color-surface-000);
}
.c-section--tint {
background: var(--color-brand-050);
}
.c-section--muted {
background: var(--color-surface-050);
}
.c-section--brand {
background: var(--gradient-hero);
color: var(--color-surface-000);
}
.c-section--compact {
padding-block: var(--section-pad-y-sm);
}
.c-section--no-pad {
padding-block: 0;
}
.c-section--roomy {
padding-block: var(--section-pad-y-lg);
}
.c-section-image {
border-radius: var(--radius-lg);
&.intro__image {
width: 100%;
height: auto;
aspect-ratio: 7 / 3; /* or 16 / 9 if your source is wider */
object-fit: cover;
display: block;
margin-top: var(--space-6);
}
}
.c-section__header {
max-width: var(--container-narrow);
margin: 0 auto var(--space-10);
text-align: center;
}
.c-section__header--left {
text-align: left;
margin-inline: 0;
}
.c-faq__answer {
display: none;
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-line-300);
font-size: var(--fs-16);
line-height: var(--lh-relaxed);
color: var(--color-ink-700);
}
.c-faq__answer ul {
list-style: disc;
padding-left: 20px;
}
.c-card.is-expanded .c-faq__answer {
display: block;
}
.c-faq__answer ol {
list-style: decimal;
padding-left: var(--space-6);
margin-top: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* ---------- 7. Buttons ---------- */
.c-btn {
--_bg: var(--color-brand-800);
--_fg: var(--color-surface-000);
--_bd: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border: 1px solid var(--_bd);
border-radius: var(--radius-md);
background: var(--_bg);
color: var(--_fg) !important;
font-weight: var(--fw-medium);
font-size: var(--fs-14);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
text-decoration: none;
box-shadow: var(--shadow-md);
transition:
background-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
}
.c-btn:hover {
--_bg: var(--color-brand-900);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
.c-btn:active {
transform: translateY(1px);
box-shadow: var(--shadow-sm);
}
.c-btn:disabled,
.c-btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
/* Secondary: outlined */
.c-btn--outline {
--_bg: transparent;
--_fg: var(--color-brand-800);
--_bd: var(--color-brand-800);
box-shadow: none;
}
.c-btn--outline:hover {
--_bg: var(--color-brand-800);
--_fg: var(--color-surface-000);
}
/* Ghost: no border */
.c-btn--ghost {
--_bg: transparent;
--_fg: var(--color-brand-800);
box-shadow: none;
}
.c-btn--ghost:hover {
--_bg: var(--color-brand-100);
--_fg: var(--color-brand-900);
}
/* Inverse: for placement on dark/gradient backgrounds */
.c-btn--invert {
--_bg: var(--color-surface-000);
--_fg: var(--color-brand-800);
}
.c-btn--invert:hover {
--_bg: var(--color-brand-100);
}
/* Ghost inverse: outlined white, for use on gradient/dark backgrounds */
.c-btn--ghost-invert {
--_bg: transparent;
--_fg: var(--color-surface-000);
--_bd: var(--color-surface-000);
box-shadow: none;
}
.c-btn--ghost-invert:hover {
--_bg: rgba(255, 255, 255, 0.12);
box-shadow: none;
}
/* Danger accent (the #E74C3C button in the design) */
.c-btn--accent {
--_bg: var(--color-accent-danger);
--_fg: var(--color-surface-000);
border-radius: var(--radius-xs);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
/* Size modifiers */
.c-btn--sm {
padding: var(--space-2) var(--space-4);
min-height: 36px;
font-size: var(--fs-12);
}
.c-btn--lg {
padding: var(--space-4) var(--space-8);
min-height: 52px;
font-size: var(--fs-16);
}
/* Inline text link with arrow — the "Explore →" / "Read more →" pattern */
.c-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-brand-800);
font-weight: var(--fw-medium);
font-size: var(--fs-14);
text-decoration: none;
transition:
gap var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
.c-link::after {
content: "→";
}
.c-link:hover {
color: var(--color-brand-900);
gap: var(--space-3);
text-decoration: none;
}
/* ---------- 8. Tag / pill ---------- */
.c-tag {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-brand-100);
color: var(--color-brand-900);
font-size: var(--fs-12);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-normal);
white-space: nowrap;
text-transform: uppercase;
}
.c-tag--neutral {
background: var(--color-surface-050);
color: var(--color-ink-700);
}
.c-tag--outline {
background: transparent;
color: var(--color-brand-800);
}
.c-tag--asset {
background: var(--color-brand-100);
color: var(--color-brand-800);
}
.c-tag--function {
background: var(--color-purple-100);
color: var(--color-purple-800);
}
.c-tag-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* ---------- 9. Card ---------- */
.c-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
background: var(--color-surface-000);
border: 1px solid var(--color-line-300);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
transition:
box-shadow var(--dur-base) var(--ease-standard),
transform var(--dur-base) var(--ease-standard);
}
/* .c-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
} */
.c-card--flat {
box-shadow: none;
}
.c-card--muted {
background: var(--color-surface-050);
}
.c-card--borderless {
border: 0;
}
/* Use case card — badge → title → tags → summary → footer */
.c-card__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: var(--radius-pill);
border: 1px solid var(--color-brand-800);
color: var(--color-brand-800);
font-size: var(--fs-16);
font-weight: var(--fw-bold);
letter-spacing: 0;
flex-shrink: 0;
}
/* Expand / collapse button */
.c-card__expand-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--color-brand-800);
font-size: var(--fs-13);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
transition: color var(--dur-base) var(--ease-standard);
}
.c-card__expand-btn:hover {
color: var(--color-brand-700);
}
.c-card__expand-btn .arrow {
display: inline-block;
font-style: normal;
transition: transform var(--dur-base) var(--ease-standard);
}
.c-card.is-expanded .c-card__expand-btn .arrow {
transform: rotate(45deg);
}
/* Expanded card — full grid row, smooth width handled by JS FLIP */
.c-card.is-expanded {
grid-column: 1 / -1;
}
/* Release line-clamp when card is expanded; keep overflow hidden for max-height transition */
.c-card.is-expanded .c-card__summary {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
max-height: 100rem;
overflow: hidden;
}
/* Use case card — icon → title → summary → tags → cta */
.c-card__icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
background: var(--color-brand-100);
color: var(--color-brand-800);
border-radius: var(--radius-pill);
flex-shrink: 0;
}
/* Standalone large icon — 72px circle with gradient fill */
.c-icon-lg {
width: 7.2rem;
height: 7.2rem;
flex-shrink: 0;
display: grid;
place-items: center;
background: var(--gradient-hero);
color: var(--color-surface-000);
border-radius: var(--radius-pill);
}
.c-icon-lg img {
width: 3.6rem;
height: 3.6rem;
object-fit: contain;
filter: brightness(0) invert(1); /* tint PNGs white on gradient bg */
}
/* Feature list item — icon left, title body right */
.c-feature-item {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--space-5);
}
.c-feature-item__copy {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-top: var(--space-2);
}
.c-card__title {
font-weight: var(--fw-regular) !important;
font-size: var(--fs-20) !important;
line-height: var(--lh-snug) !important;
color: var(--color-ink-900);
margin: 0;
}
.c-card__summary {
font-size: var(--fs-14) !important;
line-height: var(--lh-relaxed) !important;
color: var(--color-ink-700);
margin: 0;
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 6.8rem; /* ≈ 3 lines × --fs-14 × --lh-relaxed */
transition: max-height var(--dur-slow) var(--ease-emphasized);
}
.c-card__use-cases {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-2);
}
.c-card__use-case {
display: flex;
align-items: center;
flex-direction: row;
gap: var(--space-2);
font-size: var(--fs-13);
padding-bottom: var(--space-2);
color: var(--color-ink-600);
&:not(:last-of-type) {
border-bottom: 1px solid var(--color-line-300);
}
}
.c-card__use-case::before {
content: "✓";
display: grid;
place-items: center;
color: var(--color-brand-800);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.c-card__footer {
margin-top: auto; /* pushes CTA to bottom for uniform card heights */
/* bleed the border past the card's padding, then restore inner padding */
margin-inline: calc(-1 * var(--space-6));
padding: var(--space-4) var(--space-6) 0;
border-top: 1px solid var(--color-line-300);
display: flex;
align-items: center;
justify-content: flex-start;
}
/* CTA text links inside card footers — shared base */
.c-card__cta,
.c-card__footer-cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-brand-800);
font-size: var(--fs-14);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-wide);
text-decoration: none;
text-transform: uppercase;
transition:
gap var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
.c-card__cta::after {
content: "→";
font-weight: var(--fw-regular);
}
.c-card__cta:hover {
color: var(--color-brand-900);
gap: var(--space-3);
text-decoration: none;
}
.c-card__footer-cta {
min-height: 44px;
color: var(--color-brand-800) !important;
}
.c-card__footer-cta::after {
font-family: "Font Awesome 7 Free";
font-weight: 900;
content: "\f105"; /* fa-angle-right */
font-size: var(--fs-12);
letter-spacing: 0;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.c-card__footer-cta:hover {
color: var(--color-brand-700) !important;
gap: var(--space-3);
text-decoration: none;
}
/* ---------- 10. Grid layouts ---------- */
/* Use-case grid and apps grid: 3-up, wraps to 2 then 1 */
.c-grid-use-cases,
.c-grid-apps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
max-width: var(--container-content);
margin-inline: auto;
}
@media (max-width: 960px) {
.c-grid-use-cases,
.c-grid-apps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.c-grid-use-cases,
.c-grid-apps {
grid-template-columns: 1fr;
}
}
/* ---------- 11. Responsive column grid ---------- */
/*
Usage:
…
Column modifiers: c-grid--1 | c-grid--2 | c-grid--3 | c-grid--4
Gap modifiers: c-grid--gap-sm | c-grid--gap-lg
Alignment: c-grid--top | c-grid--center | c-grid--stretch (default)
Responsive behaviour (all modifiers):
> 960px — declared column count
≤ 960px — 3→2 col, 4→2 col (1 and 2 unchanged)
≤ 640px — always 1 col
*/
.c-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
width: 100%;
}
/* --- Column counts --- */
.c-grid--1 {
grid-template-columns: 1fr;
}
.c-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.c-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.c-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
/* --- Gap overrides --- */
.c-grid--gap-sm {
gap: var(--space-4);
}
.c-grid--gap-lg {
gap: var(--space-20);
}
/* --- Vertical alignment --- */
.c-grid--top {
align-items: start;
}
.c-grid--center {
align-items: center;
}
.c-grid--stretch {
align-items: stretch;
}
/* --- Responsive: tablet (≤ 960px) --- */
@media (max-width: 960px) {
.c-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
.c-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- Responsive: mobile (≤ 640px) --- */
@media (max-width: 640px) {
.c-grid--2,
.c-grid--3,
.c-grid--4 {
grid-template-columns: 1fr;
}
}
/* ---------- 12. Hero ---------- */
.c-hero {
background: var(--gradient-hero);
color: var(--color-surface-000);
padding-block: var(--space-20);
}
.c-hero--tall {
padding-block: var(--space-24);
}
.c-hero__eyebrow {
color: rgba(255, 255, 255, 0.85);
letter-spacing: var(--ls-widest);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.c-hero__title {
font-weight: var(--fw-bold);
font-size: var(--fs-hero);
line-height: var(--lh-tight);
margin: 0 0 var(--space-4);
max-width: 20ch;
}
.c-hero__subtitle {
font-size: var(--fs-18) !important;
line-height: var(--lh-relaxed) !important;
color: rgba(255, 255, 255, 0.9);
max-width: 60ch;
margin: 0;
}
.c-hero--image {
background-image: url("/ct/getfile.php?f=47DE92AF-3F2B-11F1-8DAC-0E70A83EB993&a=OD13064");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ---------- 13. Tabs (category nav) ---------- */
.c-tabs {
display: flex;
gap: 0;
padding-inline: var(--section-pad-x);
overflow-x: auto;
scrollbar-width: none;
justify-content: center;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
@media (max-width: 640px) {
flex-wrap: wrap;
justify-content: center;
overflow-x: visible;
}
}
.c-tabs::-webkit-scrollbar {
display: none;
}
.c-tab {
position: relative;
padding: var(--space-1) 0;
padding-inline: var(--space-10);
color: var(--color-ink-600);
font-weight: var(--fw-medium);
font-size: var(--fs-14);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
white-space: nowrap;
background: none;
border: 0;
border-bottom: 2px solid transparent;
cursor: pointer;
transition:
color var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
@media (max-width: 640px) {
white-space: normal;
padding-inline: var(--space-4);
padding-block: var(--space-3);
}
}
.c-tab:hover {
color: var(--color-brand-800);
}
.c-tab:not(:first-child) {
border-left: 1px solid var(--color-line-300);
@media (max-width: 640px) {
border-left: none;
}
}
.c-tab:first-child {
padding-left: 0;
@media (max-width: 640px) {
padding-left: var(--space-4);
}
}
/* ---------- 14. Timeline ---------- */
.c-timeline {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-6);
position: relative;
max-width: var(--container-content);
margin-inline: auto;
padding-top: var(--space-6);
--marker-size: 5.6rem; /* 64px */
--marker-gap: 1.2rem; /* 8px */
@media (max-width: 64rem) {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 48rem) {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 30rem) {
--marker-size: 4.8rem;
grid-template-columns: repeat(1, 1fr);
}
}
/* .c-timeline::before {
content: "";
position: absolute;
top: 56px;
left: 10%;
right: 10%;
height: 2px;
background: var(--color-brand-100);
z-index: 0;
} */
.c-timeline__step {
position: relative;
z-index: var(--z-base);
text-align: center;
}
.c-timeline__img {
border-radius: var(--radius-lg);
overflow: hidden;
max-width: 18rem;
overflow: hidden;
margin: 0 auto;
}
.c-timeline__marker {
border-radius: var(--radius-pill);
background: var(--gradient-hero);
color: var(--color-surface-000);
font-weight: var(--fw-bold);
font-size: var(--fs-25);
display: grid;
place-items: center;
position: relative;
z-index: 2;
margin: calc(var(--marker-size) / -2) auto var(--marker-gap);
width: var(--marker-size);
height: var(--marker-size);
box-shadow: 0 0 0 0.4rem #fff; /* 4px halo */
}
.c-timeline__label {
font-weight: var(--fw-semibold);
font-size: var(--fs-20);
margin-bottom: var(--space-1);
color: var(--color-ink-900);
}
.c-timeline__meta {
font-size: var(--fs-14);
color: var(--color-ink-600);
max-width: 80%;
margin: 0 auto;
}
.c-timeline__dates {
font-size: var(--fs-14);
color: var(--color-ink-600);
margin-top: var(--space-1);
}
/* ---------- 15. Membership tiers (stacking pattern) ---------- */
.c-tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
max-width: var(--container-content);
margin-inline: auto;
align-items: stretch;
}
@media (max-width: 960px) {
.c-tiers {
grid-template-columns: 1fr;
}
}
.c-tier {
position: relative;
display: flex;
flex-direction: column;
background: var(--color-surface-000);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.c-tier__band {
height: 10px;
background: var(--color-brand-400);
}
.c-tier__body {
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
flex: 1;
}
.c-tier__number {
font-size: var(--fs-12);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-ink-500);
font-weight: var(--fw-medium);
}
.c-tier__title {
font-weight: var(--fw-semibold);
font-size: var(--fs-25);
line-height: var(--lh-snug);
margin: 0;
}
.c-tier__audience {
font-size: var(--fs-13);
color: var(--color-ink-600);
margin: 0;
}
.c-tier__builds {
background: var(--color-surface-050);
border: 1px solid var(--color-line-300);
border-left: 4px solid var(--color-ink-400);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
justify-content: space-between;
}
.c-tier__builds--observer {
border-left-color: var(--color-brand-400);
}
.c-tier__builds--participant {
border-left-color: var(--color-brand-600);
margin-top: -8px;
}
.c-tier__builds-label {
font-size: var(--fs-13);
color: var(--color-ink-600);
font-weight: var(--fw-semibold);
}
.c-tier__builds-summary {
font-size: var(--fs-13);
color: var(--color-ink-600);
font-weight: var(--fw-medium);
margin: 0;
}
.c-tier__section-label {
font-size: var(--fs-12);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
color: var(--color-ink-500);
margin: var(--space-3) 0 var(--space-1);
font-weight: var(--fw-medium);
}
.c-tier__benefits {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.c-tier__benefit {
display: grid;
grid-template-columns: 24px 1fr;
gap: var(--space-3);
font-size: var(--fs-13);
line-height: var(--lh-normal);
color: var(--color-ink-700);
}
.c-tier__benefit::before {
content: "✓";
display: grid;
place-items: center;
width: 24px;
height: 24px;
background: var(--color-brand-100);
color: var(--color-brand-800);
border-radius: var(--radius-pill);
font-size: var(--fs-12);
font-weight: var(--fw-bold);
}
.c-tier__cta {
margin-top: auto;
padding-top: var(--space-4);
}
/* Participant variant — faded blue band inherited border */
.c-tier--participant .c-tier__band {
background: var(--color-brand-600);
}
/* Host variant — full gradient, stronger shadow, ribbon */
.c-tier--host .c-tier__band {
background: var(--color-brand-800);
height: 12px;
}
/* ---------- 16. CTA band (e.g. "Have an AI solution to propose?") ---------- */
.c-cta-band {
background: var(--gradient-hero);
color: var(--color-surface-000);
padding-block: var(--space-14);
}
.c-cta-band__inner {
max-width: var(--container-content);
margin-inline: auto;
padding-inline: var(--section-pad-x);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-10);
flex-wrap: wrap;
}
.c-cta-band__copy {
display: flex;
flex-direction: column;
gap: var(--space-3);
flex: 1;
}
.c-cta-band__title {
margin: 0;
}
.c-cta-band__desc {
font-size: var(--fs-16);
line-height: var(--lh-relaxed);
color: rgba(255, 255, 255, 0.88);
margin: 0;
max-width: 60ch;
}
.c-cta-band__buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
/* Centered variant — stacks content and centers it */
.c-cta-band--centered .c-cta-band__inner {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-6);
}
.c-cta-band--centered .c-cta-band__buttons {
justify-content: center;
}
/* ---- Contact Us: image-backed full-bleed CTA -------------------------
Mirrors the .c-cta-band visual language but uses a photo background
plus a dark overlay so white type stays legible. */
.c-contact {
position: relative;
isolation: isolate; /* keeps overlay z-index local */
background: var(--color-ink-900)
url("https://d1dxeoyimx6ufk.cloudfront.net/uploads/NA5/OD13064/EB5C385F.jpg")
top / cover no-repeat;
color: var(--color-surface-000);
padding-block: var(--space-20);
overflow: hidden;
}
/* Dark scrim over the photo. Tuned so 4.5:1 contrast holds for white
body copy regardless of which photo lands here. */
.c-contact__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.c-contact__title {
margin: 0;
color: var(--color-surface-000);
}
.c-contact__desc {
margin: 0;
font-size: var(--fs-18) !important;
line-height: var(--lh-relaxed) !important;
color: rgba(255, 255, 255, 0.92);
max-width: 60ch;
}
/* Slightly tighten button gap on mobile */
@media (max-width: 640px) {
.c-contact {
padding-block: var(--space-10);
}
.c-contact__inner {
gap: var(--space-3);
}
}
/* ---------- 17. Footer ---------- */
.c-footer {
background: var(--color-ink-900);
color: var(--color-surface-100);
padding-block: var(--space-10);
}
.c-footer__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--section-pad-x);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
font-size: var(--fs-13);
}
.c-footer a {
color: var(--color-surface-000);
}
/* ---------- 18. Members carousel (logos) ---------- */
.c-members {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
max-width: var(--container-content);
margin-inline: auto;
}
@media (max-width: 960px) {
.c-members {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.c-members {
grid-template-columns: 1fr;
}
}
.c-members__card {
aspect-ratio: 3 / 2;
display: grid;
place-items: center;
background: var(--color-surface-000);
border: 1px solid var(--color-line-300);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
.c-members__card img {
max-height: 60%;
max-width: 60%;
width: auto;
filter: grayscale(1);
opacity: 0.8;
transition:
filter var(--dur-base),
opacity var(--dur-base);
}
.c-members__card:hover img {
filter: grayscale(0);
opacity: 1;
}
.c-pagination {
margin-top: var(--space-6);
height: 4px;
background: var(--color-line-300);
border-radius: var(--radius-pill);
position: relative;
overflow: hidden;
max-width: 12rem;
}
.c-scroll-indicator__thumb {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: var(--color-brand-800);
border-radius: var(--radius-pill);
}
.c-members-slider {
position: relative;
}
.c-members.c-members--slider {
display: flex;
grid-template-columns: none; /* cancel the base grid */
gap: var(--space-6);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/legacy Edge */
/* Right-edge breakout: track starts at container left, bleeds past
container right all the way to the viewport edge. */
max-width: none;
margin-right: calc(50% - 50vw);
padding-right: var(--section-pad-x);
}
.c-members.c-members--slider::-webkit-scrollbar {
display: none;
}
.c-members.c-members--slider .c-members__card {
flex: 0 0 clamp(200px, 22vw, 260px);
scroll-snap-align: start;
aspect-ratio: 3 / 2;
cursor: default;
}
/* Small-screen tweak — let cards grow a bit to stay legible on phones. */
@media (max-width: 640px) {
.c-members.c-members--slider .c-members__card {
flex-basis: clamp(180px, 62vw, 240px);
}
}
/* Focus ring on the track itself (keyboard scrolling) ---------------- */
.c-members.c-members--slider:focus-visible {
outline: 0;
box-shadow: var(--shadow-focus);
border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: reduce) {
.c-members.c-members--slider {
scroll-behavior: auto;
}
}
.c-slider-controls {
margin-top: var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.c-slider-controls .c-pagination {
margin-top: 0;
flex: 1 1 auto;
}
.c-slider-nav {
display: inline-flex;
gap: var(--space-2);
flex: 0 0 auto;
}
.c-slider-nav__btn {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 0; /* prevent inline baseline gap from offsetting the icon */
background: var(--color-brand-800);
color: var(--color-surface-000);
border: 1px solid var(--color-brand-800);
border-radius: var(--radius-pill);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition:
background var(--dur-base),
border-color var(--dur-base),
color var(--dur-base),
box-shadow var(--dur-base),
transform var(--dur-fast);
}
.c-slider-nav__btn svg {
width: 18px;
height: 18px;
display: block;
margin: 0; /* clear any UA margin */
flex-shrink: 0; /* keep the 18×18 box exact, even if the button shrinks */
}
.c-slider-nav__btn:hover:not(:disabled) {
background: var(--color-brand-900);
border-color: var(--color-brand-900);
color: var(--color-surface-000);
}
.c-slider-nav__btn:active:not(:disabled) {
transform: scale(0.96);
background: var(--color-brand-700);
border-color: var(--color-brand-700);
}
.c-slider-nav__btn:focus-visible {
outline: 0;
box-shadow: var(--shadow-focus);
}
.c-slider-nav__btn:disabled {
background: var(--color-brand-200);
border-color: var(--color-brand-200);
color: var(--color-surface-000);
cursor: not-allowed;
opacity: 1;
}
/* Small screens: keep arrows comfortably tappable (>= 44px target). */
@media (max-width: 640px) {
.c-slider-nav__btn {
width: 44px;
height: 44px;
}
}
/* ---------- 19. Nav / header ---------- */
.c-nav {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--color-surface-000);
border-bottom: 1px solid var(--color-line-300);
}
.c-nav__inner {
max-width: var(--container-max);
margin-inline: auto;
padding: var(--space-3) var(--section-pad-x);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.c-nav__links {
display: flex;
gap: var(--space-6);
}
.c-nav__link {
color: var(--color-ink-700);
font-weight: var(--fw-medium);
font-size: var(--fs-14);
padding: var(--space-2) 0;
text-transform: uppercase;
letter-spacing: var(--ls-wide);
}
.c-nav__link:hover,
.c-nav__link.is-active {
color: var(--color-brand-800);
text-decoration: none;
}
/* ---------- 20. Print ---------- */
@media print {
.c-hero,
.c-cta-band,
.c-footer {
background: none !important;
color: var(--color-ink-900) !important;
}
.c-card,
.c-tier {
box-shadow: none !important;
border: 1px solid var(--color-line-300) !important;
}
}
/* ---------- 21. Filter Bar ---------- */
.c-filterbar {
background: var(--color-surface-000);
border-bottom: 1px solid var(--color-line-300);
top: 0;
z-index: var(--z-sticky);
display: none;
}
.c-filterbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
padding-block: var(--space-4);
}
/* chip group */
.c-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.c-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-line-300);
border-radius: var(--radius-pill);
background: var(--color-surface-000);
color: var(--color-ink-700);
font-size: var(--fs-13);
font-weight: var(--fw-medium);
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition:
background var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
.c-chip:hover {
border-color: var(--color-brand-800);
color: var(--color-brand-800);
background: var(--color-brand-050);
}
.c-chip.is-active {
background: var(--color-brand-800);
border-color: var(--color-brand-800);
color: var(--color-surface-000);
}
/* result count */
.c-filterbar__count {
font-size: var(--fs-13);
color: var(--color-ink-500);
white-space: nowrap;
flex-shrink: 0;
}
/* horizontal-scroll variant (no wrap) */
.c-filterbar--scroll .c-chips {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.c-filterbar--scroll .c-chips::-webkit-scrollbar {
display: none;
}
/* ---------- Challenge-Level: Additional Code ---------- */
body.webstorm-level .widget_container p {
font-size: unset;
line-height: unset;
letter-spacing: unset;
}
/* ---------- Challenge-Level: Additional Code ---------- */
body.webstorm-level {
.f-global-nav {
.fractal-global-nav#global-nav-bar {
box-shadow: none;
padding: 0 var(--section-pad-x);
box-sizing: border-box;
.f-nav-wrapper {
max-width: 100%;
margin: 0;
.f-nav-right {
.f-user-menu {
.f-user-menu-display {
.f-user-menu-links {
ul {
li {
a[href*="c_es.bix"],
a[href*="c_ent_ct_profile"],
a[href*="apps"] {
display: none;
}
}
}
}
}
}
}
@media screen and (max-width: 48em) {
width: 100%;
margin: 0;
}
.f-nav-logo {
width: 8.8rem;
height: 1.8rem;
&::before {
content: "";
width: 100%;
height: 100%;
background-size: contain;
background-image: url(https://d1dxeoyimx6ufk.cloudfront.net/uploads/NA5/OD13064/360B3C8F.png);
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
}
.f-nav-logo img {
max-height: 1.8rem;
display: none;
}
.f-nav-left,
.f-nav-right {
margin: 0;
}
}
}
.f-nav-search {
background: var(--color-surface-100);
i {
color: var(--color-ink-500);
}
.fractal-input {
input::placeholder {
color: var(--color-ink-500);
}
}
}
}
/* Challenge-Level: Containers
--------------------------------------------------------------------------------------------------------------------*/
.all_container {
width: 100%;
.content {
width: 100%;
font-family: var(--font-sans) !important;
/* Challenge-Level: Navigation
--------------------------------------------------------------------------------------------------------------------*/
#navbar.OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR {
height: 4.8rem;
max-width: 100%;
@media only screen and (max-width: 62.5em) {
height: 8rem;
}
.fractal-dynamic-nav-v1 {
.nav-desktop {
height: 4.8rem;
.desktop-nav-core-items {
max-width: 100%;
padding: 0 var(--space-10);
align-items: flex-start;
gap: var(--space-4);
.nav-parent {
height: auto;
margin: 6px 0 0 0;
border-radius: var(--radius-md);
.nav-children {
top: var(--space-8);
}
&:first-child {
a {
padding-left: 0;
}
}
a {
text-transform: none;
letter-spacing: 0;
padding: var(--space-2) var(--space-3);
line-height: 1;
font-weight: var(--fw-medium);
font-family: var(--font-sans);
}
.nav-item-hover {
display: none;
}
}
}
}
.nav-mobile {
.nav-mobile-bar {
height: 8rem;
.nav-logo-link {
width: 8.8rem;
height: 1.8rem;
&::before {
content: "";
width: 100%;
height: 100%;
background-size: contain;
background-image: url(https://d1dxeoyimx6ufk.cloudfront.net/uploads/NA5/OD13064/360B3C8F.png);
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
img {
max-width: 18rem;
max-height: 4rem;
display: none;
}
}
.nav-icon {
&::before,
&::after,
& div {
background-color: var(--color-ink-500);
}
}
}
}
}
}
}
}
/* Challenge-Level: Home
--------------------------------------------------------------------------------------------------------------------*/
#bi-page-s {
/* Challenge-Level: Home: Navigation
--------------------------------------------------------------------------------------------------------------------*/
#navbar.OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR {
position: relative;
top: unset;
background-color: var(--color-surface-000) !important;
}
/* Challenge-Level: Home: Hero
--------------------------------------------------------------------------------------------------------------------*/
#container_homepage_header {
max-width: 100%;
z-index: 1;
.f-homepage-hero {
@media only screen and (max-width: 35em) {
justify-content: center;
}
div {
font-family: var(--font-sans) !important;
}
.f-homepage-hero-center {
text-align: left;
width: 100%;
bottom: unset;
padding: 0 var(--section-pad-x);
box-sizing: border-box;
max-width: var(--container-content);
@media only screen and (max-width: 48em) {
padding: 0 var(--space-6);
text-align: center;
}
.f-homepage-hero-name {
width: 60%;
margin: 0;
h1 {
margin: 0;
}
@media only screen and (max-width: 62.5em) {
width: 100%;
min-width: 100px;
}
h1 > div > div {
font-size: var(--fs-hero);
line-height: var(--lh-tight);
font-weight: var(--fw-bold);
width: 100%;
padding: 0;
}
}
.f-homepage-hero-description {
width: 45%;
margin: 0;
@media only screen and (max-width: 62.5em) {
width: 100%;
min-width: 100px;
}
.fractal-htmlpreview {
div {
font-size: var(--fs-20);
line-height: var(--lh-snug);
width: 100%;
padding: 0;
margin: var(--space-4) 0 var(--space-6);
}
}
}
.side {
margin: 0;
.f-homepage-header-buttons {
.action-buttons {
padding: 0;
text-align: left;
.navigate-container {
display: flex;
gap: var(--space-4);
flex-direction: row-reverse;
justify-content: flex-end;
@media only screen and (max-width: 48em) {
justify-content: center;
}
.f-btn-md {
margin: 0;
font-size: var(--fs-14);
letter-spacing: var(--ls-wide);
height: auto;
padding: 1.5rem 1.6rem;
border-radius: var(--radius-md);
border: 1px solid var(--color-surface-000) !important;
letter-spacing: 0.5px;
font-weight: var(--fw-regular);
text-transform: uppercase;
transform: scale(1);
background-color: transparent !important;
font-family: var(--font-sans);
font-weight: var(--fw-bold);
&:hover {
background-color: rgba(255, 255, 255, 0.12) !important;
box-shadow: none !important;
}
}
/* .f-homepage-submit-button {
&::after {
content: "Apply to the 2026 IEL Challenge";
}
span {
display: none;
}
} */
}
}
}
}
}
}
}
#main_content {
width: 100%;
max-width: 100%;
padding: 0;
#container_1 {
width: 100%;
display: flex !important;
flex-direction: column;
margin: 0;
padding: 0;
}
#container_2,
#container_3,
#container_4 {
display: none !important;
}
}
}
/* Challenge-Level: Categories
--------------------------------------------------------------------------------------------------------------------*/
.all_container #bi-page-a,
.all_container #bi-page-b,
.all_container #bi-page-c,
.all_container #bi-page-d,
.all_container #bi-page-e,
.all_container #bi-page-f {
padding: 0;
#main_content {
#container_1,
#container_2 {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0 !important;
.widget_container {
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 0;
.boxcontent {
padding: 0;
}
}
}
#container_3,
#container_4 {
display: none !important;
}
}
}
}
/* Initiative-Level: Additional Hero
--------------------------------------------------------------------------------------------------------------------*/
.section__hero--browse-ideas,
.section__hero--submission-form {
display: none;
}
/* Initiative-Level: Hero (shared — submission form browse ideas)
--------------------------------------------------------------------------------------------------------------------*/
.body.webstorm-level #bi-page-ct-a-enter-idea .section__hero--submission-form,
.body.webstorm-level #bi-page-ct-list .section__hero--browse-ideas {
color: var(--color-surface-000);
display: flex;
padding-block: var(--space-24);
text-align: left;
width: 100%;
max-width: 100%;
background-image: url(https://d1dxeoyimx6ufk.cloudfront.net/uploads/NA5/OD13064/EB5C385F.jpg);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
/* Initiative-Level: Submission Form
--------------------------------------------------------------------------------------------------------------------*/
.body.webstorm-level {
#bi-page-ct-a-enter-idea {
#main_content {
position: relative;
}
#custom_footer {
display: block;
> tbody {
display: block;
> tr {
display: block;
> td {
display: block;
}
}
}
}
/* Submit Idea: Navigation
----------------------------------------------------------*/
#navbar.OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR {
max-width: 100%;
}
/* Submit Idea: Content
----------------------------------------------------------*/
#main_content {
padding: 0;
max-width: 100%;
background-color: var(--color-surface-050);
#main_idea_container {
position: relative;
padding: 0;
.set-section {
padding: 0;
border: none;
margin: 0;
.form-control {
color: var(--color-ink-600);
font-family: var(--font-sans);
font-size: 1.4rem;
}
}
.f-submission-image-modal {
margin: 0;
}
.checkbox,
.radio {
label {
color: var(--color-ink-600);
font-family: var(--font-sans);
font-size: var(--fs-14);
}
}
#idea-layout {
max-width: 96rem !important;
min-width: 200px;
padding: var(--space-10);
margin: var(--space-12) auto var(--space-12);
background-color: var(--color-surface-000);
border-radius: var(--radius-lg);
position: relative;
z-index: 1;
box-shadow: var(--shadow-md);
@media only screen and (max-width: 62.5em) {
transform: none;
max-width: 100% !important;
}
.col-lg-12 {
padding: 0;
#form-section {
max-width: 100% !important;
#form {
form {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-top: calc(-1 * var(--space-6));
legend,
.f-file-upload-title {
font-size: var(--fs-18);
font-weight: var(--fw-medium);
color: var(--color-ink-900);
font-family: var(--font-sans);
}
}
.redactor-box {
max-width: 100% !important;
}
.drop-zone .instructions p {
line-height: 2rem;
color: var(--color-ink-500);
font-family: var(--font-sans);
}
}
}
#side-preview-section {
margin-top: var(--space-6);
border: none;
#idea-sidebar {
#idea-sidebar-actions {
height: auto;
#sidebar-actions {
.btn-primary,
.btn {
font-size: var(--fs-16);
text-transform: unset;
font-weight: var(--fw-bold);
&:hover,
&:focus,
&:active,
&.fractal-drop-open {
box-shadow: none;
}
}
#f-submit-idea-button {
.f-submit-idea-button-container {
justify-content: center;
margin: 0;
.f-submit-idea-btn.btn-primary {
background-color: var(--color-brand-800);
color: var(--color-surface-000) !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border: 1px solid transparent;
border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
font-weight: var(--fw-medium);
font-size: var(--fs-14);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
text-decoration: none;
box-shadow: var(--shadow-md);
transition:
background-color var(--dur-base)
var(--ease-standard),
color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
&:hover {
background-color: var(--color-brand-900);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
}
.f-dropdown-submit-idea-btn.btn-primary {
border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
padding: var(--space-4) var(--space-8) var(--space-4)
var(--space-4);
background-color: var(--color-brand-800);
color: var(--color-surface-000) !important;
&:hover,
&:focus {
background-color: var(--color-brand-900);
box-shadow: var(--shadow-lg);
border: none;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
/* Initiative-Level: Browse Boards
--------------------------------------------------------------------------------------------------------------------*/
.body.webstorm-level {
#bi-page-ct-list {
padding-bottom: 0;
background-color: var(--color-surface-100);
#custom_footer {
display: block;
float: none;
width: 100%;
tbody {
display: block;
tr {
display: block;
td {
display: block;
}
}
}
}
/* Browse Ideas: Content
----------------------------------------------------------*/
#main_content {
margin-bottom: 0;
margin-top: var(--space-3);
max-width: 100%;
.fractal-button.f-btn-standard {
border-color: var(--color-line-300);
}
.fractal-widget-ideaboard {
.ideaboard-top {
background-color: var(--color-surface-000);
padding: var(--space-4) 0;
border-top: 1px solid var(--color-line-300);
border-bottom: 1px solid var(--color-line-300);
.ideaboard-filter-bar,
.ideaboard-filter-bar-placeholder {
max-width: var(--container-content);
margin: 0 auto;
}
.fractal-button.f-btn-link-animated {
&:not(.active) {
color: var(--color-ink-600);
}
&::after {
border-bottom: solid 3px var(--color-brand-600);
margin-top: 14px;
}
}
}
.ideaboard-filter-bar {
.ideaboard-filter-left {
.ideaboard-filter-button-sidebar {
color: var(--color-ink-400);
border: 1px solid var(--color-line-300);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-weight: var(--fw-regular);
margin-left: 0;
&:hover {
color: var(--color-surface-000);
background-color: var(--color-brand-800);
border-color: var(--color-brand-800);
}
&.active {
color: var(--color-surface-000);
background-color: var(--color-brand-800);
border-color: var(--color-brand-800);
}
&.filtering {
color: var(--color-surface-000);
background-color: var(--color-brand-600);
border-color: var(--color-brand-600);
}
}
}
}
.ideaboard-bottom {
max-width: var(--container-content);
padding: 0 var(--space-10);
margin: var(--space-8) auto var(--space-16);
position: relative;
.ideaboard-sidebar {
margin: 0;
&.show {
margin-right: var(--space-6) !important;
}
}
.ideasviewGrid {
.fractal-secondary-ideas-view-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
gap: var(--space-6);
.ideaboard-card.f-nov-2019-card-redesign {
width: 100%;
margin: 0;
border-radius: var(--radius-md);
.f-card-description {
.fractal-htmlpreview {
font-size: 1.4rem;
line-height: 2rem;
}
}
}
}
}
&.ideaboard-sidebarred {
.ideasviewGrid {
.fractal-secondary-ideas-view-grid {
.ideaboard-card.f-nov-2019-card-redesign {
width: 100% !important;
}
}
}
}
}
}
}
}
}
/* Challenge-Level: Sub-Pages: FAQ
--------------------------------------------------------------------------------------------------------------------*/
#bi-page-a {
.c-section-faq {
color: var(--color-surface-000);
display: flex;
padding-block: var(--space-24);
text-align: left;
width: 100%;
max-width: 100%;
background-image: url(https://d1dxeoyimx6ufk.cloudfront.net/uploads/NA5/OD13064/EB5C385F.jpg);
background-size: cover;
background-position: top;
background-repeat: no-repeat;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
#main_content {
width: 100%;
max-width: 100%;
.widget_container {
padding: 0;
}
}
}
.faq__navigation {
padding: 1.6rem 0;
.faq__navigation__list {
display: flex;
align-items: center;
justify-content: center;
.faq__navigation__item {
flex: 1;
font-size: 1.4rem;
line-height: 2.16;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
padding: 0 1.4rem;
a {
font-weight: 400;
}
&:not(:first-of-type) {
border-left: 1px solid var(--color--gray--light--2);
}
}
}
}
.section__faq {
.faq__header {
color: var(--color--titles);
display: block;
margin-bottom: 4rem;
&:not(:first-of-type) {
margin-top: 9.6rem;
}
}
.section__faq__questions {
position: relative;
.faq__jump-link {
position: absolute;
top: -24rem;
}
.faq__question__container {
background-color: var(--color--white);
padding: 2.4rem 3.2rem;
border-radius: 20px;
box-shadow: var(--box-shadow-standard);
display: flex;
flex-wrap: wrap;
align-items: center;
cursor: pointer;
&:not(:first-of-type) {
margin-top: 1.6rem;
}
&:hover {
.faq__question {
color: var(--color--blue);
}
}
.faq__question {
font-size: 2rem;
line-height: 1.2;
color: var(--color--gray--dark);
font-weight: 500;
&.selected {
color: var(--color--blue);
}
}
.faq__arrow {
margin-left: auto;
font-size: 2rem;
color: var(--color--gray--dark);
transform: rotate(0deg);
transition: 0.2s ease;
&.rotate {
transform: rotate(45deg);
}
i {
font-family: var(--font-icons);
font-style: normal;
}
}
.faq__answer {
font-size: 1.6rem;
line-height: 1.6;
color: var(--color--gray--med);
flex: 0 0 100%;
margin-top: 2.4rem;
display: none;
ol {
list-style: decimal;
padding-left: 2.4rem;
margin-top: 1.6rem;
}
}
}
}
}
.c-section__faq section {
position: relative;
}
.faq__jump-link {
position: absolute;
top: -14rem;
}
/* Challenge-Level: Hide Standard Footer
--------------------------------------------------------------------------------------------------------------------*/
body.webstorm-level #customFooter {
display: none;
}