/* ============================================================ VAID Design Studio | style.css Dark / Light mode via [data-theme] on Default: dark ============================================================ */ @import url('designguide.css'); @import url('buttons.css'); /* ── Smooth theme transition (applied by JS briefly) ── */ .theme-fade, .theme-fade * { transition: background-color 0.38s ease, color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease !important; } /* ══════════════════════════════════════════════════════════ RESET & BASE ══════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--f-sans); color: var(--text); background: var(--bg); overflow-x: hidden; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: var(--transition); } button { cursor: pointer; } /* ── Spacing helpers ── */ .py-section { padding: 7rem 0; } .mb-section { margin-bottom: 4rem; } /* ── Typography tokens ── */ .label-tag { display: inline-block; font-family: var(--f-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .display-heading { font-family: var(--f-serif); font-size: clamp(2rem, 3.4vw, 3.6rem); font-weight: 500; line-height: 1.1; color: var(--text); margin-bottom: 1.5rem; } .display-heading em { font-style: italic; color: var(--gold); } .body-text { font-size: 0.95rem; color: var(--text-2); line-height: 1.85; margin-bottom: 1.5rem; } .section-sub { font-size: 1rem; color: var(--muted); /*max-width: 480px;*/ margin: 0 auto; } .text-gold { color: var(--gold) !important; } /* ══════════════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════════════ */ #mainNav { padding: 1.4rem 0; transition: background 0.5s ease, padding 0.4s ease, box-shadow 0.4s ease; z-index: 1050; } #mainNav.scrolled { background: var(--nav-scrolled-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 0.9rem 0; box-shadow: 0 2px 40px rgba(0,0,0,0.18); } /* Brand */ .navbar-brand { font-family: var(--f-serif); font-size: 1.9rem; font-weight: 600; letter-spacing: 0.08em; color: #FFFFFF; transition: color 0.3s ease; background: url('https://www.pixello9.com/vaid/images/vaid_logo_white.svg'); background-size: contain; width: 120px; height: 55px; background-repeat: no-repeat; background-position: 0px 10px; } #mainNav.scrolled .navbar-brand { color: var(--nav-scrolled-text); background: url('https://www.pixello9.com/vaid/images/vaid_logo_white.svg'); background-size: contain; width: 120px; height: 55px; background-repeat: no-repeat; background-position: 0px 10px; } [data-theme="light"] #mainNav.scrolled .navbar-brand { background-image: url('https://www.pixello9.com/vaid/images/vaid_logo_black.svg'); background-position: 0px 10px; } .brand-accent { color: var(--gold); } /* Nav links */ .navbar-nav .nav-link { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.82); padding: 0.4rem 0.9rem !important; transition: color 0.3s ease; } .navbar-nav .nav-link:hover { color: var(--gold); } #mainNav.scrolled .navbar-nav .nav-link { color: var(--nav-scrolled-text); } #mainNav.scrolled .navbar-nav .nav-link:hover { color: var(--gold); } /* CTA button */ .nav-cta { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold); padding: 0.58rem 1.5rem; transition: var(--transition); } .nav-cta:hover { background: var(--gold) !important; color: #0F0F0F; } /* Hamburger */ .navbar-toggler { border: none; padding: 0.3rem; background: none; } .toggler-line { display: block; width: 24px; height: 2px; background: #FFFFFF; margin: 5px 0; transition: var(--transition); } #mainNav.scrolled .toggler-line { background: var(--nav-scrolled-text); } /* ── Theme Toggle Button ── */ .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: rgba(255,255,255,0.8); display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; flex-shrink: 0; transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease; position: relative; overflow: hidden; } .theme-toggle:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); } #mainNav.scrolled .theme-toggle { border-color: rgba(128,128,128,0.4); color: var(--nav-scrolled-text); } #mainNav.scrolled .theme-toggle:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); } /* ══════════════════════════════════════════════════════════ HERO SECTION (always full-screen image — no theme change) ══════════════════════════════════════════════════════════ */ .hero-section { position: relative; height: 100vh; min-height: 640px; overflow: hidden; } .hero-slides { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.05s; } .hero-slide.is-active { opacity: 1; } .slide-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 80%, rgba(0,0,0,0.20) 100%); } .slide-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #FFFFFF; width: 90%; max-width: 880px; z-index: 2; } .slide-category { display: inline-block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,169,110,0.6); padding: 0.4rem 1.3rem; margin-bottom: 1.6rem; } .slide-heading { font-family: var(--f-serif); font-size: clamp(2.4rem, 5.2vw, 5.2rem); font-weight: 400; line-height: 1.08; color: #FFFFFF; margin-bottom: 1.4rem; } .slide-heading em { font-style: italic; color: var(--gold-lt); } .slide-sub { font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 2.2rem; } /* btn-slide = btn btn-outline btn-white btn-lg */ .btn-slide { --_bg: var(--gold); --_bg-h: var(--gold-lt); --_txt: #0F0F0F; --_col: #FFFFFF; --_col-h: #FFFFFF; --_bdr: rgba(255,255,255,0.55); --_soft-bg: rgba(255,255,255,0.10); display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--f-sans); font-size: var(--btn-lg-fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; text-decoration: none; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.55); padding: var(--btn-lg-py) var(--btn-lg-px); cursor: pointer; transition: var(--transition); } .btn-slide:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: #FFFFFF; gap: 1rem; } /* Hero nav */ .hero-nav { position: absolute; bottom: 2.8rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.4rem; z-index: 10; } .hero-arrow { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #FFFFFF; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .hero-arrow:hover { background: var(--gold); border-color: var(--gold); } .hero-dots { display: flex; gap: 0.5rem; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: transparent; padding: 0; transition: all 0.4s var(--ease-expo); } .hero-dot.active { background: var(--gold); border-color: var(--gold); border-radius: 4px; width: 26px; } /* Hero counter */ .hero-counter { position: absolute; bottom: 3.1rem; right: 3rem; display: flex; align-items: center; gap: 0.7rem; z-index: 10; color: #FFFFFF; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; } .counter-line { width: 28px; height: 1px; background: rgba(255,255,255,0.35); } .counter-total { color: rgba(255,255,255,0.4); } /* Scroll cue */ .scroll-cue { position: absolute; bottom: 2.2rem; left: 3rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 10; color: rgba(255,255,255,0.5); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; } .scroll-bar { width: 1px; height: 44px; background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent); animation: scrollPulse 2.2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 1; transform: scaleY(1); } 50% { opacity: 0.35; transform: scaleY(0.5); } } /* Split-panel overlay */ .split-overlay { position: absolute; inset: 0; display: flex; z-index: 6; pointer-events: none; } .split-panel { flex: 1; background: var(--dark-2-fixed); transform-origin: bottom center; transform: scaleY(0); } /* ══════════════════════════════════════════════════════════ ABOUT SECTION ══════════════════════════════════════════════════════════ */ .about-section { background: var(--bg); } .about-text { padding-right: 1.5rem; } /* Read more */ .readmore-wrap { margin-bottom: 1.8rem; } .readmore-body { max-height: 0; overflow: hidden; opacity: 0; font-size: 0.93rem; color: var(--text-2); line-height: 1.85; transition: max-height 0.55s var(--ease-expo), opacity 0.4s ease; margin-bottom: 0; } .readmore-body.open { max-height: 300px; opacity: 1; margin-top: 0.8rem; margin-bottom: 0.8rem; } /* btn-readmore = btn btn-ghost btn-gold btn-sm */ .btn-readmore { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; padding: 0; font-family: var(--f-sans); font-size: var(--btn-sm-fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; text-decoration: none; color: var(--gold); cursor: pointer; transition: color 0.28s var(--ease-smooth), gap 0.22s var(--ease-smooth); margin-top: 0.3rem; } .btn-readmore:hover { color: var(--gold-lt); gap: 0.65rem; } /* Badges */ .about-badges { display: flex; align-items: center; gap: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); margin-top: 2rem; flex-wrap: wrap; } .badge-item { display: flex; flex-direction: column; } .badge-num { font-family: var(--f-serif); font-size: 2.4rem; font-weight: 600; color: var(--gold); line-height: 1; } .badge-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-top: 0.3rem; } .badge-sep { width: 1px; height: 40px; background: var(--border); } /* About images */ .about-imgs { position: relative; height: 580px; } .about-img-main { position: absolute; top: 0; right: 0; width: 80%; height: 88%; overflow: hidden; } .about-img-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-smooth); } .about-img-main:hover img { transform: scale(1.04); } .about-img-float { position: absolute; bottom: 0; left: 0; width: 50%; height: 52%; overflow: hidden; border: 5px solid var(--bg); /* matches page bg for clean cut-out */ box-shadow: var(--shadow-md); } .about-img-float img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-smooth); } .about-img-float:hover img { transform: scale(1.05); } /* Since badge — always dark */ .since-badge { position: absolute; top: 1.8rem; left: 0; background: var(--dark-fixed); color: #FFFFFF; padding: 1rem 1.6rem; display: flex; flex-direction: column; text-align: center; z-index: 3; } .since-lbl { font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.2rem; } .since-yr { font-family: var(--f-serif); font-size: 2rem; font-weight: 600; color: #FFFFFF; line-height: 1; } /* ══════════════════════════════════════════════════════════ STATS — always dark, never flips ══════════════════════════════════════════════════════════ */ .stats-section { position: relative; background: var(--dark-fixed); padding: 5.5rem 0; overflow: hidden; } .stats-overlay { position: absolute; inset: 0; background: url('https://www.vaidarchitects.com/images/about/03.jpg') center/cover no-repeat; opacity: 0.06; } .stats-row { border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .stat-box { padding: 3.5rem 2rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.07); } .stat-box.no-border { border-right: none; } .stat-val { display: flex; align-items: baseline; justify-content: center; gap: 0.1rem; margin-bottom: 0.8rem; } .counter { font-family: var(--f-serif); font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 600; color: #FFFFFF; line-height: 1; } .stat-sym { font-family: var(--f-serif); font-size: 2rem; color: var(--gold); line-height: 1; margin-left: 0.1rem; } .stat-icon { font-size: 2.8rem; color: var(--gold); } .stat-lbl { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0; } /* ══════════════════════════════════════════════════════════ CATEGORIES ══════════════════════════════════════════════════════════ */ .categories-section { background: var(--bg-2); } .cat-card { background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-expo); } .cat-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); } .cat-thumb { position: relative; height: 380px; overflow: hidden; } .cat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-smooth); } .cat-card:hover .cat-thumb img { transform: scale(1.07); } .cat-hover { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; } .cat-card:hover .cat-hover { opacity: 1; } /* btn-cat = btn btn-outline btn-white btn-md (on image overlay) */ .btn-cat { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-sans); font-size: var(--btn-md-fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; text-decoration: none; cursor: pointer; color: #FFFFFF; background: transparent; border: 1px solid rgba(255,255,255,0.7); padding: var(--btn-md-py) var(--btn-md-px); transition: var(--transition); transform: translateY(10px); } .cat-card:hover .btn-cat { transform: translateY(0); } .btn-cat:hover { background: var(--gold); border-color: var(--gold); color: #FFFFFF; } .cat-body { padding: 1.8rem 1.8rem 2rem; } .cat-num { font-family: var(--f-serif); font-size: 0.85rem; color: var(--gold); display: block; margin-bottom: 0.5rem; letter-spacing: 0.05em; } .cat-title { font-family: var(--f-serif); font-size: 1.65rem; font-weight: 500; color: var(--text); margin-bottom: 0.7rem; } .cat-text { font-size: 0.86rem; color: var(--text-2); line-height: 1.75; margin: 0; } /* ══════════════════════════════════════════════════════════ YOUTUBE CTA — always dark brand section ══════════════════════════════════════════════════════════ */ .yt-section { background: var(--dark-2-fixed); padding: 6rem 0; text-align: center; } .yt-section .display-heading { color: #FFFFFF; } .yt-section .section-sub { color: rgba(255,255,255,0.55); } .btn-yt { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; background: #FF0000; color: #FFFFFF; border: none; padding: 0.9rem 2.4rem; transition: var(--transition); } .btn-yt:hover { background: #cc0000; color: #FFFFFF; transform: translateY(-2px); } /* ══════════════════════════════════════════════════════════ HERO MARQUEE STRIP ══════════════════════════════════════════════════════════ */ .hero-marquee-wrap { overflow: hidden; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1rem 0; } .hero-marquee-track { display: flex; width: max-content; align-items: center; animation: heroMarqueeScroll 32s linear infinite; } .hero-marquee-track span { font-family: var(--f-serif); font-size: 1.3rem; font-weight: 500; color: var(--gold); text-transform: uppercase; letter-spacing: 0.18em; white-space: nowrap; padding: 0 1.6rem; } .hero-marquee-track .hm-dot { font-style: normal; color: var(--gold); font-size: 0.9rem; flex-shrink: 0; } @keyframes heroMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ══════════════════════════════════════════════════════════ CLIENTS MARQUEE ══════════════════════════════════════════════════════════ */ .clients-section { background: var(--bg); } .marquee-wrap { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .marquee-track { display: flex; width: max-content; will-change: transform; } .client-item { flex-shrink: 0; padding: 1.6rem 2.4rem; border-right: 1px solid var(--border); display: flex; align-items: center; justify-content: center; min-width: 160px; } .client-item img { max-height: 75px; max-width: 120px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.55); transition: filter 0.35s ease; } .client-item:hover img { filter: grayscale(0%) opacity(1); } /* ══════════════════════════════════════════════════════════ FAQ SECTION ══════════════════════════════════════════════════════════ */ .faq-section { background: var(--bg-2); } .faq-intro p { color: var(--text-2); } /* btn-outline = btn btn-outline btn-neutral btn-lg (theme-aware) */ .btn-outline { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-sans); font-size: var(--btn-lg-fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; text-decoration: none; cursor: pointer; background: transparent; color: var(--text); border: 1px solid var(--border); padding: var(--btn-lg-py) 2rem; transition: var(--transition); } .btn-outline:hover { background: var(--gold); border-color: var(--gold); color: #0F0F0F; } /* Accordion */ .faq-accordion { border: none; } .faq-item { background: transparent !important; border: none !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; } .faq-item:first-of-type { border-top: 1px solid var(--border) !important; } .faq-item .accordion-button { font-family: var(--f-sans); font-size: 0.9rem; font-weight: 500; color: var(--text); background: transparent !important; padding: 1.4rem 0; box-shadow: none !important; border: none; line-height: 1.5; } .faq-item .accordion-button:not(.collapsed) { color: var(--gold); } .faq-item .accordion-button::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; background-image: none; font-size: 0.65rem; color: var(--gold); transition: transform 0.3s ease; transform: none; } .faq-item .accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } .faq-item .accordion-body { background: transparent; padding: 0 0 1.4rem; font-size: 0.88rem; color: var(--text-2); line-height: 1.85; } /* ══════════════════════════════════════════════════════════ CONTACT SECTION ══════════════════════════════════════════════════════════ */ .contact-section { background: var(--bg); } .c-info-row { display: flex; align-items: flex-start; gap: 1.2rem; margin-bottom: 1.6rem; } .c-icon { width: 44px; height: 44px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 0.85rem; flex-shrink: 0; transition: var(--transition); } .c-info-row:hover .c-icon { background: var(--gold); color: #0F0F0F; border-color: var(--gold); } .c-info-row strong { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; display: block; margin-bottom: 0.25rem; color: var(--text); } .c-info-row p { font-size: 0.88rem; color: var(--text-2); margin: 0; } /* Social buttons */ .social-row { display: flex; gap: 0.7rem; flex-wrap: wrap; } .soc-btn { width: 40px; height: 40px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 0.8rem; transition: var(--transition); } .soc-btn:hover { background: var(--gold); border-color: var(--gold); color: #0F0F0F; } .soc-btn.light { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.6); } .soc-btn.light:hover { background: var(--gold); border-color: var(--gold); color: #0F0F0F; } /* Contact form */ .contact-form-wrap { background: var(--form-bg); padding: 3.2rem; } .f-group { margin-bottom: 0; } .f-input { display: block; width: 100%; border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding: 0.9rem 0; font-family: var(--f-sans); font-size: 0.86rem; color: var(--text); outline: none; transition: border-color 0.3s ease; appearance: none; -webkit-appearance: none; } .f-input::placeholder { color: var(--muted); } .f-input:focus { border-color: var(--gold); } .f-select { cursor: pointer; } .f-select option { color: var(--text); background: var(--opt-bg); } .f-textarea { resize: none; min-height: 130px; } /* btn-submit = btn btn-solid btn-gold btn-lg btn-wide */ .btn-submit { display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--f-sans); font-size: var(--btn-lg-fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; text-decoration: none; cursor: pointer; background: var(--gold); color: #0F0F0F; border: 1px solid var(--gold); padding: 1.1rem; margin-top: 1.2rem; transition: var(--transition); } .btn-submit:hover:not(:disabled) { background: var(--gold-lt); border-color: var(--gold-lt); transform: translateY(-2px); } .btn-submit:active:not(:disabled) { transform: translateY(0); } .btn-submit:disabled { opacity: 0.45; cursor: not-allowed; } /* ══════════════════════════════════════════════════════════ OUR PRESENCE ══════════════════════════════════════════════════════════ */ .presence-section { background: var(--bg-2); } /* City chips */ .presence-cities { display: flex; flex-direction: column; gap: 0; margin-top: 2rem; } .city-chip { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); transition: background 0.25s ease; position: relative; } .city-chip:first-child { border-top: 1px solid var(--border); } .city-chip:hover { background: var(--bg-3); } .city-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gold); font-size: 0.78rem; } .city-info { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; } .city-info strong { font-family: var(--f-serif); font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: 0.02em; } .city-info span { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } .city-hq-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; color: var(--gold); border: 1px solid var(--gold); padding: 0.15rem 0.5rem; text-transform: uppercase; } /* Map */ .presence-map { display: flex; flex-direction: column; gap: 0; } .map-frame { overflow: hidden; border: 1px solid var(--border); position: relative; } .map-frame iframe { display: block; filter: grayscale(20%) contrast(1.05); } [data-theme="dark"] .map-frame iframe { filter: grayscale(30%) invert(92%) hue-rotate(180deg) brightness(0.85) contrast(0.9); } .map-caption { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; background: var(--bg-3); border: 1px solid var(--border); border-top: none; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; } .map-caption i { color: var(--gold); font-size: 0.75rem; } /* ══════════════════════════════════════════════════════════ FOOTER — always dark, never flips ══════════════════════════════════════════════════════════ */ .footer-top { background: var(--dark-fixed); padding: 5.5rem 0 1rem; } .f-logo { font-family: var(--f-serif); font-size: 2.6rem; font-weight: 600; color: #FFFFFF; margin-bottom: 1.2rem; letter-spacing: 0.06em; } .f-logo span { color: var(--gold); } .footer-brand p { font-size: 0.86rem; color: rgba(255,255,255,0.45); line-height: 1.85; max-width: 320px; } .f-heading { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 1.6rem; } .f-links { list-style: none; padding: 0; margin: 0; } .f-links li { font-size: 0.86rem; color: rgba(255,255,255,0.45); margin-bottom: 0.85rem; display: flex; align-items: center; } .f-links li a { color: rgba(255,255,255,0.45); transition: color 0.3s ease; } .f-links li a:hover { color: var(--gold); } .f-links li i { font-size: 0.75rem; } .footer-bottom { background: #080808; padding: 1.4rem 0; } .footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.28); margin: 0; } .footer-bottom a { font-size: 0.78rem; color: rgba(255,255,255,0.28); transition: color 0.3s ease; } .footer-bottom a:hover { color: var(--gold); } /* ══════════════════════════════════════════════════════════ ACTIVE NAV LINK (web component) ══════════════════════════════════════════════════════════ */ .nav-link.nav-active { color: var(--gold) !important; } #mainNav.scrolled .nav-link.nav-active { color: var(--gold) !important; } /* ══════════════════════════════════════════════════════════ PAGE HERO (inner pages — about, architecture, etc.) ══════════════════════════════════════════════════════════ */ .page-hero { position: relative; height: 52vh; min-height: 380px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 80px; /* clear fixed navbar */ } .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; transform: scale(1.06); transition: transform 8s ease; } .page-hero:hover .page-hero-bg { transform: scale(1.0); } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.30) 100% ); } .page-hero-content { position: relative; z-index: 2; text-align: center; color: #FFFFFF; padding: 0 1rem; } /* Breadcrumb */ .hero-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1.4rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; display: none; } .hero-breadcrumb a { color: rgba(255,255,255,0.55); transition: color 0.3s ease; } .hero-breadcrumb a:hover { color: var(--gold); } .hero-breadcrumb .sep { color: rgba(255,255,255,0.3); } .hero-breadcrumb .current { color: var(--gold); } /* Page hero heading */ .page-hero-title { font-family: var(--f-serif); font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 400; line-height: 1.05; color: #FFFFFF; margin-bottom: 1rem; display: none; } .page-hero-title em { font-style: italic; color: var(--gold-lt); } .page-hero-sub { font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: none; } /* ══════════════════════════════════════════════════════════ ABOUT PAGE — INTRO / MISSION ══════════════════════════════════════════════════════════ */ .intro-section { background: var(--bg); } .mission-card { background: var(--surface); border: 1px solid var(--border); padding: 3rem 2.5rem; position: relative; overflow: hidden; } .mission-card::before { content: '\201C'; font-family: var(--f-serif); font-size: 12rem; line-height: 0.8; color: var(--gold); opacity: 0.08; position: absolute; top: -1rem; left: 1rem; pointer-events: none; } .mission-text { font-family: var(--f-serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; font-style: italic; line-height: 1.4; color: var(--text); } .mission-text em { color: var(--gold); font-style: normal; } .mission-attr { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; } .mission-line { width: 32px; height: 1px; background: var(--gold); } .mission-name { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* Values chips on intro */ .intro-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 2rem; } .intro-pill { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid var(--border); color: var(--text-2); padding: 0.4rem 1rem; transition: var(--transition); } .intro-pill:hover { border-color: var(--gold); color: var(--gold); } /* ══════════════════════════════════════════════════════════ CORE VALUES SECTION ══════════════════════════════════════════════════════════ */ .values-section { background: var(--bg-2); } .value-card { background: var(--surface); border: 1px solid var(--border); padding: 2.8rem 2.2rem; position: relative; overflow: hidden; transition: var(--transition); } .value-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gold); transition: width 0.5s var(--ease-expo); } .value-card:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-6px); } .value-card:hover::after { width: 100%; } .value-icon { width: 58px; height: 58px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.3rem; margin-bottom: 1.8rem; transition: var(--transition); } .value-card:hover .value-icon { background: var(--gold); color: #0F0F0F; border-color: var(--gold); } .value-title { font-family: var(--f-serif); font-size: 1.5rem; font-weight: 500; color: var(--text); margin-bottom: 0.8rem; } .value-text { font-size: 0.88rem; color: var(--text-2); line-height: 1.8; margin: 0; } /* ══════════════════════════════════════════════════════════ FOUNDERS / LEADERSHIP SECTION ══════════════════════════════════════════════════════════ */ .founders-section { background: var(--bg); } .founder-card { position: relative; overflow: hidden; } .founder-photo { position: relative; height: 480px; overflow: hidden; } .founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.9s var(--ease-smooth); } .founder-card:hover .founder-photo img { transform: scale(1.05); } .founder-photo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%); } .founder-badge { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; } .founder-name { font-family: var(--f-serif); font-size: 1.6rem; font-weight: 500; color: #FFFFFF; margin-bottom: 0.25rem; } .founder-title { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .founder-creds { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; } .cred-tag { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; background: rgba(201,169,110,0.18); color: var(--gold); border: 1px solid rgba(201,169,110,0.35); padding: 0.25rem 0.7rem; } .founder-bio { background: var(--surface); border: 1px solid var(--border); border-top: none; padding: 1.8rem; } .founder-bio p { font-size: 0.88rem; color: var(--text-2); line-height: 1.8; margin: 0; } .founder-exp { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); } .exp-num { font-family: var(--f-serif); font-size: 2rem; font-weight: 600; color: var(--gold); line-height: 1; } .exp-lbl { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* ══════════════════════════════════════════════════════════ PROCESS SECTION ══════════════════════════════════════════════════════════ */ .process-section { background: var(--bg-2); } .process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } /* connector line */ .process-grid::before { content: ''; position: absolute; top: 38px; left: calc(10% + 1.5rem); right: calc(10% + 1.5rem); height: 1px; background: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent); z-index: 0; } .process-step { padding: 0 1.2rem 2rem; text-align: center; position: relative; z-index: 1; } .step-num-wrap { width: 76px; height: 76px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: var(--transition); position: relative; } .process-step:hover .step-num-wrap { background: var(--gold); border-color: var(--gold); } .step-count { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); transition: color 0.3s ease; line-height: 1; margin-bottom: 0.1rem; } .process-step:hover .step-count { color: rgba(0,0,0,0.55); } .step-icon { font-size: 1.2rem; color: var(--text-2); transition: color 0.3s ease; } .process-step:hover .step-icon { color: #0F0F0F; } .step-title { font-family: var(--f-serif); font-size: 1rem; font-weight: 500; color: var(--text); margin-bottom: 0.5rem; } .step-desc { font-size: 0.78rem; color: var(--text-2); line-height: 1.7; margin: 0; } @media (max-width: 991.98px) { .process-grid { grid-template-columns: repeat(3, 1fr); } .process-grid::before { display: none; } } @media (max-width: 575.98px) { .process-grid { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════════════════ CONTACT CTA STRIP (about page) ══════════════════════════════════════════════════════════ */ .cta-strip { background: var(--dark-fixed); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; } .cta-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(201,169,110,0.12) 0%, transparent 70%); } .cta-strip .display-heading { color: #FFFFFF; } .cta-strip .section-sub { color: rgba(255,255,255,0.5); } /* btn-cta-main = btn btn-solid btn-gold btn-xl */ .btn-cta-main { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--f-sans); font-size: var(--btn-xl-fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; text-decoration: none; cursor: pointer; background: var(--gold); color: #0F0F0F; border: 1px solid var(--gold); padding: var(--btn-xl-py) var(--btn-xl-px); margin-top: 2.2rem; transition: var(--transition); } .btn-cta-main:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0F0F0F; transform: translateY(-2px); gap: 1.1rem; } .btn-cta-main:active { transform: translateY(0); } /* ══════════════════════════════════════════════════════════ SCROLL REVEAL ══════════════════════════════════════════════════════════ */ .reveal, .reveal-up, .reveal-img { opacity: 0; } .reveal { transform: translateY(28px); transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo); } .reveal-up { transform: translateY(45px); transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo); transition-delay: var(--delay, 0s); } .reveal-img{ transform: translateY(50px); transition: opacity 1s var(--ease-expo), transform 1s var(--ease-expo); } .reveal.in-view, .reveal-up.in-view, .reveal-img.in-view { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { .py-section { padding: 5rem 0; } .about-text { padding-right: 0; } .about-imgs { height: 460px; margin-top: 2rem; } .stat-box { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); } .stat-box.no-border { border-bottom: none; } .hero-counter { display: none; } .scroll-cue { display: none; } .faq-intro { margin-bottom: 2.5rem; } } @media (max-width: 767.98px) { .py-section { padding: 4rem 0; } .about-imgs { height: 360px; } .about-img-main { width: 88%; } .contact-form-wrap { padding: 2rem; } .hero-nav { bottom: 2rem; gap: 1rem; } .hero-arrow { width: 38px; height: 38px; } .theme-toggle { margin-left: 0; } } @media (max-width: 575.98px) { .slide-heading { font-size: 2rem; } .about-imgs { height: 300px; } .since-yr { font-size: 1.6rem; } .about-badges { gap: 1.5rem; } .badge-sep { display: none; } } /* ══════════════════════════════════════════════════════════ ARCHITECTURE PAGE ══════════════════════════════════════════════════════════ */ /* ── Category grid ── */ .arch-cats-section { background: var(--bg-2); } .arch-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 1199.98px) { .arch-cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767.98px) { .arch-cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479.98px) { .arch-cat-grid { grid-template-columns: 1fr; } } .arch-cat-tile { position: relative; cursor: pointer; overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform 0.48s var(--ease-expo), box-shadow 0.48s var(--ease-expo), border-color 0.35s ease; } .arch-cat-tile:hover { transform: translateY(-10px); box-shadow: var(--shadow-md); border-color: var(--gold); } /* Image */ .tile-img { height: 280px; position: relative; overflow: hidden; } .tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.85s var(--ease-smooth); } .arch-cat-tile:hover .tile-img img { transform: scale(1.07); } .tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.18) 55%, transparent 100%); transition: background 0.4s ease; } .arch-cat-tile:hover .tile-overlay { background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.32) 60%, rgba(201,169,110,0.06) 100%); } /* Body row */ .tile-body { display: flex; align-items: center; gap: 0.9rem; padding: 1.2rem 1.4rem; border-top: 2px solid transparent; transition: border-color 0.35s ease; } .arch-cat-tile:hover .tile-body { border-color: var(--gold); } .tile-num { font-family: var(--f-serif); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold); flex-shrink: 0; } .tile-title { font-family: var(--f-serif); font-size: 1.15rem; font-weight: 500; color: var(--text); margin: 0; flex: 1; letter-spacing: 0.03em; } .tile-right { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; } .tile-count { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color 0.3s ease; } .arch-cat-tile:hover .tile-count { color: var(--gold); } .tile-arrow { width: 32px; height: 32px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--text-2); transition: var(--transition); transform: translateX(-4px); opacity: 0; } .arch-cat-tile:hover .tile-arrow { opacity: 1; transform: translateX(0); background: var(--gold); border-color: var(--gold); color: #0F0F0F; } /* ── Projects section ── */ .arch-projects-section { background: var(--bg); } .arch-projects-header { display: flex; align-items: flex-start; gap: 2.5rem; margin-bottom: 3.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; } /* arch-back-btn = btn btn-outline btn-neutral btn-sm */ .arch-back-btn { display: inline-flex; align-items: center; gap: 0.55rem; flex-shrink: 0; font-family: var(--f-sans); font-size: var(--btn-sm-fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; text-decoration: none; cursor: pointer; background: transparent; color: var(--text-2); border: 1px solid var(--border); padding: var(--btn-sm-py) 1.5rem; margin-top: 0.6rem; transition: var(--transition); } .arch-back-btn:hover { border-color: var(--gold); color: var(--gold); } .arch-back-btn i { font-size: 0.65rem; } .arch-proj-meta .display-heading { margin-bottom: 0; } /* Projects grid */ .arch-proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } @media (max-width: 991.98px) { .arch-proj-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .arch-proj-grid { grid-template-columns: 1fr; } } /* Project card */ .arch-proj-card { background: var(--surface); border: 1px solid var(--border); overflow: hidden; cursor: pointer; transition: transform 0.45s var(--ease-expo), box-shadow 0.45s var(--ease-expo), border-color 0.35s ease; } .arch-proj-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--gold); } .proj-thumb { position: relative; height: 260px; overflow: hidden; } .proj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.85s var(--ease-smooth); } .arch-proj-card:hover .proj-thumb img { transform: scale(1.08); } /* Image count badge */ .proj-count-badge { position: absolute; top: 0.9rem; right: 0.9rem; background: rgba(0,0,0,0.62); color: rgba(255,255,255,0.85); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; padding: 0.3rem 0.65rem; display: flex; align-items: center; gap: 0.3rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Hover overlay */ .proj-hover { position: absolute; inset: 0; background: rgba(0,0,0,0.52); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease; } .arch-proj-card:hover .proj-hover { opacity: 1; } /* btn-proj-view = btn btn-outline btn-white btn-md (on image overlay) */ .btn-proj-view { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-sans); font-size: var(--btn-md-fs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; text-decoration: none; cursor: pointer; background: none; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.65); padding: var(--btn-md-py) var(--btn-md-px); transform: translateY(12px); transition: transform 0.35s ease, background 0.3s ease, border-color 0.3s ease; } .arch-proj-card:hover .btn-proj-view { transform: translateY(0); } .btn-proj-view:hover { background: var(--gold); border-color: var(--gold); } /* Card body */ .proj-body { padding: 1.4rem 1.6rem 1.8rem; } .proj-title { font-family: var(--f-serif); font-size: 1.3rem; font-weight: 500; color: var(--text); margin-bottom: 0.9rem; transition: color 0.3s ease; } .arch-proj-card:hover .proj-title { color: var(--gold); } .proj-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem 1.4rem; } .proj-meta li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--text-2); } .proj-meta i { color: var(--gold); font-size: 0.62rem; flex-shrink: 0; } .proj-desc { font-size: 0.83rem; color: var(--text-2); line-height: 1.78; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); } /* Empty state */ .arch-empty { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 6rem 0; color: var(--muted); text-align: center; } .arch-empty i { font-size: 2.5rem; opacity: 0.4; } .arch-empty p { font-size: 0.9rem; margin: 0; } /* ── Lightbox backdrop ── */ .lb-backdrop { position: fixed; inset: 0; background: rgba(4, 4, 4, 0.95); z-index: 2000; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; } .lb-backdrop.active { opacity: 1; visibility: visible; } /* ── Lightbox — full-screen flex column ── */ .arch-lightbox { position: fixed; inset: 0; z-index: 2010; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; } .arch-lightbox.active { opacity: 1; visibility: visible; } /* Top bar: title | counter + close */ .lb-topbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.6rem; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.07); } .lb-topbar-right { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; } .lb-proj-title { font-family: var(--f-serif); font-size: 1.1rem; font-style: italic; color: rgba(255,255,255,0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-counter { font-size: 0.68rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.35); white-space: nowrap; } .lb-close { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: rgba(255,255,255,0.75); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .lb-close:hover { background: var(--gold); border-color: var(--gold); color: #0F0F0F; } /* Stage: [prev btn] [image] [next btn] */ .lb-stage { flex: 1; display: flex; align-items: stretch; min-height: 0; } .lb-img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; min-width: 0; } .lb-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 24px 70px rgba(0,0,0,0.7); } /* Inline nav arrows */ .lb-nav { flex-shrink: 0; width: 62px; border: none; background: rgba(0,0,0,0.28); color: rgba(255,255,255,0.65); font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: background 0.28s ease, color 0.28s ease; cursor: pointer; /* override any inherited positioning */ position: static; transform: none; top: auto; left: auto; right: auto; } .lb-nav:hover:not(:disabled) { background: var(--gold); color: #0F0F0F; } .lb-nav:disabled { opacity: 0.2; cursor: not-allowed; pointer-events: none; } /* Thumbnail strip */ .lb-thumbs-wrap { flex-shrink: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0.9rem 1.6rem; border-top: 1px solid rgba(255,255,255,0.07); overflow-x: auto; /* Hide scrollbar but allow scroll */ scrollbar-width: thin; scrollbar-color: rgba(201,169,110,0.4) transparent; } .lb-thumbs-wrap::-webkit-scrollbar { height: 3px; } .lb-thumbs-wrap::-webkit-scrollbar-track { background: transparent; } .lb-thumbs-wrap::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.4); } .lb-thumbs { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: nowrap; min-width: max-content; } .lb-thumb { width: 68px; height: 68px; flex-shrink: 0; border: 2px solid transparent; background-size: cover; background-position: center; cursor: pointer; opacity: 0.42; transition: opacity 0.25s ease, border-color 0.25s ease; padding: 0; } .lb-thumb:hover { opacity: 0.75; } .lb-thumb.active { opacity: 1; border-color: var(--gold); } /* Project count badge on header */ .arch-proj-count { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-left: auto; padding-top: 0.5rem; white-space: nowrap; } /* Hero bg for inner page (no fixed bg-image in HTML) */ .ap-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); } @media (max-width: 991.98px) { .lb-nav { width: 44px; } .arch-proj-count { display: none; } } @media (max-width: 767.98px) { .lb-nav { width: 36px; font-size: 0.8rem; } .lb-thumb { width: 52px; height: 52px; } .arch-projects-header { gap: 1.2rem; } .tile-img { height: 220px; } } @media (max-width: 575.98px) { .lb-topbar { padding: 0.7rem 1rem; } .lb-proj-title { font-size: 0.9rem; } .lb-thumbs-wrap { padding: 0.6rem 1rem; } .lb-thumb { width: 44px; height: 44px; } } /* ── Projects nav dropdown ───────────────────────────────── */ .vaid-nav-dropdown { position: relative; } /* Invisible bridge that fills the gap between the nav item and the dropdown panel so mouseleave doesn't fire while crossing the gap. */ .vaid-nav-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; } .vaid-drop-toggle { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; } .vaid-drop-toggle::after { display: none; } /* kill Bootstrap caret */ .vaid-drop-arrow { font-size: 0.65rem; transition: transform 0.25s ease; opacity: 0.7; } .vaid-drop-arrow.open { transform: rotate(180deg); opacity: 1; } /* The dropdown panel */ .vaid-dropdown { list-style: none; padding: 0.5rem 0; margin: 0; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 196px; background: var(--surface, #111); border: 1px solid rgba(196,160,100,0.18); box-shadow: 0 12px 36px rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 1100; } [data-theme="light"] .vaid-dropdown { background: #fff; border-color: rgba(196,160,100,0.25); box-shadow: 0 8px 28px rgba(0,0,0,0.12); } .vaid-dropdown.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .vaid-dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--surface, #111); } [data-theme="light"] .vaid-dropdown::before { border-bottom-color: #fff; } .vaid-dropdown-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.2rem; font-family: var(--font-sans, 'Inter', sans-serif); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #aaa); text-decoration: none; transition: color 0.18s ease, background 0.18s ease, padding-left 0.18s ease; } .vaid-dropdown-item i { font-size: 0.75rem; width: 14px; text-align: center; opacity: 0.7; } .vaid-dropdown-item:hover, .vaid-dropdown-item:focus { color: var(--gold, #c4a064); background: rgba(196,160,100,0.06); padding-left: 1.5rem; } .vaid-dropdown-item.active { color: var(--gold, #c4a064); } .vaid-dropdown-item.active i { opacity: 1; } /* Separator lines between items */ .vaid-dropdown li + li { border-top: 1px solid rgba(196,160,100,0.08); } /* ── Mobile: dropdown stacks inline ─────────────────────── */ @media (max-width: 991.98px) { .vaid-dropdown { position: static; transform: none; min-width: 100%; background: transparent; border: none; border-left: 2px solid rgba(196,160,100,0.3); box-shadow: none; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.22s ease, max-height 0.28s ease; padding: 0; margin: 0.25rem 0 0.5rem 0.75rem; } .vaid-dropdown.open { opacity: 1; max-height: 200px; transform: none; } .vaid-dropdown::before { display: none; } .vaid-dropdown-item { font-size: 0.8rem; padding: 0.45rem 0.9rem; } .vaid-dropdown-item:hover { padding-left: 1.2rem; } } /* ══════════════════════════════════════════════════════════ MEDIA SECTION ══════════════════════════════════════════════════════════ */ /* ── Awards grid ── */ .awards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } .award-card { background: var(--surface, #1a1a1a); border: 1px solid rgba(255,255,255,.08); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; } .award-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.4); } .award-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .award-card-body { padding: 1.5rem; } .award-date { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gold, #c9a84c); margin-bottom: .6rem; } .award-title { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: var(--text-primary, #f0ece3); margin: 0; } .award-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold, #c9a84c); text-decoration: none; transition: gap .25s; } .award-link:hover { gap: .7rem; color: var(--gold, #c9a84c); } /* ── Portfolio tab bar ── */ .media-tabs { display: flex; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 1rem; } .media-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: .75rem 2.25rem; font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #888); cursor: pointer; margin-bottom: -1px; transition: color .25s, border-color .25s; } .media-tab:hover { color: var(--text-primary, #f0ece3); } .media-tab.active { color: var(--gold, #c9a84c); border-bottom-color: var(--gold, #c9a84c); } .media-tab-sub { text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-style: italic; color: var(--muted, #888); margin-bottom: 2.5rem; } @media (max-width: 480px) { .media-tab { padding: .65rem 1.1rem; font-size: .72rem; } } /* ── Photo grid ── */ .media-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; } @media (max-width: 991px) { .media-photo-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575px) { .media-photo-grid { grid-template-columns: repeat(2, 1fr); } } .media-photo-item { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; } .media-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; } .media-photo-item:hover img { transform: scale(1.07); } .media-photo-item-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background .3s; } .media-photo-item:hover .media-photo-item-overlay { background: rgba(0,0,0,.38); } .media-photo-zoom { color: #fff; font-size: 1.4rem; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s; } .media-photo-item:hover .media-photo-zoom { opacity: 1; transform: scale(1); } /* ── Lightbox ── */ .media-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.93); align-items: center; justify-content: center; } .media-lightbox.open { display: flex; } .media-lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; display: block; user-select: none; } .media-lb-close { position: absolute; top: 1.25rem; right: 1.5rem; background: none; border: none; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; opacity: .65; transition: opacity .2s; } .media-lb-close:hover { opacity: 1; } .media-lb-prev, .media-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 1.3rem; padding: .9rem 1.1rem; cursor: pointer; transition: background .2s; } .media-lb-prev { left: 1rem; } .media-lb-next { right: 1rem; } .media-lb-prev:hover, .media-lb-next:hover { background: rgba(255,255,255,.22); } .media-lb-counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-family: 'Inter', sans-serif; font-size: .72rem; letter-spacing: .12em; color: rgba(255,255,255,.45); } /* ── Clients logo grid ── */ .clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 1.5rem; } .client-logo-card { background: var(--surface, #1a1a1a); border: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; padding: 1.75rem 1.25rem; transition: border-color .3s, transform .3s; } .client-logo-card:hover { border-color: var(--gold, #c9a84c); transform: translateY(-3px); } .client-logo-card img { max-height: 56px; max-width: 120px; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.4); transition: filter .3s; } .client-logo-card:hover img { filter: grayscale(0) brightness(1); } /* ══════════════════════════════════════════════════════════ CONTACT PAGE ══════════════════════════════════════════════════════════ */ /* ── Map ── */ .map-section { padding: 0; line-height: 0; } .map-wrap { width: 100%; height: 440px; overflow: hidden; } .map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(55%) contrast(1.08) brightness(0.9); } [data-theme="light"] .map-wrap iframe { filter: none; } /* ── Divider ── */ .gold-line { width: 40px; height: 1px; background: var(--gold); margin: 1.8rem 0; } /* ── Form success state ── */ .form-success { display: none; text-align: center; padding: 4rem 2rem; } .form-success.show { display: block; } .success-check { width: 66px; height: 66px; border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.6rem; font-size: 1.5rem; color: var(--gold); } .success-heading { font-family: var(--f-serif); font-size: 2.2rem; font-weight: 400; color: var(--text); margin-bottom: 0.75rem; } .success-body { font-size: 0.88rem; color: var(--text-2); margin-bottom: 2rem; line-height: 1.75; } /* ── Error notice ── */ .form-notice { display: none; font-size: 0.82rem; color: #ff6b6b; margin-bottom: 0.75rem; } /* ── Awards grid ── */ .awards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } .award-card { background: var(--surface, #1a1a1a); border: 1px solid rgba(255,255,255,.08); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; } .award-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.4); } .award-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .award-card-body { padding: 1.5rem; } .award-date { font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gold, #c9a84c); margin-bottom: .6rem; } .award-title { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: var(--text-primary, #f0ece3); margin: 0; } .award-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold, #c9a84c); text-decoration: none; transition: gap .25s; } .award-link:hover { gap: .7rem; color: var(--gold, #c9a84c); } /* ── Portfolio tab bar ── */ .media-tabs { display: flex; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 1rem; } .media-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: .75rem 2.25rem; font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #888); cursor: pointer; margin-bottom: -1px; transition: color .25s, border-color .25s; } .media-tab:hover { color: var(--text-primary, #f0ece3); } .media-tab.active { color: var(--gold, #c9a84c); border-bottom-color: var(--gold, #c9a84c); } .media-tab-sub { text-align: center; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-style: italic; color: var(--muted, #888); margin-bottom: 2.5rem; } @media (max-width: 480px) { .media-tab { padding: .65rem 1.1rem; font-size: .72rem; } } /* ── Photo grid ── */ .media-photo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; } @media (max-width: 991px) { .media-photo-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575px) { .media-photo-grid { grid-template-columns: repeat(2, 1fr); } } .media-photo-item { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; } .media-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; } .media-photo-item:hover img { transform: scale(1.07); } .media-photo-item-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background .3s; } .media-photo-item:hover .media-photo-item-overlay { background: rgba(0,0,0,.38); } .media-photo-zoom { color: #fff; font-size: 1.4rem; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s; } .media-photo-item:hover .media-photo-zoom { opacity: 1; transform: scale(1); } /* ── Lightbox ── */ .media-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.93); align-items: center; justify-content: center; } .media-lightbox.open { display: flex; } .media-lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; display: block; user-select: none; } .media-lb-close { position: absolute; top: 1.25rem; right: 1.5rem; background: none; border: none; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; opacity: .65; transition: opacity .2s; } .media-lb-close:hover { opacity: 1; } .media-lb-prev, .media-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 1.3rem; padding: .9rem 1.1rem; cursor: pointer; transition: background .2s; } .media-lb-prev { left: 1rem; } .media-lb-next { right: 1rem; } .media-lb-prev:hover, .media-lb-next:hover { background: rgba(255,255,255,.22); } .media-lb-counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-family: 'Inter', sans-serif; font-size: .72rem; letter-spacing: .12em; color: rgba(255,255,255,.45); } /* ── Clients logo grid ── */ .clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem; } .client-logo-card { background: var(--surface, #1a1a1a); border: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; padding: 1.75rem 1.25rem; transition: border-color .3s, transform .3s; } .client-logo-card:hover { border-color: var(--gold, #c9a84c); transform: translateY(-3px); } .client-logo-card img { max-height: 56px; max-width: 120px; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.4); transition: filter .3s; } .client-logo-card:hover img { filter: grayscale(0) brightness(1); } /* ============================================================ PAGE LOADER ============================================================ */ .page-loader { position: fixed; inset: 0; z-index: var(--z-overlay, 9999); background: #0F0F0F; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s var(--ease-smooth), visibility 0.6s; } .page-loader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } .loader-inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .loader-brand { display: block; font-family: var(--f-serif); font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 300; letter-spacing: 0.55em; color: var(--gold); opacity: 0; transform: translateY(14px); animation: loader-rise 0.75s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)) 0.1s forwards; } .loader-tagline { display: block; font-family: var(--f-sans); font-size: clamp(0.55rem, 1.4vw, 0.72rem); font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(201,169,110,0.55); opacity: 0; animation: loader-rise 0.75s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)) 0.3s forwards; } .loader-bar-wrap { width: clamp(80px, 20vw, 160px); height: 1px; background: rgba(201,169,110,0.15); border-radius: 1px; overflow: hidden; margin-top: 1.5rem; opacity: 0; animation: loader-rise 0.4s ease 0.55s forwards; } .loader-bar { height: 100%; width: 0; background: var(--gold); animation: loader-fill 1.4s var(--ease-expo, cubic-bezier(0.16,1,0.3,1)) 0.6s forwards; } @keyframes loader-rise { to { opacity: 1; transform: translateY(0); } } @keyframes loader-fill { to { width: 100%; } } /* ══════════════════════════════════════════════════════════ PROJECT DETAIL OVERLAY Split panel: carousel (left) + details (right) Used by: architecture-projects, interiors-projects, landscape-projects ══════════════════════════════════════════════════════════ */ .pdo-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .pdo-overlay.active { opacity: 1; pointer-events: all; } .pdo-inner { display: flex; width: 100%; height: 100%; transform: translateY(28px); transition: transform 0.4s var(--ease-expo); background: var(--bg); } .pdo-overlay.active .pdo-inner { transform: translateY(0); } .pdo-carousel-side { flex: 0 0 62%; background: #000; position: relative; display: flex; flex-direction: column; overflow: hidden; } .pdo-counter { position: absolute; top: 14px; right: 14px; z-index: 10; font-family: var(--f-sans); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.55); padding: 4px 12px; border: 1px solid rgba(255,255,255,0.15); } #pdoCarousel { flex: 1; display: flex; flex-direction: column; min-height: 0; } #pdoCarousel .carousel-inner { flex: 1; overflow: hidden; min-height: 0; } #pdoCarousel .carousel-item { height: 100%; } .pdo-carousel-img { width: 100%; height: 100%; object-fit: contain; display: block; } .pdo-carousel-side .carousel-control-prev, .pdo-carousel-side .carousel-control-next { width: 52px; opacity: 0.6; transition: opacity 0.2s; } .pdo-carousel-side .carousel-control-prev:hover, .pdo-carousel-side .carousel-control-next:hover { opacity: 1; } .pdo-carousel-side .carousel-control-prev:disabled, .pdo-carousel-side .carousel-control-next:disabled { opacity: 0.15; cursor: default; pointer-events: none; } .pdo-thumbs { flex-shrink: 0; display: flex; gap: 5px; padding: 8px 10px; height: 76px; background: #0a0a0a; overflow-x: auto; align-items: center; scrollbar-width: thin; scrollbar-color: var(--gold-border) transparent; } .pdo-thumbs::-webkit-scrollbar { height: 3px; } .pdo-thumbs::-webkit-scrollbar-thumb { background: var(--gold-border); border-radius: 2px; } .pdo-thumb { flex: 0 0 70px; height: 56px; object-fit: cover; cursor: pointer; opacity: 0.4; border: 2px solid transparent; transition: opacity 0.2s, border-color 0.2s; } .pdo-thumb:hover { opacity: 0.75; } .pdo-thumb.active { opacity: 1; border-color: var(--gold); } .pdo-details-side { flex: 0 0 38%; background: var(--bg-2); position: relative; display: flex; flex-direction: column; border-left: 1px solid var(--border); } .pdo-close-btn { position: absolute; top: 1.1rem; right: 1.25rem; background: none; border: 1px solid var(--border); color: var(--text-2); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.85rem; transition: var(--transition); z-index: 5; border-radius: 0; } .pdo-close-btn:hover { border-color: var(--gold-border); color: var(--gold); background: var(--gold-dim); } .pdo-details-scroll { flex: 1; overflow-y: auto; padding: 2.5rem 2rem 2.5rem; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .pdo-details-scroll::-webkit-scrollbar { width: 4px; } .pdo-details-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .pdo-proj-title { font-family: var(--f-serif); font-size: var(--fs-2xl); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); color: var(--text); margin-bottom: 1.5rem; padding-right: 2.5rem; line-height: var(--lh-tight); } .pdo-rule { border: none; border-top: 1px solid var(--gold-border); margin: 0 0 1.5rem; } .pdo-info-label { font-family: var(--f-sans); font-size: var(--fs-1xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-2); margin-bottom: 0.9rem; } .pdo-meta-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; } .pdo-meta-table tr { border-bottom: 1px solid var(--border); } .pdo-meta-table tr:last-child { border-bottom: none; } .pdo-meta-table td { padding: 0.8rem 0; font-size: var(--fs-sm); line-height: var(--lh-snug); vertical-align: top; } .pdo-meta-table td:first-child { font-family: var(--f-sans); font-weight: var(--fw-medium); color: var(--text-2); letter-spacing: var(--ls-tight); text-transform: uppercase; font-size: var(--fs-2xs); width: 40%; } .pdo-meta-table td:last-child { font-family: var(--f-serif); font-size: var(--fs-base); color: var(--text); } .pdo-desc { margin-top: 0.5rem; } .pdo-desc p { font-family: var(--f-sans); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-2); margin-bottom: 1rem; } @media (max-width: 767.98px) { .pdo-inner { flex-direction: column; } .pdo-carousel-side { flex: 0 0 52vh; min-height: 260px; } .pdo-details-side { flex: 1; border-left: none; border-top: 1px solid var(--border); min-height: 0; } .pdo-proj-title { font-size: var(--fs-xl); } } [data-theme="light"] .pdo-details-side { background: var(--surface-2); } /* ══════════════════════════════════════════════════════════ PROJECT SINGLE PAGE ══════════════════════════════════════════════════════════ */ .pd-feature-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .pd-info-panel { background: var(--surface); border: 1px solid var(--border); height: 100%; padding: 2rem 1.75rem; } .pd-info-title { font-family: var(--f-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--gold-border); } .pd-meta-table { width: 100%; border-collapse: collapse; } .pd-meta-table tr { border-bottom: 1px solid var(--border); } .pd-meta-table tr:last-child { border-bottom: none; } .pd-meta-table td { padding: 0.9rem 0; font-size: var(--fs-sm); line-height: var(--lh-snug); } .pd-meta-table td:first-child { font-family: var(--f-sans); font-weight: var(--fw-medium); color: var(--text-2); letter-spacing: var(--ls-tight); text-transform: uppercase; font-size: var(--fs-2xs); width: 45%; } .pd-meta-table td:last-child { font-family: var(--f-serif); font-size: var(--fs-base); color: var(--text); } .pd-view-btn { display: inline-block; margin-top: 1.75rem; padding: 0.65rem 1.6rem; border: 1px solid var(--gold-border); color: var(--gold); font-family: var(--f-sans); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; text-decoration: none; transition: var(--transition); } .pd-view-btn:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); } .pd-article { padding-top: 3.5rem; } .pd-rule { border: none; border-top: 1px solid var(--gold-border); margin: 0 0 2rem; } .pd-article-heading { font-family: var(--f-serif); font-size: var(--fs-2xl); font-weight: var(--fw-light); letter-spacing: var(--ls-tight); color: var(--text); margin-bottom: 0.75rem; } .pd-article-meta { display: flex; align-items: center; gap: 1.5rem; font-family: var(--f-sans); font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 2rem; flex-wrap: wrap; } .pd-article-meta span { display: flex; align-items: center; gap: 0.4rem; } .pd-article-meta i { color: var(--gold); font-size: 0.7rem; } .pd-article-body p { font-family: var(--f-sans); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-2); margin-bottom: 1.25rem; } .more-projects { padding-top: 4rem; padding-bottom: 5rem; } .more-projects-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2.5rem; } .more-projects-header .mp-rule { flex: 1; border: none; border-top: 1px solid var(--border); margin: 0; } .more-projects-header .mp-label { font-family: var(--f-sans); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-2); white-space: nowrap; } .mp-card { background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: var(--transition); } .mp-card:hover { border-color: var(--gold-border); } .mp-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 0.6s var(--ease-smooth); } .mp-card:hover .mp-card-img { transform: scale(1.04); } .mp-card-img-wrap { overflow: hidden; } .mp-card-body { padding: 1.25rem 1.25rem 1rem; } .mp-card-title { font-family: var(--f-serif); font-size: var(--fs-lg); font-weight: var(--fw-light); color: var(--text); margin-bottom: 0.5rem; letter-spacing: var(--ls-tight); } .mp-card-text { font-family: var(--f-sans); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-2); margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mp-card-link { font-family: var(--f-sans); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--gold); text-decoration: none; transition: color 0.3s ease; } .mp-card-link:hover { color: var(--gold-lt); } .mp-card-link i { margin-left: 0.4rem; font-size: 0.6rem; } .pd-content-section { padding: 3.5rem 0 2rem; } [data-theme="light"] .pd-info-panel { background: var(--surface); border-color: var(--border); } [data-theme="light"] .mp-card { background: var(--surface); } /* ══════════════════════════════════════════════════════════ 404 ERROR PAGE ══════════════════════════════════════════════════════════ */ .error-section { min-height: calc(100vh - 80px); display: flex; align-items: center; background: var(--bg); padding: 120px 0 80px; position: relative; overflow: hidden; } .error-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.4; pointer-events: none; } .error-code { font-family: var(--f-serif); font-size: clamp(7rem, 22vw, 16rem); font-weight: 300; font-style: italic; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold-border); letter-spacing: -0.02em; user-select: none; margin-bottom: 0; } .error-heading { font-family: var(--f-serif); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; color: var(--text); line-height: 1.2; margin-bottom: 1.25rem; } .error-heading em { font-style: italic; color: var(--gold); } .error-message { font-family: var(--f-sans); font-size: 0.95rem; color: var(--text-2); line-height: 1.75; max-width: 440px; margin-bottom: 2.5rem; } .error-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .error-nav .btn-primary-gold { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.6rem; background: var(--gold); color: #0F0F0F; font-family: var(--f-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: none; transition: background 0.25s, transform 0.2s; } .error-nav .btn-primary-gold:hover { background: var(--gold-lt); transform: translateY(-2px); } .error-nav .btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.4rem; background: transparent; color: var(--text-2); font-family: var(--f-sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--border); transition: color 0.25s, border-color 0.25s, transform 0.2s; } .error-nav .btn-ghost:hover { color: var(--gold); border-color: var(--gold-border); transform: translateY(-2px); } .error-divider { width: 48px; height: 1px; background: var(--gold-border); margin: 1.5rem 0; } .error-quick-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; } .error-quick-links a { font-family: var(--f-sans); font-size: 0.78rem; color: var(--text-2); text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; } .error-quick-links a:hover { color: var(--gold); } .error-quick-links a i { margin-right: 0.3rem; font-size: 0.7rem; } @media (max-width: 767px) { .error-section { padding: 100px 0 60px; text-align: center; } .error-message { margin-left: auto; margin-right: auto; } .error-nav { justify-content: center; } .error-quick-links { justify-content: center; } .error-divider { margin-left: auto; margin-right: auto; } }