/* ============================================================ Phan Quí — Portfolio Dark, editorial, high-contrast (Guglieri-inspired). Change the tokens in :root to restyle everything at once. ============================================================ */ :root{ --bg: #ffffff; /* white page */ --bg-2: #edf4ff; /* raised surface (BKS light blue) */ --bg-3: #e6efff; /* cards (soft blue tint) */ --ink: #111827; /* primary text (near-black) */ --ink-soft: #4b5563; /* muted text */ --ink-dim: #a3adbb; /* faint labels */ --line: #dde1e6; /* hairlines */ --accent: #1f6deb; /* BKS royal blue — swap to rebrand */ --accent-ink:#ffffff; --up: #15803d; /* "price is up" green for metric badges */ --up-glow: #22c55e; /* brighter green, halo only — too low */ /* contrast to sit behind text */ --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --wrap: 1580px; --pad: clamp(20px, 5vw, 64px); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:90px; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--accent); color:var(--accent-ink); } .wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); } .skip{ position:absolute; left:-9999px; } .skip:focus{ left:12px; top:12px; z-index:99; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:6px; } /* ───────────────── Nav ───────────────── */ .nav{ position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:12px var(--pad); margin-top:26px; background:transparent; border-bottom:1px solid transparent; transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease; } .nav.is-stuck{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(160%) blur(12px); border-bottom-color:var(--line); box-shadow:0 10px 28px -10px color-mix(in srgb, var(--accent) 40%, transparent); } .nav__brand{ font-weight:800; letter-spacing:-.01em; font-size:16px; } .nav__links{ display:flex; align-items:center; gap:4px; } .nav__links a{ font-size:15px; font-weight:500; color:var(--ink-soft); padding:9px 15px; border-radius:100px; transition:color .18s, background .18s; } .nav__links a:hover{ color:var(--ink); } .nav__links a.is-active{ color:var(--ink); } .nav__cta{ color:var(--accent-ink)!important; background:var(--accent); font-weight:700!important; } .nav__cta:hover{ filter:brightness(1.08); } @media (max-width:760px){ .nav__links a:not(.nav__cta){ display:none; } } /* ───────────────── Hero ───────────────── */ .hero{ position:relative; padding:clamp(56px,9vw,104px) 0 clamp(48px,6vw,72px); text-align:center; } .hero .hero__sub{ margin-left:auto; margin-right:auto; } .hero .hero__actions{ justify-content:center; } .page-grid-bg{ content:""; display:block; position:absolute; top:0; left:0; width:100vw; height:820px; z-index:-1; pointer-events:none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 95%); mask-image:linear-gradient(to bottom, black 55%, transparent 95%); opacity:.6; } .hero__blob{ position:absolute; z-index:-1; pointer-events:none; border-radius:50%; filter:blur(60px); opacity:.28; background:radial-gradient(circle, var(--accent), transparent 70%); animation:blob-float 14s ease-in-out infinite; } .hero__blob--a{ width:340px; height:340px; top:-80px; left:8%; } .hero__blob--b{ width:280px; height:280px; bottom:-100px; right:10%; animation-delay:-7s; } .hero__ring{ position:absolute; z-index:-1; pointer-events:none; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); animation:ring-pulse 6s ease-in-out infinite; } .hero__ring--a{ width:120px; height:120px; top:18%; left:6%; } .hero__ring--b{ width:70px; height:70px; bottom:14%; right:9%; animation-delay:-3s; } @keyframes blob-float{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(24px,-18px) scale(1.08); } } @keyframes ring-pulse{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.15); opacity:1; } } @media (prefers-reduced-motion:reduce){ .hero__blob, .hero__ring{ animation:none; } } .hero__name, .hero__handle, .hero__sub, .hero__actions, .hero__logos{ position:relative; z-index:1; } .hero__logos{ display:flex; align-items:center; justify-content:center; gap:clamp(24px,4vw,48px); flex-wrap:wrap; margin-top:52px; } .hero__logos img{ width:auto; display:block; } .hero__logos .l-momo{ height:90px; } .hero__logos .l-vlu{ height:50px; } .hero__logos .l-bship{ height:36px; } .hero__logos .l-megas{ height:56px; } .hero__logos-collab{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; padding:12px 20px; } .hero__logos-collab-row{ display:flex; align-items:center; gap:12px; } .hero__logos-divider{ width:1px; height:18px; background:var(--line); } .hero__logos-caption{ font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; } .hero__logos-caption--bship{ color:#f2763e; } .hero__logos-caption--greensm{ color:#14b8a6; } .hero__logos .l-greensm{ height:40px; } .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 30px; } .eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%, transparent); } .hero__title{ margin:0; font-weight:800; font-size:clamp(2.7rem, 8.2vw, 7.4rem); line-height:.96; letter-spacing:-.035em; } .hero__title em{ font-style:normal; color:var(--ink-soft); } .hero__title .hl{ color:var(--accent); } .hero__name{ margin:0; font-weight:800; font-size:clamp(2.7rem, 8.2vw, 7.4rem); line-height:.96; letter-spacing:-.02em; } .hero__name .hl{ color:var(--accent); } .hero__handle{ margin:18px 0 0; font-weight:500; text-transform:uppercase; font-size:clamp(1rem,1.8vw,1.4rem); letter-spacing:.08em; color:var(--accent); } .hero__sub{ margin:34px 0 0; max-width:820px; font-size:clamp(1rem,1.6vw,1.22rem); color:var(--ink-soft); line-height:1.6; } .hero__cursor{ display:inline-block; width:2px; height:1em; margin-left:2px; background:var(--accent); vertical-align:-.15em; animation:cursor-blink 1s step-end infinite; } @keyframes cursor-blink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } } @media (prefers-reduced-motion:reduce){ .hero__cursor{ animation:none; } } .hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; } .btn{ display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:15px; padding:15px 26px; border-radius:100px; border:1px solid var(--line); color:var(--ink); transition:transform .2s, background .2s, border-color .2s, color .2s; } .btn:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--ink) 40%,transparent); } .btn--primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .btn--primary:hover{ filter:brightness(1.07); } .btn .arw{ transition:transform .25s; } .btn:hover .arw{ transform:translateX(4px); } /* ───────────────── Marquee impact strip ───────────────── */ .strip{ border-block:1px solid var(--line); margin-top:clamp(40px,6vw,80px); overflow:hidden; } .strip__track{ display:flex; width:max-content; gap:0; white-space:nowrap; animation:scroll 19s linear infinite; } .strip__item{ display:inline-flex; flex-shrink:0; align-items:baseline; gap:18px; padding:30px 51px; font-size:15px; color:var(--ink-soft); } .strip__item b{ color:var(--ink); font-weight:800; font-size:19px; letter-spacing:-.01em; } .strip__item--job{ align-items:center; } .strip__logo{ width:auto; display:block; } .strip__logo.sm{ height:36px; } .strip__logo.sb{ height:23px; } .strip__logo.sv{ height:29px; } .strip__logo.sg{ height:38px; } .strip__logo.sg2{ height:16px; } .strip__logo-divider{ width:1px; height:16px; background:#f2763e; } @keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .strip__track{ animation:none; } } /* ───────────────── Section scaffolding ───────────────── */ .section{ padding:clamp(64px,9vw,130px) 0; } .section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(40px,5vw,64px); } .section__label{ font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); } .section__title{ margin:12px 0 0; font-weight:800; font-size:clamp(1.9rem,4vw,3.2rem); letter-spacing:-.03em; line-height:1.02; } .section__note{ color:var(--ink-soft); max-width:360px; font-size:15.5px; } @media (max-width:720px){ .section__head{ flex-direction:column; align-items:flex-start; } .section__note{ max-width:none; } } /* Toolkit head has no eyebrow label and wants both its lines unbroken */ .section__head--tools .section__title{ margin-top:0; white-space:nowrap; } .section__head--tools .section__note{ max-width:none; } @media (min-width:900px){ .section__head--tools .section__note{ white-space:nowrap; } } /* ───────────────── Work / case studies ───────────────── */ .cases{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); } .case{ display:grid; grid-template-columns:64px 1.1fr 1fr; gap:clamp(20px,3vw,48px); padding:clamp(30px,4vw,52px) 0; border-bottom:1px solid var(--line); align-items:start; transition:background .25s; } .case:hover{ background:color-mix(in srgb,var(--ink) 3%, transparent); } .case__no{ font-size:14px; color:var(--ink-dim); font-weight:600; padding-top:6px; } .case__tag{ display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; } .case__title{ margin:0 0 14px; font-weight:800; font-size:clamp(1.5rem,2.6vw,2.15rem); letter-spacing:-.025em; line-height:1.05; } .case__desc{ color:var(--ink-soft); margin:0; font-size:16px; } .case__desc strong{ color:var(--ink); font-weight:600; } .case__metrics{ display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; align-self:center; } .metric b{ display:block; font-weight:800; font-size:clamp(1.6rem,3vw,2.5rem); letter-spacing:-.03em; line-height:1; } .metric span{ display:block; margin-top:8px; font-size:13.5px; color:var(--ink-soft); line-height:1.4; } .metric.pos b{ color:var(--accent); } @media (max-width:900px){ .case{ grid-template-columns:32px 1fr; } .case__metrics{ grid-column:1 / -1; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); } } /* ───────────────── Capabilities ───────────────── */ .caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .cap{ background:var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:32px 28px; transition:transform .25s, border-color .25s; } .cap:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--ink) 22%,transparent); } .cap__k{ font-size:14px; color:var(--accent); font-weight:700; } .cap h3{ margin:16px 0 12px; font-size:1.35rem; font-weight:800; letter-spacing:-.02em; } .cap p{ margin:0; color:var(--ink-soft); font-size:15.5px; } .tools{ display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; } .tools span{ font-size:13.5px; color:var(--ink-soft); border:1px solid var(--line); border-radius:100px; padding:9px 16px; background:var(--bg-2); } @media (max-width:860px){ .caps{ grid-template-columns:1fr; } } /* ───────────────── Experience ───────────────── */ .xp{ border-top:1px solid var(--line); } .xp__row{ display:grid; grid-template-columns:1.2fr 1fr 150px; gap:24px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; transition:padding-left .3s, background .25s; } .xp__row:hover{ padding-left:14px; background:color-mix(in srgb,var(--ink) 3%,transparent); } .xp__role{ font-weight:800; font-size:1.2rem; letter-spacing:-.02em; } .xp__org{ color:var(--accent); font-weight:600; font-size:14.5px; margin-top:4px; } .xp__desc{ color:var(--ink-soft); font-size:15px; } .xp__date{ color:var(--ink-dim); font-size:14px; font-weight:600; text-align:right; } @media (max-width:820px){ .xp__row{ grid-template-columns:1fr; gap:8px; } .xp__date{ text-align:left; order:-1; } } /* ───────────────── About ───────────────── */ .about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:center; } .about__photo{ display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:10px; aspect-ratio:4/5; } .about__photo-main{ grid-row:1/3; position:relative; border-radius:20px; overflow:hidden; background:var(--bg-3); border:1px solid var(--line); } .about__photo-sub{ position:relative; border-radius:14px; overflow:hidden; background:var(--bg-3); border:1px solid var(--line); } .about__photo img{ display:block; width:100%; height:100%; object-fit:cover; } .about h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.03em; margin:0 0 22px; } .about p{ color:var(--ink-soft); font-size:16.5px; margin:0 0 18px; max-width:56ch; text-align:justify; } .about p strong{ color:var(--ink); font-weight:600; } .story-highlight{ background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); font-weight:700; padding:2px 6px; border-radius:5px; } .about__meta{ list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; } .about__meta li{ font-size:15px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:12px; } .about__meta b{ display:block; color:var(--ink-dim); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; margin-bottom:4px; } @media (max-width:820px){ .about{ grid-template-columns:1fr; } .about__photo{ max-width:340px; } } /* ───────────────── Contact / footer ───────────────── */ .cta{ padding:clamp(70px,10vw,150px) 0 clamp(40px,5vw,70px); } .cta__big{ font-weight:800; letter-spacing:-.04em; line-height:.98; font-size:clamp(2.6rem,9vw,8rem); margin:0; } .cta__mail{ color:var(--accent); } .cta__mail:hover{ text-decoration:underline; text-underline-offset:8px; } .cta__grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px; margin-top:clamp(40px,5vw,70px); } .cta__col h4{ margin:0 0 14px; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); font-weight:600; } .cta__col a, .cta__col p{ display:block; color:var(--ink-soft); font-size:16px; margin:0 0 8px; transition:color .18s; } .cta__col a:hover{ color:var(--ink); } .foot{ border-top:1px solid var(--line); margin-top:clamp(50px,7vw,90px); padding:26px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--ink-dim); font-size:13.5px; } .foot a{ color:var(--ink-soft); } .foot a:hover{ color:var(--ink); } /* ───────────────── Interior page hero ───────────────── */ .page-hero{ position:relative; overflow:hidden; padding:clamp(50px,7vw,96px) 0 clamp(30px,4vw,54px); border-bottom:1px solid var(--line); } .page-hero .eyebrow{ margin-bottom:22px; } .page-hero h1{ margin:0; font-weight:800; font-size:clamp(2.6rem,7vw,6rem); line-height:.95; letter-spacing:-.035em; } .page-hero h1 .hl{ color:var(--accent); } .page-hero p{ margin:26px 0 0; max-width:820px; color:var(--ink-soft); font-size:clamp(1rem,1.5vw,1.18rem); } /* ───────────────── Skills list (HOME "this is me") ───────────────── */ .skills{ border-top:1px solid var(--line); } .skill-row{ display:flex; align-items:baseline; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); transition:padding-left .3s, background .25s; } .skill-row:hover{ padding-left:14px; background:color-mix(in srgb,var(--ink) 3%,transparent); } .skill-row__no{ font-size:13px; color:var(--ink-dim); font-weight:600; min-width:34px; } .skill-row__name{ font-weight:800; font-size:clamp(1.3rem,2.6vw,2rem); letter-spacing:-.02em; } .skill-row:hover .skill-row__name{ color:var(--accent); } .skill-row__desc{ margin-left:auto; color:var(--ink-soft); font-size:14.5px; max-width:340px; text-align:right; } @media (max-width:720px){ .skill-row__desc{ display:none; } } /* ───────────────── Awards (HOME) ───────────────── */ .awards{ border-top:1px solid var(--line); } .award-row{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); transition:padding-left .3s, background .25s; } .award-row:hover{ padding-left:14px; background:color-mix(in srgb,var(--ink) 3%,transparent); } .award-row__title{ font-weight:800; font-size:1.15rem; letter-spacing:-.01em; } .award-row:hover .award-row__title{ color:var(--accent); } .award-row__org{ color:var(--ink-soft); font-size:14px; font-style:italic; margin-top:5px; } .award-row__date{ color:var(--ink-dim); font-size:14px; font-weight:600; white-space:nowrap; margin-left:24px; } @media (max-width:600px){ .award-row{ flex-direction:column; align-items:flex-start; gap:8px; } .award-row__date{ margin-left:0; } } /* ───────────────── Resume ───────────────── */ .resume{ border-top:1px solid var(--line); } .job{ display:grid; grid-template-columns:320px 1fr; gap:clamp(24px,4vw,64px); padding:clamp(34px,4vw,54px) 0; border-bottom:1px solid var(--line); } .job__side{ position:sticky; top:100px; align-self:start; } .job__logo{ width:auto; display:block; margin-bottom:18px; } .job__logo.jm{ height:42px; } .job__logo.jb{ height:26px; } .job__logo.jv{ height:34px; } .job__logo.jg{ height:44px; } .job__company{ font-weight:800; font-size:1.4rem; letter-spacing:-.02em; } .job__role{ color:var(--accent); font-weight:600; font-size:15px; margin-top:6px; } .job__date{ color:var(--ink-dim); font-size:14px; font-weight:600; margin-top:10px; } .job__meta{ color:var(--ink-soft); font-size:14px; margin-top:14px; max-width:280px; } .job__block{ margin-bottom:26px; } .job__block:last-child{ margin-bottom:0; } .job__block h4{ margin:0 0 14px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); } .job__block h4 .sub{ color:var(--accent); } .job__list{ list-style:none; margin:0 0 18px; padding:0; } .job__list:last-child{ margin-bottom:0; } .job__list li{ position:relative; padding-left:22px; margin-bottom:10px; color:var(--ink-soft); font-size:15.5px; line-height:1.55; } .job__list li::before{ content:"→"; position:absolute; left:0; top:0; color:var(--accent); } .job__list li strong{ color:var(--ink); font-weight:600; } .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .chips span{ font-size:12.5px; color:var(--ink); border:1px solid var(--line); border-radius:100px; padding:6px 13px; background:var(--bg-2); } @media (max-width:800px){ .job{ grid-template-columns:1fr; } .job__side{ position:static; } } /* ───────────────── Work / companies / campaigns ───────────────── */ .company{ padding:clamp(50px,6vw,88px) 0; border-bottom:1px solid var(--line); } .company:first-child{ padding-top:clamp(34px,4vw,52px); } /* company head: copy on the left, partner lockup parked in the space on the right that the 760px text column was leaving empty */ .company__head{ margin-bottom:clamp(30px,4vw,48px); max-width:760px; } /* only the head that carries a partner lockup goes two-column */ .company__head--split{ display:flex; align-items:center; max-width:none; gap:clamp(28px,3.6vw,56px); } /* hairline rule sets the lockup off as a masthead without boxing it in */ .company__head--split .company__headtext{ flex:1; min-width:0; border-left:1px solid var(--line); padding-left:clamp(28px,3.6vw,56px); } /* same lockup as the hero on the home page: no card, just the two marks and a hairline between them */ .company__partners{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:10px; } .company__partners-row{ display:flex; align-items:center; gap:20px; } .company__partners img{ display:block; width:auto; } .company__partners .p-bship{ height:56px; } .company__partners .p-greensm{ height:60px; } .company__partners .p-momo{ height:130px; } .company__partners .p-vlu{ height:56px; } .company__partners-divider{ width:1px; height:40px; background:var(--line); } .company__partners-caption{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; } .company__partners-caption--bship{ color:#f2763e; } .company__partners-caption--greensm{ color:#14b8a6; } @media (max-width:900px){ .company__head--split{ flex-direction:column; align-items:flex-start; } .company__partners{ align-self:flex-start; } .company__head--split .company__headtext{ border-left:0; padding-left:0; } } .company__name{ font-weight:800; font-size:clamp(1.8rem,4.5vw,3.4rem); letter-spacing:-.03em; margin:0; } .company__name .dot{ color:var(--accent); } .company__role{ color:var(--accent); font-weight:700; font-size:20px; margin-top:14px; letter-spacing:-.005em; } .company__intro{ color:var(--ink-soft); font-size:16px; margin:18px 0 0; } .camps{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:820px){ .camps{ grid-template-columns:1fr; } } .camp-group + .camp-group{ margin-top:38px; } .camp-group__label{ display:flex; align-items:center; gap:14px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin:0 0 20px; } .camp-group__label::after{ content:""; flex:1; height:1px; background:var(--line); } .camp{ background:var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:28px 26px; transition:transform .25s, border-color .25s; } .camp:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--ink) 22%,transparent); } .camp__name{ display:inline-block; font-weight:800; font-size:1.15rem; letter-spacing:-.01em; background:var(--accent); color:var(--accent-ink); padding:8px 16px; border-radius:100px; margin-bottom:20px; } .camp__field{ margin-bottom:14px; } .camp__field:last-of-type{ margin-bottom:0; } .camp__field b{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:5px; } .camp__field p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.5; } .camp__field p strong{ color:var(--ink); font-weight:600; } .camp__out{ display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line); } /* campaign cards that carry a deck slide span the full grid so the slide stays readable */ .camp--wide{ grid-column:1 / -1; } /* ---- case study dựng theo bố cục slide gốc: chữ trái, ảnh phải ---- */ .slide{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,3vw,44px); align-items:start; margin-top:22px; } .slide__h{ margin:0 0 10px; font-size:17px; font-weight:800; letter-spacing:-.01em; } .slide__list{ margin:0 0 20px; padding-left:18px; } .slide__list:last-child{ margin-bottom:0; } .slide__list li{ font-size:16px; line-height:1.6; color:var(--ink-soft); margin-bottom:7px; text-align:justify; } .slide__list li b{ color:var(--accent); font-weight:700; } .slide__media{ display:flex; flex-direction:column; gap:14px; } .mhead{ font-size:15px; font-weight:800; letter-spacing:-.01em; margin-bottom:-6px; } .mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .cpi-compare{ display:flex; flex-direction:column; align-items:stretch; gap:34px; } .cpi-compare .mshot{ position:relative; z-index:1; } /* ---- Tools & Platforms grid (home) ---- */ .toolgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(30px,3.4vw,50px) clamp(20px,2.4vw,34px); margin-top:10px; } .toolgrid__item{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; } .toolgrid__logo{ display:grid; place-items:center; height:62px; transition:transform .25s cubic-bezier(.2,.7,.3,1); } .toolgrid__item:hover .toolgrid__logo{ transform:translateY(-4px) scale(1.06); } /* Logos arrive at wildly different aspect ratios — 1:1 icons up to 7:1 wordmark lockups. Normalising on height alone would let a wordmark cover seven times the area of an icon, so each logo gets a height band chosen to even out the visual weight instead. */ .toolgrid__logo img{ width:auto; height:auto; max-width:100%; object-fit:contain; } .toolgrid__logo--icon img{ max-height:54px; } /* ~1:1 */ .toolgrid__logo--mid img{ max-height:40px; } /* ~1.8:1 */ .toolgrid__logo--wide img{ max-height:26px; } /* 4:1 - 7:1 */ .toolgrid__item figcaption{ font-size:14px; line-height:1.35; color:var(--ink-soft); } @media (max-width:1000px){ .toolgrid{ grid-template-columns:repeat(4,1fr); } } @media (max-width:620px){ .toolgrid{ grid-template-columns:repeat(3,1fr); } } @media (prefers-reduced-motion:reduce){ .toolgrid__item:hover .toolgrid__logo{ transform:none; } } /* ---- Video showcase (Content Production) ---- preload="none" on each