/* ================================================ ATAHAN İNŞAAT — Cinematic Industrial Redesign v2 Palette derived from new logo: gold / cream / ink ================================================ */ :root{ /* Base — warm cream paper */ --paper: #F4EFE3; --paper-2: #EAE3D1; --paper-3: #DCD2B7; --ink: #14110C; --ink-2: #2A241B; --line: rgba(20,17,12,.14); --line-strong: rgba(20,17,12,.32); --mute: #6E6354; /* Gold from logo. Tokens picked for WCAG AA contrast on the two dominant light backgrounds (cream #f4efe3 and parchment #eae3d1): --gold on cream ≈ 3.5:1 (AA large 3:1 pass) --gold-lo on parch ≈ 5.3:1 (AA small 4.5:1 pass) --gold-hi stays bright; it's reserved for dark backgrounds where contrast is already high. */ --gold: #A07832; --gold-hi: #D4A856; --gold-lo: #785615; --gold-soft: #E5C98A; /* Dark sections */ --night: #14110C; --night-2: #1E1A12; --night-line: rgba(229,201,138,.12); --f-display: 'Archivo', 'Inter', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; --f-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --f-script: 'Marcellus', 'Cormorant Garamond', serif; --f-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --gutter: clamp(20px, 4vw, 64px); --easeOut: cubic-bezier(.16,1,.3,1); --spring: cubic-bezier(.34,1.56,.64,1); } *{box-sizing:border-box; margin:0; padding:0} html,body{background:var(--paper); color:var(--ink); font-family:var(--f-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} /* default is inline — this breaks any CSS rule that targets the inner with width/height/object-fit (gallery cards, hero portraits, service .ser-img, etc.). `display: contents` removes from the render tree so the behaves exactly as if there were no wrapper. Supported in Chrome 65+, Firefox 37+, Safari 11.1+ — fine for modern site. */ picture { display: contents; } html{ overflow-x:clip } /* Anchor jumps still want smooth scroll. Wheel/trackpad input doesn't — `scroll-behavior: smooth` on made wheel scrolling feel buttery in Chrome but added a perceived "drag" on lower-end Windows hardware where the user reported it. Apply it only when the user actually clicks an in-page anchor; remove again on any other scroll input. */ html:focus-within{ scroll-behavior: smooth } /* body must NOT have overflow-x:hidden — it creates an overflow context that breaks position:sticky descendants. Using overflow-x:clip on html instead prevents horizontal scrollbars without creating that scroll-context. See: https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning */ img{display:block; max-width:100%} a{color:inherit; text-decoration:none} button{font:inherit; cursor:pointer; border:0; background:none; color:inherit} ::selection{background:var(--gold); color:var(--paper)} /* ===== I18N: dual-language (separate files) ===== */ /* TR served at /, EN at /en/ — see lang-link styling below */ /* ===== MARKET TICKER (homepage only) — pinned to very top ===== */ .market-ticker{ position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 95; /* above nav */ background: linear-gradient(180deg, rgba(8,6,4,.96), rgba(8,6,4,.94)); /* Lowered from blur(10) saturate(140) — full-strength backdrop-filter on a top-fixed bar that's always visible means the compositor re-rasterises a strip the full viewport width every frame on scroll. 6px / 120% still reads as glass, costs roughly half the paint. */ backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); /* Promote to its own compositor layer + contain paint so scrolling the body never invalidates this strip. Cuts scroll-jank on integrated GPUs and HiDPI displays. */ transform: translateZ(0); contain: layout style paint; border-bottom: 1px solid rgba(229,201,138,.18); overflow: hidden; display: flex; align-items: center; color: var(--paper); } /* Push nav DOWN by ticker height (only on homepage with .has-ticker) */ body.has-ticker .nav{ top: 38px } .market-ticker .mt-label{ flex-shrink: 0; padding: 0 18px; height: 100%; display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--gold-hi); background: linear-gradient(90deg, rgba(212,168,86,.18), rgba(212,168,86,.04)); border-right: 1px solid rgba(229,201,138,.18); position: relative; z-index: 2; white-space: nowrap; } .market-ticker .mt-label::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 8px rgba(229,201,138,.6); animation: mt-pulse 2s infinite; } @keyframes mt-pulse{ 0%, 100%{ opacity: 1 } 50%{ opacity: .5 } } .market-ticker .mt-fade{ position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none; z-index: 2; } .market-ticker .mt-fade.left{ left: 188px; background: linear-gradient(90deg, rgba(8,6,4,.95), transparent) } .market-ticker .mt-fade.right{ right: 0; background: linear-gradient(270deg, rgba(8,6,4,.95), transparent) } .market-ticker .mt-viewport{ flex: 1; height: 100%; overflow: hidden; display: flex; align-items: center; position: relative; } .market-ticker .mt-track{ display: flex; align-items: center; gap: 0; animation: mt-marquee 90s linear infinite; white-space: nowrap; height: 100%; will-change: transform; } .market-ticker:hover .mt-track{ animation-play-state: paused } @keyframes mt-marquee{ from { transform: translateX(0) } to { transform: translateX(-50%) } } .market-ticker .mt-item{ display: inline-flex; align-items: center; gap: 14px; padding: 0 32px 0 36px; font-size: 12px; /* Stronger divider + gold accent dot before each item. Previously a faint .10-opacity border let items run together into one continuous string — the visual hierarchy collapsed and the bar lost its "Bloomberg-style" feel. Dot picks up the gold pulse that already exists on the .mt-label. */ border-right: 1px solid rgba(229,201,138,.32); height: 100%; position: relative; } /* Decorative vertical hairline at the left edge of every item — together with the right-border, items now sit between two parallel gold strokes, restoring the "trading board column" look. */ .market-ticker .mt-item::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: linear-gradient(180deg, transparent, rgba(229,201,138,.55) 30%, rgba(229,201,138,.55) 70%, transparent); } .market-ticker .mt-item:first-child::before{ display: none } .market-ticker .mt-item:first-child{ padding-left: 24px } /* Diamond accent on the name acts like a quote bullet — makes each pair instantly read as "NAME · value" instead of running into the previous item. */ .market-ticker .mt-item .name::before{ content: "◆"; color: var(--gold-hi); font-size: 6px; margin-right: 8px; vertical-align: middle; opacity: .85; } .market-ticker .mt-item .name{ font-family: var(--f-display); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(229,201,138,.95); font-size: 10px; } .market-ticker .mt-item .val{ font-family: var(--f-display); font-weight: 800; font-size: 14px; letter-spacing: -.01em; color: #FFF7E5; font-variant-numeric: tabular-nums; } .market-ticker .mt-item .chg{ font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 3px; } .market-ticker .mt-item .chg.up{ color: #D6C57A } .market-ticker .mt-item .chg.down{ color: #E0876A } .market-ticker .mt-item .chg::before{ font-size: 10px; margin-right: 1px; } .market-ticker .mt-item .chg.up::before{ content: "▲" } .market-ticker .mt-item .chg.down::before{ content: "▼" } .market-ticker .mt-item .chg.flat{ color: rgba(244,239,227,.5) } .market-ticker .mt-item .chg.flat::before{ content: "—" } .market-ticker .mt-item .src{ font-family: var(--f-serif); font-style: italic; font-size: 10.5px; color: rgba(229,201,138,.55); letter-spacing: .02em; } /* Mobile */ @media (max-width: 700px){ .market-ticker{ height: 34px } body.has-ticker .nav{ top: 34px } .market-ticker .mt-label{ padding: 0 12px; font-size: 9px; letter-spacing: .22em } .market-ticker .mt-label span{ display: none } .market-ticker .mt-fade.left{ left: 60px; width: 40px } .market-ticker .mt-item{ padding: 0 18px; gap: 8px } .market-ticker .mt-item .name{ font-size: 9.5px; letter-spacing: .08em } .market-ticker .mt-item .val{ font-size: 12px } .market-ticker .mt-item .chg{ font-size: 10px } .market-ticker .mt-item .src{ display: none } } /* Hero needs space for ticker on homepage only — ticker(38) + nav (~96-130 depending) */ body.has-ticker .hero-frame{ top: clamp(200px, 24vh, 270px) } body.has-ticker .hero h1{ font-size: clamp(30px, 5.4vw, 88px); line-height: 1.0 } /* Boot loader respects ticker too — push down so logo doesn't overlap */ body.has-ticker .boot{ top: 0 } /* boot covers everything */ /* Reduced motion — comprehensive: disable showy animations, keep state changes */ @media (prefers-reduced-motion: reduce){ /* Disable all CSS animation by default; opt-in below if we want subtle ones */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Specific defenses for the showpiece bits */ .market-ticker .mt-track, .market-ticker .mt-label::before, .clients-track, .boot .boot-fill { animation: none !important; } /* Reveal animations: make content immediately visible instead of fading in */ .reveal, .reveal.is-in, .line-reveal, .line-reveal span, .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { opacity: 1 !important; transform: none !important; } /* Custom cursor: hide entirely (would feel jarring without smoothing) */ #cursor { display: none !important; } /* Boot loader: skip the visual sequence */ .boot { opacity: 0; visibility: hidden; pointer-events: none; } } /* Lang switch links */ .lang{display:flex; gap:8px; font-weight:600; align-items:center} .lang .lang-link{ font-size:12px; letter-spacing:.08em; font-weight:600; padding:4px 2px; transition: color .25s, opacity .25s; opacity:.55; } .lang .lang-link.active{ color: var(--gold); opacity: 1; pointer-events: none } .lang .lang-link:hover{ opacity: 1 } .lang .sep{ opacity:.35 } /* ===== BOOT / INTRO LOADER ===== Hidden by default (was costing 1.5s LCP). To re-enable, override `.boot { display: grid }` in a custom stylesheet or remove this rule. */ .boot{ display: none } .boot.boot--enable{ position:fixed; inset:0; z-index:9999; background: var(--night); display:grid; place-items:center; transition: opacity .9s var(--easeOut), visibility 0s linear .9s; } .boot.boot--enable.done{ opacity:0; visibility:hidden; pointer-events:none } .boot-inner{display:flex; flex-direction:column; gap:28px; align-items:center; padding: 24px} .boot-logo{ height: clamp(56px, 8vw, 96px); width:auto; opacity:0; transform: translateY(8px) scale(.985); animation: boot-logo 1s var(--easeOut) .15s forwards; } @keyframes boot-logo{ to{ opacity:1; transform: none } } .boot-bar{ width: clamp(160px, 22vw, 280px); height:1px; background: rgba(255,247,229,.12); position:relative; overflow:hidden; } .boot-fill{ position:absolute; left:0; top:0; height:100%; width:0; background: var(--gold-hi); animation: boot-fill 1.2s var(--easeOut) .3s forwards; } @keyframes boot-fill{ to{ width:100% } } .boot-tag{ font-size:11px; letter-spacing:.4em; text-transform:uppercase; color: rgba(255,247,229,.55); font-weight:600; opacity:0; animation: boot-tag .6s var(--easeOut) .8s forwards; } .boot-tag em{ font-family:var(--f-serif); font-style:italic; color: var(--gold-hi); font-weight:500; letter-spacing:0 } @keyframes boot-tag{ to{ opacity:1 } } @media (prefers-reduced-motion: reduce){ .boot, .boot-logo, .boot-fill, .boot-tag{ animation: none !important; transition: none !important } .boot{ display:none } } /* 3px (was 2px) so it's actually visible on retina + reads as intentional. */ .scroll-prog{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200; background: transparent; pointer-events:none; } .scroll-prog .bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--gold-lo) 0%, var(--gold) 50%, var(--gold-hi) 100%); box-shadow: 0 0 14px rgba(212,168,86,.55); transition: width .08s linear; } /* ===== NOISE ===== */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:1; background-image: url("data:image/svg+xml;utf8,"); opacity:.55; mix-blend-mode:multiply; } /* ===== TYPOGRAPHY UTILITIES ===== */ /* Eyebrow: smaller, more confident sparse spacing (Faz 2 Tier A — tipografi karakter). Was: 12px / .32em / 600. Now: 11px / .42em / 700 → reads as engraved cap-label. */ .eyebrow{font-size:11px; letter-spacing:.42em; text-transform:uppercase; font-weight:700; display:inline-flex; align-items:center; gap:14px; color:var(--gold-lo)} .eyebrow::before{content:""; width:32px; height:1px; background:var(--gold)} .dark .eyebrow{color:var(--gold-hi)} .dark .eyebrow::before{background:var(--gold-hi)} .h-display{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; text-transform:uppercase; line-height:.92; } .h-italic{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold); text-transform:none; letter-spacing:0; } /* ===== NAV ===== */ .nav{ position:fixed; inset:0 0 auto 0; z-index:90; padding: 18px var(--gutter); display:flex; align-items:center; justify-content:space-between; transition: background .5s var(--easeOut), padding .5s var(--easeOut), border-color .5s var(--easeOut), color .5s var(--easeOut); border-bottom:1px solid transparent; /* Own compositor layer so the backdrop-filter doesn't re-rasterise on every scroll frame. transform:translateZ(0) is the cross-browser hint. */ transform: translateZ(0); contain: layout style; } .nav.dark-tint{ color:#FFF7E5 } .nav.scrolled{ padding: 12px var(--gutter); background: rgba(244,239,227,.92); /* blur 14→8: scrolled nav is always visible while scrolling; halving the blur radius cuts compositor cost substantially on lower-end GPUs. */ backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border-color: rgba(20,17,12,.08); color: var(--ink) !important; } .nav .brand{display:flex; align-items:center; gap:12px} .nav .brand{position:relative} .nav .brand img{height:96px; width:auto; display:block; filter: drop-shadow(0 2px 14px rgba(0,0,0,.45))} /* Transitions applied AFTER initial paint (via .nav-init body class added by app.js) to avoid Lighthouse-flagged 1100ms element render delay on first paint. */ body.nav-init .nav .brand img{ transition: height .4s var(--easeOut), opacity .4s var(--easeOut) } .nav.scrolled .brand img{height:72px; filter:none} .nav .brand .lg-light{position:absolute; left:0; top:0; opacity:1} .nav .brand .lg-dark{opacity:0} .nav.scrolled .brand .lg-light{opacity:0} .nav.scrolled .brand .lg-dark{opacity:1; position:relative} .nav:not(.dark-tint):not(.scrolled) .brand .lg-light{opacity:0} .nav:not(.dark-tint):not(.scrolled) .brand .lg-dark{opacity:1; position:relative} .nav ul{display:flex; gap:34px; list-style:none} .nav ul a{font-size:13px; letter-spacing:.04em; font-weight:500; position:relative; padding:6px 0; transition: color .3s} .nav ul a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--easeOut)} .nav ul a:hover::after{transform:scaleX(1)} .nav-right{display:flex; align-items:center; gap:22px; font-size:12px; letter-spacing:.08em} .lang{display:flex; gap:8px; font-weight:600} .lang b{color:var(--gold)} .menu-btn{display:none} @media (max-width: 980px){ .nav ul{display:none} .menu-btn{display:flex; flex-direction:column; gap:5px} .menu-btn span{width:24px; height:1.5px; background:currentColor} .nav .brand img{height:72px} } @media (max-width: 480px){ .nav .brand img{height:62px} } /* ===== HERO SLIDER ===== */ .hero{ position:relative; height:100vh; min-height:760px; overflow:hidden; color:#FFF7E5; background:#0A0805; } .hero-slide{ position:absolute; inset:0; opacity:0; transition: opacity 1.4s var(--easeOut); } .hero-slide.active{opacity:1; z-index:2} /* wrapper. With display:contents (global rule), the inner is the visible element and inherits no positioning from the wrapper. */ .hero-pic{ display:contents } .hero-slide .img{ position:absolute; inset:-6%; width: 112%; height: 112%; /* match inset:-6% across full slide */ object-fit: cover; object-position: center 65%; filter:brightness(.85) contrast(1.06) saturate(1.05); transform: scale(1); transition: transform 8s linear; pointer-events: none; user-select: none; } .hero-slide.active .img{ transform: scale(1.12) } .hero-slide::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,8,5,.7) 0%, rgba(10,8,5,.45) 90px, rgba(10,8,5,.15) 180px, rgba(10,8,5,.08) 30%, rgba(10,8,5,.78) 100%), radial-gradient(ellipse at 75% 25%, rgba(181,136,64,.18), transparent 60%), linear-gradient(90deg, rgba(10,8,5,.45), transparent 50%); pointer-events:none; } .hero-frame{ position:absolute; left:0; right:0; top: clamp(130px, 14vh, 180px); bottom: clamp(70px, 9vh, 130px); padding: 0 var(--gutter); z-index:3; display:flex; flex-direction:column; /* justify-content: flex-start so the eyebrow always sits at the top of the hero-frame (a stable coordinate across slides — user wanted a fixed pos). h1 + hero-bottom get pushed down via auto-margin so the visual sits the same as the old flex-end layout. */ justify-content:flex-start; gap: 18px; } .hero-frame > h1{ margin-top: auto } .hero-frame > .eyebrow{ margin-bottom: 6px } /* User reported the eyebrow visually "merging" with the nav logo even though they're 170+ px apart vertically — because horizontally the eyebrow's leading line starts ~14px BEHIND the logo's right edge, so at narrow zooms they read as "logo + tagline that wraps under it". Pushing the eyebrow's left start past the logo's right edge breaks the visual confusion. */ .hero-frame > .hero-eye{ margin-left: clamp(80px, 11vw, 200px) } .hero-eye{ color: var(--gold-hi); } .hero-eye::before{ background: var(--gold-hi); } @media (max-width: 900px){ /* Mobile: logo is much narrower + eyebrow stacks under it cleanly. Reset. */ .hero-frame > .hero-eye{ margin-left: 0 } } .hero h1{ font-family:var(--f-display); font-weight:900; font-size: clamp(40px, 7.5vw, 124px); line-height:.96; letter-spacing:-.045em; text-transform:uppercase; max-width: 16ch; margin-top: 14px; } .hero h1 em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-soft); letter-spacing:0; text-transform:none; } .hero-bottom{ margin-top: 28px; display:grid; grid-template-columns: 1.3fr .9fr; gap: clamp(20px, 6vw, 80px); align-items:end } .hero-bottom p{ max-width: 50ch; font-size: clamp(15px, 1.15vw, 18px); line-height:1.6; opacity:.88; } /* Premium hero CTA button */ .hero-cta{ position: relative; display: inline-flex; align-items: center; gap: 22px; margin-top: 28px; padding: 20px 28px 20px 34px; font-family: var(--f-display); font-size: 11.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #FFF7E5; background: transparent; border: 1px solid rgba(229,201,138,.45); cursor: pointer; overflow: hidden; isolation: isolate; transition: color .45s var(--easeOut), border-color .45s var(--easeOut), padding .45s var(--easeOut), background-color .45s var(--easeOut); will-change: transform; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(10,8,5,.18); } .hero-cta::before{ /* Inset shimmer line accent */ content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 60%; background: var(--gold); transform: translateY(-50%); transition: width .5s var(--easeOut); z-index: -1; } .hero-cta::after{ /* Gold fill that slides in on hover */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--gold) 0%, var(--gold-hi) 100%); transform: translateX(-101%); transition: transform .55s cubic-bezier(.7,.0,.2,1); } .hero-cta:hover{ color: var(--night); border-color: var(--gold-hi); padding-left: 40px; } .hero-cta:hover::before{ width: 100% } .hero-cta:hover::after{ transform: translateX(0) } .hero-cta .arr{ display: inline-flex; align-items: center; width: 30px; height: 1px; position: relative; background: var(--gold-hi); transition: width .45s var(--easeOut), background .45s var(--easeOut); } .hero-cta:hover .arr{ width: 42px; background: var(--night) } .hero-cta .arr::after{ content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); transform-origin: center; color: var(--gold-hi); transition: color .45s var(--easeOut); } .hero-cta:hover .arr::after{ color: var(--night) } .hero-cta:focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 3px } @media (max-width: 700px){ .hero-cta{ padding: 17px 22px 17px 28px; font-size: 10.5px; gap: 16px; letter-spacing: .22em } .hero-cta .arr{ width: 22px } .hero-cta:hover .arr{ width: 30px } } @media (max-width: 480px){ .hero-cta{ padding: 14px 18px 14px 24px; font-size: 10px; margin-top: 18px } } .hero-meta{ /* Was inside .hero-bottom grid (right column), with a translateY transform. That made meta's vertical position slide-dependent — h1 height changed hero-bottom height, which shifted meta. User wanted the slide-1 position consistently across all 3 slides → pull meta out of flow and anchor it to hero-frame's bottom-right corner with absolute positioning. */ position: absolute; bottom: clamp(140px, 18vh, 230px); right: var(--gutter); z-index: 4; display:flex; flex-direction:column; align-items:flex-end; gap:14px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.85; } /* line-height 1 was tight — the descender of `.big` brushed against the meta_bot span below. 1.08 keeps the dramatic display feel while clearing the next line. */ .hero-meta .big{ font-family:var(--f-display); font-size:clamp(54px,6vw,84px); font-weight:800; letter-spacing:-.035em; line-height:1.08; text-transform:none } .hero-meta .big em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-hi) } /* Hero progress + dots */ .hero-progress{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:45px; display:flex; gap:18px; z-index:5; } .hp-dot{ flex:1; cursor:pointer; padding:18px 0 0 0; color:#FFF7E5; border-top:1px solid rgba(255,247,229,.22); /* Was space-between — that pushed the label to the dot's RIGHT edge, so dot-3's label ended up flush against the viewport right edge, in the same column as hero-meta. Left-align keeps every label tucked next to its "01/02/03" index, well clear of the meta block on the right. */ display:flex; justify-content:flex-start; align-items:flex-start; gap:14px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.65; transition:opacity .4s, color .4s; position:relative; } .hp-dot::before{ content:""; position:absolute; left:0; right:100%; top:-1px; height:1px; background:var(--gold); transition: right linear; } .hp-dot.active{ opacity:1 } .hp-dot.active::before{ right:0; transition: right 6.5s linear } .hp-dot .n{font-family:var(--f-serif); font-style:italic; color:var(--gold-hi); font-size:14px; letter-spacing:0; text-transform:none} .hp-dot .l{ max-width:24ch; line-height:1.4 } /* Hero arrows + counter */ .hero-nav-ctrl{ /* z-index 6 was below the fixed nav (z:90), so the nav's bbox swallowed all clicks on the prev/next arrows — user reported "tıklanmıyor". Raised to 95 (same tier as the ticker, both above the nav). */ position:absolute; right:var(--gutter); top: clamp(180px, 22vh, 240px); z-index:95; display:flex; align-items:center; gap:18px; color:#FFF7E5; } .hero-counter{ font-family:var(--f-serif); font-style:italic; font-size:18px; letter-spacing:.02em; font-weight:500 } .hero-counter b{ color:var(--gold-hi); font-weight:500; font-size:24px } .hero-counter span{ opacity:.55; margin: 0 4px } .hero-arrows{ display:flex; gap:10px } .hero-arrow{ width:46px; height:46px; border:1px solid rgba(255,247,229,.32); border-radius:50%; display:grid; place-items:center; transition: background .35s var(--easeOut), border-color .35s var(--easeOut), color .35s var(--easeOut), transform .35s var(--spring); color:#FFF7E5; cursor:pointer; } .hero-arrow:hover{ background:var(--gold); border-color:var(--gold); color:var(--night); transform: scale(1.06) } .hero-arrow svg{ width:14px; height:14px } @media (max-width: 900px){ /* Bottom-right placement to avoid colliding with the mobile menu button */ .hero-nav-ctrl{ top:auto; bottom:24px; right:var(--gutter); gap:10px } .hero-counter{ font-size:14px } .hero-counter b{ font-size:18px } .hero-arrow{ width:38px; height:38px } } .scroll-cue{ position:absolute; left:var(--gutter); bottom:24px; z-index:5; display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.3em; text-transform:uppercase; opacity:.7; } .scroll-cue .line{width:46px; height:1px; background:#FFF7E5; position:relative; overflow:hidden} .scroll-cue .line::after{content:""; position:absolute; inset:0; background:var(--gold-hi); transform:translateX(-100%); animation: cue 2.6s var(--easeOut) infinite} @keyframes cue { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} } .hero-ticker{ position:absolute; right:var(--gutter); bottom:24px; z-index:5; font-size:11px; letter-spacing:.25em; text-transform:uppercase; opacity:.8; display:flex; gap:14px; align-items:center; } .pulse{width:8px; height:8px; border-radius:50%; background:var(--gold-hi); box-shadow:0 0 0 0 rgba(212,168,86,.55); animation: pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(212,168,86,.55)} 70%{box-shadow:0 0 0 14px rgba(212,168,86,0)} 100%{box-shadow:0 0 0 0 rgba(212,168,86,0)}} @media (max-width: 900px){ .hero-bottom{ grid-template-columns: 1fr; gap:18px; align-items:start } /* Reset the upward translate so the meta block doesn't ride over the CTA */ /* Mobile: keep meta in normal flow inside .hero-bottom (sol-aligned). */ .hero-meta{ position: static; align-items:flex-start; bottom: auto; right: auto; transform: none } .hero-meta .big{ font-size: clamp(40px, 11vw, 64px) } .hero-progress{ display:none } .hero-frame{ padding-bottom: 70px } /* Hide the right-side ticker on mobile — it overlaps with scroll-cue since both anchor to bottom corners of a narrow viewport. */ .hero-ticker{ display:none } } /* ===== TICKER ===== */ .ticker{ background: var(--night); color: var(--paper); border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); padding: 22px 0; overflow:hidden; position:relative; z-index:2; } .ticker .row{ /* 48s was too slow on narrow viewports — translateX(-50%) covers fewer pixels on small screens so the perceived speed drops further. 28s gives a steady reading pace on wide displays; mobile override below speeds it up more since track length there is even smaller. */ display:flex; gap:64px; animation: marquee 28s linear infinite; white-space:nowrap; font-family:var(--f-display); font-weight:700; font-size:22px; letter-spacing:.04em; text-transform:uppercase; } .ticker .row span{ display:inline-flex; align-items:center; gap:16px; } .ticker .row em{ font-family:var(--f-serif); font-style:italic; color:var(--gold-hi); font-weight:500; } .ticker .row .dot{ width:10px; height:10px; background:var(--gold); transform: rotate(45deg); display:inline-block } @keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}} /* ===== STATS ===== */ .stats{ padding: clamp(80px, 12vw, 160px) var(--gutter); background: var(--paper); position:relative; z-index:3; } .stats-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; margin-bottom:80px} .stats-head h2{ font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; font-size: clamp(28px, 3.4vw, 52px); max-width: 22ch; line-height:1.05; } .stats-head h2 em{ font-family:var(--f-serif); font-style:italic; color:var(--gold); font-weight:500 } .stats-grid{ display:grid; grid-template-columns: repeat(4, 1fr); border-top:1px solid var(--line); } .stat{ padding: 56px 22px 36px; border-right:1px solid var(--line); position:relative; text-align: center; display: flex; flex-direction: column; align-items: center; } .stat:last-child{border-right:0} .stat .num{ font-family:var(--f-display); font-weight:900; line-height:1; font-size: clamp(58px, 7.5vw, 120px); letter-spacing:-.045em; display:flex; align-items:flex-start; justify-content: center; gap:6px; } .stat .num .val{ background: linear-gradient(180deg, var(--ink) 0%, var(--gold-lo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat .num sup{font-size:.38em; font-family:var(--f-serif); font-style:italic; color:var(--gold); font-weight:500; transform:translateY(.5em); letter-spacing:0;} .stat .cap{margin-top:18px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; max-width:22ch; color:var(--ink-2)} .stat .sub{margin-top:10px; font-size:13px; color:var(--mute); line-height:1.5; max-width:24ch} @media (max-width: 900px){ .stats-grid{grid-template-columns: 1fr 1fr; gap:0} .stat{padding:36px 18px 28px} .stat:nth-child(2){border-right:0} .stat:nth-child(-n+2){border-bottom:1px solid var(--line)} } /* ===== ABOUT (re-laid: media + text) ===== */ .about{ padding: clamp(80px, 12vw, 160px) var(--gutter); background: var(--paper-2); position:relative; z-index:3; border-top:1px solid var(--line); } .about-grid{display:grid; grid-template-columns: minmax(280px, 1fr) 1.5fr; gap: clamp(40px, 7vw, 96px); align-items:stretch} .about-text{ display:flex; flex-direction:column; gap:36px } .about .lede{ font-family:var(--f-display); font-weight:600; letter-spacing:-.025em; font-size: clamp(28px, 3.2vw, 46px); line-height:1.1; margin-top: 14px; } .about .lede em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold) } .about .body{display:flex; flex-direction:column; gap:22px; max-width:62ch; font-size:16px; line-height:1.75; color:var(--ink-2)} .about .signature{margin-top:14px; padding-top:28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:end; gap:24px} .about .signature .name{font-family:var(--f-display); font-weight:800; font-size:20px; letter-spacing:.06em; text-transform:uppercase} .about .signature .role{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-top:4px} .about .signature img{height:54px; width:auto; opacity:.88} .about .cta{ display:inline-flex; align-items:center; gap:14px; font-size:13px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:6px; margin-top:8px; align-self:flex-start; } .about .cta span.arr{display:inline-block; transition: transform .4s var(--spring)} .about .cta:hover span.arr{transform: translateX(8px)} .about-media{ position:relative; overflow:hidden; background:#222; min-height: 540px; align-self:stretch; /* Skip rendering when off-screen (user reported jank lifting through this section). Browsers that don't support content-visibility ignore the rule. */ content-visibility: auto; contain-intrinsic-size: 1px 540px; } .about-media img{ width:100%; height:100%; object-fit:cover; object-position: 50% 18%; transform:scale(1.05); transition: transform 1.6s var(--easeOut); position:absolute; inset:0; /* Promote to its own GPU layer so the scale-on-hover transition doesn't re-paint the underlying flow on each frame. */ will-change: transform; backface-visibility: hidden; } .about-media:hover img{transform:scale(1.1)} .about-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(10,8,5,.78) 100%); z-index:1} .about-media .badge{ position:absolute; left:24px; right:24px; bottom:24px; z-index:2; color:#FFF7E5; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; } .about-media .badge .small{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; font-weight:600; opacity:.85; max-width:18ch; line-height:1.45; } .about-media .badge .year{ font-family:var(--f-display); font-weight:900; font-size: clamp(72px, 7vw, 112px); line-height:.9; letter-spacing:-.045em; color: var(--gold-hi); } .about-media .corner{ position:absolute; top:24px; left:24px; right:24px; z-index:2; display:flex; justify-content:space-between; align-items:flex-start; color:#FFF7E5; font-size:11px; letter-spacing:.32em; text-transform:uppercase; font-weight:600; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.4); } /* Subtle top gradient so corner text reads on light backgrounds (helmets, sky) */ .about-media::before{ content:""; position:absolute; top:0; left:0; right:0; height: 30%; background: linear-gradient(180deg, rgba(10,8,5,.55) 0%, transparent 100%); z-index:1; pointer-events:none; } .about-media .corner .dot{ width:8px; height:8px; background:var(--gold-hi); border-radius:50%; display:inline-block; margin-right:8px; vertical-align:middle } @media (max-width: 900px){ .about-grid{grid-template-columns:1fr; gap:30px} .about-media{ min-height: 0; aspect-ratio: 4/5; order:-1 } .about-media img{ object-position: 50% 15% } } /* ===== SERVICES ===== */ .services{ background: var(--night); color: var(--paper); padding: clamp(80px, 12vw, 160px) var(--gutter) 0; position:relative; z-index:3; } .services-head{display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:end; margin-bottom:70px} .services-head h2{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; font-size: clamp(40px, 6vw, 100px); line-height:.94; text-transform:uppercase; } .services-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-hi); text-transform:none; letter-spacing:0 } .services-head p{max-width:44ch; opacity:.75; line-height:1.65; font-size:16px} .services-list{border-top:1px solid var(--night-line)} .service{ display:grid; grid-template-columns: 64px 1.1fr 1.4fr 60px; align-items:center; gap:30px; padding: 44px 0; border-bottom:1px solid var(--night-line); position:relative; transition: padding-left .5s var(--easeOut), background .5s var(--easeOut); cursor:pointer; } .service::before{ content:""; position:absolute; left:-30px; top:0; bottom:0; right:-30px; background: linear-gradient(90deg, transparent, rgba(181,136,64,.06), transparent); opacity:0; transition: opacity .5s var(--easeOut); } .service:hover, .service:focus-within{ padding-left:24px } .service:hover::before, .service:focus-within::before{ opacity:1 } .service:hover .ser-img, .service:focus-within .ser-img{opacity:1; transform: translate(-50%,-50%) scale(1)} /* Arrow no longer just spins — slides forward (read direction) AND tilts a touch. Reads as "click to navigate" rather than abstract rotation. */ .service:hover .go, .service:focus-within .go{ background:var(--gold); border-color:var(--gold); color:var(--night); transform: translateX(6px) rotate(-12deg); } .service:focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 4px; border-radius: 4px } .service .num{font-family:var(--f-serif); font-style:italic; color:var(--gold-hi); font-size:24px} .service .ttl{font-family:var(--f-display); font-weight:800; font-size: clamp(24px, 3vw, 46px); letter-spacing:-.03em; line-height:1.04; text-transform:uppercase} .service .desc{font-size:15px; color: rgba(244,239,227,.65); line-height:1.65; max-width:44ch} .service .go{justify-self:end; width:48px; height:48px; border:1px solid var(--night-line); border-radius:50%; display:grid; place-items:center; transition: all .5s var(--easeOut); color:var(--paper)} .ser-img{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scale(.9); width: 380px; height: 240px; object-fit:cover; pointer-events:none; opacity:0; transition: opacity .5s var(--easeOut), transform .5s var(--easeOut); z-index:5; box-shadow: 0 30px 80px rgba(0,0,0,.6); } @media (max-width: 900px){ .services-head{grid-template-columns:1fr; gap:24px} .service{grid-template-columns: 36px 1fr 36px; gap:14px} .service .desc{grid-column: 2 / span 1; font-size:13px; color: rgba(244,239,227,.6)} .service .ttl{font-size:24px} .ser-img{display:none} } /* ===== PROJECTS ===== */ .projects{ padding: clamp(100px, 14vw, 180px) var(--gutter) clamp(60px, 7vw, 100px); background: var(--night); color: var(--paper); position:relative; z-index:3; /* 7-tile project bento, each with a background image — second heaviest section after the gallery. */ content-visibility: auto; contain-intrinsic-size: 1px 1400px; } .proj-head{display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:24px; margin-bottom:64px} .proj-head h2{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; font-size: clamp(38px, 5.4vw, 84px); line-height:.94; text-transform:uppercase; max-width: 18ch; margin-top:14px; } .proj-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-hi); text-transform:none } .proj-head .meta{font-size:14px; color:rgba(244,239,227,.6); max-width:30ch; text-align:right; line-height:1.6} .proj-grid{ display:none } /* legacy, replaced by .proj-bento */ .card{ position:relative; overflow:hidden; background:#1a160e; border:1px solid var(--night-line); cursor:pointer; transition: border-color .4s var(--easeOut), box-shadow .4s var(--easeOut), transform .4s var(--easeOut); } .card:hover, .card:focus-within{ border-color: rgba(212,168,86,.4); box-shadow: 0 22px 60px rgba(0,0,0,.45); transform: translateY(-2px); } .card.featured{ /* sizing handled by .proj-bento .featured */ } .card .img{position:absolute; inset:0; background-size:cover; background-position:center; transform: scale(1.03); transition: transform 1.4s var(--easeOut), filter 1.4s var(--easeOut); filter:brightness(.78)} .card:hover .img{ transform: scale(1.1); filter:brightness(.55) } .card::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.4) 65%, rgba(10,8,5,.95))} .card .meta{ position:absolute; inset:auto 28px 28px 28px; z-index:2; display:flex; flex-direction:column; gap:10px; transform: translateY(8px); transition: transform .6s var(--easeOut); } .card:hover .meta{ transform: translateY(0) } .card .tag{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-hi); font-weight:700} .card h3{font-family:var(--f-display); font-weight:800; font-size: clamp(18px, 1.6vw, 24px); letter-spacing:-.015em; line-height:1.12; text-transform:uppercase} .card.featured h3{font-size: clamp(28px, 2.8vw, 40px); letter-spacing:-.03em} .card .loc{font-size:12px; letter-spacing:.18em; opacity:.7; text-transform:uppercase; display:flex; justify-content:space-between; align-items:end; margin-top:12px} .card .loc em{font-family:var(--f-serif); font-style:italic; font-size:18px; color:var(--gold-hi); text-transform:none; letter-spacing:0} .card .idx{position:absolute; top:24px; left:28px; z-index:3; font-family:var(--f-serif); font-style:italic; color:var(--gold-hi); font-size:14px} .card .view{position:absolute; top:24px; right:28px; z-index:3; width:42px; height:42px; border:1px solid rgba(244,239,227,.25); border-radius:50%; display:grid; place-items:center; transform: scale(.8); opacity:0; transition: all .5s var(--spring)} .card:hover .view, .card:focus-visible .view, .card:focus-within .view{ opacity:1; transform:scale(1); background:var(--gold); border-color:var(--gold); color:var(--night)} .card:focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 4px } @media (max-width: 900px){ /* legacy proj-grid removed; bento handles mobile */ } .proj-bento{ display:grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: clamp(220px, 22vw, 300px); gap: 14px; } .proj-bento .card{ aspect-ratio:auto } .proj-bento .featured{ grid-column: span 2; grid-row: span 2; } @media (max-width: 1100px){ .proj-bento{ grid-template-columns: repeat(4, 1fr) } .proj-bento .featured{ grid-column: span 2; grid-row: span 2 } } @media (max-width: 700px){ .proj-bento{ grid-template-columns: 1fr 1fr; grid-auto-rows: 220px } .proj-bento .featured{ grid-column: 1 / -1; grid-row: span 1 } } /* Status pill on cards */ .card .status{ position:absolute; top:24px; left:28px; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; background: rgba(10,8,5,.55); backdrop-filter: blur(8px); border:1px solid rgba(229,201,138,.25); color: var(--gold-hi); } .card .status .live{ width:6px; height:6px; border-radius:50%; background:var(--gold-hi); box-shadow:0 0 0 0 rgba(229,201,138,.7); animation: pulse 2s infinite } .card .status.done{ color: var(--paper); border-color: rgba(244,239,227,.22) } .card .status.done::before{ content:""; width:10px; height:6px; border-left:1.5px solid var(--gold-hi); border-bottom:1.5px solid var(--gold-hi); transform: rotate(-50deg) translate(2px, -1px) } .card .idx{ top: 64px } /* push down to leave room for status */ /* ===== GALLERY ===== */ .gallery{ padding: clamp(100px, 14vw, 180px) var(--gutter); background: var(--paper); border-top:1px solid var(--line); position:relative; z-index:3; /* Six high-res images in a bento grid — the most expensive section to rasterise on HiDPI screens. Skip rendering when not in viewport. */ content-visibility: auto; contain-intrinsic-size: 1px 1100px; } .gal-head{display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:24px; margin-bottom:54px} .gal-head h2{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; font-size: clamp(38px, 5.4vw, 84px); line-height:.94; text-transform:uppercase; margin-top:14px; max-width:14ch; } .gal-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold); text-transform:none } .gal-head .right{display:flex; flex-direction:column; align-items:flex-end; gap:18px; max-width:30ch} .gal-head .right p{font-size:14px; color:var(--mute); line-height:1.6; text-align:right} .gal-head .right a{font-size:12px; letter-spacing:.25em; text-transform:uppercase; font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:6px; display:inline-flex; align-items:center; gap:14px; transition:gap .3s var(--easeOut)} .gal-head .right a:hover{ gap:20px } .gal-bento{ display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(120px, 13vw, 170px); gap:14px; } .gal-bento .g{ position:relative; overflow:hidden; background:#101010; cursor:pointer; transition: box-shadow .4s var(--easeOut); /* Isolate paint so hovering one tile doesn't trigger the whole bento to repaint — meaningful on HiDPI with six tiles all containing img:scale. */ contain: layout style paint; } .gal-bento .g:hover{ box-shadow: 0 18px 48px rgba(10,8,5,.45) } .gal-bento .g:focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 3px } .gal-bento .g img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--easeOut); transform:scale(1.04); will-change: transform; backface-visibility: hidden; } .gal-bento .g:hover img, .gal-bento .g:focus-visible img{transform:scale(1.1)} .gal-bento .g::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.55)); opacity:.4; transition: opacity .4s} .gal-bento .g:hover::after{ opacity:.7 } .gal-bento .g .cap{position:absolute; left:18px; bottom:14px; z-index:2; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#FFF7E5; font-weight:600; opacity:0; transform: translateY(8px); transition: opacity .45s var(--easeOut), transform .45s var(--easeOut)} .gal-bento .g:hover .cap, .gal-bento .g:focus-visible .cap{ opacity:1; transform: translateY(0) } .g1{grid-column: 1/4; grid-row: 1/4} .g2{grid-column: 4/7; grid-row: 1/3} .g3{grid-column: 4/6; grid-row: 3/5} .g4{grid-column: 6/7; grid-row: 3/5} .g5{grid-column: 1/3; grid-row: 4/5} .g6{grid-column: 3/4; grid-row: 4/5} @media (max-width: 900px){ .gal-bento{grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px} .gal-bento .g{grid-column: auto !important; grid-row: auto !important} .g1{grid-column: span 2 !important; grid-row: span 2 !important} } /* ===== VALUES ===== */ .values{ padding: clamp(100px, 14vw, 200px) var(--gutter); background: var(--night); color: var(--paper); position:relative; overflow:hidden; border-top:1px solid var(--night-line); content-visibility: auto; contain-intrinsic-size: 1px 950px; } .values-bg{ position:absolute; inset:0; background-size:cover; background-position:center; /* `filter: grayscale + contrast` ran on every scroll-frame the section was visible. opacity alone keeps the muted-monochrome look without the per-frame paint. */ opacity:.18; z-index:0; } .values-frame{ position:relative; z-index:2; } .values-head{ text-align:center; margin-bottom:80px } .values-head h2{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; font-size: clamp(40px, 6vw, 96px); line-height:.94; text-transform:uppercase; margin-top:18px; } .values-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-hi); text-transform:none } .values-head .eyebrow{ justify-content:center; display:flex; } .values-head .eyebrow::before, .values-head .eyebrow::after{ content:""; width:32px; height:1px; background:var(--gold-hi) } .values-head .eyebrow::after{ display:block } .values-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0; border-top:1px solid var(--night-line) } .value{ padding: 50px 28px 40px 0; border-right:1px solid var(--night-line); position:relative; min-height: 320px; } .value:last-child{border-right:0} .value .num{ font-family:var(--f-display); font-weight:800; font-size:18px; color:var(--gold); display:flex; align-items:baseline; gap:14px; } .value .num::after{ content:""; flex:1; height:1px; background: rgba(212,168,86,.3); margin-left:6px; } .value h3{ font-family:var(--f-display); font-weight:800; font-size:36px; letter-spacing:-.025em; text-transform:uppercase; margin: 28px 0 22px; } .value p{ font-size:14px; line-height:1.7; color: rgba(244,239,227,.7); max-width:32ch; } @media (max-width: 900px){ .values-grid{grid-template-columns:1fr 1fr} .value:nth-child(2){border-right:0} .value:nth-child(-n+2){border-bottom:1px solid var(--night-line)} } /* ===== VALUES section centering ===== */ .value{ text-align: center; align-items: center } .value .num{ justify-content: center } .value .num::after{ display: none } .value h3, .value p{ margin-left: auto; margin-right: auto } /* ===== TIMELINE (manual horizontal scroll, fixed-height section) ===== */ .timeline{ background: var(--paper); color:var(--ink); position:relative; z-index:3; /* Total section height is computed by JS: sectionHeight = 100vh (stickyHeight) + horizontalScrollDistance The custom prop --tl-section-h is set on the section element. */ height: var(--tl-section-h, auto); } /* Desktop pin behavior — only when JS has measured & enabled it */ .timeline.is-pinned{ /* keep height from inline style */ } .tl-sticky{ position: sticky; top: 0; /* height is 1px less than viewport so the pin range (sectionH - stickyH) is 1px larger than horizDist. This guarantees the sticky element is still within its pin range at progress=1 even with sub-pixel rounding. */ height: calc(100vh - 1px); overflow: hidden; display:flex; flex-direction:column; /* padding-top must clear the fixed nav (ticker 38px + nav ~76px = ~114px) plus visual breathing room — was clamp(48,6vw,100) which put the head directly under / behind the nav, reading as "lip-to-lip with the section above". Bumped so the pinned head starts ~40-60px below the nav. */ padding: clamp(140px, 11vw, 180px) 0 clamp(28px, 3vw, 56px); box-sizing: border-box; } /* Fallback when pin is disabled (mobile / reduced motion) */ .timeline:not(.is-pinned) .tl-sticky{ position: static; height: auto; overflow: visible; padding: clamp(80px, 10vw, 130px) 0 clamp(60px, 7vw, 100px); } .tl-head-wrap{ /* Head→track gap moderate: 110px max was *too* big — it pushed years past the screen-bottom during the brief window before sticky-pin engages. 50-80 strikes the balance between breathing and visibility. */ padding: 0 var(--gutter) clamp(40px, 4.5vw, 80px); display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items:end; flex-shrink: 0; } .tl-head-wrap h2{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; font-size: clamp(28px, 3.8vw, 60px); line-height:.94; text-transform:uppercase; margin-top:10px; } .tl-head-wrap h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold); text-transform:none } .tl-head-wrap p{max-width:46ch; font-size:15px; line-height:1.65; color:var(--mute)} .tl-viewport{ position: relative; overflow: hidden; /* pinned mode: track is moved via transform */ flex: 1 1 0; min-height: 0; /* allow flex shrink below content height */ display: flex; align-items: center; padding: 0; } /* When pin disabled, use native horizontal scroll. Reset flex sizing so the viewport hugs its content height (cards) instead of getting squashed by the flex:1 + min-height:0 we use in pinned mode. */ .timeline:not(.is-pinned) .tl-viewport{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 30px 0 70px; align-items: stretch; flex: 0 0 auto; min-height: 0; } .tl-viewport::-webkit-scrollbar{ display:none } .tl-track{ display:flex; align-items:stretch; gap: clamp(40px, 4vw, 80px); padding: 0 var(--gutter); /* In pinned mode, transform is set by JS via translate3d */ will-change: transform; transform: translate3d(0, 0, 0); } /* When pin disabled, no transform — native scroll */ .timeline:not(.is-pinned) .tl-track{ transform: none !important; will-change: auto; } .tl-card{ /* flex-basis scales with viewport so cards never all fit at once, even on ultra-wide / 4K monitors. This keeps horizDist > 0 and the scroll-driven pin always active on large screens. */ flex: 0 0 clamp(260px, 16vw, 520px); scroll-snap-align: start; display:flex; flex-direction:column; gap:10px; /* padding-top: extra cushion so the year glyph never starts flush with the card box top — protects against clipping even when the viewport's flex distribution leaves the track slightly tall. */ position:relative; padding: 18px 0 6px; /* All cards readable by default (a11y). Active emphasis via scale + accent border instead of opacity so all text stays WCAG AA. */ transform: scale(.96); transition: transform .45s var(--easeOut); } .tl-card.in-view{ transform: scale(1) } .timeline:not(.is-pinned) .tl-card{ transform: none } .tl-card:focus-visible{ outline: 2px solid var(--gold); outline-offset: 6px; } .tl-card .card-meta{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.25em; text-transform:uppercase; font-weight:600; } .tl-card .card-meta .idx{ color: var(--mute); font-family:var(--f-serif); font-style:italic; letter-spacing:.04em; text-transform:none; font-size:15px; font-weight:500 } .tl-card .card-meta .tag{ color:var(--gold-lo); display:flex; align-items:center; gap:10px } .tl-card .card-meta .tag::before{ content:""; width:18px; height:1px; background:var(--gold-lo) } .tl-card .year{ /* User reported upper-glyph clipping persisting even at line-height 1.18. Archivo 800 ascender is taller than the cap-height; on HiDPI / fractional scale the line-box rounds down and the top of the digits gets pixel-clipped. Bumped line-height to 1.3 and padding-top to 22 so the gradient top (var(--ink) → black) always has 1+ row of clear pixels above it. */ font-family:var(--f-display); font-weight:800; line-height:1.3; font-size: clamp(56px, 6vw, 104px); letter-spacing:-.04em; background: linear-gradient(180deg, var(--ink) 0%, var(--gold-lo) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display:inline-block; padding: 22px 0 10px; /* Force its own paint box so a child line-box overflow can't be clipped by the .tl-viewport's overflow:hidden outside the pinned region. */ overflow: visible; } .tl-card .year sup{ font-size:.32em; font-family:var(--f-serif); font-style:italic; color:var(--gold); font-weight:500; vertical-align: top; margin-left: 4px; -webkit-text-fill-color: var(--gold); } .tl-card h3{ font-family:var(--f-display); font-weight:800; font-size: clamp(18px, 1.8vw, 24px); letter-spacing:-.025em; text-transform:uppercase; margin-top:4px; } .tl-card p{font-size:14px; line-height:1.65; color:var(--mute); max-width: 38ch} .tl-card .dot{ width: 12px; height: 12px; border-radius:50%; background:var(--gold); margin-top: 14px; box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--line-strong); } /* Short-viewport fallback (DevTools docked, snapped panes, ≤700px tall windows). At 100vh pin, .tl-sticky becomes ≤700px; .tl-viewport (flex:1) shrinks to ~150-200px and can't fit the full card (~350px). The year glyph then sits above the viewport's overflow:hidden boundary and the top half clips — exactly the "1992 → 92" symptom. Strategy: forcibly disable the pin in CSS so the section falls back to natural document flow, where no overflow:hidden ever clips the year. JS still applies .is-pinned + --tl-section-h, but the CSS below overrides it for short viewports. Wide viewports unchanged. */ @media (max-height: 700px){ /* Override JS-set height so the section sizes to its content. */ .timeline.is-pinned{ height: auto !important; } .timeline.is-pinned .tl-sticky{ position: static; height: auto; overflow: visible; padding: clamp(72px, 10vw, 120px) 0 clamp(40px, 5vw, 64px); } /* Track was being moved by JS via transform; in flow-mode let it sit at its natural position and use native horizontal overflow scrolling. */ .timeline.is-pinned .tl-track{ transform: none !important; } .timeline.is-pinned .tl-viewport{ overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 20px 0 30px; } .timeline.is-pinned .tl-viewport::-webkit-scrollbar{ height: 6px } .timeline.is-pinned .tl-viewport::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 3px } /* Hint that horizontal scroll is the way to consume timeline now. */ .timeline.is-pinned .tl-controls .progress, .timeline.is-pinned .tl-hint{ display: none } /* And keep the previous tighter sizing in case any wide visual collisions happen at very narrow short widths. */ .tl-card{ gap: 6px } .tl-head-wrap{ padding-bottom: clamp(24px, 3.5vw, 44px) } .tl-head-wrap h2{ font-size: clamp(24px, 3.2vw, 40px) } } .tl-controls{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding: 0 var(--gutter); margin-top: 24px; flex-shrink: 0; } .tl-controls .arrows{ display:flex; gap:10px } .tl-arrow{ width:44px; height:44px; border:1px solid var(--line-strong); border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--ink); transition: all .35s var(--easeOut); } .tl-arrow:hover{ background:var(--gold); border-color:var(--gold); color:var(--paper) } .tl-arrow svg{ width:14px; height:14px } .tl-controls .progress{ flex: 1; max-width: 420px; height:1px; background: var(--line); position: relative; } .tl-controls .progress .fill{ position: absolute; left:0; top:-1px; height:3px; background:var(--gold); width: 0; transition: width .25s var(--easeOut); } .tl-controls .label{ font-size: 11px; letter-spacing:.22em; text-transform:uppercase; color: var(--mute); font-weight:600 } .tl-controls .label em{ font-family:var(--f-serif); font-style:italic; color: var(--gold); font-weight:500; letter-spacing:0; text-transform: none; margin: 0 8px } @media (max-width: 900px){ .tl-head-wrap{ grid-template-columns: 1fr; gap: 18px } .tl-card{ flex-basis: 260px } .tl-controls{ flex-wrap: wrap } .tl-controls .progress{ max-width: none; flex-basis: 100%; order: 3 } } @media (max-width: 700px){ .tl-card{ flex-basis: 240px } } /* ===== PARTNERS ===== */ .partners{ padding: 80px var(--gutter); background: var(--paper); border-top:1px solid var(--line); text-align:center; position:relative; z-index:3; } .partners .label{font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--mute); margin-bottom:32px} .partners .row{display:flex; justify-content:center; align-items:center; gap: clamp(40px, 8vw, 100px); flex-wrap:wrap} .partners img{height:64px; width:auto; opacity:.65; filter: grayscale(1); transition: all .5s var(--easeOut)} .partners img:hover{opacity:1; filter:none; transform: scale(1.04)} /* ===== CONTACT (re-laid) ===== */ .contact{ position:relative; overflow:hidden; padding: clamp(120px, 16vw, 200px) var(--gutter) clamp(80px, 10vw, 120px); color:#FFF7E5; z-index:3; } .contact .bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter: brightness(.4) contrast(1.08); transform: scale(1.05); will-change: transform; } .contact::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,8,5,.6) 0%, rgba(10,8,5,.78) 50%, rgba(10,8,5,.92) 100%); pointer-events:none; } .contact-head{ position:relative; z-index:2; display:grid; grid-template-columns: 1.4fr 1fr; gap:60px; align-items:end; padding-bottom: 70px; margin-bottom: 60px; border-bottom: 1px solid rgba(255,247,229,.16); } .contact-head h2{ font-family:var(--f-display); font-weight:900; letter-spacing:-.045em; font-size: clamp(48px, 8vw, 132px); line-height:.9; text-transform:uppercase; max-width: 14ch; margin-top:22px; } .contact-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-hi); text-transform:none } .contact-head .eyebrow::before{ background: var(--gold-hi) } .contact-head p{ max-width: 42ch; font-size:16px; line-height:1.7; opacity:.85; padding-bottom: 18px } .contact-main{ position:relative; z-index:2; display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 80px); align-items:start; } /* Form */ .contact-form{ display:flex; flex-direction:column; gap: 28px; } .contact-form .form-eye{ font-size:11px; letter-spacing:.42em; text-transform:uppercase; color: var(--gold-hi); font-weight:700; display:flex; align-items:center; gap:14px; margin-bottom: 8px; } .contact-form .form-eye::before{ content:""; width:32px; height:1px; background:var(--gold-hi) } .contact-form .form-intro{font-size:14px; line-height:1.6; opacity:.75; margin-bottom:18px; max-width: 52ch} .field{ position:relative; border-bottom: 1px solid rgba(255,247,229,.22); transition: border-color .35s var(--easeOut); } .field:focus-within{ border-color: var(--gold-hi) } .field input, .field textarea, .field select{ width:100%; background: transparent; border:0; outline: none; padding: 28px 0 14px; color: #FFF7E5; font-family: var(--f-body); font-size: 16px; font-weight: 500; letter-spacing: .005em; -webkit-appearance: none; appearance: none; border-radius: 0; } .field textarea{ resize: vertical; min-height: 110px; padding: 28px 0 14px; } .field label{ position:absolute; left:0; top: 28px; font-size: 16px; color: rgba(255,247,229,.55); pointer-events:none; transition: all .35s var(--easeOut); font-family: var(--f-body); font-weight: 500; transform-origin: left top; } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .field.has-value label, .field select:focus + label, .field.has-value select + label{ top: 6px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-hi); font-weight: 600; } .field .req{ color: var(--gold-hi); margin-left: 4px } .field select{ cursor:pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 6px center; background-size: 12px 8px; padding-right: 26px; } .field select option{ background: var(--night); color: var(--paper); padding: 8px } .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; } .form-grid .full{ grid-column: 1 / -1 } .contact-form .submit-row{ display:flex; justify-content:space-between; align-items:center; gap: 24px; flex-wrap:wrap; margin-top: 14px; } .contact-form .submit-row .note{ font-size:12px; opacity:.55; max-width: 36ch; line-height: 1.5 } .contact-form .contact-btn{ display:inline-flex; align-items:center; gap:18px; background:var(--gold); color:var(--night); padding: 22px 36px; font-size:13px; letter-spacing:.25em; text-transform:uppercase; font-weight:700; transition: background .3s, transform .3s var(--spring); border: 0; } .contact-form .contact-btn:hover{ background: var(--gold-hi); transform: translateY(-2px) } .contact-form .contact-btn svg{ transition: transform .3s } .contact-form .contact-btn:hover svg{ transform: translateX(6px) } /* Form states */ .contact-form.sending .contact-btn{ opacity:.7; pointer-events:none } .form-status{ display:none; padding: 18px 22px; background: rgba(212,168,86,.12); border: 1px solid rgba(212,168,86,.4); color: var(--gold-hi); font-size: 13px; letter-spacing:.06em; line-height: 1.55; } .form-status.show{ display:block } .form-status.error{ background: rgba(220,90,60,.12); border-color: rgba(220,90,60,.4); color: #F0A28F } .field.has-error{ border-color: rgba(220,90,60,.55) } .field.has-error label{ color: #F0A28F !important } /* Info column */ .contact-info-list{ display:flex; flex-direction:column; gap:0 } .contact-info-list .row{ display:flex; justify-content:space-between; align-items:start; gap:24px; padding:24px 0; border-bottom: 1px solid rgba(255,247,229,.16) } .contact-info-list .row:first-child{ padding-top: 0 } .contact-info-list .row small{font-size:11px; letter-spacing:.25em; text-transform:uppercase; opacity:.6; display:block; margin-bottom:10px; font-weight:600; color: var(--gold-hi)} .contact-info-list .row .val{font-family:var(--f-display); font-size:19px; font-weight:500; line-height:1.35} .contact-info-list .row .val em{ font-family:var(--f-serif); font-style:italic; color: var(--gold-hi); font-weight:500 } .contact-info-list .row .val a{ transition: color .3s } .contact-info-list .row .val a:hover{ color: var(--gold-hi) } .contact-info-list .row .arr{font-family:var(--f-serif); font-style:italic; color:var(--gold-hi); font-size:24px} .contact-info-list .subs{ font-size:13px; line-height:1.7; opacity:.78; font-family:var(--f-body); font-weight: 400 } .contact-info-list .subs em{ font-family:var(--f-serif); font-style:italic; color: rgba(229,201,138,.7); font-weight:400 } .contact-info-list .subs div{ padding: 4px 0 } @media (max-width: 1100px){ .contact-head{ grid-template-columns: 1fr; gap: 20px } } @media (max-width: 900px){ .contact-main{ grid-template-columns: 1fr; gap: 60px } .form-grid{ grid-template-columns: 1fr; gap: 20px 0 } } /* ===== SCROLLSPY active nav ===== */ .nav ul a.spy-active{ color: var(--gold-hi) } .nav ul a.spy-active::after{ transform: scaleX(1) } /* ===== PROJECT FILTERS ===== */ .proj-filters{ display:flex; gap: 8px; flex-wrap:wrap; margin: -10px 0 30px; position:relative; z-index:2; } .proj-filter{ padding: 10px 18px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; border: 1px solid var(--night-line); color: rgba(244,239,227,.7); background: transparent; cursor: pointer; transition: all .35s var(--easeOut); display:inline-flex; align-items:center; gap: 10px; } .proj-filter:hover{ color: var(--paper); border-color: rgba(229,201,138,.4) } .proj-filter.active{ background: var(--gold); color: var(--night); border-color: var(--gold); } .proj-filter .n{ font-family: var(--f-serif); font-style: italic; font-size: 12px; letter-spacing: 0; opacity: .8; } .proj-filter.active .n{ opacity: 1; color: var(--night) } .proj-bento .card{ transition: opacity .6s var(--easeOut), transform .6s var(--easeOut), filter .6s var(--easeOut); } .proj-bento .card.hide{ opacity: 0; transform: scale(.96); filter: grayscale(.5); pointer-events: none; } /* Form privacy note */ .form-privacy{ font-size: 11px; letter-spacing: .04em; line-height: 1.55; color: rgba(255,247,229,.5); margin-top: -8px; display: flex; align-items: flex-start; gap: 10px; } .form-privacy::before{ content: ""; display:block; width: 16px; height: 16px; flex-shrink: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; margin-top: 1px; } .form-privacy em{ color: var(--gold-hi); font-style: normal; font-weight: 600 } .form-privacy a{ color: var(--gold-hi); border-bottom: 1px solid rgba(212,168,86,.4) } /* KVKK explicit consent checkbox */ .consent-field{ margin-top: -4px } .consent-field .consent-label{ display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 12px; line-height: 1.55; color: rgba(255,247,229,.78); } .consent-field input[type="checkbox"]{ appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0; border: 1px solid rgba(229,201,138,.55); background: transparent; cursor: pointer; position: relative; margin-top: 1px; transition: background .2s, border-color .2s; } .consent-field input[type="checkbox"]:hover{ border-color: var(--gold-hi) } .consent-field input[type="checkbox"]:checked{ background: var(--gold-hi); border-color: var(--gold-hi); } .consent-field input[type="checkbox"]:checked::after{ content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--night); border-width: 0 2px 2px 0; transform: rotate(45deg); } .consent-field input[type="checkbox"]:focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 3px; } .consent-field .consent-text a{ color: var(--gold-hi); border-bottom: 1px solid rgba(212,168,86,.5); text-decoration: none; } .consent-field .consent-text a:hover{ border-bottom-color: var(--gold-hi) } .consent-field .req{ color: var(--gold-hi); margin-left: 2px } /* Focus-visible accessibility */ :focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 3px; } /* Fields render their focus state via border + glow (see :focus rules above), but we keep a subtle outline for high-contrast / forced-colors / browser keyboard navigation. Without this, keyboard-only users couldn't tell which field was focused. Aşama 1 Block 5.1 — was `outline: 0` (a11y regression). */ .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 2px; } .field.has-error input:focus-visible, .field.has-error textarea:focus-visible, .field.has-error select:focus-visible{ outline-color: rgba(220, 90, 60, .85); } /* Skip to content (a11y) */ /* ===== PAGE HERO (sub-pages) ===== */ .page-hero{ position: relative; min-height: 72vh; display: flex; align-items: flex-end; padding: clamp(140px, 18vh, 200px) var(--gutter) clamp(60px, 8vh, 100px); color: #FFF7E5; overflow: hidden; background: var(--night); } .ph-bg{ position: absolute; inset: -4%; background-size: cover; background-position: center 55%; filter: brightness(.62) contrast(1.05) saturate(1.02); z-index: 0; animation: ph-kenburns 18s ease-out forwards; } @keyframes ph-kenburns{ from{ transform: scale(1.04) } to{ transform: scale(1.12) } } .page-hero::after{ content:""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,8,5,.6) 0%, rgba(10,8,5,.2) 40%, rgba(10,8,5,.85) 100%), radial-gradient(ellipse at 75% 30%, rgba(181,136,64,.18), transparent 55%); pointer-events: none; } .ph-frame{ position: relative; z-index: 2; width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 18px; } .ph-eyebrow{ font-size: 11px; letter-spacing: .42em; text-transform: uppercase; font-weight: 700; color: var(--gold-hi); display: flex; align-items: center; gap: 14px; } .ph-eyebrow::before{ content:""; width: 32px; height: 1px; background: var(--gold-hi) } .ph-h1{ font-family: var(--f-display); font-weight: 900; font-size: clamp(48px, 8vw, 132px); line-height: .92; letter-spacing: -.045em; text-transform: uppercase; max-width: 18ch; } .ph-h1 em{ font-family: var(--f-serif); font-style: italic; font-weight: 500; color: var(--gold-soft); letter-spacing: 0; text-transform: none } .ph-sub{ max-width: 56ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; opacity: .85; margin-top: 8px } .ph-breadcrumb{ margin-top: 24px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 14px; } .ph-breadcrumb a{ opacity: .65; transition: color .3s, opacity .3s } .ph-breadcrumb a:hover{ color: var(--gold-hi); opacity: 1 } .ph-breadcrumb span{ opacity: .35 } .ph-breadcrumb em{ font-family: var(--f-serif); font-style: italic; color: var(--gold-hi); letter-spacing: 0; text-transform: none; font-size: 14px } @media (max-width: 900px){ .page-hero{ min-height: 60vh; padding-top: 120px } .ph-h1{ font-size: clamp(38px, 11vw, 72px) } } .skip-link{ position: absolute; left: 8px; top: 8px; padding: 10px 18px; background: var(--gold); color: var(--night); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; z-index: 9999; transform: translateY(-130%); transition: transform .3s var(--easeOut); } .skip-link:focus-visible{ transform: translateY(0); outline: 0 } .to-top{ position:fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); width: 52px; height: 52px; border-radius:50%; background: var(--gold); color: var(--night); display:grid; place-items:center; border: 0; cursor:pointer; box-shadow: 0 8px 24px rgba(10,8,5,.32), 0 0 0 1px rgba(255,255,255,.06); opacity: 0; pointer-events: none; transform: scale(.7) translateY(8px); transition: opacity .4s var(--easeOut), transform .4s var(--spring), background .3s; z-index: 90; } .to-top.show{ opacity: 1; pointer-events: auto; transform: scale(1) translateY(0) } .to-top:hover{ background: var(--gold-hi) } .to-top svg{ width: 18px; height: 18px } @media (max-width: 700px){ .to-top{ width: 44px; height: 44px } .to-top svg{ width: 14px; height: 14px } } /* ===== FOOTER (enhanced) ===== */ footer{ background: #08060A; color: var(--paper); padding: clamp(80px, 12vw, 140px) var(--gutter) 32px; border-top:1px solid var(--night-line); position:relative; z-index:3; } .foot-grid{display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(40px, 5vw, 70px); padding-bottom:60px; border-bottom:1px solid var(--night-line)} .foot-brand{display:flex; flex-direction:column; gap:24px} .foot-brand img{height: clamp(88px, 9vw, 120px); width:auto; align-self: flex-start} .foot-brand p{opacity:.7; max-width:38ch; font-size:14px; line-height:1.7} .foot h2{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-hi); margin:0 0 22px; font-weight:600; font-family:inherit} .foot ul{list-style:none; display:flex; flex-direction:column; gap:12px; font-size:14px} .foot ul li{ opacity:.82; transition: opacity .25s } .foot ul li:hover{ opacity:1 } /* Footer links: animated gold underline that wipes in from left on hover. Reads as "this is interactive" without the always-on underline noise. */ .foot ul a{ position: relative; display: inline-block; padding-bottom: 2px; transition: color .3s; } .foot ul a::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold-hi); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--easeOut); } .foot ul a:hover, .foot ul a:focus-visible{ color: var(--gold-hi) } .foot ul a:hover::after, .foot ul a:focus-visible::after{ transform: scaleX(1) } .foot-socials{ display:flex; flex-direction:column; gap: 10px; margin-top: 4px; } .foot-socials a{ display:inline-flex; align-items:center; gap: 12px; font-size: 13px; opacity:.7; transition: all .3s; width: fit-content; } .foot-socials a:hover{ opacity: 1; color: var(--gold-hi); gap: 16px } .foot-socials .ic{ width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(229,201,138,.22); display:grid; place-items:center; transition: all .3s; } .foot-socials a:hover .ic{ background: var(--gold); border-color: var(--gold); color: var(--night) } .foot-socials .ic svg{ width: 14px; height: 14px } .foot-loc{ display:flex; flex-direction:column; gap: 14px; margin-top: 4px; padding: 18px; background: rgba(212,168,86,.04); border: 1px solid rgba(229,201,138,.14); } .foot-loc .pin{ font-size: 11px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600; color: var(--gold-hi); display:flex; align-items:center; gap: 8px } .foot-loc .pin svg{ width: 12px; height: 12px } .foot-loc address{ font-style: normal; font-size: 13px; line-height: 1.65; opacity: .82; } .foot-loc a.maps{ font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--gold-hi); display: inline-flex; align-items: center; gap: 8px; border-top: 1px solid rgba(229,201,138,.12); padding-top: 12px; transition: gap .3s; } .foot-loc a.maps:hover{ gap: 14px } .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:30px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; flex-wrap:wrap; gap:12px} .foot-bottom .creds{ display:flex; gap: 18px; align-items:center } .foot-bottom .creds em{ font-family: var(--f-serif); font-style: italic; color: var(--gold-hi); text-transform: none; letter-spacing: 0; font-weight:500 } @media (max-width: 900px){ .foot-grid{grid-template-columns:1fr 1fr; gap:32px} .foot-brand{grid-column: span 2} } /* ===== PULL QUOTE / CHAIRMAN'S VOICE ===== */ .pull-quote{ background: var(--night); color: var(--paper); padding: clamp(100px, 14vw, 180px) var(--gutter); position:relative; overflow:hidden; z-index:3; border-top:1px solid var(--night-line); border-bottom:1px solid var(--night-line); } .pull-quote::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse at 80% 40%, rgba(212,168,86,.10), transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(212,168,86,.06), transparent 50%); } .pq-mark{ position:absolute; left:var(--gutter); top: clamp(40px, 6vw, 90px); font-family:var(--f-serif); font-style:italic; color: var(--gold-hi); font-size: clamp(140px, 18vw, 260px); line-height:1; opacity:.22; user-select:none; pointer-events:none; } .pq-inner{ position:relative; z-index:2; max-width: 1100px; margin: 0 auto; display:grid; grid-template-columns: 1fr; gap: 50px; } .pq-eye{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color: var(--gold-hi); font-weight:600; display:flex; align-items:center; gap:14px; } .pq-eye::before{ content:""; width:32px; height:1px; background: var(--gold-hi) } .pq-text{ font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.15; letter-spacing:-.005em; max-width: 22ch; } .pq-text em{ color: var(--gold-hi); font-style: italic; font-weight: 500; } .pq-attr{ display:flex; align-items:center; gap: 20px; padding-top: 28px; border-top: 1px solid var(--night-line); max-width: 600px; } .pq-attr .av{ width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, rgba(212,168,86,.3), rgba(212,168,86,.06)); border: 1px solid rgba(212,168,86,.45); display:grid; place-items:center; flex-shrink: 0; overflow: hidden; position: relative; } .pq-attr .av img{ width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.05); } .pq-attr .who{ display:flex; flex-direction:column; gap:4px } .pq-attr .who b{ font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; } .pq-attr .who span{ font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); font-weight: 500; } @media (max-width: 700px){ .pq-text{ font-size: 28px } .pq-attr{ flex-wrap: wrap; gap: 14px } .pq-attr .av{ width: 54px; height: 54px; font-size: 18px } } .geo{ background: var(--night); color: var(--paper); padding: clamp(60px, 8vw, 110px) var(--gutter) clamp(100px, 14vw, 180px); position:relative; z-index:3; overflow:hidden; border-top:1px solid var(--night-line); } .geo::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse at 70% 40%, rgba(181,136,64,.10), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(212,168,86,.06), transparent 55%); } .geo-head{display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:end; margin-bottom:70px; position:relative; z-index:2} .geo-head h2{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; font-size: clamp(40px, 6vw, 96px); line-height:.94; text-transform:uppercase; margin-top:14px; } .geo-head h2 em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color:var(--gold-hi); text-transform:none } .geo-head p{max-width:44ch; color: rgba(244,239,227,.7); line-height:1.65; font-size:15px} .geo-grid{ display:grid; grid-template-columns: 320px 1fr; gap: clamp(40px, 5vw, 80px); align-items:stretch; position:relative; z-index:2 } .geo-list{ display:flex; flex-direction:column; border-top:1px solid var(--night-line); } .geo-row{ display:grid; grid-template-columns: 22px 1fr auto; align-items:center; gap:14px; padding: 22px 0; border-bottom:1px solid var(--night-line); cursor:pointer; transition: padding-left .35s var(--easeOut), background .35s var(--easeOut); } .geo-row:hover, .geo-row.active{ padding-left: 10px } .geo-row .marker{ width:10px; height:10px; border-radius:50%; background: var(--gold); position:relative; transition: transform .35s var(--spring); } .geo-row:hover .marker, .geo-row.active .marker{ transform: scale(1.4); box-shadow: 0 0 0 6px rgba(212,168,86,.15) } .geo-row .name{ font-family:var(--f-display); font-weight:600; font-size:18px; letter-spacing:.01em; text-transform:uppercase } .geo-row .name em{ display:block; font-family:var(--f-serif); font-style:italic; font-size:13px; font-weight:400; opacity:.65; margin-top:4px; letter-spacing:0; text-transform:none } .geo-row .badge{ font-family:var(--f-serif); font-style:italic; color: var(--gold-hi); font-size:14px } .geo-row.hq .marker{ background: var(--gold-hi); transform: scale(1.4); box-shadow: 0 0 0 6px rgba(212,168,86,.18) } .geo-row.hq .badge{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-style:normal; font-family:var(--f-body); font-weight:600; color: var(--gold) } .geo-map{ position:relative; background: radial-gradient(ellipse at center, rgba(20,17,12,.0), rgba(8,6,4,.5)), linear-gradient(180deg, #1A150B 0%, #100C07 100%); border:1px solid var(--night-line); aspect-ratio: 16/10; overflow:hidden; } .geo-map svg{ position:absolute; inset:0; width:100%; height:100%; display:block } /* Map pin states — premium 3-layer */ .geo-pin{ cursor:pointer; transition: opacity .35s; } .geo-pin .pulse{ transform-origin: center; animation: pin-pulse 2.6s cubic-bezier(.4,0,.2,1) infinite; } .geo-pin .pulse.delay{ animation-delay: 1.3s } @keyframes pin-pulse{ 0%{ r:6; opacity:.65 } 100%{ r:34; opacity:0 } } .geo-pin.hq .pulse{ animation-duration: 2.4s } .geo-pin .halo{ transform: scale(0); opacity: 0; transform-origin: center; transition: transform .65s var(--spring), opacity .6s var(--easeOut); } .geo-pin.in .halo{ transform: scale(1); opacity: .3 } .geo-pin .ring{ transform-origin: center; transform: scale(0); opacity:0; transition: transform .55s var(--spring), opacity .5s var(--easeOut); } .geo-pin.in .ring{ transform: scale(1); opacity:.9 } .geo-pin .core{ transform: scale(0); transform-origin: center; transition: transform .5s var(--spring); } .geo-pin.in .core{ transform: scale(1) } .geo-pin.hq .core{ filter: drop-shadow(0 0 8px rgba(229,201,138,.6)) } /* Pin labels — opacity-only fade so the SVG `transform` attribute (set inline in HTML and by JS for mobile) is NOT overridden by CSS. */ .geo-pin .label-group{ opacity: 0; transition: opacity .45s var(--easeOut); } .geo-pin.in .label-group{ opacity: 1; transition-delay: .35s } .geo-pin.hq.in .label-group{ transition-delay: .1s } /* Hover dimming — siblings fade */ .geo.has-hover .geo-pin{ opacity: .3 } .geo.has-hover .geo-pin.hover{ opacity: 1 } .geo.has-hover .geo-line{ opacity: .12 } .geo.has-hover .geo-line.hover{ opacity: 1 } /* Connection lines stroke-draw animation */ .geo-line{ fill:none; stroke: rgba(212,168,86,.5); stroke-width:1; stroke-linecap:round; stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.6s var(--easeOut), opacity .4s var(--easeOut); } .geo.in .geo-line{ stroke-dashoffset: 0 } .geo-line.dl-1{ transition-delay: .4s } .geo-line.dl-2{ transition-delay: .65s } .geo-line.dl-3{ transition-delay: .9s } .geo-line.dl-4{ transition-delay: 1.15s } .geo-line.dl-5{ transition-delay: 1.4s } /* Flowing dash overlay along the same lines */ .geo-line.flow{ stroke: var(--gold-hi); stroke-width: 1.4; stroke-dasharray: 3 14; opacity:0; filter: drop-shadow(0 0 2px rgba(229,201,138,.4)); transition: opacity 1s var(--easeOut) 2.2s; } .geo.in .geo-line.flow{ opacity:.85; animation: dash-flow 22s linear infinite } @keyframes dash-flow{ to { stroke-dashoffset: -1400 } } /* Map overlay UI */ .map-title{ position: absolute; top: 22px; left: 24px; z-index: 3; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; font-weight: 600; color: rgba(229,201,138,.6); display: flex; align-items: center; gap: 9px; pointer-events: none; } .map-title .dot{ width:6px; height:6px; background: var(--gold-hi); border-radius: 50%; box-shadow: 0 0 8px rgba(229,201,138,.7); animation: pulse 2s infinite } .map-coords{ position: absolute; bottom: 18px; right: 24px; z-index: 3; font-family: var(--f-serif); font-style: italic; font-size: 13px; color: rgba(229,201,138,.5); letter-spacing: .04em; pointer-events: none; } .map-coords::before{ content: ""; display: inline-block; vertical-align: middle; width: 20px; height: 1px; background: rgba(229,201,138,.3); margin-right: 8px; } .geo-foot{ margin-top:50px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; padding-top:30px; border-top:1px solid var(--night-line); position:relative; z-index:2; } .geo-foot .legend{display:flex; gap:24px; flex-wrap:wrap} .geo-foot .legend span{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: rgba(244,239,227,.7); font-weight:600 } .geo-foot .legend i{ font-style:normal; width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block } .geo-foot .legend .hq i{ background:var(--gold-hi); box-shadow:0 0 0 3px rgba(212,168,86,.2) } @media (max-width: 1100px){ .geo-head{grid-template-columns:1fr; gap:20px} } @media (max-width: 900px){ .geo-grid{grid-template-columns:1fr; gap:30px} } @media (max-width: 600px){ /* Phone-only: portrait map matching the compact pin layout from JS. */ .geo-map{ aspect-ratio: 360 / 580; height: auto; overflow: hidden; min-width: 0; max-width: 100%; } .geo-map svg{ position: absolute; inset: 0; width: 100%; height: 100%; } } /* ===== CLIENTS MARQUEE ===== */ .clients{ padding: 60px 0; background: var(--paper); border-top:1px solid var(--line); position:relative; z-index:3; overflow:hidden; } .clients-head{ padding: 0 var(--gutter); display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:24px; margin-bottom:40px } .clients-head .label{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color: var(--mute); font-weight:600 } .clients-head .ttl{ font-family:var(--f-display); font-weight:600; letter-spacing:-.015em; font-size: clamp(20px, 1.8vw, 28px); margin-top:8px; } .clients-head .ttl em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color: var(--gold) } .clients-head .note{ font-size:12px; color: var(--mute); max-width:30ch; text-align:right; line-height:1.5 } .clients-track{ display:flex; gap:80px; padding: 24px 0; /* Was 38s. Same reasoning as .ticker .row — speed up for steady perceived scroll, with an extra-fast mobile override. */ animation: marquee 22s linear infinite; white-space:nowrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .clients-track .c{ display:inline-flex; align-items:center; gap:18px; font-family:var(--f-display); font-weight:700; font-size: clamp(28px, 3vw, 44px); letter-spacing:.01em; color: var(--ink); transition: color .3s; text-transform: uppercase; } .clients-track .c:hover{ color: var(--gold-lo) } .clients-track .c em{ font-family:var(--f-serif); font-style:italic; font-weight:500; color: var(--gold-lo) } .clients-track .dot{ width:8px; height:8px; background:var(--gold); transform: rotate(45deg); display:inline-block } /* ===== MOBILE DRAWER ===== */ .drawer{ position:fixed; inset:0; z-index:100; pointer-events:none; visibility:hidden; } .drawer.open{ pointer-events:auto; visibility:visible } .drawer-bg{ position:absolute; inset:0; background: rgba(20,17,12,.62); backdrop-filter: blur(12px); opacity:0; transition: opacity .5s var(--easeOut); } .drawer.open .drawer-bg{ opacity:1 } .drawer-panel{ position:absolute; top:0; right:0; bottom:0; width: min(92vw, 480px); background: var(--night); color: var(--paper); display:flex; flex-direction:column; transform: translateX(100%); transition: transform .6s var(--easeOut); padding: 28px; } .drawer.open .drawer-panel{ transform: translateX(0) } .drawer-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:36px} .drawer-top img{height:72px; width:auto} .drawer-close{ width:40px; height:40px; border:1px solid rgba(244,239,227,.18); border-radius:50%; display:grid; place-items:center; transition: background .3s; } .drawer-close:hover{ background: rgba(244,239,227,.06) } .drawer-close svg{ width:14px; height:14px } .drawer ul{ list-style:none; display:flex; flex-direction:column; gap:0; margin-bottom:auto } .drawer ul li{ border-bottom:1px solid var(--night-line) } .drawer ul a{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding: 16px 4px; font-family:var(--f-display); font-weight:600; font-size: clamp(16px, 4vw, 20px); letter-spacing:-.005em; text-transform:uppercase; transition: color .3s, padding-left .3s var(--easeOut); } .drawer ul a:hover{ color: var(--gold-hi); padding-left:14px } .drawer ul .n{ font-family:var(--f-serif); font-style:italic; font-size:14px; color: var(--gold-hi); font-weight:500; text-transform:none; letter-spacing:0 } .drawer-foot{ padding-top:28px; border-top:1px solid var(--night-line); display:flex; flex-direction:column; gap:14px; font-size:13px; opacity:.75 } .drawer-foot a{ color: var(--gold-hi) } /* ===== SERVICE TAGS ENRICHMENT ===== */ .service .desc .tags{ margin-top: 14px; display:flex; flex-wrap: wrap; gap: 6px; } .service .desc .tags span{ padding: 6px 12px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; border: 1px solid rgba(229,201,138,.18); color: rgba(229,201,138,.85); font-weight: 600; transition: all .35s var(--easeOut); } .service:hover .desc .tags span{ border-color: rgba(229,201,138,.4); background: rgba(212,168,86,.06); } @media (max-width:900px){ .service .desc .tags{ gap:5px; margin-top: 10px } .service .desc .tags span{ font-size: 9px; padding: 5px 10px } } /* ===== NAV NUMBERS ON HOVER ===== */ .nav ul a{ display:inline-flex; align-items:baseline; gap:6px } .nav ul a .ni{ font-family:var(--f-serif); font-style:italic; font-size:11px; opacity:.5; transition: opacity .3s; letter-spacing:0 } .nav ul a:hover .ni{ opacity:.95; color: var(--gold) } .reveal{opacity:0; transform: translateY(50px); transition: opacity 1.1s var(--easeOut), transform 1.1s var(--easeOut)} .reveal.in{opacity:1; transform:none} .reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s} .reveal-d5{transition-delay:.4s} /* Mask-reveal for headings — lines wipe up */ .mask-reveal{ display:inline-block; overflow:hidden; vertical-align:bottom; } .mask-reveal > span{ display:inline-block; transform: translateY(110%); transition: transform 1.1s var(--easeOut) } .mask-reveal.in > span{ transform:translateY(0) } /* Block-level line reveal (used in hero h1) */ .line-reveal{ display:block; overflow:hidden; line-height: .96; padding-bottom: .04em; } .line-reveal > span{ display:block; transform: translateY(110%); transition: transform 1.2s var(--easeOut); } .line-reveal.in > span{ transform: translateY(0) } .line-reveal.d1 > span{ transition-delay: .04s } .line-reveal.d2 > span{ transition-delay: .14s } .line-reveal.d3 > span{ transition-delay: .24s } .line-reveal.d4 > span{ transition-delay: .34s } .line-reveal.d5 > span{ transition-delay: .44s } /* Image clip reveal */ .clip-reveal{ clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--easeOut) } .clip-reveal.in{ clip-path: inset(0 0 0 0) } /* ============================================================= RESPONSIVE — WORLD-CLASS POLISH PASS ============================================================= */ /* Prevent any accidental horizontal overflow at any size. IMPORTANT: do NOT use overflow-x:hidden on html/body — it creates a scroll container that breaks position:sticky descendants (e.g. the timeline). `overflow:clip` on html alone is sufficient and keeps sticky working. */ html { overflow-x: clip; max-width: 100vw } body { max-width: 100vw } img, svg, video { max-width: 100% } /* Apply clip ONLY to sections that don't host sticky descendants. The .timeline section needs to allow vertical sticky behavior, so its overflow rules are set explicitly in the timeline block above. */ footer, header { max-width: 100vw; overflow-x: clip } section:not(.timeline) { max-width: 100vw; overflow-x: clip } /* ---------- 1280px and below: ultrabook / small desktop ---------- */ @media (max-width: 1280px){ .hero h1{ font-size: clamp(40px, 9vw, 132px) } .stats-head h2{ font-size: clamp(26px, 3vw, 42px) } .services-head h2{ font-size: clamp(36px, 5.4vw, 78px) } .proj-head h2{ font-size: clamp(34px, 4.8vw, 64px) } .geo-head h2, .values-head h2, .tl-head-wrap h2{ font-size: clamp(36px, 5vw, 72px) } .contact-head h2{ font-size: clamp(42px, 7vw, 100px) } } /* ---------- 1100px: tablet landscape ---------- */ @media (max-width: 1100px){ .nav ul{ gap: 24px } .nav ul a{ font-size: 12px } .stats-head h2{ max-width: 26ch } .services-head{ grid-template-columns: 1fr 1fr; gap: 30px } .proj-bento{ grid-auto-rows: clamp(180px, 18vw, 240px) } .geo-grid{ grid-template-columns: 280px 1fr; gap: 40px } .about-grid{ grid-template-columns: 1fr 1.3fr; gap: 40px } .contact-main{ grid-template-columns: 1.3fr 1fr; gap: 24px } .form-grid{ gap: 20px 20px } } /* ---------- 980px: tablet portrait - mobile menu activates ---------- */ @media (max-width: 980px){ .nav ul{ display: none } .menu-btn{ display: flex; flex-direction: column; gap: 5px } .menu-btn span{ width: 24px; height: 1.5px; background: currentColor } .nav .brand img{ height: 80px } .nav.scrolled .brand img{ height: 64px } .stats-head{ flex-direction: column; align-items: flex-start; gap: 18px } .proj-head{ flex-direction: column; align-items: flex-start; gap: 20px } .proj-head .meta{ text-align: left; max-width: 50ch } .gal-head{ flex-direction: column; align-items: flex-start; gap: 20px } .gal-head .right{ align-items: flex-start; max-width: 100%; flex-direction: row; justify-content: space-between; width: 100%; gap: 20px } .gal-head .right p{ text-align: left } .clients-head{ flex-direction: column; align-items: flex-start; gap: 14px } .clients-head .note{ text-align: left; max-width: 100% } .geo-foot{ flex-direction: column; align-items: flex-start } .geo-head{ grid-template-columns: 1fr; gap: 20px } } /* ---------- 900px: full mobile mode ---------- */ @media (max-width: 900px){ /* Hero */ .hero{ min-height: 640px } .hero h1{ font-size: clamp(38px, 11vw, 88px); max-width: none } .hero-frame{ padding-bottom: 100px } .hero-bottom{ grid-template-columns: 1fr; gap: 22px; align-items: flex-start } .hero-meta{ align-items: flex-start } .hero-meta .big{ font-size: clamp(48px, 12vw, 72px) } .hero-progress{ display: none } /* Move arrows from top-right (collides with menu button) to bottom-right of the hero — paired with scroll-cue on the bottom-left for balance. */ .hero-nav-ctrl{ top: auto; bottom: 24px; right: var(--gutter); gap: 10px } .hero-counter{ font-size: 13px } .hero-counter b{ font-size: 17px } .hero-arrow{ width: 36px; height: 36px } /* Stats */ .stats-grid{ grid-template-columns: 1fr 1fr; gap: 0 } .stat{ padding: 40px 16px 28px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line) } .stat:nth-child(2){ border-right: 0 } .stat:nth-child(3), .stat:nth-child(4){ border-bottom: 0 } .stat:nth-child(4){ border-right: 0 } .stat .num{ font-size: clamp(48px, 13vw, 78px) } .stat .cap{ font-size: 12px; max-width: 18ch } .stat .sub{ font-size: 12px } /* About */ .about-grid{ grid-template-columns: 1fr; gap: 30px } .about-media{ min-height: 0; aspect-ratio: 4/5; order: -1 } .about-media img{ object-position: 50% 15% } .about-media .badge .year{ font-size: clamp(64px, 14vw, 88px) } .about-text{ gap: 28px } /* Pull quote */ .pq-mark{ font-size: clamp(110px, 26vw, 180px); top: 30px; opacity: .14 } .pq-text{ font-size: clamp(26px, 6.5vw, 40px) } .pq-inner{ gap: 32px } .pq-attr{ flex-wrap: wrap } /* Services */ .services-head{ grid-template-columns: 1fr; gap: 18px } .service{ grid-template-columns: 36px 1fr 36px; gap: 14px 18px; padding: 30px 0 } .service .ttl{ font-size: clamp(22px, 5.5vw, 30px) } .service .desc{ grid-column: 2; font-size: 13px; color: rgba(244,239,227,.6) } .service .ser-img{ display: none } .service .go{ width: 38px; height: 38px } .service:hover{ padding-left: 0 } /* Projects */ .proj-bento{ grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; gap: 12px; } .proj-bento .featured{ grid-column: 1 / -1; grid-row: span 1 } .card h3{ font-size: clamp(15px, 3.8vw, 20px) } .card.featured h3{ font-size: clamp(22px, 5vw, 28px) } .card .meta{ inset: auto 18px 18px 18px } .card .idx{ top: 56px; left: 18px } .card .status{ top: 16px; left: 18px; padding: 5px 10px; font-size: 9px } .card .view{ top: 16px; right: 18px; width: 36px; height: 36px } .proj-filters{ margin-bottom: 22px; gap: 6px } .proj-filter{ padding: 8px 14px; font-size: 10px } /* Geo */ .geo-grid{ grid-template-columns: 1fr; gap: 28px } .geo-list{ order: 2 } .geo-row .name{ font-size: 16px } .geo-foot{ font-size: 11px } .geo-foot .legend{ gap: 14px; font-size: 10px } /* Values */ .values-grid{ grid-template-columns: 1fr 1fr; gap: 0 } .value{ min-height: 0; padding: 36px 20px 30px 0 } .value:nth-child(2){ border-right: 0 } .value:nth-child(-n+2){ border-bottom: 1px solid var(--night-line) } .value h3{ font-size: 26px; margin: 18px 0 14px } /* Timeline mobile fallback */ .timeline{ height: auto !important } .tl-sticky{ position: static; height: auto } .tl-head-wrap{ grid-template-columns: 1fr; gap: 20px; padding: 60px var(--gutter) 0 } .tl-head-wrap h2{ font-size: clamp(36px, 9vw, 60px) } .tl-viewport{ overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 40px 0 60px } .tl-viewport::-webkit-scrollbar{ display: none } .tl-track{ transform: none !important; padding: 0 var(--gutter) } .tl-card{ scroll-snap-align: start; opacity: 1; flex: 0 0 280px; padding: 0 } .tl-card .year{ font-size: clamp(60px, 14vw, 88px) } .tl-progress, .tl-hint{ display: none } /* Gallery */ .gal-bento{ grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 10px } .gal-bento .g{ grid-column: auto !important; grid-row: auto !important } .gal-bento .g1{ grid-column: span 2 !important; grid-row: span 2 !important } /* Clients marquee — track is much shorter on mobile so animation distance (translateX -50%) is small; shorten duration to keep perceived speed. */ .clients-track{ gap: 50px; padding: 18px 0; animation-duration: 14s } .clients-track .c{ font-size: 24px } /* Hero-altı values ticker — same shortening rationale. */ .ticker .row{ animation-duration: 16s } /* Contact */ .contact-head{ grid-template-columns: 1fr; gap: 18px; padding-bottom: 50px; margin-bottom: 40px } .contact-head h2{ font-size: clamp(44px, 12vw, 90px); margin-top: 14px } .contact-main{ grid-template-columns: 1fr; gap: 50px } .form-grid{ grid-template-columns: 1fr; gap: 18px } .submit-row{ flex-direction: column; align-items: stretch; gap: 18px } .submit-row .note{ max-width: none } .contact-form .contact-btn{ justify-content: center; padding: 18px 28px } .contact-info-list .row .val{ font-size: 17px } /* Footer */ .foot-grid{ grid-template-columns: 1fr 1fr; gap: 36px 24px } .foot-brand{ grid-column: 1 / -1 } .foot-bottom{ flex-direction: column; align-items: flex-start; gap: 14px; text-align: left } .foot-loc{ padding: 14px } } /* ---------- 700px: small tablet / large phone ---------- */ @media (max-width: 700px){ :root{ --gutter: 20px } .nav{ padding: 14px 20px } .nav.scrolled{ padding: 10px 20px } .nav .brand img{ height: 72px } .nav.scrolled .brand img{ height: 60px } .nav-right{ gap: 14px; font-size: 11px } /* Hide language switcher — keep in drawer */ .nav .lang{ display: none } .hero h1{ font-size: clamp(36px, 12vw, 70px); line-height: .96 } .hero h1 em{ font-size: inherit } .stat .num{ font-size: clamp(44px, 14vw, 68px) } .stat .num sup{ font-size: .42em } .pq-text{ font-size: clamp(22px, 6.5vw, 32px); line-height: 1.18 } .service{ grid-template-columns: 28px 1fr 32px; gap: 12px 14px } .service .num{ font-size: 16px } .service .ttl{ font-size: clamp(20px, 5.8vw, 26px) } .service .desc .tags{ gap: 4px } .service .desc .tags span{ font-size: 9px; padding: 4px 9px; letter-spacing: .18em } /* Projects to single column on small phones */ .proj-bento{ grid-template-columns: 1fr; grid-auto-rows: minmax(280px, auto) } .proj-bento .featured{ grid-column: auto } .card{ aspect-ratio: 4/3 } /* Gallery to clean 2col */ .gal-bento{ grid-auto-rows: 140px } /* Drawer — slightly more compact on phones so menu fits comfortably */ .drawer-panel{ width: min(94vw, 380px); padding: 22px } .drawer ul a{ font-size: 18px; padding: 14px 4px } /* Footer */ .foot-grid{ grid-template-columns: 1fr } .foot-brand{ grid-column: auto } /* Stats badge */ .stat{ padding: 32px 12px 22px 0 } /* Ticker downsized */ .ticker{ padding: 16px 0 } .ticker .row{ font-size: 16px; gap: 36px } /* Hero arrows on small — stay anchored to bottom-right (set in 900px block) */ .hero-nav-ctrl{ right: 12px } .hero-arrow{ width: 32px; height: 32px } .hero-arrow svg{ width: 11px; height: 11px } .hero-counter{ font-size: 12px } .hero-counter b{ font-size: 15px } /* About */ .about-media .corner{ font-size: 10px; letter-spacing: .25em } } /* ---------- 480px: small mobile (iPhone SE etc) ---------- */ @media (max-width: 480px){ :root{ --gutter: 16px } .nav{ padding: 12px 16px } .nav .brand img{ height: 64px } .nav.scrolled .brand img{ height: 54px } .hero{ min-height: 580px } .hero h1{ font-size: clamp(32px, 12vw, 56px); line-height: .98 } .hero-frame{ padding-bottom: 80px } .hero-bottom{ gap: 18px } .hero-bottom p{ font-size: 14px } .hero-cta{ padding: 15px 22px 15px 26px; font-size: 10.5px; gap: 14px } .hero-meta .big{ font-size: 44px } .hero-meta{ font-size: 10px } .stats{ padding: 60px var(--gutter) } .stats-grid{ grid-template-columns: 1fr; gap: 0 } .stat{ padding: 30px 0; border-right: 0; border-bottom: 1px solid var(--line) } .stat:last-child{ border-bottom: 0 } .stat .num{ font-size: 56px } .about{ padding: 60px var(--gutter) } .about .lede{ font-size: 26px } .about-media{ aspect-ratio: 4/5 } .about-media img{ object-position: 50% 12% } .pq-mark{ font-size: 130px; left: 16px; top: 24px; opacity: .12 } .pq-inner{ gap: 28px } .pq-text{ font-size: 24px } .pq-attr{ padding-top: 22px } .pq-attr .av{ width: 48px; height: 48px; font-size: 16px } .pq-attr .who b{ font-size: 14px } .pq-attr .who span{ font-size: 10px } .services{ padding: 60px var(--gutter) 0 } .services-head{ margin-bottom: 40px } .service{ padding: 24px 0; grid-template-columns: 24px 1fr 28px } .service .num{ font-size: 14px } .service .ttl{ font-size: 22px } .service .desc{ font-size: 12.5px } .projects{ padding: 70px var(--gutter) } .proj-head h2{ font-size: clamp(30px, 9vw, 44px) } .proj-filter{ padding: 7px 11px; font-size: 9.5px; letter-spacing: .18em } .proj-filter .n{ font-size: 10px } .geo{ padding: 70px var(--gutter) } .geo-head h2{ font-size: clamp(34px, 10vw, 50px) } .geo-row{ padding: 18px 0 } .geo-row .name{ font-size: 15px } .geo-row .name em{ font-size: 12px } .clients{ padding: 36px 0 } .clients-head{ padding: 0 var(--gutter); margin-bottom: 28px } .clients-track{ gap: 36px } .clients-track .c{ font-size: 20px } .values{ padding: 70px var(--gutter) } .values-head{ margin-bottom: 50px } .values-grid{ grid-template-columns: 1fr; gap: 0 } .value{ padding: 28px 0; min-height: 0; border-right: 0; border-bottom: 1px solid var(--night-line) } .value:last-child{ border-bottom: 0 } .value h3{ font-size: 22px; margin: 14px 0 12px } .value p{ font-size: 13px } .timeline{ padding: 60px 0 } .tl-card{ flex: 0 0 240px } .tl-card .year{ font-size: 56px } .gallery{ padding: 70px var(--gutter) } .gal-head h2{ font-size: clamp(28px, 9vw, 44px) } .gal-bento{ grid-auto-rows: 110px; gap: 8px } .contact{ padding: 90px var(--gutter) 70px } .contact-head h2{ font-size: clamp(40px, 12vw, 68px) } .contact-head p{ font-size: 14.5px } .form-eye{ font-size: 10px; letter-spacing: .28em } .form-intro{ font-size: 13px } .field input, .field textarea, .field select{ font-size: 15px; padding: 24px 0 12px } .field label{ top: 24px; font-size: 14px } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .field.has-value label{ top: 4px; font-size: 9px } .contact-info-list .row{ padding: 18px 0 } .contact-info-list .row .val{ font-size: 15px } .form-privacy{ font-size: 10.5px } .contact-form .contact-btn{ padding: 14px 22px; font-size: 12px; letter-spacing: .22em; gap: 14px } /* Cookie banner: brighter border + compact button padding on phones */ .cookie-banner{ padding: 18px 16px; border-color: rgba(229,201,138,.5) } .cookie-btn{ padding: 11px 14px; font-size: 11.5px } .consent-field .consent-text{ font-size: 11.5px; line-height: 1.5 } footer{ padding: 60px var(--gutter) 24px } .foot-brand img{ height: 56px } .foot-grid{ padding-bottom: 36px } .foot ul{ font-size: 13px; gap: 8px } .scroll-prog{ height: 1.5px } .to-top{ width: 40px; height: 40px; right: 14px; bottom: 14px } } /* ---------- 360px: tiny mobile (rare but real) ---------- */ @media (max-width: 360px){ :root{ --gutter: 14px } .hero h1{ font-size: 32px } .stat .num{ font-size: 50px } .pq-text{ font-size: 22px } .contact-head h2{ font-size: 38px } } /* ---------- Wide screens (1600px+) — keep things from looking lost ---------- */ @media (min-width: 1600px){ :root{ --gutter: clamp(48px, 5vw, 88px) } } /* ---------- Ultra-wide (1920px+) — cap content width on certain sections ---------- */ @media (min-width: 1920px){ .hero-frame{ max-width: 1700px; margin-left: auto; margin-right: auto; left: 0; right: 0 } /* Other sections already use clamp() so they breathe well */ } /* Reduce motion across the board */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .hero-slide.active .img{ transform: none !important } .geo-line, .geo-line.flow, .pulse{ animation: none !important } .clients-track, .ticker .row{ animation: none !important } .reveal, .line-reveal > span, .mask-reveal > span, .clip-reveal{ opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ---------- SHORT VIEWPORTS (laptop, 13"–14") — shrink hero h1 to avoid nav overlap ---------- */ @media (max-height: 820px){ .hero h1{ font-size: clamp(38px, 7.5vw, 108px); line-height:.94 } .hero-bottom p{ font-size: 14px; line-height: 1.5 } .hero-meta .big{ font-size: clamp(40px, 4.5vw, 64px) } .hero-bottom{ gap: 24px } .hero-frame{ gap: 14px } } @media (max-height: 720px){ .hero h1{ font-size: clamp(34px, 6.5vw, 84px); line-height:.96 } .hero-bottom p{ display:none } /* keep only meta on very short screens */ .hero-bottom{ grid-template-columns: 1fr; justify-content: flex-end; gap: 14px } .hero-cta{ margin-top: 0 } .hero-frame{ gap: 12px; top: clamp(120px, 13vh, 150px); bottom: clamp(50px, 6vh, 80px) } .hero-meta .big{ font-size: clamp(36px, 4vw, 56px) } .hero-meta{ font-size: 10px } } @media (max-height: 620px){ .hero{ min-height: 580px } .hero h1{ font-size: clamp(28px, 4.5vw, 48px); line-height:1 } .hero-frame{ top: clamp(108px, 11vh, 130px); bottom: 26px; gap: 10px } .hero-bottom .hero-meta .big{ font-size: 32px } .hero-meta{ font-size: 9px; letter-spacing:.18em } .hero-cta{ padding: 12px 18px; font-size: 10px; margin-top: 0; letter-spacing: .22em } .hero-eye{ font-size: 10px; letter-spacing:.28em } } /* ---------- TALL WIDE SCREENS (ensure breathing room) ---------- */ @media (min-height: 1200px){ .hero{ height: min(100vh, 1200px) } } /* ================================================ COOKIE BANNER, A11Y, FOOTER SOCIAL (added 2026-05) ================================================ */ .cookie-banner{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:300; width:min(960px, calc(100% - 32px)); background: var(--night); color: var(--paper); border: 1px solid rgba(229,201,138,.25); padding: 18px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.45); border-radius: 4px; display:flex; align-items:center; gap:24px; font-size:14px; line-height:1.55; animation: cookieIn .5s var(--easeOut); } @keyframes cookieIn { from { opacity:0; transform: translate(-50%, 30px) } to { opacity:1; transform: translate(-50%,0) } } .cookie-banner[hidden]{ display:none } .cookie-inner{ display:flex; gap:24px; align-items:center; width:100%; flex-wrap:wrap } .cookie-text{ flex:1; min-width:240px } .cookie-text strong{ display:block; color: var(--gold-hi); font-size:11px; letter-spacing:.25em; text-transform:uppercase; font-weight:700; margin-bottom:6px } .cookie-text p{ margin:0; color: rgba(244,239,227,.78); font-size:13px } .cookie-text a{ color: var(--gold-hi); text-decoration: underline; text-underline-offset:3px } .cookie-actions{ display:flex; gap:10px; flex-wrap:nowrap } .cookie-btn{ font: inherit; cursor:pointer; padding: 11px 22px; border:1px solid rgba(229,201,138,.4); background: transparent; color: var(--paper); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; transition: background .2s, color .2s, border-color .2s; } .cookie-btn:hover{ border-color: var(--gold-hi); color: var(--gold-hi) } .cookie-accept{ background: var(--gold); color: var(--ink); border-color: var(--gold) } .cookie-accept:hover{ background: var(--gold-hi); color: var(--ink); border-color: var(--gold-hi) } @media (max-width: 600px){ .cookie-banner{ bottom:12px; padding:14px 16px } .cookie-inner{ gap:14px } .cookie-actions{ width:100%; } .cookie-actions .cookie-btn{ flex:1; padding: 10px 8px; font-size:11px; letter-spacing:.14em } } /* Footer social */ .foot-social{ margin-top:16px; display:flex; gap:14px; flex-wrap:wrap } .foot-social a{ display:inline-flex; align-items:center; gap:10px; color: rgba(244,239,227,.7); border:1px solid rgba(229,201,138,.2); padding:9px 14px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; transition: color .2s, border-color .2s; } .foot-social a:hover{ color: var(--gold-hi); border-color: rgba(229,201,138,.55) } /* Reduced motion: kill animation theater */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .boot{ display:none !important } .reveal, .mask-reveal, .clip-reveal, .line-reveal{ opacity:1 !important; transform:none !important; clip-path:none !important } .hero-slide .img{ transform:none !important } #cursor{ display:none !important } .hero-slide.active .img{ transform:none !important } .market-ticker .mt-track{ animation: none !important } .ticker .row{ animation: none !important } /* Timeline pin disabled — JS also avoids enabling, this is a guard */ .timeline.is-pinned{ height: auto !important } .timeline.is-pinned .tl-sticky{ position: static !important; height: auto !important; overflow: visible !important } .timeline.is-pinned .tl-track{ transform: none !important } } /* Focus visibility */ :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; } /* ===================================================================== PROJECT DETAIL PAGES (proje-*.html) Migrated from inline