:root{ --bg:#252525; --panel:#121214; --ring:rgba(255,255,255,.08); --accent:#FA02AF; } body{ background:var(--bg); color:#fff; scroll-behavior:auto; } /* Hide scrollbar but keep scrolling working */ html, body { -ms-overflow-style: none; /* IE and old Edge */ scrollbar-width: none; /* Firefox */ } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } html { overflow-x: visible; } body { overflow-x: hidden; } .grid-auto{ display:grid; gap:0; grid-template-columns: repeat(auto-fill, minmax(min(100%,260px), 1fr)); } .tile{ position:relative; overflow:hidden; border-radius:0; box-shadow:none; cursor:zoom-in; } .tile img{ aspect-ratio:1/1; width:100%; object-fit:cover; display:block; transition:transform .35s ease, filter .35s ease; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; image-rendering:auto; } .tile:hover img{ transform:scale(1.03); filter:grayscale(100%); } .tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.45),transparent 50%); opacity:0; transition:opacity .35s ease; } .tile:hover::after{ opacity:1; } .img-guard{ position:absolute; inset:0; pointer-events:auto; } .tile .caption{ pointer-events:none; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s ease; } .tile:hover .caption{ opacity:1; } .caption .pill{ background:rgba(0,0,0,.65); backdrop-filter:saturate(130%) blur(2px); color:#fff; padding:.75rem 1rem; border-radius:.25rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .fade-out { opacity:0; transition:opacity .8s ease; } .nav-link{ transition:color .2s ease, transform .2s ease } .nav-link:hover{ color:var(--accent); transform:translateY(-1px) } .btn{ border-radius:9999px; background:#fff; color:#000; padding:.75rem 1.25rem; font-weight:700; display:inline-flex; align-items:center; gap:.5rem; box-shadow:0 8px 30px rgba(255,255,255,.08); transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease; } .btn:hover{ box-shadow:0 12px 40px rgba(255,0,200,.18) } .btn:active{ transform:translateY(1px) } /* === UNIFIED OVERLAY BACKDROPS (fade) === */ #contactOverlay, #socialOverlay, #statusOverlay, #educationOverlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background: radial-gradient(1200px 600px at 50% -10%, rgba(255,0,200,.08), transparent 65%), rgba(0,0,0,.65); backdrop-filter: blur(10px); opacity:0; pointer-events:none; transition:opacity .35s ease; } #contactOverlay.show, #socialOverlay.show, #statusOverlay.show, #educationOverlay.show{ opacity:1; pointer-events:auto; } /* Cards */ .overlay-card, .social-card, .status-card{ background:rgba(20,20,20,.92); border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:0 30px 120px rgba(0,0,0,.6); transform: translateY(8px) scale(.985); opacity: 0; transition: transform .28s ease, opacity .28s ease; } .overlay-card{ width:min(92vw,780px); } .social-card{ width:min(92vw,520px); } .status-card{ width:min(92vw,360px); } /* Animate card on show (include education) */ #contactOverlay.show .overlay-card, #socialOverlay.show .social-card, #statusOverlay.show .status-card, #educationOverlay.show .overlay-card{ transform: translateY(0) scale(1); opacity: 1; } /* Close buttons */ .contact-close, .social-close, .status-close{ position:absolute; top:.75rem; right:.75rem; width:36px; height:36px; border-radius:9999px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); transition: background .2s ease, transform .12s ease; } body.no-scroll{ overflow:hidden; } /* ============================= Welcome Gate β€” lock scroll until loading ends ============================= */ html.welcome-locked, body.welcome-locked{ overflow: hidden; height: 100%; overscroll-behavior: none; touch-action: none; } #exploreBtn.is-loading{ pointer-events: none; opacity: .92; } #toTopBtn{ background: var(--accent) !important; position: fixed; right: 18px; bottom: 22px; z-index: 65; width: 55px; height: 55px; border-radius: 9999px; display: grid; place-items: center; cursor: pointer; color:#fff; border: 1px solid rgba(255,255,255,.15); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 14px 36px rgba(255, 0, 168, .35); transform: translateY(16px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease, filter .2s ease, box-shadow .2s ease; } #toTopBtn.show{ opacity: 1; transform: translateY(0); pointer-events: auto; } .footer-cta{ min-height:auto; } .footer-btn{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; color:#000; border-radius:9999px; padding:.55rem 1.35rem; font-weight:700; font-size:.78rem; box-shadow:0 8px 30px rgba(255,255,255,.05); transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; } .footer-btn:hover{ background: var(--accent); color:#fff; box-shadow:0 12px 40px rgba(250, 2, 175, .18); } .footer-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } .nav-link.active{ color: var(--accent); transform: translateY(-1px); } .nav-link.active::after{ content:""; display:block; height:2px; border-radius:2px; margin:4px auto 0; width:24px; background: var(--accent); } /* === LIGHTBOX === */ .lightbox{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; padding:2rem; opacity:0; pointer-events:none; transition:opacity .35s ease; } .lightbox.open{ opacity:1; pointer-events:auto; } .lightbox-inner{ position:relative; max-width:92vw; max-height:90vh; display:flex; flex-direction:column; gap:.75rem; align-items:center; transform:scale(.985); opacity:0; transition:transform .28s ease, opacity .28s ease; } .lightbox.open .lightbox-inner{ transform:scale(1); opacity:1; } .lightbox-img-wrap{ position:relative; } .lightbox-img{ max-width:92vw; max-height:80vh; object-fit:contain; border-radius:.5rem; box-shadow:0 20px 60px rgba(0,0,0,.6); user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; } .lb-guard{ position:absolute; inset:0; } .lightbox-caption{ font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(0,0,0,.45); padding:.5rem .75rem; border-radius:.375rem; } .lb-btn{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); width:42px; height:42px; display:grid; place-items:center; border-radius:.5rem; cursor:pointer; z-index:120; } .lb-btn:hover{ background:rgba(255,255,255,.2); } .lb-prev{ left:1rem; } .lb-next{ right:1rem; } .lb-close{ position:absolute; top:1rem; right:1rem; width:40px; height:40px; border-radius:.5rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; cursor:pointer; z-index:130; } .lb-close:hover{ background:rgba(255,255,255,.2); } @media (max-width: 640px){ .lightbox{ padding:1.25rem; } .lightbox-img{ max-height:72vh; } .lb-btn{ width:38px; height:38px; } .lb-prev{ left:.35rem; } .lb-next{ right:.35rem; } } @media (prefers-reduced-motion: reduce){ .lightbox, .lightbox-inner, .overlay-card, .social-card, .status-card{ transition:none !important; transform:none !important; } } .edge-flash{ position:absolute; inset:-6px; border-radius:9999px; pointer-events:none; opacity:0; } .edge-flash.show{ animation: edgeFlash 620ms ease; } @keyframes edgeFlash{ 0%{ opacity:0; box-shadow:0 0 0 0 rgba(250,2,175,0), 0 0 0 0 rgba(255,255,255,0); } 28%{ opacity:1; box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 26px 8px rgba(250,2,175,.48); } 100%{ opacity:0; box-shadow:0 0 0 0 rgba(250,2,175,0), 0 0 0 0 rgba(255,255,255,0); } } .fx-canvas{ position: fixed; inset: 0; z-index: 30; pointer-events: none; filter: blur(1px); } #aboutHero .pressable{ transition: transform 160ms cubic-bezier(.2,.8,.2,1); will-change: transform; } #aboutHero.is-hover .pressable{ transform: scale(1.03); } #aboutHero.is-press .pressable{ transform: scale(0.965); } @keyframes drop-pop{ 0%{ transform: translateY(-1px) scale(1.02) } 45%{ transform: translateY(2px) scale(0.965) } 100%{ transform: translateY(0) scale(1) } } #aboutHero.drop-pop .pressable{ animation: drop-pop 220ms cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion: reduce){ #aboutHero .pressable, #aboutHero.drop-pop .pressable{ transition:none; animation:none; } } .nav-item { position: relative; } .nav-dropdown{ position: absolute; left: 0; top: 100%; min-width: 200px; border-radius: .5rem; border: 1px solid rgba(255,255,255,.10); background: #161616; padding: .25rem; box-shadow: 0 10px 30px rgba(0,0,0,.45); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-dropdown[data-open="1"]{ opacity: 1; transform: translateY(0); pointer-events: auto; } .cap-cta { transition: transform .18s ease, box-shadow .22s ease, background-color .18s ease, color .18s ease; } .cap-cta-primary { background:#fff; color:#000; border:1px solid rgba(255,255,255,.08); box-shadow:0 8px 24px rgba(0,0,0,.20); } .cap-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 0 0 3px rgba(250, 2, 175, .15); } .cap-cta-primary:active { transform: translateY(0); box-shadow: 0 10px 24px rgba(0,0,0,.24), 0 0 0 2px rgba(250, 2, 175, .22) inset; } .cap-cta-primary:focus-visible { outline: 0; box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 0 0 3px rgba(250, 2, 175, .45); } #aboutHero .photo{ border: 0 !important; outline: 0 !important; --tw-ring-offset-shadow: 0 0 #0000 !important; --tw-ring-shadow: 0 0 #0000 !important; box-shadow: 0 25px 90px rgba(0,0,0,.55) !important; background: transparent !important; } @keyframes edgeFlash{ 0%{opacity:0; box-shadow:0 0 0 0 rgba(250,2,175,0), 0 0 0 0 rgba(250,2,175,0)} 28%{opacity:1; box-shadow:0 0 0 3px rgba(250,2,175,.55), 0 0 26px 8px rgba(250,2,175,.48)} 100%{opacity:0; box-shadow:0 0 0 0 rgba(250,2,175,0), 0 0 0 0 rgba(250,2,175,0)} } /* === Unified Chips (About + Capcard) β€” Hover + Heartbeat === */ .about-chip, .cap-chip{ cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: 9999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 700; font-size: .80rem; /* keep transitions but no transform delay (for heartbeat) */ transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .20s ease; will-change: transform; } /* dot */ .about-chip::before, .cap-chip::before{ content:""; width:8px; height:8px; border-radius:9999px; flex:0 0 auto; background:#FA02AF; box-shadow:0 0 10px rgba(250,2,175,.65); transition: background .18s ease, box-shadow .20s ease; } /* soft glow pad */ .about-chip::after, .cap-chip::after{ content:""; position:absolute; left:10px; top:50%; width:28px; height:28px; transform:translateY(-50%); pointer-events:none; z-index:-1; background:radial-gradient(circle, rgba(250,2,175,.55) 0%, rgba(250,2,175,0) 65%); filter:blur(8px); opacity:.30; transition: opacity .2s ease, transform .12s ease, filter .2s ease; } /* hover effects (SAME for about + capcard) */ .about-chip:hover, .cap-chip:hover{ background: rgba(250,2,175,.85); border-color: rgba(250,2,175,.90); color:#fff; box-shadow: 0 8px 24px rgba(250,2,175,.28); } .about-chip:hover::before, .cap-chip:hover::before{ background:#fff; box-shadow: 0 0 0 2px rgba(250,2,175,.85), 0 0 12px rgba(255,255,255,.55); } .about-chip:hover::after, .cap-chip:hover::after{ opacity:.65; filter:blur(10px); transform:translateY(-50%) scale(1.05); } /* Heartbeat keyframes + trigger class */ @keyframes chip-heartbeat { 0% { transform: translateY(0) scale(1); } 20% { transform: translateY(-2px) scale(1.08); } 45% { transform: translateY(0) scale(1); } 65% { transform: translateY(-1px) scale(1.06); } 100% { transform: translateY(0) scale(1); } } .chip-pulse { animation: chip-heartbeat 380ms ease-out both; } /* Accessibility focus */ .about-chip:focus-visible, .cap-chip:focus-visible{ outline: 2px solid rgba(250,2,175,.9); outline-offset: 2px; } .capcard{ position:relative; overflow:hidden; border-radius:18px; background:rgba(20,20,20,.92); border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 80px rgba(0,0,0,.45); transform: translateY(0) translateZ(0); will-change: transform, box-shadow; transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .20s ease; } .capcard::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.04) 60%,rgba(255,255,255,0) 100%); opacity:0; transition:opacity .22s ease; } .capcard:hover::before, .capcard:focus-within::before{ opacity:1; } .capshot img{ transition:filter .20s ease; } .capcard:hover .capshot img{ filter:brightness(1.03); } .capcard:hover, .capcard:focus-within{ transform: translateY(-8px); border-color: rgba(255,255,255,.14); box-shadow: 0 28px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset; } @media (prefers-reduced-motion: reduce){ .capcard{ transition:none !important; transform:none !important; } } .capslider{ position:relative; width:100%; height:240px } @media(min-width:768px){ .capslider{ height:280px } } .capframe{ position:absolute; inset:0; opacity:0; transition: opacity .45s ease; } .capframe.active{ opacity:1 } .capframe img{ width:100%; height:100%; object-fit:cover; display:block } .capslider-dots{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:10px; z-index:7; pointer-events:none; } .capslider-dot{ width:10px; height:10px; border-radius:9999px; border:2px solid rgba(255,255,255,.45); background:transparent; transition:transform .18s ease, border-color .18s ease, background .18s ease; pointer-events:auto; } .capslider-dot:hover{ border-color:rgba(255,255,255,.65); transform:scale(1.06); } .capslider-dot.active{ background:rgba(255,255,255,.8); border-color:rgba(255,255,255,.9); transform:scale(1.08); } /* ensure capshot is a positioning context */ .capshot { position: relative; } /* πŸ”§ make the cap image clickable: full overlay anchor */ .capshot [data-open-capshot]{ position: absolute; inset: 0; display: block; z-index: 6; /* under dots (z:7), above frames */ cursor: zoom-in; } /* dots should receive clicks */ .capslider-dots{ position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 7; pointer-events: auto; /* ← was none: make clickable */ } /* just to be sure hint never blocks clicks */ .caphint{ z-index: 8; pointer-events: none; } @media (max-width:480px){ .capslider-dot{ width:8px; height:8px; } } .lb-dots{ display:flex; gap:10px; align-self:center; margin-top:6px; pointer-events:auto; } .lb-dot{ width:10px; height:10px; border-radius:9999px; border:2px solid rgba(255,255,255,.45); background:transparent; transition:transform .18s ease, border-color .18s ease, background .18s ease; } .lb-dot:hover{ border-color:rgba(255,255,255,.65); transform:scale(1.06); } .lb-dot.active{ background:rgba(255,255,255,.85); border-color:rgba(255,255,255,.95); transform:scale(1.08); } @media (max-width:480px){ .lb-dot{ width:8px; height:8px; } } .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; will-change: opacity, transform; } .reveal.show{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } } /* === Profile circle slider (for About + Welcome) === */ .pfslider{ position:relative; width:100%; height:100%; border-radius:9999px; overflow:hidden; } .pf-frame{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; } .pf-frame.active{ opacity:1; } .pf-frame img{ width:100%; height:100%; object-fit:cover; display:block; } /* --- (old simple edu styles kept for fallback) --- */ .edu-row{ display:block; /* override old flex */ border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px 18px; margin:16px 0; background:rgba(255,255,255,.04); } /* ===== NEW Education row (clean aligned header) ===== */ .edu-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .edu-left{ display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:start; min-width:0; } .edu-logo{ width:52px; height:52px; border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,.12); background:#111; } .edu-school{ font-weight:800; line-height:1.15; } .edu-degree{ grid-column:2 / -1; color:#dbeafe; opacity:.9; margin-top:6px; } .edu-years{ white-space:nowrap; font-weight:700; font-size:.92rem; opacity:.85; padding:.35rem .6rem; border-radius:9999px; border:1px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.04); } .edu-achievements{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; gap:.5rem; } .about-chip.chip--pending{ opacity:.8; border-style:dashed; } .about-chip.chip--pending::before{ background:#9ca3af; box-shadow:none; } /* Responsive years stacking */ @media (max-width:560px){ .edu-head{ flex-direction:column; align-items:flex-start; gap:10px; } .edu-years{ margin-left:64px; } } /* ===== Extracted inline CSS from index.php ===== */ /* ===== Education panel: left align + card look ===== */ #educationPanel { text-align: left; } /* stop inheriting center */ #educationPanel .edu-row{ background: rgba(20,20,20,.88); /* same black card */ border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 18px 20px; box-shadow: 0 24px 80px rgba(0,0,0,.45); margin: 16px 0; } #educationPanel .edu-head{ align-items: center; } #educationPanel .edu-left{ grid-template-columns: 56px 1fr; gap: 12px; } #educationPanel .edu-logo{ width:56px; height:56px; border-radius:14px; } #educationPanel .edu-school{ font-weight: 800; } #educationPanel .edu-degree{ color:#e5e7eb; opacity:.9; } #educationPanel .edu-achievements{ margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); } /* keep the years pill consistent */ #educationPanel .edu-years{ white-space: nowrap; font-weight:700; font-size:.92rem; opacity:.85; padding:.35rem .6rem; border-radius:9999px; border:1px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.04); } /* ===== Education: mobile flush-left alignment ===== */ @media (max-width: 640px){ /* header stack + left alignment */ #educationPanel .edu-head{ flex-direction: column; align-items: flex-start; /* make all children hug the left */ gap: 10px; } /* keep the logo + text grid, but no extra offset */ #educationPanel .edu-left{ grid-template-columns: 52px 1fr; /* logo + text */ gap: 12px; } /* remove any inherited left margins on year pill */ #educationPanel .edu-years{ margin: 6px 0 0 0; /* no indent */ align-self: flex-start; /* hug the left */ } } /* (If you still have the old global mobile rule that indents years) */ /* This forces override for that specific panel */ #educationPanel .edu-years{ margin-left: 0 !important; } /* ===== Extracted inline CSS from index.php ===== */ /* Dropdown trigger (matches your chip vibe) */ .about-dropdown-btn{ font-weight:700; font-size:.85rem; border-radius:9999px; padding:.55rem 1.1rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease; } .about-dropdown-btn:hover{ background:rgba(250,2,175,.85); border-color:rgba(250,2,175,.90); color:#fff; box-shadow:0 8px 24px rgba(250,2,175,.28); transform:translateY(-1px); } .about-dropdown-btn .chev{ transition: transform .2s ease } .about-dropdown-btn[aria-expanded="true"] .chev{ transform: rotate(180deg) } /* Collapsible with smooth height animation */ .about-collapsible{ overflow:hidden; max-height:0; opacity:.0; transition: max-height .38s ease, opacity .28s ease; will-change:max-height, opacity; } .about-collapsible.open{ opacity:1 } /* spouse card sizing that fits your modal scale */ .spouse-card{ padding:18px 20px; } .spouse-avatar{ width:92px; height:92px; } .spouse-avatar .pfslider{ border-radius:9999px; overflow:hidden; } .spouse-name{ font-size:1.05rem; } .spouse-role{ font-size:.9rem; } .spouse-p{ font-size:.9rem; } @media (min-width:768px){ .spouse-card{ padding:20px 22px; } .spouse-avatar{ width:110px; height:110px; } .spouse-name{ font-size:1.1rem; } } /* Centered row for the spouse dropdown trigger */ .about-trigger-row{ display:flex; justify-content:center; align-items:center; margin-top: 22px; /* space after Skills chips */ margin-bottom: 6px; } /* Make the button look balanced and centered */ .about-dropdown-btn{ padding: .62rem 1.0rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); font-weight: 800; font-size: .82rem; letter-spacing: .02em; line-height: 1; box-shadow: 0 8px 26px rgba(0,0,0,.25); transition: background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease; } .about-dropdown-btn:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 36px rgba(0,0,0,.32); transform: translateY(-1px); } .about-dropdown-btn:active{ transform: translateY(0); } .about-dropdown-btn .chev{ transition: transform .22s ease; } #spousePanel.open ~ .about-trigger-row .about-dropdown-btn .chev, .about-dropdown-btn[aria-expanded="true"] .chev{ transform: rotate(180deg); } /* Keep the collapsible card nicely centered and aligned with page width */ .about-collapsible{ max-width: 1100px; margin: 10px auto 0; /* space above panel, centered */ padding: 0 16px; /* guard vs edges on small screens */ } /* Avatar sizing inside spouse card for consistent look */ .spouse-avatar{ width: 150px; height: 150px; min-width: 92px; } @media (min-width: 768px){ .about-trigger-row{ margin-top: 24px; } .spouse-avatar{ width: 250px; height: 250px; min-width: 250px; } } /* Global knobs para madali i-tune */ :root{ --about-gap-top: 14px; /* space ABOVE the button (vs chips) */ --about-gap-bot: 34px; /* space BELOW the button (to section bottom) */ --skills-row-gap: 10px; /* vertical row gap ng chips */ --skills-col-gap: 12px; /* horizontal gap ng chips */ } @media (min-width: 768px){ :root{ --about-gap-top: 10px; --about-gap-bot: 40px; --skills-row-gap: 12px; --skills-col-gap: 14px; } } @media (min-width: 1024px){ :root{ --about-gap-top: 8px; --about-gap-bot: 44px; } } /* Skills container – consistent wrap + breathing */ .skills-wrap{ display:flex; flex-wrap:wrap; justify-content:center; column-gap: var(--skills-col-gap); row-gap: var(--skills-row-gap); margin-top: 8px; /* maliit lang sa taas ng chips block */ margin-bottom: calc(var(--about-gap-top) + 6px); } /* Centered trigger row, with balanced top/bottom spacing */ .about-trigger-row{ display:flex; justify-content:center; align-items:center; margin-top: var(--about-gap-top); /* iakyat ang button (maliit lang ang gap sa chips) */ margin-bottom: var(--about-gap-bot); /* sapat na space sa ibaba para hindi siksik */ } /* Button aesthetics (retain mo na lang kung meron ka na nito) */ .about-dropdown-btn{ padding: .62rem 1.0rem; border-radius: 9999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); font-weight: 800; font-size: .82rem; letter-spacing: .02em; line-height: 1; box-shadow: 0 8px 26px rgba(0,0,0,.25); transition: background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease; } .about-dropdown-btn:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); box-shadow: 0 12px 36px rgba(0,0,0,.32); transform: translateY(-1px); } .about-dropdown-btn:active{ transform: translateY(0); } .about-dropdown-btn .chev{ transition: transform .22s ease; } .about-dropdown-btn[aria-expanded="true"] .chev{ transform: rotate(180deg); } /* Section bottom padding para hindi sumabit kahit collapsed */ #about > .max-w-6xl{ padding-bottom: 2.75rem; } /* md+: ~44px */ @media (min-width:1024px){ #about > .max-w-6xl{ padding-bottom: 3.25rem; } /* lg: ~52px */ } /* animated underline */ .tab-underline::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -6px; /* distance from text */ height: 2px; background: currentColor; /* follows text color */ transform: scaleX(0); transform-origin: center; opacity: .6; transition: transform .25s ease, opacity .25s ease; } /* hover highlight */ .tab-underline:hover{ color: #ffffff; } .tab-underline:hover::after{ transform: scaleX(1); opacity: 1; } /* active/open state = highlighted + underline shown */ .tab-underline[aria-expanded="true"]{ color: #ffffff; } .tab-underline[aria-expanded="true"]::after{ transform: scaleX(1); opacity: 1; } /* chevron flip */ .tab-underline .chev{ transition: transform .25s ease, opacity .25s ease; opacity: .85; } .tab-underline[aria-expanded="true"] .chev{ transform: rotate(180deg); } /* optional: keyboard focus */ .tab-underline:focus-visible{ outline: 2px solid #FA02AF; /* your magenta accent */ outline-offset: 2px; } /* ========== HARD OVERRIDES (place at the very end) ========== */ /* 1) Remove shadows + keep clean black card on Education & Certificates */ #about .about-card, #about .edu-card, #about .cert-card, #about .edu-row, #about .card { box-shadow: none !important; background: rgba(20,20,20,.92) !important; border: 1px solid rgba(255,255,255,.08) !important; } /* Subtle dividers inside cards (kung meron kang
) */ #about .about-card hr, #about .edu-card hr, #about .cert-card hr { border-color: rgba(255,255,255,.06) !important; opacity: 1 !important; } /* 2) Education β€” smaller type scale */ #about .edu-school { /* School name */ font-size: 1rem !important; /* ~16px */ line-height: 1.2 !important; font-weight: 800 !important; } #about .edu-degree { /* Degree/subtitle */ font-size: .90rem !important; /* ~14.4px */ line-height: 1.45 !important; opacity: .95 !important; } #about .edu-years { /* Year pill */ font-size: .78rem !important; /* ~12.5px */ padding: .30rem .65rem !important; border-radius: 9999px !important; } /* Achievements chip sa Education */ #about .edu-achievements .about-chip { font-size: .75rem !important; padding: .40rem .70rem !important; } /* Compact padding ng edu cards */ #about .edu-card, #about .edu-row { padding: 16px 18px !important; } @media (min-width: 640px){ #about .edu-card, #about .edu-row { padding: 18px 22px !important; } } /* 3) Certificates β€” match size sa site */ #about .cert-title { /* Course title */ font-size: 1rem !important; /* ~16px */ line-height: 1.25 !important; font-weight: 800 !important; } #about .cert-issuer, #about .cert-year { font-size: .88rem !important; /* ~14px */ opacity: .95 !important; } #about .cert-desc { font-size: .90rem !important; /* ~14.4px */ line-height: 1.45 !important; } #about .cert-view { font-size: .80rem !important; font-weight: 800 !important; } #about .cert-card { padding: 16px 18px !important; } @media (min-width: 640px){ #about .cert-card { padding: 18px 22px !important; } } /* 4) Mobile polish: years fully left under the logo */ @media (max-width: 640px){ #about .edu-head { flex-direction: column !important; align-items: flex-start !important; } #about .edu-years { margin-left: 64px !important; } /* align with logo edge */ } /* ===== Extracted inline CSS from index.php ===== */ /* =============================== Clean left alignment + neutral hover Applies to: Certificates + Education + My Constant =============================== */ /* 1) Base card shells */ .certcard, #educationPanel [class*="card"], #spousePanel [class*="card"]{ background: rgba(20,20,20,.92); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } /* 2) Neutral hover (no colored glow) */ .certcard:hover, #educationPanel [class*="card"]:hover, #spousePanel [class*="card"]:hover{ background: rgba(255,255,255,.06); /* subtle light grey on dark theme */ border-color: rgba(255,255,255,.10); transform: translateY(-1px); } /* 3) Certificates β€” tidy left alignment */ .certshot { display:block; border-bottom:1px solid rgba(255,255,255,.07); } .certshot img{ display:block; width:100%; height:260px; object-fit:cover; } .certbody{ padding: 16px 18px 18px; /* same left padding across title/meta/desc */ display:flex; flex-direction:column; gap:10px; } /* Text strictly left-aligned and compact */ .cert-title{ margin:0 0 2px 0; font-weight:800; font-size:1rem; line-height:1.25; text-align:left; } .cert-meta { font-size:.85rem; opacity:.8; text-align:left; } .cert-desc { font-size:.92rem; line-height:1.5; color:#cbd5e1; max-width:56ch; text-align:left; } /* Header row: title block left, action right; keep it neat on one line */ .certbody .flex{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; } /* View button β€” neutral hover, no color pop */ .cert-view{ display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:transparent; color:#fff; font-weight:800; font-size:.9rem; white-space:nowrap; opacity:.9; transition: opacity .18s ease, border-color .18s ease; } .cert-view:hover{ opacity:1; border-color: rgba(255,255,255,.22); } /* Mobile tightening */ @media (max-width: 480px){ .certshot img{ height:240px; } .certbody{ padding:14px 16px 16px; } .cert-title{ font-size:.98rem; } .cert-desc{ font-size:.9rem; } .cert-view{ height:28px; padding:0 10px; font-size:.85rem; } } /* ================= Shared Card Polish (My Constant / Education / Certificates) ================= */ :root{ --card-bg: #111315; --card-hover: #15181c; /* subtle light gray lift */ --card-stroke: #24272b; --card-radius: 16px; } /* base card */ .about-card{ background: var(--card-bg); border: 1px solid var(--card-stroke); border-radius: var(--card-radius); box-shadow: 0 2px 12px rgba(0,0,0,.25); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .about-card:hover{ background: var(--card-hover); border-color: #2b2f34; box-shadow: 0 6px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03); } /* simple inner spacing defaults (safe if you already have paddings) */ .edu-row.about-card, .spouse-card.about-card { padding: 16px; } /* tidy text defaults */ .about-card h4, .about-card .title { margin: 0 0 4px 0; line-height: 1.25; letter-spacing: .2px; } .about-card p { margin: 0; line-height: 1.55; opacity: .9; } /* ================= Certificates: Horizontal Layout ================= */ .certgrid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; } .certcard{ display: flex; gap: 18px; overflow: hidden; padding: 12px; /* matches .edu-row.about-card feel */ } .certshot{ display: block; width: 42%; min-height: 180px; border-radius: calc(var(--card-radius) - 2px); overflow: hidden; position: relative; border: 1px solid var(--card-stroke); } .certshot img{ width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.0); transition: transform .45s ease, opacity .3s ease; } .certcard:hover .certshot img{ transform: scale(1.03); } .certbody{ flex: 1; padding: 8px 6px; display: flex; flex-direction: column; justify-content: center; } .cert-title{ font-weight: 800; font-size: 15px; margin-bottom: 2px; } .cert-meta{ font-size: 12.5px; opacity: .8; } .cert-desc{ margin-top: 10px; font-size: 13px; } /* right-aligned "View" pill; keeps neutral brand feel */ .cert-view{ margin-left: auto; align-self: flex-start; font-size: 12.5px; font-weight: 800; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--card-stroke); background: #0f1113; color: inherit; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } .about-card:hover .cert-view{ background: #13161a; border-color: #2b2f34; } /* ================= Education align: left + breathable ================= */ .edu-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 4px; } .edu-left{ display: flex; align-items: center; gap: 12px; } .edu-logo{ width: 48px; height: 48px; border-radius: 12px; object-fit: cover; } .edu-school{ font-weight: 800; font-size: 16px; } .edu-degree{ font-size: 13.5px; opacity: .9; } .edu-years{ font-weight: 700; font-size: 12.5px; padding: 10px 14px; border-radius: 999px; border: 1px dashed var(--card-stroke); opacity: .9; } .edu-achievements{ padding: 8px 4px 4px; } /* ================= Responsive ================= */ @media (max-width: 1024px){ .certgrid{ gap: 18px; } .certshot{ width: 40%; } } @media (max-width: 860px){ .certgrid{ grid-template-columns: 1fr; } .certcard{ flex-direction: column; } .certshot{ width: 100%; min-height: 180px; } .certbody{ padding: 10px 6px 14px; } } /* ========= Force light-grey hover for all about-card blocks ========= */ /* Put this AFTER your current styles */ .about-card{ position: relative; background: var(--card-bg, #111315); border: 1px solid var(--card-stroke, #24272b); transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } /* overlay approach so it wins vs. other backgrounds */ .about-card::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,0); /* idle */ pointer-events: none; /* never block clicks */ transition: background .18s ease; } /* hover + keyboard focus */ .about-card:hover::after, .about-card:focus-within::after{ background: rgba(255,255,255,0.035); /* light grey veil */ } .about-card:hover{ border-color: #2b2f34 !important; box-shadow: 0 6px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03); } /* Optional: cert "View" pill reacts subtly when card hovers */ .about-card:hover .cert-view{ background: #13161a; border-color: #2b2f34; } /* === My Constant spacing & chips position === */ /* Add roomy padding inside the black card (left + top/bottom) */ #spousePanel .about-card.spouse-card { padding: clamp(25px, 2.2vw, 28px) clamp(22px, 3vw, 36px) !important; /* top/btm left/right */ } /* === My Constant: fine spacing only (no row breaks) === */ /* 1) Ibaba ng kaunti ang short intro paragraph */ #spousePanel .spouse-card .spouse-p{ margin-top: 13px; /* adjust 8–14px to taste */ } /* 2) Ibaba ng kaunti ang chip row, pero iisang linya pa rin */ #spousePanel .spouse-card .flex.flex-wrap{ margin-top: 20px; /* adjust 10–18px to taste */ flex-wrap: nowrap !important;/* keep chips on one line */ gap: 10px; /* nice breathing room */ } /* (optional) kung sobrang sikip sa maliit na screen, pwede mong payagan ang horizontal scroll kaysa mag-wrap */ @media (max-width: 520px){ #spousePanel .spouse-card .flex.flex-wrap{ overflow-x: auto; scrollbar-width: none; /* hide scrollbar on Firefox */ } #spousePanel .spouse-card .flex.flex-wrap::-webkit-scrollbar{ display: none; /* hide scrollbar on WebKit */ } } /* Hide navigation arrows when opening a single certificate image */ #lightbox.mode-single .lb-prev, #lightbox.mode-single .lb-next { display: none !important; } /* ── ABOUT tabs & panels: perfectly even gaps ─────────────────────── */ :root{ --about-tab-gap: 18px; /* space below the tab row */ --about-panel-gap: 18px; /* space above any opened panel */ --about-panel-pad: 22px; /* default inner padding for cards */ } /* Tabs row spacing + consistent inter-tab gap */ #aboutTabs{ gap: 18px; margin-top: 8px; margin-bottom: var(--about-tab-gap); } /* My Constant looks tighter because of the big round avatar. Give it a tiny extra breathing room so it matches visually. */ #spousePanel{ margin-top: calc(var(--about-panel-gap) + 6px) !important; } /* Card paddings (uniform across the three sections) */ .spouse-card{ padding: var(--about-panel-pad) 28px; } .edu-row { padding: var(--about-panel-pad) 18px; } #certPanel .certgrid{ gap: 18px; } #certPanel .certcard{ padding: var(--about-panel-pad); } /* Chip row sits slightly lower for air */ .spouse-card .about-chip{ margin-top: 10px; } /* Unified subtle hover */ .spouse-card:hover, .edu-row:hover, #certPanel .certcard:hover{ background: rgba(255,255,255,.04); } /* Phone tweaks */ @media (max-width: 768px){ #aboutTabs{ gap: 12px; margin-bottom: 12px; } #spousePanel{ margin-top: 18px !important; } /* keep the small bump on mobile */ .spouse-card, #certPanel .certcard, .edu-row{ padding: 18px; } } /* ===== Certificates: capcard variant (exact look) ===== */ #certPanel .capgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } @media (max-width: 900px){ #certPanel .capgrid{ grid-template-columns:1fr; } } /* Make sure cards inherit your capcard look */ #certPanel .capcard { box-shadow:none !important; } /* Top media uses contain so the cert isn’t cropped */ #certPanel .capmedia--cert{ position: relative; width: 100%; aspect-ratio: 16 / 9; /* same as capcard preview */ background: #0f0f0f; /* subtle letterbox just like preview area */ overflow: hidden; } #certPanel .capmedia--cert img{ width: 100%; height: 100%; object-fit: contain; /* full image, no cut */ user-select: none; -webkit-user-drag: none; pointer-events: none; /* no click (privacy) */ } /* Bottom meta = same spacing scale as capcard */ #certPanel .capcard .capbody{ padding: 14px 16px 16px; } #certPanel .capcard .captitle{ margin: 0 0 4px; } #certPanel .capcard .capsub{ opacity:.8; } /* (extra safety if any container still clips) */ #certPanel, #certPanel .capgrid, #educationPanel, #spousePanel { overflow: visible; } /* ===== Mild, consistent hover lift for About panels ===== */ /* Certificates (capcard variant) */ #certPanel .capcard, #certPanel .certcard, #educationPanel .about-card, #spousePanel .about-card{ transition: transform .18s ease, box-shadow .20s ease, border-color .18s ease; } /* Make the lift subtle and consistent */ #certPanel .capcard:hover, #certPanel .certcard:hover, #educationPanel .about-card:hover, #spousePanel .about-card:hover{ transform: translateY(-3px) !important; /* from -8px -> -3px */ box-shadow: 0 18px 60px rgba(0,0,0,.42) !important;/* softer shadow */ border-color: rgba(255,255,255,.12); } /* ensure the raised card never gets clipped */ #certPanel, #educationPanel, #spousePanel, #certPanel .capgrid { overflow: visible; } /* === Restore strong hover for real capstone cards (Projects etc.) === */ .capcard{ will-change: transform, box-shadow; transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .20s ease; } .capcard:hover{ transform: translateY(-8px); /* original lift */ border-color: rgba(255,255,255,.14); box-shadow: 0 28px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset; } /* Keep Certificates mild and consistent */ #certPanel .capcard:hover{ transform: translateY(-3px) !important; box-shadow: 0 18px 60px rgba(0,0,0,.42) !important; border-color: rgba(255,255,255,.12); } /* Prevent any clipping while hovering */ #certPanel, #certPanel .capgrid { overflow: visible; } /* ===== Extracted inline CSS from index.php ===== */ /* iOS/Android tap flash: light grey (wag transparent para kita) */ * { -webkit-tap-highlight-color: rgba(255,255,255,.12); } /* Reusable class for nav/menu items */ .nav-touch{ border-radius: .5rem; padding: .5rem .75rem; margin-left: -.5rem; /* para full-width hit area sa list */ margin-right: -.5rem; transition: background-color .15s ease, color .15s ease; } /* Desktop hover */ .nav-touch:hover{ background: rgba(255,255,255,.08); } /* Phone press (active) + JS β€œpressed” class for reliable feedback */ .nav-touch:active, .nav-touch.pressed{ background: rgba(255,255,255,.16); } /* Optional: focus-visible ring para accessible sa keyboard */ .nav-touch:focus-visible{ outline: 0; box-shadow: 0 0 0 2px rgba(250,2,175,.45); } /* ===== Extracted inline CSS from index.php ===== */ /* ===== Compact Copy Email v2 (ce2-*) ===== */ :root { --ce2-accent:#FA02AF; } .select-none { user-select: none; -webkit-user-select:none; } .ce2-wrap{ display:flex; align-items:center; gap:12px; justify-content:center; margin-top: 22px; /* extra top gap as requested */ } .ce2-email{ color:#e9e9e9; font-weight:700; letter-spacing:.2px; font-size: clamp(14px, 0.95rem, 16px); /* close to your site’s text scale */ opacity:.95; } /* round copy button */ .ce2-btn{ width:38px; height:38px; min-width:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; cursor:pointer; background:#1a1a1a; color:#eaeaea; border:1px solid rgba(255,255,255,.10); box-shadow:0 2px 0 rgba(0,0,0,.25); transition: background .2s, box-shadow .2s, transform .08s, color .2s; } .ce2-btn:hover{ background: var(--ce2-accent); color:#111; box-shadow:0 0 0 6px color-mix(in oklab, var(--ce2-accent) 22%, transparent); } .ce2-btn:active{ transform: translateY(1px); } /* icon swap (clipboard -> check) */ .ce2-ic{ position:absolute; opacity:1; transform: scale(1); transition: opacity .18s, transform .18s; } .ce2-check{ opacity:0; transform: scale(.6); } .ce2-btn.is-copied .ce2-clip{ opacity:0; transform: scale(.6); } .ce2-btn.is-copied .ce2-check{ opacity:1; transform: scale(1); } /* Mobile: keep centered and comfy */ @media (max-width:640px){ .ce2-wrap{ gap:10px; } .ce2-email{ text-align:center; } } /* If a section is much taller (like artworks grid), give a larger reserve */ #artworks { contain-intrinsic-size: 1400px; } /* ===== Extracted inline CSS from index.php ===== */ /* ===== Top announcement strip (Bolim GFX) ===== */ #topStrip .strip-track{ display:inline-flex; gap:2.5rem; padding-block:8px; /* taas/baba ng loob ng strip */ white-space:nowrap; animation: strip-marquee 26s linear infinite; } #topStrip .strip-item{ opacity:.9; } #topStrip .strip-item::before{ content:"β€’"; margin-right:0.6rem; color:#FA02AF; /* magenta mo */ font-size:.7em; } /* pause animation pag hover para mabasa ng maayos */ #topStrip:hover .strip-track{ animation-play-state:paused; } /* mobile: konting higpit sa spacing */ @media (max-width:640px){ #topStrip .strip-track{ gap:1.6rem; padding-block:6px; } } /* keyframes ng scroll */ @keyframes strip-marquee{ 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } } /* ===== Extracted inline CSS from index.php ===== */ /* ===== Floating Work Status (Bolim GFX) ===== */ .work-status{ position:fixed; top:25px; left:18px; z-index:60; display:flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; background:rgba(10,10,10,.96); border:1px solid rgba(255,255,255,.06); box-shadow:0 14px 40px rgba(0,0,0,.55); color:#e5e5e5; font-size:.8rem; line-height:1.4; cursor:default; /* ⬅️ dati pointer, ngayon normal lang */ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .work-status .ws-label strong{ font-weight:700; color:#ffffff; } .ws-dot{ width:10px; height:10px; border-radius:999px; box-shadow:0 0 0 4px rgba(0,0,0,.6); /* para Discord-like outer ring */ } /* Busy = Do Not Disturb (red) */ .ws-on{ background:#F23F43; /* Discord DnD red */ } /* Free / Available = Online (green) */ .ws-off{ background:#23A55A; /* Discord green */ } .work-status:active .ws-dot{ transform:scale(.9); } /* Mobile tweaks */ @media (max-width:768px){ .work-status{ top:20px; left:12px; max-width:none; justify-content:flex-start; font-size:.78rem; padding:7px 14px; } } /* ===== Extracted inline CSS from index.php ===== */ /* Skills chips: left-aligned, mas siksik ng kaunti */ .skills-wrap{ display:flex; flex-wrap:wrap; gap:6px 8px; justify-content:center; /* kung gusto mo left, gawin mong flex-start */ } /* Tools row (compact) */ .tools-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; margin:0; padding:0; list-style:none; } .tool-pill{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); font-size:.8rem; line-height:1; color:#e9e9e9; transition:background .18s ease, border-color .18s ease, transform .18s ease; } .tool-pill:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); transform:translateY(-1px); } .tool-logo{ width:20px; height:20px; display:inline-grid; place-items:center; border-radius:6px; overflow:hidden; flex:0 0 20px; } .tool-logo svg{ width:100%; height:100%; display:block; } .tool-name{ white-space:nowrap; } /* actual line */ .about-tabs::before{ content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: min(960px, 100% - 3rem); /* haba ng linya, centered */ height: 1px; background: #3a3a3a; /* kulay ng line (kamukha ng screenshot) */ } /* ===== Extracted inline CSS from index.php ===== */ /* keep your tile styles; opacity lang ang animation */ .reveal { opacity:0; transform:translateY(6px); transition:opacity .28s, transform .28s; } .reveal.is-in { opacity:1; transform:translateY(0); } .art-img { opacity:0; transform:scale(1.005); transition:opacity .22s, transform .22s; background:#161616; } .art-img.is-ready { opacity:1; transform:scale(1); } /* ==== ARTWORKS: force visible & always painted ==== */ #artworks .tile, #artworks .reveal { opacity: 1 !important; transform: none !important; visibility: visible !important; } #artworks .tile, #artworks .art-img { /* block any perf features that β€œunpaint” offscreen content */ content-visibility: visible !important; contain: initial !important; } /* kung may utility na .hidden/.invisible na minsang na-aapply */ #artworks .hidden, #artworks .invisible { display: block !important; visibility: visible !important; opacity: 1 !important; } .capcard.is-hover{ transform: translateY(-8px); } a.active { color:#fff; } a.active::after{content:'';display:block;height:2px;background:#FA02AF;border-radius:1px;margin-top:6px;} .admin-draggable { outline: 2px dashed #FA02AF66; transition: outline 0.2s ease; } .admin-draggable.drag-over { outline: 3px solid #FA02AF; } /* ========================================================= FIX + RESTORE (About gap + Tabs design + Mobile polish) Paste THIS at the VERY END of main.css ========================================================= */ /* 1) DESKTOP GAP FIX Inline style sa HTML = min-height:85vh. Override natin para hindi sobrang taas yung banner. */ @media (min-width: 768px){ .desktop-about{ min-height: 70vh !important; /* from 85vh -> 70vh (less empty space) */ } } @media (min-width: 1280px){ .desktop-about{ min-height: 85vh !important; /* konting balik sa malaking screen */ } } /* 2) RESTORE ABOUT TABS LOOK (dati mong style) Base .tab-underline at .about-tabs na nawala. */ .about-tabs{ position: relative; margin-top: .75rem; /* dikit lang sa Tools */ padding-top: .6rem; /* space para sa line */ } /* centered separator line */ .about-tabs::before{ content:''; position:absolute; left:50%; transform:translateX(-50%); top:0; width:min(960px,100% - 3rem); height:1px; background:#3a3a3a; } /* tabs row */ #aboutTabs{ display:flex; align-items:center; justify-content:center; gap:18px; /* same vibe as before */ flex-wrap:wrap; margin-top:8px; margin-bottom:12px; /* maliit lang gap sa panels */ } /* clean text-tab like before */ .tab-underline{ position:relative; display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#dcdcdc; background:transparent; border:0; padding:2px 4px; white-space:nowrap; line-height:1; } .tab-underline span{ white-space:nowrap; } /* underline animation */ .tab-underline::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:center; opacity:.6; transition:transform .25s ease, opacity .25s ease; } .tab-underline:hover{ color:#fff; } .tab-underline:hover::after{ transform:scaleX(1); opacity:1; } /* active/open state */ .tab-underline[aria-expanded="true"]{ color:#fff; } .tab-underline[aria-expanded="true"]::after{ transform:scaleX(1); opacity:1; } /* chevron flip */ .tab-underline .chev{ transition:transform .25s ease, opacity .25s ease; opacity:.85; } .tab-underline[aria-expanded="true"] .chev{ transform:rotate(180deg); } /* focus ring */ .tab-underline:focus-visible{ outline:2px solid #FA02AF; outline-offset:2px; } /* panels spacing (tighter, no giant gap) */ .about-collapsible{ margin-top:20px !important; /* beats mt-3 */ } #spousePanel{ margin-top:18px !important; /* tiny bump para balance sa avatar */ } /* 3) MOBILE ABOUT CENTERING (keep design) Ensure yung mobile about block fully centered */ @media (max-width: 767px){ #about > div.block{ min-height: 90svh; display:flex; align-items:center; justify-content:center; padding-inline:1rem; } #about > div.block > div{ margin-left:auto; margin-right:auto; text-align:center; } } /* 4) WORK STATUS MOBILE WIDTH (hindi sobrang haba) Keep mo desktop style mo, compact lang sa phone */ @media (max-width: 768px){ .work-status{ max-width: calc(100vw - 24px); padding:7px 12px; } .work-status .ws-label{ display:block; max-width: 200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } /* ============================================================ ABOUT / TABS – ADJUSTABLE GAP CONTROLS Paste at VERY END of main.css ============================================================ */ /* πŸ”§ EDIT THESE NUMBERS LANG */ :root{ --about-tabs-gap-desktop: 2.25rem; /* gap after tabs before Artworks (desktop) */ --about-tabs-gap-mobile: 5rem; /* gap after tabs before Artworks (phone) */ --about-tabs-gap-lg: 5rem; /* gap on big desktop */ --about-tabs-row-gap: 18px; /* space between the 3 tabs */ --about-sep-top: .6rem; /* space from separator line to tabs row */ } /* Tabs row spacing */ #aboutTabs{ gap: var(--about-tabs-row-gap) !important; margin-top: 5px !important; } /* Separator + main tabs container spacing */ .about-tabs{ position: relative; margin-top: 3rem !important; padding-top: var(--about-sep-top) !important; /* βœ… THIS CONTROLS THE GAP BEFORE ARTWORKS */ margin-bottom: var(--about-tabs-gap-desktop) !important; } /* Mobile override */ @media (max-width: 768px){ .about-tabs{ margin-bottom: var(--about-tabs-gap-mobile) !important; } } /* Large desktop override */ @media (min-width: 1024px){ .about-tabs{ margin-bottom: var(--about-tabs-gap-lg) !important; } } /* Keep panels from secretly adding extra space */ .about-collapsible{ margin-top: 12px !important; } .about-collapsible:not(.open){ padding-bottom: 0 !important; } /* βœ… Restore tab look (in case earlier rules got overridden) */ .tab-underline{ position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #dcdcdc; background: transparent; padding: 2px 4px; line-height: 1.1; } .tab-underline::after{ bottom: -6px; } .tab-underline:hover{ color:#fff; } .tab-underline[aria-expanded="true"]{ color:#fff; } .tab-underline[aria-expanded="true"]::after{ transform: scaleX(1); opacity:1; } /* ===== Work Status: stick ONLY inside About ===== */ /* override the global .work-status { position:fixed ... } */ section#about .work-status{ position: absolute !important; /* NOT fixed anymore */ top: 18px; /* ibaba/itaas mo dito */ left: 18px; z-index: 5; /* above overlay/card but under header */ width: auto; max-width: 70vw; /* para di humaba sobra sa phone */ white-space: nowrap; } /* phone tune: mas siksik + di sobrang haba */ @media (max-width: 768px){ section#about .work-status{ top: 14px; left: 12px; padding: 7px 12px; font-size: .76rem; max-width: 82vw; } } /* shared overlays */ #termsOverlay, #privacyOverlay, #cookieOverlay{ position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.65); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s ease; } #termsOverlay.show, #privacyOverlay.show, #cookieOverlay.show{ opacity: 1; pointer-events: auto; } /* card animation */ #termsOverlay .overlay-card, #privacyOverlay .overlay-card, #cookieOverlay .overlay-card{ transform: translateY(8px) scale(.98); opacity: 0; transition: transform .25s ease, opacity .25s ease; max-width: 720px; width: min(92vw, 720px); } #termsOverlay.show .overlay-card, #privacyOverlay.show .overlay-card, #cookieOverlay.show .overlay-card{ transform: translateY(0) scale(1); opacity: 1; } .tile.pinned { grid-column: span 1; grid-row: span 1; border: 1px solid #4d4d4d; } /* ========================================================== ABOUT2 β€” FINAL (CLEAN) FIX LEFT: Who is Bolim only RIGHT: Work Status, Services, Education, Certificates (stacked) + Fit to screen (desktop) + Remove pink accent on rounded cards + Less haze (top faded) + Icon style (same look) ========================================================== */ /* SECTION BASE */ .about2{ position: relative; overflow: hidden; padding: 80px 0 90px; /* clean black like bolimgfx */ background: radial-gradient(900px 520px at 18% 12%, rgba(250,2,175,.10), transparent 62%), radial-gradient(780px 520px at 78% 18%, rgba(250,2,175,.06), transparent 65%), linear-gradient(#090909, #090909) !important; } /* TOP FADED HAZE (LESS) */ .about2:after{ content:""; position:absolute; inset: 0; pointer-events:none; z-index: 0; /* less haze */ background: radial-gradient(1100px 420px at 50% 0%, rgba(255,255,255,.07), rgba(255,255,255,.03) 38%, transparent 70%), linear-gradient(to bottom, rgba(255,255,255,.025), transparent 58%); } .about2-wrap{ position: relative; z-index: 1; max-width: 1180px !important; margin: 0 auto !important; padding: 0 22px !important; } /* TITLE */ .about2-title{ font-size: clamp(36px, 4.6vw, 56px) !important; line-height: 1.05 !important; font-weight: 900 !important; letter-spacing: -0.02em !important; color: #fff !important; } .about2-title span{ color:#FA02AF !important; } .about2-sub{ margin-top: 10px !important; color: rgba(255,255,255,.58) !important; font-size: 14px !important; max-width: 540px !important; } /* LAYOUT: LEFT WHO, RIGHT STACKED */ .about2-grid{ margin-top: 26px !important; display: grid !important; grid-template-columns: 1.35fr 1fr !important; gap: 18px !important; align-items: start !important; grid-template-areas: "who status" "who services" "who edu" "who certs" !important; } /* AREAS */ .a2-who{ grid-area: who !important; } .a2-status{ grid-area: status !important; } .a2-services{ grid-area: services !important; } .a2-edu{ grid-area: edu !important; } .a2-certs{ grid-area: certs !important; } /* CARD LOOK (NO PINK ACCENT) */ .a2-card{ background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 22px !important; padding: 18px 18px 16px !important; box-shadow: 0 18px 70px rgba(0,0,0,.55) !important; overflow: hidden !important; position: relative !important; } .a2-card:before{ content:none !important; } /* remove accent overlay */ .a2-card > *{ position: relative !important; } /* WHO CARD STABILITY */ .a2-who{ display: flex !important; flex-direction: column !important; } /* ICON BASE STYLE (SAME LOOK) */ .a2-ic{ width: 38px !important; height: 38px !important; border-radius: 14px !important; display: grid !important; place-items: center !important; font-size: 14px !important; border: 1px solid rgba(255,255,255,.08) !important; backdrop-filter: blur(8px) !important; margin-bottom: 10px !important; } .a2-ic svg{ color: #fff !important; } /* ICON COLORS */ .a2-ic-pink{ background: linear-gradient(135deg, rgba(250,2,175,.35), rgba(250,2,175,.15)) !important; box-shadow: 0 0 20px rgba(250,2,175,.22) !important; } .a2-ic-blue{ background: linear-gradient(135deg, rgba(70,160,255,.35), rgba(70,160,255,.15)) !important; box-shadow: 0 0 20px rgba(70,160,255,.22) !important; } .a2-ic-violet{ background: linear-gradient(135deg, rgba(160,120,255,.35), rgba(160,120,255,.15)) !important; box-shadow: 0 0 20px rgba(160,120,255,.22) !important; } .a2-ic-orange{ background: linear-gradient(135deg, rgba(255,140,60,.35), rgba(255,140,60,.15)) !important; box-shadow: 0 0 20px rgba(255,140,60,.22) !important; } /* ROW + PILL */ .a2-row{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap: 10px !important; } .a2-pill{ font-size: 10px !important; padding: 4px 10px !important; border-radius: 999px !important; letter-spacing: .18em !important; font-weight: 800 !important; } .a2-pill-ok{ color: #7CFFB8 !important; background: rgba(20,180,110,.12) !important; border: 1px solid rgba(20,180,110,.25) !important; } /* TEXT */ .a2-h{ font-weight: 800 !important; font-size: 15px !important; margin: 6px 0 8px !important; color: #fff !important; } .a2-p{ color: rgba(255,255,255,.70) !important; font-size: 12.5px !important; line-height: 1.65 !important; margin-top: 8px !important; } .a2-strong{ color: rgba(255,255,255,.92) !important; font-weight: 800 !important; } /* SERVICES */ .a2-list{ list-style:none !important; margin: 10px 0 0 !important; padding: 0 !important; display:grid !important; gap: 10px !important; color: rgba(255,255,255,.72) !important; font-size: 12.5px !important; } .a2-list li{ display:flex !important; align-items:center !important; gap: 10px !important; } .a2-dot{ width: 7px !important; height: 7px !important; border-radius: 99px !important; background: #FA02AF !important; box-shadow: 0 0 0 3px rgba(250,2,175,.12) !important; } /* WHO BANNER */ .a2-banner{ margin-top: 14px !important; border-radius: 18px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.10) !important; height: 170px !important; position: relative !important; background: #111 !important; } .a2-banner img{ width:100% !important; height:100% !important; object-fit: cover !important; display:block !important; } .a2-bannerCap{ position:absolute !important; left: 12px !important; bottom: 10px !important; right: 12px !important; } .a2-name{ font-weight: 900 !important; font-size: 12px !important; } .a2-role{ font-size: 10px !important; color: rgba(255,255,255,.55) !important; } /* EDUCATION */ .a2-eduItem{ margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid rgba(255,255,255,.08) !important; } .a2-eduLine{ display:flex !important; gap:10px !important; align-items:flex-start !important; } .a2-bullet{ width:8px !important; height:8px !important; margin-top:6px !important; border-radius:99px !important; background:#FA02AF !important; } .a2-eduTitle{ font-weight: 800 !important; font-size: 12.8px !important; color: rgba(255,255,255,.90) !important; } .a2-eduMeta{ margin-top: 2px !important; font-size: 11px !important; color: rgba(255,255,255,.55) !important; } /* CERTS */ .a2-certsGrid{ margin-top: 10px !important; display:grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .a2-mini{ border-radius: 14px !important; background: rgba(0,0,0,.22) !important; border: 1px solid rgba(255,255,255,.08) !important; padding: 12px !important; } .a2-miniT{ font-weight: 800 !important; font-size: 12px !important; color: rgba(255,255,255,.92) !important; } .a2-miniS{ margin-top: 3px !important; font-size: 10.5px !important; color: rgba(255,255,255,.55) !important; } /* REVEAL FALLBACK */ .about2 .reveal{ opacity: 1 !important; transform: none !important; filter: none !important; } /* FIT TO SCREEN (DESKTOP) */ @media (min-width: 1024px){ .about2{ padding: 52px 0 52px !important; min-height: calc(100vh - 140px); display: flex; align-items: center; } .about2-wrap{ width: 100%; } .about2-sub{ margin-top: 8px !important; } .about2-grid{ margin-top: 18px !important; gap: 18px !important; } .a2-card{ padding: 16px 16px 14px !important; } .a2-banner{ height: 140px !important; } /* clamp WHO text para di lumabis */ .a2-who .a2-p{ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .a2-who .a2-p:nth-of-type(1){ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .a2-who .a2-p:nth-of-type(2){ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .a2-status .a2-p, .a2-services .a2-list{ font-size: 12px !important; } .a2-mini{ padding: 10px !important; } .a2-miniT{ font-size: 11.5px !important; } .a2-miniS{ font-size: 10px !important; } } /* RESPONSIVE */ @media (max-width: 980px){ .about2-grid{ grid-template-columns: 1fr !important; grid-template-areas: "who" "status" "services" "edu" "certs" !important; } } @media (max-width: 640px){ .a2-certsGrid{ grid-template-columns: 1fr !important; } } /* Optional global bg */ body{ background: #090909; } /* ========================================================== FIX: ICON + TITLE ALIGNMENT (PANTAY LAHAT) Paste at VERY BOTTOM of main.css ========================================================== */ /* 1) Make all cards (except status) follow same header layout */ .a2-card:not(.a2-status){ display: grid !important; grid-template-columns: 42px 1fr !important; column-gap: 12px !important; row-gap: 8px !important; align-items: start !important; } /* icon always left, same position */ .a2-card:not(.a2-status) > .a2-ic{ grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; align-self: start !important; } /* title always right beside icon */ .a2-card:not(.a2-status) > .a2-h{ grid-column: 2 !important; grid-row: 1 !important; margin: 2px 0 0 !important; line-height: 1.15 !important; } /* everything after title becomes full width (no weird offset) */ .a2-card:not(.a2-status) > *:not(.a2-ic):not(.a2-h){ grid-column: 1 / -1 !important; } /* 2) Certificates card usually has NO icon β€” keep title aligned clean */ .a2-certs{ grid-template-columns: 1fr !important; } .a2-certs > .a2-h{ grid-column: 1 / -1 !important; margin: 0 0 6px !important; } /* 3) Work Status card keeps its special row (icon + pill) */ .a2-status{ display: block !important; } .a2-status .a2-row{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap: 12px !important; } .a2-status .a2-row .a2-ic{ margin: 0 !important; } /* 4) Ensure icons look consistent + centered */ .a2-ic{ width: 38px !important; height: 38px !important; border-radius: 14px !important; display: grid !important; place-items: center !important; } .a2-ic svg{ width: 16px !important; height: 16px !important; display:block !important; } /* 5) Remove random extra spacing in cards */ .a2-card p{ margin-top: 6px !important; } .a2-card .a2-list{ margin-top: 8px !important; } /* 6) Make wife card same spacing as Who is Bolim (no weird gaps) */ .a2-wife .a2-banner, .a2-who .a2-banner{ margin-top: 12px !important; } .a2-wife .a2-banner img{ width: 100% !important; height: 100% !important; object-fit: cover !important; /* move image DOWN (show face) */ object-position: 10% 59% !important; } /* 7) Responsive safety (tablet/mobile) */ @media (max-width: 980px){ .a2-card:not(.a2-status){ grid-template-columns: 40px 1fr !important; column-gap: 10px !important; } } /* ========================================== ABOUT SECTION β€” PERFECT FIT (1080p TARGET) Desktop: no overflow Mobile: natural stacking ========================================== */ /* ---------- DESKTOP (1080p target) ---------- */ @media (min-width: 1024px){ .about2{ min-height: calc(100vh - 110px); /* minus header */ display: flex; align-items: center; padding: 38px 0 38px !important; } .about2-wrap{ width: 100%; } /* Title smaller */ .about2-title{ font-size: clamp(26px, 2.8vw, 38px) !important; margin-bottom: 4px !important; } .about2-sub{ font-size: 12.5px !important; margin-top: 4px !important; } .about2-grid{ margin-top: 14px !important; gap: 16px !important; } /* Cards tighter */ .a2-card{ padding: 14px 16px 14px !important; } /* Paragraph slightly smaller */ .a2-p{ font-size: 12px !important; line-height: 1.55 !important; } /* Banner shorter */ .a2-banner{ height: 120px !important; } /* Certificates tighter */ .a2-mini{ padding: 10px !important; } .a2-miniT{ font-size: 11px !important; } .a2-miniS{ font-size: 10px !important; } /* Prevent overflow */ .about2{ overflow: hidden; } } /* ---------- MOBILE OPTIMIZATION ---------- */ @media (max-width: 768px){ .about2{ padding: 60px 0 !important; min-height: auto !important; display: block; } .about2-title{ font-size: 28px !important; } .about2-sub{ font-size: 13px !important; } .about2-grid{ grid-template-columns: 1fr !important; gap: 18px !important; } .a2-banner{ height: 160px !important; } .a2-card{ padding: 18px !important; } } /* ========================================== CERTIFICATES β€” ICON + TITLE INLINE ========================================== */ .a2-headRow{ display:flex !important; align-items:center !important; gap: 10px !important; margin-bottom: 8px !important; } .a2-h-inline{ margin: 0 !important; } /* neutral icon like others (no pink accent) */ .a2-ic-gray{ background: rgba(255,255,255,.06) !important; box-shadow: none !important; } /* ========================================= ABOUT2 β€” FIX CARD SPACING (NO DIKIT) Paste at VERY BOTTOM ========================================= */ /* main grid spacing (row + column) */ .about2-grid{ gap: 18px !important; /* space between boxes */ row-gap: 18px !important; /* extra safety */ column-gap: 18px !important; } /* add breathing room per card (in case may overrides) */ .about2-grid > .a2-card{ margin: 0 !important; } /* If you have left/right wrappers (optional safety) (okay lang kahit wala kang wrapper, harmless) */ .a2-col{ display: flex !important; flex-direction: column !important; gap: 18px !important; } /* mobile/tablet: keep spacing */ @media (max-width: 980px){ .about2-grid{ gap: 18px !important; } } /* ========================================= PREMIUM IMAGE SHADOW OVERLAY (Both Banners) ========================================= */ /* stronger cinematic gradient */ .a2-banner::after{ content:""; position:absolute; inset:0; background: linear-gradient( to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.25) 60%, transparent 100% ); pointer-events:none; z-index:1; } /* subtle inner shadow for depth */ .a2-banner{ box-shadow: inset 0 -60px 80px rgba(0,0,0,.55), 0 10px 35px rgba(0,0,0,.35) !important; } /* caption always above overlay */ .a2-bannerCap{ position:absolute !important; left:16px !important; bottom:16px !important; right:16px !important; z-index:2; } /* make name really pop */ .a2-name{ font-weight:900 !important; font-size:13px !important; letter-spacing:.02em; color:#fff !important; text-shadow: 0 3px 10px rgba(0,0,0,.9), 0 0 25px rgba(0,0,0,.8), 0 0 40px rgba(0,0,0,.6); } /* subtitle softer but readable */ .a2-role{ font-size:11px !important; color:rgba(255,255,255,.8) !important; margin-top:4px; text-shadow: 0 2px 8px rgba(0,0,0,.9); } /* =============================== SELECTED WORKS β€” Hover Blur + Zoom + Show More Paste at the VERY BOTTOM of main.css ================================= */ .works{ position: relative; padding: 70px 0 90px; } .works-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 22px; } /* header */ .works-title{ font-size: clamp(34px, 4.6vw, 54px); font-weight: 900; letter-spacing: -.02em; color: #fff; line-height: 1.05; } .works-title span{ color:#FA02AF; } .works-sub{ margin-top: 10px; color: rgba(255,255,255,.58); font-size: 14px; max-width: 620px; } /* grid (nice 3x2 on desktop) */ .works-grid{ margin-top: 26px; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } @media (max-width: 980px){ .works-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ .works-grid{ grid-template-columns: 1fr; } } /* tile */ .work-tile{ position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); box-shadow: 0 18px 70px rgba(0,0,0,.55); cursor: pointer; transform: translateZ(0); } /* keep squares consistent like screenshot */ .work-tile::before{ content:""; display:block; padding-top: 100%; } /* image fills tile */ .work-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.00); transition: transform .45s ease, filter .45s ease, opacity .45s ease; } /* overlay (title + pink circle icon) */ .work-overlay{ position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .35s ease; background: radial-gradient(800px 520px at 50% 40%, rgba(0,0,0,.10), rgba(0,0,0,.55)); } .work-cap{ text-align: center; display: grid; gap: 12px; transform: translateY(6px); transition: transform .35s ease; } .work-capTitle{ color: rgba(255,255,255,.92); font-weight: 900; font-size: 14px; letter-spacing: .02em; text-shadow: 0 8px 28px rgba(0,0,0,.75); } .work-capBtn{ width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: #FA02AF; color: #0b0b0b; box-shadow: 0 18px 50px rgba(250,2,175,.25); margin: 0 auto; } /* ===== Hover behavior (like your screenshot) ===== */ /* when hovering the GRID: all tiles dim + blur a bit */ .works-grid:hover .work-tile .work-img{ filter: blur(3px) brightness(.65); transform: scale(.98); } /* hovered tile pops (zoom in, no blur) */ .work-tile:hover .work-img, .work-tile:focus-visible .work-img{ filter: none !important; transform: scale(1.06) !important; } /* overlay appears only on hovered tile */ .work-tile:hover .work-overlay, .work-tile:focus-visible .work-overlay{ opacity: 1; } .work-tile:hover .work-cap, .work-tile:focus-visible .work-cap{ transform: translateY(0); } /* hidden tiles for "Show All" */ .work-tile.is-hidden{ display: none; } .works.is-expanded .work-tile.is-hidden{ display: block; } /* button */ .works-actions{ margin-top: 22px; display: flex; justify-content: center; } .works-btn{ border-radius: 999px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.86); font-weight: 800; font-size: 12px; letter-spacing: .02em; transition: transform .25s ease, background .25s ease, border-color .25s ease; } .works-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.26); } /* empty state */ .works-empty{ grid-column: 1 / -1; text-align: center; padding: 70px 0; color: rgba(255,255,255,.60); } .works-empty code{ color: rgba(255,255,255,.75); } /* ========================================================= FIX: Lightbox/Overlays must ALWAYS be above sticky header - Tailwind backdrop-blur creates stacking context - We force lightbox to the topmost layer - When lightbox/overlay is open, header is pushed behind ========================================================= */ #lightbox.lightbox{ position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; /* topmost */ isolation: isolate; } #lightbox.lightbox.open{ background: rgba(0,0,0,.95) !important; backdrop-filter: blur(10px); } body.lb-active #siteHeader{ z-index: 0 !important; pointer-events: none !important; /* prevent backdrop-filter stacking dominance */ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.lb-active #toTopBtn{ z-index: 1 !important; } /* overlays (contact/social/terms/privacy/status/etc.) */ .overlay, #contactOverlay, #socialOverlay, #termsOverlay, #privacyOverlay, #cookieOverlay, #statusOverlay, #educationOverlay{ position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; } /* keep modal cards above their backdrop */ .overlay-card, .social-card, .status-card, .lightbox-inner{ position: relative; z-index: 2147483500 !important; } /* =============================== CAPSTONE β€” NO CARD VERSION =================================*/ .capstone-section{ position:relative; padding:120px 0; overflow: visible; /* βœ… para hindi putol */ } /* Blue ambient glow */ .capstone-section::before{ content:""; position:absolute; inset: 100px; background: radial-gradient(980px 560px at 78% 38%, rgba(47,123,255,.70), transparent 60%), radial-gradient(760px 460px at 30% 60%, rgba(47,123,255,.60), transparent 62%); filter: blur(20px); pointer-events:none; z-index:0; } .capstone-container{ position:relative; z-index:1; } #capstone .capstone-header{ margin-bottom: 25px; } .capstone-header h2{ font-size:42px; font-weight:800; } .capstone-header h2 span{ color:#2F7BFF; } .capstone-header p{ margin-top:10px; color:#9CA3AF; } /* GRID */ .capstone-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; } /* ================= PREVIEW ================= */ .cap-preview{ position:relative; border-radius:22px; overflow:hidden; background:#111; box-shadow: 0 0 60px rgba(47,123,255,.25), 0 20px 80px rgba(0,0,0,.7); } .cap-preview img{ width:100%; display:block; border-radius:22px; } /* subtle glowing edge */ .cap-preview::after{ content:""; position:absolute; inset:0; border-radius:22px; box-shadow: inset 0 0 30px rgba(47,123,255,.3); pointer-events:none; } /* ================= CONTENT ================= */ .cap-content h3{ font-size:34px; font-weight:800; margin:18px 0; } .cap-content p{ color:#9CA3AF; line-height:1.7; margin-bottom:25px; } .cap-badge{ display:inline-block; font-size:12px; padding:6px 14px; border-radius:20px; background:#0F2B55; color:#60A5FA; font-weight:600; } .cap-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; } .cap-tags span{ background:#1F1F1F; padding:8px 14px; border-radius:999px; font-size:13px; color:#D1D5DB; } .cap-actions{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; } .cap-btn{ background:#2F7BFF; color:white; padding:14px 24px; border-radius:12px; font-weight:600; text-decoration:none; transition:.3s; } .cap-btn:hover{ background:#2563EB; transform:translateY(-2px); } .cap-note{ background:#2b2205; border:1px solid #5a4a10; padding:14px 18px; border-radius:14px; font-size:13px; color:#FACC15; max-width:320px; } /* Responsive */ @media(max-width:992px){ .capstone-grid{ grid-template-columns:1fr; } } .capframe-wrap{ min-height: 320px; /* fallback height */ } @media (max-width: 992px){ .capframe-wrap{ min-height: 240px; } } /* ===== CAPSTONE PREVIEW (NO CARD) ===== */ .cap-preview{ position: relative; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 70px rgba(60,120,255,.20); } /* βœ… gives height */ .cap-preview .capslider{ position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 240px; } /* frames (slider) */ .cap-preview .capframe{ position: absolute; inset: 0; opacity: 0; transform: scale(1.01); transition: opacity .45s ease, transform .45s ease; } .cap-preview .capframe.active{ opacity: 1; transform: scale(1); } .cap-preview .capframe img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* clickable overlay */ .cap-open{ position: absolute; inset: 0; z-index: 5; } /* dots */ .capslider-dots{ position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 6; } .capslider-dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.35); } .capslider-dot.active{ background: rgba(60,140,255,1); } /* ========================= CAPSTONE HOVER EFFECT ========================= */ .cap-preview{ transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; } /* default glow */ .cap-preview{ box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(60,120,255,.25); } /* πŸ”₯ stronger glow + lift */ .cap-preview:hover{ transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 90px rgba(60,140,255,.45), 0 0 140px rgba(60,140,255,.25); } /* image zoom */ .cap-preview .capframe img{ transition: transform .6s cubic-bezier(.22,1,.36,1); } /* zoom on hover */ .cap-preview:hover .capframe img{ transform: scale(1.06); } /* ========================================================= CONSISTENT SECTION TITLES (Selected Works + Featured Project) - smaller - centered - same sizes ========================================================= */ /* shared sizes */ :root{ --sec-title: clamp(22px, 2.1vw, 27px); --sec-sub: clamp(12px, 1.05vw, 14px); --sec-sub-lh: 1.55; } /* --- SELECTED WORKS (Artworks section title/subtitle) --- */ #artworks h2, #artworks .artworks-title, #artworks .capstone-header h2, #artworks .section-title{ font-size: var(--sec-title) !important; line-height: 1.1 !important; text-align: center !important; letter-spacing: -0.02em; margin: 0 auto !important; width: fit-content; } #artworks p, #artworks .artworks-sub, #artworks .section-subtitle{ font-size: var(--sec-sub) !important; line-height: var(--sec-sub-lh) !important; text-align: center !important; max-width: 720px; margin: 10px auto 0 !important; opacity: .78; } /* --- FEATURED PROJECT (Capstone header title/subtitle) --- */ #capstone .capstone-header h2, #capstone h2{ font-size: var(--sec-title) !important; line-height: 1.1 !important; text-align: center !important; letter-spacing: -0.02em; margin: 0 auto !important; width: fit-content; } #capstone .capstone-header p{ font-size: var(--sec-sub) !important; line-height: var(--sec-sub-lh) !important; text-align: center !important; max-width: 720px; margin: 10px auto 0 !important; opacity: .78; } /* optional: keep the pink/blue span looking balanced when smaller */ #artworks h2 span, #capstone .capstone-header h2 span{ font-size: 1em !important; } /* ========================================= Reduce gap between Artworks & Capstone ========================================= */ /* bawasan bottom spacing ng artworks section */ #artworks{ padding-bottom: 40px !important; margin-bottom: 0 !important; } /* bawasan top spacing ng capstone section */ #capstone{ padding-top: 40px !important; margin-top: 0 !important; } /* ===================================== CAPSTONE CONTENT TEXT SIZE ONLY (right side content lang babaguhin) ===================================== */ /* WEB APPLICATION badge */ #capstone .cap-badge{ font-size: 10px !important; padding: 5px 12px; letter-spacing: 1px; } /* Main Title */ #capstone .cap-content h3{ font-size: 22px !important; /* mas maliit */ font-weight: 700; line-height: 1.35; margin-bottom: 14px; } /* Description */ #capstone .cap-content p{ font-size: 13.5px !important; line-height: 1.7; color: #9ca3af; } /* Tech tags */ #capstone .cap-tags span{ font-size: 11px !important; padding: 5px 11px; } /* Note box text */ /* Smaller + less aggressive note */ #capstone .cap-note{ font-size: 11.5px !important; line-height: 1.5; padding: 10px 14px; max-width: 320px; /* same visual width as button */ background: rgba(255, 196, 0, 0.08); /* mas subtle */ border: 1px solid rgba(255, 196, 0, 0.25); border-radius: 8px; color: #facc15; } /* ========================= FOOTER (FULL BLEED CLEAN) ========================= */ /* FULL-BLEED trick: Works even if footer is inside a centered max-width parent */ .fullbleed-footer{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; overflow: hidden; background: #07070c; } /* Layout */ .site-footer .sf-inner{ position: relative; z-index: 2; max-width: 1150px; margin: 0 auto; padding: 64px 24px 26px; } .site-footer .sf-grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } @media (max-width: 900px){ .site-footer .sf-grid{ grid-template-columns: 1fr; gap: 28px; } .site-footer .sf-right{ justify-self: start; } } /* Background layers */ .site-footer .sf-bg{ position: absolute; inset: 0; z-index: 1; pointer-events: none; } .site-footer .sf-base{ position: absolute; inset: 0; background: #06060A; /* pure deep black */ } .site-footer .sf-topline{ position: absolute; top: 0; left: 0; width: 100vw; /* real full width */ height: 1px; background: rgba(255,255,255,.10); } /* Glows (heartbeat + slight drift) */ .site-footer .sf-glow{ position: absolute; width: 760px; height: 760px; border-radius: 9999px; filter: blur(120px); opacity: .55; transform: translateZ(0); animation: sf-heart 4.8s ease-in-out infinite; } .site-footer .sf-glow--pink{ left: -260px; bottom: -420px; background: rgba(255, 31, 191, .80); animation-delay: 0s; } .site-footer .sf-glow--blue{ right: -300px; top: -260px; background: rgba(56, 189, 248, .45); animation-delay: .25s; } @keyframes sf-heart{ 0% { transform: translate(0,0) scale(1); opacity: .48; } 20% { transform: translate(8px,-6px) scale(1.06); opacity: .62; } 45% { transform: translate(0,0) scale(1); opacity: .52; } 70% { transform: translate(-10px,8px) scale(1.05); opacity: .60; } 100% { transform: translate(0,0) scale(1); opacity: .48; } } .site-footer .sf-vignette{ position: absolute; inset: 0; background: radial-gradient(900px 520px at 50% 45%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.90) 100%); } /* Left side */ .site-footer .sf-left{ min-width: 0; } .site-footer .sf-logo{ width: 170px; max-width: 100%; opacity: .95; user-select: none; pointer-events: none; display: block; margin-bottom: 18px; } .site-footer .sf-title{ font-size: clamp(26px, 3vw, 34px); line-height: 1.05; font-weight: 900; margin: 0; color: #fff; } .site-footer .sf-sub{ margin: 10px 0 0; color: rgba(255,255,255,.55); font-size: 13px; max-width: 44ch; } /* Quick links */ .site-footer .sf-links{ margin-top: 22px; } .site-footer .sf-links-title{ font-size: 12px; font-weight: 900; letter-spacing: .18em; color: rgba(255,255,255,.90); margin-bottom: 10px; } .site-footer .sf-links-row{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: rgba(255,255,255,.55); font-size: 13px; } .site-footer .sf-link{ color: rgba(255,255,255,.55); text-decoration: none; transition: color .18s ease, opacity .18s ease; } .site-footer .sf-link:hover{ color: var(--accent, #FA02AF); } .site-footer .sf-sep{ opacity: .35; } /* Right side (form) β€” no β€œbig box accent”, clean card lang */ .site-footer .sf-right{ justify-self: end; } @media (max-width: 900px){ .site-footer .sf-right{ justify-self: start; } } .site-footer .sf-form{ width: min(520px, 92vw); padding: 18px 18px 16px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 70px rgba(0,0,0,.35); } .site-footer .sf-label{ display: block; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.60); margin: 8px 0 6px; } .site-footer .sf-input, .site-footer .sf-textarea{ width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.28); color: #fff; padding: 12px 14px; outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .site-footer .sf-textarea{ resize: none; } .site-footer .sf-input:focus, .site-footer .sf-textarea:focus{ border-color: rgba(250,2,175,.40); box-shadow: 0 0 0 3px rgba(250,2,175,.14); background: rgba(0,0,0,.36); } .site-footer .sf-submit{ width: 100%; margin-top: 14px; height: 46px; border-radius: 14px; border: 0; background: #fff; color: #000; font-weight: 900; cursor: pointer; transition: transform .15s ease, box-shadow .18s ease, filter .18s ease; box-shadow: 0 14px 42px rgba(0,0,0,.35); } .site-footer .sf-submit:hover{ transform: translateY(-1px); } .site-footer .sf-submit:active{ transform: translateY(0); } /* Bottom */ .site-footer .sf-bottom{ margin-top: 34px; text-align: center; font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.35); text-transform: uppercase; } /* Accent word (Together) */ .sf-accent{ color: var(--accent, #FA02AF); } /* Email block */ .sf-email{ margin-top: 22px; display: flex; align-items: center; gap: 14px; } .sf-iconCircle{ width: 44px; height: 44px; border-radius: 9999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); display: grid; place-items: center; } .sf-miniTitle{ font-size: 10px; letter-spacing: .22em; font-weight: 900; color: rgba(255,255,255,.35); margin-bottom: 4px; } .sf-emailText{ color: rgba(255,255,255,.92); font-weight: 800; text-decoration: none; } .sf-emailText:hover{ opacity: .9; } /* Socials */ .sf-socials{ margin-top: 16px; } .sf-socialRow{ margin-top: 10px; display: flex; gap: 12px; align-items: center; } .sf-socialBtn{ width: 44px; height: 44px; border-radius: 9999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); display: grid; place-items: center; transition: .18s ease; text-decoration: none; } .sf-socialBtn:hover{ background: rgba(255,255,255,.09); } .sf-socialBtn--active{ background: rgba(250,2,175,.18); border-color: rgba(250,2,175,.25); } /* Icons */ .sf-iconPink{ color: var(--accent, #FA02AF); } .sf-iconWhite{ color: rgba(255,255,255,.85); } /* βœ… Two columns for name/email like screenshot */ .sf-twoCol{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 620px){ .sf-twoCol{ grid-template-columns: 1fr; } } /* Send icon spacing */ .sf-sendIcon{ margin-left: 8px; opacity: .85; } /* ===== minimal smaller text (safe) ===== */ .sf-sub{ font-size: 12px; } .sf-miniTitle{ font-size: 10px; letter-spacing: .18em; } .sf-label{ font-size: 11px; } .sf-input,.sf-textarea{ font-size: 12px; } .sf-submit{ font-size: 12px; } /* ===== socials keep circular icon buttons ===== */ .sf-socialRow{ display:flex; gap:12px; margin-top:10px; } .sf-socialBtn{ width: 42px; height: 42px; border-radius: 9999px; display:grid; place-items:center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); transition: background .2s ease, border-color .2s ease, transform .2s ease; } .sf-iconWhite{ color: rgba(255,255,255,.85); } /* brand hover colors */ .sf-socialBtn[aria-label="Instagram"]:hover{ background: radial-gradient(circle at 30% 30%, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%); border-color: transparent; } .sf-socialBtn[aria-label="Instagram"]:hover .sf-iconWhite{ color:#fff; } .sf-socialBtn[aria-label="Facebook"]:hover{ background:#1877F2; border-color:#1877F2; } .sf-socialBtn[aria-label="Facebook"]:hover .sf-iconWhite{ color:#fff; } .sf-socialBtn[aria-label="LinkedIn"]:hover{ background:#0A66C2; border-color:#0A66C2; } .sf-socialBtn[aria-label="LinkedIn"]:hover .sf-iconWhite{ color:#fff; } /* subtle lift */ .sf-socialBtn:hover{ transform: translateY(-2px); } /* keep the title clean in one line */ .sf-title{ line-height: 1.05; } .sf-accent{ color: var(--accent, #FA02AF); } /* policies row under socials */ .sf-policies{ margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: rgba(255,255,255,.55); font-size: 12px; } .sf-policyLink{ color: rgba(255,255,255,.55); text-decoration: none; transition: color .18s ease; } .sf-policyLink:hover{ color: var(--accent, #FA02AF); } .sf-policySep{ opacity: .35; } /* Add breathing space above policies */ .sf-policies{ margin-top: 20px; /* adjust 20px–32px depende sa gusto mo */ padding-top: 30px; /* optional extra softness */ } .sf-inner{ min-height: 630px; } .sf-copyright{ width:100%; text-align:center; font-size:8px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.32); padding:50px 0 20px; } .capstone { width: 100%; } .capstone-inner{ max-width: 1280px; /* same vibe ng max-w-7xl */ margin: 0 auto; padding: 0 50px; /* left/right gap */ } @media (max-width: 640px){ .capstone-inner{ padding: 0 16px; } } .sf-copyEmailBtn{ background: transparent; border: 0; padding: 0; cursor: pointer; text-align: left; } .sf-copyMsg{ display:inline-block; margin-left:10px; font-size:11px; color:#ff2da8; opacity:0; transform:translateY(4px); transition:all .25s ease; } .sf-copyMsg.show{ opacity:1; transform:translateY(0); } .sf-status{ margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; font-size: 12px; letter-spacing: .03em; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.35); color: rgba(255,255,255,.80); } .sf-status.is-ok{ border-color: rgba(34,197,94,.35); color: rgba(34,197,94,.95); } .sf-status.is-err{ border-color: rgba(239,68,68,.35); color: rgba(239,68,68,.95); } /* Base transition */ .a2-card { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; will-change: transform; } /* Hover effect */ .a2-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 0, 150, 0.15); border-color: rgba(255, 0, 150, 0.25); } /* Make banner crop the zoom */ .a2-banner { overflow: hidden; border-radius: 16px; /* match your card radius */ } /* Smooth image zoom */ .a2-banner img { transition: transform 0.6s ease; } /* Zoom when hovering the IMAGE */ .a2-banner:hover img { transform: scale(1.07); } /* ========================================= ABOUT CARD HOVER FIX (works with .reveal) Paste this at the VERY BOTTOM of main.css ========================================= */ /* card hover lift + glow */ @media (hover:hover) { .a2-card { position: relative; transform: translateY(0) translateZ(0); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; will-change: transform; } /* IMPORTANT: override reveal's transform:none !important */ .a2-card.reveal:hover{ transform: translateY(-3px) translateZ(0) !important; border-color: rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05), 0 0 36px rgba(250,2,175,.08); } /* image zoom on hover */ .a2-banner{ overflow: hidden; } .a2-banner img{ transform: scale(1); transition: transform .55s ease; will-change: transform; } .a2-card:hover .a2-banner img{ transform: scale(1.055); } } /* optional: keyboard focus same effect */ .a2-card:focus-within{ border-color: rgba(255,255,255,.14); box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06), 0 0 60px rgba(250,2,175,.10); } /* ================================ CINEMATIC SECTION TRANSITION (SAFE) - no color bleed - no overscroll - still cinematic ================================ */ .scroll-intro{ position: relative; isolation: isolate; /* keeps glow inside stacking context */ contain: paint; /* prevents paint from leaking outside */ overflow: clip; /* hard-clip glow (no scrollbar) */ opacity: 0; transform: translateY(42px) scale(.975); filter: blur(8px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1.0s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); will-change: transform, opacity, filter; } /* glow burst overlay (clipped) */ .scroll-intro::before{ content:""; position:absolute; inset:-18%; /* smaller than -40% */ pointer-events:none; z-index:-1; /* behind content */ background: radial-gradient(700px 420px at 35% 55%, rgba(250,2,175,.20), transparent 62%), radial-gradient(700px 420px at 70% 45%, rgba(0,140,255,.14), transparent 64%); opacity:0; transform: scale(.92); filter: blur(90px); /* lower than 120px */ transition: opacity 1.05s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1); } /* when in view */ .scroll-intro.is-inview{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); } .scroll-intro.is-inview::before{ opacity:.85; transform: scale(1); } /* smoother when leaving (optional, less harsh) */ .scroll-intro:not(.is-inview){ transition-duration: .55s; } /* Accessibility */ @media (prefers-reduced-motion: reduce){ .scroll-intro, .scroll-intro::before{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } } /* OPTIONAL: extra safety vs horizontal scrollbar (use this if needed) html, body { overflow-x: clip; } */ #artworks.is-expanded .works-wrap{ opacity: 1 !important; transform: none !important; filter: none !important; } /* ===== 3D section background (orange glow, no visible split) ===== */ .m3d{ position:relative; padding: 80px 0; overflow:hidden; } .m3d::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(520px 360px at 22% 38%, rgba(255,140,0,.35), transparent 65%), radial-gradient(480px 320px at 78% 42%, rgba(255,90,0,.35), transparent 70%); opacity:1; } .m3d-wrap{ position:relative; width:100%; padding:0 6%; } .m3d-accent{ color:#FF8A00 !important; } /* ===== slider rail clean (no big box) ===== */ .m3d-track{ display:flex !important; gap:22px !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; scroll-behavior:smooth !important; padding: 10px 0 14px !important; background: transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; scrollbar-width:none; } .m3d-track::-webkit-scrollbar{ display:none; } .m3d-card{ flex: 0 0 340px !important; max-width: 340px !important; scroll-snap-align:start; cursor:pointer; } /* ===== Awwwards-style image card ===== */ .m3d-media{ position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; box-shadow: 0 18px 55px rgba(0,0,0,.35); } .m3d-media img{ width:100%; height:270px; object-fit:cover; display:block; } /* hover shadow + lift */ .m3d-card:hover .m3d-media, .m3d-card:focus-visible .m3d-media{ transform: translateY(-4px); box-shadow: 0 26px 85px rgba(0,0,0,.55); } /* dark bottom gradient appears on hover (like reference) */ .m3d-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.60), transparent 58%); opacity: 0; transition: opacity .22s ease; pointer-events:none; } .m3d-card:hover .m3d-media::after, .m3d-card:focus-visible .m3d-media::after{ opacity: 1; } /* overlay text (hidden until hover) */ .m3d-overlay{ position:absolute; left:18px; bottom:18px; right:95px; color:#fff; opacity:0; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease; z-index:2; text-shadow: 0 10px 30px rgba(0,0,0,.65); } .m3d-overlayKicker{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; opacity:.9; } .m3d-overlayTitle{ margin-top:6px; font-size:12px; font-weight:800; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .m3d-card:hover .m3d-overlay, .m3d-card:focus-visible .m3d-overlay{ opacity:1; transform: translateY(0); } /* icons appear on hover */ .m3d-icons{ position:absolute; right:16px; bottom:16px; display:flex; gap:10px; z-index:3; opacity:0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease; } .m3d-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.20); backdrop-filter: blur(10px); } .m3d-card:hover .m3d-icons, .m3d-card:focus-visible .m3d-icons{ opacity:1; transform: translateY(0); } /* title row below card (always visible like reference) */ .m3d-below{ margin-top: 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; } .m3d-belowTitle{ font-size:14px; font-weight:800; color: rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .m3d-belowBy{ font-size:12px; opacity:.65; white-space:nowrap; } .m3d-belowBy span{ opacity:.95; } /* overlays should not block clicking the card */ .m3d-overlay, .m3d-icons, .m3d-ic{ pointer-events: none !important; } /* 3D header uses the same capstone header sizing + center */ .m3d-header{ text-align: center; /* just in case */ } /* orange accent only for 3D section */ .m3d-header h2 span{ color: #FF8A00 !important; } /* same paragraph feel as capstone */ .m3d-header p{ opacity: .72; } /* keeps slider aligned nicely below centered title */ .m3d .m3d-track{ justify-content: flex-start; /* keep scrolling natural */ } /* ===== HARD OVERRIDE: 3D header size (FINAL) ===== */ section#models3d h2{ font-size: 26px !important; /* adjust if you want smaller */ line-height: 1.05 !important; margin: 0 0 5px !important; font-weight: 800 !important; } @media (max-width: 640px){ section#models3d h2{ font-size: 23px !important; /* mobile size */ } } /* subtitle */ section#models3d p{ font-size: 12px !important; opacity: .72 !important; max-width: 62ch !important; margin: 0 auto !important; } /* keep centered */ section#models3d .capstone-header, section#models3d .works-head, section#models3d header{ text-align: center !important; } /* orange accent */ section#models3d h2 span{ color: #FF8A00 !important; } /* ===== Centered 4-card viewport ===== */ .m3d-rail{ margin-top: 18px; } /* Wrap sets the visible viewport width */ .m3d-trackWrap{ width: 100%; } /* Force track to be centered with a fixed viewport for 4 cards */ .m3d-track{ /* keep your flex slider */ display: flex !important; gap: 22px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; padding: 10px 0 14px !important; background: transparent !important; /* IMPORTANT: center the β€œwindow” */ max-width: calc(340px * 4 + 22px * 3); /* 4 cards + 3 gaps */ margin: 0 auto !important; } /* show only 4 cards area, no extra scrollbar visible */ .m3d-track::-webkit-scrollbar{ display:none; } .m3d-track{ scrollbar-width:none; } /* card width must match max-width calc */ .m3d-card{ flex: 0 0 340px !important; max-width: 340px !important; } /* ===== Bottom centered arrows ===== */ .m3d-controls{ margin-top: 14px; display: flex; justify-content: center; gap: 12px; } .m3d-nav{ width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(10px); transition: transform .15s ease, background .15s ease, border-color .15s ease; } .m3d-nav:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,138,0,.28); } /* ===== Responsive: tablets -> 2 cards, mobile -> 1 card ===== */ @media (max-width: 1200px){ .m3d-track{ max-width: calc(340px * 2 + 22px * 1); /* 2 cards */ } } @media (max-width: 720px){ /* allow glow only, but don't clip cards */ .m3d{ overflow-x: clip; overflow-y: visible; } /* full-width track on phone (no centered "window") */ .m3d-track{ max-width: 100% !important; margin: 0 !important; /* 1-card viewport */ padding: 10px 4vw 14px !important; /* snap should respect the padding */ scroll-padding-left: 4vw !important; scroll-padding-right: 4vw !important; /* IMPORTANT: center snapping */ scroll-snap-type: x mandatory !important; } /* each card snaps to CENTER */ .m3d-card{ flex: 0 0 calc(100vw - 8vw) !important; /* screen width minus 4vw both sides */ max-width: calc(100vw - 8vw) !important; scroll-snap-align: center !important; /* βœ… fix */ scroll-snap-stop: always; } /* image height tuned for phone */ .m3d-media img{ height: 240px !important; } /* prevent any weird centering rules from desktop */ #m3dTrack{ justify-content: flex-start !important; } } /* Center cards when not overflowed (<=4 cards) */ #m3dTrack{ justify-content: center; /* default: center */ } /* If overflow (more than 4), align start for proper sliding */ #m3dTrack.is-overflow{ justify-content: flex-start; } /* ===== 3D card hover: blur + center zoom icon ===== */ /* make media the hover surface */ .m3d-media{ position: relative; } /* blur the image on hover */ .m3d-media img{ transition: filter .25s ease, transform .25s ease; } .m3d-card:hover .m3d-media img, .m3d-card:focus-visible .m3d-media img{ filter: blur(4px); transform: scale(1.03); } /* center zoom icon (hidden by default) */ .m3d-media::before{ content:""; position:absolute; left:50%; top:50%; width: 48px; height: 48px; transform: translate(-50%,-50%) scale(.92); opacity: 0; transition: opacity .22s ease, transform .22s ease; z-index: 5; border-radius: 999px; background: rgba(255, 0, 180, .92); /* your pink accent */ box-shadow: 0 18px 60px rgba(0,0,0,.45); } /* magnifier icon using SVG mask (clean look) */ .m3d-media::after{ content:""; position:absolute; left:50%; top:50%; width: 18px; height: 18px; transform: translate(-50%,-50%); opacity: 0; transition: opacity .22s ease; z-index: 6; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Zm0-2a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm6 2.5 5 5-1.5 1.5-5-5 1.5-1.5Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Zm0-2a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm6 2.5 5 5-1.5 1.5-5-5 1.5-1.5Z'/%3E%3C/svg%3E") center/contain no-repeat; } /* show icon on hover */ .m3d-card:hover .m3d-media::before, .m3d-card:focus-visible .m3d-media::before{ opacity: 1; transform: translate(-50%,-50%) scale(1); } .m3d-card:hover .m3d-media::after, .m3d-card:focus-visible .m3d-media::after{ opacity: 1; } /* make sure overlays/icons don't block click */ .m3d-overlay, .m3d-icons{ pointer-events: none; } /* ========================= 3D MODELS: PHONE ONLY FIX (smaller card + centered snap) ========================= */ @media (max-width: 560px){ /* give the track side padding so cards can center */ #m3dTrack.m3d-track{ padding-left: 18px !important; padding-right: 18px !important; scroll-padding-left: 18px !important; scroll-padding-right: 18px !important; } /* make card smaller so next card won't clip/overlap */ .m3d-card{ flex: 0 0 84vw !important; /* smaller than 92/86vw */ max-width: 84vw !important; scroll-snap-align: center !important; /* βœ… centers per swipe */ } /* keep image height balanced */ .m3d-media img{ height: 230px !important; } /* make the title row not cut */ .m3d-below{ justify-content: flex-start !important; padding-left: 2px !important; } } /* ========================= 3D MODELS β€” MOBILE FIT FIX (1 card per swipe, centered) ========================= */ @media (max-width: 720px){ /* reduce side padding para di masikip */ .m3d-wrap{ padding: 0 4% !important; } /* full-width track + snap center */ #m3dTrack.m3d-track{ max-width: 100% !important; margin: 0 !important; /* gutter sa left/right para sakto at di putol */ padding: 10px 4% 14px !important; justify-content: flex-start !important; /* snap feels better on phone */ scroll-snap-type: x mandatory !important; scroll-padding-left: 4% !important; scroll-padding-right: 4% !important; } /* make each card exactly "screen minus gutters" */ #m3dTrack .m3d-card{ flex: 0 0 calc(100% - 8%) !important; max-width: calc(100% - 8%) !important; scroll-snap-align: center !important; } /* image height balanced */ .m3d-media img{ height: 250px !important; } } /* ===== MOBILE: fix huge gap before Selected Works ===== */ @media (max-width: 560px){ /* tighten the section above works (common culprit) */ section + #artworks, #artworks{ scroll-margin-top: 90px; /* safe for sticky nav */ } /* reduce artworks section padding */ #artworks.works{ padding-top: 40px !important; padding-bottom: 46px !important; } /* if you have a wrapper adding spacing */ #artworks .works-wrap{ padding-top: 0 !important; margin-top: 0 !important; } /* reduce header spacing */ #artworks .works-head{ margin-top: 0 !important; padding-top: 0 !important; } #artworks .works-title{ margin-top: 0 !important; } /* if scroll-intro adds big min-height / margin */ #artworks.scroll-intro{ min-height: unset !important; } } /* ===== MOBILE GAP KILLER (works even if culprit is previous section) ===== */ @media (max-width: 560px){ /* common culprit: scroll-intro sections have big min-height/padding */ .scroll-intro{ min-height: 0 !important; padding-top: 42px !important; padding-bottom: 42px !important; } /* if you have any "section spacing" utility */ section{ padding-top: 42px !important; padding-bottom: 42px !important; } /* specifically tighten the space BEFORE Selected Works */ #artworks{ margin-top: 0 !important; padding-top: 38px !important; } /* reduce bottom spacing of the section right above artworks */ #artworks{ scroll-margin-top: 90px; } #artworks::before{ display:none !important; } /* this catches the actual previous sibling (when layouts are stacked) */ #artworks{ clear: both; } } .big-text-break{ padding: 80px 0 40px; text-align: center; } .big-text-inner{ max-width: 1200px; margin: 0 auto; padding: 0 6%; } .big-text-break img{ width: 100%; max-width: 1100px; height: auto; display: block; margin: 0 auto; } /* BIG TEXT BREAK β€” reveal */ .big-text-break{ position: relative; padding: 90px 0 40px; overflow: hidden; } .big-text-inner{ max-width: 1400px; margin: 0 auto; padding: 0 6%; display: flex; justify-content: center; } .big-text-break img{ width: 100%; max-width: 1400px; height: auto; display: block; opacity: 1; transform: translateY(0); } /* start hidden */ .big-text-break.scroll-intro{ opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity .9s ease, transform .9s ease, filter .9s ease; } /* visible */ .big-text-break.scroll-intro.is-visible{ opacity: 1; transform: translateY(0); filter: blur(0); } /* subtle glow behind (optional) */ .big-text-break::before{ display:none; } /* mobile spacing */ @media (max-width: 560px){ .big-text-break{ padding: 60px 0 30px; } .big-text-break.scroll-intro{ transform: translateY(28px); } } /* PASSION IS zoom-on-scroll */ .big-text-break{ position: relative; padding: 90px 0 40px; overflow: hidden; } .big-text-inner{ max-width: 1400px; margin: 0 auto; padding: 0 6%; display: flex; justify-content: center; } .zoom-img{ width: 100%; max-width: 1400px; height: auto; display: block; transform-origin: center center; will-change: transform, filter, opacity; transform: scale(0.90); } /* optional glow */ .big-text-break::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(700px 380px at 50% 55%, rgba(255,0,160,.10), transparent 72%); } @media (max-width: 560px){ .big-text-break{ padding: 60px 0 30px; } } /* ===== Artworks Reveal (stagger + blur) ===== */ .reveal{ opacity: 0; transform: translateY(26px) scale(.985); filter: blur(10px); transition: opacity .75s ease, transform .75s ease, filter .75s ease; transition-delay: var(--rv-delay, 0ms); will-change: transform, opacity, filter; } .reveal.is-inview{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } /* Optional: slightly punchier for tiles only */ .work-tile.reveal{ transition-duration: .85s; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .reveal{ transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } } /* Zoom-break vibe for artwork cards (JS will control transform/filter/opacity) */ .zoom-card img{ transform-origin: center center; will-change: transform, filter, opacity; } /* Works tiles: scroll-zoom (no conflict friendly) */ #artworks .work-tile{ transform: translate3d(0, var(--wY, 0px), 0) scale(var(--wS, 1)); filter: blur(var(--wB, 0px)); opacity: var(--wO, 1); will-change: transform, filter, opacity; transition: transform .42s cubic-bezier(.22,1,.36,1), filter .42s cubic-bezier(.22,1,.36,1), opacity .32s ease; transform-origin: center center; backface-visibility: hidden; } .zb-section{ transform: scale(var(--zbS, 1)); filter: blur(var(--zbB, 0px)); opacity: var(--zbO, 1); transform-origin: center; will-change: transform, filter, opacity; transition: none !important; /* crucial */ } /* ZB target behaves like zoom-img (NO lag) */ .zb-target{ transform-origin: center center; will-change: transform, filter, opacity; transition: none !important; transform: translateZ(0); } /* Mobile breathing room for zoom-break sections */ @media (max-width: 768px){ .zb-section{ padding-left: 18px; padding-right: 18px; } .zb-target{ border-radius: 18px; } /* optional, para clean */ } /* ========================= COLOR PALETTE (switch stack) - inherits your site font + sizes ========================= */ .pal{ position: relative; padding: 90px 0; } .pal-wrap{ position: relative; width: min(1200px, 100%); margin: 0 auto; padding: 0 6%; } /* Top (centered) */ .pal-top{ margin-bottom: 28px; text-align: center; } .pal-kicker{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; } .pal-rule{ margin: 14px auto 0; height: 1px; width: 120px; background: rgba(255,255,255,.14); border-radius: 99px; } /* Grid */ .pal-grid{ display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; } .pal-lead{ font-size: clamp(12px, 1.6vw, 5px); line-height: 1.35; color: rgba(255,255,255,.7); opacity: .92; } .pal-lead strong{ font-weight: 700; } @media (max-width: 520px){ #palette .pal-copy{ text-align: center; } #palette .pal-lead{ font-size: 13px; color: rgba(255,255,255,.65); text-align: center; max-width: 22ch; /* tighter width para mas clean */ line-height: 1.5; letter-spacing: .01em; } } /* Cards stage */ .pal-cards{ position: relative; width: min(520px, 100%); height: 360px; margin-left: auto; border-radius: 22px; isolation: isolate; } /* Card base */ .pal-card{ position: absolute; inset: 0; border-radius: 22px; overflow: hidden; cursor: pointer; user-select: none; box-shadow: 0 18px 55px rgba(0,0,0,.40), 0 2px 0 rgba(255,255,255,.06) inset; transform: translateZ(0); will-change: transform; transition: transform 560ms cubic-bezier(.2,.9,.2,1); } /* TOP row */ .pal-cardTop{ display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; font-size: 14px; /* same system feel */ } .pal-hex{ letter-spacing: .02em; } .pal-ico{ opacity: .65; font-size: 16px; } /* Big Aa */ .pal-aa{ position: absolute; right: 26px; bottom: 8px; font-family: inherit; /* force same font */ font-weight: 800; /* match strong headings */ letter-spacing: -0.03em; font-size: clamp(90px, 8vw, 130px); opacity: .92; } /* Skins */ .pal-card.is-pink{ background:#FA02AF; color:#111; } .pal-card.is-black{ background:#000; color:#fff; } .pal-card.is-white{ background:#fff; color:#111; } /* ------------------------- SWITCH STATES data-state="0": Pink front data-state="1": Black front data-state="2": White front ------------------------- */ /* positions (front / mid / back) */ .pal-cards{ --front-x: 40px; --mid-x: -60px; --back-x: 115px; --front-s: 1; --mid-s: .985; --back-s: 1; } /* state 0 (front: PINK) */ .pal-cards[data-state="0"] .is-pink{ transform: translateX(var(--front-x)) scale(var(--front-s)); z-index: 3; } .pal-cards[data-state="0"] .is-black{ transform: translateX(var(--mid-x)) scale(var(--mid-s)); z-index: 1; } .pal-cards[data-state="0"] .is-white{ transform: translateX(var(--back-x)) scale(var(--back-s)); z-index: 2; } /* state 1 (front: BLACK) */ .pal-cards[data-state="1"] .is-black{ transform: translateX(var(--front-x)) scale(var(--front-s)); z-index: 3; } .pal-cards[data-state="1"] .is-white{ transform: translateX(var(--mid-x)) scale(var(--mid-s)); z-index: 1; } .pal-cards[data-state="1"] .is-pink{ transform: translateX(var(--back-x)) scale(var(--back-s)); z-index: 2; } /* state 2 (front: WHITE) */ .pal-cards[data-state="2"] .is-white{ transform: translateX(var(--front-x)) scale(var(--front-s)); z-index: 3; } .pal-cards[data-state="2"] .is-pink{ transform: translateX(var(--mid-x)) scale(var(--mid-s)); z-index: 1; } .pal-cards[data-state="2"] .is-black{ transform: translateX(var(--back-x)) scale(var(--back-s)); z-index: 2; } /* Optional: slight β€œpeek” on hover (desktop only) */ @media (hover:hover){ .pal-cards:hover{ filter: drop-shadow(0 18px 45px rgba(0,0,0,.18)); } } /* Focus (keyboard) */ .pal-card:focus-visible{ outline: 2px solid rgba(255,255,255,.55); outline-offset: 6px; } /* Mobile layout */ @media (max-width: 860px){ .pal{ padding: 70px 0; } .pal-grid{ grid-template-columns: 1fr; gap: 22px; } .pal-cards{ margin: 0; height: 320px; } .pal-cards{ --front-x: 18px; --mid-x: -22px; --back-x: 58px; --mid-s: .985; } .pal-aa{ font-size: 128px; right: 22px; bottom: 10px; } } /* Palette title = same vibe as "Let's Work Together" */ .pal-title{ margin: 0; font-weight: 800; /* strong like your heading */ letter-spacing: -0.02em; /* tighter like big titles */ line-height: 1.05; font-size: clamp(25px, 4.2vw, 15px); /* match big heading scale */ } .pal-title span{ color: #FA02AF; /* same pink highlight */ } /* adjust rule to sit nicely under big heading */ .pal-rule{ margin: 16px auto 0; height: 1px; width: 120px; background: rgba(255,255,255,.14); border-radius: 99px; } /* keep centered */ .pal-top{ text-align: center; margin-bottom: 26px; } /* ========================= PALETTE: ULTRA COMPACT PHONE ========================= */ @media (max-width: 520px){ /* Section spacing */ #palette.pal{ padding: 44px 0; } /* Title size (match Capstone hierarchy) */ #palette .pal-title{ font-size: 20px; line-height: 1.1; letter-spacing: -0.01em; } #palette .pal-rule{ width: 70px; margin-top: 10px; } /* Sub text */ #palette .pal-lead{ font-size: 14px; line-height: 1.3; max-width: 24ch; margin: 0 auto; } /* Card stage smaller */ #palette .pal-cards{ height: 180px; /* mas maliit */ max-width: 360px; margin: 10px auto 0; } /* Card border radius smaller */ #palette .pal-card{ border-radius: 16px; } /* Top row smaller */ #palette .pal-cardTop{ padding: 10px 12px; font-size: 11.5px; } /* Aa much smaller */ #palette .pal-aa{ font-size: 68px; /* malaking difference */ right: 12px; bottom: 6px; letter-spacing: -0.02em; } /* Stack tighter */ #palette .pal-cards{ --front-x: 4px; --mid-x: -8px; --back-x: 14px; --mid-s: .995; } } html, body{ background:#000; overflow-x:hidden; } /* page layer above the reveal footer */ #pageWrap{ position: relative; z-index: 5; background:#000; /* solid para natatakpan footer */ min-height: 100vh; will-change: transform; overflow: visible; /* safe */ } /* inner scaling layer (if meron ka nito sa HTML) */ #pageInner{ --wrapScale: 1; transform: scale(var(--wrapScale)); transform-origin: 50% 100%; will-change: transform; } /* spacer = scroll room para mareveal footer */ #footerSpacer{ height: var(--footerH, 260px); } /* fixed image behind (hindi sumasabay sa scroll) */ #footerBrand{ position: fixed; left: 0; right: 0; bottom: 0; height: var(--footerH, 260px); z-index: 1; overflow: hidden; /* critical */ pointer-events: none; background:#000; --brandShadow: 0; /* 0..1 from JS */ --brandScale: 1; /* 1..1.02 from JS */ } /* image wrapper = zoom target */ #footerBrand .brandInner{ height: 100%; transform: scale(var(--brandScale)); transform-origin: 50% 100%; will-change: transform; } /* image itself stays normal (no double scaling) */ #footerBrand img{ width: 100%; height: 100%; display: block; object-fit: cover; } /* Telha-like shadow overlay (ONLY ONE) */ #footerBrand::before{ content:""; position:absolute; left:0; right:0; top:0; height: 1000px; /* adjust if needed */ pointer-events:none; z-index: 5; background: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.58) 40%, rgba(0,0,0,.18) 75%, rgba(0,0,0,0) 100% ), radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 78% ); opacity: var(--brandShadow); transition: opacity .06s linear; } /* keep image below overlay */ #footerBrand .brandInner, #footerBrand img{ position: relative; z-index: 1; } /* Lenis recommended */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ========================= MOBILE ONLY footer resize ========================= */ @media (max-width: 640px){ #footerSpacer{ height: 60px; } #footerBrand { height: 60px; } } @media (max-width: 640px){ /* bring content closer to footerBrand */ #contact{ padding-bottom: 10px !important; margin-bottom: 0 !important; } /* if your contact inner wrapper has extra spacing */ #contact .max-w-6xl, #contact .contactX__wrap, #contact .contactX{ padding-bottom: 0 !important; margin-bottom: 0 !important; } } #headerCallout{ position: fixed; top: 0; left: 0; right: 0; z-index: 999; } /* header itself must NOT be fixed */ #siteHeader{ position: relative !important; } /* ========================= Telha Premium Header Hide ========================= */ #siteHeader{ transition: opacity .38s ease, transform .42s cubic-bezier(.22,1,.36,1), filter .38s ease; will-change: opacity, transform, filter; } /* ===== Telha Premium hide (force) ===== */ #siteHeader.is-footer-hidden{ opacity: 0 !important; transform: translateY(-22px) !important; filter: blur(10px) !important; pointer-events: none !important; } @media (prefers-reduced-motion: reduce){ #siteHeader{ transition: none !important; } #siteHeader.is-footer-hidden{ filter: none !important; } } /* FLOATING COOKIE β€” FINAL VISUAL */ #cookieNotice.ck-wrap{ position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); width: min(680px, calc(100% - 32px)); opacity: 0; pointer-events: none; z-index: 999999; transition: all .4s ease; } #cookieNotice.ck-wrap.active{ opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* Card */ #cookieNotice .ck-card{ position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 25px 90px rgba(0,0,0,.6); } /* BACKGROUND IMAGE (FULLY VISIBLE) */ #cookieNotice .ck-bg{ position: absolute; inset: 0; background: url("/assets/images/cookie.jpg") center / cover no-repeat; opacity: 1; z-index: 0; filter: none; transform: none; } /* Subtle readable overlay */ #cookieNotice .ck-card::after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.45) 100% ); z-index:1; } /* Content */ #cookieNotice .ck-body{ position: relative; z-index: 2; padding: 22px 26px; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 30px; } #cookieNotice .ck-title{ font-family: inherit; /* uses same as site */ font-size: 14px; font-weight: 700; margin-bottom: 6px; } #cookieNotice .ck-text{ font-family: inherit; /* uses same as site */ font-size: 13px; opacity: .9; } #cookieNotice .ck-actions{ display: flex; gap: 12px; } #cookieNotice .ck-btn{ padding: 10px 16px; border-radius: 999px; font-size: 12px; cursor: pointer; border: none; transition: .25s ease; } #cookieNotice .ck-btn.primary{ background: #FA02AF; color: #fff; } #cookieNotice .ck-btn.ghost{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #fff; } #cookieNotice .ck-btn:hover{ transform: translateY(-2px); } /* ========================= COOKIE NOTICE β€” MOBILE FIX ========================= */ @media (max-width: 560px){ #cookieNotice.ck-wrap{ bottom: 14px !important; width: calc(100% - 20px) !important; } #cookieNotice .ck-body{ padding: 16px 16px !important; gap: 12px !important; flex-direction: column !important; align-items: stretch !important; } /* title + text block */ #cookieNotice .ck-title{ font-size: 15px !important; margin-bottom: 6px !important; text-align: left !important; } #cookieNotice .ck-text{ font-size: 12.5px !important; line-height: 1.5 !important; text-align: left !important; opacity: .88 !important; } /* buttons row */ #cookieNotice .ck-actions{ width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; justify-content: stretch !important; } #cookieNotice .ck-btn{ width: 100% !important; padding: 11px 14px !important; font-size: 12px !important; } } /* About side-slide uses translate (won't conflict with reveal transforms) */ .about2 .a2-card{ translate: 0 0; will-change: translate; } /* Capstone side-slide performance */ #capstone .cap-preview, #capstone .cap-content{ translate: 0 0; will-change: translate; } /* ============================= Welcome Loader (percentage pill) ============================= */ #welcomeLoader.welcome-loader{ display:inline-flex; align-items:center; gap:.65rem; padding:.78rem 1.1rem; border-radius:9999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); backdrop-filter: blur(10px); box-shadow: 0 18px 45px rgba(0,0,0,0.45); user-select:none; -webkit-tap-highlight-color: transparent; } #welcomeLoader .wl-text{ font-weight:800; letter-spacing:.02em; font-size:.85rem; opacity:.92; } #welcomeLoader .wl-pct{ font-weight:900; font-size:.85rem; color: var(--accent); letter-spacing:.02em; } body.welcome-locked #welcomeLoader{ pointer-events:none; } @media (prefers-reduced-motion: reduce){ #welcomeLoader.welcome-loader{ backdrop-filter:none; } } /* ========================= ABOUT2 β€” SERVICES GRID FIX (make it 3 columns like sample) ========================= */ .a2-services .a2-list{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 34px !important; row-gap: 12px !important; } .a2-services .a2-list li{ white-space: nowrap !important; /* para hindi putol-putol */ } /* Tablet */ @media (max-width: 980px){ .a2-services .a2-list{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Mobile */ @media (max-width: 560px){ .a2-services .a2-list{ grid-template-columns: 1fr !important; } } /* ============================= TABLET RESPONSIVE (641px–1024px) - Keeps desktop feel, but removes β€œtoo wide” spacing on iPad/tablet. - Footer brand sits close to the footer content (no black gap). ============================= */ @media (min-width: 641px) and (max-width: 1024px){ /* Footer content sits near bottom (like phone) */ footer#contact.site-footer{ min-height: 100vh; display: flex; flex-direction: column; } /* Make the footer layout fill the height, then push the bottom area down */ .site-footer .sf-inner{ width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Tighten bottom spacing (removes the last tiny gap) */ .site-footer .sf-bottom{ margin-top: 10px !important; padding-top: 6px !important; padding-bottom: 0 !important; } .site-footer .sf-bottom, .site-footer .sf-bottom *{ margin-bottom: 0 !important; } /* Key fix: keep brand reveal height small on wide tablet view */ :root{ --footerH: clamp(120px, 14vw, 180px) !important; } #footerSpacer{ height: var(--footerH) !important; } /* Nudge the pink brand up a bit to fully β€œkiss” the content */ #footerBrand{ height: var(--footerH) !important; margin-top: -18px !important; /* tweak: -10px to -28px if needed */ background: transparent !important; } #footerBrand img{ object-fit: contain !important; object-position: center bottom !important; } } /* ========================= STATEMENT HERO β€” TRUE CENTERED (PS MATCH) ========================= */ .ps-hero{ position: relative; width: 100%; background: radial-gradient(900px 520px at 18% 12%, rgba(250,2,175,.10), transparent 62%), radial-gradient(780px 520px at 78% 18%, rgba(250,2,175,.06), transparent 65%), linear-gradient(#090909, #090909) !important; padding: 0; overflow: hidden; } /* Move About glow to HERO */ .ps-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(1100px 420px at 50% 0%, rgba(255,255,255,.07), rgba(255,255,255,.03) 38%, transparent 70%), linear-gradient(to bottom, rgba(255,255,255,.025), transparent 58%); opacity:1; } /* ensure hero content stays above the glow */ .ps-hero__frame, .ps-hero__inner{ position: relative; z-index: 1; } /* remove glow from ABOUT section */ .about2{ background: linear-gradient(#090909, #090909) !important; } .about2:after{ background: none !important; opacity: 0 !important; } .ps-hero__inner{ position: relative; width: 1920px; /* lock to artboard width */ height: 880px; margin: 0 auto; /* THIS centers composition */ overflow: hidden; } /* BIG TYPO */ .ps-hero__line{ position: absolute; margin: 0; font-family: "Playfair Display", serif; font-style: italic; font-weight: 500; font-size: 210px; color: #ffffff; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.88; white-space: nowrap; } /* PASSION IS */ .ps-hero__line--1{ top: 40px; left: 70px; } /* WHAT MAKES */ .ps-hero__line--2{ top: 220px; left: 566px; } /* YOU MOVE */ .ps-hero__line--3{ bottom: 90px; left: 260px; } /* Pink bars */ .ps-hero__bar{ position: absolute; height: 30px; width: 110px; background: #FA02AF; } .ps-hero__bar--top{ top: 54%; left: calc(95% + 25px); transform: translateY(-50%); } .ps-hero__bar--bot{ bottom: 42%; left: 62%; } /* Tags */ .ps-hero__tags{ position: absolute; top: 55%; width: 100%; transform: translateY(-50%); } .ps-hero__tag{ position: absolute; font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #FA02AF; text-transform: uppercase; } /* Now perfectly spaced inside 1920 canvas */ .ps-hero__tag--l{ left: 270px; } .ps-hero__tag--r{ right: 270px; } /* ========================= PS HERO β€” SCROLL LIFT + ZOOM (reversible) ========================= */ .ps-hero__line{ will-change: transform, opacity, filter; transform-origin: center; backface-visibility: hidden; transform: translate3d(0, 20px, 0) scale(.92); opacity: 0; filter: blur(15px); } /* optional: mas smooth sa ilang GPUs */ .ps-hero__inner{ transform: translateZ(0); } /* ========================= PS HERO β€” KEEP ORIGINAL LOOK (no re-layout) Fix: too close to edges + slight scale down ========================= */ /* 1) Keep same layout, just add safe padding */ .ps-hero{ padding-top: clamp(10px, 3vh, 50px); padding-bottom: clamp(80px, 8vh, 140px); padding-left: clamp(24px, 4vw, 64px); padding-right: clamp(24px, 4vw, 64px); } /* 2) Limit max width para hindi sobrang sagad sa ultra-wide, pero hindi magiging β€œcentered poem” */ .ps-hero__inner{ max-width: 1800px; margin: 0 auto; } /* 3) Slightly smaller overall (original look pa rin) */ .ps-hero__line{ font-size: clamp(150px, 9.9vw, 250px); line-height: .99; } /* PS HERO β€” FOLD STACK (exit hero) */ .ps-hero__line{ will-change: transform, filter, opacity; transform-origin: center; } /* ========================= WORKS β€” CLEAN SEGMENTED TABS (PERFECT PILL) ========================= */ .works-tabbar{ --pad: 6px; position: relative; display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin: 14px auto 16px; padding: var(--pad); border-radius: 999px; overflow: hidden; background: rgba(20,20,20,.55); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .works-tabbar::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to bottom, rgba(255,255,255,.06), transparent 55%); } /* the moving pill */ .works-tabIndicator{ position:absolute; z-index:1; top: var(--pad); left: var(--pad); height: calc(100% - (var(--pad) * 2)); width: var(--tab-w, 140px); border-radius: 999px; box-sizing: border-box; background: rgba(35,35,35,.90); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); transform: translate3d(var(--tab-x, 0px), 0, 0); transition: transform .28s cubic-bezier(.2,.95,.2,1), width .28s cubic-bezier(.2,.95,.2,1); } /* tabs */ .works-tab{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; box-sizing: border-box; font: inherit; font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: rgba(255,255,255,.55); cursor: pointer; user-select:none; -webkit-tap-highlight-color: transparent; transition: color .18s ease, transform .12s ease; } .works-tab:hover{ color: rgba(255,255,255,.72); } .works-tab:active{ transform: scale(.98); } .works-tab.is-active{ color: rgba(255,255,255,.92); } @media (max-width: 768px){ .works-tabbar{ width: 100%; max-width: 520px; justify-content: center; margin: 12px auto 14px; } .works-tab{ flex: 1; height: 34px; padding: 0 10px; font-size: 11px; letter-spacing: .12em; } } /* ========================= CLIENT DESIGN VIEWER (LIGHTBOX) ========================= */ #designViewer{ position: fixed; inset: 0; z-index: 9999; display: block; background: rgba(0,0,0,.92); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; } #designViewer.is-open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease, visibility 0s linear 0s; } #designViewer .dv-top{ position: absolute; left: 0; right: 0; top: 0; padding: 14px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } #designViewer .dv-title{ color: rgba(255,255,255,.90); font-weight: 700; font-size: 14px; letter-spacing: .2px; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #designViewer .dv-close{ border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); border-radius: 999px; padding: 10px 12px; cursor: pointer; } #designViewer .dv-main{ position: absolute; inset: 60px 12px 92px; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: pan-y; } #designViewer .dv-img{ max-width: 96vw; max-height: 72vh; object-fit: contain; border-radius: 18px; box-shadow: 0 18px 70px rgba(0,0,0,.45); } #designViewer .dv-nav{ position: absolute; inset: 60px 12px 92px; pointer-events: none; } #designViewer .dv-btn{ pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: rgba(255,255,255,.95); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; } #designViewer .dv-prev{ left: 6px; } #designViewer .dv-next{ right: 6px; } #designViewer .dv-strip{ position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 10px 14px; display: flex; gap: 10px; overflow: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to top, rgba(0,0,0,.70), rgba(0,0,0,0)); } #designViewer .dv-thumb{ flex: 0 0 auto; width: 62px; height: 62px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); cursor: pointer; opacity: .75; transform: translateZ(0); } #designViewer .dv-thumb.is-active{ opacity: 1; border-color: rgba(255,138,0,.75); } #designViewer .dv-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 768px){ #designViewer .dv-img{ max-height: 68vh; } #designViewer .dv-btn{ display: none; } } /* ========================= CLIENT DESIGN KITS β€” MATCH ARTWORK CARD EDGES ========================= */ /* same tile shape feel */ #clientGrid .client-shirt-tile{ position: relative; overflow: hidden; border-radius: 28px; /* adjust if your artworks use slightly different radius */ isolation: isolate; background: transparent; } /* make inner wrapper follow same rounding */ #clientGrid .client-shirt-tile .work-imgWrap{ position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } /* both images fill card and keep same soft corners */ #clientGrid .client-shirt-tile .work-img, #clientGrid .client-shirt-tile .work-img--main, #clientGrid .client-shirt-tile .work-img--hover{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; transition: transform .45s cubic-bezier(.22,1,.36,1), filter .45s cubic-bezier(.22,1,.36,1), opacity .38s ease; backface-visibility: hidden; will-change: transform, filter, opacity; } /* base state */ #clientGrid .client-shirt-tile .work-img--main{ z-index: 1; opacity: 1; transform: scale(1); filter: blur(0) brightness(1); } #clientGrid .client-shirt-tile .work-img--hover{ z-index: 2; opacity: 0; transform: scale(1.045); filter: blur(6px) brightness(1); pointer-events: none; } /* kapag may naka-hover sa grid: lahat ng NON-hovered cards mag blur + zoom out */ #clientGrid:hover .client-shirt-tile .work-img--main{ filter: blur(3px) brightness(.68); transform: scale(.985); } #clientGrid:hover .client-shirt-tile .work-img--hover{ opacity: 0; } /* hovered tile: ibalik sa clear at normal */ #clientGrid .client-shirt-tile:hover .work-img--main, #clientGrid .client-shirt-tile:focus-visible .work-img--main{ opacity: 0; filter: blur(6px) brightness(1) !important; transform: scale(1.03) !important; } /* hovered tile: show 2nd image, clear, slight zoom-out into place */ #clientGrid .client-shirt-tile:hover .work-img--hover, #clientGrid .client-shirt-tile:focus-visible .work-img--hover{ opacity: 1 !important; filter: blur(0) brightness(1) !important; transform: scale(1) !important; } /* overlay follows same rounded edge */ #clientGrid .client-shirt-tile .work-overlay{ position: absolute; inset: 0; z-index: 3; border-radius: inherit; overflow: hidden; } /* touch devices */ @media (hover: none){ #clientGrid .client-shirt-tile .work-img--main{ opacity: 1 !important; transform: none !important; filter: none !important; } #clientGrid .client-shirt-tile .work-img--hover{ opacity: 0 !important; transform: none !important; filter: none !important; } } @keyframes worksSlideInR { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } } @keyframes worksSlideOutL { from { opacity:1; transform: translateX(0); } to { opacity:0; transform: translateX(-20px); } } @keyframes worksSlideInL { from { opacity:0; transform: translateX(-20px); } to { opacity:1; transform: translateX(0); } } @keyframes worksSlideOutR { from { opacity:1; transform: translateX(0); } to { opacity:0; transform: translateX(20px); } } .works-lenis-in-right{ animation: worksSlideInR .32s ease both; } .works-lenis-out-left{ animation: worksSlideOutL .28s ease both; } .works-lenis-in-left{ animation: worksSlideInL .32s ease both; } .works-lenis-out-right{ animation: worksSlideOutR .28s ease both; } .works-panel{ will-change: transform, opacity; } .works-tabbar.is-switching .works-tab{ pointer-events: none; } /* Header scroll progress line */ .header-progress { position: absolute; left: 0; top: 0; width: 100%; height: 2px; pointer-events: none; overflow: visible; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); border-radius: 999px; } .header-progress__bar { position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; transform-origin: left center; transform: scaleX(0); opacity: 0; background: linear-gradient( 90deg, #ff1f8f 0%, #ff4fa3 20%, #ff7ac3 45%, #FA02AF 60%, #FA02AF 80%, #FA02AF 100% ); background-size: 240% 100%; animation: bolimProgressFlow 3s linear infinite, bolimPulse 1.8s ease-in-out infinite; box-shadow: 0 0 10px rgba(255, 31, 143, 0.70), 0 0 18px rgba(255, 79, 163, 0.60), 0 0 32px rgba(255, 79, 163, 0.50), 0 0 54px rgba(255, 122, 195, 0.40), 0 0 82px rgba(255, 122, 195, 0.28); transition: opacity 0.18s ease; will-change: transform, opacity, background-position, filter, box-shadow; } .header-progress__bar::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.20) 25%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.20) 75%, transparent 100% ); background-size: 180% 100%; animation: bolimShine 1.9s linear infinite; mix-blend-mode: screen; filter: blur(1px); pointer-events: none; } @keyframes bolimProgressFlow { from { background-position: 0% 50%; } to { background-position: 240% 50%; } } @keyframes bolimShine { from { background-position: -140% 50%; } to { background-position: 180% 50%; } } @keyframes bolimPulse { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.35) saturate(1.2); } } ::selection { background: #FA02AF; color: #fff; } ::-moz-selection { background: #FA02AF; color: #fff; } .work-tile.is-hidden{ display: none !important; } /* ========================= ARTWORK ROW-WAVE + SAFE CLICK ========================= */ #worksGrid .work-overlay, #worksGrid .work-cap, #worksGrid .work-capBtn, #worksGrid .work-tile::before, #worksGrid .work-tile::after{ pointer-events: none; } #worksGrid .work-tile{ --wave-y: 0px; --wave-s: 1; --wave-r: 0deg; --wave-o: 1; } #worksGrid .work-tile.wave-animating{ transform: translate3d(0, var(--wave-y), 0) scale(var(--wave-s)) rotateZ(var(--wave-r)); opacity: var(--wave-o); will-change: transform, opacity, filter; transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease, filter .8s cubic-bezier(.16,1,.3,1); } /* ========================= PS HERO β€” PHONE UI FIX centered + smaller + readable ========================= */ @media (max-width: 640px){ .ps-hero{ padding: calc(var(--headerH, 84px) + 6px) 16px 24px; min-height: 100svh; overflow: hidden; display: flex; align-items: center; } .ps-hero__frame{ width: 100%; } .ps-hero__inner{ width: 100%; max-width: 100%; height: auto; min-height: calc(100svh - var(--headerH, 84px) - 30px); margin: 0 auto; overflow: visible; position: relative; transform: translateY(-36px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; } .ps-hero__line{ position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; margin: 0 auto; padding-inline: 20px; text-align: center; white-space: nowrap; box-sizing: border-box; font-size: clamp(36px, 11.6vw, 54px); line-height: .94; letter-spacing: -.04em; } .ps-hero__line em, .ps-hero__line span, .ps-hero__line strong{ max-width: 100%; } .ps-hero__line--1, .ps-hero__line--2, .ps-hero__line--3{ left: auto; right: auto; top: auto; bottom: auto; } .ps-hero__bar{ position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 8px; margin-left: 0; } .ps-hero__bar--top, .ps-hero__bar--bot{ left: auto; bottom: auto; } .ps-hero__tags{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; } .ps-hero__tag{ position: absolute; left: 0; right: 0; width: max-content; margin-inline: auto; transform: none; font-size: 10px; letter-spacing: .18em; text-align: center; white-space: nowrap; } .ps-hero__tag--l{ top: 50%; bottom: auto; } .ps-hero__tag--r{ bottom: -44%; top: auto; } .ps-hero__bar--top{ right: 60px; } .ps-hero__bar--bot{ right: 142px; } } @media (max-width: 390px){ .ps-hero__tag{ font-size: 9px; letter-spacing: .15em; } .ps-hero__tag--l{ top: 50%; bottom: auto; } .ps-hero__tag--r{ bottom: -100%; top: auto; } .ps-hero__line{ padding-inline: 16px; font-size: clamp(31px, 10.6vw, 44px); } .ps-hero__bar{ width: 24px; height: 7px; margin-left: 6px; } } /* ========================= TABLET UI β€” FULL FIX hero + spacing ========================= */ @media (min-width: 768px) and (max-width: 1024px){ /* HERO β€” tablet same feel as phone */ /* HERO β€” tablet same feel as phone */ .ps-hero{ padding: calc(var(--headerH, 84px) + 8px) 28px 8px; min-height: 100svh; overflow: hidden; display: flex; align-items: center; } .ps-hero__frame{ width: 100%; } .ps-hero__inner{ width: 100%; max-width: 100%; min-height: calc(100svh - var(--headerH, 84px) - 16px); margin: 0 auto; overflow: visible; position: relative; transform: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; } .ps-hero__line{ position: relative; left: auto; right: auto; top: auto; bottom: auto; width: fit-content; max-width: 100%; margin-inline: auto; padding-inline: 0; text-align: center; white-space: nowrap; box-sizing: border-box; font-size: clamp(120px, 9.9vw, 180px); line-height: .9; letter-spacing: -.045em; } .ps-hero__line > span{ display: inline-block; } .ps-hero__line--1, .ps-hero__line--2, .ps-hero__line--3{ left: auto; right: auto; top: auto; bottom: auto; } .ps-hero__bar{ position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 10px; margin-left: 0; } .ps-hero__bar--top{ right: -48px; } .ps-hero__bar--bot{ right: -48px; } .ps-hero__tags{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; z-index: 3; } .ps-hero__tag{ position: absolute; left: 0; right: 0; width: max-content; margin-inline: auto; transform: none; font-size: 11px; letter-spacing: .22em; text-align: center; white-space: nowrap; } .ps-hero__tag--l{ top: 45%; bottom: auto; } .ps-hero__tag--r{ bottom: -38%; top: auto; } /* ABOUT */ .desktop-about{ min-height: auto !important; height: auto !important; padding-top: 8px !important; padding-bottom: 0 !important; } #about{ margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #about > .max-w-6xl{ padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } #about .grid, #about .desktop-about__grid, #about .desktop-about__content, #about .desktop-about__cards{ margin-bottom: 0 !important; padding-bottom: 0 !important; } .about-tabs{ margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #aboutTabs{ margin-top: 0 !important; margin-bottom: 0 !important; gap: 12px !important; } .about-collapsible, #spousePanel{ margin-top: 8px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } #about .desktop-about__card:last-child, #about .about-card:last-child, #about .card:last-child, #about .about-collapsible:last-child, #about .desktop-about__content > *:last-child{ margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ARTWORKS */ #artworks{ margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 48px !important; } .desktop-about + section{ margin-top: 0 !important; } /* CONTACT */ #contact{ min-height: auto !important; padding-top: 28px !important; padding-bottom: 28px !important; position: relative; } #contact .max-w-6xl, #contact .mx-auto{ padding-top: 0 !important; padding-bottom: 0 !important; } section{ scroll-margin-top: 92px; } } /* ========================= ARTWORKS β€” CURSOR TRACK SECTION buong section/panel ang sumusunod sa cursor ========================= */ #artworks{ --ax: 0px; --ay: 0px; --gx: 0px; --gy: 0px; } #artworks .works-wrap{ perspective: 1600px; transform-style: preserve-3d; } #artworks .works-head, #artworks .works-tabbar, #artworks .works-actions{ transform: translate3d(calc(var(--ax) * .22), calc(var(--ay) * .22), 0); transition: transform .18s linear; will-change: transform; } #artworks .works-panel{ transform: translate3d(var(--ax), var(--ay), 0) rotateX(calc(var(--ay) * -0.06)) rotateY(calc(var(--ax) * 0.06)); transform-style: preserve-3d; transition: transform .18s linear; will-change: transform; } #artworks .works-grid{ transform: translate3d(calc(var(--gx) * .35), calc(var(--gy) * .35), 0); transition: transform .18s linear; will-change: transform; } /* image-only parallax para hindi sumasapaw sa current tile transform mo */ #artworks .work-img{ transform: translate3d(calc(var(--gx) * -.22), calc(var(--gy) * -.22), 0) scale(1.02); transition: transform .18s linear, filter .45s ease, opacity .45s ease; will-change: transform, filter, opacity; } /* hover state mo, retain pa rin */ #artworks .work-tile:hover .work-img, #artworks .work-tile:focus-visible .work-img{ transform: translate3d(calc(var(--gx) * -.22), calc(var(--gy) * -.22), 0) scale(1.08) !important; } #artworks.is-cursor-active .works-head, #artworks.is-cursor-active .works-tabbar, #artworks.is-cursor-active .works-actions, #artworks.is-cursor-active .works-panel, #artworks.is-cursor-active .works-grid, #artworks.is-cursor-active .work-img{ transition-duration: .08s; } @media (hover: none), (pointer: coarse){ #artworks .works-head, #artworks .works-tabbar, #artworks .works-actions, #artworks .works-panel, #artworks .works-grid, #artworks .work-img{ transform: none !important; } } /* ========================= WORK CARDS β€” SMOOTH BLUR FADE ========================= */ /* default smooth transition */ #artworks .work-img, #artworks .work-img--main, #artworks .work-img--hover{ transition: transform .45s cubic-bezier(.22,1,.36,1), filter .45s cubic-bezier(.22,1,.36,1), opacity .45s cubic-bezier(.22,1,.36,1) !important; will-change: transform, filter, opacity; backface-visibility: hidden; } /* optional: start state */ #artworks .work-img, #artworks .work-img--main{ filter: blur(0px); } /* kapag hover/focus saka lang mag blur nang smooth */ #artworks .work-tile:hover .work-img, #artworks .work-tile:focus-visible .work-img, #artworks .client-shirt-tile:hover .work-img--main, #artworks .client-shirt-tile:focus-visible .work-img--main{ filter: blur(2px); } /* hover image ng client cards smooth din ang pasok */ #artworks .client-shirt-tile .work-img--hover{ opacity: 0; filter: blur(6px); } #artworks .client-shirt-tile:hover .work-img--hover, #artworks .client-shirt-tile:focus-visible .work-img--hover{ opacity: 1; filter: blur(0px); } /* ========================= ARTWORKS β€” HOVER FOCUS + SURROUNDING BLUR/ZOOM OUT ========================= */ #artworks .work-img, #artworks .work-img--main, #artworks .work-img--hover{ transition: transform .42s cubic-bezier(.22,1,.36,1), filter .42s cubic-bezier(.22,1,.36,1), opacity .42s cubic-bezier(.22,1,.36,1) !important; will-change: transform, filter, opacity; backface-visibility: hidden; filter: blur(0px); transform: scale(1); } #artworks .work-tile{ transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1); } /* lahat ng nasa paligid pag may hover sa grid */ #artworks .works-grid:hover .work-tile .work-img, #artworks .works-grid:hover .client-shirt-tile .work-img--main{ filter: blur(2.4px); transform: scale(.94); } #artworks .works-grid:hover .work-tile{ opacity: .76; } /* yung mismong hovered card = zoom in + clear */ #artworks .works-grid .work-tile:hover .work-img, #artworks .works-grid .work-tile:focus-visible .work-img, #artworks .works-grid .client-shirt-tile:hover .work-img--main, #artworks .works-grid .client-shirt-tile:focus-visible .work-img--main{ filter: blur(0px) !important; transform: scale(1.06) !important; } #artworks .works-grid .work-tile:hover, #artworks .works-grid .work-tile:focus-visible{ opacity: 1 !important; z-index: 3; } /* client secondary hover image */ #artworks .client-shirt-tile .work-img--hover{ opacity: 0; filter: blur(6px); transform: scale(.98); transition: opacity .42s cubic-bezier(.22,1,.36,1), filter .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1) !important; } #artworks .works-grid:hover .work-tile .work-img, #artworks .works-grid:hover .client-shirt-tile .work-img--main{ filter: blur(1.8px); transform: scale(.975); } #artworks .works-grid .work-tile:hover .work-img, #artworks .works-grid .work-tile:focus-visible .work-img, #artworks .works-grid .client-shirt-tile:hover .work-img--main, #artworks .works-grid .client-shirt-tile:focus-visible .work-img--main{ filter: blur(0px) !important; transform: scale(1.025) !important; } /* ===== Social buttons ===== */ .sf-socialBtn{ width: 42px; height: 42px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: #fff; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; } .sf-socialBtn:hover{ transform: translateY(-2px); } /* keep white icon by default */ .sf-iconWhite{ color: currentColor; } /* Behance true hover color */ .sf-socialBtn--behance:hover{ background: #1769FF; border-color: #1769FF; color: #ffffff; box-shadow: 0 10px 28px rgba(23,105,255,.35); } /* ========================= SEND MESSAGE β€” click burst ========================= */ .site-footer .sf-submit{ position: relative; overflow: hidden; isolation: isolate; } .site-footer .sf-submit .sf-submit__label{ position: relative; z-index: 3; display: inline-block; transition: opacity .28s ease, transform .42s cubic-bezier(.01,1.69,.99,.94), letter-spacing .22s ease; } .site-footer .sf-submit .sf-burst{ position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 999px; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; opacity: 0; transition: width .72s ease, height .72s ease, opacity .22s ease; } .site-footer .sf-submit .sf-burst--blue{ background: #1769ff; /* Behance blue vibe */ transition-delay: .00s; } .site-footer .sf-submit .sf-burst--pink{ background: #fa02af; /* brand pink */ transition-delay: .10s; } .site-footer .sf-submit .sf-burst--white{ background: rgba(255,255,255,.92); transition-delay: .20s; } /* hover */ .site-footer .sf-submit:hover{ transform: translateY(-1px); box-shadow: 0 18px 50px rgba(0,0,0,.38); } .site-footer .sf-submit:hover .sf-submit__label{ letter-spacing: .03em; } /* clicked state */ .site-footer .sf-submit.is-bursting{ color: transparent; } .site-footer .sf-submit.is-bursting .sf-submit__label{ opacity: 0; transform: scale(.82); } .site-footer .sf-submit.is-bursting .sf-burst{ width: 240%; height: 240%; opacity: 1; } /* sending state para hindi paulit-ulit habang request */ .site-footer .sf-submit.is-sending{ pointer-events: none; } @media (prefers-reduced-motion: reduce){ .site-footer .sf-submit, .site-footer .sf-submit .sf-submit__label, .site-footer .sf-submit .sf-burst{ transition: none !important; } } /* ========================= SEND SUCCESS BURST CodePen-style expand/contract ========================= */ .mail-burst{ position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 99999; --burst-x: 50vw; --burst-y: 50vh; } .mail-color{ position: fixed; left: var(--burst-x); top: var(--burst-y); width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; } .mail-color--pink{ background: #FA02AF; z-index: 1; } .mail-color--white{ background: #ffffff; z-index: 2; } /* expand */ .mail-burst.is-expanded .mail-color{ opacity: 1; } .mail-burst.is-expanded .mail-color--pink{ width: 120vmax; height: 120vmax; transition: width 1.05s cubic-bezier(0.22, 0.61, 0.36, 1), height 1.05s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease; } .mail-burst.is-expanded .mail-color--white{ width: 230vmax; height: 230vmax; transition: width 1.45s cubic-bezier(0.16, 0.84, 0.28, 1), height 1.45s cubic-bezier(0.16, 0.84, 0.28, 1), opacity 0.18s ease; transition-delay: 0.14s; } /* contract back */ .mail-burst.is-contracting .mail-color{ opacity: 1; } .mail-burst.is-contracting .mail-color--pink{ width: 24px; height: 24px; opacity: 1; transition: width 1.15s cubic-bezier(0.22, 0.61, 0.36, 1), height 1.15s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease 1s; } .mail-burst.is-contracting .mail-color--white{ width: 24px; height: 24px; opacity: 1; transition: width 1.3s cubic-bezier(0.22, 0.61, 0.36, 1), height 1.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease 1.08s; } .mail-burst.is-contracting .mail-color--pink, .mail-burst.is-contracting .mail-color--white{ transform: translate(-50%, -50%); } .mail-burst:not(.is-expanded):not(.is-contracting) .mail-color{ width: 0; height: 0; opacity: 0; } /* button polish habang success anim */ .site-footer .sf-submit{ position: relative; overflow: hidden; } .site-footer .sf-submit.sf-submit--clicked{ transition: 0.6s cubic-bezier(0.01, 1.69, 0.99, 0.94); transform: scaleX(.16); color: transparent; } .site-footer .sf-submit .sf-submit__label{ transition: opacity .35s ease, transform .6s cubic-bezier(0.01, 1.69, 0.99, 0.94); } .site-footer .sf-submit.sf-submit--clicked .sf-submit__label{ opacity: 0; transform: scale(.8); } @media (prefers-reduced-motion: reduce){ .mail-color, .site-footer .sf-submit, .site-footer .sf-submit .sf-submit__label{ transition: none !important; } } /* layer order */ .mail-color--pink-1{ z-index: 1; } .mail-color--white-1{ z-index: 2; } .mail-color--pink-2{ z-index: 3; } .mail-color--white-2{ z-index: 4; } /* EXPAND */ .mail-burst.is-expanded .mail-color{ opacity: 1; } .mail-burst.is-expanded .mail-color--pink-1{ width: 90vmax; height: 90vmax; transition: width 0.95s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.95s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease; } .mail-burst.is-expanded .mail-color--white-1{ width: 140vmax; height: 140vmax; transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), height 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease; transition-delay: 0.08s; } .mail-burst.is-expanded .mail-color--pink-2{ width: 185vmax; height: 185vmax; transition: width 1.28s cubic-bezier(0.22, 0.61, 0.36, 1), height 1.28s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s ease; transition-delay: 0.16s; } .mail-burst.is-expanded .mail-color--white-2{ width: 235vmax; height: 235vmax; transition: width 1.46s cubic-bezier(0.16, 0.84, 0.28, 1), height 1.46s cubic-bezier(0.16, 0.84, 0.28, 1), opacity 0.18s ease; transition-delay: 0.24s; } /* CONTRACT */ .mail-burst.is-contracting .mail-color{ opacity: 1; } .mail-burst.is-contracting .mail-color--pink-1, .mail-burst.is-contracting .mail-color--pink-2{ width: var(--burst-end-size, 24px); height: var(--burst-end-size, 24px); transition: width 1.05s cubic-bezier(0.22, 0.61, 0.36, 1), height 1.05s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.26s ease 0.92s; } .mail-burst.is-contracting .mail-color--white-1, .mail-burst.is-contracting .mail-color--white-2{ width: var(--burst-end-size, 24px); height: var(--burst-end-size, 24px); transition: width 1.18s cubic-bezier(0.22, 0.61, 0.36, 1), height 1.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease 1s; } .mail-burst.is-contracting .mail-color--pink-1, .mail-burst.is-contracting .mail-color--white-1, .mail-burst.is-contracting .mail-color--pink-2, .mail-burst.is-contracting .mail-color--white-2{ transform: translate(-50%, -50%); } /* reset */ .mail-burst:not(.is-expanded):not(.is-contracting) .mail-color{ width: 0; height: 0; opacity: 0; } /* ========================= CAPSTONE CTA BUTTON cinematic glow sweep ========================= */ .cap-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; padding: 16px 28px; border-radius: 18px; background: linear-gradient(135deg, #2f7cff 0%, #3f8cff 100%); color: #fff; text-decoration: none; font-weight: 700; letter-spacing: -0.02em; box-shadow: 0 10px 30px rgba(47, 124, 255, 0.24), 0 0 0 1px rgba(255,255,255,0.06) inset; transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s cubic-bezier(.22,.61,.36,1), filter .38s cubic-bezier(.22,.61,.36,1), background .38s ease; } .cap-btn::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.18), transparent 34%); opacity: 0; transition: opacity .4s ease; z-index: 0; } .cap-btn::after{ content: ""; position: absolute; top: -120%; left: -40%; width: 46%; height: 340%; transform: rotate(22deg) translateX(0); background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 45%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.14) 55%, rgba(255,255,255,0) 100% ); transition: transform .9s cubic-bezier(.22,.61,.36,1); z-index: 1; pointer-events: none; } .cap-btn:hover{ transform: translateY(-3px) scale(1.015); background: linear-gradient(135deg, #2f7cff 0%, #5a8dff 100%); box-shadow: 0 18px 44px rgba(47, 124, 255, 0.28), 0 0 28px rgba(250, 2, 175, 0.14), 0 0 0 1px rgba(255,255,255,0.08) inset; filter: saturate(1.08); } .cap-btn:hover::before{ opacity: 1; } .cap-btn:hover::after{ transform: rotate(22deg) translateX(340%); } .cap-btn:active{ transform: translateY(-1px) scale(.985); } .cap-btn:focus-visible{ outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.16), 0 0 0 5px rgba(250, 2, 175, 0.22), 0 10px 30px rgba(47, 124, 255, 0.24); } /* ========================= STATUS MESSAGE ANIMATION ========================= */ .sf-status{ display: none; overflow: hidden; box-sizing: border-box; max-height: 0; opacity: 0; transform: translateY(-10px); filter: blur(4px); margin-bottom: 0; padding-top: 0; padding-bottom: 0; padding-left: 16px; padding-right: 16px; border-radius: 14px; transition: max-height .55s cubic-bezier(.22,.61,.36,1), opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1), filter .42s cubic-bezier(.22,.61,.36,1), margin-bottom .55s cubic-bezier(.22,.61,.36,1), padding-top .55s cubic-bezier(.22,.61,.36,1), padding-bottom .55s cubic-bezier(.22,.61,.36,1); } .sf-status.is-visible{ max-height: 92px; /* taasan kung gusto mo mas boxy */ opacity: 1; transform: translateY(0); filter: blur(0); margin-bottom: 18px; padding-top: 14px; /* dagdag vertical space */ padding-bottom: 14px; /* dagdag vertical space */ } .sf-status.is-hiding{ max-height: 0; opacity: 0; transform: translateY(-6px); filter: blur(4px); margin-bottom: 0; padding-top: 0; padding-bottom: 0; } /* ========================= FOOTER POLICY FLOAT CARDS ========================= */ .sf-policies{ margin-top: 20px; padding-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: rgba(255,255,255,.55); font-size: 12px; } .sf-policyItem{ position: relative; display: inline-flex; align-items: center; } .sf-policyLink{ appearance: none; border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; color: rgba(255,255,255,.55); text-decoration: none; font: inherit; line-height: 1; transition: color .22s ease, transform .22s ease; } .sf-policyLink:hover{ color: var(--accent, #FA02AF); transform: translateY(-1px); } .sf-policySep{ opacity: .35; } .sf-policyFloat{ position: absolute; left: 50%; bottom: calc(100% + 16px); width: min(360px, 78vw); pointer-events: none; z-index: 9999; opacity: 0; visibility: hidden; transform: translate3d(-50%, 14px, 0) scale(.965); filter: blur(8px); transition: opacity .28s cubic-bezier(.22,.61,.36,1), transform .34s cubic-bezier(.22,.61,.36,1), filter .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s; } .sf-policyItem.is-active .sf-policyFloat{ opacity: 1; visibility: visible; transform: translate3d(-50%, 0, 0) scale(1); filter: blur(0); pointer-events: auto; /* βœ… para pag nasa tooltip ka, hindi siya biglang mawawala */ z-index: 9999; /* βœ… para hindi mataklob ng ibang layers */ transition: opacity .24s cubic-bezier(.22,.61,.36,1), transform .34s cubic-bezier(.22,.61,.36,1), filter .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s; } .sf-policyFloat__inner{ position: relative; border-radius: 18px; padding: 16px 16px 14px; background: linear-gradient(180deg, rgba(14,18,28,.96), rgba(7,10,16,.96)); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 60px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 34px rgba(250,2,175,.08); transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .16s ease-out; backdrop-filter: blur(12px); } .sf-policyFloat__inner::after{ content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: rgba(10,12,18,.96); border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); transform: translateX(-50%) rotate(45deg); } .sf-policyFloat__title{ margin: 0 0 10px; font-size: 13px; font-weight: 800; color: #fff; letter-spacing: .02em; } .sf-policyFloat__list{ margin: 0; padding-left: 18px; list-style: disc; list-style-position: outside; color: rgba(255,255,255,.74); font-size: 12px; line-height: 1.6; } .sf-policyFloat__list li{ display: list-item; } .sf-policyFloat__list li + li{ margin-top: 6px; } @media (max-width: 767px){ .sf-policyFloat{ width: min(320px, 86vw); bottom: calc(100% + 12px); } } /* ========================= POLICY FLOAT β€” TOUCH UI ========================= */ @media (max-width: 1024px){ .sf-policies{ justify-content: center; row-gap: 12px; } .sf-policyItem{ position: relative; } .sf-policyFloat{ width: min(340px, 88vw); bottom: calc(100% + 10px); } .sf-policyFloat__inner{ padding: 14px 14px 12px; border-radius: 16px; } .sf-policyFloat__title{ font-size: 12px; } .sf-policyFloat__list{ font-size: 11px; line-height: 1.55; padding-left: 16px; } } @media (max-width: 767px){ .sf-policies{ gap: 8px; } .sf-policySep{ display: none; } .sf-policyItem{ width: 100%; display: flex; justify-content: center; } .sf-policyLink{ font-size: 12px; } .sf-policyFloat{ left: 50%; width: min(320px, 90vw); bottom: calc(100% + 12px); } .sf-policyFloat__inner{ padding: 14px 14px 12px; border-radius: 15px; } .sf-policyFloat__title{ font-size: 12px; margin-bottom: 8px; } .sf-policyFloat__list{ font-size: 11px; line-height: 1.5; } } @media (max-width: 767px){ .sf-policies{ width: 100%; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 6px; margin-top: 14px; padding-top: 0; } .sf-policyItem{ width: 100%; display: block; } .sf-policyLink{ display: inline-block; font-size: 12px; line-height: 1.45; } } /* ========================= FLOAT BTN β€” cinematic pink expand ========================= */ #toTopBtn{ position: fixed; right: 22px; bottom: 22px; height: 58px; width: 58px; border: 0; border-radius: 999px; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 16px 0 18px; overflow: hidden; white-space: nowrap; isolation: isolate; background: #FA02AF; color: #fff; box-shadow: 0 16px 34px rgba(250, 2, 175, 0.30), 0 0 0 1px rgba(255,255,255,.06) inset; opacity: 0; pointer-events: none; transform: translateY(12px) scale(.96); transition: width .58s cubic-bezier(.19,1,.22,1), transform .42s cubic-bezier(.19,1,.22,1), opacity .30s ease, box-shadow .42s cubic-bezier(.19,1,.22,1), filter .42s cubic-bezier(.19,1,.22,1); } #toTopBtn.show{ opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } /* dark inner base para premium */ #toTopBtn::before{ content: ""; position: absolute; inset: 2px; border-radius: inherit; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(250, 2, 175, .92); z-index: 0; } /* cinematic light sweep */ #toTopBtn::after{ content: ""; position: absolute; top: -120%; left: -28%; width: 34%; height: 340%; transform: rotate(24deg) translateX(0); background: linear-gradient( 90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 35%, rgba(255,255,255,.52) 50%, rgba(255,255,255,.12) 65%, rgba(255,255,255,0) 100% ); opacity: 0; z-index: 1; transition: transform 1.1s cubic-bezier(.19,1,.22,1), opacity .34s ease; } #toTopBtn .toTopBtn__label{ position: relative; z-index: 2; font-size: 14px; font-weight: 700; letter-spacing: -.01em; opacity: 0; transform: translateX(16px); max-width: 0; overflow: hidden; transition: opacity .26s ease .08s, transform .52s cubic-bezier(.19,1,.22,1), max-width .58s cubic-bezier(.19,1,.22,1); } #toTopBtn .toTopBtn__icon{ width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; } #toTopBtn .toTopBtn__icon svg{ display: block; transition: transform .52s cubic-bezier(.19,1,.22,1), filter .42s ease; } /* hover = slow cinematic expand */ #toTopBtn:hover{ width: 176px; transform: translateY(-4px) scale(1.015); box-shadow: 0 24px 48px rgba(250, 2, 175, 0.34), 0 0 30px rgba(250, 2, 175, 0.16), 0 0 0 1px rgba(255,255,255,.08) inset; filter: saturate(1.04); } #toTopBtn:hover::after{ opacity: 1; transform: rotate(24deg) translateX(360%); } #toTopBtn:hover .toTopBtn__label{ opacity: 1; transform: translateX(0); max-width: 130px; } #toTopBtn:hover .toTopBtn__icon svg{ transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 0 10px rgba(255,255,255,.22)); } /* active */ #toTopBtn:active{ transform: translateY(-1px) scale(.965); box-shadow: 0 14px 24px rgba(250, 2, 175, 0.26), 0 0 0 1px rgba(255,255,255,.08) inset; } /* click launch feel */ #toTopBtn.is-clicked{ animation: toTopBtnLaunch .62s cubic-bezier(.19,1,.22,1); } #toTopBtn.is-clicked .toTopBtn__icon svg{ animation: toTopBtnArrowLift .62s cubic-bezier(.19,1,.22,1); } @keyframes toTopBtnLaunch{ 0%{ transform: translateY(-1px) scale(.96); } 28%{ transform: translateY(-6px) scale(1.03); } 58%{ transform: translateY(-2px) scale(.985); } 100%{ transform: translateY(0) scale(1); } } @keyframes toTopBtnArrowLift{ 0%{ transform: translateY(0) scale(1); } 28%{ transform: translateY(-6px) scale(1.08); } 58%{ transform: translateY(-2px) scale(1.02); } 100%{ transform: translateY(0) scale(1); } } #toTopBtn:focus-visible{ outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.16), 0 0 0 5px rgba(250,2,175,.20), 0 20px 42px rgba(250,2,175,.30); } @media (max-width: 767px){ #toTopBtn{ right: 16px; bottom: 16px; height: 54px; width: 54px; padding: 0 14px 0 16px; } #toTopBtn:hover{ width: 154px; } #toTopBtn .toTopBtn__label{ font-size: 13px; } } /* ========================= SPLIT BLACK CARD + VIDEO RIGHT (BIGGER + MATCHED TYPE) ========================= */ .splitCardSec{ position: relative; padding: 110px 0; /* a bit taller */ border-top: 1px solid rgba(255,255,255,.06); } .splitCardWrap{ width: 100%; padding: 0 6%; max-width: 1440px; /* βœ… bigger card container */ margin: 0 auto; } .splitCard{ border-radius: 26px; background: #D89340; box-shadow: 0 30px 120px rgba(0,0,0,.75); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; /* βœ… video gets more space */ gap: 0; border: 1px solid rgba(255,255,255,.08); transition: transform .22s ease, border-color .22s ease; } .splitCard:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.14); } /* LEFT */ .splitCard__left{ padding: 44px 44px; /* βœ… bigger padding */ display:flex; flex-direction: column; justify-content: center; gap: 16px; } .splitCard__title{ margin: 0; font-size: 36px; /* βœ… closer to other section headings */ line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; color: rgba(5, 5, 5,.95); } .splitCard__desc{ margin: 0; font-size: 15px; /* βœ… slightly bigger */ line-height: 1.10; color: rgba(5, 5, 5,.95); max-width: 60ch; } /* your About link should feel like other CTA text */ .osmoLink{ display: inline-flex; gap: 8px; align-items: center; margin-top: 8px; font-weight: 800; font-size: 13px; /* βœ… up one step */ letter-spacing: .03em; text-decoration: none; color: rgba(5, 5, 5,.95); opacity: .95; } /* RIGHT */ .splitCard__right{ padding: 8px 9px 8px 8px; /* top right bottom left */ display: flex; align-items: stretch; justify-content: center; } .splitCard__media{ position: relative; width: 100%; max-width: 100%; height: 100%; /* para sumakto sa container */ min-height: 100%; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.10); } .splitCard__video{ width: 100%; height: 100%; display:block; object-fit: cover; } /* CLICK follower (video only, cursor stays visible) */ .splitCard__media .clickFollower{ position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 999px; background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); display: grid; place-items: center; pointer-events: none; opacity: 0; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) translate(-50%, -50%) scale(.45); transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .16s linear, background-color .22s ease, border-color .22s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 3; will-change: transform, opacity; } .splitCard__media .clickFollower span{ font-size: 11px; font-weight: 900; letter-spacing: .18em; transform: scale(.92); transition: transform .52s cubic-bezier(.16,1,.3,1); } .splitCard__media.is-hover .clickFollower{ opacity: 1; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) translate(-50%, -50%) scale(1.08); } .splitCard__media.is-hover .clickFollower span{ transform: scale(1); } /* Responsive */ @media (max-width: 980px){ .splitCardWrap{ max-width: 900px; } .splitCard{ grid-template-columns: 1fr; } .splitCard__left{ padding: 28px; } .splitCard__right{ padding: 0 28px 28px; } .splitCard__title{ font-size: 28px; } .splitCard__media{ max-width: 100%; } } /* Floating Website Overlay (stable) */ .siteOverlay{ position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; background: rgba(0,0,0,0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: opacity .22s ease, background .35s ease, backdrop-filter .35s ease; } .siteOverlay.show{ opacity: 1; pointer-events: auto; background: rgba(0,0,0,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .siteOverlay__panel{ width: min(1680px, 96vw); height: min(920px, 92vh); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: rgba(15,15,18,.92); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 30px 120px rgba(0,0,0,.75); transform: translateY(10px) scale(.985); opacity: 0; transition: transform .55s cubic-bezier(.12,1,.16,1), opacity .22s ease; } .siteOverlay.show .siteOverlay__panel{ transform: translateY(0) scale(1); opacity: 1; } .siteOverlay__bar{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 10px 12px; background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(255,255,255,.08); } .siteOverlay__title{ font-weight: 800; letter-spacing: .04em; font-size: 13px; color: rgba(255,255,255,.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .siteOverlay__actions{ display:flex; align-items:center; gap: 10px; } .siteOverlay__btn{ appearance:none; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 12px; text-decoration: none; cursor: pointer; } .siteOverlay__btn--close{ width: 40px; height: 36px; display:inline-flex; align-items:center; justify-content:center; font-size: 16px; } .siteOverlay__frameWrap{ position: relative; flex: 1; } .siteOverlay__frame{ width: 100%; height: 100%; border: 0; background: #0b0b0d; } .siteOverlay__hint{ position:absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.58); border: 1px solid rgba(255,255,255,.10); color: rgba(229,231,235,.92); font-size: 12px; pointer-events:none; } /* scroll lock */ html.no-scroll, body.no-scroll{ overflow:hidden !important; height:100%; } /* ===== CLEAN LOGO CONTROL ===== */ .splitCard__left{ padding: 44px 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; /* left align */ gap: 16px; text-align: left; } .splitCard__logoWrap{ width: 100%; display: flex; justify-content: flex-start; align-items: center; margin: 0 0 10px 0; } .splitCard__logoImg{ width: 180px; /* adjust here */ max-width: 100%; height: auto; display: block; object-fit: contain; margin: 0; opacity: .98; } @media (max-width: 980px){ .splitCard__logoImg{ width: 180px; } } /* ========================= OSMO LINK SMOOTH HOVER hover = aakyat leave = bababa ========================= */ .osmoLink--smooth{ display: inline-flex; align-items: center; gap: 8px; } .osmoLink--smooth .osmoLink__stack{ position: relative; display: inline-block; overflow: hidden; height: 1.15em; line-height: 1.15; vertical-align: top; } .osmoLink--smooth .osmoLink__label{ display: block; transform: translateY(0%); transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .osmoLink--smooth .osmoLink__stack::after{ content: attr(data-text); position: absolute; left: 0; top: 100%; line-height: 1.15; transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .osmoLink--smooth:hover .osmoLink__label, .osmoLink--smooth:focus-visible .osmoLink__label{ transform: translateY(-100%); } .osmoLink--smooth:hover .osmoLink__stack::after, .osmoLink--smooth:focus-visible .osmoLink__stack::after{ transform: translateY(-100%); } /* optional: slight delay sa arrow para mas smooth tingnan */ .osmoLink--smooth .osmoLink__stack--arrow .osmoLink__label, .osmoLink--smooth .osmoLink__stack--arrow::after{ transition-duration: .62s; transition-delay: .03s; } /* ========================= CAPSTONE BUTTON TEXT HOVER same motion as studio link ========================= */ .cap-btn--smooth{ position: relative; } .cap-btn--smooth .cap-btn__stack{ position: relative; display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2; } .cap-btn--smooth .cap-btn__label{ display: block; transform: translateY(0%); transition: transform .55s cubic-bezier(.22,1,.36,1); will-change: transform; position: relative; z-index: 2; } .cap-btn--smooth .cap-btn__stack::after{ content: attr(data-text); position: absolute; left: 0; top: 100%; line-height: 1.2; transition: transform .55s cubic-bezier(.22,1,.36,1); will-change: transform; z-index: 2; } .cap-btn--smooth:hover .cap-btn__label, .cap-btn--smooth:focus-visible .cap-btn__label{ transform: translateY(-100%); } .cap-btn--smooth:hover .cap-btn__stack::after, .cap-btn--smooth:focus-visible .cap-btn__stack::after{ transform: translateY(-100%); } /* ========================= REUSABLE TEXT SLIDE HOVER hover = up leave = down ========================= */ .txtSlideBtn{ display: inline-flex; align-items: center; justify-content: center; } .txtSlideBtn .txtSlideBtn__stack{ position: relative; display: inline-block; overflow: hidden; height: 1.15em; line-height: 1.15; vertical-align: top; } .txtSlideBtn .txtSlideBtn__label{ display: block; transform: translateY(0%); transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .txtSlideBtn .txtSlideBtn__stack::after{ content: attr(data-text); position: absolute; left: 0; top: 100%; line-height: 1.15; transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .txtSlideBtn:hover .txtSlideBtn__label, .txtSlideBtn:focus-visible .txtSlideBtn__label{ transform: translateY(-100%); } .txtSlideBtn:hover .txtSlideBtn__stack::after, .txtSlideBtn:focus-visible .txtSlideBtn__stack::after{ transform: translateY(-100%); } /* NAV TEXT SLIDE */ .navTextSlide{ display: inline-flex; align-items: center; justify-content: center; } .navTextSlide .navTextSlide__stack{ position: relative; display: inline-block; overflow: hidden; height: 1.05em; line-height: 1.05; vertical-align: top; } .navTextSlide .navTextSlide__label{ display: block; transform: translateY(0%); transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .navTextSlide .navTextSlide__stack::after{ content: attr(data-text); position: absolute; left: 0; top: 100%; line-height: 1.05; transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .navTextSlide:hover .navTextSlide__label, .navTextSlide:focus-visible .navTextSlide__label{ transform: translateY(-100%); } .navTextSlide:hover .navTextSlide__stack::after, .navTextSlide:focus-visible .navTextSlide__stack::after{ transform: translateY(-100%); } /* dropdown text animation only */ .navTextSlide{ display: inline-block; line-height: 1; } .navTextSlide__stack{ position: relative; display: inline-block; overflow: hidden; height: 1em; line-height: 1; white-space: nowrap; vertical-align: top; } .navTextSlide__label{ display: block; transform: translateY(0%); transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; white-space: nowrap; } .navTextSlide__stack::after{ content: attr(data-text); position: absolute; left: 0; top: 100%; line-height: 1; white-space: nowrap; transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .ddItem:hover .navTextSlide__label, .ddItem:focus-visible .navTextSlide__label{ transform: translateY(-100%); } .ddItem:hover .navTextSlide__stack::after, .ddItem:focus-visible .navTextSlide__stack::after{ transform: translateY(-100%); } /* works tab text slide */ .worksTabText{ display: inline-block; line-height: 1; pointer-events: none; } .worksTabText__stack{ position: relative; display: inline-block; overflow: hidden; height: 1.05em; line-height: 1.05; white-space: nowrap; vertical-align: top; } .worksTabText__label{ display: block; white-space: nowrap; transform: translateY(0%); transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .worksTabText__stack::after{ content: attr(data-text); position: absolute; left: 0; top: 100%; line-height: 1.05; white-space: nowrap; transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .works-tab:hover .worksTabText__label, .works-tab:focus-visible .worksTabText__label{ transform: translateY(-100%); } .works-tab:hover .worksTabText__stack::after, .works-tab:focus-visible .worksTabText__stack::after{ transform: translateY(-100%); } .works-tab.is-active:hover .worksTabText__label, .works-tab.is-active:focus-visible .worksTabText__label{ transform: translateY(0%); } .works-tab.is-active:hover .worksTabText__stack::after, .works-tab.is-active:focus-visible .worksTabText__stack::after{ transform: translateY(0%); } /* policy link text slide */ .policyTextSlide{ display: inline-block; line-height: 1; pointer-events: none; } .policyTextSlide__stack{ position: relative; display: inline-block; overflow: hidden; height: 1.05em; line-height: 1.05; white-space: nowrap; vertical-align: top; } .policyTextSlide__label{ display: block; white-space: nowrap; transform: translateY(0%); transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .policyTextSlide__stack::after{ content: attr(data-text); position: absolute; left: 0; top: 100%; line-height: 1.05; white-space: nowrap; transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .sf-policyLink:hover .policyTextSlide__label, .sf-policyLink:focus-visible .policyTextSlide__label{ transform: translateY(-100%); } .sf-policyLink:hover .policyTextSlide__stack::after, .sf-policyLink:focus-visible .policyTextSlide__stack::after{ transform: translateY(-100%); } /* email text slide */ .emailTextSlide{ display: inline-block; line-height: 1; pointer-events: none; } .emailTextSlide__stack{ position: relative; display: inline-block; overflow: hidden; height: 1.05em; line-height: 1.05; white-space: nowrap; vertical-align: top; max-width: 100%; } .emailTextSlide__label{ display: block; white-space: nowrap; transform: translateY(0%); transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .emailTextSlide__stack::after{ content: attr(data-text); position: absolute; left: 0; top: 100%; line-height: 1.05; white-space: nowrap; transition: transform .65s cubic-bezier(.16,1,.3,1); will-change: transform; } .sf-emailText:hover .emailTextSlide__label, .sf-emailText:focus-visible .emailTextSlide__label{ transform: translateY(-100%); } .sf-emailText:hover .emailTextSlide__stack::after, .sf-emailText:focus-visible .emailTextSlide__stack::after{ transform: translateY(-100%); } /* ========================= GLOBAL VERTICAL DOTS ========================= */ .pageDots{ position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .45s ease, transform .45s ease, visibility .45s ease; } .pageDots.pageDots--show{ opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } .pageDots.pageDots--hide{ opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(8px); } .pageDots__dot{ position: relative; display: block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); pointer-events: none; transition: width .32s ease, height .32s ease, background-color .32s ease, box-shadow .32s ease, opacity .32s ease; } /* active pink line */ .pageDots__dot.is-active{ width: 22px; height: 4px; background: #FA02AF; border-radius: 999px; box-shadow: 0 0 8px rgba(250,2,175,.35), 0 0 16px rgba(250,2,175,.18); overflow: hidden; pointer-events: auto; cursor: default; } /* invisible hover area para madaling tamaan */ .pageDots__dot.is-active::before{ content: ""; position: absolute; top: -9px; right: 0; bottom: -9px; left: -10px; } /* text inside line */ .pageDots__dot.is-active::after{ content: attr(data-label); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .03em; color: #fff; white-space: nowrap; opacity: 0; transition: opacity .2s ease .05s; pointer-events: none; text-align: center; } /* hover expand */ .pageDots__dot.is-active:hover{ width: 86px; height: 22px; background: #FA02AF; box-shadow: 0 0 10px rgba(250,2,175,.40), 0 0 20px rgba(250,2,175,.22); } /* show text on hover */ .pageDots__dot.is-active:hover::after{ opacity: 1; } @media (max-width: 980px){ .pageDots{ right: 14px; gap: 10px; } .pageDots__dot.is-active:hover{ width: 76px; height: 20px; } } @media (max-width: 640px){ .pageDots{ display: none; } } /* ========================= HOME BRAND V2 subtle magnetic hover ========================= */ .homeBrand{ --hb-x: 0px; --hb-y: 0px; transform: translate3d(var(--hb-x), var(--hb-y), 0); transition: transform .55s cubic-bezier(.16,1,.3,1); will-change: transform; } .homeBrand__avatar{ transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, filter .35s ease; will-change: transform; transform: translate3d(calc(var(--hb-x) * .45), calc(var(--hb-y) * .45), 0) scale(1); transform-origin: center; } .homeBrand__spin{ display: block; width: 100%; height: 100%; transform: rotate(0deg); transform-origin: center; will-change: transform; } .homeBrand__img{ width: 100%; height: 100%; display: block; transition: transform .75s cubic-bezier(.16,1,.3,1), filter .35s ease; will-change: transform; } .homeBrand__text{ transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; } .homeBrand__kurt, .homeBrand__bolim{ transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .25s ease; will-change: transform; } .homeBrand:hover .homeBrand__avatar, .homeBrand:focus-visible .homeBrand__avatar{ transform: translate3d(calc(var(--hb-x) * .45), calc(var(--hb-y) * .45), 0) scale(1.045); } .homeBrand:hover .homeBrand__img, .homeBrand:focus-visible .homeBrand__img{ transform: scale(1.085); } .homeBrand:hover .homeBrand__text, .homeBrand:focus-visible .homeBrand__text{ transform: translate3d(calc(var(--hb-x) * .3), calc(var(--hb-y) * .3), 0); } .homeBrand:hover .homeBrand__kurt, .homeBrand:focus-visible .homeBrand__kurt{ transform: translate3d(calc(var(--hb-x) * .2), calc(var(--hb-y) * .2), 0); } .homeBrand:hover .homeBrand__bolim, .homeBrand:focus-visible .homeBrand__bolim{ transform: translate3d(calc(var(--hb-x) * .28), calc(var(--hb-y) * .28), 0); } .homeBrand:focus-visible{ outline: none; } .cap-preview, .cap-preview [data-open-capshot]{ cursor: pointer; } .cap-preview .capClickFollower{ position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 999px; background: rgba(0,0,0,.72); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); display: grid; place-items: center; pointer-events: none; opacity: 0; transform: translate3d(var(--cmx, 0px), var(--cmy, 0px), 0) translate(-50%, -50%) scale(.45); transition: transform .52s cubic-bezier(.16,1,.3,1), opacity .16s linear, background-color .22s ease, border-color .22s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 3; will-change: transform, opacity; } .cap-preview .capClickFollower span{ font-size: 11px; font-weight: 900; letter-spacing: .18em; transform: scale(.92); transition: transform .52s cubic-bezier(.16,1,.3,1); } .cap-preview.is-hover .capClickFollower{ opacity: 1; transform: translate3d(var(--cmx, 0px), var(--cmy, 0px), 0) translate(-50%, -50%) scale(1.08); } .cap-preview.is-hover .capClickFollower span{ transform: scale(1); } html.js-preload #pageWrap { opacity: 0 !important; visibility: hidden !important; } html.js-ready #pageWrap { opacity: 1; visibility: visible; } #pageWrap { transition: opacity .25s ease; } .siteOverlay{ -webkit-user-select: none; user-select: none; } .siteOverlay__frameWrap{ position: relative; } .siteOverlay__frameBlocker{ position: absolute; inset: 0; z-index: 5; background: transparent; } #studio, #studio *{ -webkit-user-select: none; user-select: none; } #studio img, #studio video{ -webkit-user-drag: none; user-drag: none; pointer-events: none; } #studio .splitCard__media{ pointer-events: auto; cursor: pointer; } /* ========================= MOBILE MENU BUTTON + PANEL ========================= */ .menuBtn{ position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease; } .menuBtn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); } .menuBtn:active{ transform: scale(.96); } .menuBtn:focus-visible{ outline: 0; box-shadow: 0 0 0 2px rgba(250,2,175,.35), 0 10px 30px rgba(0,0,0,.18); } .menuBtn__box{ position: relative; width: 20px; height: 14px; } .menuBtn__line{ position: absolute; left: 0; width: 100%; height: 2px; border-radius: 999px; background: #fff; transform-origin: 50% 50%; transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease, top .28s cubic-bezier(.22,1,.36,1), background-color .2s ease; } .menuBtn__line--1{ top: 0; } .menuBtn__line--2{ top: 6px; } .menuBtn__line--3{ top: 12px; } .menuBtn.is-open{ background: rgba(250,2,175,.14); border-color: rgba(250,2,175,.34); } .menuBtn.is-open .menuBtn__line--1{ top: 6px; transform: rotate(45deg); } .menuBtn.is-open .menuBtn__line--2{ opacity: 0; transform: scaleX(.2); } .menuBtn.is-open .menuBtn__line--3{ top: 6px; transform: rotate(-45deg); } /* panel */ .mobileMenu{ overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.985); transform-origin: top center; pointer-events: none; transition: opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear .32s; } .mobileMenu.is-open{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s; } .mobileMenu nav{ margin: 8px 12px 12px; padding: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(17,17,17,.90), rgba(10,10,10,.86)); box-shadow: 0 22px 50px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* stagger */ .mobileMenu nav > *{ opacity: 0; transform: translateY(10px); transition: opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1); } .mobileMenu.is-open nav > *{ opacity: 1; transform: translateY(0); } .mobileMenu.is-open nav > *:nth-child(1){ transition-delay: .03s; } .mobileMenu.is-open nav > *:nth-child(2){ transition-delay: .06s; } .mobileMenu.is-open nav > *:nth-child(3){ transition-delay: .09s; } .mobileMenu.is-open nav > *:nth-child(4){ transition-delay: .12s; } .mobileMenu.is-open nav > *:nth-child(5){ transition-delay: .15s; } .mobileMenu.is-open nav > *:nth-child(6){ transition-delay: .18s; } @media (max-width: 1024px), (prefers-reduced-motion: reduce) { .menuBtn, .mobileMenu nav, .siteOverlay__btn, .siteOverlay__panel, .sf-policyFloat__inner { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .siteOverlay.show { background: rgba(8, 8, 10, 0.82) !important; } .splitCard__media, .siteOverlay__panel, .mobileMenu nav { box-shadow: 0 12px 30px rgba(0,0,0,.18) !important; } } @media (min-width: 1025px) { .menuBtn, .mobileMenu nav, .siteOverlay__btn, .siteOverlay__panel, .sf-policyFloat__inner { -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; } .splitCard__media, .siteOverlay__panel, .mobileMenu nav { box-shadow: 0 14px 34px rgba(0,0,0,.20) !important; } }