/* Socialite Group · case study pages Same system as the home page: black ink only, white leads, blush and blue as grounds, flat. No gradients, no shadows. Each page picks its grounds with data-ground on . */ /* ============ TOKENS ============ */ :root { --sg-black: #000000; --sg-white: #FFFFFF; --sg-blush: #FEE4DF; --sg-blue: #E1ECFF; --sg-ink-70: rgba(0,0,0,0.70); --sg-ink-45: rgba(0,0,0,0.45); --sg-ink-12: rgba(0,0,0,0.12); --font-display: 'Archivo', sans-serif; --font-serif: 'Bodoni Moda', serif; --font-body: 'Instrument Sans', sans-serif; --pad: clamp(20px, 5vw, 96px); --ease: cubic-bezier(0.16, 1, 0.3, 1); --g1: var(--sg-blush); /* the cover */ --g2: var(--sg-blue); /* the results */ } body[data-ground="blue"] { --g1: var(--sg-blue); --g2: var(--sg-blush); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: clip; } body { font-family: var(--font-body); color: var(--sg-black); background: var(--sg-white); -webkit-font-smoothing: antialiased; } ::selection { background: var(--sg-black); color: var(--sg-white); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 2px solid var(--sg-black); outline-offset: 4px; } /* ============ TYPE ============ */ .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 0.98; } .serif { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: 0; } .meta { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--sg-ink-45); line-height: 1.6; } .meta-ink { color: var(--sg-black); } .body-lg { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; } .body-sm { font-size: 16px; line-height: 1.55; } .dot-el { display: inline-block; border-radius: 50%; background: var(--sg-black); } /* ============ REVEALS ============ */ .rv { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .rv.in { opacity: 1; transform: none; } .rv-d1 { transition-delay: 0.08s; } .rv-d2 { transition-delay: 0.16s; } .rv-d3 { transition-delay: 0.24s; } .rv-d4 { transition-delay: 0.32s; } .rv-d5 { transition-delay: 0.40s; } /* Cover reveals wait for the webfonts, so nothing reflows mid-rise */ .hr { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } body.loaded .hr { opacity: 1; transform: none; } .hr-d1 { transition-delay: 0.6s; } .hr-d2 { transition-delay: 0.78s; } .hr-d3 { transition-delay: 0.88s; } .hr-d4 { transition-delay: 0.98s; } .hr-d5 { transition-delay: 1.08s; } /* The cover headline: every word rises out of its own mask. clip-path (not overflow) keeps the baseline intact, so the serif full stop sits right. */ .w { display: inline-block; clip-path: inset(0); padding: 0.1em 0.04em 0.18em 0; margin: -0.1em 0 -0.18em 0; } .w > span { display: inline-block; transform: translateY(118%); transition: transform 1.1s var(--ease); } body.loaded .w > span { transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv, .hr, .w > span { transition: none !important; transform: none !important; opacity: 1 !important; } #cursor { display: none !important; } } /* ============ CURSOR: the full stop follows you ============ */ #cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; background: var(--sg-black); border-radius: 50%; pointer-events: none; z-index: 300; transform: translate(-100px, -100px); transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.25s var(--ease); will-change: transform; } #cursor.big { width: 46px; height: 46px; } #cursor.inv { background: var(--sg-white); } @media (pointer: coarse) { #cursor { display: none; } .btn { min-height: 48px; } } /* ============ NAV ============ */ header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); background: transparent; border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s; } header.nav.scrolled { background: var(--sg-white); border-bottom-color: var(--sg-ink-12); } .nav-logo img { width: clamp(120px, 12vw, 168px); } .nav-links { display: flex; gap: 40px; align-items: center; list-style: none; } .nav-links a { text-decoration: none; position: relative; padding: 4px 0; } .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--sg-black); opacity: 0; transform: translateY(5px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .nav-links a:not(.btn):hover::after, .nav-links a:not(.btn):focus-visible::after { opacity: 1; transform: none; } .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--sg-black); color: var(--sg-white); font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 19px 38px; text-decoration: none; border: 1px solid var(--sg-black); line-height: 1; transition: background 0.3s var(--ease), color 0.3s var(--ease); cursor: pointer; } .btn:hover, .btn:focus-visible { background: var(--sg-white); color: var(--sg-black); } .link-plain { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; padding: 16px 0; } .link-plain .dot-el { width: 7px; height: 7px; transition: transform 0.3s var(--ease); } .link-plain:hover .dot-el { transform: translateX(6px); } .menu-toggle { display: none; } @media (max-width: 900px) { .nav-links { display: none; } .menu-toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; } .menu-toggle .dot-el { width: 9px; height: 9px; } } /* ============ MOBILE MENU: a blush panel, Psst. to open, Shh. to close ============ */ .menu-toggle { padding: 10px 0 10px 16px; min-height: 44px; min-width: 44px; touch-action: manipulation; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; } .menu-toggle .bar { display: block; width: 26px; height: 4px; border-radius: 999px; background: var(--sg-black); transition: transform 0.3s var(--ease); } .menu-toggle .bar:nth-child(2) { transform: translateX(-9px); } .menu-toggle:active .bar:nth-child(2), .menu-toggle:hover .bar:nth-child(2) { transform: translateX(0); } #mobile-menu { position: fixed; inset: 0; z-index: 150; background: var(--sg-blush); display: flex; flex-direction: column; justify-content: space-between; padding: max(18px, env(safe-area-inset-top)) var(--pad) max(28px, env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s; } #mobile-menu.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } #mobile-menu .mm-top { display: flex; align-items: center; justify-content: space-between; } #mobile-menu .mm-top img { width: clamp(120px, 12vw, 168px); height: auto; } #mobile-menu .close-menu { background: none; border: 0; cursor: pointer; padding: 12px 0 12px 14px; min-height: 44px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; touch-action: manipulation; } #mobile-menu .mm-links { display: flex; flex-direction: column; gap: 4px; } #mobile-menu .mm-links a { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 10vw, 68px); letter-spacing: -0.025em; line-height: 1.02; text-decoration: none; padding: 8px 0; opacity: 0; transform: translateY(14px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } #mobile-menu.open .mm-links a { opacity: 1; transform: none; } #mobile-menu.open .mm-links a:nth-child(2) { transition-delay: 0.05s; } #mobile-menu.open .mm-links a:nth-child(3) { transition-delay: 0.1s; } #mobile-menu.open .mm-links a:nth-child(4) { transition-delay: 0.15s; } #mobile-menu.open .mm-links a:nth-child(5) { transition-delay: 0.2s; } #mobile-menu .mm-links a:active { opacity: 0.6; } #mobile-menu .mm-foot { display: flex; flex-direction: column; gap: 10px; } #mobile-menu .mm-foot a { text-decoration: none; padding: 6px 0; overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { #mobile-menu, #mobile-menu .mm-links a { transition: none !important; transform: none !important; } #mobile-menu:not(.open) { display: none; } } /* the trigger stays above the panel and turns into an X */ header.nav { z-index: 160; } body.menu-open header.nav { background: transparent; border-bottom-color: transparent; } #mobile-menu { padding-top: calc(max(18px, env(safe-area-inset-top)) + 76px); } #mobile-menu .mm-links { margin: auto 0; } .menu-toggle .bar { transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); } .menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .bar:nth-child(2), .menu-toggle[aria-expanded="true"]:hover .bar:nth-child(2) { opacity: 0; transform: translateX(-9px) scaleX(0.2); } .menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* touch: no tap delay, a small press response, room for fingers */ a, button, summary { touch-action: manipulation; } .btn:active, .case-read:active { transform: scale(0.98); } header.nav { padding-top: max(18px, env(safe-area-inset-top)); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--sg-black); color: var(--sg-white); padding: 12px 18px; z-index: 400; } .skip-link:focus { left: 12px; top: 12px; } /* ============ THE COVER: brand name at poster scale, the line, the ledger ============ */ .cover { background: var(--g1); min-height: 100svh; display: flex; flex-direction: column; padding: clamp(110px, 16vh, 170px) var(--pad) clamp(36px, 5vw, 72px); } .cover .top { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; } .cover .top .back { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; } .cover .top .back .dot-el { width: 7px; height: 7px; transition: transform 0.3s var(--ease); } .cover .top .back:hover .dot-el { transform: translateX(-6px); } .cover h1 { margin-top: auto; padding-top: clamp(40px, 8vh, 96px); font-size: clamp(58px, 13.5vw, 232px); line-height: 0.92; letter-spacing: -0.035em; overflow-wrap: anywhere; min-width: 0; } /* Long names step down a size so the cover still holds the line and the ledger */ .cover h1.long { font-size: clamp(50px, 10vw, 172px); } .cover .deck { margin-top: clamp(24px, 3vw, 44px); max-width: 30ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.7vw, 42px); line-height: 1.1; letter-spacing: -0.015em; } .cover .deck .serif { white-space: nowrap; } /* the accent phrase never breaks mid-phrase */ .ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin-top: clamp(48px, 7vh, 110px); } .ledger .cell { border-top: 1px solid var(--sg-black); padding: clamp(18px, 2vw, 28px) 0 6px; } .ledger .val { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 2.9vw, 50px); line-height: 1.02; letter-spacing: -0.025em; max-width: 12ch; overflow-wrap: anywhere; } @media (max-width: 40rem) { .cover { padding-top: 120px; } .ledger .cell { padding: 16px 0 22px; } } /* ============ THE STORY: sticky rail, editorial prose ============ */ .story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(40px, 6vw, 120px); padding: clamp(80px, 11vw, 170px) var(--pad); align-items: start; } .rail { position: sticky; top: 110px; } .rail-block { padding: 20px 0 22px; border-top: 1px solid var(--sg-ink-12); } .rail-block:last-child { border-bottom: 1px solid var(--sg-ink-12); } .rail-block > .meta { display: block; margin-bottom: 10px; } .rail-block .val { font-family: var(--font-display); font-weight: 800; font-size: clamp(17px, 1.35vw, 21px); letter-spacing: -0.01em; line-height: 1.3; } .rail-block ul { list-style: none; } .rail-block li { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; font-size: 16px; line-height: 1.5; color: var(--sg-ink-70); } .rail-block li .dot-el { width: 6px; height: 6px; flex: none; } .rail-block a.val { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; } .rail-block a.val .dot-el { width: 7px; height: 7px; transition: transform 0.3s var(--ease); } .rail-block a.val:hover .dot-el { transform: translateX(6px); } .prose .lede { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.5vw, 40px); line-height: 1.1; letter-spacing: -0.015em; max-width: 30ch; } .prose p:not(.lede) { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.6; color: var(--sg-ink-70); max-width: 58ch; } .prose .lede + p { margin-top: clamp(34px, 4vw, 60px); } .prose p:not(.lede) + p { margin-top: 1.35em; } /* An editorial drop cap in the Didone, the brand's accent face */ .prose .lede + p::first-letter { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--sg-black); font-size: 5em; line-height: 0.78; float: left; margin: 0.06em 0.16em 0 0; } @media (max-width: 60rem) { .story { grid-template-columns: 1fr; gap: 48px; } .rail { position: static; } } /* ============ THE RESULT: a numbered ledger ============ */ .results { background: var(--g2); padding: clamp(80px, 11vw, 170px) var(--pad); } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 5vw, 72px); flex-wrap: wrap; } .results h2 { font-size: clamp(42px, 6.4vw, 110px); } .impact { list-style: none; } .impact li { display: grid; grid-template-columns: clamp(60px, 8vw, 140px) 1fr; gap: clamp(14px, 3vw, 48px); align-items: baseline; padding: clamp(20px, 2.6vw, 34px) 0; border-top: 1px solid var(--sg-ink-12); transition: transform 0.35s var(--ease); } .impact li:last-child { border-bottom: 1px solid var(--sg-ink-12); } .impact li:hover { transform: translateX(clamp(4px, 0.8vw, 14px)); } .impact .n { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 4.6vw, 76px); line-height: 0.9; letter-spacing: -0.02em; color: var(--sg-ink-12); transition: color 0.35s var(--ease); } .impact li:hover .n { color: var(--sg-black); } .impact .t { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.1vw, 34px); line-height: 1.15; letter-spacing: -0.015em; max-width: 28ch; } @media (max-width: 40rem) { .impact li { grid-template-columns: 1fr; gap: 10px; } .impact .n { font-size: 15px; letter-spacing: 0.32em; font-weight: 600; font-family: var(--font-body); color: var(--sg-ink-45); } } /* ============ THE CLOSING LINE ============ */ .closing { padding: clamp(80px, 11vw, 170px) var(--pad); } .closing p { font-size: clamp(26px, 3.6vw, 60px); max-width: 24ch; } /* ============ NEXT CASE ============ */ .next { padding: clamp(70px, 9vw, 140px) var(--pad); border-top: 1px solid var(--sg-ink-12); } .next > .meta { display: block; margin-bottom: 18px; } .next-link { display: inline-block; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 7.8vw, 136px); letter-spacing: -0.03em; line-height: 0.95; overflow-wrap: anywhere; min-width: 0; } .next-link .dot-el { width: 0.2em; height: 0.2em; margin-left: 0.14em; transition: transform 0.35s var(--ease); } .next-link:hover .dot-el { transform: scale(1.9); } .next .row { margin-top: clamp(30px, 4vw, 56px); display: flex; gap: 28px; align-items: center; flex-wrap: wrap; } /* ============ FOOTER: the sign-off ============ */ footer { padding: clamp(60px, 8vw, 120px) var(--pad) 0; border-top: 1px solid var(--sg-ink-12); background: var(--sg-white); transition: background 0.8s var(--ease); overflow: hidden; } footer.warm { background: var(--sg-blush); } .foot-meta-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 0 0 18px; } .foot-logo-wrap { height: clamp(100px, 12.6vw, 310px); overflow: hidden; margin: 0 calc(-0.5 * var(--pad)); } .foot-logo-wrap img { width: 100%; max-width: none; transform: translateY(24%); transition: transform 1.2s var(--ease); } .foot-logo-wrap.in img { transform: translateY(0); }