/* ============================================================
Dromoni redesign v2 — new visual system per PDF mockup
Palette: deep navy, accent blue, white, sand
============================================================ */
:root {
--rd2-navy: #0b2748;
--rd2-navy-dark: #061a32;
--rd2-navy-deep: #021024;
--rd2-blue: #1e5fa8;
--rd2-blue-bright: #2d8fd1;
--rd2-sand: #f3ede1;
--rd2-paper: #f6f4ee;
--rd2-paper-2: #eef1f5;
--rd2-ink: #0f1f37;
--rd2-muted: #54657d;
--rd2-line: rgba(11,39,72,.10);
--rd2-line-strong: rgba(11,39,72,.18);
--rd2-shadow: 0 14px 36px -22px rgba(2,16,36,.32);
--rd2-shadow-soft: 0 8px 22px -16px rgba(2,16,36,.22);
--rd2-radius: 12px;
--rd2-radius-sm: 8px;
--rd2-radius-lg: 18px;
--rd2-max: 1200px;
--rd2-max-narrow: 880px;
--rd2-pad: clamp(16px, 4vw, 48px);
--rd2-font: "Inter","Noto Sans Georgian",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
/* Headings use the SAME font as the body (one font per language:
English → Inter, Georgian → Noto Sans Georgian). */
--rd2-serif: var(--rd2-font);
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Stop the browser's elastic overscroll (rubber-band) at the top/bottom so it
can never open a gap above the header that exposes the background. */
html, body { overscroll-behavior-y: none; }
body {
margin: 0;
font-family: var(--rd2-font);
color: var(--rd2-ink);
background: #fff;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--rd2-blue); text-decoration: none; }
a:hover { color: var(--rd2-blue-bright); }
/* ─── Header / Nav ─── */
.rd2-header {
position: sticky; top: 0; z-index: 60;
background: #fff; /* fully opaque — never show the background through it */
border-bottom: 1px solid var(--rd2-line);
}
.rd2-header__inner {
max-width: var(--rd2-max);
margin: 0 auto;
padding: 14px var(--rd2-pad);
display: flex; align-items: center; gap: 28px;
}
.rd2-logo {
display: inline-flex;
align-items: center;
font-family: var(--rd2-serif);
font-weight: 700;
font-size: clamp(20px, 2vw, 26px);
letter-spacing: .14em;
color: var(--rd2-navy);
text-decoration: none;
}
.rd2-logo img {
height: clamp(26px, 2.88vw, 34px);
width: auto;
display: block;
}
.rd2-logo--footer img {
height: clamp(28px, 3vw, 36px);
/* logobottom*.svg is already white — no filter needed */
}
.rd2-nav {
margin-left: auto;
display: flex; align-items: center; gap: 24px;
}
.rd2-nav a {
color: var(--rd2-ink);
font-weight: 500;
font-size: 16px;
letter-spacing: .02em;
position: relative;
padding: 8px 4px;
}
.rd2-nav a:hover { color: var(--rd2-navy); }
.rd2-nav a::after {
content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px;
height: 1.5px; background: var(--rd2-blue);
transform: scaleX(0); transform-origin: left;
transition: transform .25s ease;
}
.rd2-nav a:hover::after { transform: scaleX(1); }
.rd2-nav__has-sub { position: relative; }
.rd2-nav__has-sub > a::before { content: ""; display: none; }
.rd2-nav__has-sub > a::after { content: none; }
.rd2-nav__has-sub > a {
display: inline-flex; align-items: center; gap: 6px;
}
.rd2-nav__sub {
position: absolute; top: 100%; left: -10px; min-width: 220px;
background: #fff; border: 1px solid var(--rd2-line);
border-radius: var(--rd2-radius-sm);
padding: 8px;
box-shadow: var(--rd2-shadow);
opacity: 0; visibility: hidden;
transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.rd2-nav__has-sub:hover .rd2-nav__sub,
.rd2-nav__has-sub:focus-within .rd2-nav__sub {
opacity: 1; visibility: visible; transform: translateY(0);
transition: opacity .18s ease, transform .18s ease;
}
.rd2-nav__sub a {
display: block; padding: 10px 12px;
font-size: 15px;
border-radius: 8px;
}
.rd2-nav__sub a:hover { background: var(--rd2-paper); color: var(--rd2-navy); }
.rd2-lang {
display: inline-flex; align-items: center; padding: 4px 6px;
border: 1px solid var(--rd2-line); border-radius: 8px;
transition: border-color .2s;
}
.rd2-lang:hover { border-color: var(--rd2-blue); }
.rd2-lang img { width: 18px; height: 12px; object-fit: cover; }
.rd2-burger {
display: none; background: none; border: 0; cursor: pointer; padding: 6px;
color: var(--rd2-navy);
}
/* ─── Generic section + utilities ─── */
.rd2-section {
padding: clamp(56px, 8vw, 120px) var(--rd2-pad);
max-width: var(--rd2-max);
margin: 0 auto;
}
.rd2-section--wide { max-width: none; padding-left: 0; padding-right: 0; }
.rd2-section__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.rd2-eyebrow {
display: inline-block;
font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
color: var(--rd2-blue); font-weight: 600;
margin-bottom: 14px;
}
.rd2-eyebrow--line {
display: inline-flex; align-items: center; gap: 10px;
}
.rd2-eyebrow--line::before {
content: ""; display: inline-block;
width: 22px; height: 1.5px; background: var(--rd2-blue);
flex-shrink: 0;
}
.rd2-eyebrow--center { display: block; text-align: center; }
.rd2-h1 {
font-family: var(--rd2-serif);
font-size: clamp(34px, 5.4vw, 60px); font-weight: 700;
letter-spacing: .01em; line-height: 1.08;
color: #fff; margin: 0;
}
.rd2-h2 {
font-family: var(--rd2-serif);
font-size: 20px; font-weight: 700;
letter-spacing: 0; line-height: 1.3;
color: var(--rd2-navy); margin: 0 0 16px;
}
.rd2-h3 {
font-family: var(--rd2-serif);
font-size: clamp(19px, 1.7vw, 22px); font-weight: 700;
color: var(--rd2-navy); margin: 0 0 10px;
}
.rd2-lead {
font-size: clamp(15.5px, 1.2vw, 17px);
color: var(--rd2-muted); line-height: 1.7;
}
.rd2-body { font-size: 15px; color: var(--rd2-ink); line-height: 1.72; }
/* ─── Button ─── */
.rd2-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 26px;
background: var(--rd2-navy);
color: #fff;
border: 1px solid var(--rd2-navy);
border-radius: 10px;
box-shadow: 0 4px 12px rgba(2,16,36,.22), 0 1px 2px rgba(2,16,36,.18);
font-weight: 600; font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rd2-btn:hover {
background: var(--rd2-blue);
border-color: var(--rd2-blue);
color: #fff;
box-shadow: 0 8px 18px rgba(2,16,36,.28), 0 2px 4px rgba(2,16,36,.20);
transform: translateY(-1px);
}
.rd2-btn--ghost {
background: transparent;
color: #fff;
border: 1px solid rgba(255,255,255,.55);
}
.rd2-btn--ghost:hover { background: rgba(255,255,255,.10); border-color: #fff; }
.rd2-btn--outline {
background: transparent;
color: var(--rd2-navy);
border: 1px solid var(--rd2-navy);
}
.rd2-btn--outline:hover { background: var(--rd2-navy); color: #fff; }
.rd2-btn--sm { padding: 9px 18px; font-size: 12px; }
.rd2-btn::after {
content: "→"; font-size: 14px;
transition: transform .2s ease;
}
.rd2-btn:hover::after { transform: translateX(3px); }
.rd2-btn--no-arrow::after { display: none; }
/* ─── Hero ─── */
.rd2-hero {
position: relative; isolation: isolate;
width: 100%;
min-height: clamp(440px, calc(42vw + 100px), 620px);
display: grid; align-items: end;
overflow: hidden;
color: #fff;
background: var(--rd2-navy-deep);
}
.rd2-hero__bg {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center;
transform: scale(1.04);
animation: rd2-zoom 18s ease-out forwards;
}
.rd2-hero__video {
position: absolute; inset: 0; z-index: 0;
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 35%;
pointer-events: none;
background: var(--rd2-navy-deep);
}
/* dark gradient overlay (works for both video and bg image) */
.rd2-hero::before {
z-index: 1 !important;
}
.rd2-hero__inner {
position: relative;
z-index: 2;
max-width: var(--rd2-max);
margin: 0 auto;
padding: clamp(28px, 4vw, 56px) var(--rd2-pad);
width: 100%;
}
/* honor reduced-motion users: stop the video */
@media (prefers-reduced-motion: reduce) {
.rd2-hero__video { display: none; }
}
@keyframes rd2-zoom { from { transform: scale(1.04); } to { transform: scale(1); } }
.rd2-hero::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(180deg, rgba(2,16,36,.10) 0%, rgba(2,16,36,.55) 70%, rgba(2,16,36,.85) 100%);
}
.rd2-hero__eyebrow {
display: inline-block; padding: 4px 12px;
font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.22);
border-radius: 2px;
margin-bottom: 14px;
color: rgba(255,255,255,.92);
}
.rd2-hero__title { font-size: clamp(30px, 4.8vw, 56px); }
.rd2-hero__sub {
margin: 14px 0 22px;
font-size: clamp(14px, 1.1vw, 16px);
color: rgba(255,255,255,.84);
max-width: 56ch; line-height: 1.6;
}
.rd2-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.rd2-hero--center { align-items: center; }
.rd2-hero--center .rd2-hero__inner { text-align: center; }
.rd2-hero--center .rd2-hero__fish { margin-left: auto; margin-right: auto; }
.rd2-hero--center .rd2-hero__sub { margin-left: auto; margin-right: auto; }
.rd2-hero--center .rd2-hero__cta { justify-content: center; }
/* ─── Home: Who-We-Are intro band under hero ─── */
.rd2-intro {
background: var(--rd2-paper);
padding: clamp(56px, 7vw, 96px) var(--rd2-pad);
text-align: center;
}
.rd2-intro__inner {
max-width: 760px; margin: 0 auto;
}
.rd2-intro h2 { color: var(--rd2-navy); }
.rd2-intro p { font-size: clamp(15px, 1.4vw, 17.5px); color: var(--rd2-muted); }
/* ─── Card row (Home preview cards) ─── */
.rd2-cards {
display: grid; gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
margin-top: 32px;
}
.rd2-card {
background: #fff;
border-radius: var(--rd2-radius);
overflow: hidden;
border: 1px solid var(--rd2-line);
display: flex; flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease;
}
.rd2-card:hover {
transform: translateY(-4px);
box-shadow: var(--rd2-shadow);
}
.rd2-card__img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--rd2-paper);
}
.rd2-card__img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s ease;
}
.rd2-card:hover .rd2-card__img img { transform: scale(1.04); }
.rd2-card__body { padding: 22px 24px 26px; }
.rd2-card__title {
font-family: var(--rd2-serif);
font-weight: 700; font-size: 20px;
color: var(--rd2-navy);
margin: 0 0 10px;
text-transform: uppercase; letter-spacing: .04em;
}
.rd2-card__text {
color: var(--rd2-muted);
font-size: 14.5px; line-height: 1.65;
margin: 0 0 16px;
}
.rd2-card__cta {
font-size: 13px; font-weight: 600;
color: var(--rd2-blue);
display: inline-flex; align-items: center; gap: 6px;
text-transform: uppercase; letter-spacing: .08em;
}
.rd2-card__cta::after { content: "→"; transition: transform .25s; }
.rd2-card:hover .rd2-card__cta::after { transform: translateX(4px); }
/* ─── Feature row (image + text alternating) ─── */
.rd2-feature {
display: grid; gap: clamp(28px, 5vw, 80px);
grid-template-columns: 1fr 1fr;
align-items: center;
margin: clamp(56px, 8vw, 96px) 0;
}
.rd2-feature--reverse .rd2-feature__media { order: 2; }
.rd2-feature__media img {
width: 100%; aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--rd2-radius);
box-shadow: var(--rd2-shadow);
}
.rd2-feature__media--rect img { aspect-ratio: 5 / 3; }
/* Show the whole image (no crop) — for wide/transparent assets like map.gif */
.rd2-feature__media--full img {
aspect-ratio: auto;
height: auto;
object-fit: contain;
box-shadow: none;
}
@media (max-width: 820px) {
.rd2-feature { grid-template-columns: 1fr; }
.rd2-feature--reverse .rd2-feature__media { order: 0; }
}
/* ─── Hero fish accent (above h1) ─── */
.rd2-hero__fish {
display: block;
width: clamp(50px, 7vw, 90px);
height: auto;
margin: 0 0 10px;
opacity: .95;
/* Hero photos are dark — render the navy fish white so it reads on top. */
filter: brightness(0) invert(1);
}
/* ─── Title + fish accent on one line ─── */
.rd2-title-row {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin: 0 0 16px;
}
.rd2-title-row .rd2-h2 { margin: 0; }
.rd2-title-fish {
display: block;
max-width: 50px;
height: auto;
opacity: .9;
}
/* ─── Fleet full-bleed split (image left / navy panel right) ─── */
.rd2-fleet-split {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
margin: 0;
background: var(--rd2-navy-deep);
}
.rd2-fleet-split__media {
position: relative;
min-height: 460px;
overflow: hidden;
}
.rd2-fleet-split__media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
border-radius: 0;
box-shadow: none;
aspect-ratio: auto;
}
.rd2-fleet-split__panel {
background: var(--rd2-navy-deep);
color: #fff;
padding: clamp(40px, 6vw, 90px) clamp(28px, 6vw, 90px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 22px;
}
.rd2-fleet-split__heading {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--rd2-serif);
font-size: clamp(22px, 2.6vw, 34px);
font-weight: 700;
letter-spacing: .01em;
color: #fff;
}
.rd2-fleet-split__whale {
width: clamp(40px, 4vw, 56px);
height: auto;
flex-shrink: 0;
opacity: .9;
}
.rd2-fleet-split__title {
font-family: var(--rd2-serif);
font-size: clamp(20px, 2vw, 26px);
font-weight: 600;
color: rgba(255,255,255,.85);
margin: 0;
max-width: 32ch;
}
.rd2-fleet-split__card {
background: #fff;
color: var(--rd2-ink);
border-radius: var(--rd2-radius);
padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 34px);
max-width: 100%;
box-shadow: 0 24px 48px -28px rgba(0,0,0,.45);
}
.rd2-fleet-split__card p { margin: 0; }
@media (max-width: 820px) {
.rd2-fleet-split { grid-template-columns: 1fr; }
.rd2-fleet-split__media { min-height: 280px; }
.rd2-fleet-split__card { max-width: none; }
}
/* ─── Numbered card (Vision page) ─── */
.rd2-vision-grid {
display: grid; gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
margin-top: 40px;
}
.rd2-vcard {
background: var(--rd2-navy);
color: #fff;
border-radius: var(--rd2-radius);
padding: 28px 26px 26px;
position: relative;
overflow: hidden;
border-top: 3px solid var(--rd2-blue-bright);
}
.rd2-vcard__num {
font-family: var(--rd2-serif);
font-size: 13px; font-weight: 600;
color: var(--rd2-blue-bright);
letter-spacing: .2em;
display: block;
margin-bottom: 12px;
}
.rd2-vcard h3 {
font-family: var(--rd2-serif);
font-size: 19px; margin: 0 0 12px;
color: #fff;
letter-spacing: .01em;
}
.rd2-vcard p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0; }
/* Stat row */
.rd2-stat-row {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-top: 40px;
}
.rd2-stat {
background: var(--rd2-blue);
color: #fff;
padding: 26px 24px;
border-radius: var(--rd2-radius);
text-align: left;
}
.rd2-stat strong {
display: block;
font-family: var(--rd2-serif);
font-size: 30px; font-weight: 700;
line-height: 1.05; margin-bottom: 10px;
letter-spacing: 0;
}
.rd2-stat span {
font-size: 13.5px;
color: rgba(255,255,255,.88);
line-height: 1.55;
display: block;
}
/* ─── Banner / Sustainability ─── */
.rd2-banner {
position: relative;
margin: 0; padding: 0;
min-height: 380px;
display: grid; place-items: center;
color: #fff;
text-align: center;
isolation: isolate;
overflow: hidden;
}
.rd2-banner__bg {
position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: center;
}
.rd2-banner::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(0deg, rgba(2,16,36,.78), rgba(2,16,36,.45));
}
.rd2-banner__inner {
padding: 80px var(--rd2-pad);
max-width: 760px;
}
.rd2-banner h2 { color: #fff; margin: 0 0 24px; }
.rd2-banner__fish {
display: block;
width: clamp(50px, 7vw, 90px);
height: auto;
margin: 0 auto 12px;
opacity: .95;
}
/* ─── Wave divider ─── */
.rd2-wave {
display: block; width: 100%; height: clamp(60px, 8vw, 110px);
background:
url("data:image/svg+xml;utf8,") center / cover no-repeat,
url("data:image/svg+xml;utf8,") center / cover no-repeat;
}
/* ─── Footer ─── */
.rd2-footer {
background: var(--rd2-navy-deep);
color: #cdd5e1;
padding: 60px var(--rd2-pad) 24px;
}
.rd2-footer__inner {
max-width: var(--rd2-max);
margin: 0 auto;
display: grid; gap: 36px;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
@media (max-width: 820px) {
.rd2-footer__inner { grid-template-columns: 1fr 1fr; }
}
.rd2-footer h4 {
color: #fff; font-size: 14px;
letter-spacing: .12em; text-transform: uppercase;
margin: 0 0 16px;
font-family: var(--rd2-font);
}
.rd2-footer ul { list-style: none; margin: 0; padding: 0; }
.rd2-footer li { margin-bottom: 10px; }
.rd2-footer a { color: #cdd5e1; font-size: 14px; }
.rd2-footer a:hover { color: #fff; }
.rd2-footer__brand p { font-size: 13.5px; line-height: 1.65; color: #98a4b8; max-width: 36ch; }
.rd2-footer__base {
border-top: 1px solid rgba(255,255,255,.08);
margin-top: 36px; padding-top: 18px;
display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
font-size: 12.5px; color: #7d8aa1;
}
/* ─── Contact ─── */
.rd2-contact-wrap {
display: grid; gap: 32px;
grid-template-columns: 1fr 1fr;
align-items: start;
}
@media (max-width: 820px) { .rd2-contact-wrap { grid-template-columns: 1fr; } }
.rd2-form {
background: var(--rd2-navy);
color: #fff;
padding: 32px;
border-radius: var(--rd2-radius);
display: grid; gap: 12px;
}
.rd2-form input, .rd2-form textarea {
font: inherit;
padding: 13px 16px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: 4px;
color: #fff;
width: 100%;
transition: border-color .15s ease, background .15s ease;
}
.rd2-form input:focus, .rd2-form textarea:focus {
outline: none;
border-color: var(--rd2-blue-bright);
background: rgba(255,255,255,.10);
}
.rd2-form input::placeholder, .rd2-form textarea::placeholder { color: rgba(255,255,255,.55); }
.rd2-form textarea { min-height: 120px; resize: vertical; }
.rd2-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .rd2-form__row { grid-template-columns: 1fr; } }
.rd2-form__submit { display: flex; justify-content: flex-end; margin-top: 6px; }
.rd2-form__submit .rd2-btn { background: #fff; color: var(--rd2-navy); }
.rd2-form__submit .rd2-btn:hover { background: var(--rd2-blue-bright); color: #fff; }
.rd2-form__hp { display: none !important; }
.rd2-form__alert { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; }
.rd2-form__alert--ok { background: rgba(56,176,114,.18); border: 1px solid rgba(56,176,114,.45); color: #c8f0d7; }
.rd2-form__alert--err { background: rgba(220,68,68,.16); border: 1px solid rgba(220,68,68,.45); color: #f7c4c4; }
.rd2-contact-card {
display: grid; gap: 14px;
}
.rd2-contact-card img {
width: 100%; border-radius: var(--rd2-radius);
aspect-ratio: 5 / 3; object-fit: cover;
}
.rd2-contact-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 10px;
}
.rd2-contact-list li {
display: flex; gap: 14px; align-items: center;
background: #fff;
border: 1px solid var(--rd2-line);
border-radius: 999px;
padding: 10px 22px 10px 10px;
font-size: 14px;
box-shadow: var(--rd2-shadow-soft);
}
.rd2-contact-list .icon {
width: 34px; height: 34px;
display: grid; place-items: center;
border: 2px solid var(--rd2-blue);
border-radius: 50%;
color: var(--rd2-blue);
flex-shrink: 0;
}
/* ─── Responsive nav ─── */
@media (max-width: 880px) {
.rd2-nav { display: none; }
.rd2-burger { display: inline-flex; margin-left: auto; }
.rd2-nav.open {
display: flex; position: absolute; top: 100%; left: 0; right: 0;
background: #fff; flex-direction: column;
padding: 12px var(--rd2-pad);
border-bottom: 1px solid var(--rd2-line);
gap: 4px;
}
.rd2-nav.open a { padding: 12px 4px; width: 100%; }
.rd2-nav.open .rd2-nav__sub {
position: static; transform: none; opacity: 1; visibility: visible;
box-shadow: none; border: 0; padding: 0 0 4px 12px;
background: transparent;
}
}
/* ─── Misc utilities ─── */
.rd2-mt-0 { margin-top: 0; }
.rd2-center { text-align: center; }
.rd2-narrow { max-width: 1920px; margin-left: auto; margin-right: auto; }
.rd2-divider {
width: 36px; height: 3px;
background: var(--rd2-blue);
border-radius: 2px;
margin: 0 auto 18px;
}
/* small intro arrow (decorative) used in Team / Values headers */
.rd2-arrow {
display: block; width: 56px; height: auto; margin: 0 auto 16px;
opacity: .85; color: var(--rd2-blue);
}
/* ─── Vessel grid (Fleet page) ───────────────────────────────────── */
.rd2-vessel-grid {
display: grid; gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin-top: 36px;
}
.rd2-vessel {
background: #fff;
border: 1px solid var(--rd2-line);
border-radius: var(--rd2-radius);
overflow: hidden;
display: flex; flex-direction: column;
transition: border-color .2s ease, transform .25s ease;
}
.rd2-vessel:hover { border-color: var(--rd2-line-strong); transform: translateY(-3px); }
.rd2-vessel__img {
aspect-ratio: 16/10;
background: var(--rd2-paper);
overflow: hidden;
}
.rd2-vessel__img img { width: 100%; height: 100%; object-fit: cover; }
.rd2-vessel__body { padding: 22px 24px 26px; }
.rd2-vessel__name {
font-family: var(--rd2-serif);
font-size: 20px; font-weight: 700;
color: var(--rd2-navy);
margin: 0 0 8px;
letter-spacing: .04em;
text-transform: uppercase;
}
.rd2-vessel__text { font-size: 14.5px; color: var(--rd2-muted); line-height: 1.65; }
/* ─── Feature panel (3-up navy cards on Fleet) ──────────────────── */
.rd2-feature-panel {
background: var(--rd2-navy);
color: #fff;
padding: clamp(40px, 6vw, 72px) var(--rd2-pad);
}
.rd2-feature-panel__grid {
max-width: var(--rd2-max);
margin: 0 auto;
display: grid; gap: 28px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rd2-feature-panel__item {
text-align: center;
padding: 0 14px;
position: relative;
}
.rd2-feature-panel__item + .rd2-feature-panel__item::before {
content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px;
width: 1px; background: rgba(255,255,255,.12);
}
@media (max-width: 720px) {
.rd2-feature-panel__item + .rd2-feature-panel__item::before { display: none; }
}
.rd2-feature-panel__title {
font-family: var(--rd2-serif);
font-size: 20px; font-weight: 700;
color: #fff;
margin: 0 0 12px;
}
.rd2-feature-panel__body { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.78); margin: 0; }
/* ─── Triptych (3 image strip) ──────────────────────────────────── */
.rd2-triptych {
display: grid; gap: 6px;
grid-template-columns: repeat(3, 1fr);
margin: 0 0 0 0;
}
.rd2-triptych__item {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
}
.rd2-triptych__item img { width: 100%; height: 100%; object-fit: cover; }
.rd2-triptych__cap {
position: absolute; inset: auto 0 0 0;
padding: 14px 18px;
background: linear-gradient(0deg, rgba(2,16,36,.75), transparent);
color: #fff;
font-size: 12.5px; line-height: 1.5;
}
@media (max-width: 720px) { .rd2-triptych { grid-template-columns: 1fr; } }
/* ─── Product band (Fish Oil / Fish Meal) ────────────────────────── */
.rd2-product-band {
position: relative;
padding: 0;
margin: clamp(40px, 6vw, 80px) 0;
isolation: isolate;
}
/* Drop the top margin on the very first band so it sits flush against the header */
.rd2-main > .rd2-product-band:first-child,
.rd2-page--products .rd2-main > .rd2-product-band:first-of-type {
margin-top: 0;
}
.rd2-product-band__bg {
position: relative;
height: clamp(320px, 32vw, 580px);
background-size: cover; background-position: center;
display: grid; place-items: center;
text-align: center;
}
.rd2-product-band__bg::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(2,16,36,.55), rgba(2,16,36,.25));
}
.rd2-product-band__title {
position: relative;
z-index: 1;
font-family: var(--rd2-serif);
font-size: clamp(32px, 4.4vw, 52px); font-weight: 700;
color: #fff;
letter-spacing: .12em;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
padding: 0 var(--rd2-pad);
}
.rd2-product-grid {
max-width: var(--rd2-max);
margin: 36px auto 0;
padding: 0 var(--rd2-pad);
display: grid; gap: 32px;
grid-template-columns: repeat(3, 1fr);
position: relative;
}
@media (max-width: 720px) { .rd2-product-grid { grid-template-columns: 1fr; gap: 28px; } }
/* Decorative fish icon above each band's description text (PDF) */
.rd2-band-text { max-width: 1200px; }
.rd2-band-text__icon {
display: block;
margin: 0 auto 14px;
width: clamp(60px, 9vw, 100px);
height: auto;
opacity: .9;
}
@media (max-width: 720px) {
.rd2-band-text__icon { margin-bottom: 10px; width: 55px; }
}
/* Wraps the accent image + product grid into one rounded shadowed card.
Top padding equals half the accent height so the accent visually sits on
the box edge — half above, half inside — like a hanging badge. */
.rd2-product-box {
max-width: 1200px;
margin: 136px auto 0; /* 36px gap + 100px room for the accent overhang above */
padding: 1px 24px 36px;
background: var(--rd2-paper, #fff);
border-radius: 20px;
box-shadow: 0 18px 40px -22px rgba(2,16,36,.28), 0 2px 6px rgba(2,16,36,.06);
overflow: visible;
}
.rd2-product-box .rd2-product-band__accent {
margin: -100px auto 32px; /* half of the 200px height — accent overlaps the top edge */
position: relative;
z-index: 2;
}
.rd2-product-box .rd2-product-grid { margin-top: 0; }
@media (max-width: 720px) {
.rd2-product-box { margin: 110px 12px 0; padding: 22px 14px 26px; border-radius: 16px; }
.rd2-product-box .rd2-product-band__accent { margin-top: -90px; margin-bottom: 24px; }
}
/* Center accent thumbnail between band description and 3 product cards (PDF p16) */
.rd2-product-band__accent {
display: block;
width: 200px;
height: 200px;
max-width: 90vw;
margin: 36px auto 0;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 18px 36px -20px rgba(2,16,36,.45), 0 2px 4px rgba(2,16,36,.06);
position: relative;
z-index: 2;
background: var(--rd2-paper);
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
cursor: pointer;
}
.rd2-product-band__accent:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 30px 60px -22px rgba(2,16,36,.55), 0 6px 14px rgba(2,16,36,.10);
}
.rd2-product-band__accent img { transition: transform .6s ease; }
.rd2-product-band__accent:hover img { transform: scale(1.06); }
.rd2-product-band__accent img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Tree connectors (PDF p16) — trunk from accent thumb, horizontal bar, drops to each card */
.rd2-product-grid--tree {
padding-top: 76px;
}
.rd2-product-grid--tree::before,
.rd2-product-grid--tree::after,
.rd2-product-grid--tree .rd2-product-item::before { display: none; }
.rd2-product-grid--tree .rd2-product-item { position: relative; }
@media (max-width: 720px) {
.rd2-product-band__accent { width: 216px; height: 216px; }
.rd2-product-item__img { width: 216px; height: 216px; }
.rd2-product-grid--tree { padding-top: 28px; }
.rd2-product-grid--tree::before,
.rd2-product-grid--tree::after,
.rd2-product-grid--tree .rd2-product-item::before { display: none; }
}
.rd2-product-item { text-align: center; }
.rd2-product-item__img {
width: 240px; height: 240px;
max-width: 90vw;
margin: 0 auto 16px;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--rd2-shadow-soft);
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
cursor: pointer;
}
.rd2-product-item__img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s ease;
}
.rd2-product-item__img:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 26px 50px -20px rgba(2,16,36,.45), 0 4px 12px rgba(2,16,36,.10);
}
.rd2-product-item__img:hover img { transform: scale(1.06); }
.rd2-product-item__name {
font-family: var(--rd2-serif);
font-size: 19px; font-weight: 700;
color: var(--rd2-navy);
margin: 0 0 6px;
letter-spacing: .04em;
text-transform: uppercase;
}
.rd2-product-item__text { font-size: 15.5px; color: var(--rd2-muted); line-height: 1.6; margin: 0; }
/* connecting lines (decorative chevrons from band to items) */
.rd2-product-band::after {
content: ""; display: block;
height: 0;
}
/* ─── Values rows (Community / Responsibility / Modernity) ───────── */
.rd2-values-list {
display: grid; gap: clamp(28px, 4vw, 56px);
margin-top: 40px;
}
.rd2-value-row {
display: grid; gap: clamp(20px, 4vw, 48px);
grid-template-columns: 1fr 1fr;
align-items: center;
}
.rd2-value-row--reverse > :first-child { order: 2; }
.rd2-value-row__media {
border-radius: var(--rd2-radius);
overflow: hidden;
box-shadow: var(--rd2-shadow);
}
.rd2-value-row__media img,
.rd2-value-row__media video { width: 100%; aspect-ratio: 5/3; object-fit: cover; display: block; }
.rd2-value-row__title {
font-family: var(--rd2-serif);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 700;
color: var(--rd2-navy);
margin: 0 0 6px;
letter-spacing: .04em;
text-transform: uppercase;
}
.rd2-value-row__tag {
font-size: 12.5px;
color: var(--rd2-blue);
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
display: block;
margin: 0 0 14px;
}
.rd2-value-row__body { font-size: 15px; color: var(--rd2-ink); line-height: 1.72; }
@media (max-width: 820px) {
.rd2-value-row { grid-template-columns: 1fr; }
.rd2-value-row--reverse > :first-child { order: 0; }
}
/* ─── Values as overlay cards (image background + text on top) ─────── */
.rd2-values-cards {
display: grid;
grid-template-columns: 1fr;
gap: clamp(18px, 2.4vw, 32px);
margin-top: 40px;
}
.rd2-value-card {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 18px;
min-height: clamp(340px, 32vw, 440px);
display: flex;
align-items: flex-end;
box-shadow: 0 18px 40px -24px rgba(2,16,36,.45);
}
/* Taller than the card so it can drift on scroll (parallax) without gaps. */
.rd2-value-card__media {
position: absolute; left: 0; right: 0; top: -10%; height: 120%;
z-index: -2; will-change: transform;
}
.rd2-value-card__media img,
.rd2-value-card__media video {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .6s ease;
}
.rd2-value-card:hover .rd2-value-card__media img,
.rd2-value-card:hover .rd2-value-card__media video { transform: scale(1.05); }
.rd2-value-card__scrim {
position: absolute; inset: 0; z-index: -1;
/* Bottom-weighted gradient for the text area + a uniform tint over the
whole image so the text stays readable regardless of the photo. */
background:
linear-gradient(0deg,
rgba(2,16,36,.92) 0%,
rgba(2,16,36,.62) 38%,
rgba(2,16,36,.14) 72%,
transparent 100%),
rgba(2,16,36,.38);
}
.rd2-value-card__content { padding: clamp(22px, 2.4vw, 34px); color: #fff; }
.rd2-value-card__tag {
display: inline-block;
font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
font-weight: 600; color: #bcd6ef; margin: 0 0 12px;
}
.rd2-value-card__title {
font-family: var(--rd2-serif);
font-size: clamp(21px, 1.9vw, 26px);
font-weight: 700; color: #fff; margin: 0 0 10px;
letter-spacing: .03em; text-transform: uppercase;
}
.rd2-value-card__body {
font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.9); margin: 0;
}
@media (max-width: 900px) {
.rd2-value-card { min-height: clamp(320px, 60vw, 420px); }
}
/* ─── Team section ──────────────────────────────────────────────── */
.rd2-team-hero {
position: relative;
min-height: clamp(360px, 50vh, 520px);
display: grid; place-items: center;
color: #fff;
isolation: isolate;
overflow: hidden;
}
.rd2-team-hero__bg {
position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: center;
opacity: 0; transition: opacity 1.1s ease; /* stacked layers cross-fade */
}
.rd2-team-hero__bg.is-active { opacity: 1; }
.rd2-team-hero::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(2,16,36,.30) 0%, rgba(2,16,36,.55) 100%);
}
.rd2-team-card {
background: #fff;
border-radius: var(--rd2-radius);
padding: clamp(28px, 4vw, 48px);
max-width: var(--rd2-max);
margin: -80px auto 0;
position: relative;
z-index: 2;
box-shadow: var(--rd2-shadow);
text-align: center;
}
.rd2-team-card ul {
text-align: left;
margin: 14px 0 0;
padding-left: 22px;
color: var(--rd2-ink);
font-size: 15px; line-height: 1.7;
}
.rd2-team-card ul li { margin-bottom: 6px; }
.rd2-founder-band {
background: var(--rd2-navy-deep);
color: #fff;
/* Extra top padding clears the merged team card that overlaps from above. */
padding: clamp(132px, 14vw, 180px) var(--rd2-pad) clamp(48px, 6vw, 80px);
margin-top: 0;
position: relative;
}
.rd2-founder-band__inner {
max-width: var(--rd2-max-narrow);
margin: 0 auto;
display: grid; gap: 32px;
grid-template-columns: 220px 1fr;
align-items: center;
}
@media (max-width: 720px) { .rd2-founder-band__inner { grid-template-columns: 1fr; text-align: center; } }
.rd2-founder-band__avatar {
width: 220px; height: 220px;
border-radius: 50%;
overflow: hidden;
background: rgba(255,255,255,.06);
margin: 0 auto;
}
.rd2-founder-band__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rd2-founder-band h3 { color: #fff; font-family: var(--rd2-serif); font-size: clamp(20px, 2vw, 26px); margin: 0 0 12px; letter-spacing: .04em; text-transform: uppercase; }
.rd2-founder-band p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.7; margin: 0; }
/* ─── Certificates strip ────────────────────────────────────────── */
.rd2-cert-grid {
display: grid; gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
margin-top: 28px;
}
.rd2-cert {
background: #fff;
border: 1px solid var(--rd2-line);
border-radius: var(--rd2-radius-sm);
padding: 14px;
display: grid; place-items: center;
aspect-ratio: 3/4;
transition: border-color .2s, transform .25s;
}
.rd2-cert:hover { border-color: var(--rd2-line-strong); transform: translateY(-2px); }
.rd2-cert img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* ─── Crumbs (page hero) ───────────────────────────────────────── */
.rd2-crumbs {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
margin-bottom: 16px;
}
.rd2-crumbs a { color: rgba(255,255,255,.7); }
.rd2-crumbs a:hover { color: #fff; }
.rd2-crumbs .sep { margin: 0 8px; opacity: .5; }
/* ─── Article (rich text inside admin-fed pages) ────────────────── */
.rd2-article { font-size: 15.5px; color: var(--rd2-ink); line-height: 1.75; }
.rd2-article h2, .rd2-article h3, .rd2-article h4 { font-family: var(--rd2-serif); color: var(--rd2-navy); margin: 24px 0 10px; }
.rd2-article h4 { font-size: 19px; }
.rd2-article p { margin: 0 0 14px; }
.rd2-article ul, .rd2-article ol { margin: 0 0 14px 20px; }
.rd2-article a { color: var(--rd2-blue); text-decoration: underline; }
/* ─── Wave divider — finer ──────────────────────────────────────── */
.rd2-wave { opacity: .85; }
/* ─── Media (photo / video) page header strip ──────────────────── */
.rd2-page-head {
padding: clamp(36px, 4.5vw, 64px) var(--rd2-pad) clamp(20px, 2.5vw, 32px);
max-width: var(--rd2-max);
margin: 0 auto;
}
.rd2-page-head .rd2-crumbs {
color: var(--rd2-muted);
margin-bottom: 12px;
}
.rd2-page-head .rd2-crumbs a { color: var(--rd2-muted); }
.rd2-page-head .rd2-crumbs a:hover { color: var(--rd2-navy); }
.rd2-page-head h1 {
font-family: var(--rd2-serif);
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 700;
color: var(--rd2-navy);
margin: 0;
letter-spacing: .01em;
}
/* ─── Photo gallery grid ───────────────────────────────────────── */
.rd2-gallery {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
margin-top: 24px;
}
.rd2-gallery__item {
position: relative;
aspect-ratio: 1/1;
overflow: hidden;
border-radius: var(--rd2-radius-sm);
background: var(--rd2-paper);
border: 1px solid var(--rd2-line);
display: block;
cursor: zoom-in;
}
.rd2-gallery__item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s ease, filter .25s ease;
}
.rd2-gallery__item::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(2,16,36,.45));
opacity: 0; transition: opacity .25s ease;
}
.rd2-gallery__item:hover img { transform: scale(1.06); }
.rd2-gallery__item:hover::after { opacity: 1; }
.rd2-gallery__caption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 10px 14px;
color: #fff;
font-size: 12.5px;
letter-spacing: .04em;
z-index: 2;
opacity: 0;
transform: translateY(6px);
transition: opacity .25s ease, transform .25s ease;
}
.rd2-gallery__item:hover .rd2-gallery__caption {
opacity: 1; transform: translateY(0);
}
.rd2-gallery--empty {
padding: 60px 20px;
text-align: center;
color: var(--rd2-muted);
background: var(--rd2-paper);
border-radius: var(--rd2-radius);
border: 1px dashed var(--rd2-line-strong);
font-size: 14.5px;
margin-top: 24px;
}
/* ─── Video embed ───────────────────────────────────────────────── */
.rd2-embed {
position: relative;
aspect-ratio: 16/9;
border-radius: var(--rd2-radius);
overflow: hidden;
background: var(--rd2-navy-deep);
box-shadow: var(--rd2-shadow);
margin-top: 24px;
}
.rd2-embed iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
.rd2-embed--empty {
display: grid; place-items: center;
color: rgba(255,255,255,.55);
font-size: 14px;
padding: 40px;
}
/* ═══════════════════════════════════════════════════════════════════════
Home page redesign — dromoni2.pdf slide 1
═══════════════════════════════════════════════════════════════════════ */
/* ─── Hero brand variant (DROMONI wordmark over sea video) ─── */
.rd2-hero--brand {
align-items: center;
min-height: clamp(520px, calc(48vw + 120px), 760px);
}
.rd2-hero__inner--brand { text-align: center; }
.rd2-brand-wordmark {
font-family: var(--rd2-serif);
font-size: clamp(56px, 10vw, 140px);
font-weight: 400;
letter-spacing: .14em;
color: #fff;
margin: 0;
line-height: 1;
text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.rd2-brand-tagline {
margin: 14px 0 0;
font-size: clamp(11px, 1.2vw, 14px);
letter-spacing: .28em;
text-transform: uppercase;
color: rgba(255,255,255,.88);
}
/* ─── ABOUT US + Product Life Cycle ─── */
.rd2-about { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(40px, 5vw, 64px); }
.rd2-about__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 64px);
align-items: center;
}
.rd2-about__title { font-size: clamp(28px, 3vw, 38px); letter-spacing: .04em; margin-bottom: 22px; }
.rd2-about__text .rd2-body { margin: 0 0 14px; }
.rd2-lifecycle {
display: grid;
grid-template-columns: minmax(0, auto) minmax(180px, 1fr) minmax(0, auto);
grid-template-rows: auto minmax(180px, 1fr) auto;
gap: 14px 18px;
max-width: 520px;
margin: 0 auto;
width: 100%;
align-items: center;
justify-items: center;
}
.rd2-lifecycle__center {
grid-column: 2; grid-row: 2;
width: 100%;
aspect-ratio: 1 / 1;
position: relative;
}
.rd2-lifecycle__svg { width: 100%; height: 100%; display: block; }
.rd2-lifecycle__label {
font-family: var(--rd2-serif);
font-size: 13px;
font-weight: 600;
color: var(--rd2-navy);
text-align: center;
line-height: 1.25;
letter-spacing: .02em;
}
.rd2-lifecycle__label--top { grid-column: 2; grid-row: 1; }
.rd2-lifecycle__label--left { grid-column: 1; grid-row: 2; }
.rd2-lifecycle__label--right { grid-column: 3; grid-row: 2; }
.rd2-lifecycle__label--bottom { grid-column: 2; grid-row: 3; }
@media (max-width: 820px) {
.rd2-about__grid { grid-template-columns: 1fr; }
.rd2-lifecycle { max-width: 420px; margin-top: 24px; gap: 10px 12px; }
.rd2-lifecycle__label { font-size: 11.5px; padding: 6px 10px; max-width: 120px; }
}
@media (max-width: 480px) {
.rd2-lifecycle { max-width: 340px; gap: 8px 8px; }
.rd2-lifecycle__label { font-size: 11px; max-width: 100px; padding: 5px 9px; }
}
/* ─── OUR PRODUCTS (3 cards on dark navy sea background) ─── */
.rd2-products {
background:
linear-gradient(180deg, rgba(2,16,36,.85), rgba(2,16,36,.95)),
radial-gradient(ellipse at top, rgba(70,130,200,.25), transparent 60%),
var(--rd2-navy-deep);
color: #fff;
padding: clamp(48px, 6vw, 84px) var(--rd2-pad);
}
.rd2-products__head {
max-width: var(--rd2-max);
margin: 0 auto 28px;
display: flex; align-items: center; justify-content: space-between;
}
.rd2-products__title { color: #fff; margin: 0; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .02em; }
.rd2-products__more {
display: inline-flex; align-items: center; justify-content: center;
color: #fff; opacity: .9;
transition: opacity .2s ease, transform .2s ease;
}
.rd2-products__more:hover { opacity: 1; transform: translateX(3px); }
.rd2-products__grid {
max-width: var(--rd2-max);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(16px, 2vw, 24px);
}
.rd2-product-card {
flex: 1 1 320px;
max-width: 460px;
background: #fff;
border-radius: 14px;
padding: 18px;
display: flex; flex-direction: column; gap: 12px;
min-height: 260px;
text-decoration: none;
color: var(--rd2-navy);
transition: transform .2s ease, box-shadow .2s ease;
box-shadow: 0 12px 24px -16px rgba(0,0,0,.45);
}
.rd2-product-card:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -18px rgba(0,0,0,.55); }
.rd2-product-card__label {
font-family: var(--rd2-serif);
font-size: 15px;
font-weight: 600;
border-bottom: 1px solid rgba(2,16,36,.18);
padding-bottom: 8px;
}
.rd2-product-card img {
display: block; width: 100%; height: 100%;
max-height: 220px;
object-fit: contain;
flex: 1;
}
@media (max-width: 820px) {
.rd2-products__grid { grid-template-columns: 1fr; }
.rd2-product-card img { max-height: 240px; }
}
/* ─── STATS + ISO ─── */
.rd2-stats-iso { padding: clamp(48px, 6vw, 80px) var(--rd2-pad); }
.rd2-stats-iso__grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(28px, 4vw, 48px);
align-items: center;
}
.rd2-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 3vw, 36px) clamp(28px, 4vw, 56px);
}
.rd2-stat__num {
display: block;
font-family: var(--rd2-serif);
font-size: clamp(48px, 6.4vw, 80px);
color: rgba(30, 95, 168, .65);
font-weight: 400;
line-height: 1;
margin-bottom: 10px;
}
.rd2-stat__label {
margin: 0;
font-size: 14px;
color: var(--rd2-ink);
max-width: 28ch;
line-height: 1.45;
}
.rd2-iso-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.rd2-iso-card {
background: #f1f5fa;
border-radius: 14px;
padding: 18px 14px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
text-align: center;
}
.rd2-iso-card__badge {
font-family: var(--rd2-serif);
font-weight: 700;
font-size: 24px;
color: var(--rd2-blue, #1e5fa8);
letter-spacing: .04em;
}
.rd2-iso-card__label {
font-size: 11px;
letter-spacing: .04em;
color: var(--rd2-muted, #6b7785);
}
@media (max-width: 820px) {
.rd2-stats-iso__grid { grid-template-columns: 1fr; }
.rd2-iso-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
.rd2-iso-row { grid-template-columns: 1fr 1fr; }
.rd2-stats-grid { grid-template-columns: 1fr; }
}
/* ─── EMBRACING THE GREATER GOOD banner ─── */
.rd2-banner--embracing { text-align: center; }
.rd2-banner__title { font-size: clamp(28px, 4vw, 48px); letter-spacing: .04em; margin: 0; }
.rd2-embracing-note {
max-width: 720px;
margin: 28px auto;
padding: 0 var(--rd2-pad);
font-size: 14px;
line-height: 1.7;
color: var(--rd2-ink);
text-align: center;
}
/* ─── GET IN TOUCH ─── */
.rd2-section--touch { padding: clamp(48px, 6vw, 96px) var(--rd2-pad); }
.rd2-touch__grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: clamp(28px, 4vw, 64px);
align-items: center;
}
.rd2-touch__title { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: .04em; margin: 0; }
.rd2-form--touch {
background: var(--rd2-navy-deep, #1a1b6e);
padding: clamp(24px, 3vw, 36px);
border-radius: 18px;
display: grid; gap: 14px;
}
.rd2-form--touch .rd2-form__row {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.rd2-form--touch input,
.rd2-form--touch textarea {
background: #fafaf5;
color: var(--rd2-ink);
border: 0;
border-radius: 12px;
padding: 14px 18px;
font-size: 14px;
font-family: inherit;
width: 100%;
}
.rd2-form--touch input::placeholder,
.rd2-form--touch textarea::placeholder { color: #8a909a; }
.rd2-form--touch textarea { min-height: 120px; resize: vertical; }
.rd2-form--touch .rd2-form__submit { margin-top: 4px; }
.rd2-form--touch .rd2-form__submit .rd2-btn { background: #fff; color: var(--rd2-navy); border-color: #fff; }
.rd2-form--touch .rd2-form__submit .rd2-btn:hover { background: var(--rd2-blue, #1e5fa8); color: #fff; border-color: var(--rd2-blue, #1e5fa8); }
@media (max-width: 820px) {
.rd2-touch__grid { grid-template-columns: 1fr; }
.rd2-form--touch .rd2-form__row { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════════════
Home v3 polish — premium visual layer (desktop + mobile 10/10)
═══════════════════════════════════════════════════════════════════════ */
/* ─── Per-container background layer (admin-editable) ────────────────
Add ``
as the FIRST child of any section. Optional tint overlay:
`` right after.
─────────────────────────────────────────────────────────────────── */
.rd2-section,
.rd2-about,
.rd2-products,
.rd2-stats-iso,
.rd2-section--touch,
.rd2-feature,
.rd2-banner,
.rd2-hero {
position: relative;
isolation: isolate;
}
.rd2-bg {
position: absolute; inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
transition: opacity .4s ease, transform .8s ease;
}
.rd2-bg--fixed { background-attachment: fixed; }
.rd2-bg--contain { background-size: contain; }
.rd2-bg__tint {
position: absolute; inset: 0;
z-index: -1;
pointer-events: none;
}
.rd2-bg__tint--light { background: rgba(255,255,255,.86); }
.rd2-bg__tint--paper { background: linear-gradient(180deg, rgba(246,244,238,.92) 0%, rgba(246,244,238,.78) 100%); }
.rd2-bg__tint--soft { background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.65) 100%); }
.rd2-bg__tint--dark { background: rgba(2,16,36,.62); }
.rd2-bg__tint--navy { background: linear-gradient(180deg, rgba(11,39,72,.82) 0%, rgba(2,16,36,.92) 100%); }
.rd2-bg__tint--vignette {
background: radial-gradient(ellipse at center, rgba(2,16,36,.10) 0%, rgba(2,16,36,.55) 100%);
}
/* Reveal-on-scroll utility */
[data-rd-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
[data-rd-reveal].is-in { opacity: 1; transform: none; }
[data-rd-reveal-delay="1"] { transition-delay: .08s; }
[data-rd-reveal-delay="2"] { transition-delay: .16s; }
[data-rd-reveal-delay="3"] { transition-delay: .24s; }
[data-rd-reveal-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
[data-rd-reveal] { opacity: 1; transform: none; transition: none; }
}
/* ─── HERO v3 — cinematic ─────────────────────────────────────────────── */
/* Hero fits in viewport on 14" laptops; caps so it never goes huge on big screens.
Header is sticky (~64-72px), so subtract that from viewport height. */
.rd2-hero--brand {
min-height: clamp(440px, calc(100vh - 72px), 760px);
min-height: clamp(440px, calc(100svh - 72px), 760px);
background:
radial-gradient(ellipse at top, rgba(70,130,200,.18) 0%, transparent 55%),
var(--rd2-navy-deep);
}
.rd2-hero--brand .rd2-hero__video {
transform: scale(1.04);
animation: rd2-heroZoom 30s ease-out forwards;
}
@keyframes rd2-heroZoom { to { transform: scale(1.12); } }
/* override base hero gradient — more cinematic vignette */
.rd2-hero--brand::before {
content: ""; position: absolute; inset: 0; z-index: 1 !important;
pointer-events: none;
background:
radial-gradient(ellipse 90% 60% at center 55%, rgba(0,0,0,0) 0%, rgba(2,16,36,.45) 70%, rgba(2,16,36,.88) 100%),
linear-gradient(180deg, rgba(2,16,36,.35) 0%, rgba(2,16,36,.18) 30%, rgba(2,16,36,.55) 75%, rgba(2,16,36,.95) 100%) !important;
}
.rd2-hero__inner--brand {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 22px;
min-height: inherit;
padding-top: 0; padding-bottom: 0;
}
.rd2-hero__logo {
display: block;
width: clamp(196px, 36vw, 504px);
height: auto;
max-height: 39vh;
filter: drop-shadow(0 6px 32px rgba(0,0,0,.45));
animation: rd2-wordmarkIn 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@media (max-width: 540px) {
.rd2-hero__logo { width: clamp(154px, 55vw, 322px); }
}
.rd2-brand-wordmark {
font-size: clamp(58px, 11.5vw, 168px);
letter-spacing: clamp(.12em, 1.3vw, .26em);
font-weight: 500;
line-height: 1;
text-shadow: 0 6px 40px rgba(0,0,0,.55);
background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, rgba(255,255,255,.78) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: rd2-wordmarkIn 1.4s cubic-bezier(.2,.7,.2,1) both;
}
.rd2-brand-tagline {
margin: 0;
font-size: clamp(11px, 1.3vw, 15px);
letter-spacing: clamp(.22em, .6vw, .42em);
color: rgba(255,255,255,.88);
font-weight: 500;
padding: 9px 26px;
border-top: 1px solid rgba(255,255,255,.22);
border-bottom: 1px solid rgba(255,255,255,.22);
animation: rd2-fadeUp 1.4s .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rd2-wordmarkIn {
0% { opacity: 0; letter-spacing: .04em; transform: translateY(20px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes rd2-fadeUp { from { opacity: 0; transform: translateY(14px);} to { opacity: 1; transform: none; } }
/* Hero scroll indicator */
.rd2-hero__scroll {
position: absolute; left: 50%; bottom: 32px;
transform: translateX(-50%);
width: 28px; height: 44px;
border: 1.5px solid rgba(255,255,255,.55);
border-radius: 14px;
z-index: 3;
animation: rd2-fadeUp 1.2s 1s both;
}
.rd2-hero__scroll::before {
content: ""; position: absolute;
left: 50%; top: 8px; margin-left: -1.5px;
width: 3px; height: 8px;
background: rgba(255,255,255,.9);
border-radius: 2px;
animation: rd2-scrollDot 1.8s ease-in-out infinite;
}
@keyframes rd2-scrollDot {
0%, 100% { opacity: 0; transform: translateY(0); }
30% { opacity: 1; }
80% { opacity: 0; transform: translateY(16px); }
}
@media (max-width: 640px) { .rd2-hero__scroll { display: none; } }
/* ─── ABOUT v3 ────────────────────────────────────────────────────────── */
.rd2-about {
position: relative;
background:
radial-gradient(circle at 85% 15%, rgba(30,95,168,.07) 0%, transparent 50%),
#fff;
}
.rd2-about::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(11,39,72,.14), transparent);
}
.rd2-about__title {
position: relative;
display: inline-block;
font-weight: 700;
}
.rd2-about__title::after {
content: ""; display: block;
width: 56px; height: 3px;
margin-top: 16px;
background: linear-gradient(90deg, var(--rd2-blue), var(--rd2-blue-bright));
border-radius: 2px;
}
.rd2-about__text .rd2-body {
font-size: 16px;
line-height: 1.78;
color: #344559;
}
.rd2-about__text .rd2-body strong { color: var(--rd2-navy); font-weight: 700; }
/* Lifecycle cycle arcs — one arc at a time draws from dot to next, then fades
before the next arc begins. Visualises the product cycle direction (CW). */
.rd2-lc-arc {
animation: rd2-lcDraw 8s ease-in-out infinite;
animation-fill-mode: both;
opacity: 0;
}
.rd2-lc-arc--1 { animation-delay: 0s; }
.rd2-lc-arc--2 { animation-delay: 2s; }
.rd2-lc-arc--3 { animation-delay: 4s; }
.rd2-lc-arc--4 { animation-delay: 6s; }
@keyframes rd2-lcDraw {
0% { stroke-dashoffset: 173; opacity: 1; }
18% { stroke-dashoffset: 0; opacity: 1; }
22% { stroke-dashoffset: 0; opacity: 1; }
25% { stroke-dashoffset: 0; opacity: 0; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.rd2-lc-arc { animation: none; opacity: 1; stroke-dashoffset: 0; }
}
/* Lifecycle polish — pill labels with soft glow behind center circle */
.rd2-lifecycle__center { isolation: isolate; }
.rd2-lifecycle__center::before {
content: ""; position: absolute; inset: 6%;
background: radial-gradient(circle, rgba(30,95,168,.10) 0%, transparent 70%);
z-index: -1;
border-radius: 50%;
}
.rd2-lifecycle__label {
background: #fff;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(11,39,72,.12);
box-shadow: 0 6px 16px -10px rgba(2,16,36,.25);
letter-spacing: .02em;
font-size: 12.5px;
white-space: normal;
max-width: 150px;
width: max-content;
display: inline-block;
}
/* ─── PRODUCTS v3 ─────────────────────────────────────────────────────── */
.rd2-products {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 30% 0%, rgba(45,143,209,.28) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(11,39,72,.55) 0%, transparent 60%),
linear-gradient(180deg, #061a32 0%, #021024 100%);
}
.rd2-products::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle 1px at 18% 28%, rgba(255,255,255,.18) 1px, transparent 1.5px),
radial-gradient(circle 1px at 62% 72%, rgba(255,255,255,.10) 1px, transparent 1.5px),
radial-gradient(circle 1px at 84% 18%, rgba(255,255,255,.15) 1px, transparent 1.5px);
background-size: 320px 320px, 260px 260px, 380px 380px;
opacity: .25;
pointer-events: none;
z-index: 2;
}
/* Background video + dark overlay (fish2.mp4) */
.rd2-products__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.rd2-products__overlay {
position: absolute; inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(2,16,36,.55) 0%, rgba(2,16,36,.78) 60%, rgba(2,16,36,.88) 100%),
radial-gradient(ellipse at 50% 0%, rgba(45,143,209,.25) 0%, transparent 55%);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.rd2-products__video { display: none; }
}
.rd2-products__head { margin-bottom: 36px; position: relative; z-index: 3; }
.rd2-products__title {
font-weight: 700;
letter-spacing: .04em;
position: relative;
padding-bottom: 14px;
}
.rd2-products__title::after {
content: ""; position: absolute;
left: 0; bottom: 0;
width: 56px; height: 3px;
background: var(--rd2-blue-bright);
border-radius: 2px;
}
.rd2-products__more {
width: 48px; height: 48px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.32);
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.rd2-products__more:hover {
background: var(--rd2-blue-bright);
border-color: var(--rd2-blue-bright);
transform: translateX(0) scale(1.05);
}
.rd2-products__grid { position: relative; z-index: 3; }
.rd2-products-carousel { z-index: 3; }
.rd2-product-card {
padding: 22px;
min-height: 300px;
background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
border-radius: 18px;
position: relative;
overflow: hidden;
transition: transform .35s cubic-bezier(.2,.7,.2,1),
box-shadow .35s ease;
}
.rd2-product-card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(45,143,209,.14) 100%);
opacity: 0; transition: opacity .3s ease;
pointer-events: none;
}
.rd2-product-card:hover {
transform: translateY(-8px);
box-shadow:
0 32px 60px -24px rgba(0,0,0,.55),
0 0 0 1px rgba(45,143,209,.30);
}
.rd2-product-card:hover::after { opacity: 1; }
.rd2-product-card__label {
display: flex; align-items: center; justify-content: space-between;
font-size: 17px; letter-spacing: .02em;
padding-bottom: 12px;
border-bottom-color: rgba(11,39,72,.14);
}
.rd2-product-card__label::after {
content: "→"; opacity: .55; font-size: 16px;
transition: transform .3s ease, opacity .3s ease;
}
.rd2-product-card:hover .rd2-product-card__label::after {
opacity: 1; transform: translateX(4px);
}
.rd2-product-card img {
transition: transform .5s ease;
}
.rd2-product-card:hover img { transform: scale(1.04); }
/* ─── Products carousel ──────────────────────────────────────────────── */
.rd2-products-carousel {
position: relative;
max-width: var(--rd2-max);
margin: 0 auto;
z-index: 1;
padding: 0 clamp(0px, 4vw, 56px); /* room for arrow buttons outside viewport */
}
.rd2-products-carousel__viewport {
overflow: hidden;
scroll-behavior: smooth;
}
.rd2-products-carousel__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * clamp(16px, 2vw, 24px)) / 3);
gap: clamp(16px, 2vw, 24px);
scroll-snap-type: x mandatory;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 8px;
}
.rd2-products-carousel__track::-webkit-scrollbar { display: none; }
.rd2-products-carousel__track > .rd2-product-card {
scroll-snap-align: start;
min-width: 0;
}
.rd2-products-carousel__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 44px; height: 44px;
display: grid; place-items: center;
background: rgba(255,255,255,.95);
color: var(--rd2-navy);
border: 0;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 8px 22px -10px rgba(0,0,0,.55);
transition: transform .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.rd2-products-carousel__btn:hover {
background: var(--rd2-blue-bright, #2d8fd1);
color: #fff;
transform: translateY(-50%) scale(1.08);
}
.rd2-products-carousel__btn:disabled {
opacity: .35;
cursor: default;
transform: translateY(-50%) scale(1);
}
.rd2-products-carousel__btn--prev { left: 0; }
.rd2-products-carousel__btn--next { right: 0; }
@media (max-width: 980px) {
.rd2-products-carousel { padding: 0 12px; }
.rd2-products-carousel__track { grid-auto-columns: calc((100% - clamp(14px, 2vw, 20px)) / 2); }
.rd2-products-carousel__btn { width: 38px; height: 38px; }
}
@media (max-width: 600px) {
.rd2-products-carousel { padding: 0 8px; }
.rd2-products-carousel__track { grid-auto-columns: 80%; gap: 14px; }
.rd2-products-carousel__btn--prev { left: -4px; }
.rd2-products-carousel__btn--next { right: -4px; }
}
.rd2-products__empty {
text-align: center;
color: rgba(255,255,255,.7);
font-size: 14px;
padding: 30px 0;
}
/* ─── STATS + ISO v5 — side-by-side (PDF layout) ──────────────────────── */
.rd2-stats-iso {
background:
linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
position: relative;
overflow: hidden;
}
/* decorative soft wave behind */
.rd2-stats-iso::after {
content: "";
position: absolute; left: 0; right: 0; top: 36%;
height: 36%;
background:
radial-gradient(ellipse 80% 60% at 30% 50%, rgba(45,143,209,.10) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 60%, rgba(30,95,168,.08) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.rd2-stats-iso__grid {
grid-template-columns: 1fr 1fr !important;
gap: clamp(28px, 4vw, 56px) !important;
align-items: center;
position: relative;
z-index: 1;
}
.rd2-stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: clamp(20px, 2.6vw, 32px) clamp(18px, 2.2vw, 28px) !important;
}
.rd2-stat {
/* hard override legacy `.rd2-stat` (used by other pages) — flat, no box */
background: transparent !important;
padding: 14px 16px 14px 18px !important;
border-radius: 0 !important;
color: var(--rd2-ink) !important;
text-align: left !important;
position: relative;
box-shadow: none !important;
border-left: 2px solid rgba(30,95,168,.22);
}
.rd2-stat:hover { border-left-color: var(--rd2-blue, #1e5fa8); }
.rd2-stat::before { content: none !important; }
.rd2-stat__num {
display: block;
background: linear-gradient(135deg, #0b2748 0%, #1e5fa8 60%, #2d8fd1 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-weight: 700;
font-size: clamp(30px, 3.4vw, 44px) !important;
line-height: 1;
letter-spacing: -.02em;
margin-bottom: 8px !important;
font-family: var(--rd2-serif);
}
.rd2-stat__label {
font-size: 13px !important;
color: #4a5b71 !important;
line-height: 1.55 !important;
max-width: 30ch;
margin: 0 !important;
font-weight: 500 !important;
font-family: var(--rd2-font) !important;
}
/* ISO column — head + cards (PDF: large globe logos in cards) */
.rd2-iso-section {
display: flex; flex-direction: column;
gap: clamp(16px, 2vw, 24px);
}
.rd2-iso-section__head {
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.rd2-iso-section__eyebrow {
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--rd2-blue);
font-weight: 700;
}
.rd2-iso-section__title {
font-family: var(--rd2-serif);
font-size: clamp(17px, 1.6vw, 20px);
font-weight: 700;
color: var(--rd2-navy);
margin: 0;
letter-spacing: .04em;
}
.rd2-iso-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: clamp(12px, 1.5vw, 18px);
}
.rd2-iso-card {
background: #fff;
border: 1px solid rgba(11,39,72,.10);
border-radius: 14px;
padding: clamp(16px, 2vw, 22px);
display: flex; flex-direction: column; align-items: center; gap: 10px;
box-shadow: 0 8px 22px -16px rgba(2,16,36,.30);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
min-height: 120px;
justify-content: center;
}
.rd2-iso-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 36px -20px rgba(2,16,36,.40);
border-color: rgba(30,95,168,.35);
}
.rd2-iso-card__badge {
width: 100%;
max-width: clamp(72px, 7vw, 88px);
aspect-ratio: 1 / 1;
display: grid; place-items: center;
color: var(--rd2-blue);
font-weight: 800;
font-size: clamp(17px, 1.8vw, 20px);
font-family: var(--rd2-serif);
letter-spacing: .04em;
}
.rd2-iso-card__badge img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.rd2-iso-card__label {
font-size: clamp(11px, .95vw, 12.5px);
font-weight: 600;
color: var(--rd2-navy);
letter-spacing: .04em;
text-align: center;
line-height: 1.4;
}
@media (max-width: 820px) {
.rd2-stats-iso__grid { grid-template-columns: 1fr !important; }
.rd2-iso-row { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 540px) {
.rd2-stats-grid { grid-template-columns: 1fr 1fr !important; }
.rd2-iso-row { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.rd2-iso-card { padding: 14px 10px; min-height: 110px; }
}
/* ─── Partner/brand strip (between hero and About) ─────────────────────── */
.rd2-partners {
background: linear-gradient(180deg, rgba(2,16,36,.96) 0%, rgba(11,39,72,.92) 100%);
padding: clamp(18px, 2vw, 26px) var(--rd2-pad);
border-top: 1px solid rgba(255,255,255,.06);
border-bottom: 1px solid rgba(255,255,255,.06);
overflow: hidden;
}
.rd2-partners__inner {
max-width: var(--rd2-max);
margin: 0 auto;
display: flex; align-items: center; justify-content: space-around;
gap: clamp(20px, 3vw, 56px);
flex-wrap: wrap;
}
.rd2-partners__item {
display: inline-flex; align-items: center;
height: clamp(22px, 2.4vw, 32px);
opacity: .75;
filter: brightness(1.6) saturate(.1);
transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}
.rd2-partners__item:hover { opacity: 1; filter: none; transform: translateY(-1px); }
.rd2-partners__item img,
.rd2-partners__item svg { height: 100%; width: auto; display: block; }
.rd2-partners__placeholder {
font-family: var(--rd2-serif);
font-style: italic;
font-weight: 600;
color: rgba(255,255,255,.55);
font-size: clamp(13px, 1.4vw, 18px);
letter-spacing: .04em;
}
@media (max-width: 640px) {
.rd2-partners__inner { justify-content: center; gap: 18px 28px; }
}
/* ─── Custom cursor (matches /home/ project) ──────────────────────────── */
.custom-cursor { cursor: none; }
.custom-cursor a,
.custom-cursor button,
.custom-cursor [role="button"],
.custom-cursor input,
.custom-cursor textarea,
.custom-cursor select,
.custom-cursor label { cursor: none; }
.custom-cursor__cursor {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid var(--rd2-navy, #214c7b);
transition: width .25s ease, height .25s ease, background-color .2s ease, opacity .2s ease;
position: fixed;
pointer-events: none;
left: 0; top: 0;
transform: translate3d(0,0,0);
z-index: 999991;
mix-blend-mode: normal;
will-change: transform;
}
.custom-cursor__cursor-two {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--rd2-navy, #214c7b);
opacity: .85;
position: fixed;
left: 0; top: 0;
transform: translate(-50%, -50%);
pointer-events: none;
transition: width .25s ease, height .25s ease, opacity .25s ease;
z-index: 999992;
will-change: left, top;
}
.custom-cursor__hover {
background-color: rgba(33, 76, 123, .15);
border-color: var(--rd2-blue, #1e5fa8);
width: 42px; height: 42px;
}
.custom-cursor__innerhover {
width: 16px;
height: 16px;
opacity: .55;
}
.custom-cursor__cursor.click { transform-origin: center; }
/* hide on touch / coarse pointers */
@media (hover: none), (pointer: coarse) {
.custom-cursor__cursor,
.custom-cursor__cursor-two { display: none !important; }
.custom-cursor,
.custom-cursor * { cursor: auto !important; }
}
/* ─── Section wave divider (subtle horizontal) ────────────────────────── */
.rd2-divider-wave {
width: 100%;
height: clamp(28px, 4vw, 56px);
background-image:
url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
.rd2-divider-wave--dark {
background-image:
url("data:image/svg+xml;utf8,");
}
/* ─── Certificates grid ────────────────────────────────────────────── */
.rd2-certs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(18px, 2.4vw, 28px);
}
.rd2-cert-card {
background: #fff;
border: 1px solid var(--rd2-line);
border-radius: var(--rd2-radius-lg);
box-shadow: var(--rd2-shadow-soft);
padding: clamp(24px, 3vw, 36px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.rd2-cert-card:hover {
transform: translateY(-4px);
box-shadow: var(--rd2-shadow);
border-color: var(--rd2-line-strong);
}
.rd2-cert-card__badge {
width: 96px; height: 96px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
border-radius: 50%;
background: radial-gradient(circle at 50% 35%, rgba(45,143,209,.12), rgba(30,95,168,.04) 70%);
}
.rd2-cert-card__badge img { width: 64px; height: 64px; object-fit: contain; }
.rd2-cert-card__title {
font-family: var(--rd2-serif);
font-size: clamp(18px, 2vw, 22px);
color: var(--rd2-navy);
margin: 0 0 10px;
line-height: 1.25;
}
.rd2-cert-card__text {
font-size: 14.5px;
line-height: 1.65;
color: var(--rd2-muted);
margin: 0 0 18px;
}
.rd2-cert-card__link {
margin-top: auto;
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600;
color: var(--rd2-blue);
padding: 8px 4px;
}
.rd2-cert-card__link:hover { color: var(--rd2-blue-bright); }
.rd2-cert-card__link svg { transition: transform .25s ease; }
.rd2-cert-card__link:hover svg { transform: translate(2px, -2px); }
@media (max-width: 860px) { .rd2-certs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rd2-certs { grid-template-columns: 1fr; } }
/* ─── About: vision map ────────────────────────────────────────────── */
.rd2-vision-map {
margin: clamp(28px, 5vw, 56px) auto 0;
max-width: 980px;
position: relative;
}
.rd2-vision-map img {
width: 100%;
border-radius: var(--rd2-radius-lg);
border: 1px solid var(--rd2-line-strong);
box-shadow: var(--rd2-shadow);
background:
radial-gradient(120% 140% at 50% 0%, rgba(45,143,209,.10), transparent 60%),
var(--rd2-paper-2);
}
.rd2-vision-map::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--rd2-radius-lg);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
pointer-events: none;
}
/* ─── Tighter vertical rhythm on home page ─────────────────────────── */
.rd2-page--home .rd2-section { padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(36px, 5vw, 72px); }
.rd2-page--home .rd2-about { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(28px, 3.5vw, 48px); }
.rd2-page--home .rd2-products { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.rd2-page--home .rd2-stats-iso { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.rd2-page--home .rd2-feature { margin: 0; }
.rd2-page--home .rd2-banner--embracing { min-height: clamp(360px, 42vw, 460px) !important; }
.rd2-page--home .rd2-embracing-note { margin: 18px auto 0; padding-bottom: 8px; }
.rd2-page--home .rd2-section--touch { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
/* ─── FEATURE rows (Dromoni I / II) v3 ────────────────────────────────── */
.rd2-page--home .rd2-feature {
position: relative;
align-items: center;
}
.rd2-page--home .rd2-feature__media {
position: relative;
}
.rd2-page--home .rd2-feature__media img {
aspect-ratio: 5 / 4;
border-radius: 18px;
box-shadow:
0 30px 60px -24px rgba(2,16,36,.45),
0 4px 12px rgba(2,16,36,.10);
}
.rd2-page--home .rd2-feature__media::before {
content: "";
position: absolute;
inset: -16px -16px auto auto;
width: 62%; height: 70%;
border: 2px solid var(--rd2-blue-bright);
border-radius: 18px;
z-index: -1;
opacity: .50;
transition: transform .5s ease, opacity .5s ease;
}
.rd2-page--home .rd2-feature--reverse .rd2-feature__media::before {
inset: -16px auto auto -16px;
}
.rd2-page--home .rd2-feature__media:hover::before {
transform: translate(6px, -6px);
opacity: .75;
}
.rd2-page--home .rd2-feature--reverse .rd2-feature__media:hover::before {
transform: translate(-6px, -6px);
}
.rd2-page--home .rd2-feature h2 {
font-size: clamp(28px, 3.6vw, 44px);
letter-spacing: .06em;
margin-bottom: 18px;
position: relative;
}
.rd2-page--home .rd2-feature h2[data-num]::before {
content: attr(data-num);
display: block;
font-size: 12px;
letter-spacing: .3em;
color: var(--rd2-blue);
font-weight: 600;
margin-bottom: 10px;
font-family: var(--rd2-font);
}
.rd2-page--home .rd2-feature .rd2-body {
font-size: 16px;
line-height: 1.78;
color: #344559;
max-width: 56ch;
}
/* Ship blurbs: cap at 3 lines — the "Read more" button links to the full text. */
.rd2-body--clamp3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
/* ─── EMBRACING banner v3 ─────────────────────────────────────────────── */
.rd2-banner--embracing {
min-height: clamp(440px, 50vw, 560px) !important;
}
.rd2-banner--embracing::before {
background:
radial-gradient(ellipse at center, rgba(2,16,36,.25) 0%, rgba(2,16,36,.72) 65%, rgba(2,16,36,.92) 100%) !important;
}
.rd2-banner--embracing .rd2-banner__bg {
animation: rd2-bgPan 28s ease-in-out infinite alternate;
background-size: cover !important;
}
@keyframes rd2-bgPan {
from { background-position: 50% 30%; transform: scale(1); }
to { background-position: 50% 70%; transform: scale(1.05); }
}
.rd2-banner__title {
font-size: clamp(30px, 4.6vw, 56px) !important;
letter-spacing: clamp(.04em, .4vw, .12em) !important;
text-shadow: 0 4px 28px rgba(0,0,0,.55);
font-weight: 700;
position: relative;
display: inline-block;
}
.rd2-banner__title::before,
.rd2-banner__title::after {
content: ""; position: absolute; top: 50%;
width: clamp(20px, 4vw, 60px); height: 1px;
background: rgba(255,255,255,.55);
}
.rd2-banner__title::before { right: calc(100% + 18px); }
.rd2-banner__title::after { left: calc(100% + 18px); }
@media (max-width: 600px) {
.rd2-banner__title::before,
.rd2-banner__title::after { display: none; }
}
.rd2-embracing-note {
font-size: 15px;
line-height: 1.78;
color: #4a5b71;
max-width: 760px;
padding-top: 8px;
}
.rd2-embracing-note strong { color: var(--rd2-navy); }
/* ─── GET IN TOUCH v3 ─────────────────────────────────────────────────── */
.rd2-section--touch {
background: #fff;
position: relative;
}
.rd2-section--touch::before {
content: ""; position: absolute;
left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(11,39,72,.14), transparent);
}
.rd2-touch__title {
position: relative;
display: inline-block;
font-weight: 700;
letter-spacing: .06em;
}
.rd2-touch__title::after {
content: ""; display: block;
width: 56px; height: 3px;
margin-top: 16px;
background: linear-gradient(90deg, var(--rd2-blue), var(--rd2-blue-bright));
border-radius: 2px;
}
.rd2-form--touch {
background: linear-gradient(160deg, #0b2748 0%, #061a32 100%);
border-radius: 22px;
padding: clamp(28px, 4vw, 44px);
box-shadow:
0 30px 60px -30px rgba(2,16,36,.55),
0 4px 8px rgba(2,16,36,.10);
position: relative;
overflow: hidden;
}
.rd2-form--touch::before {
content: "";
position: absolute; right: -100px; top: -100px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(45,143,209,.32) 0%, transparent 70%);
pointer-events: none;
}
.rd2-form--touch::after {
content: "";
position: absolute; left: -80px; bottom: -80px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(45,143,209,.18) 0%, transparent 70%);
pointer-events: none;
}
.rd2-form--touch > * { position: relative; z-index: 1; }
.rd2-form--touch input,
.rd2-form--touch textarea {
background: rgba(255,255,255,.97);
border: 1.5px solid transparent;
padding: 15px 18px;
font-size: 14.5px;
border-radius: 12px;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.rd2-form--touch input:focus,
.rd2-form--touch textarea:focus {
border-color: var(--rd2-blue-bright);
background: #fff;
box-shadow: 0 0 0 4px rgba(45,143,209,.20);
}
.rd2-form--touch .rd2-form__submit .rd2-btn {
padding: 14px 38px;
font-size: 13px;
letter-spacing: .14em;
box-shadow:
0 12px 24px -12px rgba(45,143,209,.55),
0 2px 4px rgba(2,16,36,.20);
}
/* ─── WAVE divider v3 — softer ───────────────────────────────────────── */
.rd2-wave {
height: clamp(48px, 7vw, 90px);
background:
url("data:image/svg+xml;utf8,") center / cover no-repeat,
url("data:image/svg+xml;utf8,") center / cover no-repeat;
opacity: 1;
}
/* ─── MOBILE polish ──────────────────────────────────────────────────── */
@media (max-width: 820px) {
.rd2-hero--brand { min-height: clamp(440px, 78vh, 580px); }
.rd2-brand-wordmark { font-size: clamp(54px, 17vw, 96px); letter-spacing: .14em; }
.rd2-brand-tagline { font-size: 11px; letter-spacing: .22em; padding: 8px 18px; }
.rd2-about { padding-top: 56px; padding-bottom: 24px; }
.rd2-about__title { font-size: 26px; }
.rd2-about__text .rd2-body { font-size: 15px; }
.rd2-lifecycle { max-width: 300px; }
.rd2-lifecycle__label { font-size: 11.5px; padding: 4px 9px; }
.rd2-products { padding: 56px var(--rd2-pad); }
.rd2-products__title { font-size: 26px; }
.rd2-product-card { min-height: 240px; padding: 18px; }
.rd2-product-card__label { font-size: 15px; }
.rd2-stats-iso { padding: 56px var(--rd2-pad); }
.rd2-stat__num { font-size: 32px !important; }
.rd2-stat__label { font-size: 13px !important; }
.rd2-page--home .rd2-feature { gap: 32px; margin: 56px 0; }
.rd2-page--home .rd2-feature h2 { font-size: 28px; }
.rd2-page--home .rd2-feature .rd2-body { font-size: 15px; }
.rd2-page--home .rd2-feature__media::before { display: none; }
.rd2-banner--embracing { min-height: 360px !important; }
.rd2-banner__title { letter-spacing: .04em !important; }
.rd2-embracing-note { padding: 0 6vw; font-size: 14px; }
.rd2-section--touch { padding: 56px var(--rd2-pad); }
.rd2-touch__title { font-size: 26px; }
.rd2-form--touch { border-radius: 16px; padding: 22px; }
}
@media (max-width: 480px) {
.rd2-products__grid { gap: 14px; }
.rd2-product-card { min-height: 220px; }
.rd2-stats-grid { gap: 24px; }
.rd2-form--touch input,
.rd2-form--touch textarea { padding: 13px 15px; font-size: 14px; }
}
/* ═══════════════════════════════════════════════════════════════════════
Sub-page polish — cinematic heroes, eyebrows, section accents
═══════════════════════════════════════════════════════════════════════ */
/* Center heroes on sub-pages: bigger, more cinematic, with subtle pan */
.rd2-hero--center {
min-height: clamp(360px, calc(100svh - 100px), 520px);
align-items: center;
text-align: center;
}
.rd2-hero--center .rd2-hero__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.rd2-hero--center .rd2-hero__bg {
animation: rd2-heroPan 30s ease-in-out infinite alternate;
}
@keyframes rd2-heroPan {
from { transform: scale(1.04) translateY(0); }
to { transform: scale(1.08) translateY(-1.5%); }
}
/* darker, more cinematic gradient on sub-page heroes */
.rd2-hero--center::before {
background:
radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(2,16,36,.45) 60%, rgba(2,16,36,.78) 100%),
linear-gradient(180deg, rgba(2,16,36,.30) 0%, rgba(2,16,36,.20) 35%, rgba(2,16,36,.65) 100%) !important;
}
.rd2-hero--center .rd2-hero__title {
font-size: clamp(34px, 5.2vw, 56px);
letter-spacing: clamp(.04em, .4vw, .12em);
font-weight: 600;
text-shadow: 0 4px 28px rgba(0,0,0,.55);
animation: rd2-fadeUp 1.2s .15s both;
}
.rd2-hero--center .rd2-hero__sub {
font-size: clamp(14.5px, 1.2vw, 17px);
max-width: 56ch;
margin: 18px auto 0;
color: rgba(255,255,255,.92);
animation: rd2-fadeUp 1.2s .35s both;
}
.rd2-hero--center .rd2-crumbs {
animation: rd2-fadeUp 1.2s 0s both;
justify-content: center;
display: inline-flex;
}
/* small fish accent above hero title */
.rd2-hero--center .rd2-hero__title::before {
content: "";
display: block;
width: clamp(40px, 5vw, 64px);
height: 14px;
margin: 0 auto 14px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* When a fish accent already sits above the title, drop the squiggle line. */
.rd2-hero__fish + .rd2-hero__title::before { display: none; }
/* Section title with eyebrow + accent — used across sub-pages */
.rd2-section-title-block { text-align: center; max-width: 720px; margin: 0 auto 36px; }
/* Team page: widen grassroots block to match the founder band width. */
.rd2-section-title-block--wide { max-width: var(--rd2-max); }
/* Decorative fish mark above team section titles (replaces the old squiggle). */
.rd2-fish-mark {
display: block;
width: clamp(58px, 7vw, 88px);
height: auto;
margin: 0 auto 16px;
opacity: .85;
}
/* Merged team card: Driving + Grassroots share one frame whose bottom
overlaps the founder band, mirroring how its top overlaps the hero. */
.rd2-team-card--merged {
margin-bottom: clamp(-100px, -7vw, -64px);
}
.rd2-team-card__grass {
margin-top: clamp(30px, 4vw, 46px);
padding-top: clamp(30px, 4vw, 46px);
border-top: 1px solid var(--rd2-line);
}
.rd2-section-title-block .rd2-eyebrow { margin-bottom: 12px; }
.rd2-section-title-block .rd2-h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: .04em; margin: 0 0 12px; }
.rd2-section-title-block .rd2-lead { color: var(--rd2-muted); font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.7; }
/* Numbered card accent for `.rd2-eyebrow` containing a leading number */
.rd2-eyebrow strong { color: var(--rd2-navy); }
/* Vessel cards — index-grade hover */
.rd2-vessel { position: relative; isolation: isolate; }
.rd2-vessel::before {
content: ""; position: absolute;
inset: -10px -10px auto auto;
width: 60%; height: 60%;
border: 2px solid var(--rd2-blue-bright);
border-radius: 16px;
z-index: -1;
opacity: 0;
transition: opacity .3s ease, transform .4s ease;
}
.rd2-vessel:hover::before { opacity: .45; transform: translate(4px, -4px); }
.rd2-vessel__name { letter-spacing: .04em; }
/* Feature panel (3 cards on navy) — card-on-card look matching PDF p4 */
.rd2-feature-panel { position: relative; isolation: isolate; }
.rd2-feature-panel__grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
}
.rd2-feature-panel__item {
background: linear-gradient(160deg, #ffffff 0%, #f3f6fa 100%);
color: var(--rd2-ink);
border-radius: 18px;
padding: 28px 26px;
text-align: center;
box-shadow: 0 18px 36px -20px rgba(2,16,36,.45);
transition: transform .25s ease, box-shadow .25s ease;
border: 1px solid transparent;
}
.rd2-feature-panel__item:hover {
transform: translateY(-6px);
box-shadow: 0 28px 48px -22px rgba(2,16,36,.55);
border-color: rgba(45,143,209,.30);
}
.rd2-feature-panel__title { color: var(--rd2-navy); font-size: 21px; margin-bottom: 14px; }
.rd2-feature-panel__body { color: var(--rd2-muted); font-size: 14px; line-height: 1.7; }
.rd2-feature-panel__item + .rd2-feature-panel__item::before { display: none; }
/* Vision card (numbered, on subpages) */
.rd2-vcard { transition: transform .25s ease, box-shadow .25s ease; }
.rd2-vcard:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -22px rgba(2,16,36,.5); }
/* Values cards — PDF p7 floating glass cards */
.rd2-value-row {
background: #fff;
border-radius: 18px;
padding: clamp(20px, 2.4vw, 32px);
box-shadow: 0 18px 40px -24px rgba(2,16,36,.35), inset 0 0 0 1px rgba(11,39,72,.06);
position: relative;
isolation: isolate;
}
.rd2-value-row::before {
content: ""; position: absolute;
left: 0; top: 30%; bottom: 30%; width: 3px;
background: linear-gradient(180deg, var(--rd2-blue) 0%, var(--rd2-blue-bright) 100%);
border-radius: 0 3px 3px 0;
}
.rd2-value-row__title { font-size: clamp(22px, 2.4vw, 28px); color: var(--rd2-blue); }
.rd2-value-row__tag {
font-style: italic;
color: var(--rd2-muted);
font-weight: 500;
letter-spacing: .02em;
text-transform: none;
}
/* Founder band polish — PDF p6 */
.rd2-founder-band {
background:
radial-gradient(ellipse at 80% 0%, rgba(45,143,209,.20) 0%, transparent 50%),
linear-gradient(180deg, #0b2748 0%, #061a32 100%);
}
.rd2-founder-band__avatar { box-shadow: 0 16px 36px -16px rgba(0,0,0,.5); border: 3px solid rgba(255,255,255,.08); }
/* Team hero polish */
.rd2-team-hero { min-height: clamp(360px, calc(100svh - 80px), 520px); }
.rd2-team-hero h1 {
text-shadow: 0 4px 28px rgba(0,0,0,.55);
letter-spacing: .04em;
}
/* Team card — floating + reveal */
.rd2-team-card { box-shadow: 0 24px 60px -28px rgba(2,16,36,.5), 0 4px 12px rgba(2,16,36,.10); }
.rd2-team-card ul li::marker { color: var(--rd2-blue); }
.rd2-team-card ul li { font-size: 15px; line-height: 1.7; color: var(--rd2-ink); }
/* Contact page form polish */
.rd2-contact-wrap .rd2-form {
background: linear-gradient(160deg, #0b2748 0%, #061a32 100%);
border-radius: 18px;
box-shadow: 0 24px 50px -28px rgba(2,16,36,.55);
}
.rd2-contact-list li { transition: transform .2s ease, box-shadow .2s ease; }
.rd2-contact-list li:hover { transform: translateX(4px); box-shadow: 0 10px 22px -12px rgba(2,16,36,.30); }
/* Page-head polish */
.rd2-page-head h1 {
position: relative;
display: inline-block;
padding-bottom: 14px;
}
.rd2-page-head h1::after {
content: ""; position: absolute;
left: 0; bottom: 0; width: 56px; height: 3px;
background: linear-gradient(90deg, var(--rd2-blue), var(--rd2-blue-bright));
border-radius: 2px;
}
/* Mobile sub-page heroes */
@media (max-width: 720px) {
.rd2-hero--center { min-height: clamp(280px, 65vh, 420px); }
.rd2-hero--center .rd2-hero__title { font-size: clamp(28px, 8vw, 42px); }
.rd2-feature-panel__item { padding: 22px 18px; }
.rd2-vessel::before { display: none; }
}
/* ─── Values lifecycle (3-label variant of index lifecycle) ──────────── */
.rd2-lifecycle--values {
grid-template-rows: auto minmax(180px, 1fr) !important; /* drop the empty bottom row */
}
.rd2-lifecycle--values .rd2-lifecycle__label--bottom { display: none !important; }
/* Draw each arc in sequence and KEEP it — the three arcs together complete
the ring through the three nodes (pathLength=100 per arc). */
.rd2-lifecycle--values .rd2-lc-arc {
animation: rd2-lcDrawVal 1.1s ease-out both;
opacity: 1;
}
.rd2-lifecycle--values .rd2-lc-arc--1 { animation-delay: .15s; }
.rd2-lifecycle--values .rd2-lc-arc--2 { animation-delay: .55s; }
.rd2-lifecycle--values .rd2-lc-arc--3 { animation-delay: .95s; }
@keyframes rd2-lcDrawVal {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.rd2-lifecycle--values .rd2-lc-arc { animation: none; opacity: 1; stroke-dashoffset: 0; }
}
/* Founder band variant — no avatar, text takes full width */
.rd2-founder-band__inner--text {
grid-template-columns: 1fr !important;
text-align: left;
max-width: var(--rd2-max);
}
.rd2-founder-band__inner--text > * { max-width: none; }
@media (max-width: 720px) {
.rd2-founder-band__inner--text { text-align: left; }
}
/* ─── PPTX revision (2026-07) — tighter vertical rhythm ──────────────
Client feedback: heroes had too much empty space below them on the
Factory and Products pages. Pull the first band up and tighten the
overall section rhythm on these pages. */
.rd2-page--factory .rd2-section {
padding-top: clamp(36px, 4.5vw, 64px);
padding-bottom: clamp(36px, 4.5vw, 64px);
}
/* First content section sits closer to the hero */
.rd2-page--factory .rd2-hero + .rd2-section {
padding-top: clamp(28px, 3.5vw, 48px);
}
/* Feature rows — same premium treatment as the home / vessel pages so the
short factory copy reads as intentional (bigger heading, taller image with
a soft shadow + offset accent) instead of floating in empty space. */
.rd2-page--factory .rd2-feature { align-items: center; }
.rd2-page--factory .rd2-feature__media { position: relative; }
.rd2-page--factory .rd2-feature__media img {
aspect-ratio: 5 / 4;
border-radius: 18px;
box-shadow: 0 30px 60px -24px rgba(2,16,36,.45), 0 4px 12px rgba(2,16,36,.10);
}
.rd2-page--factory .rd2-feature__media::before {
content: ""; position: absolute; inset: -16px -16px auto auto;
width: 62%; height: 70%;
border: 2px solid var(--rd2-blue-bright);
border-radius: 18px; z-index: -1; opacity: .5;
transition: transform .5s ease, opacity .5s ease;
}
.rd2-page--factory .rd2-feature--reverse .rd2-feature__media::before { inset: -16px auto auto -16px; }
.rd2-page--factory .rd2-feature__media:hover::before { transform: translate(6px, -6px); opacity: .75; }
.rd2-page--factory .rd2-feature--reverse .rd2-feature__media:hover::before { transform: translate(-6px, -6px); }
.rd2-page--factory .rd2-feature h2 {
font-size: clamp(26px, 3.2vw, 40px);
letter-spacing: .04em;
margin-bottom: 18px;
}
.rd2-page--factory .rd2-feature .rd2-body {
font-size: 16px;
line-height: 1.8;
color: #344559;
max-width: 54ch;
}
/* Products: drop the dead space under the first band's hero image */
.rd2-page--products .rd2-product-band {
margin: clamp(24px, 3vw, 44px) 0;
}
.rd2-page--products .rd2-main > .rd2-product-band:first-child,
.rd2-page--products .rd2-main > .rd2-product-band:first-of-type {
margin-top: 0;
margin-bottom: clamp(20px, 2.5vw, 36px);
}
.rd2-page--products .rd2-band-text {
margin-top: clamp(18px, 2.4vw, 28px) !important;
}
/* ═══ PPTX revision round 2 (2026-07) ═══════════════════════════════
Presentation notes: shorter sub-page heroes, sea-to-factory flow to
match the slide, home lifecycle full-bleed + larger wheel, no fish
decorations, tighter contact page. */
/* 1 ── Shorter sub-page heroes ─────────────────────────────────────── */
.rd2-hero--center {
min-height: clamp(300px, 40vh, 430px) !important;
}
.rd2-team-hero {
min-height: clamp(300px, 40vh, 430px) !important;
}
/* 2 ── Remove decorative fish marks (hero accent, section marks, band) ─ */
.rd2-fish-mark,
.rd2-hero__fish,
.rd2-band-text__icon { display: none !important; }
.rd2-hero--center .rd2-hero__title::before { display: none !important; }
/* 3 ── "Fresh, from sea to factory" flow (photo cards + arrows + caps) ─ */
.rd2-flow {
--rd2-flow-gap: clamp(30px, 3.8vw, 56px);
display: flex;
align-items: stretch; /* steps share height → captions equalise */
justify-content: center;
gap: var(--rd2-flow-gap);
max-width: var(--rd2-max);
margin: 40px auto 0;
counter-reset: rd2flow;
}
.rd2-flow__step {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column;
counter-increment: rd2flow;
}
.rd2-flow__card {
position: relative;
flex: 0 0 auto;
aspect-ratio: 1 / 1;
border-radius: 20px;
box-shadow: 0 26px 50px -26px rgba(11,39,72,.5), 0 6px 16px rgba(11,39,72,.08);
transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.rd2-flow__card img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 20px; }
.rd2-flow__step:hover .rd2-flow__card {
transform: translateY(-6px);
box-shadow: 0 36px 62px -24px rgba(11,39,72,.55), 0 10px 22px rgba(11,39,72,.1);
}
/* step number badge (01 / 02 / 03) */
.rd2-flow__card::before {
content: counter(rd2flow, decimal-leading-zero);
position: absolute; top: 14px; left: 14px; z-index: 2;
display: grid; place-items: center;
min-width: 42px; height: 32px; padding: 0 11px;
background: rgba(11,39,72,.85);
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
color: #fff; font-family: var(--rd2-serif);
font-size: 14px; font-weight: 700; letter-spacing: .08em;
border-radius: 999px;
}
/* circular arrow chip — centred exactly in the gap between two cards */
.rd2-flow__step:not(:last-child) .rd2-flow__card::after {
content: "\2192"; /* → */
position: absolute; top: 50%; left: 100%;
margin-left: calc(var(--rd2-flow-gap) / 2);
transform: translate(-50%, -50%);
z-index: 3;
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
background: #fff;
box-shadow: 0 8px 20px -8px rgba(11,39,72,.45), 0 0 0 1px rgba(11,39,72,.06);
color: var(--rd2-navy);
font-size: 18px; font-weight: 700; line-height: 1;
}
.rd2-flow__cap {
margin-top: 20px;
flex: 1 1 auto; /* grow to fill → all caps equal height */
display: flex; flex-direction: column; justify-content: center;
border: 1px solid rgba(11,39,72,.12);
border-radius: 16px;
padding: 22px 22px;
text-align: center;
font-size: 14.5px; line-height: 1.62;
color: var(--rd2-ink);
background: #fff;
box-shadow: 0 20px 44px -30px rgba(11,39,72,.45);
}
@media (max-width: 760px) {
/* Vertical stack: the gap grows enough to hold the arrow chip between cards. */
.rd2-flow { --rd2-flow-gap: 46px; flex-direction: column; align-items: center; }
.rd2-flow__step { position: relative; width: 100%; max-width: 400px; }
/* The side arrow goes; a down arrow takes its place, centred in the gap
below the whole step, because the next photo now sits underneath. */
.rd2-flow__step:not(:last-child) .rd2-flow__card::after { display: none; }
.rd2-flow__step:not(:last-child)::after {
content: "\2193"; /* ↓ */
position: absolute; top: 100%; left: 50%;
margin-top: calc(var(--rd2-flow-gap) / 2);
transform: translate(-50%, -50%);
z-index: 3;
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
background: #fff;
box-shadow: 0 8px 20px -8px rgba(11,39,72,.45), 0 0 0 1px rgba(11,39,72,.06);
color: var(--rd2-navy);
font-size: 18px; font-weight: 700; line-height: 1;
}
}
/* 4 ── Home "Product Life Cycle" band: full-bleed bg + larger wheel ──── */
.rd2-page--home .rd2-about {
max-width: none;
padding-left: var(--rd2-pad);
padding-right: var(--rd2-pad);
}
.rd2-page--home .rd2-about__grid {
max-width: var(--rd2-max);
margin: 0 auto;
gap: clamp(24px, 4vw, 72px);
}
.rd2-page--home .rd2-lifecycle { max-width: 600px; }
/* 5 ── Contact page: tighten the gap before the footer wave ──────────── */
.rd2-page--contact .rd2-section { padding-bottom: clamp(24px, 3vw, 40px); }
/* ═══ PPTX revision round 3 (2026-07) — home fixed video background ═══
fish2.mp4 is fixed behind the home page. White sections cover it;
the Products and Embracing sections are transparent so it shows
through (with a light scrim for legibility over white text). */
.rd2-fixedbg {
position: fixed; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: -1;
pointer-events: none;
}
body.rd2-page--home { background: #021024; } /* fallback behind the video */
/* White (opaque) bands cover the video: About, Stats, Dromoni I/II, Get in touch.
The white must span the FULL viewport width, so make the section full-bleed
and re-constrain its inner content to the normal max-width, centered. */
.rd2-page--home .rd2-section {
background: #fff !important;
max-width: none;
padding-left: var(--rd2-pad);
padding-right: var(--rd2-pad);
}
.rd2-page--home .rd2-section > .rd2-feature,
.rd2-page--home .rd2-section > .rd2-stats-iso__grid,
.rd2-page--home .rd2-section > .rd2-touch__grid,
.rd2-page--home .rd2-section > .rd2-about__grid {
max-width: var(--rd2-max);
margin-left: auto;
margin-right: auto;
}
/* Divider strips are transparent wave-lines that sit between the white
sections — give them a white backing so the video only shows in the two
intended bands (Products, Embracing), never in the thin dividers. */
.rd2-page--home .rd2-divider-wave { background-color: #fff !important; }
/* Products — transparent, dimmed video shows through, white cards/title pop */
.rd2-page--home .rd2-products {
background: linear-gradient(180deg, rgba(2,16,36,.36) 0%, rgba(2,16,36,.52) 100%) !important;
}
.rd2-page--home .rd2-products::before,
.rd2-page--home .rd2-products__video,
.rd2-page--home .rd2-products__overlay { display: none !important; }
/* Embracing the Greater Good — transparent, video shows through the vignette */
.rd2-page--home .rd2-banner--embracing { background: transparent !important; }
.rd2-page--home .rd2-banner--embracing .rd2-banner__bg { display: none !important; }
.rd2-page--home .rd2-banner--embracing::before {
background: radial-gradient(ellipse at center,
rgba(2,16,36,.14) 0%, rgba(2,16,36,.48) 68%, rgba(2,16,36,.7) 100%) !important;
}
/* The values note is its own full-width WHITE band with dark text
(centred to a readable measure via horizontal padding). */
.rd2-page--home .rd2-embracing-note {
background: #fff;
color: var(--rd2-ink);
max-width: none;
margin: 0;
padding: clamp(26px, 3.6vw, 46px) max(var(--rd2-pad), calc((100% - 760px) / 2));
text-shadow: none;
}
.rd2-page--home .rd2-embracing-note strong { color: var(--rd2-navy); }
/* ═══ Animated wave band above the footer (all pages) ═══════════════
Replaces the static .rd2-wave with a live layered-wave canvas that
merges into the footer. Full width, ends in solid navy. */
.rd2-wave { display: none !important; }
.rd2-livewave {
position: relative;
width: 100%;
height: clamp(120px, 15vw, 190px);
margin: 0 0 -1px; /* seamless join to the footer */
padding: 0;
overflow: hidden;
line-height: 0;
background: #fff; /* white above the wave crests, consistent on every page */
}
.rd2-livewave__canvas { display: block; width: 100%; height: 100%; }
/* ═══ Auto stagger-reveal — cascade block elements into view (lively page) ═
The class is added by JS, so if scripting is off the content stays visible. */
.rd2-r {
opacity: 0;
transform: translateY(22px);
transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
.rd2-r.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.rd2-r { opacity: 1; transform: none; transition: none; }
}
/* ═══ Fixed video background on ALL pages ═══════════════════════════════
Sub-pages sit on an opaque white content layer by default (video hidden,
loaded and ready). Per page we can later make chosen blocks transparent,
exactly like the home page. */
body.rd2-body { background: #021024; }
.rd2-body:not(.rd2-page--home) .rd2-main { background: #fff; }
/* ═══ Fleet page — Efficiency / Technology / Safety over the fixed video ═══
The 3-card feature panel goes transparent so the fixed video shows through;
the white cards float on it. Every other section stays full-bleed white. */
.rd2-body.rd2-page--fleet .rd2-main { background: transparent; }
.rd2-page--fleet .rd2-section {
background: #fff;
max-width: none;
padding-left: var(--rd2-pad);
padding-right: var(--rd2-pad);
padding-top: clamp(26px, 3.5vw, 48px);
padding-bottom: clamp(26px, 3.5vw, 48px);
}
/* the section padding already spaces the vessels — drop the feature block's
own vertical margin so there isn't a sea of white space between them */
.rd2-page--fleet .rd2-feature { margin-top: 0; margin-bottom: 0; }
.rd2-page--fleet .rd2-section > * {
max-width: var(--rd2-max);
margin-left: auto;
margin-right: auto;
}
.rd2-page--fleet .rd2-feature-panel { background: transparent !important; }
/* light wave lines between the white vessel sections sit on white … */
.rd2-page--fleet .rd2-divider-wave:not(.rd2-divider-wave--dark) { background-color: #fff; }
/* … while the dark-line waves flanking the panel stay transparent so the
video shows through, giving a wavy white↔video transition. */
.rd2-page--fleet .rd2-divider-wave--dark { background-color: transparent; }
/* ═══ Video lightbox — [data-rd-video] opens its clip in a popup ═══════════ */
.rd2-videotrigger { cursor: pointer; }
.rd2-play {
position: absolute; inset: 0; margin: auto;
width: 84px; height: 84px; border-radius: 50%;
background: rgba(255,255,255,.16);
border: 2px solid rgba(255,255,255,.9);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center;
transition: transform .25s ease, background .25s ease;
pointer-events: none;
}
.rd2-play::before {
content: ""; margin-left: 6px;
border-style: solid; border-width: 13px 0 13px 22px;
border-color: transparent transparent transparent #fff;
}
.rd2-videotrigger:hover .rd2-play,
.rd2-videotrigger:focus-visible .rd2-play { transform: scale(1.09); background: rgba(255,255,255,.3); }
.rd2-vmodal {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center;
padding: clamp(16px, 4vw, 48px);
background: rgba(2,16,36,.82);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
opacity: 0; visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.rd2-vmodal.is-open { opacity: 1; visibility: visible; }
.rd2-vmodal__inner {
position: relative; width: min(1100px, 100%);
aspect-ratio: 16 / 9; background: #000;
border-radius: 14px; overflow: hidden;
box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
transform: translateY(16px) scale(.98);
transition: transform .3s ease;
}
.rd2-vmodal.is-open .rd2-vmodal__inner { transform: none; }
.rd2-vmodal__inner video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.rd2-vmodal__close {
position: absolute; top: 10px; right: 10px; z-index: 2;
width: 42px; height: 42px; border: 0; border-radius: 50%;
background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s ease;
}
.rd2-vmodal__close:hover { background: rgba(0,0,0,.9); }
/* ═══ Carousel — [data-rd-carousel] auto-rotating image slider ═════════════ */
.rd2-carousel {
position: relative;
max-width: var(--rd2-max);
margin: 0 auto;
border-radius: var(--rd2-radius, 16px);
overflow: hidden;
box-shadow: var(--rd2-shadow);
background: #0b2748;
}
.rd2-carousel__track { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.rd2-carousel__slide { min-width: 100%; aspect-ratio: 16 / 8; }
.rd2-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd2-carousel__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 46px; height: 46px; border-radius: 50%; border: 0;
background: rgba(255, 255, 255, .85); color: #0b2748;
font-size: 26px; line-height: 1; cursor: pointer; z-index: 2;
display: flex; align-items: center; justify-content: center;
transition: background .2s ease, transform .2s ease;
}
.rd2-carousel__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.rd2-carousel__nav--prev { left: 14px; }
.rd2-carousel__nav--next { right: 14px; }
.rd2-carousel__dots {
position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2;
display: flex; gap: 8px; justify-content: center;
}
.rd2-carousel__dot {
width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
background: rgba(255, 255, 255, .45);
transition: background .2s ease, transform .2s ease;
}
.rd2-carousel__dot.is-active { background: #fff; transform: scale(1.3); }
@media (max-width: 600px) {
.rd2-carousel__slide { aspect-ratio: 4 / 3; }
.rd2-carousel__nav { width: 38px; height: 38px; font-size: 22px; }
}
/* ═══ About page — Heritage / Challenges / New Era over the fixed video ═══
One grid of 6 identical boxes (3 images + 3 text panels), aligned in two
columns. Video shows through; only the text sits on a translucent panel.
Vision + Results stay opaque white. */
.rd2-body.rd2-page--about .rd2-main { background: transparent; }
.rd2-page--about .rd2-solid {
background: #fff;
max-width: none;
padding-left: var(--rd2-pad);
padding-right: var(--rd2-pad);
}
.rd2-page--about .rd2-solid > * {
max-width: var(--rd2-max);
margin-left: auto;
margin-right: auto;
}
.rd2-page--about .rd2-glass--band {
background: transparent;
padding-top: clamp(44px, 5.5vw, 84px);
padding-bottom: clamp(44px, 5.5vw, 84px);
}
.rd2-glass-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(18px, 2.4vw, 40px);
max-width: var(--rd2-max);
margin: 0 auto;
}
@media (min-width: 721px) {
.rd2-glass-grid { grid-auto-rows: 460px; } /* every row identical height */
}
.rd2-glass-grid__img {
border-radius: 18px;
overflow: hidden;
box-shadow: var(--rd2-shadow);
}
.rd2-glass-grid__img img {
width: 100%;
height: calc(100% + 100px); /* extra room so the image can pan (parallax) */
object-fit: cover;
display: block;
transform: translate3d(0, -50px, 0); /* centred; JS pans it on scroll */
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.rd2-glass-grid__img img { height: 100%; transform: none; }
}
.rd2-glass-grid__text {
background: rgba(2, 16, 36, .46);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 18px;
padding: clamp(22px, 3vw, 36px);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
overflow: auto;
scrollbar-width: none; /* Firefox — hide scrollbar */
-ms-overflow-style: none; /* IE/Edge */
}
.rd2-glass-grid__text::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rd2-glass-grid__text .rd2-h2 { color: #fff; margin-top: 8px; }
.rd2-glass-grid__text .rd2-body { color: rgba(255, 255, 255, .90); }
.rd2-glass-grid__text .rd2-eyebrow { color: #86b7ec; }
@media (max-width: 720px) {
.rd2-glass-grid { grid-template-columns: 1fr; }
.rd2-glass-grid__img { min-height: 240px; }
}
/* drop the wavy divider lines on the About page — redundant over the video */
.rd2-page--about .rd2-divider-wave { display: none; }
/* About — Capacity block: white bg, small graphic LEFT, text fills the RIGHT */
.rd2-page--about .rd2-cap__inner {
display: flex;
align-items: center;
gap: clamp(24px, 4vw, 56px);
}
.rd2-page--about .rd2-cap__media {
flex: 0 0 auto;
width: 300px;
max-width: 34%;
margin: 0;
}
.rd2-page--about .rd2-cap__media img { width: 100%; height: auto; display: block; }
.rd2-page--about .rd2-cap__inner > div:not(.rd2-cap__media) { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) {
.rd2-page--about .rd2-cap__inner { flex-direction: column; align-items: flex-start; }
.rd2-page--about .rd2-cap__media { width: 220px; max-width: 62%; }
}
/* About — Vision ↔ Capacity: full-width vision text, tighter gap, keep one divider */
.rd2-page--about .rd2-vision .rd2-section-title-block { max-width: var(--rd2-max); }
.rd2-page--about .rd2-vision { padding-bottom: clamp(18px, 2.4vw, 34px); }
.rd2-page--about .rd2-cap { padding-top: clamp(18px, 2.4vw, 34px); }
.rd2-page--about .rd2-divider-wave.rd2-divider-wave--keep {
display: block !important;
background-color: #fff;
}
/* ═══ Team page — glass blocks over the fixed video ═══════════════════ */
.rd2-body.rd2-page--team .rd2-main { background: transparent; }
.rd2-page--team .rd2-team-card {
background: rgba(2, 16, 36, .5);
border: 1px solid rgba(255, 255, 255, .14);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.rd2-page--team .rd2-team-card .rd2-h2,
.rd2-page--team .rd2-team-card h2,
.rd2-page--team .rd2-team-card h3 { color: #fff; }
.rd2-page--team .rd2-team-card .rd2-lead,
.rd2-page--team .rd2-team-card .rd2-body,
.rd2-page--team .rd2-team-card p,
.rd2-page--team .rd2-team-card ul li { color: rgba(255, 255, 255, .9); }
.rd2-page--team .rd2-team-card ul li::marker { color: #86b7ec; }
.rd2-page--team .rd2-team-card__grass { border-top-color: rgba(255, 255, 255, .16); }
/* Founder band — WHITE with dark text. The glass card overlaps it at the
bottom, mirroring how its top overlaps the hero (symmetric transition). */
.rd2-page--team .rd2-team-card--merged { margin-bottom: -80px; }
.rd2-page--team .rd2-team-card { background: rgba(2, 16, 36, .58); }
.rd2-page--team .rd2-founder-band {
background: #fff !important;
color: var(--rd2-ink) !important;
padding-top: clamp(108px, 11vw, 150px); /* clears the overlapping card */
}
.rd2-page--team .rd2-founder-band::before { display: none; } /* drop its dark scrim */
.rd2-page--team .rd2-founder-band h3 { color: var(--rd2-navy); }
.rd2-page--team .rd2-founder-band p { color: var(--rd2-ink); }
/* ═══ About page — fixed IMAGE background (replaces the video) ═══════════ */
body.rd2-page--about .rd2-fixedbg { display: none; }
body.rd2-page--about::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background: #021024 url("../media/backgrounds/about-vision-bg.jpg") center center / cover no-repeat;
pointer-events: none;
}
/* ═══ Sub-page heroes — tall; image fixed, text scrolls up then pins ══════
Applies to About / Fleet / Factory / Values (.rd2-hero--center),
Team (.rd2-team-hero) and Products (first band). */
.rd2-hero--center,
.rd2-team-hero {
min-height: clamp(600px, 78vh, 820px) !important;
overflow: visible; /* let the text pin (position:sticky) */
}
.rd2-hero--center .rd2-hero__bg,
.rd2-team-hero .rd2-team-hero__bg {
background-attachment: fixed; /* image stays put while the text scrolls */
animation: none;
transform: none; /* kill the scale(1.04) — it overflowed once overflow:visible */
}
/* Text scrolls up with the page, then sticks 50px below the sticky header
while the tall hero scrolls behind it; releases when the hero ends. */
.rd2-hero--center .rd2-hero__inner,
.rd2-team-hero > div:not(.rd2-team-hero__bg) {
position: sticky !important; /* beat the team div's inline position:relative */
top: calc(var(--rd2-header-h, 72px) + 50px);
}
/* Products page — every category banner gets the tall/fixed-image/pinned-title effect */
.rd2-page--products .rd2-product-band { overflow: visible; }
.rd2-page--products .rd2-product-band__bg {
height: clamp(600px, 78vh, 820px);
background-attachment: fixed;
overflow: visible;
}
.rd2-page--products .rd2-product-band__head {
position: sticky;
top: calc(var(--rd2-header-h, 72px) + 50px);
}
/* fish icon above each product banner title */
.rd2-product-band__fish {
display: block;
width: 80px;
height: auto;
margin: 0 auto 14px;
/* the banner photo is dark — render the icon white so it reads */
filter: brightness(0) invert(1);
}
@media (max-width: 820px) {
/* background-attachment:fixed is unreliable on mobile — fall back to scroll + shorter */
.rd2-hero--center, .rd2-team-hero { min-height: clamp(420px, 60vh, 560px) !important; }
.rd2-hero--center .rd2-hero__bg,
.rd2-team-hero .rd2-team-hero__bg { background-attachment: scroll; }
.rd2-page--products .rd2-product-band__bg {
height: clamp(360px, 48vh, 520px); background-attachment: scroll;
}
}
/* Home products — let the cards fill the full width (heading → arrow), symmetric */
.rd2-page--home .rd2-products__grid { justify-content: stretch; }
.rd2-page--home .rd2-products__grid .rd2-product-card { max-width: none; }
/* ═══ Home hero — logo pins like the sub-page heroes, then scrolls away ═══ */
.rd2-hero--brand { overflow: visible; }
.rd2-hero--brand .rd2-hero__video { transform: none; animation: none; }
.rd2-hero--brand .rd2-hero__inner--brand {
min-height: 0; /* content-height so it can pin */
position: sticky;
top: calc(var(--rd2-header-h, 72px) + 50px);
}
/* Pinned hero text releases 120px before the banner ends (keeps a 120px gap) */
.rd2-hero--center .rd2-hero__inner,
.rd2-hero--brand .rd2-hero__inner--brand,
.rd2-team-hero > div:not(.rd2-team-hero__bg),
.rd2-page--products .rd2-product-band__head {
margin-bottom: 120px;
}
/* fish1.svg (80px) above every hero-banner title — about/fleet/factory/values/team */
.rd2-hero--center .rd2-hero__title::before,
.rd2-team-hero h1::before {
content: "" !important;
display: block !important;
width: 80px;
height: 30px;
margin: 0 auto 16px;
background: #fff;
-webkit-mask: url("../media/fish1.svg") center / contain no-repeat;
mask: url("../media/fish1.svg") center / contain no-repeat;
animation: none;
}
/* ═══════════════════════════════════════════════════════════════════════
ISO CERTIFICATES — exact clone of the original dromoni.ge/home ISO block.
Rules copied verbatim from the old theme's app.css, scoped under
.iso-legacy so they can't collide with the rd2 design system.
═══════════════════════════════════════════════════════════════════════ */
.iso-legacy {
position: relative;
padding: clamp(40px, 5vw, 84px) 0;
overflow: hidden;
}
.iso-legacy .iso-inner {
max-width: var(--rd2-max);
margin: 0 auto;
padding: 0 var(--rd2-pad);
}
/* decorative floating shapes (hidden < 1200px, same as original) */
.iso-legacy .tag {
position: absolute; top: 40px; left: 75px; width: 90px; z-index: 2;
animation: iso-float-bob-y 4s linear infinite;
}
@media (max-width: 1399px) { .iso-legacy .tag { width: 70px; } }
@media (max-width: 1199px) { .iso-legacy .tag { display: none; } }
.iso-legacy .dots {
position: absolute; bottom: 60px; left: 40px; z-index: 0;
animation: iso-leftRight-1 4.5s linear 0s infinite alternate;
}
@media (max-width: 1199px) { .iso-legacy .dots { display: none; } }
/* two-column grid (col-xl-5 / col-xl-7) */
.iso-legacy .row {
display: flex; flex-wrap: wrap; align-items: center; margin: 0 -12px;
}
.iso-legacy .col-xl-5 { flex: 0 0 41.666%; max-width: 41.666%; padding: 0 12px; }
.iso-legacy .col-xl-7 { flex: 0 0 58.333%; max-width: 58.333%; padding: 0 12px; }
@media (max-width: 1199px) {
.iso-legacy .col-xl-5, .iso-legacy .col-xl-7 { flex: 0 0 100%; max-width: 100%; }
.iso-legacy .col-xl-5 { margin-bottom: 40px; }
}
/* intro column */
.iso-legacy .team_one__content {
position: relative;
background: url(../media/shapes/paint-shape.png) no-repeat;
background-position: center right;
background-size: contain;
padding-left: 96px;
}
@media (min-width: 1400px) {
.iso-legacy .team_one__content { width: 470px; margin-left: auto; padding-left: 0; }
}
@media (max-width: 992px) {
.iso-legacy .team_one__content { padding-left: 12px; background-position: center left; }
}
.iso-legacy .iso-heading {
display: flex; align-items: center; gap: 16px;
color: #214c7b; margin: 0 0 8px;
font-size: 22px; font-weight: 700;
}
.iso-legacy .iso-heading img { flex-shrink: 0; }
.iso-legacy .intro-text {
text-align: justify; color: #2a322d; line-height: 1.72; margin: 0;
}
/* slider wrapper (carousel viewport + dots) */
.iso-legacy .iso-slider { position: relative; }
/* slider strip holding the cards */
.iso-legacy .team-slider {
border-radius: 15px 0 0 15px;
background: rgba(10, 166, 215, 0.1) url(../media/backgrounds/team-slider-bg.png) no-repeat;
background-size: cover;
background-position: 109px;
padding: 60px 0;
display: flex;
gap: 0;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
cursor: grab;
scrollbar-width: none; /* dots drive navigation — hide the bar */
-ms-overflow-style: none;
}
.iso-legacy .team-slider::-webkit-scrollbar { height: 0; width: 0; display: none; }
.iso-legacy .team-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; }
/* slick-style pagination dots */
.iso-legacy .iso-dots {
display: flex; justify-content: center; align-items: center;
gap: 10px; margin-top: 22px;
}
.iso-legacy .iso-dot {
width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
background: rgba(33, 76, 123, .28); cursor: pointer;
transition: all .3s ease;
}
.iso-legacy .iso-dot:hover { background: rgba(33, 76, 123, .5); }
.iso-legacy .iso-dot.is-active { width: 26px; border-radius: 6px; background: #214c7b; }
/* card — verbatim from the original */
.iso-legacy .team__card {
flex: 0 0 330px;
width: 330px;
height: 444px;
margin: 0 12px;
scroll-snap-align: start;
box-shadow: 2px 1px 5px 0px rgba(2, 69, 122, 0.04), 9px 4px 10px 0px rgba(2, 69, 122, 0.03), 19px 10px 13px 0px rgba(2, 69, 122, 0.02), 35px 17px 15px 0px rgba(2, 69, 122, 0.01), 54px 27px 17px 0px rgba(2, 69, 122, 0);
border-radius: 15px;
}
.iso-legacy .team__img_block { position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: 15px; }
.iso-legacy .team_img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; display: block; }
.iso-legacy .team__content_block {
margin: 16px;
position: absolute;
left: 0; right: 0; bottom: 0;
overflow: hidden;
height: 91px;
transition: all 0.3s cubic-bezier(0.18, 0.55, 1, 1);
box-shadow: 2px 1px 5px 0px rgba(2, 69, 122, 0.04), 9px 4px 10px 0px rgba(2, 69, 122, 0.03), 19px 10px 13px 0px rgba(2, 69, 122, 0.02);
border-radius: 10px;
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(4.5px);
backdrop-filter: blur(4.5px);
align-content: start;
justify-content: center;
text-align: center;
display: grid;
}
.iso-legacy .team__text_block { padding: 16px 8px; overflow: hidden; position: relative; }
.iso-legacy .team__text_block .iso-card-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.iso-legacy .team__text_block .iso-card-title a { color: #2a322d; }
.iso-legacy .team_info_text { padding-top: 8px; color: #2a322d; line-height: 1.55; margin: 0 0 24px; }
.iso-legacy .text_block_bg_shape {
position: absolute; width: 100%; height: 0px; bottom: -100%; right: 0;
border-radius: 0 0 10px 10px;
transition: all 0.4s ease-in-out;
z-index: -1;
}
.iso-legacy .team__card:hover .team__content_block {
bottom: 0px; height: 92%; align-content: center;
}
.iso-legacy .team__card:hover .text_block_bg_shape { bottom: 0%; height: 70px; }
/* touch devices: reveal the scope + button without hover */
@media (hover: none) {
.iso-legacy .team__content_block { height: 92%; align-content: center; }
.iso-legacy .text_block_bg_shape { bottom: 0%; height: 70px; }
}
/* "სრულად" button — verbatim educate-btn */
.iso-legacy .educate-btn {
display: inline-block; vertical-align: middle; border: none; outline: none !important;
background-color: #214c7b; color: #fefcfb;
font-size: 16px; font-weight: 600; border-radius: 5px;
text-transform: capitalize; padding: 12px 24px;
overflow: hidden; width: -webkit-fit-content; width: fit-content;
z-index: 2; position: relative;
transition: all ease 0.3s;
}
.iso-legacy .educate-btn.mx-auto { margin-left: auto; margin-right: auto; }
.iso-legacy .educate-btn .educate-btn__curve {
position: absolute; right: -15px; top: 0; width: 33px; height: 100%;
background: #F6F5F5; opacity: 0.2; z-index: 0;
-webkit-transform: skewX(-22deg); transform: skewX(-22deg);
transition: all 0.5s ease;
}
.iso-legacy .educate-btn:hover { color: #fefcfb; }
.iso-legacy .educate-btn:hover .educate-btn__curve {
right: 0; width: 100%; -webkit-transform: skewX(0deg); transform: skewX(0deg);
}
@media (max-width: 575px) {
.iso-legacy .team__card { flex-basis: 300px; width: 300px; }
}
@keyframes iso-float-bob-y {
0% { transform: translateY(0) translateX(0) rotate(0deg); }
50% { transform: translateY(10px) translateX(10px) rotate(5deg); }
100% { transform: translateY(0) translateX(0) rotate(0deg); }
}
@keyframes iso-leftRight-1 {
0% { transform: translateX(0); }
100% { transform: translateX(80px); }
}
/* ═══ Site-wide body/paragraph text — 16.5px on every page; titles unchanged ═══
Reading copy only. Headings (rd2-h1/h2/h3), eyebrows, buttons and small
image-overlay captions keep their own sizes. */
.rd2-body,
.rd2-lead,
.rd2-hero__sub,
.rd2-flow__cap,
.rd2-feature-panel__body,
.rd2-product-item__text,
.rd2-value-row__body,
.rd2-cert-card__text,
.rd2-vcard p,
.iso-legacy .intro-text,
.iso-legacy .team_info_text,
.rd2-about__text .rd2-body {
font-size: 16.5px;
}
/* "FRESH, FROM SEA TO FACTORY" section title — 2× the normal eyebrow size (factory only) */
.rd2-page--factory .rd2-section-title-block .rd2-eyebrow {
font-size: 23px;
}
/* ─── Vessel photo slider (fleet.php) ───────────────────────────────
Keeps the exact frame of a normal .rd2-feature__media image and
cross-fades stacked photos inside it, like the team hero. */
.rd2-shipslider {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--rd2-radius);
overflow: hidden;
box-shadow: var(--rd2-shadow);
background: #0b2748;
}
.rd2-feature__media .rd2-shipslider img.rd2-shipslider__img {
position: absolute; inset: 0;
width: 100%; height: 100%;
aspect-ratio: auto;
object-fit: cover;
border-radius: 0;
box-shadow: none;
opacity: 0;
transition: opacity .9s ease;
}
.rd2-feature__media .rd2-shipslider img.rd2-shipslider__img.is-active { opacity: 1; }
.rd2-shipslider__scrim {
position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1;
background: linear-gradient(180deg, rgba(2,16,36,0), rgba(2,16,36,.45));
pointer-events: none;
}
.rd2-shipslider__dots {
position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
display: flex; justify-content: center; gap: 8px;
}
.rd2-shipslider__dot {
width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
background: rgba(255,255,255,.45); cursor: pointer;
transition: background .25s ease, transform .25s ease;
}
.rd2-shipslider__dot:hover { background: rgba(255,255,255,.75); }
.rd2-shipslider__dot.is-active { background: #fff; transform: scale(1.3); }
.rd2-shipslider__nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 40px; height: 40px; border: 0; border-radius: 50%;
display: grid; place-items: center;
background: rgba(2,16,36,.42); color: #fff;
font-size: 22px; line-height: 1; cursor: pointer;
opacity: 0; transition: opacity .25s ease, background .25s ease;
}
.rd2-shipslider__nav--prev { left: 12px; }
.rd2-shipslider__nav--next { right: 12px; }
.rd2-shipslider:hover .rd2-shipslider__nav { opacity: 1; }
.rd2-shipslider__nav:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.rd2-shipslider__nav:hover { background: rgba(2,16,36,.72); }
@media (hover: none) { .rd2-shipslider__nav { opacity: .85; } }
@media (max-width: 520px) {
.rd2-shipslider__nav { width: 34px; height: 34px; font-size: 19px; }
}
/* ─── Rich text from the CMS ────────────────────────────────────────
rd_rich() wraps every section body in .rd2-rt and keeps the text class
on that wrapper, so the paragraphs and list items below inherit the
font, colour and alignment the section already had. */
.rd2-rt p { margin: 0 0 14px; }
.rd2-rt ul {
display: inline-block; /* centres itself in centred sections */
text-align: left;
margin: 0 0 14px;
padding-left: 1.25em;
list-style: disc;
}
.rd2-rt li { margin: 0 0 7px; }
.rd2-rt li:last-child { margin-bottom: 0; }
.rd2-rt strong { font-weight: 700; }
/* a stand-alone **bold** line — the lead-in that introduces a list */
.rd2-rt .rd2-rt__lead { font-weight: 700; margin-bottom: 9px; }
.rd2-rt > :first-child { margin-top: 0; }
.rd2-rt > :last-child { margin-bottom: 0; }
/* ─── TASK 22 ───────────────────────────────────────────────────────── */
/* T22-06 · the fleet panel is down to two cards (Efficiency was removed), so
cap the grid — two full-width cards read as a broken three-up otherwise. */
.rd2-feature-panel__grid--2 { max-width: min(var(--rd2-max), 900px); }
/* T22-07 · "the 2nd and 3rd text boxes are misaligned … align the titles and
text." A one-line title reserves the same two lines as a wrapping one, so
every body starts on the same line. The cards keep the grid's default
stretch, so all three stay the same height. */
@media (min-width: 721px) {
.rd2-feature-panel__title { line-height: 1.3; min-height: 2.6em; }
}
/* T22-11 · the products banner title sat *under* its own dark scrim. The
sticky head opens a stacking context, so the title's z-index:1 was trapped
inside it and the .rd2-product-band__bg::after gradient painted over the
whole thing. Lifting the head itself puts the text back in front. */
.rd2-page--products .rd2-product-band__head { z-index: 2; }
/* T22-08 · certificate lightbox — "View full" opens the document over the page
instead of dropping a raw file into a new tab. */
.rd2-noscroll { overflow: hidden; }
.rd2-lightbox { position: fixed; inset: 0; z-index: 200; display: none; }
.rd2-lightbox.is-open { display: block; }
.rd2-lightbox__backdrop {
position: absolute; inset: 0;
background: rgba(2, 16, 36, .82);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.rd2-lightbox__panel {
position: absolute; inset: clamp(12px, 3vw, 40px);
display: flex; flex-direction: column;
background: #fff; border-radius: 14px; overflow: hidden;
box-shadow: 0 40px 90px -30px rgba(2, 16, 36, .7);
}
.rd2-lightbox__bar {
display: flex; align-items: center; gap: 14px;
padding: 12px clamp(12px, 2vw, 20px);
border-bottom: 1px solid rgba(11, 39, 72, .1);
background: var(--rd2-paper);
}
.rd2-lightbox__title {
flex: 1 1 auto; min-width: 0;
font-weight: 700; color: var(--rd2-navy); font-size: 15px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd2-lightbox__open {
flex: 0 0 auto;
font-size: 13px; color: var(--rd2-blue); text-decoration: underline;
}
.rd2-lightbox__close {
flex: 0 0 auto;
width: 34px; height: 34px; border: 0; border-radius: 50%;
background: var(--rd2-navy); color: #fff;
font-size: 22px; line-height: 1; cursor: pointer;
}
.rd2-lightbox__close:hover { background: var(--rd2-blue); }
.rd2-lightbox__stage {
flex: 1 1 auto; min-height: 0;
display: grid; place-items: center;
background: #eef1f5; padding: clamp(8px, 1.6vw, 18px);
}
.rd2-lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rd2-lightbox__stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
/* a certificate card whose scan has not been supplied yet */
.iso-card-soon {
display: inline-block; margin-top: 6px;
font-size: 12.5px; color: #7a8798; font-style: italic;
}
/* The certificates copy ran straight into the ISO artwork: at >=1400px the
intro block is given a fixed width: 470px, which is wider than its own
column's content box, so it spilled 12px to the right and landed exactly on
the slider panel's edge. Cap it instead of fixing it, and keep a real gutter.
Justified text made it worse — every line ended flush against the panel. */
.iso-legacy .team_one__content { padding-right: 28px; }
@media (min-width: 1400px) {
.iso-legacy .team_one__content {
width: auto; max-width: 470px;
margin-left: auto; margin-right: 56px;
padding-right: 0;
}
}
.iso-legacy .intro-text { text-align: left; }
/* ─── Phone stacking order for the alternating image/text rows ─────────
Both layouts alternate side to side on a wide screen. Collapsed to one
column that alternation put two photos (or two text blocks) directly on
top of each other, so on a phone every pair now reads text, then photo. */
/* about.php — the zigzag is driven by `order`, set per pair on the element. */
.rd2-glass-grid__img,
.rd2-glass-grid__text { order: var(--rd-order-m, 0); }
@media (min-width: 721px) {
.rd2-glass-grid__img,
.rd2-glass-grid__text { order: var(--rd-order-d, 0); }
}
/* factory.php opens with a text-then-photo row, so its reversed row has to
stack the same way — otherwise its photo lands right under the previous one.
index.php and fleet.php start with a photo and already alternate cleanly. */
@media (max-width: 820px) {
.rd2-page--factory .rd2-feature--reverse .rd2-feature__media { order: 2; }
}