/* =========================================================== DemQora Technologies ABOUT PAGE Desktop background + slow parallax + normalized header =========================================================== */ /* ========================================================= ABOUT TITLE ========================================================= */ .about-reference-layout .about-brand-title { font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 700; line-height: 1.08; color: #effffb; margin: 0 0 24px; } .about-reference-layout .about-brand-title .about-title-word { font-size: .5em; } .about-reference-layout .about-brand-title .about-title-brand { font-size: 1em; } /* ========================================================= ABOUT CINEMATIC BACKGROUND DESKTOP PARALLAX ========================================================= */ main.about-page.about-reference-layout { background-color: #020808 !important; background-image: linear-gradient( 90deg, rgba(2, 8, 8, .22) 0%, rgba(2, 8, 8, .05) 48%, rgba(2, 8, 8, .24) 100% ), linear-gradient( 180deg, rgba(2, 8, 8, .04) 0%, rgba(2, 8, 8, .14) 100% ), url("../img/about-cinematic-bg.png") !important; background-position: center top, center top, center var(--about-parallax, 0px) !important; /* IMPORTANT: Preserve the full desktop image width. Do not use cover here. */ background-size: 100% auto, 100% auto, 100% auto !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-attachment: scroll, scroll, scroll !important; } /* ========================================================= TRANSPARENT ABOUT SECTIONS ========================================================= */ .about-reference-layout .about-cinema-hero, .about-reference-layout .about-ref-section, .about-reference-layout .about-ref-approach, .about-reference-layout .about-ref-philosophy, .about-reference-layout .about-ref-direction { background: transparent !important; } /* ========================================================= TEXT CLOUDS ========================================================= */ .about-reference-layout { --about-copy-cloud-core: rgba(1, 9, 10, .78); --about-copy-cloud-edge: rgba(1, 9, 10, 0); } .about-reference-layout .about-cinema-copy > p, .about-reference-layout .about-hero-note, .about-reference-layout .about-ref-copy, .about-reference-layout .about-decision-line { position: relative; isolation: isolate; z-index: 0; } .about-reference-layout .about-cinema-copy > p::before, .about-reference-layout .about-hero-note::before, .about-reference-layout .about-ref-copy::before, .about-reference-layout .about-decision-line::before { content: ''; position: absolute; inset: -1rem -1.25rem; z-index: -1; border-radius: 999px; background: radial-gradient( ellipse at 42% 50%, var(--about-copy-cloud-core) 0%, rgba(1, 9, 10, .64) 50%, var(--about-copy-cloud-edge) 80% ); filter: blur(12px); pointer-events: none; } /* ========================================================= DARKER CLOUD BEHIND LONGER TEXT BLOCKS ========================================================= */ .about-reference-layout .about-ref-copy::before { background: radial-gradient( ellipse at center, rgba(2, 12, 13, .86) 0%, rgba(2, 12, 13, .56) 42%, rgba(2, 12, 13, 0) 78% ); } /* ========================================================= HEADER SAME STRUCTURE AS OTHER DESKTOP PAGES ========================================================= */ body:has(.about-reference-layout) .site-header { background: rgba(3, 9, 9, .82) !important; border-bottom: 1px solid var(--line) !important; } /* DO NOT set position:relative here. The global styles.css controls the sticky header: position: sticky; top: 0; */ body:has(.about-reference-layout) .site-header .container.navbar { width: min( calc(100% - 36px), var(--max) ) !important; max-width: none !important; min-height: 74px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; } body:has(.about-reference-layout) .site-header .brand { position: static !important; display: flex !important; align-items: center !important; margin: 0 !important; transform: none !important; } body:has(.about-reference-layout) .site-header .brand img { width: 42px !important; height: 42px !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; object-fit: contain !important; mix-blend-mode: screen !important; } body:has(.about-reference-layout) .site-header .brand span { display: none !important; } /* ========================================================= FOOTER ========================================================= */ body:has(.about-reference-layout) .site-footer { margin-top: 0 !important; padding: 0 !important; min-height: 74px !important; } body:has(.about-reference-layout) .site-footer > .container.footer-row { min-height: 74px !important; align-items: center !important; } body:has(.about-reference-layout) .site-footer > .container.footer-row > div:first-child { font-size: .7rem !important; line-height: 1.25 !important; } body:has(.about-reference-layout) .site-footer > .container.footer-row > div:first-child .small { font-size: .68rem !important; } body:has(.about-reference-layout) .site-footer > .container { width: 100% !important; max-width: none !important; margin: 0 !important; padding-left: 32px !important; padding-right: 32px !important; } body:has(.about-reference-layout) .site-footer .footer-row { justify-content: flex-start !important; } body:has(.about-reference-layout) .site-footer .footer-social { margin-left: auto !important; } /* ========================================================= FOOTER SOCIAL ICONS ========================================================= */ body:has(.about-reference-layout) .footer-social { gap: 16px !important; align-items: center !important; } body:has(.about-reference-layout) .footer-social .social-card { width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; display: grid !important; place-items: center !important; } body:has(.about-reference-layout) .footer-social .social-card::before { display: block !important; width: 30px !important; height: 30px !important; font-size: 1.45rem !important; line-height: 30px !important; text-align: center !important; font-weight: 700 !important; filter: brightness(0) saturate(100%) invert(83%) sepia(26%) saturate(1010%) hue-rotate(124deg) brightness(94%) contrast(88%) drop-shadow( 0 0 7px rgba(22,234,215,.2) ) !important; opacity: .3 !important; } /* Facebook */ body:has(.about-reference-layout) .footer-social .social-card:nth-child(1)::before { transform: scale(1.28); } /* Instagram */ body:has(.about-reference-layout) .footer-social .social-card:nth-child(2)::before { width: 30px !important; height: 30px !important; transform: scale(.88); } /* LinkedIn */ body:has(.about-reference-layout) .footer-social .social-card:nth-child(3)::before { font-size: 1.35rem !important; transform: scale(1.12); } /* X */ body:has(.about-reference-layout) .footer-social .social-card:nth-child(4)::before { content: 'X' !important; font-family: Arial, sans-serif !important; color: #58fff0 !important; -webkit-text-fill-color: #58fff0 !important; font-size: 1.55rem !important; transform: scale(1.08); } /* YouTube */ body:has(.about-reference-layout) .footer-social .social-card:nth-child(5)::before { content: '' !important; width: 38px !important; height: 27px !important; border: 0 !important; border-radius: 0 !important; background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 34'%3E%3Crect width='48' height='34' rx='9' fill='%2358fff0'/%3E%3Cpath d='m20 9 14 8-14 8Z' fill='%23030909'/%3E%3C/svg%3E" ) center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important; opacity: .3 !important; filter: drop-shadow( 0 0 7px rgba(88,255,240,.28) ) !important; transform: scale(.9); } body:has(.about-reference-layout) .footer-social .social-card:nth-child(5)::after { display: none !important; } /* ========================================================= MOBILE SAFETY Desktop parallax stops on smaller screens. The shared mobile.css can then control the mobile layout. ========================================================= */ @media (max-width: 800px) { main.about-page.about-reference-layout { background-position: center top, center top, center top !important; background-size: 100% auto, 100% auto, 100% auto !important; background-attachment: scroll, scroll, scroll !important; } } @media (max-width: 640px) { body:has(.about-reference-layout) .site-footer > .container { padding-left: 20px !important; padding-right: 20px !important; } }