/* ============================================================
COVALENT BOND — BASE STYLESHEET
Theme A: Black / Gold — Marketing Theme
Used by all public-facing pages
============================================================ */
/* ── GOOGLE FONTS ─────────────────────────────────────────────
Load in HTML :
@import or for Cormorant Garamond, Cinzel, Montserrat
─────────────────────────────────────────────────────────── */
/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
/* Gold palette */
--gold: #C4A35A;
--gold-l: #D9BA7A;
--gold-d: #9a7d42;
--gold-f: rgba(196, 163, 90, 0.07);
/* Black palette */
--black: #060606;
--s0: #0a0a0a;
--s1: #0f0f0f;
--s2: #141414;
--s3: #1a1a1a;
/* Border shades */
--b1: #1e1a12;
--b2: #252015;
--b3: #2e2818;
/* Text — elevated for authority and luxury readability */
--text: #F3EEE7;
--td: #A89880;
--tm: #6B6055;
/* Accent */
--green: #4a8c5c;
--blue: #3a6a9c;
/* Typography */
--font-sans: 'Montserrat', sans-serif;
--font-serif: 'Cinzel', serif;
--font-italic: 'Cormorant Garamond', serif;
}
/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
background: var(--black);
color: var(--text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.7;
}
/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--gold-d); }
/* ── NAVIGATION ────────────────────────────────────────────── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
padding: 0 60px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(6, 6, 6, 0.94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--b1);
transition: all 0.3s;
}
.nav-logo {
font-family: var(--font-serif);
font-size: 14px;
font-weight: 500;
letter-spacing: 4px;
color: var(--gold);
text-decoration: none;
text-transform: uppercase;
flex-shrink: 0;
}
.nav-logo span {
color: var(--td);
font-size: 9px;
font-weight: 300;
letter-spacing: 2px;
display: block;
margin-top: 2px;
}
.nav-links {
display: flex;
align-items: center;
gap: 0;
list-style: none;
}
.nav-links a {
display: block;
padding: 0 14px;
font-size: 9px;
font-weight: 600;
letter-spacing: 2.5px;
color: var(--tm);
text-transform: uppercase;
text-decoration: none;
transition: color 0.2s;
line-height: 64px;
white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--gold);
}
.nav-links .nav-cta {
margin-left: 12px;
background: var(--gold);
color: var(--black) !important;
padding: 0 18px !important;
font-weight: 700;
transition: background 0.2s;
}
.nav-links .nav-cta:hover {
background: var(--gold-l) !important;
}
.nav-ham {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
flex-shrink: 0;
}
.nav-ham span {
display: block;
width: 22px;
height: 1px;
background: var(--td);
margin: 5px 0;
transition: all 0.2s;
}
/* ── LANGUAGE SWITCHER ─────────────────────────────────────── */
.lang-switcher {
display: flex;
align-items: center;
gap: 2px;
margin-left: 16px;
flex-shrink: 0;
}
.lang-switcher a {
font-size: 8px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--tm);
text-decoration: none;
padding: 4px 7px;
border: 1px solid transparent;
transition: all 0.2s;
line-height: 1;
text-transform: uppercase;
cursor: pointer;
}
.lang-switcher a:hover,
.lang-switcher a.active {
color: var(--gold);
border-color: var(--b2);
}
.lang-switcher .lang-sep {
color: var(--b2);
font-size: 10px;
line-height: 1;
pointer-events: none;
}
/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
font-family: var(--font-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: none;
transition: all 0.25s;
white-space: nowrap;
}
.btn-gold {
background: var(--gold);
color: var(--black);
}
.btn-gold:hover {
background: var(--gold-l);
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
color: var(--td);
border: 1px solid rgba(122, 98, 53, 0.35);
}
.btn-outline:hover {
border-color: var(--gold);
color: var(--gold);
transform: translateY(-1px);
}
/* ── WHATSAPP BUTTON VARIANT ───────────────────────────────── */
.btn-wa {
background: #25D366;
color: #fff;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-family: var(--font-sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: none;
transition: background 0.25s, transform 0.25s;
white-space: nowrap;
}
.btn-wa:hover {
background: #20bd5a;
transform: translateY(-1px);
}
.btn-wa svg {
width: 16px;
height: 16px;
fill: #fff;
flex-shrink: 0;
}
/* ── MOBILE STICKY CTA BAR ───────────────────────────────── */
/* Injected by wa-router on pages with data-page-intent.
Both buttons share IDENTICAL structural properties (height,
padding, font, alignment). Only colour differs — WhatsApp green
filled vs gold-outlined Request Briefing — so they read as siblings,
not two different button systems. */
.wa-inquiry-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 80;
display: none; /* visible only on mobile via media query */
align-items: stretch;
gap: 10px;
padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(201, 169, 97, 0.22);
}
/* Shared button shell — identical structure on both halves.
Font scales from 11 px at 320 px viewports up to 13 px at ≥414 px so
the long label ('REQUEST BRIEFING') fits on a single line at every
mobile width without wrapping. */
.wa-inquiry-wa,
.wa-inquiry-form {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 52px;
padding: 0 12px;
box-sizing: border-box;
font-family: 'Inter Tight', 'Montserrat', system-ui, sans-serif;
font-size: clamp(11px, 3.2vw, 13px);
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 0;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@media (min-width: 414px) {
.wa-inquiry-wa,
.wa-inquiry-form { padding: 0 16px; }
}
.wa-inquiry-wa:active,
.wa-inquiry-form:active { transform: scale(0.98); }
/* WhatsApp half — keep canonical green */
.wa-inquiry-wa {
background: #25D366;
color: #FFFFFF;
}
.wa-inquiry-wa:hover { filter: brightness(1.08); }
.wa-inquiry-wa svg {
width: 16px;
height: 16px;
fill: currentColor;
flex-shrink: 0;
}
/* Request Briefing half — brand gold outline */
.wa-inquiry-form {
background: transparent;
color: var(--ivory, var(--text));
border-color: var(--gold);
}
.wa-inquiry-form:hover {
background: var(--gold);
color: var(--ink, var(--black));
}
@media (max-width: 960px) {
.wa-inquiry-bar { display: flex; }
/* Reserve room so page content isn't trapped under the bar */
body.has-inquiry-bar { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
/* ── WHATSAPP FLOATING BUTTON ───────────────────────────────── */
.wa-float {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 300;
width: 50px;
height: 50px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 18px rgba(37, 211, 102, 0.32);
text-decoration: none;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s;
}
.wa-float:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
}
.wa-float svg {
width: 25px;
height: 25px;
fill: #fff;
}
/* ── SECTIONS ──────────────────────────────────────────────── */
.section {
padding: 100px 80px;
position: relative;
}
.section-sm {
padding: 70px 80px;
}
.section-dark {
background: var(--s1);
}
.section-darker {
background: var(--s0);
}
.section-label {
font-size: 8px;
font-weight: 700;
letter-spacing: 6px;
color: var(--gold-d);
text-transform: uppercase;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.section-label::before {
content: '';
width: 24px;
height: 1px;
background: var(--gold-d);
flex-shrink: 0;
}
.section-title {
font-family: var(--font-serif);
font-size: clamp(24px, 3.2vw, 42px);
font-weight: 400;
color: var(--text);
letter-spacing: 1.5px;
margin-bottom: 44px;
line-height: 1.15;
}
.section-subtitle {
font-size: 14px;
font-weight: 300;
color: var(--td);
max-width: 640px;
line-height: 1.95;
letter-spacing: 0.3px;
margin-bottom: 40px;
}
.g-rule {
height: 1px;
background: linear-gradient(90deg, var(--gold-d) 0%, rgba(196, 163, 90, 0.1) 50%, transparent 100%);
}
/* ── PAGE HERO ─────────────────────────────────────────────── */
.page-hero {
background: var(--s0);
border-bottom: 1px solid var(--b1);
padding: 90px 80px 60px;
}
.page-eyebrow {
font-size: 8px;
font-weight: 700;
letter-spacing: 5px;
color: var(--gold-d);
text-transform: uppercase;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.page-eyebrow::before {
content: '';
width: 20px;
height: 1px;
background: var(--gold-d);
flex-shrink: 0;
}
.page-h1 {
font-family: var(--font-serif);
font-size: clamp(28px, 5vw, 56px);
font-weight: 400;
color: var(--text);
letter-spacing: 3px;
line-height: 1.1;
margin-bottom: 16px;
}
.page-sub {
font-size: 13px;
font-weight: 300;
color: var(--td);
max-width: 560px;
line-height: 1.9;
letter-spacing: 0.3px;
}
/* ── UTILITY ───────────────────────────────────────────────── */
.diamond {
width: 5px;
height: 5px;
background: var(--gold);
transform: rotate(45deg);
flex-shrink: 0;
}
.diamond-sm { width: 4px; height: 4px; }
.diamond-lg { width: 7px; height: 7px; }
.card {
background: var(--s1);
border: 1px solid var(--b1);
position: relative;
overflow: hidden;
transition: border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}
.card:hover {
border-color: rgba(138, 112, 64, 0.6);
background: var(--s2);
box-shadow: 0 2px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(196, 163, 90, 0.06);
}
/* Premium project card — image wrapper with cinematic hover */
.proj-card-img-wrap {
position: relative;
overflow: hidden;
}
.proj-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.01);
transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.55s ease;
filter: brightness(0.88) saturate(0.9);
}
.card:hover .proj-card-img {
transform: scale(1.07);
filter: brightness(0.95) saturate(1.0);
}
/* Gold shimmer line on card top */
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-d), transparent);
opacity: 0;
transition: opacity 0.45s ease;
z-index: 2;
}
.card:hover::before {
opacity: 1;
}
/* ── FOOTER ────────────────────────────────────────────────── */
footer {
background: var(--s0);
border-top: 1px solid var(--b1);
}
.footer-main {
padding: 70px 80px;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
}
.footer-brand-name {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 500;
letter-spacing: 5px;
color: var(--gold);
margin-bottom: 6px;
}
.footer-tagline {
font-family: var(--font-italic);
font-size: 12.5px;
font-style: italic;
color: var(--td);
margin-bottom: 18px;
letter-spacing: 0.3px;
}
.footer-desc {
font-size: 11px;
font-weight: 300;
color: var(--tm);
line-height: 1.85;
max-width: 280px;
letter-spacing: 0.2px;
}
.footer-contact {
margin-top: 20px;
font-size: 10px;
font-weight: 300;
color: var(--tm);
line-height: 2;
}
.footer-contact a {
color: var(--td);
text-decoration: none;
transition: color 0.2s;
}
.footer-contact a:hover {
color: var(--gold);
}
.footer-col h4 {
font-size: 8px;
font-weight: 700;
letter-spacing: 3px;
color: var(--gold-d);
text-transform: uppercase;
margin-bottom: 20px;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
padding: 6px 0;
border-bottom: 1px solid rgba(30, 26, 18, 0.4);
}
.footer-col ul li:last-child {
border-bottom: none;
}
.footer-col ul li a {
font-size: 11px;
font-weight: 300;
color: var(--td);
text-decoration: none;
transition: color 0.28s;
letter-spacing: 0.3px;
}
.footer-col ul li a:hover {
color: var(--gold);
}
.footer-bottom {
padding: 22px 80px;
border-top: 1px solid rgba(30, 26, 18, 0.7);
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(4, 4, 4, 0.3);
}
.footer-copy {
font-size: 8.5px;
font-weight: 300;
letter-spacing: 2px;
color: var(--tm);
line-height: 1.7;
}
.footer-social {
display: flex;
gap: 10px;
}
.social-ico {
width: 30px;
height: 30px;
border: 1px solid var(--b1);
background: var(--s0);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: border-color 0.2s;
}
.social-ico:hover {
border-color: var(--gold-d);
}
.social-ico svg {
width: 12px;
height: 12px;
fill: var(--td);
}
/* ── SCROLL REVEAL ─────────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.28s; }
/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 960px) {
nav {
padding: 0 24px;
}
/* Mobile nav: dropdown */
.nav-links {
display: none;
flex-direction: column;
align-items: stretch;
position: absolute;
top: 64px;
left: 0;
right: 0;
background: rgba(6, 6, 6, 0.98);
border-bottom: 1px solid var(--b1);
padding: 8px 0 12px;
z-index: 190;
}
.nav-links.open {
display: flex;
}
.nav-links a {
line-height: 1;
padding: 14px 24px;
}
.nav-links .nav-cta {
margin: 8px 24px 4px;
text-align: center;
justify-content: center;
}
.nav-ham {
display: block;
}
.lang-switcher {
display: none; /* Shown inside mobile nav in Phase 2 */
}
.section,
.section-sm,
.page-hero {
padding: 60px 24px;
}
.footer-main {
grid-template-columns: 1fr;
padding: 48px 24px;
gap: 32px;
}
.footer-bottom {
padding: 16px 24px;
flex-direction: column;
gap: 12px;
text-align: center;
}
.wa-float {
bottom: 20px;
right: 20px;
width: 46px;
height: 46px;
}
.wa-float svg {
width: 23px;
height: 23px;
}
}
/* ── IMAGE PLACEHOLDERS ──────────────────────────────────────
Use when the final image file has not yet been uploaded.
Replace with Batumi skyline
1920 × 1080 px · 16:9
assets/images/hero/batumi-skyline-night.jpg
─────────────────────────────────────────────────────────── */
.img-ph {
position: relative;
width: 100%;
background: var(--s1);
border: 1px solid var(--b2);
border-top: 2px solid var(--b3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
min-height: 160px;
}
.img-ph::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent, transparent 14px,
rgba(196, 163, 90, 0.025) 14px, rgba(196, 163, 90, 0.025) 15px
);
pointer-events: none;
}
.img-ph::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(196, 163, 90, 0.06);
pointer-events: none;
}
.img-ph-icon {
width: 28px;
height: 28px;
fill: none;
stroke: var(--gold-d);
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.45;
position: relative;
z-index: 1;
flex-shrink: 0;
}
.img-ph-label {
font-size: 9px;
font-weight: 600;
letter-spacing: 2.5px;
color: var(--td);
text-transform: uppercase;
text-align: center;
line-height: 1.7;
max-width: 260px;
padding: 0 16px;
position: relative;
z-index: 1;
}
.img-ph-dims {
font-size: 8px;
font-weight: 300;
letter-spacing: 1px;
color: var(--tm);
position: relative;
z-index: 1;
}
.img-ph-path {
font-family: 'Courier New', monospace;
font-size: 8px;
font-weight: 400;
color: rgba(196, 163, 90, 0.35);
background: rgba(196, 163, 90, 0.04);
border: 1px solid var(--b2);
padding: 3px 10px;
letter-spacing: 0.3px;
position: relative;
z-index: 1;
}
/* ── FOOTER CONTACT ITEMS (global) ──────────────────────────
Used in footer across all pages; CSS must live in base.css
─────────────────────────────────────────────────────────── */
.footer-contact-icon {
width: 14px;
height: 14px;
min-width: 14px;
min-height: 14px;
fill: var(--gold-d);
flex-shrink: 0;
margin-top: 3px;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 7px 0;
font-size: 11px;
font-weight: 300;
color: var(--tm);
line-height: 1.6;
}
.footer-contact-item a {
color: var(--td);
text-decoration: none;
transition: color 0.2s;
}
.footer-contact-item a:hover {
color: var(--gold);
}
/* Ensure contact info list items use flex */
.cib ul li {
display: flex;
align-items: flex-start;
gap: 10px;
}
.cib ul li svg {
width: 14px;
height: 14px;
min-width: 14px;
flex-shrink: 0;
margin-top: 3px;
}
/* ── IMAGE PLACEHOLDER — HIDE DEV META ON PRODUCTION ────────
Dimensions, file paths and dev labels are never shown to investors.
Placeholders render as a clean dark block with only the gold SVG icon.
─────────────────────────────────────────────────────────── */
.img-ph-dims,
.img-ph-path,
.img-ph-label,
.ph-dims,
.ph-path,
.ph-label {
display: none !important;
}
/* ── NAV BOOK-CALL BUTTON ────────────────────────────────── */
.nav-book-call {
display: inline-flex;
align-items: center;
padding: 7px 16px;
margin-left: 12px;
background: var(--gold);
color: var(--black);
font-family: var(--font-sans);
font-size: 8px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s;
flex-shrink: 0;
}
.nav-book-call:hover {
background: var(--gold-l);
}
@media (max-width: 960px) {
.nav-book-call {
display: none;
}
}
/* ── LANG SWITCHER (variant used in pages) ───────────────── */
.lang-sw {
display: flex;
align-items: center;
gap: 2px;
flex-shrink: 0;
}
.lang-btn {
font-size: 8px;
font-weight: 700;
letter-spacing: 2px;
color: var(--tm);
text-decoration: none;
padding: 5px 9px;
border: 1px solid transparent;
transition: all 0.2s;
}
a.lang-btn:hover {
color: var(--gold);
border-color: var(--b3);
}
.lang-btn.lang-active {
color: var(--gold);
border-color: var(--b3);
background: var(--b1);
}
@media (max-width: 960px) {
.lang-sw {
margin-left: 8px;
}
}