/* Social Jet — design-system CSS, trimmed for deploy. Dropped: tokens/fig-tokens.css + components/fig-tokens.css (byte-identical 30.7 KB duplicates of 52 Figma variables this page never references). 75.4 KB -> this file. */ /* ---- tokens/fonts.css ---- */ /* Social Jet — webfonts. The .fig carries no font binaries, so the families are loaded from Google Fonts. Unbounded, Archivo, Manrope, Commissioner, Cabin, Inter and Roboto Mono are the real families named in the file. Proxima Nova (used on older web frames) is NOT freely licensed — Mulish is loaded as the nearest metric/humanist match and aliased below. Swap in the licensed Proxima Nova webfont when available. */ @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Manrope:wght@200..800&family=Commissioner:wght@100..900&family=Cabin:wght@400..700&family=Inter:wght@100..900&family=Roboto+Mono:wght@100..700&family=Mulish:wght@200..1000&display=swap'); /* Substitution alias: any rule asking for "Proxima Nova" gets Mulish. */ @font-face{font-family:"Proxima Nova";font-weight:400;font-style:normal;src:local("Proxima Nova"),local("ProximaNova-Regular"),url('https://fonts.gstatic.com/s/mulish/v13/1Ptvg83HX_SGhgqk2joUqVGVjeAtEZY.woff2') format('woff2')} @font-face{font-family:"Proxima Nova";font-weight:600;font-style:normal;src:local("Proxima Nova Semibold"),url('https://fonts.gstatic.com/s/mulish/v13/1Ptvg83HX_SGhgqk2joUqVGVjeAtEZY.woff2') format('woff2')} @font-face{font-family:"Proxima Nova";font-weight:700;font-style:normal;src:local("Proxima Nova Bold"),url('https://fonts.gstatic.com/s/mulish/v13/1Ptvg83HX_SGhgqk2joUqVGVjeAtEZY.woff2') format('woff2')} /* ---- tokens/colors.css ---- */ /* Social Jet — colour system. Base values transcribed verbatim from the .fig (Figma Variable collection "Social Jet (Web)" plus the file's highest-usage literals). Semantic aliases sit on top. Never round these hexes. */ :root{ /* ── Core brand ── */ --sj-purple:#410FD3; /* BG - Purple · the brand field colour */ --sj-cream:#FDF7E9; /* Milk White / BG - Light */ --sj-blue-deep:#2F00B9; /* Elements/Dark blue elements · swooshes, strokes */ --sj-purple-ink:#12043F; /* Elements/Dark purple elemets · button edge, card wells */ --sj-purple-dark:#3F2180; /* Dark purple */ --sj-purple-light:#875FFE; /* Light purple · hairlines, meta text */ --sj-magenta:#BB58FF; /* Pink · primary accent fill */ --sj-white:#FFFFFF; --sj-black:#000000; /* ── Neutrals ── */ --sj-grey-cream:#F6F0E0; /* Grey · cream shade-2 surfaces */ --sj-grey-text:#817F88; /* Gray text */ --sj-ink:#1A1A1A; --sj-ink-soft:#6B6B6B; --sj-line-grey:#F2F2F2; --sj-fill-grey:#F0F0F0; --sj-fill-grey-2:#B4B4B4; /* ── Bright secondaries (badges, chart series, sticker fills) ── */ --sj-b1-pink:#FFA5CB; /* color-1b */ --sj-b2-blue:#63ABFD; /* color-2b */ --sj-b3-lilac:#E697FF; /* color-3b */ --sj-lilac-pale:#C3B2F7; --sj-lilac-tint:#F1ECFF; --sj-periwinkle:#7987FF; --sj-navy:#12314D; /* ── Gradient stops (the signature banner sweep) ── */ --sj-grad-gold:#FFD66E; --sj-grad-hot:#FC4682; --sj-grad-sand:#F6DA98; --sj-gradient-banner:linear-gradient(90deg,#FFD66E 1.41%,#FC4682 33.25%,#F6DA98 100%); /* @kind color */ /* ── Semantic / status ── */ --sj-success:#368C30; /* Elements/Accent green - success */ --sj-error:#A21D1D; /* Elements/Accent red - error */ --sj-green-flat:#007D00; /* badge/green */ --sj-orange-flat:#C54600; /* badge/orange */ --sj-blue-flat:#0D69D4; /* badge/blue */ --sj-blue-link:#0069FF; --sj-gold:#D29913; /* ── Semantic aliases (prefer these in new work) ── */ --surface-brand:var(--sj-purple); --surface-light:var(--sj-cream); --surface-light-2:var(--sj-grey-cream); --surface-well:var(--sj-purple-ink); --surface-accent:var(--sj-magenta); --text-on-brand:var(--sj-cream); --text-on-light:var(--sj-purple); --text-heading:var(--sj-white); --text-body:var(--sj-cream); --text-muted:var(--sj-purple-light); --text-meta:var(--sj-grey-text); --border-hairline:var(--sj-purple-light); --border-edge:var(--sj-purple-ink); --border-soft:rgba(255,255,255,.08); --border-dashed:var(--sj-cream); --link-color:var(--sj-magenta); --link-color-hover:var(--sj-b3-lilac); } a{color:var(--link-color);text-decoration:none} a:hover{color:var(--link-color-hover);text-decoration:underline} /* ---- tokens/typography.css ---- */ /* Social Jet — type system. Two faces carry the brand: Unbounded (display / all headlines, always tracked -2%) and Archivo (UI, body, buttons, always tracked -4%). Manrope and Commissioner appear in a handful of spec/label places; Inter and Roboto Mono are Figma annotation furniture, not brand type. */ :root{ --font-display:"Unbounded","Unbounded Fallback",system-ui,sans-serif; /* @kind font */ --font-ui:"Archivo","Archivo Fallback",system-ui,sans-serif; /* @kind font */ --font-alt:"Manrope",system-ui,sans-serif; /* @kind font */ --font-spec:"Commissioner",system-ui,sans-serif; /* @kind font */ --font-legacy:"Proxima Nova","Mulish",system-ui,sans-serif; /* @kind font */ --font-annotation:"Inter",system-ui,sans-serif; /* @kind font */ --font-mono:"Roboto Mono",ui-monospace,monospace; /* Weights actually used in the file */ --fw-light:300; /* @kind font */ /* Archivo Light — testimonial roles, meta */ --fw-regular:400; /* @kind font */ --fw-medium:500; /* @kind font */ /* Unbounded Medium — names, chips, sub-heads */ --fw-semibold:600; /* @kind font */ /* Archivo SemiBold — small buttons */ --fw-bold:700; /* @kind font */ /* Unbounded Bold / Archivo Bold — headlines, buttons */ --fw-extrabold:800; /* @kind font */ --fw-black:900; /* @kind font */ /* Tracking — non-negotiable, the brand reads wrong without it */ --track-display:-0.02em; /* @kind font */ --track-ui:-0.04em; /* @kind font */ /* Line heights transcribed from the file */ --lh-tight:0.88; /* @kind font */ /* mega display */ --lh-display:0.96; /* @kind font */ /* headlines, badges, chips */ --lh-heading:1.2; /* @kind font */ /* multi-line headlines */ --lh-flat:1; /* @kind font */ /* buttons, labels, quote bodies */ --lh-body:1.4; /* @kind font */ /* Display scale (Unbounded Bold) */ --fs-mega:201px; /* landing hero */ --fs-display-1:64px; /* slide title, section title */ --fs-display-2:48px; --fs-display-3:42px; --fs-display-4:36px; --fs-display-5:34px; /* gradient banner text */ --fs-display-6:30px; /* Sub-display (Unbounded Medium) */ --fs-title-1:28px; --fs-title-2:24px; --fs-title-3:20px; --fs-title-4:18px; /* UI scale (Archivo) */ --fs-lead:24px; /* testimonial quote, card body */ --fs-nav:22px; /* desktop nav item, card heading */ --fs-body:20px; --fs-body-sm:18px; --fs-ui:16px; /* button label lg, meta */ --fs-ui-sm:14px; /* button label sm/md, chips */ --fs-caption:12px; } /* Ready-made specimens — the exact recipes used in the file */ .sj-mega{font-family:var(--font-display);font-weight:700;font-size:var(--fs-mega);line-height:var(--lh-tight);letter-spacing:var(--track-display)} .sj-display{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display-1);line-height:var(--lh-display);letter-spacing:var(--track-display)} .sj-headline{font-family:var(--font-display);font-weight:700;font-size:var(--fs-display-2);line-height:var(--lh-heading);letter-spacing:var(--track-display)} .sj-subhead{font-family:var(--font-display);font-weight:500;font-size:var(--fs-title-2);line-height:var(--lh-display);letter-spacing:var(--track-display)} .sj-name{font-family:var(--font-display);font-weight:500;font-size:var(--fs-display-4);line-height:var(--lh-display);letter-spacing:var(--track-display)} .sj-lead{font-family:var(--font-ui);font-weight:400;font-size:var(--fs-lead);line-height:var(--lh-flat)} .sj-body{font-family:var(--font-ui);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--track-ui)} .sj-nav{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-nav);line-height:0.85;letter-spacing:var(--track-ui)} .sj-label{font-family:var(--font-ui);font-weight:600;font-size:var(--fs-ui-sm);line-height:var(--lh-flat);letter-spacing:var(--track-ui)} .sj-meta{font-family:var(--font-ui);font-weight:300;font-size:var(--fs-ui);line-height:var(--lh-flat);letter-spacing:var(--track-ui)} /* ---- tokens/spacing.css ---- */ /* Social Jet — spacing, radii, borders, elevation. Values transcribed from the .fig. The auto-layout gaps in the file are mostly 8 / 10 / 12 / 20 / 24 / 26 / 32 / 33; page gutters are 160px at 1920 and 16px at 393. */ :root{ --space-1:4px; --space-2:8px; --space-2-5:10px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:26px; --space-8:32px; --space-9:33px; --space-10:40px; --space-12:60px; --gutter-desktop:160px; /* 1920 marketing page side padding */ --gutter-mobile:16px; /* 393 mobile page side padding */ --content-max:1600px; /* hero text measure at 1920 */ --content-wide:1720px; /* slide content measure at 1920 */ /* Radii — the file uses a pill, a soft 20/24 card, and a 12 chip */ --radius-chip:12px; --radius-sticker:20px; --radius-card:24px; --radius-pill:999px; /* Borders */ --border-w-hair:1px; /* @kind spacing */ --border-w-edge-sm:3px; /* Button size=sm bottom edge */ --border-w-edge-md:4px; /* Button size=md bottom edge */ --border-w-edge-lg:6px; /* Button pressed / lg bottom edge */ --border-dash:2px dashed var(--sj-cream); /* Elevation — the file uses hard offset drops on stickers, inset rims on 3D objects, and no ambient card shadows. */ --shadow-sticker:0 21px 18.3px 0 rgba(0,0,0,.25); /* @kind shadow */ --shadow-sticker-tilt:10px 15px 18.3px 0 rgba(0,0,0,.25); /* @kind shadow */ --shadow-lift:0 4px 10.3px 0 rgba(0,0,0,.25); /* @kind shadow */ --shadow-rim:inset 0 -30px 35.8px 0 rgba(0,0,0,.4),inset 0 10px 7.8px 0 rgba(255,255,255,.25); /* @kind shadow */ --shadow-hairline-white:0 0 0 1px rgba(255,255,255,.05); /* Glass — used on cream-on-purple chips */ --blur-chip:blur(18px); /* @kind other */ /* Motion — the file specifies no easing curves; these are the house defaults used by the UI kits and slides in this system. */ --ease-standard:cubic-bezier(.2,.8,.2,1); /* @kind other */ --dur-fast:120ms; /* @kind other */ --dur-base:200ms; /* @kind other */ --dur-slow:400ms; /* @kind other */ } /* ---- assets/brand-assets.css ---- */ /* Social Jet — brand bitmap + vector assets as background classes. url()s are relative to this file, so keep it beside assets/. */ .sj-platform{background-position:center;background-size:contain;background-repeat:no-repeat} .sj-platform-instagram{background-image:url(ds/platforms/instagram-3d.png)} .sj-platform-tiktok{background-image:url(ds/platforms/tiktok-3d.png)} .sj-platform-linkedin{background-image:url(ds/platforms/linkedin-3d.png)} .sj-platform-facebook{background-image:url(ds/platforms/facebook-3d.png)} .sj-platform-youtube{background-image:url(ds/platforms/youtube-3d.png)} .sj-noise{background:url(ds/textures/noise.png) top left / 512px 512px repeat} .sj-collage-2{background:url(ds/images/hero-collage-2.png) center / cover no-repeat} .sj-collage-3{background:url(ds/images/hero-collage-3.png) center / cover no-repeat} .sj-collage-4{background:url(ds/images/hero-collage-4.png) center / cover no-repeat} .sj-collage-5{background:url(ds/images/hero-collage-5.png) center / cover no-repeat} .sj-swoosh{-webkit-mask:url(ds/shapes/swoosh.svg) center / contain no-repeat;mask:url(ds/shapes/swoosh.svg) center / contain no-repeat;background-color:var(--sj-blue-deep)} .sj-swoosh-2{-webkit-mask:url(ds/shapes/swoosh-2.svg) center / contain no-repeat;mask:url(ds/shapes/swoosh-2.svg) center / contain no-repeat;background-color:var(--sj-blue-deep)} .sj-starburst{-webkit-mask:url(ds/shapes/star-burst.svg) center / contain no-repeat;mask:url(ds/shapes/star-burst.svg) center / contain no-repeat;background-color:var(--sj-cream)} /* ---- components/fig-assets.css ---- */ /* Generated by fig_materialize — background/mask classes for extracted bitmaps. * One rule per line; url()s are relative to this file, so it must stay * next to the assets/ directory it references. */ .fig-asset-7d486697436c57d8-964a3958 { background: url(ds/assets/7d486697436c57d8.png) top left / 500px 500px repeat; } .fig-asset-5d64a310e26a41cc-4f0861bd { background: url(ds/assets/5d64a310e26a41cc.jpg) center / cover no-repeat, url(ds/assets/da2ffbfbff5ab5d1.jpg) center / cover no-repeat; } .fig-mask-ddbee5ef6739962b-a93ad297 { -webkit-mask: url(ds/assets/ddbee5ef6739962b.png) 0px 0px / 71px 26px no-repeat; mask: url(ds/assets/ddbee5ef6739962b.png) 0px 0px / 71px 26px no-repeat; } .fig-asset-d05166fadf0e9d7d-81cee4d1 { background: url(ds/assets/d05166fadf0e9d7d.png) 50% 99.934% / 100% 196.305% no-repeat; } .fig-asset-1f6cd90dd79dc5d0 { background: url(ds/assets/1f6cd90dd79dc5d0.png) center / cover no-repeat; } .fig-asset-3525eaf35f79ee10 { background: url(ds/assets/3525eaf35f79ee10.png) center / cover no-repeat; } .fig-asset-3b23d1f958eb4859 { background: url(ds/assets/3b23d1f958eb4859.jpg) center / cover no-repeat; } .fig-asset-50d1af9856d3b101 { background: url(ds/assets/50d1af9856d3b101.png) center / cover no-repeat; } .fig-asset-5d64a310e26a41cc { background: url(ds/assets/5d64a310e26a41cc.jpg) center / cover no-repeat; } .fig-asset-c079453ccac83534-04f31746 { background: url(ds/assets/c079453ccac83534.png) center / contain no-repeat; } .fig-asset-da2ffbfbff5ab5d1 { background: url(ds/assets/da2ffbfbff5ab5d1.jpg) center / cover no-repeat; } .fig-asset-da2ffbfbff5ab5d1-6ef8473d { background: url(ds/assets/da2ffbfbff5ab5d1.jpg) 27.688% 49.730% / 100.059% 123.699% no-repeat; } .fig-mask-1b022fa21fae1a61-46569fd4 { -webkit-mask: url(ds/assets/1b022fa21fae1a61.png) 0px 0px / 32px 31.709px no-repeat; mask: url(ds/assets/1b022fa21fae1a61.png) 0px 0px / 32px 31.709px no-repeat; } /* ---- styles.css ---- */ @import './tokens/fonts.css'; @import './tokens/colors.css'; @import './tokens/typography.css'; @import './tokens/spacing.css'; @import './tokens/fig-tokens.css'; @import './tokens/fig-typography.css'; @import './assets/brand-assets.css'; @import './components/fig-tokens.css'; @import './components/fig-assets.css';