@charset "UTF-8"; /* =========================================================== Casey — site overrides (unified) =========================================================== */ /* ---------- Simple utilities ---------- */ .highlight { color:#7A3FFF; } .space-grotesk { font-family: "Space Grotesk", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; } /* ---------- Hero / Header fixes ---------- */ /* Keep hero headline clear of the sticky header + brush logo */ @media (min-width: 992px){ .header-sticky-top-lg + main#content { margin-top: 140px; } } /* Ensure the header’s height matches the tall brush logo */ @media (min-width: 992px){ .header .navbar { min-height: 120px; align-items: center; } } /* Neutral hero background (no tint behind header) */ .home-hero { background:#fff; } /* Outline button styling to match brand */ .btn-outline-primary{ border-color:#6f42c1; color:#6f42c1; } .btn-outline-primary:hover{ background:#6f42c1; color:#fff; } /* ---------- Portrait (hero) ---------- */ /* Toggle: hidden by default; show when */ .hero-portrait{ display:none; } .with-portrait .hero-portrait{ display:block; } /* Small, round hero portrait */ .hero-portrait .portrait-wrap{ --p-size: 180px; /* base / mobile */ width: var(--p-size); margin-left: auto; position: relative; } @media (min-width: 768px){ .hero-portrait .portrait-wrap{ --p-size: 200px; } } @media (min-width: 992px){ .hero-portrait .portrait-wrap{ --p-size: 260px; } } @media (min-width: 1200px){ .hero-portrait .portrait-wrap{ --p-size: 280px; } } .hero-portrait .portrait{ width: 100%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 10px 28px rgba(17,17,26,.12); } @media (min-width: 992px){ .hero-portrait .portrait{ border-width: 5px; } } /* Mobile centering & tighter spacing */ @media (max-width: 991.98px){ .hero-portrait{ display: flex; justify-content: center; margin-top: 1.25rem !important; /* overrides mt-5 class if present */ } .hero-portrait .portrait-wrap{ --p-size: 150px; margin-left: 0; } .home-hero{ padding-top: 2.25rem; padding-bottom: 2.25rem; } } /* No rectangular glow under the circle */ .hero-portrait .ink-ring{ display:none; } /* ---------- Featured tiles (Home) ---------- */ /* Breathing room for the section */ #featured { margin-top: 2.5rem; margin-bottom: 3rem; } /* Equal-height cards within each row */ #featured .row{ align-items: stretch; } #featured .row > *{ display:flex; } /* columns become flex boxes */ #featured .tile{ display:flex; flex-direction:column; height:100%; position: relative; /* Card surface & rounding */ background: #fafafe; /* hint of color vs site bg */ border: 1px solid rgba(17,17,26,.08); border-radius: 16px; box-shadow: 0 6px 18px rgba(17,17,26,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; /* Control padding via CSS so image can “bleed” */ --tile-pad: 1rem; padding: var(--tile-pad) !important; /* override p-3 from markup */ overflow: hidden; /* clip image to rounded top */ } @media (min-width: 992px){ #featured .tile{ --tile-pad: 1.5rem; } /* matches p-lg-4 */ } #featured .tile:hover{ transform: translateY(-3px); border-color: rgba(111,66,193,.18); box-shadow: 0 12px 28px rgba(17,17,26,.12); } /* Edge-to-edge image: touches top/left/right; only top corners appear rounded */ #featured .tile > .tile-thumb{ display:block; width: calc(100% + var(--tile-pad) * 2); /* extend past side padding */ margin: calc(-1 * var(--tile-pad)) /* TOP: cancel tile padding */ calc(-1 * var(--tile-pad)) /* LEFT/RIGHT: cancel padding */ var(--tile-pad); /* BOTTOM: normal text gap */ height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; /* parent supplies top curve */ box-shadow: none !important; } /* Fallback for browsers without aspect-ratio */ @supports not (aspect-ratio: 1 / 1){ #featured .tile > .tile-thumb{ height: 240px; } } /* Typographic helpers inside tiles */ #featured .tile-cat{ font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; opacity:.85; } #featured .tile .tile-link{ margin-top:auto; display:inline-block; font-weight:600; } /* ---------- Thumbnail placeholder blocks (used on Brand Stewardship tiles) ---------- */ .tile-thumb--placeholder{ display:flex; align-items:center; justify-content:center; width:100%; height:220px; border-radius:.75rem; background: linear-gradient(180deg, #EEE8FF 0%, #C9B7FF 100%); } @media (min-width:992px){ .tile-thumb--placeholder{ height:240px; } } .tile-thumb--placeholder .abbr{ font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:1.125rem; color:#6f42c1; opacity:.9; } /* quick variants */ .tile-thumb--purple { background:#6f42c1; } .tile-thumb--neutral{ background:#f2f3f7; } /* ---------- Gallery / project info blocks ---------- */ /* Portfolio Info */ .project-info { margin: 2rem 0; color:#333; } .project-meta { display:flex; gap:2rem; margin-bottom:1.5rem; font-size:1rem; } .project-meta p { margin:0; } .project-cards { display:flex; flex-wrap:wrap; gap:1.5rem; } .info-card{ flex:1; min-width:250px; border:1px solid #e0e0e0; border-radius:12px; padding:1.25rem; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.05); } .info-card h4{ margin:0 0 .75rem; font-size:1rem; font-weight:600; } .info-card p{ margin:0; font-size:.95rem; line-height:1.4; color:#555; } /* Masonry (CSS columns) */ .auto-gallery { column-count:3; column-gap:20px; margin:1rem 0; } .g-item{ display:inline-block; width:100%; margin:0 0 20px; border:1px solid #e5e5e5; background:#fff; overflow:hidden; break-inside:avoid; } .g-item img{ width:100%; height:auto; display:block; background:#f4f4f4; object-fit:contain; } .g-item figcaption{ padding:12px 14px; font-size:.9rem; color:#444; } @media (max-width: 992px){ .auto-gallery { column-count:2; } } @media (max-width: 576px){ .auto-gallery { column-count:1; } } /* ---------- Buttons (custom option) ---------- */ .custom-btn{ border-radius:12px; font-weight:600; font-size:16px; padding:.6rem 1.5rem; min-width:180px; text-align:center; } .custom-btn:not(.btn-primary){ background:#f8fbff; border:1px solid #e5e5e5; color:#111; } .custom-btn:not(.btn-primary):hover{ background:#e9f2ff; color:#000; } .custom-btn.btn-primary{ background:#6c3bff; border:none; } .custom-btn.btn-primary:hover{ background:#5a2fd9; } /* ---------- Lightbox ---------- */ .lightbox{ display:none; position:fixed; z-index:1050; padding-top:60px; left:0; top:0; width:100%; height:100%; overflow:auto; background:rgba(0,0,0,0.9); } .lightbox-content{ margin:auto; display:block; max-width:90%; max-height:80vh; } .lightbox-close{ position:absolute; top:20px; right:35px; color:#fff; font-size:40px; font-weight:bold; cursor:pointer; } .lightbox-close:hover{ color:#aaa; } .lightbox-prev, .lightbox-next{ cursor:pointer; position:absolute; top:50%; width:auto; padding:16px; margin-top:-22px; color:#fff; font-weight:bold; font-size:40px; transition:.3s; user-select:none; } .lightbox-prev{ left:20px; } .lightbox-next{ right:20px; } .lightbox-prev:hover, .lightbox-next:hover{ color:#aaa; } /* ---------- “Curve header” experimental styles (kept for reuse) ---------- */ .sticky-curve-header{ position: sticky; top:0; z-index:1030; background:#6c3bff; color:#fff; overflow:hidden; padding-bottom:160px; } .sticky-curve{ position:absolute; left:0; bottom:-1px; width:100%; height:160px; display:block; pointer-events:none; } .sticky-curve path{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); } .sticky-curve-header .nav-link{ color:#fff; opacity:.9; } .sticky-curve-header .nav-link:hover{ opacity:1; } @media (max-width: 576px){ .sticky-curve-header{ padding-bottom:120px; } .sticky-curve{ height:120px; } } /* Decorative font helpers */ .font-astrology{ font-family:'Unica One', cursive; } .lavishly-yours-regular{ font-family:"Lavishly Yours", cursive; font-weight:400; font-style:normal; } .allura-regular{ font-family:"Allura", cursive; font-weight:400; font-style:normal; } /* ---------- Misc (legacy placeholder) ---------- */ .thumb{ margin-bottom:50px; width:100%; height:520px; background:linear-gradient(180deg,#f8f9fc,#f3f4f8); display:flex; align-items:center; justify-content:center; color:#9aa0a6; font-weight:600; } /* ---------- Safety: if a page still has 'home-bg' on , neutralize it ---------- */ body.home-bg{ background:#fff !important; } /* === GLOBAL TILE SYSTEM (Home, All Work, Projects, Brand) === */ /* Card surface, spacing, hover */ .tile{ --tile-pad: 1rem; /* base padding */ position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--tile-pad) !important; /* override p-3 / p-lg-4 */ background: #fafafe; /* subtle contrast vs page */ border: 1px solid rgba(17,17,26,.08); border-radius: 16px; box-shadow: 0 6px 18px rgba(17,17,26,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; margin-bottom: .75rem; /* extra breathing room */ overflow: hidden; /* lets parent round the image top */ } @media (min-width: 992px){ .tile{ --tile-pad: 1.5rem; } /* matches p-lg-4 */ } .tile:hover{ transform: translateY(-3px); border-color: rgba(111,66,193,.18); box-shadow: 0 12px 28px rgba(17,17,26,.12); } /* Edge-to-edge media: touch top/left/right; rounded TOP only via parent */ .tile > .tile-thumb{ display:block; width: calc(100% + var(--tile-pad) * 2); margin: calc(-1 * var(--tile-pad)) /* top: cancel padding */ calc(-1 * var(--tile-pad)) /* sides: cancel padding */ var(--tile-pad) !important; /* bottom gap for text (beats .mb-3) */ height: auto !important; /* beat inline fixed heights */ aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; /* parent supplies top curve */ box-shadow: none !important; /* no inner frame */ } /* Fallback for older browsers without aspect-ratio */ @supports not (aspect-ratio: 1 / 1){ .tile > .tile-thumb{ height: 240px !important; } } /* Equal-height tiles in any Bootstrap row with gutters */ .row{ align-items: stretch; } /* stretch columns */ .row.g-3, .row.g-4, .row.g-5{ row-gap: 2rem; } /* nice vertical space */ .row.g-3 > [class^="col"], .row.g-3 > [class*=" col-"], .row.g-4 > [class^="col"], .row.g-4 > [class*=" col-"], .row.g-5 > [class^="col"], .row.g-5 > [class*=" col-"]{ display:flex; } .tile .tile-link{ margin-top:auto; display:inline-block; font-weight:600; } /* Placeholders behave like images */ .tile > .tile-thumb--placeholder{ width: calc(100% + var(--tile-pad) * 2); margin: calc(-1 * var(--tile-pad)) calc(-1 * var(--tile-pad)) var(--tile-pad); height: auto; min-height: 220px; border-radius: 0; } @media (min-width: 992px){ .tile > .tile-thumb--placeholder{ min-height: 240px; } } /* === UNIVERSAL TILE FIXES (Home, All Work, Projects, Brand) === */ /* Card surface + spacing */ .tile{ --tile-pad: 1rem; position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--tile-pad) !important; /* beat p-3 / p-lg-4 */ background: #fafafe; /* subtle contrast */ border: 1px solid rgba(17,17,26,.08); border-radius: 16px; box-shadow: 0 6px 18px rgba(17,17,26,.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow: hidden; /* clip image to rounded top */ } @media (min-width: 992px){ .tile{ --tile-pad: 1.5rem; } } .tile.bg-white{ background:#fafafe !important; } /* beat .bg-white */ /* Edge-to-edge image with only top corners rounded (via parent clip) */ .tile > img.tile-thumb, .tile > .tile-thumb{ display:block; width: calc(100% + var(--tile-pad) * 2) !important; /* beat .w-100 */ margin: calc(-1 * var(--tile-pad)) /* top: cancel padding */ calc(-1 * var(--tile-pad)) /* left/right */ var(--tile-pad) !important; /* bottom gap for text */ height: auto !important; /* beat inline heights */ aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; /* parent supplies top curve */ box-shadow: none !important; } /* Fallback for older browsers */ @supports not (aspect-ratio: 1 / 1){ .tile > img.tile-thumb, .tile > .tile-thumb{ height: 240px !important; } } /* Equal-height tiles + comfy vertical rhythm across all rows */ .row{ align-items: stretch; } .row.g-3, .row.g-4, .row.g-5{ row-gap: 2.25rem; } /* space between rows */ .row.g-3 > [class^="col"], .row.g-3 > [class*=" col-"], .row.g-4 > [class^="col"], .row.g-4 > [class*=" col-"], .row.g-5 > [class^="col"], .row.g-5 > [class*=" col-"]{ display:flex; } .tile .tile-link{ margin-top:auto; display:inline-block; font-weight:600; } /* Placeholders (Hughes) behave like images */ .tile > .tile-thumb--placeholder{ width: calc(100% + var(--tile-pad) * 2); margin: calc(-1 * var(--tile-pad)) calc(-1 * var(--tile-pad)) var(--tile-pad); min-height: 220px; border-radius: 0; } @media (min-width: 992px){ .tile > .tile-thumb--placeholder{ min-height: 240px; } } /* Center the HFC label in the placeholder block on all pages */ .tile > .tile-thumb.tile-thumb--placeholder{ display:flex !important; align-items:center !important; justify-content:center !important; text-align:center; line-height:1; padding:0; } /* (Optional) tweak the letters a touch if needed */ .tile-thumb--placeholder .abbr{ display:block; transform: translateY(0); /* keep baseline steady after font changes */ } /* ===== Tighter top spacing on project/case-study pages ===== */ /* 1) Default (all pages): smaller offset below the sticky header */ @media (min-width: 992px){ .header-sticky-top-lg + main#content { margin-top: 96px; } /* was 140px */ } /* 2) Home only: keep the larger offset so the hero clears the brush logo - The :has() selector targets pages that include .home-hero. - Fallback: if you ever add class="home" to , it will also apply. */ @media (min-width: 992px){ body:has(.home-hero) .header-sticky-top-lg + main#content, body.home .header-sticky-top-lg + main#content { margin-top: 140px; /* matches the look you liked on index.html */ } } /* 3) Case-study pages: collapse the big utility spacing on the first section */ main#content > .container:first-of-type { padding-top: .75rem !important; /* phones/tablet */ } @media (min-width: 992px){ main#content > .container:first-of-type { padding-top: 1rem !important; /* desktop */ } } /* Optional: tighten the visual gap above the headline block a touch */ @media (min-width: 992px){ main#content > .container:first-of-type .mb-md-6 { margin-bottom: 2rem !important; } } /* ===== Header offset & first-section spacing (final) ===== */ @media (min-width: 992px){ :root { --header-offset: 132px; } .header .navbar { min-height: var(--header-offset); } .header-sticky-top-lg + main#content { margin-top: var(--header-offset) !important; /* no extra gap */ } body:has(.home-hero) .header-sticky-top-lg + main#content, body.home .header-sticky-top-lg + main#content { margin-top: calc(var(--header-offset) + 8px) !important; /* tiny breathing room only */ } } main#content > .container:first-of-type { padding-top: .75rem !important; } @media (min-width: 992px){ main#content > .container:first-of-type { padding-top: 1rem !important; } } @media (min-width: 992px){ main#content > .container:first-of-type .mb-md-6 { margin-bottom: 2rem !important; } } /* ===== UNIVERSAL OVERLAY VIDEO (portrait, landscape, any page) ===== */ /* Container sizes by layout; no hard-coded aspect ratio */ .video-container{ position: relative; width: 100%; max-width: 1100px; /* comfy on desktop; tweak as you like */ margin: 0 auto; /* background: #000;*/ border-radius: .5rem; overflow: hidden; } /* Poster stays in normal flow so its image defines the height (portrait/landscape) */ .video-container .video-poster{ position: relative; z-index: 2; transition: opacity .25s ease; } .video-container .video-poster.is-hidden{ opacity: 0; pointer-events: none; /* lets you click the controls underneath */ } .video-container .video-poster-img{ display: block; width: 100%; height: auto; /* key: height driven by image aspect */ object-fit: cover; border-radius: .5rem; } /* Video fills the same box, under the poster */ .video-container .video-player{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* show full frame without cropping */ /* background: #000; border: 1px solid rgba(0,0,0,.08);*/ opacity: 0; /* fade in when first frame is ready */ transition: opacity .3s ease; z-index: 1; } .video-container .video-player.is-ready{ opacity: 1; } /* Play button (centered circle) */ .video-container .play-btn{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 72px; height: 72px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.96); color: #6f42c1; box-shadow: 0 10px 24px rgba(17,17,26,.2); cursor: pointer; z-index: 3; } .video-container .play-btn:hover{ transform: translate(-50%,-50%) scale(1.04); box-shadow: 0 14px 32px rgba(17,17,26,.28); } .video-container .play-btn:focus-visible{ outline: 2px solid #6f42c1; outline-offset: 3px; } /* ---- Legacy neutralizers (in case older blocks linger in markup) ---- */ .video-container { aspect-ratio: auto !important; } /* kill any earlier aspect locks */ .video-container::before { content:none !important; padding-top:0 !important; } /* Sticky pager */ .project-pager { position: fixed; inset: 0; /* allows easy centering of side buttons */ pointer-events: none; /* let clicks pass except on buttons */ z-index: 9999; } .pager-btn { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; line-height: 48px; text-align: center; font-size: 28px; text-decoration: none; border-radius: 999px; background: rgba(0,0,0,0.55); color: #fff; backdrop-filter: blur(6px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: transform 120ms ease, opacity 120ms ease; opacity: 0.92; } .pager-prev { left: 16px; } .pager-next { right: 16px; } .pager-btn:hover, .pager-btn:focus-visible { transform: translateY(-50%) scale(1.06); outline: none; } /* Mobile bottom bar */ .pager-mobile { pointer-events: auto; position: fixed; left: 0; right: 0; bottom: 0; display: none; /* default hidden on desktop */ gap: 8px; padding: 10px 12px; background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); } .pager-mobile-btn { flex: 1 1 auto; display: inline-block; text-align: center; padding: 10px 14px; border-radius: 12px; background: #fff; color: #111; text-decoration: none; font-weight: 600; } /* Responsiveness: switch to bottom bar on small screens */ @media (max-width: 768px) { .pager-btn { display: none; } .pager-mobile { display: flex; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .pager-btn { transition: none; } } /* Kill any stray top gap above the sticky header */ @media (min-width: 992px){ html, body { margin: 0; } /* safety */ .header-sticky-top-lg { top: 0 !important; } .header { margin-top: 0 !important; } .header .header-section{ padding-top: 0 !important; border-top: 0 !important; /* some themes add a 1px hairline */ } } /* Force all tile cards to use light gray background */ .tile, .tile.bg-white { background: #ebebeb !important; /* light gray */ }