/* ============================================================ Digination Agency · chrome.css Header, Drawer, Footer, Layout-Shell, Tokens. 1:1 uebernommen aus ueber-uns.html / Web_Desing.html, damit Blog und Beitragsseiten identisch aussehen. ============================================================ */ /* ============================ TOKENS ============================ */ :root{ /* Deep slate-indigo with a faint periwinkle cast, lighter and airier than before */ --navy: #2b2c3d; --navy-2: #24252f; --navy-deep: #1a1b22; --ink: #141520; --ink-2: #1d1e2a; --paper: #ffffff; --paper-soft: #f6f7fa; --line: #e7eaf0; --line-ink: rgba(255,255,255,.08); --text: #141b2c; --text-soft: #888fa1; --text-faint: #aeb4c2; --on-ink: #ffffff; --on-ink-soft: #98a3b8; --accent: #415a77; --accent-2: #5e7896; --whats: #25d366; --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif; --font-serif: "Space Grotesk", system-ui, sans-serif; --r-xl: 3rem; --r-lg: 2rem; --r-md: 1.25rem; --r-sm: .85rem; --r-pill: 999px; --gap: clamp(1rem, 2.4vw, 2.1rem); --gap-v: clamp(1.6rem, 3.4vw, 3.4rem); --pad-x: clamp(1.25rem, 4vw, 5rem); --maxw: 1320px; --ease: cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;margin:0;padding:0} /* overflow-x SADECE kök 'de: kök elementte overflow viewport'a yansır (iç scroll konteyneri OLUŞMAZ), bu yüzden header'ın position:fixed'i viewport'a doğru pinlenir ve yatay taşma yine kesilir. body'de overflow:clip OLMAMALI — "overflow:clip" body'yi fixed alt elementler için containing block yapıp header'ı sayfayla birlikte kaydırıyordu. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ font-family:var(--font-body); background: radial-gradient(120% 80% at 85% -10%, rgba(65,90,119,.14) 0%, transparent 45%), linear-gradient(165deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-deep) 100%); background-attachment:fixed; color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:6px} /* subtle dotted texture on navy, like ja-itc */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:26px 26px;opacity:.6; } /* ============================ HEADER (from Digination index — fonts kept: Space Grotesk + DM Sans) ============================ */ .header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: clamp(0.7rem, 0.4rem + 0.7vw, 1.1rem) var(--gap); pointer-events: none; } .header__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: calc(var(--maxw) + 4rem); margin: 0 auto; padding: 0.55rem 0.85rem 0.55rem 1.1rem; border-radius: 999px; background: rgba(26, 31, 46, 0.62); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); box-shadow: 0 1.5rem 3rem -1.25rem rgba(0,0,0,0.6); animation: slide-down 0.9s 0.4s var(--ease) both; } .logo { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.5rem; } .logo__mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--paper); color: var(--ink); overflow: hidden; } .logo__text { display: inline-flex; flex-direction: column; line-height: 1; color: #ffffff; } .logo__text-main { font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; } .logo__text-sub { font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.34em; opacity: 0.62; margin-top: 0.22rem; } .menu-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(20, 27, 44, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--paper); font-family: var(--font-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; transition: background 0.35s var(--ease), color 0.35s var(--ease); } .menu-btn:hover { background: var(--paper); color: var(--ink); } .menu-btn__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--whats); animation: status-pulse 2.4s var(--ease) infinite; } /* CTA variant (Projekt anfragen) — yeşil noktalı pill */ .menu-btn--cta { font-weight: 600; } /* Icon hamburger button */ .menu-btn--icon { padding: 0.5rem 0.7rem; gap: 0; } .menu-btn__bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; } .menu-btn__bars span { display: block; height: 1.6px; width: 100%; background: currentColor; border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.25s; } /* ============================================================ HEADER, Desktop inline navigation + dropdown (navy glass) ============================================================ */ .nav { display: none; } /* mobilde gizli; >=1024px'te flex */ @media (min-width: 1024px) { .nav { pointer-events: auto; display: inline-flex; align-items: center; gap: clamp(1.1rem, 0.5rem + 1.2vw, 2.1rem); isolation: isolate; } } @media (max-width: 1023px), (pointer: coarse) { .menu-btn { background: rgba(20, 27, 44, 0.85); } .menu-btn__dot { animation: none; } } .nav__item { position: relative; } .nav__link { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); padding: 0.4rem 0; background: none; border: none; cursor: pointer; transition: color 0.35s var(--ease); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0.1rem; width: 100%; height: 1px; background: var(--accent-2); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .nav__item:hover > .nav__link, .nav__item:focus-within > .nav__link, .nav__link[aria-current="page"] { color: #fff; } .nav__item:hover > .nav__link::after, .nav__item:focus-within > .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav__chev { width: 0.5rem; height: 0.5rem; flex-shrink: 0; transition: transform 0.4s var(--ease); opacity: 0.6; } .nav__item:hover > .nav__link .nav__chev, .nav__item:focus-within > .nav__link .nav__chev { transform: rotate(180deg); opacity: 1; } /* Dropdown panel */ .nav__dropdown { position: absolute; top: calc(100% + 0.85rem); left: -0.85rem; min-width: 15rem; padding: 0.55rem; border-radius: 0.9rem; background: rgba(20, 27, 44, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); box-shadow: 0 2rem 4rem -1.25rem rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06); opacity: 0; visibility: hidden; transform: translateY(-0.5rem); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s; z-index: 60; } /* Hover köprüsü, link ile panel arası boşlukta hover kaybolmasın */ .nav__dropdown::before { content: ""; position: absolute; top: -0.85rem; left: 0; right: 0; height: 0.85rem; } .nav__item:hover > .nav__dropdown, .nav__item:focus-within > .nav__dropdown, .nav__item--open > .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__item--open > .nav__link .nav__chev { transform: rotate(180deg); opacity: 1; } .nav__sublink { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.7rem; border-radius: 0.55rem; font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.7); transition: background 0.3s var(--ease), color 0.3s var(--ease), padding-left 0.3s var(--ease); } .nav__sublink::before { content: ""; width: 0.32rem; height: 0.32rem; border-radius: 50%; background: var(--accent-2); opacity: 0; flex-shrink: 0; transform: scale(0.5); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .nav__sublink:hover, .nav__sublink[aria-current="page"] { background: rgba(94, 120, 150, 0.16); color: #fff; padding-left: 0.85rem; } .nav__sublink:hover::before, .nav__sublink[aria-current="page"]::before { opacity: 1; transform: scale(1); } /* Desktop nav görünürken burger butonunu gizle (drawer sadece mobilde); CTA (Projekt anfragen) desktop'ta görünür kalır. */ @media (min-width: 1024px) { .menu-btn--icon { display: none; } } /* Mobil/tablet: inline nav gizli, hamburger görünür; CTA dar ekranda gizli */ @media (max-width: 1023px) { .menu-btn--cta { display: none; } } /* ===== HEADER RIGHT + LANGUAGE SWITCH ===== */ .header__right { display: inline-flex; align-items: center; gap: clamp(0.6rem, 0.4rem + 0.6vw, 1rem); pointer-events: auto; } .lang-switch { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--line-ink); background: rgba(20, 27, 44, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--font-body); animation: slide-down 0.9s 0.82s var(--ease) both; } .lang-switch__btn { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); line-height: 1; padding: 0.1rem 0.05rem; background: none; border: 0; cursor: pointer; transition: color 0.3s var(--ease); } .lang-switch__btn:hover { color: var(--paper); } .lang-switch__btn--active, .lang-switch__btn.is-active { color: var(--accent-2); } .lang-switch__sep { color: rgba(255, 255, 255, 0.25); font-size: 0.72rem; line-height: 1; } html.is-menu-open .lang-switch { opacity: 0; pointer-events: none; transition: opacity 0.3s; } @media (max-width: 480px) { .lang-switch { padding: 0.45rem 0.7rem; gap: 0.35rem; } .lang-switch__btn { font-size: 0.66rem; letter-spacing: 0.1em; } } @keyframes slide-down { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } } @keyframes status-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* ===== DRAWER MENU, sağdan kayan panel, accent stripe ===== */ .drawer-bg { position: fixed; inset: 0; z-index: 90; background: rgba(13, 19, 34, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s; } .drawer-bg--open { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease), visibility 0s linear 0s; } .drawer-stripe { position: fixed; top: 0; bottom: 0; right: min(36rem, 100vw); width: 0.375rem; background: var(--accent-2); z-index: 92; transform: scaleY(0); transform-origin: top; transition: transform 0.55s var(--ease); pointer-events: none; } .drawer-stripe--open { transform: scaleY(1); transition: transform 0.55s var(--ease) 0.15s; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(36rem, 100vw); z-index: 91; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.85s var(--ease); overflow: hidden; } .drawer--open { transform: translateX(0); } .drawer__radial { position: absolute; top: -10%; right: -20%; width: 24rem; height: 24rem; background: radial-gradient(circle, rgba(94, 120, 150, 0.18), transparent 60%); filter: blur(2rem); pointer-events: none; z-index: 0; } .drawer__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; flex-shrink: 0; border-bottom: 1px solid var(--line-ink); } .drawer__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.005em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem; } .drawer__brand-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent-2); display: inline-block; } .drawer__close { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-ink); display: inline-flex; align-items: center; justify-content: center; color: var(--paper); transition: background 0.4s var(--ease), transform 0.5s var(--ease), color 0.4s var(--ease); } .drawer__close:hover { background: var(--accent-2); color: var(--ink); transform: rotate(90deg); } .drawer__nav { position: relative; z-index: 2; flex: 1; min-height: 0; padding: 1.75rem 2rem 1rem; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; } .drawer__nav::-webkit-scrollbar { display: none; } .drawer__num-row { font-family: var(--font-body); font-size: 0.5625rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.32); margin-bottom: 1rem; display: flex; justify-content: space-between; } .drawer__num-row-accent { color: var(--accent-2); } .drawer__item { display: block; position: relative; overflow: hidden; } .drawer__link { display: flex; align-items: baseline; gap: 1rem; padding: 0.875rem 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.015em; text-transform: uppercase; line-height: 1; color: var(--paper); position: relative; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.06); transform: translateY(110%); transition: transform 0.85s var(--ease), color 0.4s var(--ease), padding-left 0.55s var(--ease); } .drawer__link::before { content: ''; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%) scaleX(0); transform-origin: left; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-2); transition: transform 0.5s var(--ease); } .drawer__link:hover { color: var(--accent-2); padding-left: 1.25rem; } .drawer__link:hover::before { transform: translateY(-50%) scaleX(1); } .drawer--open .drawer__link { transform: translateY(0); } .drawer--open .drawer__item:nth-child(2) .drawer__link { transition-delay: 0.25s, 0.25s, 0.25s; } .drawer--open .drawer__item:nth-child(3) .drawer__link { transition-delay: 0.30s, 0.30s, 0.30s; } .drawer--open .drawer__item:nth-child(4) .drawer__link { transition-delay: 0.35s, 0.35s, 0.35s; } .drawer--open .drawer__item:nth-child(5) .drawer__link { transition-delay: 0.40s, 0.40s, 0.40s; } .drawer--open .drawer__item:nth-child(6) .drawer__link { transition-delay: 0.45s, 0.45s, 0.45s; } .drawer--open .drawer__item:nth-child(7) .drawer__link { transition-delay: 0.50s, 0.50s, 0.50s; } .drawer__num { font-family: var(--font-body); font-size: 0.625rem; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.32); align-self: center; margin-left: auto; transition: color 0.4s var(--ease); } .drawer__link:hover .drawer__num { color: var(--accent-2); } .drawer__chev { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.375rem; font-size: 0.3em; color: rgba(255, 255, 255, 0.32); transition: transform 0.4s var(--ease), color 0.35s; font-family: var(--font-body); border: none; background: none; -webkit-appearance: none; appearance: none; padding: 0.6em 0.7em; margin-top: -0.3em; cursor: pointer; line-height: 1; vertical-align: middle; position: relative; z-index: 2; } .drawer__chev:hover { color: var(--accent-2); } .drawer__item--open .drawer__chev { transform: rotate(180deg); color: var(--accent-2); } .drawer__sub { max-height: 0; overflow: hidden; margin-left: 0.5rem; border-left: 1px solid transparent; transition: max-height 0.55s var(--ease), padding 0.35s, border-left-color 0.35s; } .drawer__item--open .drawer__sub { max-height: 18rem; padding: 0.5rem 0 0.75rem 1.25rem; border-left-color: var(--accent-2); } .drawer__sub-link { display: block; font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.5); padding: 0.5rem 0; transition: color 0.35s, padding-left 0.35s; } .drawer__sub-link:hover, .drawer__sub-link[aria-current="page"] { color: var(--accent-2); padding-left: 0.375rem; } .drawer__foot { position: relative; z-index: 2; padding: 1.25rem 2rem 1.75rem; flex-shrink: 0; border-top: 1px solid var(--line-ink); display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; opacity: 0; transform: translateY(0.75rem); transition: opacity 0.55s var(--ease) 0.55s, transform 0.55s var(--ease) 0.55s; } .drawer--open .drawer__foot { opacity: 1; transform: translateY(0); } .drawer__foot-col { display: flex; flex-direction: column; gap: 0.375rem; } .drawer__foot-label { font-family: var(--font-body); font-size: 0.5625rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255, 255, 255, 0.32); } .drawer__foot-val { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--paper); letter-spacing: -0.005em; text-transform: uppercase; } .drawer__foot-val a { transition: color 0.35s; } .drawer__foot-val a:hover { color: var(--accent-2); } .drawer__foot-val-accent { color: var(--accent-2); } .drawer__clock { font-family: var(--font-body); font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--paper); text-transform: none; } .drawer__clock-dim { color: rgba(255, 255, 255, 0.4); } /* ===== DRAWER, küçük yükseklikli mobil ekranlar için kompakt mod ===== */ @media (max-height: 740px), (max-width: 480px) { .drawer__top { padding: 1rem 1.5rem; } .drawer__brand { font-size: 1.2rem; } .drawer__close { width: 2.2rem; height: 2.2rem; } .drawer__nav { padding: 1.1rem 1.5rem 0.6rem; } .drawer__num-row { font-size: 0.5rem; margin-bottom: 0.6rem; } .drawer__link { font-size: clamp(1.55rem, 6.2vw, 2.25rem); padding: 0.55rem 0; letter-spacing: -0.01em; } .drawer__item--open .drawer__sub { max-height: 22rem; padding: 0.35rem 0 0.5rem 1rem; } .drawer__sub-link { font-size: 0.78rem; padding: 0.38rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drawer__foot { grid-template-columns: 1fr 1fr; gap: 0.7rem 1.25rem; padding: 0.9rem 1.5rem 1.1rem; } .drawer__foot-label { font-size: 0.5rem; letter-spacing: 0.22em; } .drawer__foot-val { font-size: 0.85rem; } .drawer__clock { font-size: 0.7rem; } } @media (max-height: 600px) { .drawer__foot { gap: 0.4rem 1rem; padding: 0.6rem 1.25rem 0.75rem; } .drawer__foot-val { font-size: 0.78rem; } .drawer__link { font-size: 1.45rem; padding: 0.4rem 0; } .drawer__nav { padding: 0.85rem 1.5rem 0.4rem; } } /* Hide header logo + menu button while drawer open (clean focus) */ html.is-menu-open .logo, html.is-menu-open .menu-btn { opacity: 0; pointer-events: none; transition: opacity 0.3s; } html.is-menu-open { overflow: hidden; } /* ============================ LAYOUT SHELL ============================ */ .shell{position:relative;z-index:1} .panel{ background:var(--paper); border-radius:var(--r-xl); margin:0 var(--gap); position:relative; overflow:hidden; z-index:2; will-change:transform; } /* overlay layer transition: each panel slides up over the previous one, no gap between */ .panel + .panel{margin-top:calc(var(--gap-v) * -1)} .tech + .panel{margin-top:calc(var(--gap-v) * -1)} .hero + .panel{margin-top:calc(var(--gap-v) * -1)} .hero + .panel .panel-pad{padding-top:clamp(3.75rem,8vw,7.5rem)} /* soft shadow on the top edge of each layered panel, like the logistik look */ .panel__shadow{position:absolute;top:0;left:0;right:0;height:5rem;z-index:6;pointer-events:none;border-radius:inherit; background:linear-gradient(to bottom, rgba(20,23,38,.16), transparent);opacity:.8} /* keep the existing sweep overlay */ .panel::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit; background:linear-gradient(180deg, rgba(26,24,31,.45) 0%, rgba(26,24,31,.10) 30%, transparent 60%); opacity:1;transition:opacity 1s var(--ease)} .panel.in::after{opacity:0} .panel-pad{padding:clamp(2.5rem,6vw,6rem) clamp(1.5rem,5vw,5.5rem)} .inner{max-width:var(--maxw);margin:0 auto;width:100%} /* eyebrow */ .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:.82rem;font-weight:600;letter-spacing:.04em;color:#52607a; margin-bottom:1.6rem; } .eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)} .eyebrow.on-ink{color:var(--on-ink-soft)} /* big section heading: black line + grey line */ .h-stack{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.02em; font-size:clamp(1.8rem,3.6vw,2.9rem)} .h-stack .l1{color:var(--ink);display:block} .h-stack .l2{color:#9aa3b3;display:block} .lead{color:#6c7689;font-size:clamp(1rem,1.4vw,1.18rem);max-width:46ch;margin-top:1.4rem} /* ============================ FOOTER (video stage, from Digination site) ============================ */ .dg-footer-video-stage{position:relative;width:100%;height:100vh;background:#000;overflow:hidden;z-index:4;border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:var(--gap)} .dg-footer-video-stage__sticky{position:relative;width:100%;height:100%;overflow:hidden;background:#000} .dg-footer-video-stage__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:#000} .dg-footer-video-stage__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.20) 30%,rgba(0,0,0,.30) 65%,rgba(0,0,0,.85) 100%);z-index:2} .dg-footer-video-stage__overlay{position:relative;z-index:3;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.5rem,3vh,2.5rem) clamp(1.5rem,4vw,3rem) clamp(2rem,4vh,3rem);color:#eee8de;font-family:var(--font-body)} .dg-footer-video-stage__top{display:flex;justify-content:flex-end;align-items:flex-start;gap:2rem} .dg-footer-video-stage__loc{font-family:var(--font-body);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(238,232,222,.65);text-align:right} .dg-footer-video-stage__loc .dot{display:inline-block;width:.375rem;height:.375rem;border-radius:50%;background:var(--whats);margin-right:.4rem;vertical-align:.05em;animation:dg-footer-blink 1.4s ease-in-out infinite} @keyframes dg-footer-blink{0%,100%{opacity:1}50%{opacity:.35}} .dg-footer-video-stage__center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.75rem,1.5vh,1.25rem);text-align:center;flex:1;min-height:0} .dg-footer-video-stage__headline{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,5vw,4.4rem);line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin:0} .dg-footer-video-stage__sub{font-family:var(--font-body);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(238,232,222,.7)} .dg-footer-video-stage__email{display:inline-block;margin-top:.5rem;font-family:var(--font-display);font-size:clamp(1rem,1.5vw,1.4rem);font-weight:600;color:#eee8de;border-bottom:1px solid rgba(238,232,222,.5);padding-bottom:.15rem;transition:border-color .3s ease,color .3s ease} .dg-footer-video-stage__email:hover{border-color:#eee8de} .dg-footer-video-stage__bottom-block{display:flex;flex-direction:column;gap:clamp(1rem,2.5vh,1.75rem)} .dg-footer-video-stage__cols{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:clamp(1rem,2.5vw,2.5rem);padding-top:clamp(.75rem,1.5vh,1.25rem);border-top:1px solid rgba(238,232,222,.18)} .dg-footer-video-stage__col-title{font-family:var(--font-body);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(238,232,222,.5);margin:0 0 .65rem 0;font-weight:600} .dg-footer-video-stage__col p,.dg-footer-video-stage__col ul{margin:0;padding:0;list-style:none;font-size:.82rem;line-height:1.55;color:rgba(238,232,222,.85)} .dg-footer-video-stage__col li{display:block} .dg-footer-video-stage__col a{color:inherit;transition:color .3s ease,opacity .3s ease;display:inline-block} .dg-footer-video-stage__col a:hover{color:#eee8de;opacity:1} .dg-footer-video-stage__legal{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-family:var(--font-body);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(238,232,222,.5);padding-top:clamp(.5rem,1vh,.75rem);border-top:1px solid rgba(238,232,222,.12)} .dg-footer-video-stage__legal-links{display:flex;gap:1.5rem;flex-wrap:wrap} .dg-footer-video-stage__legal-links a{color:inherit;transition:color .3s ease} .dg-footer-video-stage__legal-links a:hover{color:#eee8de} .dg-footer-video-stage__time{display:inline-flex;align-items:center;gap:.5rem} .dg-footer-video-stage__time::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--whats)} .dg-footer-video-stage__progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(238,232,222,.08);z-index:4;overflow:hidden} .dg-footer-video-stage__progress-bar{position:absolute;inset:0 auto 0 0;width:0%;background:rgba(238,232,222,.92);transition:width .05s linear} @media(max-width:900px){ .dg-footer-video-stage{height:100svh} .dg-footer-video-stage__overlay{padding:1.25rem 1rem 1.5rem} .dg-footer-video-stage__top{flex-direction:row;gap:1rem;align-items:flex-start} .dg-footer-video-stage__loc{font-size:.55rem;letter-spacing:.14em} .dg-footer-video-stage__headline{font-size:clamp(1.8rem,9vw,2.7rem)} .dg-footer-video-stage__email{font-size:.95rem} .dg-footer-video-stage__cols{grid-template-columns:1fr 1fr;gap:1rem 1.25rem} .dg-footer-video-stage__col:nth-child(3){grid-column:1 / -1} .dg-footer-video-stage__col-title{font-size:.55rem} .dg-footer-video-stage__col p,.dg-footer-video-stage__col ul{font-size:.74rem;line-height:1.45} .dg-footer-video-stage__legal{font-size:.55rem;gap:.6rem} .dg-footer-video-stage__legal-links{gap:.9rem} } @media(max-width:540px){ .dg-footer-video-stage__cols{grid-template-columns:1fr} .dg-footer-video-stage__col:nth-child(3){grid-column:1} } /* ============================ WHATSAPP FAB ============================ */ .wa{position:fixed;right:1.375rem;bottom:1.375rem;z-index:90;width:3.875rem;height:3.875rem;border-radius:50%;background:var(--whats);display:grid;place-items:center;box-shadow:0 0.75rem 1.875rem rgba(37,211,102,.45);transition:transform .3s var(--ease)} .wa:hover{transform:scale(1.08)} .totop{position:fixed;right:1.875rem;bottom:6rem;z-index:80;width:2.875rem;height:2.875rem;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:#3a4660;cursor:pointer;opacity:0;transform:translateY(0.625rem);transition:opacity .3s,transform .3s;box-shadow:0 0.5rem 1.375rem rgba(14,23,38,.18)} .totop.show{opacity:1;transform:translateY(0)} /* ============================ REVEAL ============================ */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} /* ===== GSAP enhanced motion (JS adds .gsap-on to ; no color changes) ===== */ .gsap-on .reveal{opacity:1;transform:none;transition:none} /* split heading lines: clip-reveal */ .gsap-on .h-stack .l1,.gsap-on .h-stack .l2{display:block;will-change:transform} .gsap-on .feat-head__title,.gsap-on .feat-head__sub,.gsap-on .feat-head__kicker{will-change:transform,opacity} /* cards start hidden, GSAP batch reveals them with overlay-style rise */ .gsap-on [data-rise]{opacity:0;transform:translateY(40px) scale(.985);will-change:transform,opacity} .gsap-on [data-rise].is-risen{opacity:1;transform:none} /* eyebrow + lead prep */ .gsap-on .eyebrow,.gsap-on .lead{will-change:transform,opacity} /* ============================ RESPONSIVE (Chrome) ============================ */ @media(max-width:860px){ .lang-switch{display:none} .menu-btn--cta{display:none} .logo__text-main{font-size:.78rem} .panel-pad{padding:2.6rem 1.4rem} } @media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;scroll-behavior:auto} .reveal{opacity:1;transform:none} }