/* theme.css — Avelo unified design system (tokens, base, components).
Extracted from the site redesign. App/shared 'legacy' styles live in local.css. */
/* ============================================================
1. DESIGN TOKENS
All CSS custom properties. Reference via var(--token-name).
============================================================ */
:root {
/* Brand colors — short aliases match the design spec naming */
--dk: #051f29; /* deep navy / dark */
--pr: #003363; /* primary dark */
--sc: #00689E; /* secondary blue */
--ac: #00A3E0; /* accent */
--light: #00BED9;
--ice: #F0F7FB;
--edu: #DDF0FC;
--pro: #E1FAEA;
--rev: #051F29;
--wh: #FFFFFF;
/* text colors */
--text-primary: #051F29;
--text-secondary: #3A5670;
--text-tertiary: #6B829A;
--text-muted: #8FA4B8;
/* Brand colors — long aliases (legacy, kept for backward compat) */
--color-dark: var(--pr);
--color-blue: var(--sc);
--color-light: var(--light);
--color-accent: var(--ac);
--color-navy: var(--dk);
--color-revenue: var(--rev);
--color-ice: var(--ice);
--color-education: var(--edu);
--color-professional: var(--pro);
--color-white: var(--wh);
--color-ice-faint: rgba(240, 247, 251, 0.75);
--color-dark-faint: rgba(0, 51, 99, 0.85);
/* Text */
--tx: #1E293B; /* body text, headings on light bg */
--txl: #475569; /* secondary body text on light bg */
--wg: #6B7280; /* captions, labels, muted */
--text-primary: var(--tx);
--text-secondary: var(--txl);
--text-muted: var(--wg);
/* Interactive */
--cta: #0C7BA6;
--ctah: #0d8bbf;
--cta-soft: #6dc3fa;
/* Status (shared with Avelo Edge) */
--status-good: #1A9F6E;
--status-warn: #C77A1A;
--status-bad: #C24B4B;
/* Fonts — short spec aliases + descriptive aliases */
--fd: 'Rubik', sans-serif; /* display / headings */
--fb: 'Plus Jakarta Sans', sans-serif; /* body */
--font-heading: var(--fd);
--font-body: var(--fb);
/* Spacing */
--section-padding: 150px 40px;
--hero-padding: 150px 0 0 0;
--cta-section-padding: 150px 40px;
--footer-padding: 64px 0 0;
--max-width: 1200px;
--max-width-narrow: 900px;
/* Grid gaps */
--gap-hero: 80px;
--gap-content: 80px;
--gap-card: 24px;
--gap-footer-col: 40px;
--gap-nav: 40px;
--gap-cta-btn: 16px;
/* Component spacing */
--card-padding: 32px;
--panel-padding: 48px 44px;
--full-bleed-padding: 64px 72px;
/* Border radius */
--radius-image: 16px;
--radius-card: 12px;
--radius-btn: 50px;
--radius-nav-cta: 6px;
--radius-badge: 4px;
--radius-social: 50%;
--radius-tag: 50px;
/* Text on dark backgrounds */
--text-on-dark: rgba(255, 255, 255, 0.85); /* p.on-dark */
--text-on-dark-nav: var(--color-white);
--text-on-dark-muted: rgba(255, 255, 255, 0.5); /* footer text */
--border-on-dark: rgba(255, 255, 255, 0.35); /* secondary button border */
--border-on-dark-hover: rgba(255, 255, 255, 0.6); /* secondary button border hover */
/* Nav */
--nav-height: 64px;
--nav-bg: transparent;
--nav-bg-stuck: rgba(10, 30, 60, 0.95);
--nav-border: rgba(255, 255, 255, 0.08);
/* Footer */
--footer-col-header: #ffffff;
--footer-link: var(--ac);
--footer-link-hover: #ffffff;
--footer-disclaimer: #ddf0fc;
--footer-divider: rgba(255, 255, 255, 0.08);
/* Borders */
--border-blue-faint: rgba(0, 104, 158, 0.06);
--border-blue-light: rgba(0, 104, 158, 0.1);
--border-light-gray: #D7D7D7;
/* Card dark variant */
--card-dark-bg: rgba(255, 255, 255, 0.05);
--card-dark-bg-hover: rgba(255, 255, 255, 0.08);
--card-dark-border: rgba(255, 255, 255, 0.1);
--card-dark-border-hover: rgba(255, 255, 255, 0.18);
--card-dark-text: rgba(255, 255, 255, 0.65);
}
/* ============================================================
2. BASE STYLES
html, body, headings, paragraphs, links, lists.
============================================================ */
html, body {
height: 100%;
scroll-behavior: smooth;
scroll-padding-top: 108px;
}
.hero-scroll {
cursor: pointer;
text-decoration: none;
color: var(--cta-soft);
transition: color 0.2s ease;
}
.hero-scroll .tag,
.hero-scroll #home-hero-scroll,
.hero-scroll #experience-hero-scroll-label {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
color: var(--cta-soft);
text-align: center;
}
#hero-scroll-indicator:hover,
#hero-scroll-indicator:hover #home-hero-scroll,
#experience-hero-scroll:hover,
#experience-hero-scroll:hover #experience-hero-scroll-label,
#company-hero-scroll:hover,
#company-hero-scroll:hover .tag { color: var(--cta); }
/* hero-scroll viewport fade — overlay dims then clears during the scroll */
.hero-scroll-fade-overlay {
position: fixed;
inset: 0;
background: #000;
opacity: 0;
pointer-events: none;
z-index: 999;
}
@keyframes hero-scroll-viewport-fade {
0% { opacity: 0; }
50% { opacity: 0.45; }
100% { opacity: 0; }
}
.hero-scroll-fade-overlay.is-active {
animation-name: hero-scroll-viewport-fade;
animation-timing-function: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
html, body { scroll-behavior: auto; }
.hero-scroll-fade-overlay.is-active { animation: none; }
}
h1, h2, h3, h4, h5 {
font-family: var(--font-heading);
}
h1 {
font-weight: 600;
font-size: 1.75rem; /* 28px — Avelo Edge page title (Developer Guide) */
line-height: 1.15;
color: var(--dk); /* #051F29 — Edge --text-primary / marketing --dk */
letter-spacing: -0.015em;
}
/* Hero h1 is white — scoped so it doesn't affect dashboard/app pages */
.hero h1,
h1.on-dark {
color: var(--color-white);
}
h2 {
font-weight: 600;
font-size: 1.25rem; /* 20px — Avelo Edge section (Developer Guide) */
line-height: 1.2;
color: var(--dk);
letter-spacing: -0.01em;
margin-bottom: 1.25rem;
}
h3 {
font-weight: 600;
font-size: 1rem; /* 16px — Avelo Edge card title (Developer Guide) */
line-height: 1.25;
color: var(--dk);
letter-spacing: -0.005em;
margin-bottom: 1rem;
}
h4 {
font-weight: 600;
font-size: 0.875rem; /* 14px — Edge has no h4; keep below h3 */
line-height: 1.3;
color: var(--dk);
margin-bottom: 0.875rem;
}
h4.accent {
font-weight: 500;
color: var(--cta);
}
h5 {
font-weight: 700;
font-size: 1rem; /* 16px */
line-height: 1.35;
color: var(--text-primary);
}
h6 {
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem; /* 16px */
line-height: 2; /* 32px */
color: var(--sc);
margin-bottom: 0;
}
h6.on-dark { color: var(--cta); }
.eyebrow + h2:not(:first-child),
.eyebrow + h3:not(:first-child) { margin-top: 7px; }
body {
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem; /* 16px */
line-height: 1.75;
color: var(--text-primary);
}
p {
color: var(--text-secondary);
}
.prose p {
max-width: 490px;
}
p.small {
font-weight: 700;
font-size: 0.75rem; /* 12px */
line-height: 1.65;
color: var(--text-muted);
}
a {
color: var(--cta);
transition: color 0.2s;
}
/* Marketing pages opt into the larger marketing type scale via the body
.marketing class (set in header.ftl for non-app pages). Global headings
above follow the Avelo Edge Developer Guide. */
.marketing {
h1 {
font-weight: 300;
font-size: clamp(2.25rem, 5.6vw, 4.375rem); /* 36 → 70px */
line-height: 1.15;
letter-spacing: -0.02em;
}
h2 {
font-weight: 400;
font-size: clamp(1.75rem, 3.4vw, 2.5rem); /* 28 → 40px */
line-height: 1.25;
}
h3 {
font-weight: 400;
font-size: 1.3125rem; /* 21px */
line-height: 1.35;
}
h4 {
font-weight: 400;
font-size: 1.625rem; /* 26px */
line-height: 1.3;
}
}
/* ============================================================
PAGE-SPECIFIC STYLES
============================================================ */
/* --- HOME | #home-hero — hero, Avelo Zone, system overview, training, partners, CTA --- */
#home-hero {
background-image: image-set(url("/images/generated/redesign/Home_Hero_IdolJennifer-5744x3253-1920w.webp") type("image/webp"), url("/images/redesign/Home_Hero_IdolJennifer.jpg") type("image/jpeg"));
}
#home-hero-content {
height: 100vh;
}
#home-tag {
color: var(--color-accent);
background-color: var(--color-ice-faint);
display: inline-block;
padding: 4px 16px;
border: 1px solid var(--border-on-dark);
margin-bottom: 20px;
border-radius: var(--radius-tag)
}
/* --- HOME | mobile hero (img stacked above text, pulled behind fixed nav) --- */
/* Shared: full-width stacked images for the mobile versions of each section */
.mobile-section-img {
display: block;
width: 100%;
height: auto;
}
/* Shared: mobile hero pattern — img pulled behind the fixed nav */
.mobile-section-hero {
margin-top: calc(-40px - var(--nav-height));
padding-bottom: 32px;
}
.mobile-section-hero h1 {
color: var(--pr);
margin-top: 24px;
}
.mobile-section-hero-sub {
font-size: 1.125rem;
line-height: 1.5;
color: var(--dk);
margin: 16px 0 24px;
}
/* Shared: mobile banner pattern — full-width ![]()
stacked above a text block. Used by section banners that show a background
image with overlay text on desktop (e.g. aveloTraining course pathway,
professionals instructor/technician banners). Pair with `.pathway-banner-mobile`
for variants with no body copy below the h2. */
.mobile-section-banner h2 { color: var(--pr); }
.mobile-section-banner > .grid-container { padding: 32px 24px; }
#hero-scroll-indicator {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
#hero-scroll-indicator i {
transform: scale(2.2, 1.7);
}
#control-section {
background: image-set(url("/images/generated/redesign/Home_S2_IdolJennifer-2534x1426-1920w.webp") type("image/webp"), url("/images/redesign/Home_S2_IdolJennifer.jpg") type("image/jpeg")) top / cover;
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
padding: 0;
}
#control-section > .grid-container {
padding: 18vh 40px 40px;
max-width: none;
}
#control-section > .grid-container p,
#control-section-mobile p {
font-weight: 400;
line-height: 2;
}
#control-section-mobile h2 { color: var(--pr); }
#control-section-mobile > .grid-container p { color: var(--dk); }
#control-section > .grid-container p {
color: var(--wh);
}
#control-bottom-bar {
margin-top: auto;
background: var(--color-dark-faint);
padding: 20px 0;
}
.control-bottom-cards {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
flex-wrap: wrap;
gap: 24px;
padding: 0 24px;
}
.control-bottom-card {
display: flex;
align-items: center;
gap: 16px;
max-width: 420px;
}
.control-bottom-card-icon {
flex: 0 0 auto;
width: 88px;
height: auto;
}
.control-bottom-card-text {
flex: 1 1 auto;
min-width: 0;
}
/* When cards stack (viewport too narrow to fit both side by side),
let each card span the full row width. */
@media screen and (max-width: 56.5em) {
.control-bottom-card { max-width: 100%; width: 100%; }
}
/* Side-by-side layout: mirror the first card so the icons sit on the
outside edges (text | icon ↔ icon | text). */
@media screen and (min-width: 56.5625em) {
.control-bottom-card:first-child {
flex-direction: row-reverse;
}
.control-bottom-card:first-child .control-bottom-card-text {
text-align: right;
}
}
/* Text styles inside each card (applies to both desktop and mobile bars) */
.control-bottom-card-text .small {
font-size: 0.75rem;
font-weight: 900;
line-height: 1.4;
margin: 0 0 6px;
}
.control-bottom-card-text h5 {
font-size: 1rem;
font-weight: 800;
line-height: 1.3;
margin: 0 0 12px;
}
.control-bottom-card-text p:not(.small) {
font-size: 1rem;
line-height: 1.4;
margin: 0;
}
/* Mobile: stacked layout */
#control-section-mobile {
display: none;
}
@media screen and (max-width: 1024px) {
#control-section {
display: none;
}
#control-section-mobile {
display: block;
}
#control-section-mobile h2 { padding-top: 15px; }
#control-bottom-bar-mobile {
background: var(--color-dark);
padding: 16px 0;
}
}
#avelo-zone-section {
background-position: top;
background-image: image-set(url("/images/generated/redesign/Home_S3_IdolJennifer-2000x1128-1920w.webp") type("image/webp"), url("/images/redesign/Home_S3_IdolJennifer.jpg") type("image/jpeg"));
margin: 0;
padding: 0;
height: auto;
min-height: 100vh;
}
#avelo-zone-section-content {
background-color: rgba(0, 30, 70, 0.72);
min-height: 100vh;
height: auto;
padding: 150px 40px 150px 0;
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
#avelo-zone-section-content { padding-right: 10px; }
}
#avelo-zone-section-card {
background-color: rgba(0, 0, 0, 0.28);
border-radius: var(--radius-card);
padding: 28px 24px;
margin-top: 32px;
}
#avelo-zone-section-card p {
font-size: 0.75rem;
line-height: 1.667;
margin-bottom: 0;
}
#avelo-zone-section-card p:first-child {
font-weight: 700;
margin-bottom: 4px;
}
#avelo-zone-section-card p.small {
font-weight: 400;
}
/* Mobile: replace background-image with stacked ![]()
on top, content below */
@media screen and (max-width: 39.9375em) {
#avelo-zone-section {
background-image: none;
height: auto;
min-height: 0;
padding: 0;
}
#avelo-zone-section-content {
background-color: var(--pr);
min-height: 0;
padding: 48px 24px;
}
}
/* --- HOME | #avelo-zone-testimonial --- */
.tag.on-dark {
color: var(--color-accent);
}
#avelo-zone-testimonial {
margin: 96px 0 104px;
text-align: left;
position: relative;
}
#avelo-zone-testimonial .orbit-container {
margin: 0;
padding: 0;
list-style: none;
}
#avelo-zone-testimonial .orbit-slide {
width: 100%;
}
#avelo-zone-testimonial .testimonial-slide {
flex-wrap: nowrap;
column-gap: 24px;
}
#avelo-zone-testimonial .testimonial-portrait {
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
display: block;
}
#avelo-zone-testimonial .testimonial-text {
min-width: 0;
}
#avelo-zone-testimonial .testimonial-name {
font-size: 1.25rem;
font-weight: 800;
line-height: 1.5;
margin: 0;
}
#avelo-zone-testimonial .testimonial-role {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 0 0 8px;
opacity: 0.9;
}
#avelo-zone-testimonial .testimonial-quote {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 0;
}
#avelo-zone-testimonial .orbit-bullets {
margin: 16px 0 0;
padding: 0 0 0 164px;
text-align: left;
line-height: 1;
}
#avelo-zone-testimonial .orbit-bullets button {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 18px 0 0;
padding: 0;
background-color: rgba(17, 166, 225, 0.35);
border: 0;
border-radius: 50%;
box-shadow: none;
vertical-align: middle;
cursor: pointer;
}
#avelo-zone-testimonial .orbit-bullets button:hover {
background-color: rgba(17, 166, 225, 0.6);
}
#avelo-zone-testimonial .orbit-bullets button.is-active {
background-color: var(--color-accent);
}
@media screen and (max-width: 39.9375em) {
#avelo-zone-testimonial .testimonial-slide {
flex-wrap: wrap;
row-gap: 16px;
}
#avelo-zone-testimonial .testimonial-portrait {
width: 96px;
height: 96px;
}
#avelo-zone-testimonial .orbit-bullets {
padding-left: 0;
text-align: center;
}
}
/* --- HOME | #system-section — feature cards, product image, performance stats --- */
#system-section {
background-image: url("/images/redesign/BlueBackground.svg");
background-repeat: no-repeat;
background-size: cover;
padding: var(--section-padding);
}
#system-section-inner-heading {
margin-bottom: 50px;
}
#system-cards.grid-padding-x > .cell {
padding-left: 12px;
padding-right: 12px;
}
#system-cards-cta {
margin-top: 48px;
}
.system-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 32px;
text-align: left;
}
.system-card p:first-of-type {
flex-grow: 1;
margin-bottom: 0;
padding-bottom: 16px;
border-bottom: 0.5px solid var(--cta);
}
.system-card p:last-of-type {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 50px;
margin-top: 16px;
color: #00bed9;
font-weight: 800;
text-align: center;
}
.system-card-img {
width: 171px;
height: 171px;
object-fit: cover;
border-radius: var(--radius-social);
margin-bottom: 32px;
display: block;
}
/* --- HOME | #training-section — pathway panels --- */
#training-header {
padding-bottom: 16px;
}
.training-panel {
/* layout driven by grid-x on the element; min-height ensures image fill */
min-height: 560px;
align-items: stretch;
}
.training-panel-image {
overflow: hidden;
align-self: stretch;
}
.training-panel-image img {
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
display: block;
}
.training-panel-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--full-bleed-padding);
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
}
/* mobile: remove container min-height (cells stack), give image its own floor */
@media screen and (max-width: 39.9375em) {
.training-panel { min-height: 0; }
.training-panel-image { min-height: 280px; }
}
/* --- HOME | #destinations-section — destination/dive center cards --- */
#community-section {
background: url("/images/redesign/BlueBackground.svg");
background-repeat: no-repeat;
background-size: cover;
padding-top: 138px;
padding-bottom: 28px;
}
#destinations-header {
margin-bottom: 40px;
}
.destination-card {
margin-bottom: 24px;
}
.destination-card-img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: var(--radius-image);
margin-bottom: 16px;
display: block;
}
#destinations-panels-outer {
max-width: 960px;
}
#destinations-panels-container {
position: relative;
}
/* Vertical guide line shared by destinations and training panel containers (desktop only) */
@media screen and (min-width: 640px) {
.panels-spine::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background: var(--cta);
transform: translateX(-50%);
pointer-events: none;
z-index: 2;
}
}
/* --- HOME | #partners-section — partner logo grid, boot award --- */
#partners-section {
margin-top: 150px;
}
#partners-heading {
color: var(--pr);
line-height: 1.15;
margin-bottom: 23px;
}
#partner-cards {
row-gap: 43px;
}
.partner-card {
display: flex;
align-items: center;
gap: 24px;
background: #ffffff;
border-radius: 23px;
padding: 40px 36px;
height: 100%;
}
@media screen and (max-width: 768px) {
/* Below 768px, stack logo above text so descriptions don't squeeze.
Center vertically + horizontally so cards in the same row line up cleanly. */
.partner-card {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
text-align: center;
}
}
.partner-logo {
max-height: 70px;
width: auto;
max-width: 140px;
object-fit: contain;
flex-shrink: 0;
}
.cell.large-4 .partner-logo {
max-height: 110px;
}
.partner-card p {
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 2;
color: #4a4a4a;
margin: 0;
}
#boot-award {
margin-top: 152px;
}
#boot-award p,
#for-dive-centers-award p {
margin: 0;
}
#boot-award p.small {
color: var(--text-secondary);
}
.boot-award-img {
height: 60px;
width: 60px;
object-fit: contain;
display: block;
}
/* --- HOME | #home-cta-section — bottom CTA --- */
#home-cta-section {
margin-top: 150px;
text-align: center;
}
#home-cta-buttons {
display: flex;
gap: var(--gap-cta-btn);
justify-content: center;
flex-wrap: wrap;
margin-top: 32px;
}
/* --- BUTTONS | secondary-light variant (outlined, for light backgrounds) --- */
a.button.secondary-light,
button.button.secondary-light {
background: transparent;
border: 1.5px solid var(--cta);
color: var(--cta);
}
a.button.secondary-light:hover,
button.button.secondary-light:hover {
border-color: var(--ctah);
color: var(--ctah);
background: transparent;
}
/* --- RESPONSIVE: training panels, destination cards --- */
@media screen and (max-width: 1024px) {
.training-panel-copy {
padding: 48px 40px;
}
}
@media screen and (max-width: 768px) {
#training-header {
padding: 80px 24px 40px;
}
.training-panel-copy {
padding: 36px 24px;
}
#home-cta-buttons {
flex-direction: column;
align-items: center;
}
}
/* --- EXPERIENCE AVELO | experiential page — Avelo Zone prose, diver stories, where to dive --- */
/* Hero */
#experience-hero {
background-image: image-set(url("/images/generated/redesign/Experience_Hero_IdolJennifer_AlannahVellacott-10246x5753-1920w.webp") type("image/webp"), url("/images/redesign/Experience_Hero_IdolJennifer_AlannahVellacott.jpg") type("image/jpeg"));
background-position: center right;
height: auto;
min-height: 100svh;
padding-left: 12.5%;
}
#experience-hero .grid-container {
max-width: none;
margin-left: 0;
margin-right: 0;
}
#experience-hero-content {
padding-top: 40px;
}
#experience-hero h1 {
margin-bottom: 0;
}
.experience-hero-sub {
font-size: 1.3125rem;
line-height: 1.43;
margin: 0 0 18px;
}
#experience-hero-scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
/* --- EXPERIENCE | mobile hero only needs extra breathing room below the CTA --- */
#experience-hero-mobile { padding-bottom: 48px; }
/* --- EVENTS | nav is opaque (no nav_light), so don't pull the image behind it --- */
#events-hero-mobile { margin-top: 0; padding-bottom: 0; }
/* --- COMPANY | nav is opaque (no nav_light), so don't pull the image behind it --- */
#company-intro-mobile { margin-top: 0; }
#experience-hero-scroll i {
transform: scale(2.2, 1.7);
}
/* Section 2: What becomes possible */
#experience-possible .split-copy {
padding: var(--full-bleed-padding);
}
#experience-possible h2 {
color: var(--pr);
margin-top: 7px;
margin-bottom: 16px;
}
#experience-possible .split-copy p {
font-family: var(--font-heading);
font-size: 1.3125rem;
font-weight: 400;
line-height: 1.43;
color: #4a4a4a;
}
.experience-bullet-list {
list-style: none;
padding: 0;
margin: 20px 0 24px;
}
.experience-bullet-list li {
padding: 6px 0 6px 24px;
position: relative;
font-family: var(--font-heading);
color: var(--sc);
font-size: 1.3125rem;
font-weight: 400;
line-height: 1.43;
}
.experience-bullet-list li::before {
content: "|";
position: absolute;
left: 0;
top: 6px;
color: var(--cta);
font-weight: 700;
line-height: 1.43;
}
/* Section 3: Why try Avelo */
#experience-why {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
padding: 144px 40px 151px;
}
#experience-why-content h2 {
color: var(--pr);
margin-top: 24px;
margin-bottom: 24px;
}
#experience-why-content p {
font-weight: 400;
color: var(--pr);
}
#experience-why-content p:last-of-type {
font-family: var(--font-heading);
font-size: 1.625rem;
font-weight: 400;
line-height: 1.15;
margin-top: 24px;
}
#experience-why-content .button {
margin-top: 12px;
}
/* Section 4: Avelo Zone — split layout, image left / teal-to-white content right */
#experience-zone-content {
background: var(--color-white);
padding: var(--full-bleed-padding);
display: flex;
flex-direction: column;
justify-content: center;
}
#experience-zone-content h2 {
margin-top: 7px;
margin-bottom: 24px;
}
#experience-zone-content p {
font-size: 1rem;
line-height: 2;
margin-bottom: 1rem;
color: var(--text-secondary);
}
.experience-zone-quote {
font-size: 1.3125rem;
line-height: 1.43;
font-weight: 500;
color: var(--text-primary);
margin-top: 32px;
margin-bottom: 0;
}
/* Section 5: Diver types */
#experience-diver-types {
background: #ffffff;
}
#experience-diver-types-header {
padding: 143px 0 60px;
background: linear-gradient(to bottom, #c8eef7, #ffffff);
max-width: 100%;
width: 100%;
margin: 0;
}
.experience-diver-panel .training-panel-copy {
background: linear-gradient(to bottom, #c8eef7, #ffffff);
}
.experience-diver-panel h3 {
font-size: clamp(1.75rem, 3.4vw, 2.5rem);
line-height: 1.25;
font-weight: 500;
margin-bottom: 16px;
}
/* Section 6 + 8: white panel copy — overrides BlueTexture bg-image from .training-panel-copy */
#experience-how .training-panel-copy,
.diver-story-panel .training-panel-copy {
background: var(--color-white);
background-image: none;
}
#experience-what-to-expect h3,
#experience-how-to-start h3 {
font-size: clamp(1.75rem, 3.4vw, 2.5rem);
line-height: 1.25;
font-weight: 500;
margin-bottom: 24px;
}
#experience-what-to-expect p + .experience-bullet-list {
margin-top: 4px;
}
#experience-what-to-expect p:has(+ .experience-bullet-list) {
margin-bottom: 4px;
}
/* Bullet borders: left border line instead of pipe character */
#experience-what-to-expect .experience-bullet-list li {
padding: 0 0 0 20px;
border-left: 3px solid var(--cta);
font-family: var(--font-body);
color: var(--text-primary);
font-size: 1rem;
line-height: 1.65;
}
#experience-what-to-expect .experience-bullet-list li + li {
margin-top: 12px;
}
#experience-what-to-expect .experience-bullet-list li::before {
display: none;
}
/* Section 7: Environments */
#experience-environments {
background-image: image-set(url("/images/generated/redesign/Experience_S8_IdolJennifer_Hero-8325x4019-1920w.webp") type("image/webp"), url("/images/redesign/Experience_S8_IdolJennifer_Hero.jpg") type("image/jpeg"));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
min-height: 926px;
padding: 139px 40px 151px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
#experience-environments .grid-container {
width: 100%;
}
.experience-env-tags {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px 24px;
width: 100%;
max-width: 1440px;
margin: 40px auto 0;
}
@media screen and (max-width: 768px) {
.experience-env-tags {
justify-content: center;
}
}
/* h6 color overrides: cta on certain light sections, white in dark banners */
#experience-stories h6 { color: var(--cta); }
#avelo-training-pathway-header h6.on-dark,
#company-intro h6.on-dark,
.pathway-banner-text h6.on-dark { color: var(--color-white); }
/* h6 → next-header spacing per Sketch, grouped by value */
.experience-diver-panel .training-panel-copy h6 + h3:not(:first-child),
#experience-stories-header h6 + h2:not(:first-child),
.avelo-training-pathway-card h6 + h3:not(:first-child),
#avelo-training-pathway-header h6 + h2:not(:first-child),
#avelo-system-architecture-copy h6 + h2:not(:first-child),
.avelo-system-callout-card h6 + h3:not(:first-child),
#company-values-header h6 + h2:not(:first-child),
#company-press-header h6 + h2:not(:first-child),
#company-video-header h6 + h2:not(:first-child),
.pathway-banner-text h6 + h2:not(:first-child) { margin-top: 0; }
#avelo-system-faq-header h6 + h2:not(:first-child),
#for-dive-centers-faq h6 + h2:not(:first-child),
#professionals-faq-header h6 + h2:not(:first-child) { margin-top: 8px; }
#experience-diver-types-header h6 + h2:not(:first-child),
#avelo-training-philosophy h6 + h2:not(:first-child),
#avelo-system-mode-copy h6 + h2:not(:first-child),
#avelo-system-edge h6 + h2:not(:first-child),
#for-dive-centers-community h6 + h2:not(:first-child),
#professionals-recognized-header h6 + h2:not(:first-child) { margin-top: 10px; }
#for-dive-centers-advantage h6 + h2:not(:first-child) { margin-top: 2px; }
#experience-how-to-start h6 + h3:not(:first-child) { margin-top: 4px; }
#experience-what-to-expect h6 + h3:not(:first-child) { margin-top: 11px; }
.for-dive-centers-intro-copy h6 + h1:not(:first-child) { margin-top: 17px; }
/* Shared by both desktop (#experience-environments) and mobile (-mobile) */
#experience-environments h2,
#experience-environments-mobile h2 {
color: var(--pr);
margin-top: 0;
margin-bottom: 0;
}
#experience-environments h3,
#experience-environments-mobile h3 {
line-height: 1.43;
margin-top: 0;
}
/* Mobile-only stacked layout (image → text block → chip list) */
#experience-environments-mobile > .grid-container { padding: 48px 0 24px; }
#experience-environments-mobile .experience-env-tags {
margin: 16px auto 0;
padding: 0 24px 12px;
}
/* Section 8: Diver stories */
#experience-stories {
background: var(--color-white);
}
#experience-stories-header {
padding: 150px 40px 66px;
text-align: center;
}
/* Story image cells: background-image stretches to match content height via flexbox align-self */
.diver-story-panel .training-panel-image {
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
min-height: 400px;
}
.story-liz-image {
background-image: image-set(url("/images/generated/redesign/Experience_S9_IdolJennifer_LizParkinson-7321x5108-1920w.webp") type("image/webp"), url("/images/redesign/Experience_S9_IdolJennifer_LizParkinson.jpg") type("image/jpeg"));
}
.story-george-image {
background-image: image-set(url("/images/generated/redesign/Experience_S9_GeorgeLloyd-2844x1985-1920w.webp") type("image/webp"), url("/images/redesign/Experience_S9_GeorgeLloyd.jpg") type("image/jpeg"));
}
.diver-story-pullquote {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3.4vw, 2.5rem);
font-weight: 500;
line-height: 1.25;
color: var(--text-primary);
border-left: 3px solid var(--color-accent);
padding-left: 20px;
margin: 24px 0;
}
.diver-story-attribution {
font-size: 1.3125rem;
font-weight: 500;
color: var(--dk);
margin-bottom: 4px;
}
.diver-story-role {
font-size: 1rem;
color: var(--text-muted);
margin-bottom: 20px;
}
.diver-story-body {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--text-secondary);
}
/* Section 9: Bottom CTA */
#experience-cta {
background: var(--color-white);
padding: var(--cta-section-padding);
}
#experience-cta h2 {
margin-bottom: 16px;
}
.experience-cta-label {
font-size: 1.3125rem;
font-weight: 500;
line-height: 1.43;
color: var(--text-secondary);
margin-bottom: 32px;
}
/* Responsive */
/* At 1025–1400px the 926px min-height causes heavy cropping of the left diver;
reduce height so background-size:cover scales the image smaller, keeping both divers visible */
@media screen and (max-width: 1400px) {
#experience-environments {
min-height: 700px;
padding: 120px 40px;
}
}
@media screen and (max-width: 1024px) {
#experience-hero-content {
padding-top: 20px;
}
#experience-why {
padding: 100px 40px;
}
#experience-environments {
min-height: 600px;
padding: 100px 40px;
}
}
@media screen and (max-width: 768px) {
#experience-environments {
min-height: 0;
padding: 80px 24px;
}
#experience-diver-types-header {
padding: 80px 24px 40px;
}
}
@media screen and (max-width: 640px) {
/* Small screens: reduce hero padding so content doesn't crowd the viewport */
#experience-hero {
padding-top: 100px;
padding-bottom: 60px;
}
#experience-hero-content {
padding-top: 12px;
}
/* Subtext can go smaller on mobile */
.experience-hero-sub {
font-size: 1.125rem;
}
/* Bump down the emphasis paragraph on small screens */
#experience-why-content p:last-of-type {
font-size: 1.3125rem;
}
/* Story images: proportional height when stacked full-width on mobile */
.diver-story-panel .training-panel-image {
min-height: 300px;
}
/* Diver panels stack on mobile */
.experience-diver-panel h3 {
font-size: 1.5rem;
}
.diver-story-pullquote {
font-size: 1.25rem;
}
.diver-story-attribution {
font-size: 1rem;
}
/* CTA label */
.experience-cta-label {
font-size: 1rem;
}
}
/* Legacy React component text styles */
p.introText {
color: var(--text-secondary);
font-size: 1.125rem;
line-height: 1.75;
}
p.introTextBold {
font-weight: 500;
color: var(--text-secondary);
}
p.subtitle {
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 0;
}
h2.subtext,
h3.subtext {
color: var(--color-white);
}
p.subtext {
font-size: 0.75rem;
line-height: 1.4;
}
/* ============================================================
3. LAYOUT UTILITIES
============================================================ */
.page-width {
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
}
/* ============================================================
3. TYPOGRAPHY UTILITIES
.tag, .label, .badge, .nav-link, .on-dark, .introText, .subtitle, etc.
============================================================ */
.tag {
font-weight: 700;
font-size: 0.75rem;
line-height: 1;
color: var(--cta);
}
.tag-sc {
display: block;
font-weight: 600;
font-size: 1rem;
line-height: 1;
color: var(--sc);
margin-bottom: 8px;
}
.tag-sc.on-dark { color: var(--color-white); }
.label {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.75rem;
line-height: 1;
color: var(--cta);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.badge {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.6875rem; /* 11px */
line-height: 1;
color: var(--cta);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.nav-link {
font-weight: 500;
font-size: 0.875rem; /* 14px */
line-height: 1;
color: var(--text-on-dark-nav);
}
.footer-text {
font-size: 0.8125rem; /* 13px */
line-height: 1;
color: var(--text-on-dark-muted);
}
/* White overrides — text on dark backgrounds */
h1.on-dark,
h2.on-dark,
h3.on-dark,
h4.on-dark,
h5.on-dark { color: var(--color-white); }
p.on-dark { color: var(--text-on-dark); }
/* ============================================================
4. BUTTONS
Primary, secondary, and hover states.
============================================================ */
a.button,
button.button,
.button {
align-items: center;
padding: 10px 30px;
background-color: var(--cta);
color: var(--color-white);
font-weight: 600;
font-size: 15px;
line-height: 1;
border-radius: var(--radius-btn);
border: none;
cursor: pointer;
margin: 0 0.5rem 0.5rem 0;
}
a.button:hover,
button.button:hover,
.button:hover {
background-color: var(--ctah);
color: var(--color-white);
}
a.button.disabled,
button.button:disabled,
.button.disabled,
.button[disabled] {
opacity: 0.5;
pointer-events: none;
}
/* Header nav CTA: no margin — the nav's flex gap handles spacing */
.main-nav-links .button {
margin: 0;
}
.site-header:not(.nav-solid):not(.nav-scrolled) .main-nav-links .button {
background: var(--pr);
}
.site-header:not(.nav-solid):not(.nav-scrolled) .main-nav-links .button:hover {
background: var(--dk);
}
.button.secondary {
background: transparent;
border: 1.5px solid var(--border-on-dark);
color: var(--color-white);
}
.button.secondary:hover {
border-color: var(--border-on-dark-hover);
background: transparent;
}
/* ============================================================
5. ACCORDION
Foundation accordion overrides.
============================================================ */
.accordion {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.accordion-title {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.875rem;
color: var(--color-blue);
padding: 18px 0;
border: none;
border-bottom: 1px solid var(--border-blue-faint);
background: transparent;
}
.accordion-title:hover {
color: var(--pr);
background: transparent;
}
.accordion-content {
font-size: 0.95rem;
line-height: 1.75;
color: var(--text-secondary);
padding: 20px 0;
background: transparent;
border: none;
}
/* ============================================================
6. LAYOUT & HERO
.hero, .section, .hero-content, .section-label, .prose
============================================================ */
.hero {
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
padding: var(--hero-padding);
}
.section-label {
display: block;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.75rem;
line-height: 1;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.section-label.on-light { color: var(--color-blue); }
.section-label.on-dark { color: var(--color-accent); }
/* Eyebrow label above h1 in hero sections */
.hero-eyebrow {
display: inline-block;
font-weight: 700;
font-size: 0.75rem;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
background: var(--color-ice-faint);
border: 1px solid var(--border-on-dark);
border-radius: var(--radius-tag);
padding: 6px 16px;
margin-bottom: 20px;
}
/* ============================================================
7. CARDS
.card (light bg) and .card-dark (dark bg).
============================================================ */
.card {
background: var(--color-ice);
border-radius: var(--radius-card);
padding: 28px 24px;
}
.card h5 {
color: var(--pr);
}
.card p {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-secondary);
}
.card-dark {
background: var(--card-dark-bg);
border: 1px solid var(--card-dark-border);
border-radius: var(--radius-card);
padding: 28px 24px;
transition: background 0.2s, border-color 0.2s;
}
.card-dark:hover {
background: var(--card-dark-bg-hover);
border-color: var(--card-dark-border-hover);
}
.card-dark h5 {
color: var(--color-accent);
}
.card-dark p {
font-size: 0.95rem;
line-height: 1.65;
color: var(--card-dark-text);
}
/* ============================================================
8. FULL-BLEED SPLIT SECTIONS
.split-section with dark, light, and reverse variants.
============================================================ */
.split-section {
display: grid;
grid-template-columns: 1fr 1fr;
}
.split-section .split-image {
position: relative;
overflow: hidden;
min-height: 420px;
}
.split-section .split-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
.split-section .split-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--full-bleed-padding);
}
.split-section.split-dark .split-copy {
background: var(--color-navy);
}
.split-section.split-dark .split-copy h2,
.split-section.split-dark .split-copy h3 {
color: var(--color-white);
}
.split-section.split-dark .split-copy p {
color: var(--text-on-dark-nav);
}
.split-section.split-light .split-copy {
background: var(--color-ice);
}
.split-section.split-reverse .split-image { order: 2; }
.split-section.split-reverse .split-copy { order: 1; }
/* ============================================================
9. SITE HEADER / NAVIGATION (NEW DESIGN)
============================================================ */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
.utility-bar {
background: var(--color-navy) image-set(url("/images/generated/redesign/HeaderBackground-16667x342-1920w.webp") type("image/webp"), url("/images/redesign/HeaderBackground.png") type("image/png")) center / cover no-repeat;
height: 40px;
padding: 0 40px;
display: flex;
align-items: center;
color: white;
@media screen and (max-width: 860px) { padding: 0 24px; }
.utility-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.utility-bar-left {
display: flex;
align-items: center;
gap: 40px;
}
.utility-bar-social {
display: flex;
align-items: center;
gap: 24px;
img {
width: 18px;
height: 18px;
display: block;
}
}
.utility-bar-right {
display: flex;
align-items: center;
gap: 20px;
}
.utility-link,
.utility-bar-user a {
font-size: 0.75rem;
font-weight: 500;
color: var(--text-on-dark-nav);
}
.utility-link:hover,
.utility-bar-user a:hover { color: var(--cta); }
.utility-bar-user {
display: flex;
align-items: center;
gap: 16px;
a { cursor: pointer; }
/* Scale down the Foundation dropdown rendered by userHeader */
.dropdown.menu,
.dropdown.menu > li > a {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--text-on-dark-nav);
line-height: 1;
background: transparent;
}
.dropdown.menu > li > a:hover { color: var(--cta); }
.dropdown.menu > li > a .fa,
.dropdown.menu > li > a .fa-solid,
.dropdown.menu > li > a i {
font-size: 0.75rem;
}
}
}
.main-nav {
background: transparent;
height: var(--nav-height);
padding: 0 40px;
display: flex;
align-items: center;
transition: background 0.3s, border-color 0.3s;
border-bottom: 1px solid transparent;
@media screen and (max-width: 860px) { padding: 0 24px; }
.main-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.main-nav-logo {
img {
height: 38px;
width: auto;
display: block;
}
.logo-scrolled { display: none; }
}
.main-nav-links {
display: flex;
align-items: center;
gap: var(--gap-nav);
list-style: none;
margin: 0;
padding: 0;
flex: 1;
justify-content: right;
@media screen and (max-width: 860px) {
display: none;
&.open {
display: flex;
flex-direction: column;
position: fixed;
top: 104px;
left: 0;
right: 0;
background: var(--color-white);
padding: 8px 0 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
z-index: 999;
gap: 0;
}
&.open li {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
&.open li a {
display: block;
padding: 14px 24px;
font-size: 1rem;
}
/* Inset the CTA button so it has the same top breathing room as the text links */
&.open .button { margin-top: 14px; }
}
a {
font-size: 1rem;
font-weight: 700;
color: var(--pr);
white-space: nowrap;
&:hover { color: var(--cta); }
&.active { color: var(--cta); }
&.button {
color: var(--color-white);
&:hover { color: var(--color-white); }
}
}
}
.main-nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
color: var(--pr);
font-size: 1.25rem;
line-height: 1;
@media screen and (max-width: 860px) { display: block; }
}
}
&.nav-scrolled,
&.nav-solid {
.main-nav {
background: var(--color-white);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
.logo-transparent { display: none; }
.logo-scrolled { display: block; }
}
.main-nav-links a {
color: var(--pr);
&:hover,
&.active { color: var(--cta); }
}
}
}
/* ============================================================
UTILITY BAR DROPDOWN — written as flat selectors (not nested
inside .site-header) so specificity unambiguously beats
local.css's `.is-dropdown-submenu { left: 100% !important; }`
============================================================ */
/* Desktop: dropdown anchors to the right edge of its trigger */
.site-header .utility-bar .is-dropdown-submenu {
left: auto !important;
right: 0 !important;
margin-top: 6px;
background: var(--color-navy);
min-width: 120px;
}
.site-header .utility-bar .is-dropdown-submenu a { font-size: 0.8125rem; color: var(--text-on-dark-nav); }
.site-header .utility-bar .is-dropdown-submenu a:hover { color: var(--cta); background: rgba(255, 255, 255, 0.06); }
/* Mobile: anchor each dropdown to its trigger (position:absolute via Foundation
default) so they track the trigger if the layout shifts (e.g. when the
Dashboard link is added for logged-in users). The bumped margin-top
clears the bottom edge of the utility bar. */
@media screen and (max-width: 640px) {
/* Stretch every dropdown-menu item (Dashboard, Language, fa-user) to the
bar's full 40px so they align vertically and the submenus anchored to
a trigger's bottom (top: 100%) land flush on the bar's bottom edge. */
.site-header .utility-bar .dropdown.menu > li {
height: 40px;
display: flex;
align-items: center;
}
.site-header .utility-bar .is-dropdown-submenu {
top: 100% !important;
left: 0 !important;
right: auto !important;
margin-top: 0;
z-index: 1001;
}
/* Nudge the user-menu dropdown a little to the right of its trigger */
.site-header .utility-bar .user-menu .is-dropdown-submenu { left: 22px !important; }
}
#page-container {
padding-top: calc(40px + var(--nav-height)); /* utility bar + main nav */
}
#page-container > .hero:first-child {
margin-top: calc(-40px - var(--nav-height)); /* pull hero behind fixed header */
}
/* ============================================================
11. SITE FOOTER (NEW DESIGN)
============================================================ */
.site-footer {
background: var(--color-navy) url('/images/redesign/FooterBackground.svg') center / cover no-repeat;
padding: var(--footer-padding);
.site-footer-grid { padding: 0 40px; }
.site-footer-brand {
display: flex;
flex-direction: column;
gap: 16px;
}
.site-footer-partner-logos {
width: 210px;
margin-top: 4px;
}
.site-footer-badge {
width: 210px;
opacity: 0.8;
}
.site-footer-col {
display: flex;
flex-direction: column;
}
.site-footer-tagline {
color: white;
font-weight: 500;
font-size: 0.875rem;
margin-top: 0;
line-height: 1.5;
}
.site-footer-col-header {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.875rem;
color: var(--footer-col-header);
margin-bottom: 12px;
}
a {
display: block;
font-size: 0.875rem;
line-height: 1.4;
color: var(--footer-link);
margin-bottom: 10px;
&:hover { color: var(--footer-link-hover); }
}
.site-footer-bottom {
background: var(--color-navy);
margin-top: 40px;
color: var(--footer-disclaimer);
padding: 24px 40px 40px;
a {
color: var(--cta);
}
&--minimal {
margin-top: 0;
border-top: none;
padding-top: 0;
}
.site-footer-bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
@media screen and (max-width: 768px) {
flex-direction: column;
text-align: center;
gap: 8px;
}
}
.site-footer-bottom-links {
color: var(--cta);
}
.site-footer-bottom-links a:hover {
color: var(--color-white);
}
.site-footer-col {
display: block;
}
a {
display: inline;
font-size: inherit;
margin-bottom: 0;
}
}
}
.site-header:not(.nav-scrolled):not(.nav-solid) .main-nav-links a:hover,
.site-header:not(.nav-scrolled):not(.nav-solid) .main-nav-links a.active {
color: var(--color-white);
}
@media screen and (max-width: 860px) {
.site-header:not(.nav-scrolled):not(.nav-solid):has(.main-nav-links.open) .main-nav {
background: var(--color-white);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.site-header:not(.nav-scrolled):not(.nav-solid):has(.main-nav-links.open) .main-nav-logo .logo-transparent { display: none; }
.site-header:not(.nav-scrolled):not(.nav-solid):has(.main-nav-links.open) .main-nav-logo .logo-scrolled { display: block; }
.site-header:not(.nav-scrolled):not(.nav-solid):not(:has(.main-nav-links.open)) .main-nav-toggle {
color: var(--color-white);
}
.site-header:not(.nav-scrolled):not(.nav-solid) .main-nav-links a:not(.button):hover,
.site-header:not(.nav-scrolled):not(.nav-solid) .main-nav-links a:not(.button).active {
color: var(--ac);
}
}
.site-footer .site-footer-grid .cell:has(.site-footer-partner-logos) {
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.site-footer .site-footer-grid .cell:has(.site-footer-badge) {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
@media screen and (max-width: 1023px) {
.site-footer .site-footer-grid .cell:has(.site-footer-partner-logos),
.site-footer .site-footer-grid .cell:has(.site-footer-badge) {
justify-content: center;
}
.site-footer .site-footer-badge { margin-top: 24px; }
}
/* ============================================================
11. RESPONSIVE BREAKPOINTS (NEW SPEC)
Breakpoints for new components only. Foundation handles its own grid.
============================================================ */
@media screen and (max-width: 1024px) {
.split-section {
grid-template-columns: 1fr;
}
.split-section .split-image {
min-height: 300px;
}
.split-section .split-copy {
padding: 48px 40px;
}
.split-section.split-reverse .split-image,
.split-section.split-reverse .split-copy {
order: unset;
}
.pathway-banner {
height: 280px;
}
}
@media screen and (max-width: 768px) {
.hero {
padding: 100px 24px 60px;
}
.split-section .split-copy {
padding: 36px 24px;
}
.pathway-banner {
height: 280px;
}
}
/* ============================================================
PAGE-SPECIFIC ADDITIONS
============================================================ */
/* Sections that opt into a wider grid-container (1440px instead of Foundation default 1200px).
Pages add `page-wide` to their body_class to opt in; #partners-section is a standalone opt-in
on the home page (which doesn't carry the page-wide body class). */
.page-wide .grid-container,
#partners-section .grid-container { max-width: 90rem; }
/* --- AVELO SYSTEM | hero product row (3 product images + labels) --- */
#avelo-system-hero-products {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 26px;
margin-top: 48px;
flex-wrap: wrap;
}
#avelo-system-hero-products .avelo-system-hero-product {
flex: 1 1 240px;
max-width: 280px;
text-align: center;
}
#avelo-system-hero-products picture,
#avelo-system-hero-products img {
display: block;
margin: 0 auto 9px;
}
#avelo-system-hero-products img {
max-width: 100%;
max-height: 320px;
object-fit: contain;
}
#avelo-system-hero-products picture > img { margin-bottom: 0; }
#avelo-system-hero-products .avelo-system-hero-product:nth-child(2) img { max-height: 200px; }
@media (min-width: 1025px) {
#avelo-system-hero-products .avelo-system-hero-product:nth-child(2) img {
transform: translateY(-60px);
}
}
#avelo-system-hero-products h4 {
font-family: var(--font-heading);
font-size: 1.625rem;
font-weight: 400;
line-height: 30px;
color: var(--pr);
margin: 0;
}
/* --- AVELO SYSTEM | S2 Architecture --- */
#avelo-system-architecture {
background: var(--color-white);
padding: var(--section-padding);
}
#avelo-system-architecture-copy h2 {
color: var(--pr);
margin-bottom: 24px;
}
#avelo-system-architecture-copy p {
font-size: 1rem;
line-height: 2;
color: var(--dk);
margin-bottom: 16px;
}
#avelo-system-architecture-copy p:last-child { margin-bottom: 0; }
.avelo-system-callout-card {
background: var(--edu);
border-radius: 23px;
padding: 40px;
}
.avelo-system-callout-card h3 {
color: var(--pr);
font-weight: 400;
margin: 0 0 16px;
}
.avelo-system-callout-card p {
font-size: 1rem;
line-height: 2;
color: var(--pr);
margin-bottom: 16px;
}
.avelo-system-callout-card p:last-child { margin-bottom: 0; }
/* --- AVELO SYSTEM | S3 Hydrotank + S4 Jetpack (dark bg, white text, split layout) --- */
#avelo-system-hydrotank { background: var(--pr); padding: var(--section-padding); }
#avelo-system-jetpack { background: var(--dk); padding: var(--section-padding); }
#avelo-system-hydrotank-image img,
#avelo-system-jetpack-image img {
width: 100%;
height: auto;
display: block;
border-radius: 23px;
}
/* Desktop image↔text gap, only when side-by-side */
@media screen and (min-width: 64em) {
#avelo-system-hydrotank-copy { padding-left: 48px; }
#avelo-system-jetpack-copy { padding-right: 48px; }
}
#avelo-system-hydrotank-copy h2,
#avelo-system-jetpack-copy h2 {
color: var(--color-white);
margin-bottom: 12px;
}
#avelo-system-hydrotank-copy p,
#avelo-system-jetpack-copy p {
font-size: 1rem;
line-height: 2;
color: var(--color-white);
max-width: 32rem; /* ~500px */
margin-bottom: 0;
}
#avelo-system-hydrotank-copy p + p,
#avelo-system-jetpack-copy p + p { margin-top: 16px; }
/* Parent-ID prefix bumps specificity past the `#avelo-system-*-copy p + p` rule above */
#avelo-system-hydrotank-copy p#avelo-system-hydrotank-components,
#avelo-system-jetpack-copy p#avelo-system-jetpack-components {
margin-top: 32px;
font-size: 0.75rem;
font-weight: 900;
line-height: 1.65;
color: var(--color-white);
max-width: 34rem;
}
/* --- AVELO SYSTEM | S5 Performance and control (3 cards on BlueTexture) --- */
#avelo-system-performance {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
padding: var(--section-padding);
}
#avelo-system-performance-header { margin-bottom: 48px; }
#avelo-system-performance-header h2 {
color: var(--pr);
margin-bottom: 12px;
}
#avelo-system-performance-header p {
font-size: 1.3125rem; /* 21px */
line-height: 1.43;
color: var(--pr);
margin: 0;
}
/* Performance cards: white tiles, equal heights, circular image, left-aligned text */
.performance-card {
background: var(--color-white);
border-radius: 23px;
padding: 56px 32px 32px;
height: 100%;
}
.performance-card-img {
width: 171px;
height: 171px;
object-fit: cover;
border-radius: 50%;
display: block;
margin: 0 auto 32px;
}
.performance-card h3 {
color: var(--pr);
font-weight: 400;
font-size: 1.3125rem; /* 21px */
line-height: 1.3;
margin: 0 0 12px;
}
.performance-card p {
font-size: 1rem;
line-height: 2;
color: var(--dk);
margin: 0;
}
/* --- AVELO SYSTEM | S6 Avelo Mode (white bg, image left + copy right) --- */
#avelo-system-mode {
background: var(--color-white);
padding: var(--section-padding);
}
#avelo-system-mode-image img {
width: 100%;
height: auto;
display: block;
border-radius: 23px;
}
@media screen and (min-width: 64em) {
#avelo-system-mode-copy { padding-left: 48px; }
}
#avelo-system-mode-copy h2 {
color: var(--pr);
margin: 4px 0 12px;
}
#avelo-system-mode-copy p {
font-size: 1rem;
line-height: 2;
color: var(--dk);
max-width: 32rem;
margin-bottom: 0;
}
#avelo-system-mode-copy p + p { margin-top: 16px; }
#avelo-system-mode-copy p#avelo-system-mode-availability {
margin-top: 32px;
font-size: 0.75rem;
font-weight: 900;
line-height: 1.65;
color: var(--dk);
max-width: 34rem;
}
/* --- AVELO SYSTEM | S7 Avelo Edge & Avelo Edge Pro (white bg, 2 cards) --- */
#avelo-system-edge {
background: var(--color-white);
padding: 0 40px 150px; /* Mode's bottom padding already supplies the ~140px gap to this section */
}
#avelo-system-edge-header { margin-bottom: 32px; }
#avelo-system-edge-header h2 {
color: var(--pr);
margin-bottom: 16px;
}
#avelo-system-edge-header p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--dk);
margin: 0 auto;
max-width: 64rem;
}
/* Dashboard preview image between header and cards */
#avelo-system-edge-preview { margin-bottom: 48px; }
#avelo-system-edge-preview img {
max-width: 26rem; /* ~413px */
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* Cards: different bg per variant (edu = recreational, pro = professional) */
.avelo-system-edge-card {
height: 100%;
padding: 48px 40px;
border-radius: 23px;
}
.avelo-system-edge-card--rec { background: var(--edu); }
.avelo-system-edge-card--pro { background: var(--pro); }
.avelo-system-edge-tag {
display: block;
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
color: var(--cta); /* #11a6e1 */
margin: 0 0 4px;
}
.avelo-system-edge-card h3 {
font-family: var(--font-heading);
font-weight: 400;
font-size: clamp(1.75rem, 3.4vw, 2.5rem);
line-height: 1.25;
color: var(--dk);
margin: 0 0 24px;
}
.avelo-system-edge-card p {
font-size: 1rem;
line-height: 2;
color: var(--dk);
margin: 0 0 16px;
}
.avelo-system-edge-card p:last-child { margin-bottom: 0; }
/* --- AVELO SYSTEM | S8 Shearwater Jetpack (light surface, copy + image) --- */
#avelo-system-shearwater {
background: var(--ice);
padding: var(--section-padding);
}
#avelo-system-shearwater-image img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
#avelo-system-shearwater-copy h2 {
color: var(--pr);
margin: 0 0 20px;
}
#avelo-system-shearwater-copy p {
font-size: 1rem;
line-height: 2;
color: var(--pr);
max-width: 38rem;
margin-bottom: 0;
}
#avelo-system-shearwater-copy p + p { margin-top: 16px; }
#avelo-system-shearwater-copy p#avelo-system-shearwater-availability {
margin-top: 32px;
font-size: 0.75rem;
font-weight: 900;
line-height: 1.65;
color: var(--pr);
max-width: 38rem;
}
/* Stacking handled by Foundation `large-order-*` classes on the cells:
- At <1024px (no order classes apply) → DOM order: image, then copy
- At ≥1024px → large-order-1 puts copy left, large-order-2 puts image right */
/* --- AVELO SYSTEM | S9 Buoyancy (image left + copy right, equal widths) --- */
#avelo-system-buoyancy {
background: var(--color-white);
padding: var(--section-padding);
}
#avelo-system-buoyancy-image img {
width: 100%;
height: auto;
display: block;
border-radius: 23px;
}
#avelo-system-buoyancy-copy h2 {
color: var(--pr);
margin: 4px 0 8px;
}
.avelo-system-buoyancy-subhead {
font-size: 1.3125rem; /* 21px */
line-height: 1.43;
color: var(--pr);
margin: 0 0 20px;
}
#avelo-system-buoyancy-copy p:not(.avelo-system-buoyancy-subhead) {
font-size: 1rem;
line-height: 2;
color: var(--pr);
margin-bottom: 0;
}
#avelo-system-buoyancy-copy p:not(.avelo-system-buoyancy-subhead) + p:not(.avelo-system-buoyancy-subhead) {
margin-top: 16px;
}
/* --- AVELO SYSTEM | S10 Engineering philosophy (BlueTexture, mixed align) --- */
#avelo-system-engineering {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
padding: var(--section-padding);
}
#avelo-system-engineering-inner {
max-width: 44.5rem; /* ~712px */
margin: 0 auto;
}
#avelo-system-engineering-inner h2 {
color: var(--pr);
margin: 0 0 16px;
}
.avelo-system-engineering-subhead {
font-size: 1.3125rem; /* 21px */
line-height: 1.43;
color: var(--pr);
margin: 0 0 32px;
}
/* Body paragraphs are left-aligned; pull-quote and headers stay centered via Foundation `text-center` */
#avelo-system-engineering-inner p:not(.text-center):not(.avelo-system-engineering-subhead) {
font-size: 1rem;
line-height: 2;
color: var(--pr);
text-align: left;
margin-bottom: 0;
}
#avelo-system-engineering-inner p:not(.text-center):not(.avelo-system-engineering-subhead) + p:not(.text-center):not(.avelo-system-engineering-subhead) {
margin-top: 16px;
}
/* Pull-quote: borders top & bottom, centered, larger size */
.avelo-system-engineering-pull {
font-family: var(--font-heading);
font-size: 1.625rem;
font-weight: 400;
line-height: 1.3;
color: var(--pr);
border-top: 1px solid var(--border-blue-light);
border-bottom: 1px solid var(--border-blue-light);
padding: 30px 0;
margin: 54px 0 45px;
}
#for-dive-centers-award p,
#for-dive-centers-advantage-cards p,
#for-dive-centers-partner-types p,
#for-dive-centers-community p {
color: var(--dk);
}
/* Shared h2 styling across the centered-header sections (FAQ/CTA opt out) */
#for-dive-centers-community h2,
#for-dive-centers-partnership-header h2,
#for-dive-centers-grows-header h2,
#for-dive-centers-advantage-header h2,
#for-dive-centers-commercial-header h2 {
color: var(--pr);
margin-bottom: 16px;
}
#for-dive-centers-advantage,
#for-dive-centers-commercial,
#for-dive-centers-partner-types {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
padding: var(--section-padding);
}
/* --- FOR DIVE CENTERS | S8 Global community --- */
/* Bottom padding trimmed because the FAQ below adds another 150px top —
the default would otherwise produce ~300px of empty space between sections. */
#for-dive-centers-community {
background: var(--color-white);
padding: 150px 40px 24px;
}
#for-dive-centers-community .grid-x p {
font-size: 1rem; /* 16px */
line-height: 2;
margin: 0 auto;
max-width: 54rem;
}
/* Map placeholder: 1196 × 571 (aspect ~2.09). The Google Maps embed will inherit the container size. */
#for-dive-centers-map {
width: 100%;
max-width: 1196px;
aspect-ratio: 1196 / 571;
margin: 48px auto;
border-radius: var(--radius-image);
overflow: hidden;
background: var(--edu);
}
#for-dive-centers-community-cta {
margin-top: 32px;
}
/* --- EVENTS | events feed widget --- */
.events-feed {
margin-top: 32px;
}
.events-feed-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 32px;
}
.events-feed-filters-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--wg);
margin-right: 8px;
}
.events-feed-filter {
appearance: none;
border: 1px solid var(--border-blue-light);
background: var(--color-white);
color: var(--wg);
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.events-feed-filter:hover {
color: var(--pr);
border-color: var(--sc);
}
.events-feed-filter.is-active {
background: var(--cta);
border-color: var(--cta);
color: var(--color-white);
}
.events-feed-filter.is-active:hover {
background: var(--ctah);
border-color: var(--ctah);
}
.events-feed-count {
margin-left: auto;
font-size: 0.75rem;
color: var(--wg);
}
.events-feed-empty {
padding: 48px 0;
text-align: center;
color: var(--wg);
}
.events-feed-month {
margin-bottom: 32px;
}
.events-feed-month-title {
margin: 64px 0 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-blue-light);
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 900;
color: var(--pr);
}
/* No extra top margin on the very first month — only between sections */
.events-feed-month:first-child .events-feed-month-title {
margin-top: 24px;
}
.events-feed-list {
list-style: none;
margin: 0;
padding: 0;
}
.events-feed-row {
display: grid;
grid-template-columns: 90px 1fr auto;
gap: 32px;
align-items: start;
padding: 32px 40px;
margin-bottom: 16px;
background: var(--color-white);
border: 1px solid #c8c9c4;
border-radius: var(--radius-card);
transition: border-color 0.2s, box-shadow 0.2s;
}
.events-feed-row:hover {
border-color: var(--sc);
box-shadow: 0 2px 12px rgba(10, 30, 60, 0.06);
}
.events-feed-date {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 0;
background: var(--color-white);
}
.events-feed-date-day {
font-family: var(--font-heading);
font-weight: 800;
font-size: 2.5rem; /* 40px */
line-height: 1;
color: var(--pr);
}
.events-feed-date-month {
font-family: var(--font-body);
font-size: 1rem; /* 16px */
font-weight: 600;
color: var(--sc);
margin-top: 4px;
letter-spacing: 0;
text-transform: none;
}
.events-feed-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 6px;
}
.events-feed-tag {
display: inline-block;
padding: 3px 12px;
background: var(--edu);
color: var(--sc);
font-family: var(--font-body);
font-size: 0.625rem; /* 10px */
font-weight: 900;
line-height: 1.4;
letter-spacing: 0.04em;
border-radius: 999px;
}
.events-feed-title {
font-family: var(--font-body);
font-size: 1rem; /* 16px */
font-weight: 500;
line-height: 1.4;
color: var(--pr);
margin: 0 0 4px;
text-transform: none;
}
.events-feed-meta {
font-size: 0.75rem; /* 12px */
font-weight: 400;
line-height: 1.5;
color: #a3a8ab;
margin: 0 0 8px;
}
.events-feed-description {
font-size: 0.75rem; /* 12px */
font-weight: 600;
line-height: 1.65;
color: var(--wg);
margin: 0;
}
/* Optional non-phone/email contact lines (location, hours, etc.) — body color */
.events-feed-contact {
list-style: none;
margin: 8px 0 0;
padding: 0;
border: none;
}
.events-feed-contact li {
font-size: 0.75rem;
font-weight: 600;
line-height: 1.65;
color: var(--wg);
margin: 0;
}
/* Phone & email — label in body color, value (linked) in sky blue */
.events-feed-phone,
.events-feed-email {
font-size: 0.75rem;
font-weight: 600;
line-height: 1.65;
color: var(--wg);
margin: 4px 0 0;
}
.events-feed-phone a,
.events-feed-email a {
color: var(--ac); /* #00A3E0 — light blue accent */
text-decoration: none;
}
.events-feed-phone a:hover,
.events-feed-email a:hover {
color: var(--cta); /* darker on hover (#00689E) */
text-decoration: underline;
}
/* Button sits at the top of the card next to the date, not centered vertically */
.events-feed-action {
align-self: start;
}
@media screen and (max-width: 768px) {
.events-feed-row {
grid-template-columns: 64px 1fr;
gap: 16px;
}
/* Button drops to a new row below the body; let it size to its content instead of stretching. */
.events-feed-action {
grid-column: 2;
align-self: start;
justify-self: start;
}
}
/* --- PRIVACY POLICY + TERMS AND CONDITIONS | adoc page typography --- */
/* Tighten the .section's top padding (default --section-padding = 150px)
for these adoc pages only. */
.section:has(.legal-doc) { padding-top: 75px; }
.legal-doc h1 {
font-family: var(--font-heading);
font-weight: 300;
font-size: clamp(2.5rem, 5vw, 4.375rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--pr);
text-align: center;
margin: 0 0 16px;
}
.legal-doc h2 {
font-family: var(--font-body);
font-size: 1.625rem;
font-weight: 600;
color: var(--pr);
margin: 0 0 20px;
}
.legal-doc .sect1 { margin-top: 64px; }
.legal-doc p,
.legal-doc li {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
line-height: 1.65;
color: var(--pr);
margin: 0 0 16px;
}
.legal-doc ul { padding-left: 24px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc .privacy-version p {
font-weight: 600;
color: var(--sc);
margin: 0 0 32px;
text-align: center;
}
/* --- ADOC EMBED | FAQ + other inline asciidoc content --- */
.adoc-embed {
margin-top: 48px;
}
.adoc-embed .document {
/* Prevent the inner LocalizedContent grid container from doubling padding. */
padding: 0;
}
.adoc-embed details {
border-bottom: 1px solid #c8c9c4;
padding: 18px 0;
}
.adoc-embed details > summary {
list-style: none;
cursor: pointer;
font-family: var(--fb);
font-weight: 600;
font-size: 1rem;
color: var(--tx);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
transition: color 0.2s;
}
.adoc-embed details > summary::-webkit-details-marker { display: none; }
.adoc-embed details > summary::after {
content: "+";
font-family: var(--fd);
font-weight: 900;
font-size: 1rem;
line-height: 1.5;
color: var(--pr);
transition: transform 0.2s;
}
.adoc-embed details[open] > summary::after { content: "\00d7"; }
.adoc-embed details > summary:hover { color: var(--sc); }
.adoc-embed details > .content,
.adoc-embed details > div.content {
padding-top: 16px;
font-size: 0.95rem;
line-height: 1.75;
color: var(--txl);
}
.adoc-embed details > .content > p:last-child { margin-bottom: 0; }
.adoc-embed h2 {
font-family: var(--fd);
font-weight: 600;
font-size: 1.25rem;
color: var(--pr);
padding-bottom: 8px;
margin: 80px 0 8px;
border-bottom: 2px solid rgba(0, 104, 158, 0.1);
}
.adoc-embed .sect1:first-child > h2,
.adoc-embed > .document > div > .sect1:first-child > h2 { margin-top: 0; }
/* --- EVENTS | Avelo Insider newsletter (TealTexture bg, inline email + button) --- */
#events-newsletter-section {
background-image: url("/images/redesign/TealBackground.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: var(--section-padding);
}
#events-newsletter-section h2 {
color: var(--pr);
margin: 0 0 16px;
}
#events-newsletter-section p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin: 0 auto 40px;
max-width: 84rem;
}
/* Side-by-side: email input + Subscribe button */
.insider-form-minimal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
max-width: 640px;
margin: 0 auto;
}
.insider-form-minimal-email {
flex: 1 1 320px;
min-width: 0;
padding: 14px 16px;
border: 1px solid #c8c9c4;
border-radius: 8px;
background: var(--wh);
font-family: var(--fb);
font-size: 0.9375rem;
color: var(--tx);
box-sizing: border-box;
margin-bottom: 0;
}
.insider-form-minimal-email:focus { border-color: var(--cta); outline: none; }
.insider-form-minimal .button { margin: 0; }
@media screen and (max-width: 480px) {
.insider-form-minimal { flex-direction: column; align-items: stretch; }
}
/* --- EVENTS | Avelo Tour CTA --- */
#events-tour-section {
padding: 80px 40px;
}
#events-tour-card {
background: var(--edu);
border-radius: var(--radius-image);
overflow: hidden;
min-height: 468px;
}
#events-tour-image-cell {
padding: 0;
min-height: 468px;
background-image: image-set(url("/images/generated/redesign/Events_Section_IdolJennifer_AlannahVellacott-4300x2858-1920w.webp") type("image/webp"), url("/images/redesign/Events_Section_IdolJennifer_AlannahVellacott.jpg") type("image/jpeg"));
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
#events-tour-copy {
padding: 80px 56px;
}
.events-tour-tag {
display: block;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
line-height: 2;
color: var(--sc);
}
#events-tour-copy h2 {
color: var(--pr);
margin: 0 0 16px;
}
#events-tour-copy p {
font-size: 1rem;
line-height: 2;
color: var(--pr);
margin: 0 0 24px;
max-width: 44rem;
}
/* ===== CONTACT page ===== */
/* Section wrappers */
#contact-routing-section { padding: 150px 40px 80px; }
#contact-form { padding: 0 40px 150px; }
#contact-looking-else {
padding: 150px 40px 15px;
background-image: url("/images/redesign/TealBackground.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
/* Section headers (h2 + optional subhead) */
#contact-routing-header { margin-bottom: 64px; }
#contact-form-header { margin-bottom: 40px; }
#contact-looking-else-header { margin-bottom: 56px; }
#contact-routing-header h2,
#contact-form-header h2,
#contact-looking-else-header h2 {
color: var(--pr);
margin: 0 0 16px;
}
#contact-looking-else-header h2 { margin: 0; }
#contact-routing-header p,
#contact-form-header p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin: 0;
}
/* Routing cards + Looking-else cards — shared typography */
.contact-routing-card,
.contact-looking-card {
background: var(--wh);
border: 1px solid var(--cta);
border-radius: 23px;
height: 100%;
display: flex;
flex-direction: column;
}
.contact-routing-card h3,
.contact-looking-card h3 {
font-family: var(--font-heading);
font-weight: 500;
font-size: 1.625rem;
line-height: 1.2;
color: var(--pr);
}
.contact-routing-card p,
.contact-looking-card p {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.5;
color: var(--pr);
}
/* Routing card variant — left-aligned, CTA link in footer */
.contact-routing-card { padding: 40px 44px; }
.contact-routing-card h3 { margin: 0 0 16px; }
.contact-routing-card p { margin: 0 0 24px; flex: 1; }
.contact-routing-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
color: var(--cta);
align-self: flex-start;
transition: color 0.2s, gap 0.2s;
}
.contact-routing-link:hover { color: var(--ctah); gap: 12px; }
/* Looking-else card variant — centered, whole card clickable */
.contact-looking-card {
justify-content: center;
align-items: center;
text-align: center;
text-decoration: none;
padding: 40px 32px;
min-height: 166px;
transition: transform 0.15s, box-shadow 0.2s;
}
.contact-looking-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 51, 99, 0.08);
}
.contact-looking-card h3 { margin: 0 0 12px; }
.contact-looking-card p { margin: 0; font-weight: 500; }
/* Address (within looking-else section) */
#contact-address { margin-top: 200px; }
#contact-address p { font-family: var(--font-heading); font-weight: 500; font-size: 1.3125rem; line-height: 1.43; color: var(--pr); margin: 0; }
/* Contact form (MUI overrides scoped to .contact-us-form) */
.contact-us-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-us-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.contact-us-form .MuiOutlinedInput-root {
background: rgba(239, 239, 239, 0.7);
border-radius: 15px;
font-family: var(--font-body);
font-size: 0.9375rem;
color: #4a4a4a;
}
.contact-us-form .MuiOutlinedInput-input,
.contact-us-form .MuiSelect-select { background-color: transparent !important; }
.contact-us-form .MuiOutlinedInput-notchedOutline { border-color: #adafaf; }
.contact-us-form .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #4a4a4a; }
.contact-us-form .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--cta); border-width: 1px; }
.contact-us-form .MuiInputLabel-root { font-family: var(--font-body); color: #4a4a4a; }
.contact-us-form .MuiInputLabel-root.Mui-focused { color: var(--pr); }
.contact-us-form .MuiInputBase-multiline { min-height: 200px; align-items: flex-start; }
.contact-us-form .MuiInputBase-inputMultiline { min-height: 160px; line-height: 1.5; }
.contact-us-submit {
display: flex;
justify-content: center;
margin-top: 12px;
}
@media screen and (max-width: 640px) {
.contact-routing-card { padding: 32px 28px; }
.contact-us-row { grid-template-columns: 1fr; }
}
/* Shared BlueTexture section background (used by company values, press, social) */
#company-values,
#company-press,
#company-social {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
}
/* Navy h2 across company sections */
#company-press h2,
#company-video h2,
#company-social h2,
#company-cta h2,
#company-story h2 {
color: var(--pr);
}
/* --- COMPANY | recognition section --- */
#company-recognition {
background: var(--color-white);
padding: 150px 0;
}
.company-recognition-award {
background: var(--edu);
padding: 128px 64px;
border-radius: var(--radius-card);
}
.company-award-logo {
width: 130px;
height: auto;
margin: 0 auto 12px;
display: block;
}
.company-award-name {
font-family: var(--font-heading);
font-weight: 900;
font-size: 1.25rem;
line-height: 1.2;
color: var(--pr);
margin-bottom: 16px;
}
.company-award-body {
font-size: 1rem;
line-height: 1.5;
color: var(--dk);
margin: 0;
}
.company-recognition-text {
padding: 0 64px;
}
.company-recognition-text h2 {
color: var(--dk);
margin-bottom: 24px;
}
.company-recognition-text p {
font-size: 1rem;
line-height: 1.5;
color: var(--dk);
}
/* --- COMPANY | press section --- */
#company-press { padding: 140px 0; }
#company-press-header { margin-bottom: 36px; }
/* Press card: white bg, accent title, source name acts as link.
Flex column + flex:1 on body keeps the source pinned to the bottom
so source lines align horizontally across cards with varying body length. */
.company-press-card {
background: var(--color-white);
padding: 32px 34px;
height: 100%;
display: flex;
flex-direction: column;
}
/* Shared title styles for press + video cards (identical specs).
Qualified with .card so they win against the global .card h5 rule (11 spec). */
.card.company-press-card .company-press-title,
.card.company-video-card .company-video-title {
font-size: 1.3125rem;
font-weight: 900;
line-height: 1.25;
color: var(--cta);
margin-bottom: 12px;
}
.card.company-press-card .company-press-body {
font-size: 1rem;
line-height: 1.5;
color: var(--pr);
margin-bottom: 16px;
flex: 1;
}
.card.company-press-card .company-press-source {
font-size: 0.75rem;
font-weight: 900;
color: var(--cta);
text-decoration: none;
margin: 0;
}
/* Shared hover state for press + video source links */
.card.company-press-card .company-press-source:hover,
.card.company-video-card .company-video-source:hover {
color: var(--ctah);
text-decoration: underline;
}
/* Foundation accordion: Previous news (cta blue bar, +/× toggle) */
#company-press-archive {
list-style: none;
margin: 32px 0 0;
}
#company-press-archive .accordion-item {
background: transparent;
border: none;
}
#company-press-archive .accordion-title {
background: var(--cta);
color: var(--color-white);
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 900;
padding: 12px 20px;
border: none;
border-radius: 0;
}
#company-press-archive .accordion-title:hover,
#company-press-archive .accordion-title:focus {
background: var(--ctah);
color: var(--color-white);
}
/* Hide Foundation's default right-aligned ::before, put indicator inline after text */
#company-press-archive .accordion-title::before {
content: none;
}
#company-press-archive .accordion-title::after {
content: '+';
color: var(--color-white);
font-weight: 900;
margin-left: 8px;
}
#company-press-archive .is-active > .accordion-title::after {
content: '\00d7';
}
#company-press-archive .accordion-content {
background: transparent;
border: none;
padding: 24px 0 0;
}
/* --- COMPANY | video section --- */
#company-video { padding: 140px 0; }
#company-video-header { margin-bottom: 38px; }
/* Wider gap between video cards (overrides Foundation's default gutter) */
#company-video-grid.grid-padding-x > .cell { padding-left: 24px; padding-right: 24px; }
#company-video-grid.grid-margin-y > .cell { margin-top: 24px; margin-bottom: 24px; }
.company-video-card {
background: #efefef;
border-radius: var(--radius-card);
overflow: hidden;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.company-video-card .video_embed {
aspect-ratio: 16 / 9;
width: 100%;
}
.company-video-content {
padding: 32px;
flex: 1;
display: flex;
flex-direction: column;
}
.card.company-video-card .company-video-source {
font-size: 1rem;
font-weight: 600;
color: var(--cta);
text-decoration: none;
margin-top: auto;
}
/* --- COMPANY | Follow the journey section --- */
#company-social {
padding: 150px 0;
}
#company-social h2 { margin-bottom: 12px; }
#company-social p {
font-size: 1.3125rem;
line-height: 1.5;
color: var(--pr);
margin-bottom: 34px;
}
.company-social-links {
display: flex;
justify-content: center;
gap: 33px;
}
.company-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 89px;
height: 89px;
border-radius: 50%;
background: transparent;
border: 2px solid var(--cta);
color: var(--cta);
font-size: 40px;
transition: background 0.2s, border-color 0.2s;
}
.company-social-link img {
height: 40px;
width: auto;
}
.company-social-link .company-social-icon-hover { display: none; }
.company-social-link:hover .company-social-icon-default { display: none; }
.company-social-link:hover .company-social-icon-hover { display: block; }
.company-social-link:hover {
background: var(--ctah);
border-color: var(--ctah);
color: var(--color-white);
}
/* --- COMPANY | Experience Avelo CTA section --- */
#company-cta {
background: var(--color-white);
padding: 150px 0;
}
#company-cta h2 { margin-bottom: 16px; }
#company-cta p {
font-size: 1.3125rem;
line-height: 1.5;
color: var(--dk);
margin-bottom: 32px;
}
/* --- PROFESSIONALS | shared pathway banner + panel components --- */
.pathway-banner {
position: relative;
height: 574px;
overflow: hidden;
}
.pathway-banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pathway-banner::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}
.pathway-banner-text {
position: absolute;
bottom: 32px;
left: 44px;
z-index: 1;
}
.pathway-banner-text h2 {
font-weight: 400;
color: var(--color-white);
margin: 0;
}
/* Mobile pathway banner variant: pairs with `.mobile-section-banner` for sections
that have no body copy below the h2 — collapse the bottom space so the next
section's top padding alone provides the gap. */
.pathway-banner-mobile h2 { margin-bottom: 0; }
.pathway-banner-mobile > .grid-container { padding-bottom: 0; }
.pathway-panel {
padding: 0;
}
.pathway-badge {
display: inline-block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.75rem;
line-height: 1.5;
background: var(--edu);
color: var(--sc);
border-radius: 9999px;
padding: 4px 14px;
margin-bottom: 18px;
}
.pathway-panel h4 {
font-size: 1.625rem;
font-weight: 400;
line-height: 1.15;
color: var(--pr);
margin-top: 0;
margin-bottom: 12px;
}
.pathway-badge + h4 { margin-top: 0; }
.pathway-panel > p {
font-size: 1rem;
font-weight: 400;
line-height: 2;
color: var(--dk);
margin-bottom: 0;
}
/* --- PROFESSIONALS | S1 Intro --- */
#professionals-intro {
background: var(--color-white);
padding: 40px 0 130px;
}
#professionals-intro .grid-container {
max-width: 90rem; /* 1440px */
}
#professionals-intro h1 {
color: var(--pr);
font-weight: 300;
margin-bottom: 24px;
}
#professionals-intro .professionals-intro-copy p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin-bottom: 32px;
}
#professionals-intro-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--gap-cta-btn);
}
/* --- PROFESSIONALS | S2 Pathways header (centered intro on light bg) --- */
#professionals-pathways-header {
background: var(--ice);
padding: 150px 40px 40px;
}
/* --- PROFESSIONALS | S4 / S6 Instructor & Technician pathway grids --- */
#instructor-pathway-grid,
#technician-pathway-grid {
background: var(--color-white);
padding: 72px 0;
}
#instructor-pathway-grid .grid-container,
#technician-pathway-grid .grid-container {
max-width: 90rem; /* 1440px */
}
/* Bullet lists inside the prerequisites / course details accordion */
.avelo-training-course-details .accordion-content ul {
list-style: disc;
margin: 0 0 12px 24px;
padding: 0;
}
.avelo-training-course-details .accordion-content ul li {
font-size: 1rem;
line-height: 2;
color: var(--dk);
margin: 0;
}
/* Mobile: more gap between stacked panels */
@media screen and (max-width: 39.9375em) {
#instructor-pathway-grid .grid-margin-y > .cell,
#technician-pathway-grid .grid-margin-y > .cell {
margin-bottom: 48px;
}
}
/* --- PROFESSIONALS | S3 / S5 Instructor & Technician pathway banners --- */
.pathway-banner-text .section-label.on-dark { color: var(--color-white); }
#instructor-pathway-banner .pathway-banner-text,
#technician-pathway-banner .pathway-banner-text {
left: max(40px, calc((100% - 90rem) / 2));
}
#instructor-pathway-banner .pathway-banner-text h2,
#technician-pathway-banner .pathway-banner-text h2 {
font-size: 2.5rem;
line-height: 1.25;
}
/* --- PROFESSIONALS | recognized + receive cards --- */
#professionals-recognized,
#professionals-receive {
padding: var(--section-padding);
}
#professionals-recognized { background: var(--color-white); }
#professionals-receive { background: url("/images/redesign/BlueBackground.svg") center/cover no-repeat; }
#professionals-recognized-header { margin-bottom: 32px; }
#professionals-recognized-header p { text-align: left; }
#professionals-receive-header { margin-bottom: 32px; }
#professionals-receive-header p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
}
/* Shared card layout + typography for recognized (S7) and receive (S8) */
#professionals-recognized .card,
#professionals-receive .card {
border-radius: 23px;
padding: 64px 40px;
height: 100%;
}
#professionals-recognized .card h4,
#professionals-receive .card h4 {
font-size: 1.625rem;
font-weight: 400;
line-height: 1.15;
margin-bottom: 12px;
}
#professionals-recognized .card p,
#professionals-receive .card p {
font-size: 1rem;
line-height: 2;
color: var(--dk);
margin: 0;
}
/* Per-section: tile background + title color */
#professionals-recognized .card { background: var(--edu); }
#professionals-recognized .card h4 { color: var(--dk); }
#professionals-receive .card { background: var(--color-white); }
#professionals-receive .card h4 { color: var(--pr); }
/* --- PROFESSIONALS | S10 Bottom CTA --- */
#professionals-cta {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
padding: var(--section-padding);
}
#professionals-cta h2 {
color: var(--pr);
margin-bottom: 20px;
}
#professionals-cta p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin: 0 auto 40px;
max-width: 85rem;
}
#professionals-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 36px;
justify-content: center;
}
/* --- PROFESSIONALS | S9 FAQ --- */
#professionals-faq {
background: var(--color-white);
padding: var(--section-padding);
}
#professionals-faq .grid-container { max-width: 90rem; }
#professionals-faq-header { margin-bottom: 24px; }
#professionals-faq-header h2 {
color: var(--dk);
margin-bottom: 16px;
}
#professionals-faq-header p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--text-secondary);
margin: 0;
}
/* --- FOR DIVE CENTERS | S4 Partnership + S6 Grows (2x2 card grids, white bg) --- */
#for-dive-centers-partnership,
#for-dive-centers-grows {
background: var(--color-white);
padding: var(--section-padding);
}
#for-dive-centers-partnership-header,
#for-dive-centers-grows-header {
margin-bottom: 64px;
}
#for-dive-centers-partnership-header p,
#for-dive-centers-grows-header p {
font-size: 1.3125rem; /* 21px */
line-height: 1.43;
color: var(--pr);
margin: 0 auto;
max-width: 68rem;
}
/* Cards grid is declared with #for-dive-centers-advantage-cards (see further below). */
.partnership-card {
background: var(--color-ice);
border-radius: var(--radius-card);
padding: 57px 48px 39px;
}
.partnership-card h5 {
font-family: var(--font-heading);
font-size: 1rem; /* 16px */
font-weight: 900;
line-height: 1.5;
color: var(--pr);
margin: 0 0 10px;
text-transform: none;
}
.partnership-card p {
font-size: 1rem; /* 16px */
line-height: 2;
color: var(--pr);
margin: 0;
}
/* --- Stacked layout fallbacks for new components --- */
@media screen and (max-width: 1024px) {
/* Stack image above copy on tablet/mobile (image cell is small-12 medium-6, so under 1024px
both cells already become full width; just give the bg-image enough height to be visible). */
#events-tour-copy { padding: 48px 32px; }
#events-tour-card { min-height: 0; }
#events-tour-image-cell { min-height: 320px; }
/* Avelo System hero: stack the 3 product images vertically (spec: ≤1024px) */
#avelo-system-hero-products {
flex-direction: column;
align-items: center;
gap: 40px;
}
#avelo-system-hero-products .avelo-system-hero-product {
flex: 0 0 auto;
max-width: 280px;
width: 100%;
}
}
/* Spec: ≤1024px — split sections collapse to stacked, image above copy.
Force the stack order on all split sections (hydrotank, jetpack, mode, buoyancy).
Shearwater uses large-order-* on its cells, which naturally falls back to DOM order below the large breakpoint. */
@media screen and (max-width: 1023.98px) {
#avelo-system-hydrotank-image,
#avelo-system-jetpack-image,
#avelo-system-mode-image,
#avelo-system-buoyancy-image { order: 1; }
#avelo-system-hydrotank-copy,
#avelo-system-jetpack-copy,
#avelo-system-mode-copy,
#avelo-system-buoyancy-copy { order: 2; }
}
@media screen and (max-width: 768px) {
/* Avelo System hero: tighter padding (spec: ≤768px hero padding) */
#avelo-system-hero { padding: 100px 24px 60px; }
#avelo-system-hydrotank,
#avelo-system-jetpack { padding: 60px 0; }
/* Add a bit of space between stacked architecture text and callout card */
#avelo-system-architecture-copy { margin-bottom: 32px; }
}
.is-stuck .socialMediaLink {
display: none;
}
/* --- Old bootAwardFooter --- */
.bootAwardFooter {
color: #EFEFEF;
font-weight: 500;
font-size: 15pt;
}
/* ============================================================
PAGE HERO BACKGROUND IMAGES (redesign)
============================================================ */
/* --- COMPANY | intro section --- */
/* Company hero — full-viewport, text centered in bottom third */
#company-intro {
background-image: image-set(url("/images/generated/redesign/Company_Hero_IdolJennifer_LindenWolbert-9667x5464-1920w.webp") type("image/webp"), url("/images/redesign/Company_Hero_IdolJennifer_LindenWolbert.jpg") type("image/jpeg"));
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 40px 96px;
text-align: center;
}
#company-intro .grid-container { width: 100%; }
#company-intro .section-label,
#company-intro h1 {
color: var(--color-white);
margin-bottom: 16px;
}
#company-intro .section-label { display: block; }
#company-intro .company-intro-body {
color: rgba(255, 255, 255, 0.85);
font-size: 1.3125rem;
line-height: 1.43;
margin-bottom: 0;
}
#company-hero-scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 2;
}
#company-hero-scroll i {
transform: scale(2.2, 1.7);
}
/* Company story section */
#company-story .split-copy {
background: var(--color-white);
}
#company-story .split-copy p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--text-secondary);
}
/* Company values section */
#company-values {
padding: 139px 0 154px;
}
#company-values-header {
margin-bottom: 40px;
}
#company-values-header h2,
#company-values-header p {
color: var(--pr);
}
/* Equal-height white cards */
#company-values-cards .cell {
display: flex;
flex-direction: column;
}
.company-value-card {
background: var(--color-white);
flex: 1;
padding: 32px 40px;
}
.company-value-card h5 {
font-size: 1rem;
font-weight: 700;
color: var(--pr);
margin-bottom: 4px;
}
.company-value-card p {
font-size: 1rem;
line-height: 1.5;
color: var(--pr);
}
/* --- AVELO SYSTEM | S1 hero: white background, product trio --- */
#avelo-system-hero {
background: var(--color-white);
padding: 80px 40px;
}
#avelo-system-hero-header h1 {
color: var(--pr);
font-family: var(--font-heading);
font-weight: 300;
font-size: clamp(2.5rem, 5vw, 4.375rem); /* 40px → 70px */
line-height: 1.15;
letter-spacing: -0.02em;
margin: 8px 0 16px;
}
#avelo-system-hero-header p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin: 0 auto;
max-width: 58rem;
}
/* --- FOR DIVE CENTERS | S1 Intro (image left + copy right, no buttons) --- */
#for-dive-centers-intro {
background: var(--color-white);
padding: 40px 0 130px;
}
#for-dive-centers-intro h1 {
color: var(--pr);
font-weight: 300;
margin-bottom: 24px;
}
#for-dive-centers-intro .for-dive-centers-intro-copy p {
font-size: 1rem;
line-height: 2;
color: var(--pr);
margin-bottom: 16px;
}
#for-dive-centers-intro .for-dive-centers-intro-copy p:last-child { margin-bottom: 0; }
/* Cap image height so it sits flush with the copy block instead of overhanging it on both sides */
#for-dive-centers-intro .for-dive-centers-intro-image img {
max-height: 27rem; /* keeps image flush with copy block instead of overhanging */
object-fit: cover;
object-position: center;
}
/* ===== FIND A DIVE CENTER ===== */
/* Section wrappers */
#centers-hero {
background: var(--color-white);
padding: 96px 0 32px;
}
#centers-map-list-section { padding-bottom: 130px; }
#centers-request-section {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
padding: var(--section-padding);
}
#centers-cta-section {
background-image: url("/images/redesign/TealBackground.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 140px 40px;
text-align: center;
}
/* Shared navy headings across hero + request + CTA */
#centers-hero h1,
#centers-request-section h2,
#centers-cta-section h2 {
color: var(--pr);
margin: 0 0 16px;
}
/* Shared navy subhead/body — per-section overrides specify only what differs */
#centers-hero p,
#centers-request-section p,
#centers-cta-section p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin: 0;
}
#centers-hero p { max-width: 58rem; }
#centers-cta-section p { margin-bottom: 40px; }
/* Request form inputs sit on the BlueTexture section, so override the shared
contact-us-form grey fill with white for legibility. */
#centers-request-section .contact-us-form .MuiOutlinedInput-root {
background: var(--wh);
}
/* --- EVENTS | hero (full-bleed image, left-aligned copy on the left) --- */
#events-hero {
background-image: image-set(url("/images/generated/redesign/Events_Hero_IdolJennifer_Terrence-9706x2988-1920w.webp") type("image/webp"), url("/images/redesign/Events_Hero_IdolJennifer_Terrence.jpg") type("image/jpeg"));
background-size: cover;
background-position: center;
min-height: 591px;
display: flex;
align-items: center;
padding: var(--hero-padding);
}
/* width:100% — without it the flex parent shrinks the container to content width, pushing content toward center */
#events-hero .grid-container { width: 100%; }
#events-hero-content { text-align: left; }
#events-hero-content h1 {
color: var(--color-white);
font-family: var(--font-heading);
font-weight: 300;
font-size: clamp(2.5rem, 5vw, 4.375rem);
line-height: 1;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
#events-hero-content p {
color: var(--color-white);
font-size: 1.3125rem;
line-height: 1.43;
margin: 0;
max-width: 44rem;
}
/* --- AVELO TRAINING | S1 Intro --- */
#avelo-training-intro {
background: var(--color-white);
padding: 40px 0 130px;
}
#avelo-training-intro .grid-container {
max-width: 90rem; /* 1440px */
}
#avelo-training-intro h1 {
color: var(--pr);
margin-bottom: 24px;
}
#avelo-training-intro .avelo-training-intro-copy p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin-bottom: 32px;
}
/* Shared image styling — used by S1, S4 (inside wrapper div) and S5 (on img directly) */
.avelo-training-intro-image img,
.avelo-training-philosophy-image img,
.avelo-training-measurable-image,
.professionals-intro-image img,
.for-dive-centers-intro-image img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-card);
}
/* --- AVELO TRAINING | S2 Why start with Avelo --- */
#avelo-training-why .split-copy {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
}
#avelo-training-why h2 {
color: var(--pr);
margin-top: 7px;
margin-bottom: 16px;
}
#avelo-training-why .split-copy p {
font-family: var(--font-heading);
font-size: 1.3125rem;
font-weight: 400;
line-height: 1.43;
color: #4a4a4a;
margin-bottom: 24px;
}
.avelo-training-why-list {
list-style: none;
padding: 0;
margin: 0;
}
.avelo-training-why-list li {
padding-left: 20px;
border-left: 3px solid var(--cta);
font-family: var(--font-heading);
font-size: 1.3125rem;
font-weight: 400;
line-height: 1.43;
color: var(--sc);
margin-bottom: 12px;
}
.avelo-training-why-list li:last-child {
margin-bottom: 0;
}
/* --- AVELO TRAINING | S3 Course pathway: dark header bar + 2 cards on white --- */
#avelo-training-pathway {
background: var(--color-white);
padding-bottom: 80px;
}
#avelo-training-pathway-header {
background-image: image-set(url("/images/generated/redesign/Training_S3_IdolJennifer_JasonLeggatt-6750x2021-1920w.webp") type("image/webp"), url("/images/redesign/Training_S3_IdolJennifer_JasonLeggatt.jpg") type("image/jpeg"));
background-size: cover;
background-position: top;
background-repeat: no-repeat;
min-height: 480px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 40px 0;
margin-bottom: 44px;
}
#avelo-training-pathway-header h2 {
color: var(--color-white);
margin-bottom: 16px;
}
#avelo-training-pathway-header p {
color: var(--color-white);
font-size: 1.3125rem;
line-height: 1.43;
margin-bottom: 0;
}
/* Pathway cards (no .card base class — custom card pattern) */
.avelo-training-pathway-card {
padding: 0 16px;
}
.avelo-training-pathway-card h3 {
color: var(--pr);
font-size: clamp(1.75rem, 3.4vw, 2.5rem); /* 28 → 40px, matches .experience-diver-panel/edge-card pattern */
line-height: 1.25;
font-weight: 400;
margin-bottom: 16px;
}
.avelo-training-pathway-card > p {
font-size: 1rem;
font-weight: 400;
line-height: 2;
color: var(--dk);
margin-bottom: 16px;
}
/* Course details accordion (light gray bar with CTA blue text, inline +/× toggle) */
.avelo-training-course-details {
list-style: none;
margin: 24px 0 0;
}
.avelo-training-course-details .accordion-item {
background: transparent;
border: none;
}
.avelo-training-course-details .accordion-title {
background: #efefef;
color: var(--cta);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 900;
padding: 12px 20px;
border: none;
border-radius: 0;
}
.avelo-training-course-details .accordion-title:hover,
.avelo-training-course-details .accordion-title:focus {
background: #e5e5e5;
color: var(--ctah);
}
.avelo-training-course-details .accordion-title::before {
content: none;
}
.avelo-training-course-details .accordion-title::after {
content: '+';
color: var(--cta);
font-weight: 900;
margin-left: 8px;
}
.avelo-training-course-details .is-active > .accordion-title::after {
content: '\00d7';
}
.avelo-training-course-details .accordion-content {
background: transparent;
border: none;
padding: 20px 0 0;
}
.avelo-training-course-details .accordion-content h6 {
font-size: 1rem;
font-weight: 700;
color: var(--pr);
margin-top: 16px;
margin-bottom: 4px;
}
.avelo-training-course-details .accordion-content h6:first-child {
margin-top: 0;
}
.avelo-training-course-details .accordion-content p {
font-size: 1rem;
line-height: 1.5;
color: var(--dk);
margin-bottom: 12px;
}
/* Mobile: more gap between stacked course cards */
@media screen and (max-width: 39.9375em) {
#avelo-training-pathway .grid-margin-y > .cell {
margin-bottom: 48px;
}
}
/* --- AVELO TRAINING | S4 Training philosophy --- */
#avelo-training-philosophy {
background: var(--color-white);
padding: 60px 0 130px;
}
#avelo-training-philosophy .grid-container {
max-width: 90rem;
}
#avelo-training-philosophy h2 {
color: var(--pr);
margin-bottom: 24px;
}
#avelo-training-philosophy .avelo-training-philosophy-copy p {
font-size: 1rem;
line-height: 1.5;
color: var(--dk);
margin-bottom: 16px;
}
/* --- AVELO TRAINING | S5 Measurable improvement --- */
#avelo-training-measurable {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 100px 0;
}
#avelo-training-measurable h2 {
color: var(--pr);
margin-bottom: 16px;
}
#avelo-training-measurable .cell > p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin-bottom: 48px;
}
.avelo-training-measurable-image {
max-width: 480px;
margin: 0 auto 16px;
}
#avelo-training-measurable .avelo-training-measurable-caption {
font-size: 0.75rem;
font-weight: 900;
line-height: 1.4;
color: var(--sc);
margin-top: 16px;
margin-bottom: 0;
}
/* --- AVELO TRAINING | S6 Bottom CTA (BlueTexture bg, centered, image + footer content) --- */
#avelo-training-cta {
background-color: var(--color-white);
padding: 100px 0;
}
#avelo-training-cta h2 {
color: var(--pr);
margin-bottom: 16px;
}
#avelo-training-cta p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin-bottom: 32px;
}
.avelo-training-cta-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
}
/* --- FOR DIVE CENTERS | award banner spacing --- */
/* Breathing room between the award row and the BlueTexture section below */
#for-dive-centers-award { padding-bottom: 36px; }
/* --- FOR DIVE CENTERS | S3 The Avelo advantage (3 image-top cards on BlueTexture) --- */
#for-dive-centers-advantage-header { margin-bottom: 80px; }
.for-dive-centers-advantage-subhead {
font-size: 1.3125rem; /* 21px */
line-height: 1.43;
color: var(--pr);
margin: 0;
}
/* Cards: CSS Grid with grid-auto-rows: 1fr so cards equalize height across rows (advantage, partnership, grows).
Foundation's flex grid only equalizes cells within a single row, so we override here. */
#for-dive-centers-advantage-cards,
#for-dive-centers-partnership-cards,
#for-dive-centers-grows-cards {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
gap: 24px;
}
@media screen and (min-width: 40em) { /* ≥640px → 2 per row */
#for-dive-centers-advantage-cards,
#for-dive-centers-partnership-cards,
#for-dive-centers-grows-cards { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 64em) { /* ≥1024px → 3 per row (advantage only) */
#for-dive-centers-advantage-cards { grid-template-columns: repeat(3, 1fr); }
}
.advantage-card {
background: var(--color-white);
padding: 0;
overflow: hidden;
border-radius: var(--radius-card);
height: 100%;
}
.advantage-card-img {
width: 100%;
height: 245px;
object-fit: cover;
display: block;
}
.advantage-card-body {
padding: 28px 20px 20px;
}
.advantage-card-body h3 {
color: var(--pr);
font-weight: 500;
margin-bottom: 12px;
}
.advantage-card-body p {
font-size: 1rem;
line-height: 2;
margin-bottom: 0;
}
/* --- FOR DIVE CENTERS | S7 Commercial model (BlueTexture, centered copy + outlined button) --- */
#for-dive-centers-commercial-header { margin-bottom: 32px; }
#for-dive-centers-commercial-header p {
font-size: 1.3125rem; /* 21px */
line-height: 1.43;
color: var(--pr);
margin: 0 auto 16px;
max-width: 74rem;
}
#for-dive-centers-commercial-header p:last-child { margin-bottom: 0; }
/* --- FOR DIVE CENTERS | S5 Partner types — reuses index.html panels-spine pattern --- */
/* Same content width as #destinations-panels-outer on home */
#for-dive-centers-partner-types-outer { max-width: 960px; }
#for-dive-centers-partner-types-container { position: relative; }
/* ===== TECHNICAL DOCUMENTATION page ===== */
/* Section wrappers */
#technical-docs-intro { background: var(--color-white); padding: 40px 0 130px; }
#technical-docs-cards { padding: 0 40px 130px; }
/* S1 — page header (centered) + version stamp */
#technical-docs-header { margin-bottom: 64px; }
#technical-docs-header h1 { color: var(--pr); margin: 0 0 16px; }
.technical-docs-version {
font-family: var(--font-heading);
font-weight: 500;
font-size: 1.3125rem;
line-height: 1.43;
color: var(--sc);
margin: 0;
}
/* S1 — intro split (copy + image) */
.technical-docs-intro-copy h3 { color: var(--pr); margin-bottom: 24px; }
.technical-docs-intro-copy p { font-size: 1rem; line-height: 2; color: var(--pr); margin-bottom: 16px; }
.technical-docs-intro-copy .button { margin-top: 16px; }
.technical-docs-product-img {
width: 100%;
height: auto;
border-radius: var(--radius-image);
display: block;
margin: 0 auto;
}
.technical-docs-iso {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--pr);
margin: 16px 0 0;
}
/* S2 — MSDS + Patents cards */
.technical-docs-card {
background: var(--wh);
border: 1px solid var(--cta);
border-radius: 23px;
padding: 46px 32px;
height: 100%;
display: flex;
flex-direction: column;
}
.technical-docs-card h3 {
font-family: var(--font-heading);
font-weight: 500;
font-size: 1.625rem;
line-height: 1.15;
color: var(--pr);
margin: 0 0 24px;
}
.technical-docs-card-body { flex: 1; }
.technical-docs-card-body p {
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 2;
color: var(--pr);
margin: 0 0 16px;
}
.technical-docs-card-body p:last-child { margin-bottom: 0; }
.technical-docs-card-body p b { font-weight: 700; }
.technical-docs-card-link {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
color: var(--cta);
margin-top: 24px;
transition: color 0.2s, gap 0.2s;
}
.technical-docs-card-link:hover { color: var(--ctah); gap: 12px; }
@media screen and (max-width: 640px) {
.technical-docs-card { padding: 32px 24px; }
}
/* --- AVELO SYSTEM | S12 Partners (6-card grid, 2 + 1 + 3 layout) --- */
#avelo-system-partners {
background: var(--ice);
padding: 100px 40px 150px;
}
/* Translucent white so the ice tint shows through subtly */
#avelo-system-partners .partner-card {
background: rgba(255, 255, 255, 0.7);
}
#avelo-system-partners-header { margin-bottom: 48px; }
#avelo-system-partners-header h2 {
color: var(--pr);
margin-bottom: 16px;
}
#avelo-system-partners-header p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin: 0 auto;
max-width: 64rem;
}
/* Equal heights + vertical gap between rows when cards wrap */
#avelo-system-partner-cards { row-gap: 24px; }
#avelo-system-partner-cards .partner-card { height: 100%; }
/* --- AVELO SYSTEM | S11 Safety and quality (stacked, circle standards) --- */
#avelo-system-safety {
background: var(--color-white);
padding: var(--section-padding);
}
#avelo-system-safety-inner {
max-width: 44.5rem;
margin: 0 auto;
}
/* Tighten the section-label → h2 gap in centered narrow-column sections */
#avelo-system-engineering-inner .section-label,
#avelo-system-safety-inner .section-label { margin-bottom: 8px; }
#avelo-system-safety-inner > h2 {
color: var(--pr);
margin: 0 0 24px;
}
#avelo-system-safety-inner > p {
font-size: 1rem;
line-height: 2;
color: var(--pr);
margin: 0;
}
/* Standards: 6 circle marks. Layout via Foundation `grid-x align-center` + cell shrink;
gap between cells is custom since Foundation cells don't have a gap utility. */
.avelo-system-safety-marks {
column-gap: 28px;
row-gap: 20px;
margin: 64px 0;
}
.avelo-system-safety-mark {
flex: 0 0 auto;
width: 94px;
height: 94px;
border: 1px solid var(--cta);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-heading);
font-weight: 900;
font-size: 1rem;
line-height: 1.2;
color: var(--pr);
}
@media screen and (max-width: 639.98px) {
.avelo-system-safety-marks { column-gap: 20px; row-gap: 16px; }
}
.avelo-system-safety-training {
font-family: var(--font-heading);
font-weight: 400;
font-size: 1.625rem;
line-height: 1.15;
color: var(--pr);
margin: 0 0 16px;
}
/* --- AVELO SYSTEM | S13 FAQ + FOR DIVE CENTERS | S9 FAQ (shared layout) --- */
#avelo-system-faq,
#for-dive-centers-faq {
background: var(--color-white);
padding: var(--section-padding);
}
#avelo-system-faq-header h2,
#for-dive-centers-faq-header h2 {
color: var(--dk);
margin: 4px 0 0;
}
/* Tighter gap between the section header and first FAQ item */
#avelo-system-faq .adoc-embed,
#for-dive-centers-faq .adoc-embed { margin-top: 24px; }
/* FAQ tables (first FAQ answer): dark header row + alternating body rows, no borders */
/* Spacing between adjacent tables */
.adoc-embed .tableblock { margin: 12px 0 40px; }
.adoc-embed table.faq-table {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
font-size: 1rem;
line-height: 1.4;
border: 0;
}
/* 2:1 column ratio with consistent widths across both tables */
.adoc-embed table.faq-table colgroup col:first-child { width: 66.6667%; }
.adoc-embed table.faq-table colgroup col:last-child { width: 33.3333%; }
.adoc-embed table.faq-table thead th {
background: var(--pr);
color: var(--color-white);
font-family: var(--font-heading);
font-weight: 600;
text-align: left;
padding: 8px 16px;
line-height: 1.4;
border: 0;
}
/* Body rows alternate: ice for odd, edu (light blue) for even */
.adoc-embed table.faq-table tbody td {
color: var(--pr);
padding: 8px 16px;
line-height: 1.4;
border: 0;
}
.adoc-embed table.faq-table tbody tr:nth-child(odd) td { background: var(--ice); }
.adoc-embed table.faq-table tbody tr:nth-child(even) td { background: var(--edu); }
/* Strip asciidoctor's default margins so rows render at the intended ~38px height */
.adoc-embed table.faq-table p.tableblock,
.adoc-embed table.faq-table .tableblock > p { margin: 0; }
/* Bold cells in the body — used for the Total row in the second table */
.adoc-embed table.faq-table tbody td strong {
font-family: var(--font-heading);
font-weight: 600;
}
/* --- AVELO SYSTEM + FOR DIVE CENTERS | bottom CTA — BlueTexture bg, h2 + body + two buttons --- */
#avelo-system-cta,
#for-dive-centers-cta {
background-image: url("/images/redesign/BlueBackground.svg");
background-size: cover;
background-repeat: no-repeat;
padding: var(--section-padding);
}
#avelo-system-cta h2,
#for-dive-centers-cta h2 {
color: var(--dk);
margin-bottom: 24px;
}
#avelo-system-cta p,
#for-dive-centers-cta p {
font-size: 1.3125rem;
line-height: 1.43;
color: var(--pr);
margin: 0 auto 40px;
max-width: 85rem;
}
#avelo-system-cta-buttons,
#for-dive-centers-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 36px;
justify-content: center;
}
/* --- HOME | system showcase (watch + product + stats card) --- */
#system-showcase {
background: rgba(107, 114, 128, 0.1);
border-radius: 23px;
position: relative;
overflow: visible;
margin-top: 200px;
margin-bottom: 50px;
padding-left: 30px;
padding-right: 30px;
}
/* Mobile: tank in normal flow, all cells stack with padding */
.system-showcase-tank-img {
display: block;
margin: 0 auto;
max-width: 60%;
height: auto;
}
.system-showcase-side-cell {
padding-top: 24px;
padding-bottom: 24px;
}
/* Desktop: tank absolutely positioned, centre cell is spacer */
@media screen and (min-width: 640px) {
.system-showcase-tank-cell {
min-height: 160px;
}
.system-showcase-side-cell {
padding-top: 0;
padding-bottom: 0;
}
.system-showcase-tank-img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: auto;
max-width: none;
z-index: 1;
pointer-events: none;
}
}
.system-showcase-device-img {
height: 226px;
width: auto;
max-width: 100%;
}
@media screen and (max-width: 39.9375em) {
.system-showcase-device-img { height: 160px; }
}
.system-showcase-perf-img {
max-width: 100%;
}
#system-showcase-tagline {
text-align: center;
color: var(--pr);
font-size: 0.9375rem;
margin-top: 16px;
line-height: 1.6;
}
/* --- HOME | training section (contained panel cards) --- */
#training-section {
background-image: url("/images/redesign/TealBackground.svg");
background-repeat: no-repeat;
background-size: cover;
padding: var(--section-padding);
}
#training-panels-outer {
max-width: 960px;
}
#training-panels-container {
position: relative;
}
.training-subheader-card {
padding: 28px 48px;
margin-bottom: 0;
border-radius: 23px;
background: var(--wh);
}
@media screen and (max-width: 639px) {
.training-subheader-card {
margin-bottom: 12px;
}
}
#training-header h6,
#destinations-header h6 {
color: var(--sc);
line-height: 2;
margin-bottom: 5px;
}
#training-header h2,
#destinations-header h2 {
margin-top: 0;
}
#training-header p,
#destinations-header p {
font-family: var(--font-heading);
font-weight: 400;
font-size: 1.3125rem;
line-height: 1.43;
color: #4a4a4a;
}
.training-subheader-card h4 {
color: var(--sc);
font-weight: 500;
line-height: 1.15;
margin-top: 0;
margin-bottom: 16px;
}
.training-subheader-card p {
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 2;
color: var(--dk);
margin: 0;
}
.training-panel-card {
overflow: hidden;
padding: 0;
margin-bottom: 12px;
border-radius: 23px;
}
/* Gap spacers between cards */
.training-panel-gap {
height: 36px;
}
.training-panel-gap-bottom {
height: 48px;
}
/* Desktop: single continuous vertical line via container pseudo-element */
@media screen and (min-width: 640px) {
.training-panel-card {
margin-bottom: 0;
}
}
/* Mobile: image always on top (card 2 has text-first in DOM) */
@media screen and (max-width: 639px) {
.training-panel-image-mobile-first {
order: -1;
}
}
.training-panel-image-cell {
padding: 0;
min-height: 280px;
overflow: hidden;
}
.training-panel-image-cell img {
width: 100%;
height: 100%;
min-height: 280px;
object-fit: cover;
display: block;
}
.training-panel-text-cell {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 40px 48px;
background: var(--wh);
}
.training-panel-text-cell h3 {
color: var(--pr);
margin-top: 8px;
margin-bottom: 12px;
}
.training-label-chip,
.experience-env-tag {
display: inline-block;
background: var(--edu);
color: var(--sc);
font-family: var(--font-body);
font-size: 0.75rem;
line-height: 2.5;
border-radius: 50px;
}
.training-label-chip { font-weight: 700; padding: 0 12px; }
.experience-env-tag { font-weight: 900; padding: 0 20px; }
#training-cta {
padding: 0 40px 64px;
}
/* --- 404 ERROR PAGE | hero fills the viewport between header and footer.
!important ensures local.css's fixed 45em/50em height values don't win
regardless of cascade order. --- */
#error-section {
height: auto !important;
min-height: calc(100vh - 40px - var(--nav-height)) !important;
}
/* ============================================================
MOBILE SECTION SPACING — utility classes + per-section overrides
These classes halve a section's top and/or bottom padding at the
mobile breakpoint. `!important` is required because each section's
base padding is set on an ID selector, which beats a class on
specificity. Sections that need a non-default halved value opt in
via the `--mobile-tight` custom property (defaults to 75px).
============================================================ */
@media screen and (max-width: 39.9375em) {
.section-mobile-tight { padding-top: var(--mobile-tight, 75px) !important; padding-bottom: var(--mobile-tight, 75px) !important; }
.section-mobile-tight-top { padding-top: var(--mobile-tight, 75px) !important; }
.section-mobile-tight-bottom { padding-bottom: var(--mobile-tight, 75px) !important; }
/* Per-section --mobile-tight overrides (base padding is 140px → 70px) */
#company-press,
#company-video,
#centers-cta-section { --mobile-tight: 70px; }
/* Per-section --mobile-tight overrides (base padding is 130px → 65px) */
#avelo-training-intro,
#professionals-intro,
#for-dive-centers-intro { --mobile-tight: 65px; }
/* One-off section values not covered by the utility classes */
#training-section { padding-top: 0; padding-bottom: 0; }
#avelo-training-philosophy { padding-top: 0; padding-bottom: 65px; }
.avelo-training-philosophy-copy { padding-top: 32px; }
#for-dive-centers-community { padding-top: 75px; padding-bottom: 12px; }
#centers-hero { padding-top: 48px; }
#company-values { padding-top: 70px; padding-bottom: 77px; }
#company-recognition { padding-top: 0; padding-bottom: 75px; }
#company-recognition .company-recognition-award { margin-top: 0; }
#system-showcase { margin-top: 100px; }
.events-feed { margin-top: 0; }
}
/* ============================================================
AVELO EDGE — dive-analysis tool (scoped)
============================================================ */
.avelo-edge {
&.edge-page {
width: 100vw;
margin-left: calc(50% - 50vw);
}
/* ── Layout ─────────────────────────────────────────────── */
.edge-header {
margin-top: -1em;
width: 100%;
background-color: #fff;
border-bottom: 1px solid var(--sc);
}
.edge-header__inner {
max-width: 80rem;
margin: 0 auto;
padding: 12px 1rem;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.edge-header__title {
margin: 0;
letter-spacing: -0.015em;
color: var(--sc);
}
.edge-header__unit {
margin-left: auto;
}
.edge-header__controls {
display: flex;
align-items: center;
gap: 24px;
margin-left: 24px;
}
.edge-content {
max-width: 80rem;
margin: 0 auto;
padding: 1rem 0;
box-sizing: border-box;
}
.edge-grid {
margin: 0 -0.625rem;
}
.edge-dive-panel {
padding: 1rem;
}
.edge-panel-divider {
margin: 32px -1rem 0;
border-top: 1px solid var(--border-light-gray);
padding-bottom: 32px;
}
/* ── Dive score label ────────────────────────────────── */
.edge-dive-score__label {
margin: 0 0 0.5rem;
font-size: 9pt;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sc);
}
/* ── Typography tokens ───────────────────────────────────── */
.ae-h1, h1 {
font-family: 'Rubik', sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0;
}
.ae-h2, h2 {
font-family: 'Rubik', sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0;
}
.ae-h3, h3 {
font-family: 'Rubik', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.005em;
margin: 0;
}
.ae-eyebrow {
font-family: 'Rubik', sans-serif;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.04em;
margin: 0;
margin-bottom: 8px;
}
.ae-stat {
font-family: 'Rubik', sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.015em;
}
.ae-body {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.55;
margin: 0;
}
.ae-body-strong {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.55;
margin: 0;
}
.ae-helper {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
margin: 0;
}
.ae-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--sc);
color: var(--sc);
}
.ae-link {
cursor: pointer;
text-decoration: underline;
}
/* ── Button overrides (Foundation .button scoped to edge) ── */
.button.ae-btn-dark {
background-color: var(--pr);
border-color: var(--pr);
color: #fff;
font-family: 'Rubik', sans-serif;
font-weight: 500;
}
.button.ae-btn-dark:hover {
background-color: #002550;
border-color: #002550;
}
/* ── Score / inline colour tokens ───────────────────────── */
.score-good { color: #16a34a; font-weight: 600; }
.score-action { color: #1d4ed8; font-weight: 600; }
.score-link { color: #1d4ed8; font-weight: 600; text-decoration: underline; }
.score-value { color: #16a34a; font-weight: 600; }
.score-big { font-weight: 600; }
.text-muted { color: #64748b; }
.score-details {
margin-bottom: 32px;
}
.phase-scores {
display: flex;
justify-content: space-around;
text-align: center;
}
/* ── Dive score / details ────────────────────────────────── */
.edge-dive-score {
display: flex;
flex-direction: column;
}
.edge-dive-details {
display: flex;
flex-direction: column;
}
.edge-dive-details .editable-title {
font-size: 24px;
}
/* ── Selected dive selector ──────────────────────────────── */
.edge-selected-dive {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: var(--sc);
}
.edge-selected-dive__info {
display: flex;
flex-direction: column;
padding: 0.5rem;
}
.edge-selected-dive__content {
padding-bottom: 16px;
}
.edge-selected-dive__date {
margin: 0;
font-size: 14pt;
font-weight: 400;
}
.edge-selected-dive__time {
padding-right: 8px;
}
/* ── Graph card ──────────────────────────────────────────── */
.edge-section-header .MuiToggleButtonGroup-root {
background-color: rgba(255, 255, 255, 0.7);
}
.edge-section-header .MuiToggleButton-root {
padding: 3px 16px !important;
margin: 2px !important;
}
.edge-dive-graphs__graph-area {
background: white;
margin: 0 -16px;
padding: 0 16px;
}
.edge-graphs .series-checkboxes {
padding: 8px 32px;
}
/* ── Control strip ───────────────────────────────────────── */
.edge-control-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
padding: 8px 12px;
margin: 8px 0;
background-color: var(--edu);
border: 1px solid #B8D8EE;
border-radius: 10px;
}
/* Compact button sizing shared by all control-strip buttons */
.edge-control-strip .button {
margin: 0;
font-size: 12px;
padding: 5px 10px;
border-radius: 4px;
}
/* ── Segment cards ───────────────────────────────────────── */
.edge-segments {
padding: 6px 0 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.edge-segment-card {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
flex-wrap: wrap;
}
.edge-segment-card__label {
min-width: 72px;
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
}
.edge-segment-card__remove {
background: none;
border: none;
color: #dc2626;
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 0 2px;
opacity: 0.5;
}
.edge-segment-card__remove:hover {
opacity: 1;
}
.edge-segment-card__score {
margin-left: auto;
color: var(--pr);
white-space: nowrap;
}
/* Zero out MUI's default bottom margin so Selects sit centred in the flex row */
.edge-segment-card .MuiInputBase-root,
.edge-segment-card .MuiFormControl-root {
margin: 0;
align-self: center;
}
.edge-segment-card__info {
flex-shrink: 0;
background: none;
border: 1.5px solid var(--sc);
color: var(--sc);
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
font-style: italic;
cursor: pointer;
padding: 0;
line-height: 1;
font-family: serif;
}
.edge-segment-card__info:hover {
background: var(--edu);
}
.edge-add-segment-btn {
align-self: flex-start;
background-color: var(--light) !important;
border-color: var(--light) !important;
color: #fff !important;
border-radius: 20px !important;
font-size: 12px !important;
padding: 5px 16px !important;
margin: 4px 0 0 0 !important;
}
.edge-add-segment-btn:hover {
background-color: #00A3BE !important;
border-color: #00A3BE !important;
}
/* ── Time window ─────────────────────────────────────────── */
.edge-time-window {
padding-top: 8px;
border-top: 1px solid var(--border-blue-light);
margin-top: 12px;
}
.edge-time-window .ae-eyebrow {
color: var(--text-secondary, #3A5670);
margin-bottom: 4px;
}
.divided-sections {
border-left: 1px solid var(--border-light-gray);
}
.divided-sections:first-child {
border-left: none;
}
/* ── Dive stats ──────────────────────────────────────────── */
.edge-dive-stats {
border-top: 1px solid #B8D8EE;
padding: 32px 0 4px;
margin-top: 8px;
}
.edge-dive-stats .stat-display {
display: flex;
align-items: center;
}
.edge-dive-stats .stat {
color: var(--pr);
}
.edge-dive-stats .stat-subtext {
color: #6B829A;
}
/* ── Gear settings accordion ─────────────────────────────── */
.edge-dive-settings__header {
display: flex;
align-items: center;
gap: 8px;
color: var(--sc);
}
.edge-dive-settings__gear {
font-size: 2em;
}
.edge-dive-settings__text {
margin-left: 8px;
}
.edge-accordion-chevron {
color: var(--sc);
}
/* ── MUI overrides ───────────────────────────────────────── */
.MuiOutlinedInput-root {
border-radius: 30px;
}
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
border-color: var(--light);
border-width: 2px;
}
/* Zero-state hero */
.edge-zero-panel {
padding-top: 8px;
}
.edge-zero-panel__hero {
/* centering handled by Foundation `text-center` on the parent panel */
max-width: 40rem;
margin: 0 auto 32px;
}
.edge-zero-panel__hero-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
border-radius: 50%;
background: var(--edu); /* --edu */
border: 2px solid var(--light); /* --light: cyan ring */
box-shadow: 0 0 0 8px rgba(0, 190, 217, 0.12); /* faint cyan halo (focus-ring language) */
color: var(--light); /* --blue: brand-blue glyph per dev guide */
font-size: 34px;
margin: 8px 0 28px;
}
.edge-zero-panel__eyebrow {
color: #6B829A; /* --text-tertiary: eyebrows per dev guide */
}
.edge-zero-panel__heading {
margin: 0 0 16px;
color: #003363;
}
.edge-zero-panel__description {
max-width: 36rem;
margin: 0 auto;
color: #3A5670; /* --text-secondary */
}
.edge-no-dives-label {
margin: 4px 0 0;
padding-left: 8px;
color: #8FA4B8;
}
/* Zero-state step cards */
.edge-zero-steps {
}
.edge-zero-step {
background: #F4FAFD; /* --page-bg */
border: 1px solid #DCE5EC; /* --border-soft */
border-radius: 12px; /* --radius-md */
padding: 20px;
height: 100%;
}
.edge-zero-step__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.edge-zero-step__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: #FFFFFF; /* --surface-1: white circle */
font-size: 18px;
color: var(--light); /* --blue glyph */
}
/* Step 1 centers the Avelo Mode mark inside the same white circle. */
.edge-zero-step__icon--avelo-mode {
background-image: url('/images/AveloModeIcon.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 22px auto;
}
.edge-zero-step__number {
font-family: 'Rubik', sans-serif;
font-size: 28px;
font-weight: 700;
color: #DDF0FC; /* faint light-blue ghost/watermark step counter */
line-height: 1;
}
.edge-zero-step__title {
margin-bottom: 8px;
color: #003363;
}
.edge-zero-step__body {
color: #3A5670; /* --text-secondary */
}
/* Zero-state CTA buttons */
.edge-zero-panel__actions {
/* layout via Foundation grid-x align-center; only spacing is custom */
margin-bottom: 16px;
}
.edge-zero-panel__compat {
color: #6B829A; /* --text-tertiary: hint */
}
.edge-zero-panel__help {
padding: 16px 0;
color: #6B829A; /* --text-tertiary: hint */
}
/* Zero-state CSV upload banner */
.edge-zero-csv {
margin-top: 16px;
border: 2px dashed transparent;
transition: border-color 0.15s, background-color 0.15s;
}
.edge-zero-csv--drag-active {
border-color: #00BED9;
background-color: #DDF0FC;
}
.edge-zero-csv__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #DDF0FC;
font-size: 22px;
color: #00689E; /* --blue per dev guide */
flex-shrink: 0;
}
.edge-zero-csv__text {
/* `cell auto` provides flex-grow; keep a sensible min so the row wraps gracefully */
min-width: 200px;
}
.edge-zero-csv__file-input {
display: none;
}
.edge-zero-csv__body--error { color: var(--error, #c0392b); }
.edge-zero-csv__body--success { color: #10b981; }
.edge-zero-csv__body--uploading,
.edge-zero-csv__body--idle { color: inherit; }
.MuiAccordion-root {
background: transparent !important;
padding: 8px 0;
box-shadow: none !important;
}
.MuiAccordion-root::before {
display: none !important;
}
.edge-dive-settings__container .MuiAccordionSummary-root.Mui-expanded {
background-color: #fff;
}
.MuiToggleButtonGroup-root {
border-radius: 20px;
background-color: var(--edu);
}
.MuiToggleButtonGroup-grouped {
border: none !important;
border-radius: 20px !important;
}
.MuiToggleButtonGroup-grouped:not(:first-of-type) {
border-left: none !important;
margin-left: 0 !important;
border-radius: 20px !important;
}
.MuiToggleButton-root {
border-radius: 20px !important;
color: var(--sc) !important;
background-color: transparent !important;
text-transform: none !important;
padding-left: 32px !important;
padding-right: 32px !important;
margin: 4px !important;
}
.MuiToggleButton-root.Mui-selected {
color: #fff !important;
background-color: var(--sc) !important;
}
/* ── Archetype info card ─────────────────────────────────── */
.archetype-info {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0;
}
.archetype-info .ae-icon {
flex-shrink: 0;
background-color: var(--edu);
}
.archetype-info__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.archetype-info__text p {
margin: 0;
}
/* ── How did you do table ────────────────────────────────── */
.how-did-you-do {
border: 1px solid #D7D7D7;
border-radius: 10px;
overflow: hidden;
margin-top: 16px;
}
.how-did-you-do__header {
padding: 12px 16px 10px;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Override the global table defaults inside this card.
(.avelo-edge .how-did-you-do .reskinned-table) */
.how-did-you-do .reskinned-table {
border: none;
border-radius: 0;
}
.how-did-you-do .reskinned-table thead th {
background-color: var(--edu);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.5;
}
.how-did-you-do .reskinned-table thead th:first-child {
border-top-left-radius: 0;
}
.how-did-you-do .reskinned-table thead th:last-child {
border-top-right-radius: 0;
}
.how-did-you-do .reskinned-table tbody td {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.55;
border-bottom: 1px solid #D7D7D7;
}
.how-did-you-do .reskinned-table tbody tr:last-child td {
background-color: var(--edu) !important;
border-bottom: none;
}
.how-did-you-do .reskinned-table tbody td:first-child {
font-weight: 600;
}
/* ── Dive list zero-state ────────────────────────────────── */
.edge-no-dives-label {
margin: 4px 0 0;
padding-left: 8px;
color: var(--wg);
}
/* ── Zero-state panel ────────────────────────────────────── */
.edge-zero-panel {
padding-top: 8px;
}
.edge-zero-panel__hero {
/* centering handled by Foundation `text-center` on the parent panel */
max-width: 40rem;
margin: 0 auto 32px;
}
.edge-zero-panel__hero-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
border-radius: 50%;
background: var(--edu);
border: 2px solid var(--light); /* cyan ring */
box-shadow: 0 0 0 8px rgba(0, 190, 217, 0.12); /* faint cyan halo */
color: var(--light);
font-size: 34px;
margin: 8px 0 28px;
}
.edge-zero-panel__description {
max-width: 36rem;
margin: 0 auto;
color: var(--txl);
}
.edge-zero-panel__actions {
/* layout via Foundation grid-x align-center; only spacing is custom */
margin-bottom: 16px;
}
.edge-zero-panel__help {
padding: 16px 0;
color: var(--wg);
}
/* ── Zero-state step cards ───────────────────────────────── */
.edge-zero-step {
background: var(--ice);
border: 1px solid var(--border-blue-light);
border-radius: 12px;
padding: 20px;
height: 100%;
}
.edge-zero-step__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.edge-zero-step__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--wh);
font-size: 18px;
color: var(--light);
}
.edge-zero-step__icon--avelo-mode {
/* Step 1: center the Avelo Mode mark inside the white circle */
background-image: url('/images/AveloModeIcon.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 22px auto;
}
.edge-zero-step__number {
font-family: 'Rubik', sans-serif;
font-size: 28px;
font-weight: 700;
color: var(--edu); /* ghost watermark */
line-height: 1;
}
.edge-zero-step__title {
margin-bottom: 8px;
color: var(--pr);
}
.edge-zero-step__body {
color: var(--txl);
}
/* ── Zero-state CSV upload banner ────────────────────────── */
.edge-zero-csv {
margin-top: 16px;
border: 2px dashed transparent;
transition: border-color 0.15s, background-color 0.15s;
}
.edge-zero-csv--drag-active {
border-color: var(--light);
background-color: var(--edu);
}
.edge-zero-csv__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--edu);
font-size: 22px;
color: var(--light);
flex-shrink: 0;
}
.edge-zero-csv__text {
/* `cell auto` provides flex-grow; keep a sensible min so the row wraps gracefully */
min-width: 200px;
}
.edge-zero-csv__file-input {
display: none;
}
/* ── Mobile overrides (< 640px) ─────────────────────────── */
@media screen and (max-width: 639px) {
/* Header (2-row mobile layout): title + unit toggle on row 1, Summary /
Dive decoded spans row 2 as a full-width segmented control. */
.edge-header__inner {
flex-wrap: wrap;
gap: 10px 12px;
padding: 10px 0.75rem;
}
.edge-header__title {
font-size: 22px;
}
.edge-header__unit {
margin-left: 0;
}
.edge-header__controls {
width: 100%;
gap: 10px 12px;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 0;
}
/* Tighten the tab labels so two fit comfortably side by side */
.MuiToggleButton-root {
padding-left: 14px !important;
padding-right: 14px !important;
font-size: 13px !important;
}
/* Summary / Dive decoded → full-width segmented control (header only) */
.edge-header__controls .MuiToggleButtonGroup-root {
width: 100%;
display: flex;
}
.edge-header__controls .MuiToggleButton-root {
flex: 1 1 0;
}
/* Drop the card's L/R padding on phones so graphs (and their dual-axis
labels) can use the full screen width — the chart was the tightest
thing on the page. Vertical padding stays. */
.edge-dive-panel {
padding-left: 0;
padding-right: 0;
}
.edge-dive-graphs__graph-area {
margin: 0;
padding: 0;
}
/* Score blocks: stack the gauge above its text. Both ScoreDetails and
ScoreGauge use grid-x with `cell shrink` (gauge) + `cell auto` (text);
on a phone the auto column collapses to one-word-per-line. Forcing the
cells full width lets them wrap onto separate rows (Foundation-style). */
.score-details > .cell {
flex: 0 0 100%;
max-width: 100%;
}
.score-details .edge-dive-score {
align-items: center;
text-align: center;
}
.score-details .edge-dive-details {
margin-top: 12px;
}
/* Keep the Settling / Cruising labels apart once the gauge column
is centered and shrinks to its content width. */
.score-details .phase-scores {
gap: 36px;
}
/* How did you do: on phones render the dense 4-column table as one card
per phase rather than a horizontally scrolling table. Column headers
fold into per-cell labels, hardcoded by column position since this
table's columns are fixed (Phase / measured / meaning / next). */
.how-did-you-do {
.reskinned-table {
min-width: 0;
border: none;
}
.reskinned-table thead {
display: none;
}
.reskinned-table,
.reskinned-table tbody,
.reskinned-table tr,
.reskinned-table td {
display: block;
width: auto;
}
.reskinned-table tr {
border: 1px solid #D7D7D7;
border-radius: 10px;
margin: 0 12px 10px;
padding: 0 14px 10px;
background: #fff;
}
.reskinned-table tr:first-child {
margin-top: 4px;
}
/* Neutralize the desktop "fill the Overall row with --edu" so each card
reads uniformly (same selector + later = wins over the !important). */
.reskinned-table tbody tr:last-child td {
background-color: transparent !important;
}
.reskinned-table td {
border-bottom: none !important;
padding: 8px 0 0;
}
.reskinned-table td:empty {
display: none; /* e.g. Overall EI has no "what to try next" */
}
.reskinned-table td:not(:first-child)::before {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: #6B829A; /* edge text-tertiary */
margin-bottom: 2px;
}
.reskinned-table td:nth-child(2)::before {
content: "What we measured";
}
.reskinned-table td:nth-child(3)::before {
content: "What it means";
}
.reskinned-table td:nth-child(4)::before {
content: "What to try next";
}
/* First cell (Phase) is the card title — bigger, no label, divider under */
.reskinned-table td:first-child {
font-size: 16px;
padding: 10px 0 8px;
border-bottom: 1px solid #EAF0F5 !important;
}
}
.edge-section-header {
flex-direction: column;
align-items: flex-start;
padding: 8px 16px;
}
/* Let segment cards stack their items on very small screens */
.edge-segment-card {
row-gap: 6px;
}
/* Full-width buttons in the control strip on mobile */
.edge-control-strip {
gap: 6px;
}
/* Drop the vertical divider lines on grid cells that stack full-width on
mobile (Last dive / Overall average gauges, and the dive-stat cells).
Scoped to .cell so the TrendGraph's Overall | Buoyancy divider stays. */
.cell.divided-sections {
border-left: none;
}
/* Dive stats: 2x2 grid on phones instead of a tall, centered single column
marooned in empty margin. The four `cell large-3` items default to full
width below 1024px; force them to half width so they pair up. */
.edge-dive-stats .grid-x > .cell {
flex: 0 0 50%;
max-width: 50%;
padding: 10px 0;
}
.edge-dive-stats .flex-row {
justify-content: flex-start;
}
}
/* ── FA icon inline helper ── */
.edge-insight-icon {
margin-right: 5px;
color: var(--sc);
}
/* ── Workload gauge ── */
.wl-gauge {
position: relative;
height: 28px;
background: rgba(125, 211, 252, 0.07);
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.2);
overflow: hidden;
margin-top: 8px;
margin-bottom: 12px;
}
.wl-gauge__fill {
position: absolute;
left: 0; top: 0; bottom: 0;
}
.wl-gauge__fill--ok { background: rgba(16, 185, 129, 0.15); border-right: 3px solid #10b981; }
.wl-gauge__fill--over { background: rgba(239, 68, 68, 0.15); border-right: 3px solid #ef4444; }
.wl-gauge__label {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 11px;
}
.wl-gauge__label--min { left: 0.5rem; color: #71c0e7; }
.wl-gauge__label--max { right: 0.5rem; color: #f87171; font-weight: 600; }
.wl-gauge__label--value { font-weight: 600; transform: translate(-50%, -50%); }
.wl-gauge__label--value.ok { color: #10b981; }
.wl-gauge__label--value.over { color: #ef4444; }
/* ── Tidal-volume legend ── */
.tv-legend { display: flex; gap: 0.75rem; align-items: center; margin-top: 8px; }
.tv-legend__item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 12px; }
.tv-legend__item--predicted { color: #94a3b8; }
.tv-legend__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tv-legend__swatch--actual { border: 2px solid #10b981; background: rgba(16, 185, 129, 0.15); }
.tv-legend__swatch--predicted { border: 1.5px dashed #94a3b8; }
/* ── Dive log upload control ── */
.edge-upload { margin-bottom: 1rem; }
.edge-upload__file-input { display: none; }
.edge-upload__message { margin: 0.25rem 0 0; font-size: 0.875rem; }
.edge-upload__message--error { color: #ef4444; }
.edge-upload__message--success { color: #10b981; }
/* ── Common section header (reused by Breathing Profile, Key Insights, Dive graphs) ── */
/* Blue-tinted bar pinned to the top of a callout--white card.
The section header is a direct child of callout--white, which has padding: 8px 0
and zero horizontal padding. margin-top: -8px eats exactly the callout's top
padding to make the bar flush with the card edge; no horizontal adjustment needed
since the callout has no horizontal padding. margin-bottom: 1rem adds breathing
room between the bar and the content below. */
.edge-section-header {
margin: -1rem -1rem 0;
padding: 16px 1.5rem;
background-color: var(--edu);
border-bottom: 1px solid #B8D8EE;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px;
}
.edge-section-header__title {
color: var(--pr);
margin: 0;
}
.edge-section-header__subtitle {
color: var(--txl);
font-size: 12px;
margin: 0;
}
/* ── Breathing profile columns — stack on small screens with gap ── */
.edge-breathing-col + .edge-breathing-col {
margin-top: 1.25rem;
}
@media (min-width: 640px) {
.edge-breathing-col + .edge-breathing-col {
margin-top: 0;
}
}
.edge-breathing-col .ae-body-strong {
margin-bottom: 6px;
}
/* ── Key insight cards ── */
.edge-insight-card {
padding: 16px 0;
border-bottom: 1px solid #E8EFF4;
}
.edge-insight-card > * + * {
margin-top: 8px;
}
.edge-insight-card:last-child {
border-bottom: none;
padding-bottom: 0;
}
.edge-insight-card__metric {
color: var(--sc);
background: var(--edu);
padding: 2px 8px;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
}
.edge-insight-card__recommendation {
color: var(--sc);
font-style: italic;
}
/* ── Settling shape illustration ── */
.edge-settling-shape {
margin-top: 8px;
padding: 12px;
background: #F4FAFD;
border-radius: 8px;
}
.edge-settling-shape__image img {
width: 100%;
height: auto;
border-radius: 6px;
}
.edge-settling-shape__text > * + * {
margin-top: 6px;
}
.edge-settling-shape__technique {
color: var(--sc);
font-style: italic;
}
}
/* ===== Tables (default) =====================================================
Promoted from the former .reskinned-table: every
gets this base.
More specific surfaces override below — marketing FAQ tables
(.adoc-embed table.faq-table) and the Avelo Edge score table
(.avelo-edge .how-did-you-do .reskinned-table). */
table {
margin-bottom: 0;
border: 1px solid #D7D7D7;
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
.table-actions {
display: flex;
flex-direction: row;
gap: 10px;
}
thead th {
background-color: var(--edu);
font-weight: 400;
color: #4A4A4A;
padding-left: 16px;
border: none;
}
thead th:first-child {
border-top-left-radius: 10px;
}
thead th:last-child {
border-top-right-radius: 10px;
}
thead {
border-style: none;
}
tbody {
border-style: none;
font-size: 14px;
}
tbody td {
border-style: none;
background: white;
padding-left: 16px;
}
tbody tr {
background: white;
}
tbody tr td {
color: #4A4A4A;
font-weight: 400;
}
tbody tr:nth-child(odd) td:first-child {
color: #4A4A4A;
font-weight: 400;
}
tbody tr:nth-child(even) td:first-child {
color: #4A4A4A;
font-weight: 400;
}
td .MuiInputBase-root {
margin-bottom: 0;
}
td .MuiPickersInputBase-root {
margin-bottom: 0;
}
tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
tbody tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
p {
margin-bottom: 0;
}
}
/* Selected / highlighted row (wins over the white cell bg via specificity) */
tr.selected td {
background-color: lightgreen;
}
/* Sortable column headers (Table component) */
th.sortable {
position: relative;
cursor: pointer;
padding-left: 1.5em;
}
th.sortable a {
color: #4A4A4A;
}
th.sortable::before {
content: "";
position: absolute;
left: 0.5em;
top: 50%;
transform: translateY(-50%);
width: 1em;
height: 1em;
background-repeat: no-repeat;
background-size: contain;
}
th.sortable.sort::before {
background-image: url('/images/TableSort.svg');
}
th.sortable.sort-up::before {
background-image: url('/images/TableSort_upArrow.svg');
}
th.sortable.sort-down::before {
background-image: url('/images/TableSort_downArrow.svg');
}
/* Avelo Edge — callout section headers */
.callout--white {
margin-bottom: 2rem;
}
.callout--white.collapse {
padding-bottom: 0;
}
.edge-section-toggle {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: inherit;
line-height: 2;
}
/* Avelo Edge — dive panel layout */
.edge-dive-panel {
padding: 1rem;
}
.avelo-edge .edge-panel-divider {
margin: 32px -1rem 0;
border-top: 1px solid #D7D7D7;
padding-bottom: 32px;
}
.avelo-edge .edge-gauge-grid {
align-items: stretch;
}
.avelo-edge .edge-gauge-grid__right {
border-left: 1px solid #D7D7D7;
padding-top: 32px;
padding-bottom: 32px;
}
.avelo-edge .edge-gauge-grid .cell:first-child {
padding-top: 32px;
padding-bottom: 32px;
}
.edge-dive-score {
display: flex;
flex-direction: column;
}
.small-header {
margin: 0;
font-weight: 500;
color: #00689E;
}
.edge-dive-score__label {
margin: 0 0 0.5rem;
font-size: 9pt;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #00689E;
}
.edge-dive-details {
display: flex;
flex-direction: column;
}
.edge-dive-details .editable-title {
font-size: 24px;
}
.avelo-edge .MuiOutlinedInput-root {
border-radius: 30px;
}
.avelo-edge .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
border-color: var(--light);
border-width: 2px;
}
/* Avelo Edge — selected dive display */
.edge-selected-dive {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: #00689E;
}
.edge-selected-dive__info {
display: flex;
flex-direction: column;
}
.edge-selected-dive__label {
font-weight: 500;
font-size: 9pt;
}
.edge-selected-dive__date {
margin: 0;
font-size: 14pt;
font-weight: 400;
}
.edge-selected-dive__serial {
margin: 0;
font-size: 8pt;
}
/* Avelo Edge — MUI Accordion overrides */
.MuiAccordion-root.MuiAccordion-rounded.Mui-expanded {
padding-top: 0;
}
.avelo-edge .MuiAccordionSummary-root.Mui-expanded {
background-color: var(--edu);
}
.avelo-edge .edge-dive-selector {
margin: -1rem;
}
/* Avelo Edge — MUI ToggleButtonGroup overrides */
.avelo-edge .toggle-button--section.MuiToggleButtonGroup-root {
border-radius: 100px !important;
background-color: #fff !important;
overflow: hidden !important;
border: 1px solid var(--blue) !important;
padding: 0 !important;
}
.avelo-edge .toggle-button--section .MuiToggleButtonGroup-grouped {
border: none !important;
margin: 0 !important;
border-radius: 0 !important;
}
.avelo-edge .toggle-button--section .MuiToggleButtonGroup-grouped:not(:first-of-type) {
border-left: 1px solid var(--blue) !important;
margin-left: 0 !important;
}
.avelo-edge .toggle-button--section .MuiToggleButton-root {
color: var(--blue) !important;
background-color: transparent !important;
padding: 4px 16px !important;
text-transform: none !important;
font-size: 0.8125rem !important;
border-radius: 0 !important;
margin: 0 !important;
min-width: 0 !important;
outline: none !important;
line-height: 1.4 !important;
}
.avelo-edge .toggle-button--section .MuiToggleButton-root.Mui-selected {
color: #fff !important;
background-color: var(--blue) !important;
}
/* Trend graph */
.trend-graph-card {
display: flex;
flex-direction: column;
height: 100%;
}
.trend-graph-series-bar {
display: flex;
gap: 8px;
margin-top: 8px;
}
.trend-graph-series-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
user-select: none;
padding: 4px 0;
}
.trend-graph-series-item--hidden {
opacity: 0.4;
}
.pill--custom {
background: var(--pill-bg);
color: #fff;
}
.trend-graph-series-value {
margin-top: 16px !important;
color: var(--blue);
}
.series-trend {
margin-top: 2px;
.fa-solid {
line-height: 1;
}
}
.series-trend--up {
color: var(--status-good);
}
.series-trend--neutral {
color: var( --txl);
}
.series-trend--down {
color: var(--status-bad);
}
/* Avelo Edge — Dive Settings inputs */
.edge-dive-settings__selects {
display: flex;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 1rem;
}
.edge-dive-settings__selects > * {
flex: 1 1 calc(50% - 0.5rem);
min-width: 0;
}
.edge-dive-settings__selects > .MuiFormControl-root {
margin-top: 1.5rem;
}
.edge-dive-settings__selects .MuiInputLabel-root {
top: auto !important;
bottom: calc(100% + 4px) !important;
left: 0 !important;
transform: none !important;
font-family: 'Rubik', sans-serif;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.04em;
color: inherit;
}
.edge-dive-settings__selects .MuiOutlinedInput-notchedOutline {
top: 0;
}
.edge-dive-settings__selects .MuiOutlinedInput-notchedOutline legend {
display: none;
}
.equipment .edge-dive-settings__selects > .MuiFormControl-root:last-child {
flex-grow: 0;
}
.edge-dive-settings__checkboxes {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
}
.edge-dive-settings__checkbox-label {
display: flex;
align-items: center;
gap: 0.4rem;
font-family: 'Rubik', sans-serif;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.04em;
cursor: pointer;
margin: 0;
}
.edge-dive-settings__checkbox-label input[type="checkbox"] {
margin: 0;
flex-shrink: 0;
}
.edge-dive-settings__height-imperial {
display: flex;
gap: 0.5rem;
margin-top: 1.5rem;
}
.edge-dive-settings__height-imperial > .MuiFormControl-root {
flex: 1;
min-width: 0;
margin-top: 0;
}
.edge-dive-settings__toggle-field {
position: relative;
align-items: flex-start;
margin-top: 1.5rem;
}
.edge-dive-settings__toggle-field .MuiToggleButtonGroup-root {
width: 100%;
background-color: rgba(255, 255, 255, 0.7);
outline: 2px solid var(--light);
border-radius: 30px;
}
.avelo-edge {
.edge-dive-settings__toggle-field .MuiToggleButton-root.Mui-selected {
background-color: var(--light) !important;
color: white;
}
.edge-dive-settings__toggle-field .MuiToggleButton-root {
padding: 1em 8px !important;
margin: 2px !important;
border-radius: 30px !important;
width: 50%;
color: var(--light);
}
.edge-dive-settings__toggle-field .MuiToggleButton-root .fa-solid {
font-size: 1.4em;
}
}
.edge-dive-settings__selects--imperial .edge-dive-settings__height-imperial,
.edge-dive-settings__selects--imperial .edge-dive-settings__toggle-field {
flex: 1 1 100%;
}
.edge-dive-settings__field-label {
position: absolute;
bottom: calc(100% + 4px);
left: 0;
font-family: 'Rubik', sans-serif;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.04em;
color: inherit;
}
.diver-profile {
margin-top: 32px;
}
.edge-segment-card__remove--hidden {
visibility: hidden;
pointer-events: none;
}
.edge-score-circle {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: #fff;
}
.edge-score-circle--good {
color: var(--status-good);
background-color: color-mix(in srgb, var(--status-good), transparent 60%);
}
.edge-score-circle--mid {
color: var(--status-warn);
background-color: color-mix(in srgb, var(--status-warn), transparent 60%);
}
.edge-score-circle--low {
color: var(--status-bad);
background-color: color-mix(in srgb, var(--status-bad), transparent 60%);
}
.edge-score-circle--none {
color: #888;
background-color: color-mix(in srgb, #888, transparent 30%);
}
.edge-dive-log-scroll {
display: flex;
flex-direction: column;
gap: 16px;
max-height: min(720px, calc(100dvh - 233px));
overflow-y: scroll;
margin-top: 8px;
border-top: 1px solid var(--border-light-gray);
border-bottom: 1px solid var(--border-light-gray);
padding: 1rem 0;
}
.edge-dive-log-scroll::-webkit-scrollbar {
width: 10px;
}
.edge-dive-log-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.edge-dive-log-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 30px;
}
.edge-dive-log-scroll__row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2px;
padding: 10px 4px;
cursor: pointer;
transition: background 0.15s;
border-left: 3px solid transparent;
border-bottom: none;
}
.edge-dive-log-scroll__row:hover {
background-color: var(--ice);
}
.edge-dive-log-scroll__row--selected,
.edge-dive-log-scroll__row--selected:hover {
background-color: var(--edu);
border-left-color: var(--ac);
}
.edge-dive-log-scroll__info {
display: flex;
flex-direction: column;
gap: 2px;
}
.edge-dive-log-scroll__info h4 {
margin: 0;
}
.edge-dive-log-scroll__month {
display: flex;
flex-direction: column;
gap: 4px;
.ae-eyebrow {
color: var(--text-tertiary);
}
}
.edge-dive-log-scroll__view-more {
display: block;
padding: 8px 4px;
text-align: center;
cursor: pointer;
}
.edge-dive-log-scroll__view-more--loading {
opacity: 0.5;
pointer-events: none;
}
.edge-dive-selector__pairing-links {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.edge-dive-selector__export-btn {
margin-top: 16px;
}
.edge-dive-settings__container {
margin: -1rem;
}