/* ============================================================ BURAK BIRYAN SITE — style.css sumeyyegul.com tasarım replikasyonu ============================================================ */ /* ── Google Fonts (loaded in HTML ) ── */ /* ── CSS Custom Properties ── */ :root { /* Colors */ --color-bg: #ffffff; --color-text: #1a1a1a; --color-text-light: #666666; --color-text-medium: #333333; --color-accent: #c9ab81; --color-footer-bg: #272727; --color-footer-text: #aaaaaa; --color-section-bg: #f8f8f8; --color-border: #e0e0e0; /* Typography */ --font-heading: 'Cinzel', serif; --font-body: 'EB Garamond', serif; --font-ui: 'Open Sans', sans-serif; /* Spacing */ --section-padding-y: 140px; --container-max: 1300px; --container-padding: 35px; /* Transitions */ --transition-fast: 0.3s ease; --transition-medium: 0.5s ease; } /* ── Reset & Base ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); color: var(--color-text); background-color: var(--color-bg); line-height: 1.7; overflow-x: hidden; } a { text-decoration: none; color: inherit; transition: color var(--transition-fast); } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } /* ── Utility ── */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ── Section Caption (gold small text above headings) ── */ .section-caption { font-family: var(--font-heading); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; display: block; } .section-title { font-family: var(--font-heading); font-size: 36px; font-weight: 400; color: var(--color-text); letter-spacing: 2px; line-height: 1.3; } .section-title--decorated { display: inline-flex; align-items: center; gap: 20px; } .section-title--decorated::before, .section-title--decorated::after { content: ''; display: block; width: 40px; height: 1px; background-color: var(--color-accent); } /* ============================================================ 1. TOP BAR ============================================================ */ .top-bar { height: 38px; background-color: transparent; display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--container-padding); position: relative; z-index: 1001; } .top-bar__social { display: flex; align-items: center; gap: 12px; font-family: var(--font-ui); font-size: 12px; color: #ffffff; } .top-bar__social a { color: #ffffff; display: flex; align-items: center; gap: 8px; font-size: 12px; } .top-bar__social a:hover { color: var(--color-accent); } .top-bar__social svg { width: 20px; height: 20px; fill: currentColor; } /* ============================================================ 2. HEADER / NAVBAR ============================================================ */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: background-color var(--transition-medium), box-shadow var(--transition-medium); } .header--scrolled, .header--solid { background-color: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.06); } .header--scrolled .top-bar, .header--solid .top-bar { display: none; } .header--scrolled .nav__link, .header--solid .nav__link { color: var(--color-text); } .header--scrolled .nav__link:hover, .header--solid .nav__link:hover { color: var(--color-accent); } .logo { display: flex; align-items: center; gap: 12px; z-index: 1002; } .logo__img { height: 65px; width: auto; max-width: 220px; object-fit: contain; display: block; /* Always visible */ border-radius: 0; /* Remove circular crop for new branding logo */ filter: invert(1); /* Default to white logo for dark transparent header */ transition: all 0.3s ease; } .logo__text { display: none; /* Hide plain HTML text logo since the new brand logo image is used */ } .header--scrolled .logo__img, .header--solid .logo__img { display: block; filter: none; /* Show original dark logo on light headers */ } .nav { display: flex; align-items: center; justify-content: flex-start; padding: 0 var(--container-padding); height: 80px; } .nav__menu { display: flex; align-items: center; gap: 40px; margin-left: auto; flex-wrap: nowrap; } .nav__link { font-family: var(--font-heading); font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase; color: #ffffff; position: relative; padding: 4px 0; } .nav__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--color-accent); transition: width var(--transition-fast); } .nav__link:hover::after { width: 100%; } .nav__link:hover { color: var(--color-accent); } /* Hamburger (mobile) */ .hamburger { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 8px; position: relative; z-index: 1003; margin-left: auto; } .hamburger__line { width: 28px; height: 1.5px; background-color: #ffffff; transition: transform var(--transition-fast), opacity var(--transition-fast); } .header--scrolled .hamburger__line, .header--solid .hamburger__line { background-color: var(--color-text); } .hamburger--active .hamburger__line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .hamburger--active .hamburger__line:nth-child(2) { opacity: 0; } .hamburger--active .hamburger__line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Mobile Menu Overlay */ .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(26, 26, 26, 0.97); display: flex; align-items: center; justify-content: center; z-index: 1001; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-medium), visibility var(--transition-medium); } .mobile-menu--open { opacity: 1; visibility: visible; pointer-events: all; } .mobile-menu__close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: #ffffff; font-size: 36px; line-height: 1; cursor: pointer; padding: 8px 12px; z-index: 1; opacity: 0.8; transition: opacity var(--transition-fast); } .mobile-menu__close:hover { opacity: 1; } .mobile-menu__list { display: flex; flex-direction: column; align-items: center; gap: 25px; padding: 0; margin: 0; list-style: none; width: 100%; } .mobile-menu__link { font-family: var(--font-heading); font-size: 22px; letter-spacing: 3px; text-transform: uppercase; color: #ffffff; transition: color var(--transition-fast); } /* Button styles for dropdown trigger */ button.mobile-menu__link { background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 10px; } .mobile-menu__group { display: flex; flex-direction: column; align-items: center; width: 100%; } .mobile-menu__submenu { max-height: 0; overflow: hidden; opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 0; width: 100%; /* Closing Transition (Slightly faster / snappy) */ transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, margin 0.4s cubic-bezier(0.25, 1, 0.5, 1), margin-bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .mobile-menu__group--active .mobile-menu__submenu { max-height: 180px; /* Reduced from 250px to match actual height, eliminating lag */ opacity: 1; margin-top: 15px; margin-bottom: 10px; /* Opening Transition (Much slower and gentler) */ transition: max-height 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease, margin 0.9s cubic-bezier(0.16, 1, 0.3, 1), margin-bottom 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu__group .arrow { font-size: 11px; transition: transform var(--transition-fast); display: inline-block; color: #ffffff; } .mobile-menu__group--active .arrow { transform: rotate(180deg); } .mobile-menu__link--sub { font-family: var(--font-heading); font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; } /* ============================================================ 3. HERO SECTION ============================================================ */ .hero { position: relative; width: 100%; height: 100vh; overflow: hidden; background-color: #0a0a0a; } .hero-slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1; transform: scale(1.0); } /* Active Odd Slide: Zooms in from 1.0 to 1.06 over 5 seconds */ .hero-slide:nth-child(odd).active { opacity: 1; z-index: 2; animation: heroZoomIn 5s ease-in-out forwards; } /* Active Even Slide: Zooms out from 1.06 to 1.0 over 5 seconds */ .hero-slide:nth-child(even).active { opacity: 1; z-index: 2; animation: heroZoomOut 5s ease-in-out forwards; } /* Exiting Odd Slide: Holds final zoomed in scale (1.06) during fade out */ .hero-slide:nth-child(odd).exiting { opacity: 0; z-index: 1; transform: scale(1.06); } /* Exiting Even Slide: Holds final zoomed out scale (1.0) during fade out */ .hero-slide:nth-child(even).exiting { opacity: 0; z-index: 1; transform: scale(1.0); } @keyframes heroZoomIn { from { transform: scale(1.0); } to { transform: scale(1.06); } } @keyframes heroZoomOut { from { transform: scale(1.06); } to { transform: scale(1.0); } } .hero__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.25) 100%); pointer-events: none; z-index: 3; /* Render on top of slides */ } /* ============================================================ 4. MANZARA (Quote / Intro) SECTION ============================================================ */ .manzara { display: block; min-height: auto; background-color: var(--color-section-bg); } .manzara__text { display: flex; flex-direction: column; justify-content: center; padding: 120px 10% 120px 12%; } .manzara__caption { font-family: var(--font-heading); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; } .manzara__title { font-family: var(--font-heading); font-size: 34px; font-weight: 400; color: var(--color-text); margin-bottom: 20px; letter-spacing: 1px; } .manzara__description { font-family: var(--font-body); font-size: 18px; line-height: 1.85; color: var(--color-text-medium); font-style: italic; margin-bottom: 40px; max-width: 520px; } .manzara__image { background-size: cover; background-position: center; min-height: 400px; } /* Button — outline slit style */ .btn { display: inline-block; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; padding: 14px 36px; border: 1px solid var(--color-text); color: var(--color-text); background: transparent; cursor: pointer; position: relative; overflow: hidden; transition: color var(--transition-fast), border-color var(--transition-fast); } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: var(--color-accent); transition: left var(--transition-fast); z-index: -1; } .btn:hover { color: #ffffff; border-color: var(--color-accent); } .btn:hover::before { left: 0; } /* ============================================================ 5. PORTFOLYO (Gallery Grid) SECTION ============================================================ */ .portfolyo { padding: var(--section-padding-y) 0; text-align: center; } .portfolyo__header { margin-bottom: 60px; } .portfolyo__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .portfolio-card { position: relative; overflow: visible; /* Allows realistic frame shadows and pseudo borders to show */ cursor: pointer; text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; background-color: #faf8f5; /* Passepartout matte card backing */ padding: 18px 18px 24px; border-radius: 8px; /* Wood Frame Border Style - Midpoint Grey */ border: 12px solid #ddd; border-bottom-color: #f2f2f2; border-left-color: #ddd; border-right-color: #ddd; border-top-color: #c9c9c9; /* Frame Inner/Depth Shadow */ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15) inset, 0 5px 12px rgba(0, 0, 0, 0.12); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease; } /* Double outer depth lines (simulates professional frame framing) */ .portfolio-card::before { border-radius: 8px; bottom: -4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; content: ""; left: -4px; position: absolute; right: -4px; top: -4px; pointer-events: none; } .portfolio-card::after { border-radius: 8px; bottom: -6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); content: ""; left: -6px; position: absolute; right: -6px; top: -6px; pointer-events: none; } .portfolio-card:hover { transform: translateY(-8px) scale(1.005); border-color: #e6e6e6; border-bottom-color: #fafafa; border-top-color: #d6d6d6; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.12) inset, 0 18px 36px rgba(0, 0, 0, 0.2); } /* ── Page Header (subpages) ── */ .page-header { padding: 180px 0 80px; text-align: center; background-color: var(--color-section-bg); } .page-header__caption { font-family: var(--font-heading); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; display: block; } .page-header__title { font-family: var(--font-heading); font-size: 42px; font-weight: 400; color: var(--color-text); letter-spacing: 2px; } /* ── Series Section (seriler page) ── */ .series-section { padding: 80px 0; border-bottom: 1px solid var(--color-border); } .series-section:last-child { border-bottom: none; } .series-section__title { font-family: var(--font-heading); font-size: 30px; font-weight: 400; text-align: center; margin-bottom: 50px; letter-spacing: 2px; color: var(--color-text); } .series-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .series-grid__item { overflow: hidden; border-radius: 2px; } .series-grid__image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.6s ease; display: block; } .series-grid__item:hover .series-grid__image { transform: scale(1.04); } .series-grid__caption { font-family: var(--font-ui); font-size: 11px; color: var(--color-text-light); padding: 10px 0; text-align: center; } /* ── About page ── */ .about-section { padding: var(--section-padding-y) 0; } .about-section__inner { display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: center; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .about-section__image { width: 100%; max-width: 380px; height: auto; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); display: block; margin: 0 auto; } .about-section__text h2 { font-family: var(--font-heading); font-size: 30px; font-weight: 400; margin-bottom: 24px; letter-spacing: 1px; } .about-section__text p { font-family: var(--font-body); font-size: 18px; line-height: 1.85; color: var(--color-text-medium); margin-bottom: 16px; } /* ── Series Detail View ── */ .series-detail-header { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 40px; } .back-to-series-btn { position: absolute; left: 0; background: transparent; border: 1px solid var(--color-border); color: var(--color-text-medium); font-family: var(--font-ui); font-size: 13px; padding: 8px 16px; cursor: pointer; border-radius: 30px; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 1px; } .back-to-series-btn:hover { background-color: var(--color-border); color: var(--color-text); } .series-detail-title { font-family: var(--font-heading); font-size: 28px; color: var(--color-text); font-weight: 400; letter-spacing: 2px; } @media (max-width: 768px) { .series-detail-header { flex-direction: column; gap: 20px; } .back-to-series-btn { position: relative; left: auto; } } .portfolio-card.hidden { display: none; } .series-detail-view.hidden, .series-categories-view.hidden { display: none; } .all-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: var(--section-padding-y) 0; } .all-works-grid .portfolio-card__image-wrapper { aspect-ratio: auto; } @media (max-width: 1024px) { .series-grid { grid-template-columns: repeat(2, 1fr); } .about-section__inner { grid-template-columns: 1fr; } .all-works-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .page-header { padding: 130px 0 50px; } .page-header__title { font-size: 30px; } .series-grid { grid-template-columns: 1fr; } .all-works-grid { grid-template-columns: 1fr; } } .portfolio-card__image-wrapper { position: relative; overflow: hidden; aspect-ratio: auto; border-radius: 12px; } .portfolio-card__image { width: 100%; height: auto; display: block; transition: transform 0.6s ease; /* 3D bevel photo borders */ border: 2px solid; border-bottom-color: #ffe; border-left-color: #eed; border-right-color: #eed; border-top-color: #ccb; } .portfolio-card:hover .portfolio-card__image { transform: scale(1.04); } .portfolio-card__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 26, 26, 0); display: flex; align-items: center; justify-content: center; transition: background var(--transition-medium); } .portfolio-card:hover .portfolio-card__overlay { background: rgba(26, 26, 26, 0.25); } .portfolio-card__overlay-title { font-family: var(--font-heading); font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; opacity: 0; transform: translateY(10px); transition: opacity var(--transition-fast), transform var(--transition-fast); } .portfolio-card:hover .portfolio-card__overlay-title { opacity: 1; transform: translateY(0); } .portfolio-card__info { margin-top: auto; padding: 14px 4px 4px; text-align: left; } .portfolio-card__name { font-family: var(--font-heading); font-size: 16px; letter-spacing: 1.5px; color: var(--color-text); margin-bottom: 4px; } .portfolio-card__meta { font-family: var(--font-ui); font-size: 12px; color: var(--color-text-light); letter-spacing: 0.5px; } /* ============================================================ 6. SERGİLEMELER (Exhibitions) SECTION ============================================================ */ .exhibitions { padding: var(--section-padding-y) 0; background-color: var(--color-section-bg); } .exhibitions__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .exhibitions__intro-caption { font-family: var(--font-heading); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 8px; } .exhibitions__intro-title { font-family: var(--font-heading); font-size: 34px; font-weight: 400; color: var(--color-text); margin-bottom: 24px; } .exhibitions__intro-text { font-family: var(--font-body); font-size: 18px; line-height: 1.85; color: var(--color-text-medium); } .exhibitions__timeline { display: flex; flex-direction: column; gap: 36px; } .exhibition-item { padding-left: 24px; border-left: 2px solid var(--color-accent); } .exhibition-item__year { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--color-text); margin-bottom: 12px; letter-spacing: 1px; } .exhibition-item__entry { margin-bottom: 16px; } .exhibition-item__venue { font-family: var(--font-ui); font-size: 14px; color: var(--color-text-light); margin-bottom: 2px; } .exhibition-item__name { font-family: var(--font-body); font-size: 17px; font-style: italic; color: var(--color-text-medium); } /* ============================================================ 7. FOOTER ============================================================ */ .footer { background-color: var(--color-footer-bg); padding: 80px 0 40px; color: var(--color-footer-text); } .footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .footer__col-title { font-family: var(--font-heading); font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase; color: #ffffff; margin-bottom: 24px; } .footer__col p, .footer__col li { font-family: var(--font-ui); font-size: 14px; line-height: 2; color: var(--color-footer-text); } .footer__col a { color: var(--color-footer-text); } .footer__col a:hover { color: var(--color-accent); } .footer__bottom { max-width: var(--container-max); margin: 60px auto 0; padding: 24px var(--container-padding) 0; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; } .footer__copyright { font-family: var(--font-ui); font-size: 12px; color: rgba(255, 255, 255, 0.35); letter-spacing: 1px; } /* ============================================================ 8. BACK TO TOP BUTTON ============================================================ */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), visibility var(--transition-fast); z-index: 900; } .back-to-top--visible { opacity: 1; visibility: visible; } .back-to-top:hover { background-color: var(--color-accent); color: #ffffff; } .back-to-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } /* ============================================================ 9. SCROLL REVEAL ANIMATIONS ============================================================ */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal--visible { opacity: 1; transform: translateY(0); } .reveal--delay-1 { transition-delay: 0.1s; } .reveal--delay-2 { transition-delay: 0.2s; } .reveal--delay-3 { transition-delay: 0.3s; } .reveal--delay-4 { transition-delay: 0.4s; } /* ============================================================ 10. RESPONSIVE ============================================================ */ /* Tablet */ @media (max-width: 1024px) { :root { --section-padding-y: 100px; } .manzara { grid-template-columns: 1fr; } .manzara__text { padding: 80px 8%; } .manzara__image { min-height: 350px; } .exhibitions__inner { grid-template-columns: 1fr; gap: 50px; } .section-title { font-size: 30px; } } /* Mobile */ @media (max-width: 768px) { :root { --section-padding-y: 70px; --container-padding: 20px; } .top-bar { display: none; } .nav { justify-content: space-between; height: 60px; } .logo__text { font-size: 18px; letter-spacing: 2px; } .logo__img { height: 48px; width: auto; } .nav__menu { display: none; } .hamburger { display: flex; } .hero { height: 70vh; } .manzara__text { padding: 60px 6%; } .manzara__title { font-size: 26px; } .manzara__description { font-size: 16px; } .portfolyo__grid { grid-template-columns: 1fr; gap: 20px; } .section-title { font-size: 24px; } .footer__grid { grid-template-columns: 1fr; gap: 30px; } .exhibitions__intro-title { font-size: 26px; } } /* Small mobile */ @media (max-width: 480px) { .hero { height: 60vh; } .manzara__text { padding: 50px 5%; } .section-title { font-size: 22px; } .btn { padding: 12px 28px; font-size: 11px; } } /* Helper class for SEO and accessibility (Screen Readers) */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ── Gallery Link & Portfolio Styles ── */ .gallery-link { font-family: var(--font-heading); font-size: 16px; color: var(--color-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 1px; font-weight: 500; transition: color var(--transition-fast); margin-top: 24px; border-bottom: 1px solid transparent; padding-bottom: 2px; } .gallery-link:hover { color: var(--color-text-dark); border-bottom-color: var(--color-text-dark); } .gallery-link span { transition: transform var(--transition-fast); } .gallery-link:hover span { transform: translateX(5px); } .portfolio-document { max-width: 1000px; margin: 0 auto; padding: 20px var(--container-padding) 80px; display: flex; flex-direction: flex-col; /* fallback */ display: block; } .portfolio-document__page { width: 100%; height: auto; margin-bottom: 40px; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.05); display: block; } /* ============================================================ 11. MODERN GALLERY PAGE AESTHETICS (CUSTOM GRID & CANVAS) ============================================================ */ .gallery-header { background-color: #faf9f5 !important; padding: 150px 0 45px !important; border-bottom: 1px solid rgba(201, 171, 129, 0.2); transition: padding var(--transition-medium); } .gallery-section { background-color: #faf9f5 !important; background-image: radial-gradient(rgba(201, 171, 129, 0.15) 1.5px, transparent 1.5px), radial-gradient(rgba(201, 171, 129, 0.08) 1px, transparent 1px) !important; background-size: 32px 32px !important; background-position: 0 0, 16px 16px !important; padding: 80px 0 120px !important; position: relative; } /* Elegant shadow line separator */ .gallery-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 30px; background: linear-gradient(to bottom, rgba(201, 171, 129, 0.08), transparent); pointer-events: none; } /* Gallery page specific image wrapper tweaks */ .gallery-section .portfolio-card__image-wrapper { border-radius: 4px !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; aspect-ratio: auto !important; /* ensures consistent alignment for vertical/cropped prints */ } /* Hover overlay tag styling */ .gallery-section .portfolio-card__overlay { background: rgba(26, 26, 26, 0) !important; transition: background 0.4s ease !important; } .gallery-section .portfolio-card:hover .portfolio-card__overlay { background: rgba(26, 26, 26, 0.18) !important; } .gallery-section .portfolio-card__overlay-title { font-family: var(--font-heading) !important; font-size: 13px !important; letter-spacing: 3px !important; font-weight: 500 !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; padding: 10px 22px !important; background-color: rgba(26, 26, 26, 0.75) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; text-transform: uppercase !important; border-radius: 2px !important; } /* Mobile responsive adjustments */ @media (max-width: 768px) { .gallery-header { padding: 110px 0 30px !important; } .gallery-section { padding: 40px 0 80px !important; } .gallery-section .portfolio-card { padding: 12px 12px 16px !important; } /* Make overlays visible by default on mobile devices */ .portfolio-card__overlay { background: rgba(26, 26, 26, 0.3) !important; } .portfolio-card__overlay-title { opacity: 1 !important; transform: translateY(0) !important; } } /* Portfolio Page Document Grid aspect ratio (keeps native proportions) */ .portfolio-document-grid .portfolio-card__image-wrapper { aspect-ratio: auto !important; } /* Disable 3D frame for home page series cards */ .portfolio-card--no-frame { background-color: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } .portfolio-card--no-frame::before, .portfolio-card--no-frame::after { display: none !important; } .portfolio-card--no-frame:hover { transform: none !important; box-shadow: none !important; } /* Center series names and add gold decorative lines on both sides */ .portfolio-card--no-frame .portfolio-card__info { text-align: center !important; width: 100%; } .portfolio-card--no-frame .portfolio-card__name { display: inline-flex; align-items: center; justify-content: center; gap: 15px; } .portfolio-card--no-frame .portfolio-card__name::before, .portfolio-card--no-frame .portfolio-card__name::after { content: ''; display: block; width: 30px; height: 1px; background-color: var(--color-accent); /* Matches the gold accent color of section titles */ } /* Align heights of the series cover images on the homepage */ .portfolio-card--no-frame .portfolio-card__image-wrapper { aspect-ratio: 3 / 4 !important; } .portfolio-card--no-frame .portfolio-card__image { height: 100% !important; object-fit: cover !important; } /* Services page specific layout */ .services-grid-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1000px; margin: 40px auto 80px; padding: 0 15px; } @media (max-width: 768px) { .services-grid-layout { grid-template-columns: 1fr; gap: 30px; margin: 20px auto 60px; } } /* Floating WhatsApp Button */ .whatsapp-float { position: fixed; width: 70px; height: 70px; bottom: 30px; left: 30px; background-color: transparent; display: flex; align-items: center; justify-content: center; z-index: 1000; transition: all 0.3s ease; text-decoration: none; } .whatsapp-float img { width: 100%; height: 100%; object-fit: contain; filter: none; } .whatsapp-float:hover { background-color: transparent; transform: scale(1.1); } .whatsapp-float--hidden { opacity: 0 !important; pointer-events: none !important; transform: translateY(20px) scale(0.8) !important; } /* Mobile responsive adjustments */ @media (max-width: 768px) { .whatsapp-float { width: 55px; height: 55px; bottom: 20px; left: 20px; } } /* Image Comparison Slider */ .image-comparison-slider { position: relative; width: 100%; max-width: 450px; margin: 30px auto 50px; aspect-ratio: 787/1400; overflow: hidden; border-radius: 8px; box-shadow: var(--shadow-premium); border: 1px solid rgba(0, 0, 0, 0.1); user-select: none; } .image-comparison-slider img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-comparison-slider__image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .image-comparison-slider__image-container--before { z-index: 1; } .image-comparison-slider__image-container--after { z-index: 2; width: 50%; border-right: 2px solid var(--color-accent); } .image-comparison-slider__image-container--after img { position: absolute; top: 0; left: 0; height: 100%; max-width: none; } .image-comparison-slider__label { position: absolute; bottom: 20px; background-color: rgba(0, 0, 0, 0.65); color: #fff; font-family: var(--font-ui); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; pointer-events: none; z-index: 10; font-weight: 500; } .image-comparison-slider__label--before { right: 20px; } .image-comparison-slider__label--after { left: 20px; } .image-comparison-slider__handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background-color: var(--color-accent); transform: translateX(-50%); z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .image-comparison-slider__handle-line { flex: 1; width: 2px; background-color: var(--color-accent); } .image-comparison-slider__handle-button { width: 38px; height: 38px; border-radius: 50%; background-color: var(--color-accent); color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.3); margin: 10px 0; pointer-events: none; } .image-comparison-slider__handle-button svg { width: 18px; height: 18px; } .image-comparison-slider__input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 20; margin: 0; } /* Sliders container layout */ .sliders-container { display: flex; gap: 40px; justify-content: center; max-width: 1000px; margin: 30px auto 50px; padding: 0 15px; } .sliders-container .image-comparison-slider { margin: 0; } @media (max-width: 768px) { .sliders-container { flex-direction: column; align-items: center; gap: 35px; } } /* Footer Social Icon Links with visibility precautions */ .footer__social-links { display: flex; gap: 12px; margin-top: 15px; flex-wrap: wrap; } .footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .footer__social-link:hover { background-color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-3px); box-shadow: 0 4px 12px rgba(220, 180, 110, 0.2); } .footer__social-icon { width: 18px; height: 18px; object-fit: contain; filter: invert(1); /* Inverts colors: preserves details (e.g. play triangle, phone, lens) while turning outlines white */ transition: all 0.3s ease; } .footer__social-link:hover .footer__social-icon { filter: brightness(0); /* Converts all shapes to solid black when hovered on the golden background */ } /* ── Copy & Asset Protection ── */ /* Selection Block: Disable text and image selection globally */ body, img, video, .portfolio-card, .image-comparison-slider, .series-grid, .all-works-grid { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; /* Disables callouts on iOS tap-hold */ } /* Exclude inputs/textareas if they are ever added, to keep them usable */ input, textarea { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } /* Allow text selection specifically for mailto links */ a[href^="mailto:"] { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } /* Image protector overlay styling */ .image-protector-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 8; background-color: rgba(0, 0, 0, 0); /* Invisible transparent layer */ pointer-events: auto; /* Receives clicks and drags instead of the image underneath */ } /* Print & PDF Save protection */ @media print { body { display: none !important; /* Hide entire page when attempting to print or print-to-PDF */ } img, video, iframe, canvas, .portfolio-card, .image-comparison-slider { display: none !important; } } /* Email copy button hover and states */ .email-copy-btn:hover { color: var(--color-accent) !important; background-color: rgba(255, 255, 255, 0.05); } .email-copy-btn.copied { color: #20ba5a !important; } /* ── Preloader Screen ── */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #0b0b0b; /* Premium dark background */ z-index: 99999; /* Higher than everything else (nav, buttons, etc) */ display: flex; align-items: center; justify-content: center; transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.8s; opacity: 1; visibility: visible; } .preloader--hidden { opacity: 0; visibility: hidden; pointer-events: none; } .preloader__content { display: flex; flex-direction: column; align-items: center; gap: 20px; } .preloader__logo-container { position: relative; width: 130px; height: 130px; } .preloader__logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; } /* Background logo: very dim, acts as the silhouette */ .preloader__logo--bg { opacity: 0.05; filter: invert(1); /* makes it a dim white silhouette on dark background */ } /* Foreground logo: fully white, gets clipped from left to right as it loads */ .preloader__logo--fg { opacity: 0.95; filter: invert(1); /* makes it white to stand out clearly on dark background */ clip-path: inset(0 100% 0 0); /* starts fully hidden from the right */ transition: clip-path 0.1s ease-out; } .preloader__percentage { font-family: var(--font-heading); font-size: 20px; color: var(--color-accent); /* gold color percentage text */ letter-spacing: 3px; font-weight: 300; margin-top: 5px; } .preloader__bar-container { width: 180px; height: 2px; background-color: rgba(255, 255, 255, 0.05); border-radius: 2px; overflow: hidden; margin-top: 5px; } .preloader__bar { width: 0%; height: 100%; background-color: var(--color-accent); /* gold progress bar */ transition: width 0.1s ease-out; } /* ── Atolye Masonry Grid Layout ── */ .atolye-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: var(--section-padding-y) 0; } .atolye-grid__col { display: flex; flex-direction: column; gap: 24px; } @media (max-width: 900px) { .atolye-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .atolye-grid { grid-template-columns: 1fr; } }