/* ========================================================================== Photriya Studios — "The Wall" theme overrides Loaded after bootstrap.min.css, the site's own style.css and The Wall's style.css. Repaints the kept Bootstrap-driven sections (Gallery, Quotation, Deliverables, Total Quotation, Additional Requirements, Footer) in The Wall's monochrome palette + typography, and lays out the new wall/about intro that replaces the old hero. ========================================================================== */ /* #preloader is a full-screen, top z-index (999999) fixed overlay that's only ever removed by JS after window 'load' — which needs every resource on the page (external fonts, CDN scripts, every image) to finish. Any delay there leaves it sitting over the whole page: invisible once faded, but still intercepting every click and text selection underneath. It's purely visual, so it should never be able to block interaction at all, regardless of JS timing. */ #preloader { pointer-events: none; } /* .preload-content is another full-viewport position:fixed element from the template, left over from a page-transition system this build doesn't use. It's empty, but being fixed+full-screen it can still intercept clicks/selection sitting invisibly on top of real content — it serves no purpose here, so take it out of the equation entirely. */ .preload-content { display: none; } /* Wall's CSS sets body{overflow-y:auto} — a leftover from an old single- page-app scroll trick this page no longer needs (the wall section is height:auto now, not a forced 100vh box). Under normal use this is inert: since doesn't declare its own overflow, the browser "promotes" body's scroll behavior up to the real document/viewport level per spec, so scrolling behaves normally and body.scrollTop just stays 0. The landmine: the instant any script sets an explicit overflow on — e.g. cubeportfolio's lightbox popup does this to lock background scroll while open, completely standard practice — that promotion stops, body's dormant overflow:auto "wakes up" as a real separate scroll container, and since its actual scroll position was always 0, the page visually snaps to the top. Removing this makes the sole, standard scrolling element everywhere, which is what every library assumes. */ body { overflow-y: visible; } /* cubeportfolio's lightbox popup locks background scrolling by setting overflow:hidden on via an inline style (jQuery .css()) whenever a gallery photo is opened — standard modal practice, but in Chromium, setting overflow:hidden on the scrolling element resets its scroll position to 0 as a side effect. That's the actual "jump to top" click; the animated glide back afterwards is cubeportfolio restoring the saved position. !important in a stylesheet always wins over a plain inline style, so this blocks the lock at the source — the tradeoff is the page can still be scrolled behind an open lightbox, which is a minor, worthwhile trade for not visibly yanking the page around on every photo click. */ html { overflow-y: visible !important; } /* -- palette: monochrome, no accent color -- */ :root { --primary: #111111; --secondary: #5f5f5f; --light: #f4f4f2; --dark: #111111; } body { background-color: #fff; color: #5f5f5f; font-family: 'Open Sans', sans-serif; } a { color: #111; } a:hover { color: #5f5f5f; } /* Wall's own p{line-height:1; padding-left:10px} is fine for short captions but cramps real paragraph copy (About text, T&C items, etc.) — loosen it site-wide. */ p { line-height: 1.7; padding-left: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; color: #111; } /* bootstrap utility classes bake hex colors directly, so var() overrides above don't reach them — repaint explicitly */ .text-primary { color: #111 !important; } .bg-primary { background-color: #111 !important; } .border-primary { border-color: #111 !important; } .btn-primary { color: #fff !important; background-color: #111 !important; border-color: #111 !important; } .btn-outline-primary { color: #111 !important; border-color: #111 !important; } .btn-outline-primary:hover { color: #fff !important; background-color: #111 !important; border-color: #111 !important; } .bg-light { background-color: #f4f4f2 !important; } .bg-dark { background-color: #111 !important; } .toc-text::before { color: #111 !important; } .cbp-l-filters-alignRight .cbp-filter-item.cbp-filter-item-active { background-color: #111; border-color: #111; } .cbp-l-filters-alignRight .cbp-filter-counter { background-color: #111; } .cbp-l-filters-alignRight .cbp-filter-counter:after { border-top-color: #111; } /* Wall's global reset sets border:0 on every table element (td, th, tr...), which wins over Bootstrap's .table-bordered borders since it loads later at equal specificity — restore a light hairline to match the template. */ .table-bordered > :not(caption) > * > * { border: 1px solid #dee2e6; } /* rounded corners on the Add-Ons table. The wrapper's overflow:hidden clips the table's box, but Chrome ignores border-radius on corners while border-collapse:collapse is set, so the cell's own straight border still shows as a sharp corner just inside the rounded edge — switch to border-collapse:separate (with border-spacing:0, so cells stay flush) and round the actual corner cells to match. */ .table-rounded { border-radius: 10px; overflow: hidden; } .table-rounded table { border-collapse: separate; border-spacing: 0; } .table-rounded tr:first-child td:first-child { border-top-left-radius: 10px; } .table-rounded tr:first-child td:last-child { border-top-right-radius: 10px; } .table-rounded tr:last-child td:first-child { border-bottom-left-radius: 10px; } .table-rounded tr:last-child td:last-child { border-bottom-right-radius: 10px; } /* -- quotation section + event cards: centered text. Wall's global p{text-align:left} is a direct rule on

