/*
Theme Name: jungdev
Theme URI: https://jungdev.com
Author: jungdev
Author URI: https://jungdev.com
Description: Hand-coded WordPress theme for jungdev — high-performance websites for small businesses in AU, US and EU.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jungdev
*/
/* self-hosted Poppins (was Google Fonts CDN) */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/poppins-800.woff2') format('woff2')}
/* jungdev — theme styles */
@view-transition{navigation:auto}
:root{
--navy:#051b3f; --blue:#0096d6; --purple:#85529c; --red:#e45257; --gold:#ffb400;
--blue-d:#0081b8; --purple-d:#6f4183;
/* Site-wide dark theme: --bg is the page canvas, and --ink/--body/--mut/
--soft/--line are redefined as their DARK-theme values since almost
every component already references these variables rather than
hardcoded colors — flipping the tokens here cascades correctly to
headings, lead paragraphs and "soft" card backgrounds everywhere
automatically. The small number of components that deliberately keep
a light/white background regardless of page theme (the contact form
fields, the Fiverr credential card) use the explicit --ink-lt/
--body-lt/--mut-lt "light card" exception tokens instead, so their
own text stays dark/readable against their own light background. */
--bg:#040a15;
--ink:#f2f4f8; --body:#aab4c8; --mut:#8794ad; --soft:#0d1b33; --line:#1e2c47;
--ink-lt:#051b3f; --body-lt:#465773; --mut-lt:#61718e; --line-lt:#e3e9f2;
/* Design system extended from the Fiverr credential card: a consistent
radius/shadow scale applied to every content card, badge, button and
form field site-wide, instead of the sharp-cornered flat boxes the
theme started with. */
--radius-lg:20px; --radius-md:14px; --radius-sm:10px; --radius-pill:999px;
--shadow-card:0 20px 50px rgb(0,0,0,.35); --shadow-card-sm:0 10px 28px rgb(0,0,0,.3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--blue-d)}
img{max-width:100%;display:block}
.wrap{max-width:1440px;margin:0 auto;padding-left:clamp(16px,2.5vw,40px);padding-right:clamp(16px,2.5vw,40px)}
.kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.kicker.lt{color:#4db4e2}
.kicker.mut{color:var(--mut)}
.lead{font-size:clamp(15px,1.3vw,19px);line-height:1.6;max-width:52ch;color:var(--body)}
.num{font-size:13px;font-weight:700;color:var(--blue)}
.big{font-weight:700;font-size:clamp(44px,5vw,80px);line-height:1;color:inherit}
.sfx{color:var(--blue)}
.ph{background:var(--soft);color:var(--mut);display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;width:100%;height:100%;min-height:60px}
.ph-ico{width:52px;height:52px;min-height:52px;flex:0 0 52px;border-radius:50%}
.ph-ico.lg{width:72px;height:72px;flex:0 0 72px}
/* header — always visible/sticky on desktop (≥980px), unchanged from
the original design: transparent by default so the hero/page content
shows through behind it, switching to a solid --bg once scrolled
(.is-scrolled, toggled by assets/js/site.js past a small threshold) or
on hover/focus (so the nav is readable the moment you reach for it,
even right at the top of the page before anything's scrolled). Below
980px .burger replaces the mega-menus/text links and opens the
full-screen template-parts/header/full-menu overlay instead — see its
own docblock. */
.hdr{position:sticky;top:0;z-index:100;background:transparent;transition:background-color .25s ease}
.hdr:hover,.hdr:focus-within,.hdr.is-scrolled{background:var(--bg)}
/* Push the sticky header below the WP admin bar for logged-in users — the
admin bar is position:fixed at top:0 with a higher z-index, so without
this the header would stick under it once scrolled. Desktop only: below
600px core switches the admin bar to position:absolute (it scrolls away
with the page), so an offset there would leave a permanent gap instead. */
/* stylelint-disable-next-line custom-property-pattern -- WP core's own variable name (wp-includes/css/admin-bar.css), not ours to rename */
body.admin-bar .hdr{top:var(--wp-admin--admin-bar--height,32px)}
@media screen and (max-width:600px){body.admin-bar .hdr{top:0}}
.hdr-bar{position:relative;z-index:2}
.hdr-in{display:flex;align-items:stretch;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;font-weight:800;font-size:clamp(20px,1.8vw,26px);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.brand span{color:var(--blue)}
.nav-desktop{display:flex;align-items:stretch}
.nlink{display:flex;align-items:center;gap:8px;padding:0 clamp(8px,1.1vw,20px);font-size:clamp(13px,1.05vw,15px);font-weight:500;color:#fff;background:transparent;border:none;cursor:pointer;font-family:inherit}
.nlink:hover{color:#fff}
.nlink.on{background:var(--blue)}
.roll{position:relative;overflow:hidden;display:inline-block;line-height:1.4}
.roll span{display:block;transition:transform .4s cubic-bezier(.76,0,.24,1)}
.roll span+span{position:absolute;left:0;top:100%}
a:hover .roll span,button:hover .roll span{transform:translateY(-100%)}
.hdr-cta{display:flex;align-items:center;margin-left:clamp(6px,1vw,16px)}
.hdr-cta a{display:flex;align-items:center;height:44px;padding:0 clamp(12px,1.4vw,22px);white-space:nowrap;background:var(--purple);border-radius:var(--radius-sm);color:#fff;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.hdr-cta a:hover{background:var(--purple-d);color:#fff}
/* mega */
.mi{display:flex;align-items:stretch}
.mi:hover>.mi-btn.mi-blue{background:var(--blue)}
.mi:hover>.mi-btn.mi-red{background:var(--red)}
.mega{display:none;position:absolute;left:0;right:0;top:100%;color:#fff;box-shadow:0 24px 48px rgb(5,27,63,.25)}
.mi:hover>.mega{display:block}
.mega-blue{background:var(--blue)}
.mega-red{background:var(--red)}
.mega-in{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(24px,3vw,56px);padding-top:48px;padding-bottom:56px}
.mega a{color:#fff}
.mega a:hover{color:#fff}
.mega-kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.mega-intro h3{font-size:28px;line-height:1.2;font-weight:700;margin:12px 0 16px;text-wrap:pretty}
.mega-intro p{font-size:14px;line-height:1.6;margin:0 0 24px;opacity:.85}
.mega-all{display:inline-flex;gap:10px;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid #fff;padding-bottom:4px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-grid a{display:block;padding:16px 18px}
.mega-grid a:hover{background:rgb(255,255,255,.14)}
.mega-grid .num{color:#fff;opacity:.75;margin-right:14px}
.mega-grid strong{font-size:16px}
.mega-grid em{display:block;font-style:normal;font-size:13px;line-height:1.5;opacity:.8;margin:6px 0 0 30px}
.ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px clamp(20px,3vw,56px)}
.ind-grid a{display:flex;align-items:center;gap:18px;padding:8px 10px}
.ind-grid a:hover{background:rgb(255,255,255,.14)}
.ind-grid strong{font-size:17px;letter-spacing:.03em;text-transform:uppercase}
/* mobile: .burger is the only nav control below 980px, opening
template-parts/header/full-menu (below) instead of a dropdown of its
own — no .mnav/.macc/.msub here anymore, that older off-canvas panel
this used to open has been replaced outright, not just hidden. */
.burger{display:none;align-items:center;justify-content:center;width:48px;background:transparent;border:none;cursor:pointer;color:#fff}
@media (max-width:980px){.nav-desktop{display:none}.burger{display:flex}}
/* full-screen menu — the only nav surface below 980px, opened by
.burger above (desktop keeps its original hover mega-menus untouched,
.burger is hidden there so this never gets triggered). */
/* .full-menu-burst is a plain clip-path:circle() (not the SVG+filter
.proj-feat-burst technique from the featured cards) growing from the
top-right, matching roughly where .burger sits — see the comment atop
template-parts/header/full-menu.php for why: that technique needs an
SVG viewBox matching a FIXED aspect ratio for an undistorted stretch,
which the viewport this covers doesn't have (portrait phone vs. wide
desktop, no single ratio fits both). .full-menu-in (the actual nav
content) fades in after, once the burst has mostly covered, the same
"wait for the cover" sequencing .proj-feat-logo uses on the cards. */
.full-menu{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.full-menu.open{visibility:visible;pointer-events:auto}
.full-menu-burst{position:absolute;inset:0;background:var(--bg);clip-path:circle(0% at 100% 0%);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
.full-menu.open .full-menu-burst{clip-path:circle(150% at 100% 0%)}
.full-menu-in{position:relative;z-index:1;height:100%;overflow-y:auto;padding:100px clamp(24px,6vw,120px) 48px;opacity:0;transition:opacity .4s ease .3s}
.full-menu.open .full-menu-in{opacity:1}
.full-menu-close{position:absolute;top:18px;right:clamp(16px,2.5vw,40px);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer}
.full-menu-close:hover{background:var(--soft)}
.full-menu-nav{display:flex;flex-direction:column;gap:4px;max-width:900px}
.full-menu-nav>a,.full-menu-acc{display:flex;align-items:center;gap:24px;width:100%;padding:18px 0;border:none;border-bottom:1px solid var(--line);background:none;font-family:inherit;font-size:clamp(26px,4.6vw,52px);font-weight:700;text-transform:uppercase;color:var(--ink);text-align:left;cursor:pointer}
.full-menu-nav>a:hover,.full-menu-acc:hover{color:var(--blue)}
.full-menu-num{min-width:34px;font-size:13px;font-weight:600;color:var(--mut)}
.full-menu-acc-ic{margin-left:auto;font-size:26px;font-weight:400;color:var(--blue);transition:transform .3s ease}
.full-menu-acc.open .full-menu-acc-ic{transform:rotate(45deg)}
.full-menu-sub{display:none;flex-direction:column;padding:6px 0 18px 58px}
.full-menu-sub.open{display:flex}
.full-menu-sub a{padding:9px 0;font-size:16px;color:var(--body)}
.full-menu-sub a:hover{color:var(--blue)}
.full-menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.full-menu-cta{display:inline-flex;align-items:center;height:52px;padding:0 26px;background:var(--purple);border-radius:var(--radius-sm);color:#fff;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.full-menu-cta:hover{background:var(--purple-d);color:#fff}
.full-menu-social{display:flex;flex-wrap:wrap;gap:10px 24px}
.full-menu-social a{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.full-menu-social a:hover{color:var(--ink)}
body.full-menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.hdr,.full-menu-burst,.full-menu-in{transition:none}}
/* sections */
main h1{font-weight:700;font-size:clamp(40px,5.5vw,88px);line-height:1;margin:16px 0 20px;max-width:16ch;text-wrap:pretty}
.sec-hero{padding-top:100px;padding-bottom:64px}
.sec-hero.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(32px,5vw,80px);align-items:start;padding-bottom:120px}
.sec{padding-bottom:96px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.sec-head h2,.sec-t{font-weight:700;font-size:clamp(28px,3.5vw,52px);margin:0}
.sec-t{margin:16px 0 40px}
.all{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--blue);padding-bottom:2px}
.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;margin-top:32px}
.cards4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:20px;margin-top:32px}
.card{display:block;background:var(--soft);border-radius:var(--radius-md);padding:28px 24px;transition:box-shadow .3s ease}
.card h3{font-size:20px;margin:14px 0 10px;line-height:1.2}
.card p{font-size:14px;line-height:1.6;margin:0;color:var(--body)}
a.card:hover{background:rgb(255,255,255,.06);color:var(--ink);box-shadow:var(--shadow-card-sm)}
.quote{background:var(--soft);border-radius:var(--radius-md);padding:36px 32px;margin:0;display:flex;flex-direction:column;gap:24px;transition:box-shadow .3s ease}
.quote:hover{box-shadow:var(--shadow-card-sm)}
.quote blockquote{font-weight:600;font-size:18px;line-height:1.5;margin:0;text-wrap:pretty}
.quote figcaption{margin-top:auto}
.quote b{display:block;font-size:15px}
.quote span{font-size:13px;color:var(--mut)}
.qtag{display:inline-block;background:rgb(255,255,255,.08);padding:5px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;width:max-content}
/* home */
.loader{position:fixed;inset:0;background:var(--navy);z-index:1000;display:flex;align-items:flex-end;justify-content:space-between;padding:40px clamp(16px,2.5vw,40px);transform:translateY(0);transition:transform .8s cubic-bezier(.76,0,.24,1)}
.loader.exit{transform:translateY(-101%)}
.loader .pct{font-weight:800;font-size:clamp(64px,10vw,140px);line-height:.85;color:#fff}
.loader .pct span{color:var(--blue)}
.hero{position:relative;overflow:hidden;padding-top:110px;padding-bottom:80px}
.hero>*{position:relative;z-index:1}
.blob{position:absolute;left:0;top:0;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgb(0,150,214,.28),rgb(133,82,156,.2) 45%,rgb(228,82,87,.14) 68%,transparent 74%);filter:blur(56px);pointer-events:none;will-change:transform;z-index:0 !important}
.hero-h{font-weight:800;font-size:clamp(56px,9vw,150px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin:20px 0 0;max-width:none}
.hero-h.xl{font-size:clamp(72px,13vw,220px);line-height:.9}
.hero-h>div{overflow:hidden;padding-bottom:.06em}
.hero-h span{display:inline-block;transform:translateY(115%);animation:rise .9s cubic-bezier(.22,1,.36,1) forwards}
.hero .lead{margin:32px 0 0}
.hero .kicker,.hero .lead{opacity:0;animation:fadeup .7s ease forwards}
.hero .kicker{animation-delay:1.5s}
.hero .lead{animation-delay:2.1s}
.hero-sub{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-top:24px}
.count{font-weight:800;font-size:clamp(24px,2.5vw,40px)}
.count b{color:var(--blue)}
.fadeup{opacity:0;animation:fadeup .7s ease forwards}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.marquee{background:var(--soft);overflow:hidden;padding:22px 0;margin-bottom:80px}
.mq-track{display:flex;width:max-content;animation:marquee 24s linear infinite}
.mq-track span{display:flex;align-items:center;gap:30px;padding-right:30px;font-weight:700;font-size:24px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.mq-track b{color:var(--blue)}
@keyframes marquee{to{transform:translateX(-50%)}}
/* featured project cards — title/category (.proj-feat-meta) render at
full opacity immediately, never touched by scroll-reveal or hover; only
the screenshot box (.proj-feat-media) fades up on scroll, via the same
generic .rev/.rev.on scroll-reveal class every other section on the
site uses (see revCheck() in assets/js/site.js) — no bespoke CSS needed
for that part.
The hover sequence itself is a 2-stage timeline (rest -> mock+logo,
then mock+logo -> video), orchestrated by assets/js/site.js via
stage-mock/stage-video classes on .proj-feat (not pure CSS :hover — the
crossfade to video needs a real delay so the logo gets to register).
See template-parts/work/featured-card.php for the full breakdown.
Rest: full-bleed screenshot, rounded corners, no border, 2-column grid
with every 2nd card offset down (.proj-feat-grid below).
stage-mock, all starting together (not staggered layer reveals): a
black "burst" expands from the top-left corner via an animated
clip-path circle until it fully covers the screenshot — since the
burst div's own border gets clipped along with its background, the
growing circle's edge is naturally traced by a white ring for free, no
extra element needed; the frame border draws itself in at the same
time (SVG stroke-dashoffset — vector-effect="non-scaling-stroke" keeps
it hairline-thin regardless of card size, since a plain viewBox
stretch would otherwise scale the stroke width along with the
geometry); the 3 dots pop in one after another, not simultaneously;
the tab draws in and shows the title; the project logo fades in
centred on the burst. The video (if any) starts loading/playing muted
at this point too, so it's already rolling once revealed.
stage-video: the logo crossfades out, the video crossfades in, in
place, inside the same drawn frame — the frame itself stays put the
whole time the card is hovered.
On mouseleave the JS just removes stage-mock/stage-video — every rule
above is a plain CSS transition, so removing the class runs the exact
same transition backwards, back to the rest state, with no separate
"un-hover" styles needed. */
.proj-feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,56px) clamp(18px,3vw,40px);margin-top:32px}
.proj-feat-grid .proj-feat:nth-child(2n){margin-top:clamp(32px,6vw,72px)}
@media (max-width:700px){.proj-feat-grid{grid-template-columns:1fr}.proj-feat-grid .proj-feat:nth-child(2n){margin-top:0}}
.proj-feat{display:block;color:var(--ink)}
.proj-feat:hover{color:var(--ink)}
/* Percentage radius, not a fixed px like --radius-lg elsewhere: the SVG
border below is stretched to fill this box (preserveAspectRatio="none"
on a viewBox with the same aspect ratio as this box, so the stretch
itself is uniform), and its rx/ry are set to the EXACT same percentage
of the viewBox (18/596=3.0201%, 13/423=3.0733%, not the rounded "3%"
this used to be) — since cards in the 2-col grid render at different
real pixel widths, only a percentage on both sides guarantees the drawn
corner curve and .proj-feat-media's own overflow:hidden clip land on
literally the same curve. Even a small mismatch between the two (the
rounded "3%" vs the SVG's actual 3.02%/3.07%) shows up as a visible
seam right at the corner, since the browser rasterizes the CSS clip and
the SVG stroke independently — that mismatch, not the SVG itself, was
the "mất rounded ở góc" corner artifact. The 596:423 ratio (~1.41:1, a
touch wider than 4:3) matches the card proportions the hover-mock
browser frame below is designed around. */
.proj-feat-media{position:relative;overflow:hidden;aspect-ratio:596/423;background:var(--navy);border-radius:3.0201% / 3.0733%}
/* Two states, not one: full-bleed at rest (the plain "no border" spec),
then shrinks to fit the exact same inner content viewport .proj-feat-
video/-logo/-burst/-border-inner below all already use, once hovering
— a real browser window's page content sits inside its own chrome,
never sprawling underneath the title bar, and this card's screenshot
should behave the same way once that mockup frame is what's actually
being shown, not stay full-bleed underneath it. top/left/width/height,
not "inset" alone — is a replaced element (same rule already
worked around for .proj-feat-video below): absolutely positioned with
inset but width/height left auto sizes from the image's own intrinsic
dimensions instead of stretching to fill, calc() avoids that. */
.proj-feat-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:top .6s cubic-bezier(.65,0,.35,1),left .6s cubic-bezier(.65,0,.35,1),width .6s cubic-bezier(.65,0,.35,1),height .6s cubic-bezier(.65,0,.35,1),border-radius .6s ease}
.proj-feat.stage-mock .proj-feat-img,.proj-feat.stage-video .proj-feat-img{top:11%;left:1.5%;width:calc(100% - 3%);height:calc(100% - 13%);border-radius:2.0761% / 1.9022%}
/* Same inner-viewport bounds as .proj-feat-img's hover state above (and
-video/-logo/-burst/-border-inner below) — not the full outer card
like this used to be, which let it paint straight through the
titlebar strip: on a light/custom "background behind logo" color that
turned the titlebar's own white dots/tab invisible (white-on-now-
white), the exact "phủ toàn bộ màu trắng lên cả card, không thấy
browser frame đâu nữa" bug. Scoped to the inner box instead, the
titlebar area is never touched by this at all — .proj-feat-media's own
background (var(--navy)) shows through there regardless of which
burst color is chosen, so the frame chrome stays visible no matter
what. What actually guarantees the screenshot is fully hidden within
THIS box once covered; .proj-feat-burst below (the organic wave) sits
on top of this (z-index:2 vs 1) and shares the exact same bounds now,
so the two read as one motion with no visible mismatch between "plain
edge covers" and "detailed wave covers". */
.proj-feat-burst-fill{position:absolute;top:11%;left:1.5%;width:calc(100% - 3%);height:calc(100% - 13%);z-index:1;background:var(--proj-burst-bg,#0a0a0a);border-radius:2.0761% / 1.9022%;clip-path:circle(0% at 0% 0%);transition:clip-path .7s cubic-bezier(.65,0,.35,1);pointer-events:none}
.proj-feat.stage-mock .proj-feat-burst-fill,.proj-feat.stage-video .proj-feat-burst-fill{clip-path:circle(150% at 0% 0%)}
/* Sized/positioned to match the INNER content box exactly (same top/
left/width/height as .proj-feat-video-wrap/-border-inner below, not
.proj-feat-media's full outer bounds like this used to be) — the wave
only ever covers the content viewport, never spreading up into the
titlebar or out to the outer frame edge, since the