/* ============================================================
CamSet.ge — Global Stylesheet
Shared across all pages
============================================================ */
/* ---- Page transitions ---- */
/* Chrome 126+: MPA cross-document View Transition */
@view-transition {
navigation: auto;
}
/* ── Tilt reveal (Awwwards) ──────────────────────────────── */
/* Content tilts in perspective — nav/ticker excluded below */
::view-transition-old(root) {
animation: 360ms cubic-bezier(0.4, 0, 1, 1) both vt-tilt-out;
transform-origin: 50% 100%;
}
::view-transition-new(root) {
animation: 520ms cubic-bezier(0.16, 1, 0.3, 1) both vt-tilt-in;
transform-origin: 50% 0%;
}
@keyframes vt-tilt-out {
to {
opacity: 0;
transform: perspective(900px) rotateX(6deg) scale(0.96);
}
}
@keyframes vt-tilt-in {
from {
opacity: 0;
transform: perspective(900px) rotateX(-5deg) scale(1.02);
}
}
/* ── Nav — completely static across transitions ─────────── */
#siteNav {
view-transition-name: site-nav;
}
::view-transition-old(site-nav) {
animation: 100ms ease both vt-nav-out;
mix-blend-mode: normal;
}
::view-transition-new(site-nav) {
animation: 100ms ease both vt-nav-in;
mix-blend-mode: normal;
}
@keyframes vt-nav-out { to { opacity: 0; } }
@keyframes vt-nav-in { from { opacity: 0; } }
/* Ticker also fixed — keep it static */
.ticker {
view-transition-name: site-ticker;
}
::view-transition-old(site-ticker) {
animation: 100ms ease both vt-nav-out;
mix-blend-mode: normal;
}
::view-transition-new(site-ticker) {
animation: 100ms ease both vt-nav-in;
mix-blend-mode: normal;
}
/* ── Nav pill slides between active items ───────────────── */
.nav-pill {
position: absolute;
border-radius: 100px;
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.10);
pointer-events: none;
view-transition-name: nav-pill;
contain: layout;
transition: left 0.25s cubic-bezier(0.4,0,0.2,1),
top 0.25s cubic-bezier(0.4,0,0.2,1),
width 0.25s cubic-bezier(0.4,0,0.2,1),
height 0.25s cubic-bezier(0.4,0,0.2,1),
opacity 0.2s ease;
}
body.hero-white .nav-pill {
background: rgba(0,20,60,0.06);
border-color: rgba(0,20,60,0.08);
}
::view-transition-group(nav-pill) {
animation-duration: 380ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(nav-pill) { animation: 120ms ease both vt-pill-out; }
::view-transition-new(nav-pill) { animation: 260ms ease both vt-pill-in; }
@keyframes vt-pill-out { to { opacity: 0; } }
@keyframes vt-pill-in { from { opacity: 0; } }
/* ── Camera card → hero image morph ────────────────────── */
::view-transition-group(hero-cam) {
animation-duration: 500ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(hero-cam),
::view-transition-new(hero-cam) {
animation-duration: 500ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
height: 100%;
object-fit: contain;
}
/* ── Fallback: non-VT browsers — opacity only ───────────── */
/* No transform on body to avoid breaking position:fixed nav */
body.pg-out {
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
body.pg-in {
opacity: 0; transition: none;
}
body.pg-in-run {
opacity: 1;
transition: opacity 0.32s ease;
}
:root {
--navy: #1a2f5a;
--navy-light: #243d73;
--navy-dark: #0f1e3d;
--navy-deepest: #0a1428;
--accent: #2d6be4;
--accent-light: #4a84f5;
--accent-soft: #7aa7ff;
--white: #ffffff;
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-800: #1e293b;
--text: #1e293b;
--green: #22c55e;
--radius: 14px;
--radius-lg: 20px;
--shadow: 0 4px 24px rgba(26,47,90,0.10);
--shadow-lg: 0 20px 56px rgba(26,47,90,0.16);
--maxw: 1240px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Lenis smooth scroll — prevents conflict with programmatic scrollTo() calls */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
font-family: 'Noto Sans Georgian', 'Inter', sans-serif;
color: var(--text);
background: var(--white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
/* ============================================================
PLACEHOLDER SLOTS (replace these with your own assets)
============================================================ */
/* IMAGE placeholder — swap the whole element for 
*/
.media-ph {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background:
repeating-linear-gradient(45deg, rgba(45,107,228,0.04) 0 12px, transparent 12px 24px),
var(--gray-100);
border: 2px dashed var(--gray-300);
border-radius: var(--radius);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--gray-400);
font-size: 13px;
font-weight: 600;
text-align: center;
overflow: hidden;
}
.media-ph svg { opacity: 0.5; }
.media-ph small { font-size: 11px; font-weight: 500; color: var(--gray-400); }
/* ICON slot — keeps a default SVG, swap the inner