/* Fonts are linked from each page's , not @import-ed here: an @import can only be discovered after this file has downloaded and parsed, which puts the webfonts one extra round trip behind the render. */ :root { /* * Accent system — one base hue drives every accent token in both themes. * Swap the palette with an attribute on : * bright light blue (default) * softer, airier blue * pale glacier blue */ --accent-base: #27a9e3; --accent: var(--accent-base); --accent-strong: color-mix(in srgb, var(--accent-base) 82%, #003a5c); --accent-soft: color-mix(in srgb, var(--accent-base) 13%, #fff); --accent-ink: color-mix(in srgb, var(--accent-base) 74%, #00354f); --accent-on-dark: color-mix(in srgb, var(--accent-base) 46%, #fff); --ink: #08233b; --ink-2: #0e3655; --ink-soft: #54718a; --surface: #f4fbff; --surface-2: #e9f7ff; --card: rgba(255, 255, 255, .76); --line: rgba(8, 35, 59, .12); --line-strong: rgba(8, 35, 59, .24); --blue: var(--accent-strong); --blue-deep: var(--accent-ink); --deep-panel: #002e4a; --aqua: var(--accent); --aqua-strong: var(--accent-strong); --aqua-dim: var(--accent-soft); --card-solid: #f8fcff; --coral: #ff7657; --white: #fff; --header-bg: var(--surface); --shadow: 0 22px 55px rgba(17, 61, 94, .14); --shadow-hover: 0 30px 80px rgba(9, 61, 96, .22); --display: 'Space Grotesk', sans-serif; --body: 'Manrope', sans-serif; --mono: 'DM Mono', monospace; --radius-lg: 2rem; --radius: 1.35rem; --container: min(1180px, calc(100vw - 3rem)); --wave-line-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 C13 1 27 1 40 5 S67 9 80 5 S107 1 120 5 S147 9 160 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); --wave-mask-bottom-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 56C190 128 375 0 720 73C1020 137 1200 21 1440 56V120H0Z'/%3E%3C/svg%3E"); --wave-mask-image-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0H1440V940C1230 995 1050 910 720 965C390 1020 180 900 0 940Z'/%3E%3C/svg%3E"); --wave-mask-image-side: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0H930C1000 160 870 310 940 500C1010 680 865 835 930 1000H0Z'/%3E%3C/svg%3E"); --wave-mask-image-side-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M1000 0H70C0 160 130 310 60 500C-10 680 135 835 70 1000H1000Z'/%3E%3C/svg%3E"); /* Mirror of --wave-mask-bottom-fill: fills from the top of the box DOWN to the wave line. Used under the sticky header so the filled part stays attached to the header bar. */ --wave-mask-top-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 0H1440V56C1200 21 1020 137 720 73C375 0 190 128 0 56Z'/%3E%3C/svg%3E"); --wave-line-mask-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 160' preserveAspectRatio='none'%3E%3Cpath d='M5 0 C1 13 1 27 5 40 S9 67 5 80 S1 107 5 120 S9 147 5 160' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); color-scheme: light; } html[data-accent='lagoon'] { --accent-base: #27a9e3; } html[data-accent='sky'] { --accent-base: #4fb6ec; } html[data-accent='ice'] { --accent-base: #5ec8e8; } html[data-theme='dark'] { --accent: color-mix(in srgb, var(--accent-base) 76%, #fff); --accent-strong: color-mix(in srgb, var(--accent-base) 52%, #fff); --accent-soft: color-mix(in srgb, var(--accent-base) 24%, #021c2b); --accent-ink: color-mix(in srgb, var(--accent-base) 66%, #fff); --accent-on-dark: color-mix(in srgb, var(--accent-base) 44%, #fff); } html[data-theme='dark'] { --ink: #e8f8ff; --ink-2: #c3e4f4; --ink-soft: #9bbbd0; --surface: #031825; --surface-2: #06263a; --card: rgba(8, 43, 63, .72); --line: rgba(200, 239, 255, .16); --line-strong: rgba(200, 239, 255, .3); --blue: var(--accent); --blue-deep: var(--accent-ink); --deep-panel: #001c2c; --aqua: var(--accent); --aqua-strong: var(--accent-strong); --aqua-dim: var(--accent-soft); --card-solid: #082b3f; --coral: #ff967e; --white: #f4fbff; --header-bg: var(--surface); --shadow: 0 22px 60px rgba(0, 0, 0, .34); --shadow-hover: 0 32px 80px rgba(0, 0, 0, .44); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(circle at 85% 4%, color-mix(in srgb, var(--aqua) 18%, transparent), transparent 20rem), radial-gradient(circle at 4% 24%, rgba(0, 119, 182, .1), transparent 28rem), var(--surface); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; overflow-x: hidden; } body::before { background-image: radial-gradient(rgba(0, 83, 132, .09) .7px, transparent .7px); background-size: 9px 9px; content: ''; inset: 0; mask-image: linear-gradient(to bottom, black, transparent 64rem); opacity: .23; pointer-events: none; position: fixed; z-index: -1; } ::selection { background: var(--aqua); color: #fff; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } img { display: block; max-width: 100%; } .skip-link { background: var(--ink); color: var(--white); left: 1rem; padding: .65rem 1rem; position: fixed; top: -4rem; z-index: 100; } .skip-link:focus { top: 1rem; } .container { margin-inline: auto; width: var(--container); } .section { padding: clamp(4.75rem, 9vw, 9rem) 0; position: relative; } .section-tight { padding: clamp(3.5rem, 6vw, 6rem) 0; } .eyebrow { align-items: flex-start; color: var(--blue-deep); display: flex; font-family: var(--mono); font-size: .69rem; font-weight: 500; gap: .65rem; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; } /* Centered on the first text line (line box ≈ .83rem, dot .55rem), even when the label wraps to more lines. */ .eyebrow::before { background: var(--aqua-strong); border-radius: 99px; content: ''; flex: 0 0 auto; height: .55rem; margin-top: .14rem; width: .55rem; } html[data-theme='dark'] .eyebrow { color: var(--aqua-strong); } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { font-family: var(--display); letter-spacing: -.055em; line-height: .99; } h1 { font-size: clamp(3rem, 7.5vw, 6.6rem); font-weight: 700; } h2 { font-size: clamp(2.15rem, 4.2vw, 4rem); font-weight: 700; } h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; } .display-line { color: var(--aqua); display: block; } .lead { color: var(--ink-soft); font-size: clamp(1rem, 1.7vw, 1.22rem); max-width: 42rem; } .section-heading { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: clamp(2.25rem, 5vw, 4rem); } .section-heading h2 { margin: .65rem 0 0; max-width: 15ch; } .section-heading .lead { margin: 0; max-width: 29rem; } /* Heading whose call to action belongs on its own row, aligned right. */ .section-heading.has-stacked-action { align-items: end; display: grid; gap: 1.35rem 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); } .section-heading.has-stacked-action > :last-child { grid-column: 1 / -1; justify-self: end; } /* Specificity has to beat .contact-cta-inner's flex layout. */ .contact-cta-inner.cta-stacked, .cta-stacked { align-items: start; display: grid; gap: 1.6rem; } .contact-cta-inner.cta-stacked > :last-child, .cta-stacked > :last-child { justify-self: end; } .text-link { align-items: center; color: var(--blue-deep); display: inline-flex; font-size: .9rem; font-weight: 800; gap: .65rem; } .text-link::after { content: '↗'; font-size: 1.15em; transition: transform .25s ease; } .text-link:hover::after { transform: translate(3px, -3px); } html[data-theme='dark'] .text-link { color: var(--aqua); } .site-header { left: 0; padding: 1.25rem 0; position: absolute; right: 0; top: 0; transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease; z-index: 30; } .site-header.is-scrolled { background: var(--header-bg); padding: .65rem 0; position: fixed; } /* Wavy bottom edge of the sticky header. The mask fills from the top of the band down to the wave line, so the shape stays welded to the bar above it. */ .site-header.is-scrolled::after { background: var(--header-bg); bottom: calc(-1 * var(--header-wave-height, 1.9rem) + 1px); content: ''; filter: drop-shadow(0 6px 8px rgba(0, 38, 62, .1)); height: var(--header-wave-height, 1.9rem); left: 0; mask: var(--wave-mask-top-fill) center / 100% 100% no-repeat; pointer-events: none; position: absolute; right: 0; } .site-header .primary-nav a { color: #f2fbff; } .site-header:not(.is-scrolled) .icon-button, .site-header:not(.is-scrolled) .menu-button { background: rgba(255, 255, 255, .84); color: #08304b; } .nav-shell { align-items: center; display: flex; gap: clamp(.8rem, 2vw, 2rem); justify-content: space-between; } .brand { align-items: center; display: inline-flex; flex: 0 0 auto; } .brand img { height: auto; max-height: 3.4rem; width: min(10.8rem, 30vw); } .primary-nav { align-items: center; display: flex; gap: clamp(.85rem, 2vw, 1.85rem); justify-content: center; } .primary-nav a { font-size: .82rem; font-weight: 800; letter-spacing: -.02em; position: relative; } .site-header.is-scrolled .primary-nav a { color: var(--ink); } .primary-nav a::after { background: var(--aqua-strong); border-radius: 99px; bottom: -.45rem; content: ''; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; width: 100%; } .primary-nav a:hover::after, .primary-nav a[aria-current='page']::after { transform: scaleX(1); } .nav-actions { align-items: center; display: flex; gap: .45rem; } .icon-button, .menu-button { align-items: center; background: color-mix(in srgb, var(--white) 58%, transparent); border: 1px solid var(--line); border-radius: 99px; color: var(--ink); display: inline-flex; height: 2.4rem; justify-content: center; padding: 0; transition: background-color .2s ease, transform .2s ease, border-color .2s ease; width: 2.4rem; } .icon-button:hover, .menu-button:hover { background: var(--white); border-color: var(--line-strong); transform: translateY(-2px); } .icon-button svg, .menu-button svg { height: 1.1rem; width: 1.1rem; } .language-switcher { position: relative; } .language-switcher summary { align-items: center; display: flex; list-style: none; } .language-switcher summary::-webkit-details-marker { display: none; } .language-switcher[open] .icon-button { border-color: var(--aqua-strong); } .language-list { background: color-mix(in srgb, var(--surface) 95%, transparent); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); display: grid; gap: .15rem; min-width: 9rem; padding: .45rem; position: absolute; right: 0; top: calc(100% + .55rem); } .language-list button { background: transparent; border: 0; border-radius: .65rem; color: var(--ink); font-size: .75rem; font-weight: 700; padding: .45rem .65rem; text-align: left; } .language-list button { align-items: center; display: flex; gap: .55rem; white-space: nowrap; } .language-list button:hover, .language-list button[aria-pressed='true'] { background: var(--aqua-dim); color: var(--ink); } .language-list button[aria-pressed='true'] .flag { box-shadow: 0 0 0 1px var(--aqua-strong); } /* Flat locale flags, all on one 3:2 box. */ .flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(8, 35, 59, .18); display: block; flex: 0 0 auto; height: .78rem; width: 1.17rem; } html[data-theme='dark'] .flag { box-shadow: 0 0 0 1px rgba(200, 239, 255, .28); } .language-switcher summary .flag { height: .95rem; width: 1.42rem; } .sr-only { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .menu-button { display: none; } .hero { align-items: end; background: #002944; color: #fff; display: flex; min-height: min(860px, 100svh); overflow: hidden; padding: 9rem 0 3.4rem; position: relative; justify-content: center; } .hero::before { background: linear-gradient(100deg, rgba(0, 16, 32, .84) 0%, rgba(0, 38, 66, .62) 42%, rgba(0, 30, 54, .16) 80%), linear-gradient(0deg, rgba(0, 14, 28, .5), transparent 40%); content: ''; inset: 0; position: absolute; z-index: 1; } .hero-media, .hero-media img { inset: 0; height: 100%; object-fit: cover; position: absolute; width: 100%; } .hero-media img { animation: heroBreathe 18s ease-in-out infinite alternate; } @keyframes heroBreathe { from { transform: scale(1.02); } to { transform: scale(1.1); } } .hero-bubbles, .hero-bubbles::before, .hero-bubbles::after { background: radial-gradient(circle, rgba(220, 255, 255, .7) 0 2px, transparent 3px) 10% 87% / 55px 75px, radial-gradient(circle, rgba(220, 255, 255, .45) 0 3px, transparent 4px) 35% 100% / 120px 120px, radial-gradient(circle, rgba(220, 255, 255, .55) 0 2px, transparent 3px) 90% 85% / 86px 95px; bottom: 0; content: ''; height: 80%; left: 0; opacity: .58; pointer-events: none; position: absolute; right: 0; z-index: 2; } .hero-bubbles { animation: bubbleRise 14s linear infinite; } .hero-bubbles::before { animation: bubbleRise 20s linear infinite reverse; opacity: .35; transform: scale(1.3); } .hero-bubbles::after { animation: bubbleRise 17s linear infinite; opacity: .25; transform: scale(.8); } @keyframes bubbleRise { from { background-position-y: 0, 0, 0; } to { background-position-y: -420px, -260px, -360px; } } .hero-content { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); margin-inline: auto; position: relative; width: var(--container); z-index: 4; } .hero .eyebrow { color: var(--accent-on-dark); } .hero h1 { font-size: clamp(2.7rem, 6vw, 5.3rem); margin: .85rem 0 1.45rem; max-width: 16ch; text-wrap: balance; } .hero .lead { color: rgba(234, 249, 255, .83); font-size: clamp(1rem, 1.45vw, 1.16rem); margin-bottom: 1.9rem; max-width: 36rem; } /* Club moto, set as a quote. */ .hero-moto { border-left: 3px solid color-mix(in srgb, var(--accent-on-dark) 70%, transparent); font-size: clamp(.98rem, 1.35vw, 1.1rem); font-style: italic; line-height: 1.65; padding-left: 1.15rem; } .button-row { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; } .button { align-items: center; background: var(--aqua); border: 1px solid var(--aqua); border-radius: 99px; color: #fff; display: inline-flex; font-size: .85rem; font-weight: 800; gap: .6rem; justify-content: center; min-height: 3.15rem; overflow: hidden; padding: .72rem 1.15rem; position: relative; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .button::before { background: rgba(255, 255, 255, .5); border-radius: 50%; content: ''; height: 9rem; left: -10rem; position: absolute; top: -3rem; transform: scale(0); transition: transform .6s ease, left .6s ease; width: 9rem; } .button:hover { background: var(--aqua-strong); border-color: var(--aqua-strong); box-shadow: 0 13px 28px color-mix(in srgb, var(--aqua) 35%, transparent); transform: translateY(-3px); } .button:hover::before { left: 50%; transform: scale(1); } .button > * , .button { isolation: isolate; } .button span { position: relative; } .button-outline { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .45); color: var(--white); } .button-outline:hover { background: rgba(255, 255, 255, .17); box-shadow: none; } .button-small { font-size: .78rem; min-height: 2.65rem; padding: .52rem .95rem; } /* Secondary action on light sections — used for the "call us" button. */ .button-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); } .button-ghost:hover { background: color-mix(in srgb, var(--aqua) 12%, transparent); border-color: var(--aqua); box-shadow: none; } .button-ghost::before { display: none; } .button svg { flex: 0 0 auto; height: 1.05rem; width: 1.05rem; } /* "Sună-ne" must never break at its hyphen, and the number stays on one line. */ .button-phone { font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; } .button-phone span { white-space: nowrap; } .hero-note { align-self: end; backdrop-filter: blur(12px); background: rgba(2, 31, 52, .45); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius); display: grid; gap: .45rem; padding: 1.2rem; } .hero-note strong { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; } .hero-note span { color: rgba(234, 249, 255, .8); font-size: .8rem; } /* Scroll cue: centered above the hero wave, bobbing gently downward. */ .hero-down { align-items: center; animation: heroBob 2.2s ease-in-out infinite; border: 1px solid rgba(255, 255, 255, .55); border-radius: 99px; bottom: clamp(4.2rem, 8vw, 6.5rem); color: rgba(255, 255, 255, .85); display: flex; height: 2.4rem; justify-content: center; left: 50%; margin-left: -1.2rem; position: absolute; transition: background-color .2s ease, border-color .2s ease; width: 2.4rem; z-index: 4; } .hero-down:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .85); } .hero-down svg { height: 1.2rem; width: 1.2rem; } @keyframes heroBob { 0%, 100% { transform: translateY(0); } 55% { transform: translateY(.45rem); } } .page-hero { background: #003454; color: #fff; min-height: 33rem; overflow: hidden; padding: 10rem 0 4rem; position: relative; } .page-hero::after { background: linear-gradient(90deg, rgba(0, 24, 43, .82), rgba(0, 32, 54, .43)); content: ''; inset: 0; position: absolute; } /* Wavy bottom edge, matching the home hero. */ .page-hero::before { background: var(--surface); bottom: -1px; content: ''; height: clamp(3rem, 5.5vw, 4.5rem); left: 0; mask: var(--wave-mask-bottom-fill) center / 100% 100% no-repeat; pointer-events: none; position: absolute; right: 0; z-index: 3; } .page-hero .container { position: relative; z-index: 2; } .page-hero .eyebrow { color: var(--accent-on-dark); } .page-hero h1 { margin: .7rem 0 1.2rem; max-width: 13ch; } .page-hero .lead { color: rgba(236, 250, 255, .84); } .page-hero .hero-photo { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; } .intro-grid { align-items: end; display: grid; gap: 3rem; grid-template-columns: .82fr 1.18fr; } .intro-grid h2 { margin: .7rem 0 0; } .intro-copy { font-size: 1.1rem; } .intro-copy p { color: var(--ink-soft); } .intro-copy p:last-child { margin-bottom: 0; } .experience-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); } .experience-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); min-height: 22rem; overflow: hidden; padding: 1.45rem; position: relative; transform: translateY(0); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .experience-card:hover { border-color: color-mix(in srgb, var(--aqua) 75%, var(--line)); box-shadow: var(--shadow-hover); transform: translateY(-8px); } /* Strong enough to keep the caption readable over the brightest photos. */ .experience-card::after { background: linear-gradient(0deg, rgba(0, 24, 40, .93) 8%, rgba(0, 30, 50, .55) 45%, rgba(0, 34, 55, .06) 78%); content: ''; inset: 0; position: absolute; } .experience-card > img { height: 100%; inset: 0; object-fit: cover; position: absolute; transition: transform .6s ease; width: 100%; } .experience-card:hover > img { transform: scale(1.08); } .experience-card .card-content { bottom: 1.35rem; color: #fff; left: 1.45rem; position: absolute; right: 1.45rem; z-index: 2; } .experience-card h3 { margin: .7rem 0; } .experience-card p { color: rgba(238, 251, 255, .83); font-size: .89rem; line-height: 1.55; margin-bottom: 1.1rem; max-width: 29ch; } .experience-card .eyebrow { color: var(--accent-on-dark); } .experience-card .text-link { color: #fff; } .marquee { background: var(--surface-2); overflow: hidden; padding: clamp(2.5rem, 5vw, 4rem) 0; position: relative; white-space: nowrap; } html[data-theme='dark'] .marquee { background: #041f30; } .marquee-track { animation: marquee 34s linear infinite; color: var(--ink); display: inline-flex; font-family: var(--display); font-size: clamp(1.6rem, 3.1vw, 2.9rem); font-weight: 700; gap: 2.6rem; letter-spacing: .01em; } .marquee-track span { align-items: center; display: inline-flex; gap: 2.6rem; } .marquee-track span::after { color: var(--aqua-strong); content: '✦'; font-size: .6em; } @keyframes marquee { to { transform: translateX(-50%); } } .course-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); } .course-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 26rem; overflow: hidden; position: relative; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .course-card:hover { border-color: var(--aqua); box-shadow: var(--shadow); transform: translateY(-7px); } .course-card .course-image { height: 11.7rem; overflow: hidden; position: relative; } .course-card .course-image img { height: 100%; mask: var(--wave-mask-image-bottom) center / 100% 100% no-repeat; object-fit: cover; transition: transform .55s ease; width: 100%; } .course-card:hover .course-image img { transform: scale(1.09); } .course-content { display: flex; flex: 1; flex-direction: column; padding: 1.35rem; } .course-content h3 { font-size: 1.55rem; margin: .75rem 0; } .course-content p { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1.35rem; } .course-content .text-link { margin-top: auto; } .course-level { align-items: center; color: var(--blue-deep); display: flex; font-family: var(--mono); font-size: .65rem; font-weight: 500; gap: .45rem; letter-spacing: .1em; text-transform: uppercase; } .course-level::before { background: var(--aqua-strong); border-radius: 100%; content: ''; height: .45rem; width: .45rem; } html[data-theme='dark'] .course-level { color: var(--aqua-strong); } /* Edge-to-edge band: no padding of its own and no gap to the sections around it. */ .full-width-feature { margin-block: 0; overflow: hidden; padding: 0 !important; position: relative; } .full-width-feature .full-bleed { margin-inline: 0; max-width: none; padding: 0; width: 100%; } .full-bleed.split-feature { max-width: none; } .full-width-feature .split-feature-content { padding-bottom: clamp(5.75rem, 8vw, 7.5rem); } .section:has(+ .full-width-feature), .section-tight:has(+ .full-width-feature) { padding-bottom: clamp(2.25rem, 4vw, 3.25rem); } .full-width-feature + .section, .full-width-feature + .section-tight { padding-top: clamp(3.5rem, 6vw, 6rem); } .section-wave-divider { bottom: -1px; fill: var(--wave-fill, var(--surface)); height: clamp(3.75rem, 7vw, 6.75rem); left: 0; pointer-events: none; position: absolute; width: 100%; z-index: 4; } .wave-to-footer { --wave-fill: #021522; } .split-feature { align-items: stretch; display: grid; gap: 0; grid-template-columns: 1.05fr .95fr; } /* The photo is over-sized so the parallax translate never uncovers the top or bottom edge. */ .split-feature-photo { min-height: 31rem; overflow: hidden; position: relative; } .split-feature-photo img { height: 116%; left: 0; object-fit: cover; object-position: center top; position: absolute; top: -8%; width: 100%; } .split-feature-content { background: var(--deep-panel); color: var(--white); display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(2rem, 6vw, 5rem); position: relative; z-index: 1; } .split-feature-content .eyebrow { color: var(--accent-on-dark); } .split-feature-content h2 { margin: .75rem 0 1.2rem; max-width: 11ch; } .split-feature-content p { color: rgba(230, 248, 255, .78); max-width: 30rem; } .feature-list { display: grid; gap: .9rem; list-style: none; margin: 1.8rem 0 0; padding: 0; } .feature-list li { align-items: flex-start; display: flex; font-size: 1rem; font-weight: 700; gap: .8rem; line-height: 1.45; } .feature-list li::before { color: var(--accent-on-dark); content: '●'; font-size: .72rem; padding-top: .27rem; } /* Breathing room between the feature list and the call to action under it. */ .feature-list + p, .feature-list + .button-row { margin-top: 2.25rem; } .trip-grid { display: grid; gap: 1.1rem; grid-template-columns: 1.15fr .85fr .85fr; } .trip-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); min-height: 23rem; overflow: hidden; position: relative; } .trip-card > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; } .trip-card::after { background: linear-gradient(0deg, rgba(0, 25, 43, .9), rgba(0, 43, 64, .05) 70%); content: ''; inset: 0; position: absolute; } .trip-card-content { bottom: 0; color: var(--white); left: 0; padding: 1.35rem; position: absolute; right: 0; z-index: 2; } .trip-card-content h3 { margin: .55rem 0; } .trip-card-content p { color: rgba(239, 251, 255, .82); font-size: .85rem; margin-bottom: .9rem; } .trip-meta { color: var(--accent-on-dark); font-family: var(--mono); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; } .trip-card:first-child { min-height: 29rem; } .safety-section { overflow: hidden; } .safety-panel { background: linear-gradient(135deg, #003a5a, #011f37); border-radius: var(--radius-lg); color: var(--white); overflow: hidden; padding: clamp(2rem, 5vw, 4.3rem); position: relative; } .safety-panel::before { border: 1px solid color-mix(in srgb, var(--accent-on-dark) 26%, transparent); border-radius: 50%; content: ''; height: 35rem; position: absolute; right: -12rem; top: -17rem; width: 35rem; } .safety-panel::after { background: repeating-radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--accent-on-dark) 14%, transparent) 0 1px, transparent 2px 18px); content: ''; inset: 0; opacity: .7; position: absolute; } .safety-inner { display: grid; gap: 2rem; grid-template-columns: .8fr 1.2fr; position: relative; z-index: 1; } .safety-panel .eyebrow { color: var(--accent-on-dark); } .safety-panel h2 { margin: .7rem 0 0; max-width: 10ch; } .safety-panel .lead { color: rgba(236, 251, 255, .76); margin-bottom: 0; } .safety-principles { display: grid; gap: .65rem; grid-template-columns: repeat(2, 1fr); } .safety-principle { align-items: flex-start; backdrop-filter: blur(5px); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1rem; display: flex; font-size: .86rem; gap: .75rem; padding: 1rem; } .safety-principle b { color: var(--accent-on-dark); font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; } .support-band { background: var(--aqua-dim); border-block: 1px solid color-mix(in srgb, var(--aqua) 45%, var(--line)); } .support-band .eyebrow::before { background: var(--aqua-strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aqua-strong) 16%, transparent); } html[data-theme='dark'] .support-band .eyebrow { color: var(--aqua-strong); } .support-grid { align-items: center; display: grid; gap: 2rem; grid-template-columns: .8fr 1.2fr; } .support-grid h2 { margin: .6rem 0 0; max-width: 11ch; } .support-grid p { color: var(--ink-soft); margin: 0; max-width: 43rem; } .support-grid .text-link { margin-top: 1rem; } .contact-cta { background: var(--surface-2); overflow: hidden; } .contact-cta::before { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--aqua) 24%, transparent), transparent 58%); content: ''; height: 36rem; left: 50%; position: absolute; top: -22rem; transform: translateX(-50%); width: 70rem; } .contact-cta-inner { align-items: end; display: flex; gap: 2rem; justify-content: space-between; position: relative; } .contact-cta h2 { margin: .7rem 0 0; max-width: 16ch; } .site-footer { background: #021522; color: #dff3fc; overflow: hidden; padding: 4.2rem 0 1.55rem; } .footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.5fr repeat(3, .7fr); } /* Natural scale — only the column width constrains it. */ .footer-brand img { height: auto; max-width: 100%; width: auto; } .footer-brand p { color: rgba(223, 243, 252, .72); font-size: .85rem; margin: 1.15rem 0 0; max-width: 22rem; } .footer-title { color: var(--accent-on-dark); font-family: var(--mono); font-size: .67rem; letter-spacing: .1em; margin-bottom: .9rem; text-transform: uppercase; } .footer-links { display: grid; gap: .45rem; } .footer-links a { color: rgba(223, 243, 252, .82); font-size: .85rem; } .footer-links a:hover { color: var(--accent-on-dark); } .footer-credit { color: rgba(223, 243, 252, .72); font-weight: 700; transition: color .2s ease; } .footer-credit:hover { color: var(--accent-on-dark); } .footer-bottom { --footer-band: #153243; --footer-wave-height: clamp(2.6rem, 4.5vw, 3.75rem); align-items: center; color: rgba(223, 243, 252, .62); display: flex; font-size: .72rem; justify-content: space-between; margin-top: 3.4rem; padding-top: calc(var(--footer-wave-height) + .35rem); position: relative; } /* Big wave surface above the last footer line — same curve as the hero divider. Both halves use one pre-blended opaque tone: a translucent fill would show a seam line where the wave band and the flat band below it overlap. */ .footer-bottom::before { background: var(--footer-band); content: ''; height: var(--footer-wave-height); left: 50%; mask: var(--wave-mask-bottom-fill) center / 100% 100% no-repeat; position: absolute; top: 0; transform: translateX(-50%); width: 100vw; } .footer-bottom::after { background: var(--footer-band); bottom: calc(-1.55rem - 2px); content: ''; left: 50%; position: absolute; top: calc(var(--footer-wave-height) - 1px); transform: translateX(-50%); width: 100vw; } .footer-bottom > * { position: relative; z-index: 1; } .footer-made { align-items: center; display: inline-flex; gap: .3rem; } .footer-heart { color: var(--accent-on-dark); font-size: .95em; } .wave-divider { fill: var(--surface); bottom: -1.4rem; height: 4.5rem; left: 0; position: absolute; width: 100%; z-index: 3; } .check-list { display: grid; gap: .85rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } .check-list li { align-items: flex-start; color: var(--ink-soft); display: flex; font-size: .92rem; gap: .8rem; } .check-list li::before { background: var(--aqua); border-radius: 50%; color: #fff; content: '✓'; display: grid; flex: 0 0 1.35rem; font-size: .75rem; font-weight: 900; height: 1.35rem; place-items: center; width: 1.35rem; } .course-detail-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); } .course-detail-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } .course-detail-card h3 { font-size: clamp(1.5rem, 2.1vw, 1.9rem); margin: .75rem 0; } .course-detail-card { display: flex; flex-direction: column; } .course-detail-card p { color: var(--ink-soft); font-size: .98rem; font-weight: 600; } .course-detail-card .button { margin-top: .5rem; } .course-detail-card .text-link { margin-top: auto; } /* Course facts — the concrete numbers from the syllabus. */ .course-facts { display: grid; gap: .6rem; list-style: none; margin: 0 0 1.5rem; padding: 1.15rem 0 0; position: relative; } .course-facts::before { background: var(--line); content: ''; height: 1px; left: 0; position: absolute; right: 0; top: 0; } .course-facts li { align-items: flex-start; color: var(--ink-soft); display: flex; font-size: .86rem; gap: .65rem; line-height: 1.45; } .course-facts li::before { color: var(--aqua-strong); content: '—'; flex: 0 0 auto; font-weight: 800; } /* Photo gallery */ .gallery-grid { columns: 3 18rem; column-gap: 1.1rem; } .gallery-item { border: 1px solid var(--line); border-radius: var(--radius); break-inside: avoid; margin: 0 0 1.1rem; overflow: hidden; position: relative; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .gallery-item:hover { border-color: var(--aqua); box-shadow: var(--shadow); transform: translateY(-5px); } .gallery-item img { height: auto; transition: transform .6s ease; width: 100%; } .gallery-item:hover img { transform: scale(1.05); } .gallery-item figcaption { background: linear-gradient(0deg, rgba(0, 24, 41, .88), transparent); bottom: 0; color: #fff; font-family: var(--mono); font-size: .68rem; left: 0; letter-spacing: .08em; padding: 2.5rem 1.1rem .95rem; position: absolute; right: 0; text-transform: uppercase; } /* Auto-scrolling photo strip on the home page */ .photo-strip-section { overflow: hidden; } .photo-strip { display: flex; gap: 1.1rem; margin-top: clamp(2rem, 4vw, 3rem); mask: linear-gradient(90deg, transparent, black 4rem, black calc(100% - 4rem), transparent); width: max-content; } .photo-strip-track { animation: photoStrip 55s linear infinite; display: flex; gap: 1.1rem; } .photo-strip:hover .photo-strip-track { animation-play-state: paused; } .photo-strip-track img { border-radius: var(--radius); height: clamp(13rem, 22vw, 19rem); object-fit: cover; width: clamp(19rem, 32vw, 28rem); } @keyframes photoStrip { to { transform: translateX(calc(-100% - 1.1rem)); } } .pathway { --step-size: 3rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(6, 1fr); margin-top: clamp(3rem, 5vw, 4.5rem); } .pathway-step { min-width: 0; position: relative; } .pathway-step:not(:last-child)::after { background: color-mix(in srgb, var(--aqua) 55%, transparent); content: ''; height: 2px; left: calc(50% + var(--step-size) / 2 + .6rem); position: absolute; right: calc(-50% + var(--step-size) / 2 + .6rem); top: calc(var(--step-size) / 2 - 1px); } .pathway-number { align-items: center; background: var(--surface); border: 2px solid var(--aqua); border-radius: 50%; color: var(--blue-deep); display: flex; font-family: var(--mono); font-size: .95rem; font-weight: 500; height: var(--step-size); justify-content: center; position: relative; width: var(--step-size); z-index: 1; } .pathway-step strong { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.35; margin-top: 1.1rem; } .trip-list { display: grid; gap: 1.2rem; } /* Photo and copy share the width evenly; the details rail keeps a steady size. */ .trip-listing { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(11.5rem, 15rem); overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .trip-listing:hover { border-color: var(--aqua); box-shadow: var(--shadow); transform: translateY(-4px); } .trip-listing img { height: 100%; mask: var(--wave-mask-image-side) center / 100% 100% no-repeat; min-height: 15rem; object-fit: cover; width: 100%; } .trip-listing-content { padding: 1.55rem; } .trip-listing-content h2 { font-size: clamp(1.7rem, 2.5vw, 2.5rem); margin: .55rem 0 .8rem; } .trip-listing-content p { color: var(--ink-soft); font-size: .9rem; margin: 0; max-width: 39rem; } .trip-info { display: flex; flex-direction: column; justify-content: center; min-width: 10.5rem; padding: 1.55rem; position: relative; } /* Wavy vertical rule instead of a straight border. */ .trip-info::before { background: var(--line-strong); bottom: 0; content: ''; left: 0; mask: var(--wave-line-mask-vertical) center / 100% 10rem repeat-y; position: absolute; top: 0; width: .65rem; } .trip-info span { color: var(--ink-soft); font-family: var(--mono); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; } /* Long qualifiers ("experiență în curenți recomandată") wrap between words. No hyphens / break-word: those split Romanian words mid-syllable. */ .trip-info strong { font-family: var(--display); font-size: .92rem; letter-spacing: -.01em; line-height: 1.3; margin: .3rem 0 1rem; min-width: 0; overflow-wrap: break-word; text-wrap: pretty; } .trip-info .text-link { font-size: .75rem; } .info-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); } .info-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } .info-tile .tile-icon { color: var(--blue-deep); font-family: var(--mono); font-size: 1.2rem; } .info-tile h3 { font-size: clamp(1.45rem, 2vw, 1.75rem); margin: .85rem 0 .65rem; } .info-tile p { color: var(--ink-soft); font-size: .98rem; font-weight: 600; margin: 0; } .club-hero-image { border-radius: var(--radius-lg); box-shadow: var(--shadow); min-height: 31rem; overflow: hidden; } .club-hero-image img { height: 100%; mask: var(--wave-mask-image-bottom) center / 100% 100% no-repeat; object-fit: cover; width: 100%; } .values-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: repeat(2, 1fr); } .value-card { padding: clamp(2.25rem, 3.5vw, 3rem) 0 clamp(1.5rem, 2.5vw, 2rem); position: relative; } .value-card::before { background: var(--line-strong); content: ''; height: 1px; left: 0; position: absolute; right: 0; top: 0; } .value-card span { align-items: center; background: var(--aqua-dim); border: 1px solid color-mix(in srgb, var(--aqua) 40%, transparent); border-radius: 50%; color: var(--blue-deep); display: flex; font-family: var(--mono); font-size: .9rem; font-weight: 500; height: 2.75rem; justify-content: center; letter-spacing: .04em; width: 2.75rem; } .value-card h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); margin: 1.15rem 0 .8rem; } .value-card p { color: var(--ink-soft); font-size: 1.02rem; font-weight: 600; line-height: 1.65; margin: 0; max-width: 42ch; } .contact-grid { align-items: stretch; display: grid; gap: 1.1rem; grid-template-columns: .82fr 1.18fr; } .contact-details { background: #002e4a; border-radius: var(--radius-lg); color: var(--white); padding: clamp(1.7rem, 4vw, 3rem); } .contact-details .eyebrow { color: var(--accent-on-dark); } .contact-details h2 { margin: .65rem 0 1.1rem; max-width: 10ch; } .contact-details p { color: rgba(234, 250, 255, .75); font-size: .92rem; } .contact-methods { display: grid; gap: .75rem; margin-top: 2rem; } .contact-method { align-items: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-radius: 1rem; display: flex; gap: .85rem; padding: .9rem; } .contact-method-icon { align-items: center; border: 1px solid color-mix(in srgb, var(--accent-on-dark) 55%, transparent); border-radius: 50%; color: var(--accent-on-dark); display: flex; flex: 0 0 2.2rem; height: 2.2rem; justify-content: center; width: 2.2rem; } .contact-method-icon svg { height: 1.1rem; width: 1.1rem; } /* Must exclude the icon, or its display:block beats the icon's own flex centring. */ .contact-method span:not(.contact-method-icon) { color: rgba(234, 250, 255, .67); display: block; font-family: var(--mono); font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; } .contact-method strong { font-size: .85rem; } .contact-form-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.7rem, 4vw, 3rem); } .contact-form-wrap h2 { font-size: clamp(2rem, 3vw, 3rem); margin: .65rem 0 1.2rem; } .form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } .form-field { display: grid; gap: .4rem; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: .79rem; font-weight: 800; } /* Text-entry styling only — a checkbox must not inherit the 3.1rem field box. */ .form-field input:not([type='checkbox']):not([type='radio']), .form-field select, .form-field textarea { background: color-mix(in srgb, var(--surface) 65%, transparent); border: 1px solid var(--line); border-radius: .75rem; color: var(--ink); min-height: 3.1rem; outline: 0; padding: .72rem .82rem; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .form-field textarea { min-height: 8.5rem; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { background: var(--surface); border-color: var(--aqua); box-shadow: 0 0 0 4px color-mix(in srgb, var(--aqua) 20%, transparent); } /* Consent line: checkbox and its label on one row, with room before the button. */ .form-consent { align-items: flex-start; display: flex; gap: .7rem; margin-bottom: 1.6rem; } .form-consent input[type='checkbox'] { accent-color: var(--aqua); block-size: 1.15rem; cursor: pointer; flex: 0 0 auto; inline-size: 1.15rem; margin: 0; translate: 0 .12rem; } .form-consent label { cursor: pointer; font-size: .82rem; font-weight: 600; line-height: 1.45; } .form-note { color: var(--ink-soft); font-size: .72rem; margin: 1rem 0 0; } .form-status { color: var(--blue-deep); font-size: .82rem; font-weight: 700; margin: .8rem 0 0; min-height: 1.4rem; } /* ------------------------------------------------------------------ lightbox */ .is-zoomable { cursor: zoom-in; } body.has-lightbox { overflow: hidden; } body.has-lightbox .photo-strip-track { animation-play-state: paused; } .lightbox { background: transparent; border: 0; height: 100dvh; max-height: 100dvh; max-width: 100vw; padding: 0; width: 100vw; } .lightbox::backdrop { backdrop-filter: blur(6px); background: rgba(1, 15, 26, .93); } .lightbox[open] { animation: lightboxIn .22s ease both; } @keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } } .lightbox-stage { align-items: center; display: flex; height: 100%; justify-content: center; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1rem, 7vw, 6rem) clamp(5rem, 9vw, 6.5rem); width: 100%; } .lightbox-image { border-radius: var(--radius); box-shadow: 0 40px 90px rgba(0, 0, 0, .55); max-height: 100%; max-width: 100%; object-fit: contain; transition: transform .18s ease; width: auto; } .lightbox-button { align-items: center; backdrop-filter: blur(8px); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); border-radius: 99px; color: #fff; display: inline-flex; height: 3rem; justify-content: center; position: absolute; transition: background-color .2s ease, transform .2s ease, border-color .2s ease; width: 3rem; z-index: 2; } .lightbox-button:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); } .lightbox-button:active { transform: scale(.92); } .lightbox-button svg { height: 1.35rem; width: 1.35rem; } .lightbox-button[hidden] { display: none; } .lightbox-close { right: clamp(.85rem, 3vw, 1.85rem); top: clamp(.85rem, 3vw, 1.85rem); } .lightbox-prev { left: clamp(.6rem, 2.5vw, 1.85rem); top: 50%; transform: translateY(-50%); } .lightbox-next { right: clamp(.6rem, 2.5vw, 1.85rem); top: 50%; transform: translateY(-50%); } .lightbox-prev:active, .lightbox-next:active { transform: translateY(-50%) scale(.92); } .lightbox-bar { align-items: baseline; bottom: 0; color: rgba(238, 250, 255, .9); display: flex; gap: 1rem; justify-content: space-between; left: 0; padding: 1rem clamp(1rem, 4vw, 2.5rem) clamp(1.1rem, 3vw, 1.9rem); position: absolute; right: 0; } .lightbox-caption { font-family: var(--display); font-size: clamp(.95rem, 2vw, 1.2rem); font-weight: 700; letter-spacing: -.02em; margin: 0; } .lightbox-hint { color: rgba(238, 250, 255, .5); font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; margin: 0; text-transform: uppercase; } .lightbox-count { color: var(--accent-on-dark); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; margin: 0; white-space: nowrap; } @media (max-width: 620px) { .lightbox-hint { display: none; } .lightbox-button { height: 2.6rem; width: 2.6rem; } .lightbox-prev { left: .5rem; } .lightbox-next { right: .5rem; } } /* Association block on the home page — set apart from the sections around it. */ .about-band { position: relative; } .about-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--aqua) 12%, var(--surface)), var(--surface-2)); border: 1px solid color-mix(in srgb, var(--aqua) 28%, var(--line)); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; padding: clamp(2rem, 4.5vw, 3.75rem); position: relative; } .about-panel::before { background: radial-gradient(circle, color-mix(in srgb, var(--aqua) 22%, transparent), transparent 70%); content: ''; height: 26rem; pointer-events: none; position: absolute; right: -8rem; top: -12rem; width: 26rem; } .about-panel .support-grid { position: relative; z-index: 1; } html[data-theme='dark'] .about-panel { background: linear-gradient(135deg, #06293c, #041f30); } .trip-photo-note { font-size: .78rem; margin: 1.5rem 0 0; } .muted { color: var(--ink-soft); } .surface-section { background: var(--surface-2); } html[data-theme='dark'] .surface-section { background: #041f30; } .offset-top { margin-top: -4rem; position: relative; z-index: 4; } .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.75,.25,1), transform .8s cubic-bezier(.2,.75,.25,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Cards in a grid arrive one after the other rather than all at once. */ .experience-grid > .reveal:nth-child(2), .course-grid > .reveal:nth-child(2), .trip-list > .reveal:nth-child(2), .course-detail-grid > .reveal:nth-child(2), .values-grid > .reveal:nth-child(2), .info-tiles > .reveal:nth-child(2) { transition-delay: .09s; } .experience-grid > .reveal:nth-child(3), .course-grid > .reveal:nth-child(3), .trip-list > .reveal:nth-child(3), .course-detail-grid > .reveal:nth-child(3), .values-grid > .reveal:nth-child(3), .info-tiles > .reveal:nth-child(3) { transition-delay: .18s; } .trip-list > .reveal:nth-child(4), .course-detail-grid > .reveal:nth-child(4), .values-grid > .reveal:nth-child(4) { transition-delay: .27s; } .trip-list > .reveal:nth-child(5), .course-detail-grid > .reveal:nth-child(5) { transition-delay: .36s; } .course-detail-grid > .reveal:nth-child(n+6) { transition-delay: .45s; } .gallery-item:nth-child(3n+2) { transition-delay: .08s; } .gallery-item:nth-child(3n+3) { transition-delay: .16s; } /* Keyboard focus is always visible, on every interactive element. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { border-radius: .4rem; outline: 2px solid var(--aqua); outline-offset: 3px; } /* Press feedback */ .button:active { transform: translateY(-1px) scale(.985); } .icon-button:active, .menu-button:active { transform: translateY(0) scale(.94); } .text-link:active { opacity: .7; } /* Hover responses */ .trip-listing img { transition: transform .6s ease; } .trip-listing:hover img { transform: scale(1.045); } .info-tile, .course-detail-card { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .info-tile:hover, .course-detail-card:hover { border-color: color-mix(in srgb, var(--aqua) 55%, var(--line)); box-shadow: var(--shadow); transform: translateY(-4px); } .value-card { transition: transform .3s ease; } .value-card:hover { transform: translateX(4px); } .value-card span { transition: background-color .3s ease, border-color .3s ease, transform .3s ease; } .value-card:hover span { background: color-mix(in srgb, var(--aqua) 26%, transparent); transform: scale(1.06); } .pathway-number { transition: background-color .3s ease, color .3s ease, transform .3s ease; } .pathway-step:hover .pathway-number { background: var(--aqua); color: #fff; transform: scale(1.08); } .gallery-item figcaption { transform: translateY(.35rem); transition: transform .35s ease, opacity .35s ease; } .gallery-item:hover figcaption { transform: translateY(0); } /* Footer links get a sliding underline instead of a colour-only change. */ .footer-links a { background-image: linear-gradient(var(--accent-on-dark), var(--accent-on-dark)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; padding-bottom: 2px; transition: color .2s ease, background-size .3s ease; } .footer-links a:hover { background-size: 100% 1px; } /* The eyebrow dot breathes very slowly. */ .eyebrow::before { animation: eyebrowPulse 3.4s ease-in-out infinite; } @keyframes eyebrowPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aqua-strong) 45%, transparent); } 50% { box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--aqua-strong) 0%, transparent); } } @media (max-width: 900px) { /* Fully opaque: at 98% the dark hero ghosted through and the panel looked like it had kept the previous theme's colour. */ .primary-nav { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 20px 34px rgba(0, 22, 40, .18); display: grid; gap: 0; left: 0; padding: 1rem max(1.5rem, calc((100vw - var(--container)) / 2)) 1.3rem; position: absolute; right: 0; top: 100%; transform: translateY(-130%) scale(.98); transform-origin: top; transition: transform .25s ease, opacity .25s ease, visibility .25s ease; visibility: hidden; z-index: -1; } .primary-nav a { padding: .8rem 0; transition: color .2s ease; } .primary-nav a::before { background: var(--line-strong); bottom: -.3rem; content: ''; height: .6rem; left: 0; mask: var(--wave-line-mask) center / 8rem 100% repeat-x; position: absolute; right: 0; } .primary-nav a:last-child::before { display: none; } .primary-nav.is-open { transform: translateY(0) scale(1); visibility: visible; } /* The panel sits on the page surface, not over the hero, so links take the page ink instead of the header's over-photo white. */ .site-header .primary-nav a { color: var(--ink); } /* Current page is marked by colour alone here; the underline is desktop-only. Mixed toward --ink so it clears 4.5:1 on the light surface as well. */ .site-header .primary-nav a[aria-current='page'] { color: color-mix(in srgb, var(--accent-ink) 82%, var(--ink)); } .primary-nav a::after { display: none; } .menu-button { display: inline-flex; } .hero-content, .intro-grid, .safety-inner, .support-grid, .contact-grid { grid-template-columns: 1fr; } .hero-content { gap: 1.5rem; } .hero-note { max-width: 29rem; } .section-heading { align-items: start; flex-direction: column; gap: 1rem; } .section-heading h2 { max-width: 15ch; } /* One column, or the 29rem track starves the heading of width. */ .section-heading.has-stacked-action { grid-template-columns: minmax(0, 1fr); } .section-heading.has-stacked-action > :last-child { grid-column: auto; justify-self: start; } .contact-cta-inner.cta-stacked > :last-child, .cta-stacked > :last-child { justify-self: start; } .experience-grid, .course-grid { grid-template-columns: repeat(2, 1fr); } .experience-card:last-child { grid-column: 1 / -1; } .split-feature { grid-template-columns: 1fr; } .equip-grid, .rules-grid { grid-template-columns: 1fr; } .fact-card { grid-template-columns: 1fr; } .fact-card-photo { min-height: 13rem; } .fact-card-photo img { mask: var(--wave-mask-image-bottom) center / 100% 100% no-repeat; } .rules-photo { max-height: 24rem; } .split-feature-photo { min-height: 19rem; } .full-width-feature .split-feature-photo { min-height: 23rem; } .trip-grid { grid-template-columns: 1fr 1fr; } .trip-card:first-child { grid-column: 1 / -1; } .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .course-detail-grid { grid-template-columns: repeat(2, 1fr); } .course-detail-card:last-child { grid-column: 1 / -1; } .pathway { grid-template-columns: repeat(3, 1fr); row-gap: 1.8rem; } .pathway-step:nth-child(3)::after { display: none; } .trip-listing { grid-template-columns: minmax(11rem, .8fr) 1.2fr; } .trip-info { grid-column: 1 / -1; min-width: 0; padding-top: 1.9rem; } .trip-info::before { bottom: auto; height: .65rem; left: 1.55rem; right: 1.55rem; top: .55rem; width: auto; mask: var(--wave-line-mask) center / 9rem 100% repeat-x; } .trip-info strong { margin-bottom: .5rem; } } @media (max-width: 620px) { :root { --container: min(100% - 2rem, 1180px); } .site-header { padding: .75rem 0; } .brand img { max-height: 2.65rem; width: 8.8rem; } .nav-actions { gap: .3rem; } .icon-button, .menu-button { height: 2.2rem; width: 2.2rem; } .hero { min-height: 44rem; padding-bottom: 2.3rem; } .hero h1 { font-size: clamp(2.4rem, 11vw, 3.7rem); } .hero .lead { font-size: .96rem; } .button { width: 100%; } .button-outline { background: rgba(255, 255, 255, .1); } .experience-grid, .course-grid, .trip-grid, .course-detail-grid, .info-tiles, .values-grid { grid-template-columns: 1fr; } .experience-card:last-child, .trip-card:first-child, .course-detail-card:last-child { grid-column: auto; } .experience-card { min-height: 19rem; } .course-card { min-height: 0; } .safety-principles { grid-template-columns: 1fr; } .contact-cta-inner { align-items: start; flex-direction: column; } .contact-cta .button { width: auto; } .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; } .footer-bottom { align-items: flex-start; flex-direction: column; gap: .3rem; } .page-hero { min-height: 28rem; padding-top: 8rem; } .page-hero h1 { font-size: clamp(2.9rem, 14vw, 4.5rem); } .pathway { grid-template-columns: repeat(2, 1fr); } .pathway-step:nth-child(3)::after { display: block; } .pathway-step:nth-child(2)::after, .pathway-step:nth-child(4)::after { display: none; } .trip-listing { grid-template-columns: 1fr; } .trip-listing img { mask: var(--wave-mask-image-bottom) center / 100% 100% no-repeat; max-height: 15rem; } .trip-info { grid-column: auto; } .form-grid { grid-template-columns: 1fr; } .form-field.full { grid-column: auto; } .gallery-grid { columns: 1; } .equip-legend { grid-template-columns: 1fr; } .photo-strip-track img { height: clamp(11rem, 40vw, 14rem); width: clamp(15rem, 72vw, 20rem); } } .manual-download { align-items: center; margin-top: 1.8rem; } .manual-download .button-small { gap: .5rem; } .manual-note { font-size: .74rem; } /* ------------------------------------------------------- "Știai că?" bands */ .fact-band .eyebrow { justify-content: center; } .fact-text { font-family: var(--display); font-size: clamp(1.35rem, 2.6vw, 2.1rem); font-style: italic; font-weight: 600; letter-spacing: -.03em; line-height: 1.35; margin: 1.1rem auto .9rem; max-width: 42ch; text-wrap: balance; } .fact-term { color: var(--ink-soft); font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; margin: 0; text-transform: uppercase; } .fact-term > span:first-child { color: var(--blue-deep); } /* plain variant: typography only, framed by quiet rules */ .fact-plain { padding-block: clamp(3rem, 5vw, 4.5rem); } .fact-plain .container { border-block: 1px solid var(--line); padding-block: clamp(3.2rem, 5vw, 4.2rem) clamp(2rem, 3.5vw, 3rem); position: relative; text-align: center; } .fact-plain .container::before { color: color-mix(in srgb, var(--aqua) 45%, transparent); content: '\201E'; font-family: var(--display); font-size: 5rem; left: 50%; line-height: 0; position: absolute; top: 0; transform: translate(-50%, 1.1rem); } /* card variant: copy beside a photo */ .fact-card { align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); overflow: hidden; } .fact-card-body { align-self: center; padding: clamp(1.75rem, 4vw, 3rem); } .fact-card-body .eyebrow { justify-content: flex-start; } .fact-card-body .fact-text { margin-inline: 0; } .fact-card-photo { min-height: 15rem; } .fact-card-photo img { height: 100%; mask: var(--wave-mask-image-side-flip, none) center / 100% 100% no-repeat; object-fit: cover; width: 100%; } /* full-background variant */ .fact-bg { color: #fff; overflow: hidden; padding-block: clamp(4.5rem, 8vw, 7rem); position: relative; text-align: center; } .fact-bg-photo { filter: saturate(1.05); height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; } .fact-bg::before { background: linear-gradient(180deg, rgba(1, 20, 34, .78), rgba(1, 26, 44, .62)); content: ''; inset: 0; position: absolute; z-index: 1; } .fact-bg .container { position: relative; z-index: 2; } .fact-bg .eyebrow { color: var(--accent-on-dark); justify-content: center; } .fact-bg .fact-term { color: rgba(233, 248, 255, .75); } .fact-bg .fact-term > span:first-child { color: var(--accent-on-dark); } /* Despre hero: the moto is a quote, not a headline */ .page-hero .hero-quote { font-size: clamp(1.45rem, 2.9vw, 2.5rem); font-style: italic; font-weight: 600; letter-spacing: -.025em; line-height: 1.4; max-width: 34ch; } /* ------------------------------------------------------- equipment diagram */ .equip-grid { align-items: center; display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .equip-figure { --dv-body: #134e75; --dv-dark: #0b3552; --dv-shade: #0f3f60; --dv-tank: #c9d6dd; --dv-metal: #8fa3ad; --dv-accent: #f2b33d; --dv-glass: #4dc3f7; --dv-bubble: color-mix(in srgb, var(--aqua) 45%, transparent); height: auto; width: 100%; } html[data-theme='dark'] .equip-figure { --dv-body: #2f6f9e; --dv-dark: #1b4a6b; --dv-shade: #275e88; --dv-tank: #a9bcc7; --dv-metal: #7c929e; } .equip-lines path { stroke: color-mix(in srgb, var(--aqua-strong) 70%, transparent); stroke-width: 2.5; } .equip-dots circle { fill: var(--surface); stroke: var(--aqua-strong); stroke-width: 2.5; } .equip-nums text { fill: var(--ink); font-family: var(--mono); font-size: 25px; font-weight: 500; } .equip-legend { counter-reset: equip; display: grid; gap: 1.05rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; } .equip-legend li { display: flex; gap: .7rem; } .equip-legend .equip-nr { align-items: center; border: 1.5px solid var(--aqua-strong); border-radius: 50%; color: var(--blue-deep); display: flex; flex: 0 0 1.5rem; font-family: var(--mono); font-size: .72rem; height: 1.5rem; justify-content: center; margin-top: .1rem; } .equip-legend strong { display: block; font-size: .92rem; letter-spacing: -.01em; } .equip-legend p { color: var(--ink-soft); font-size: .82rem; line-height: 1.5; margin: .25rem 0 0; } /* ------------------------------------------------------- golden rules */ .rules-grid { align-items: center; display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .rules-photo { border-radius: var(--radius-lg); box-shadow: var(--shadow); max-height: 34rem; overflow: hidden; } .rules-photo img { height: 100%; mask: var(--wave-mask-image-bottom) center / 100% 100% no-repeat; object-fit: cover; width: 100%; } .rules-grid h2 { margin: .7rem 0 .8rem; max-width: 18ch; } .rules-list { display: grid; gap: .85rem; list-style: none; margin: 1.6rem 0 0; padding: 0; } .rules-list li { align-items: baseline; display: flex; font-size: 1rem; font-weight: 700; gap: .85rem; line-height: 1.45; } .rules-list .rule-nr { color: var(--aqua-strong); flex: 0 0 auto; font-family: var(--mono); font-size: .78rem; } /* ------------------------------------------------------- FAQ */ .faq-list { display: grid; gap: .75rem; max-width: 52rem; } .faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s ease, box-shadow .25s ease; } .faq-item:hover { border-color: color-mix(in srgb, var(--aqua) 55%, var(--line)); } .faq-item[open] { border-color: var(--aqua); box-shadow: var(--shadow); } .faq-item summary { align-items: center; cursor: pointer; display: flex; font-size: 1.02rem; font-weight: 800; gap: 1rem; justify-content: space-between; letter-spacing: -.02em; list-style: none; padding: 1.05rem 1.3rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary svg { color: var(--aqua-strong); flex: 0 0 auto; height: 1.15rem; transition: transform .25s ease; width: 1.15rem; } .faq-item[open] summary svg { transform: rotate(180deg); } .faq-item p { color: var(--ink-soft); font-size: .95rem; line-height: 1.65; margin: 0; padding: 0 1.3rem 1.2rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } /* Let the strip be swiped by hand instead of collapsing to its end frame. */ .photo-strip { mask: none; overflow-x: auto; width: 100%; } .photo-strip-track { animation: none !important; transform: none !important; } .photo-strip-track[aria-hidden='true'] { display: none; } .hero-down { animation: none; } .lightbox[open] { animation: none; } .lightbox-image { transition: none; } }