, which beats the *inherited* text-align:center coming down from ancestor .text-center wrappers (a direct rule always wins over an inherited value) — override explicitly. */ #quotation, #quotation p { text-align: center; } .fact-item.bg-light { background-color: #fff !important; border-radius: 10px; box-shadow: 0 4px 24px rgba(17, 17, 17, 0.08); } /* event cards specifically: left-aligned text, overriding both the section-wide centering above and Bootstrap's .text-center (also applied directly on .fact-item), which needs matching !important + specificity to beat */ #quotation .fact-item, #quotation .fact-item p, #quotation .fact-item h4 { text-align: left !important; } /* -- gallery: rounded image tiles + pill-shaped filter buttons -- */ #js-grid-masonry .cbp-caption { display: block; border-radius: 10px; overflow: hidden; } .cbp-l-filters-alignRight .cbp-filter-item { border-radius: 999px; } .cbp-l-filters-alignRight .cbp-filter-item.cbp-filter-item-active { color: #fff; } /* -- footer: white card, solid dark social icons, matching the mockup -- */ .footer { color: #5f5f5f; } /* same Wall global p{text-align:left} issue as the quotation cards — a direct rule on

beats the inherited text-align:center */ #footer, #footer p { text-align: center; } .footer p { color: #5f5f5f; } /* the logo image's own "STUDIOS" wordmark is baked in as very light grey, meant for a dark background — spell the brand name out in text now that the footer is light, matching the mockup's legible wordmark */ .footer-brand { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: #111; } .footer-social-icon { background-color: #111 !important; border-color: #111 !important; color: #fff !important; } .footer-social-icon:hover { background-color: #5f5f5f !important; border-color: #5f5f5f !important; color: #fff !important; } .footer-divider { max-width: 320px; margin: 0 auto 24px auto; border: none; border-top: 1px solid #e5e5e5; opacity: 1; } .footer-thanks { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 22px; letter-spacing: normal; text-transform: none; text-align: center; color: #111; } /* footer sits on a light bg now — hover states should darken, not lighten */ .footer .btn.btn-link:hover { color: #111 !important; } /* -- previous works & videos: a static "linktree" card of portfolio links. Content is hardcoded for now — will move to Django Admin later. -- */ #previous-works .links-card { background: #fff; border-radius: 20px; box-shadow: 0 4px 24px rgba(17, 17, 17, 0.08); padding: 36px 24px; } @media (min-width: 768px) { #previous-works .links-card { padding: 48px 56px; } } #previous-works .links-card-subtitle { color: #5f5f5f; font-size: 16px; line-height: 1.6; text-align: center; max-width: 560px; margin: 0 auto 28px auto; } #previous-works .links-columns { display: grid; grid-template-columns: 1fr; gap: 4px; } @media (min-width: 768px) { #previous-works .links-columns { grid-template-columns: 1fr 1fr; gap: 24px; } } #previous-works .links-group-label { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-align: left; color: #111; margin: 0 0 12px 0; } #previous-works .links-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; } #previous-works .link-item { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid #ececec; border-radius: 14px; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; } #previous-works .link-item:hover { box-shadow: 0 4px 16px rgba(17, 17, 17, 0.08); transform: translateY(-1px); } #previous-works .link-item-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; background: #f4f4f2; color: #111; display: flex; align-items: center; justify-content: center; font-size: 15px; } #previous-works .link-item-icon-dark { background: #111; color: #fff; } #previous-works .link-item-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; text-align: left; } #previous-works .link-item-title { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; color: #111; } #previous-works .link-item-subtitle { font-size: 13px; color: #999; } #previous-works .link-item-arrow { flex: 0 0 auto; color: #111; font-size: 14px; } #previous-works .link-item-cta { background: #f4f4f2; border-color: transparent; margin-bottom: 0; } /* -- section header component (About / Gallery / Quotation / Deliverables / Total Quotation / Additional Requirements) mirrors The Wall's "// 0N Title Subtitle" header treatment -- */ .section-header { text-align: center; padding: 0 0 10px 0; } .section-header h4 { font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; color: #999; margin: 0; } .section-header h2 { position: relative; font-family: 'Oswald', sans-serif; font-size: 42px; font-weight: 700; letter-spacing: normal; color: #111; text-align: center; text-transform: uppercase; margin: 3px 0 0 0; } .section-header h2 .get-behind { position: absolute; width: 100%; left: 0; margin-top: -28px; font-size: 52px; color: #111; opacity: 0.08; } .section-header h3 { font-family: 'Dosis', sans-serif; font-weight: 700; font-size: 12px; text-align: center; text-transform: uppercase; letter-spacing: 0.35em; color: #111; margin: 10px 0 0 0; } .section-divider-top, .section-divider-bottom { height: 40px; } .section-divider-mid { height: 58px; } /* -- wall / intro -- */ /* Wall's own .upper-page/#viewport are height:100%/position:absolute, built for the old draggable canvas which needed a fixed 100vh clipping box. The grid below sizes tiles to stay perfectly square, so the section's total height is however tall 32 square tiles come out to — let it size to that content instead of forcing 100vh (which would stretch or crop the tiles off-square). .titleOT/#home-navigation/ .top-shadow now live inside #page-home so their absolute positioning centers against that real (variable) height, not the viewport. */ #page-home, .upper-page { position: relative; height: auto; background-color: #111; } #viewport { position: relative; top: auto; right: auto; bottom: auto; left: auto; overflow: visible; } .logo-text { padding-left: 35px; font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; letter-spacing: 0.02em; color: #fff; text-shadow: 1px 1px 2px #111; line-height: 75px; } .reduce-height .logo-text { line-height: 55px; } .logo-mobile.logo-text { position: fixed; top: 10px; left: 14px; font-size: 20px; line-height: 1; } /* Wall's own .titleOT is a fixed 600px box, which forces "Photriya Studios" onto two lines even on wide screens. Let it size to content on desktop (one line) and fall back to the template's original narrow box on mobile (where two lines is expected). */ .titleOT { width: auto; max-width: 92vw; left: 50%; margin-left: 0; transform: translateX(-50%); padding: 0 20px; box-sizing: border-box; } .introduction-1 h1 { white-space: nowrap; } @media only screen and (max-width: 880px) { .titleOT { width: 600px; max-width: 90vw; padding: 0; } .introduction-1 h1 { white-space: normal; font-size: 42px; } .introduction-1 .wall-tagline { font-size: 11px; letter-spacing: 0.15em; } } @media only screen and (max-width: 480px) { .introduction-1 h1 { font-size: 32px; } } .introduction-1 .wall-tagline { font-family: 'Dosis', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; text-align: center; color: #ccc; margin: 16px 0 0 0; text-shadow: 1px 1px 2px #111; } /* the wall: a fixed (non-draggable) grid of 32 images. Columns are responsive, but every tile is forced to a 1:1 aspect-ratio so images are always square and never stretched/cropped out of proportion — rows simply follow from the column count instead of being stretched to fill a set height. */ #wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } @media only screen and (min-width: 576px) { #wall { grid-template-columns: repeat(6, 1fr); } } @media only screen and (min-width: 992px) { #wall { grid-template-columns: repeat(8, 1fr); } } #wall .tile { aspect-ratio: 1 / 1; background: #111; overflow: hidden; } #wall .tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -- about -- */ #page-about .quotations-line-left { background: #111; } @media (max-width: 991.98px) { #page-about .quotations-line-left { display: none; } } /* -- print: hide the wall/about intro like the old hero was hidden -- */ @media print { #page-home, #page-about, .main-navigation, .mobile-navigation-wrapper, nav.mobile-nav, #preloader { display: none !important; } }