/* ========================================================= Roberto · portfólio (mobile first) Base styles are the phone layout; min-width queries add the tablet (600px) and desktop (960px) layouts on top. The page is a dark "studio" that turns into each client's world while you scroll. drives the page background; every section also carries its own world vars, so its text is always legible even mid-transition. ========================================================= */ :root { --ink: #121210; --bone: #EDE8DE; --signal: #FF5B2E; --f-display: "Bricolage Grotesque", ui-sans-serif, sans-serif; --f-serif: "Instrument Serif", Georgia, serif; --f-mono: "DM Mono", ui-monospace, monospace; --gutter: 20px; --ease: cubic-bezier(.2, .7, .1, 1); --section: 96px; } /* ---------- worlds ---------- */ :root, [data-world="studio"] { --bg: #121210; --fg: #EDE8DE; --muted: rgba(237, 232, 222, .62); --accent: #FF5B2E; --line: rgba(237, 232, 222, .14); } [data-world="bb"] { --bg: #F7F2E9; --fg: #23211C; --muted: #6F685C; --accent: #556A49; --line: #E2D9C8; } [data-world="bk"] { --bg: #FCF5E9; --fg: #3D405B; --muted: #62647F; --accent: #E07A5F; --line: #EDE2CC; } [data-world="signal"] { --bg: #FF5B2E; --fg: #121210; --muted: rgba(18, 18, 16, .7); --accent: #121210; --line: rgba(18, 18, 16, .2); } section[data-world] { color: var(--fg); background-color: var(--bg); transition: background-color .7s var(--ease); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-display); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .7s var(--ease); } img { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } em { font-family: var(--f-serif); font-style: italic; font-weight: 400; } ::selection { background: var(--accent); color: var(--bg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .grain { position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; } @keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} } .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; } /* ---------- header ---------- */ .top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter); padding-top: max(12px, env(safe-area-inset-top)); color: var(--fg); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: color .7s var(--ease), background-color .7s var(--ease); } .mark { font-weight: 700; font-size: 19px; letter-spacing: -.02em; text-decoration: none; } .mark span { font-size: .6em; vertical-align: super; } .top nav { display: flex; gap: 24px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .top nav a { text-decoration: none; } .top nav a:not(.nav-cta) { display: none; } .nav-cta { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid currentColor; border-radius: 99px; } /* ---------- HUD (which world you're in) ---------- */ .hud { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 86%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .7s var(--ease), border-color .7s; pointer-events: none; } .hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transition: background .7s; } .hud-label { font-size: 0; } .hud b { font-size: 10px; font-weight: 500; color: var(--accent); transition: color .7s; } .hud-bar { display: none; width: 56px; height: 2px; background: var(--line); position: relative; overflow: hidden; } .hud-bar i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(var(--p, 0)); } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ========================================================= HERO ========================================================= */ .hero { position: relative; padding: 84px var(--gutter) 64px; display: flex; flex-direction: column; gap: 20px; overflow: hidden; } .hero-title { font-weight: 700; letter-spacing: -.045em; line-height: .9; font-size: clamp(52px, 16.5vw, 96px); margin: 0; position: relative; z-index: 2; pointer-events: none; font-variation-settings: "opsz" 96; } .hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; } .hero-title .line > span { display: inline-block; transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; } .hero-title .line:nth-child(2) > span { animation-delay: .12s; } .hero-title .line:nth-child(3) > span { animation-delay: .24s; } .hero-title em { color: var(--signal); letter-spacing: -.02em; font-size: 1.08em; } @keyframes rise { to { transform: none; } } .hero-foot { display: grid; gap: 24px; position: relative; z-index: 2; } .hero-foot p { max-width: 460px; margin: 0; color: var(--muted); font-size: 17px; } .scroll-cue { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; } .scroll-cue svg { animation: bob 2s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(5px); } } /* the desk: loose pieces from both worlds. In flow on phones, overlay on desktop */ .desk { position: relative; height: clamp(250px, 64vw, 340px); margin: 4px calc(var(--gutter) * -1) 0; } .spec { position: absolute; left: var(--x); top: var(--y); transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--r) + var(--spin, 0deg))); user-select: none; -webkit-user-select: none; opacity: 0; animation: drop .9s var(--ease) forwards; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); } .spec-tag { --x: 36%; --y: 6%; --r: -8deg; } .spec-bk { --x: 58%; --y: 50%; --r: 9deg; } .spec-swatch { --x: 4%; --y: 56%; --r: -4deg; } .spec-type { --x: 5%; --y: 12%; --r: 5deg; } .spec-dot { --x: 84%; --y: 0%; --r: 0deg; } .spec:nth-child(1){animation-delay:.5s}.spec:nth-child(2){animation-delay:.62s}.spec:nth-child(3){animation-delay:.74s}.spec:nth-child(4){animation-delay:.86s}.spec:nth-child(5){animation-delay:.98s} @keyframes drop { from { opacity: 0; translate: 0 -40px; } to { opacity: 1; translate: 0 0; } } .spec.dragging { transition: none; cursor: grabbing; scale: 1.06; } .spec-tag { width: 158px; padding: 24px 30px 16px 16px; background: #F7F2E9; color: #23211C; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 14%); box-shadow: 0 30px 50px -20px rgba(0,0,0,.6); font-family: "Cormorant Garamond", serif; } .spec-tag small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 8px; letter-spacing: .12em; color: #6D7D5F; white-space: nowrap; } .spec-tag strong { display: block; font-weight: 400; font-style: italic; font-size: 23px; line-height: 1.05; color: #556A49; margin-top: 6px; } .tag-hole { position: absolute; top: 10px; left: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px #B98B57; } .tag-ribbon { position: absolute; right: 10px; top: 0; bottom: 0; width: 12px; background: linear-gradient(90deg, #6D7D5F, #8B9A7C 50%, #6D7D5F); } .spec-bk { display: flex; align-items: center; gap: 10px; } .bk-tile, .bk-logo { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; background: #E07A5F; color: #FCF5E9; font-family: "Grandstander", cursive; font-weight: 900; font-size: 38px; box-shadow: 5px 5px 0 #3D405B; position: relative; } .bk-tile i, .bk-logo i { font-style: normal; font-size: .42em; color: #F2CC5B; position: absolute; right: 11px; bottom: 11px; } .bk-word { font-family: "Gochi Hand", cursive; font-size: 22px; line-height: 1; color: #F2CC5B; transform: rotate(-6deg); width: 60px; } .spec-swatch { display: grid; grid-template-columns: repeat(5, 20px); gap: 4px; padding: 10px; background: #EDE8DE; color: #121210; border-radius: 6px; box-shadow: 0 30px 50px -20px rgba(0,0,0,.6); } .spec-swatch span { height: 38px; background: var(--c); border-radius: 3px; } .spec-swatch small { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; } .spec-type { display: flex; align-items: baseline; gap: 4px; padding: 8px 14px; border: 1px dashed rgba(237,232,222,.4); border-radius: 12px; } .aa-serif { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 46px; line-height: 1; color: #C9D2BD; } .aa-kid { font-family: "Grandstander", cursive; font-weight: 900; font-size: 42px; line-height: 1; color: #F2CC5B; text-shadow: 3px 3px 0 #E07A5F; } .spec-dot span { display: block; width: 42px; height: 42px; border-radius: 50%; background: #2C6FEE; box-shadow: 4px 4px 0 #3D405B; } .desk-hint { position: absolute; right: var(--gutter); bottom: -4px; margin: 0; font-family: "Gochi Hand", cursive; font-size: 18px; color: var(--muted); transform: rotate(-3deg); } .hint-drag { display: none; } /* fine pointers drag; touch screens get a tap "toss" instead, so scrolling never gets trapped */ @media (pointer: fine) { .spec { cursor: grab; touch-action: none; } .hint-drag { display: inline; } .hint-tap { display: none; } } /* ========================================================= INDEX ========================================================= */ .index { padding: var(--section) var(--gutter) calc(var(--section) * .6); position: relative; } .index-head { display: grid; gap: 14px; margin-bottom: 28px; } .index-head h2 { font-size: clamp(44px, 13vw, 96px); letter-spacing: -.04em; line-height: .9; margin: 0; font-weight: 600; } .index-head sup { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0; color: var(--signal); vertical-align: top; margin-left: 6px; } .index-head p { max-width: 340px; color: var(--muted); margin: 0; } .rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .rows a { display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; column-gap: 12px; row-gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; position: relative; z-index: 2; transition: padding .5s var(--ease), color .3s; } .rows .n { font-family: var(--f-mono); font-size: 12px; color: var(--muted); align-self: start; padding-top: .6em; } .rows .t { font-size: clamp(28px, 8.4vw, 84px); font-weight: 500; letter-spacing: -.035em; line-height: 1; } .rows .k { grid-column: 2; grid-row: 2; font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .rows .arrow { font-size: 22px; justify-self: end; transition: transform .4s var(--ease); } .rows a:active .t { color: var(--signal); } .row-yours .t em { color: var(--muted); } .peek { display: none; } /* ========================================================= CASES (shared) ========================================================= */ .case { position: relative; padding: var(--section) var(--gutter) calc(var(--section) * .7); } .case-intro { display: grid; gap: 16px; margin-bottom: 40px; } .case-num { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); } .case h2 { margin: 0; } .case-desc { margin: 0; font-size: 17px; } .meta { margin: 8px 0 0; display: grid; gap: 12px; } .meta div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .meta dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-top: 3px; } .meta dd { margin: 0; } .meta a { color: var(--accent); font-weight: 600; display: inline-flex; min-height: 28px; align-items: center; } /* steps: swipeable cards on phones, cross-fading captions on desktop */ .swipe-hint { margin: 0 0 10px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .steps { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .steps::-webkit-scrollbar { display: none; } .steps li { flex: 0 0 84%; scroll-snap-align: start; scroll-margin-left: var(--gutter); padding: 22px 20px; border: 1px solid var(--line); } .steps span { display: block; margin-bottom: 12px; } .steps h3 { margin: 0 0 10px; line-height: 1.04; } .steps p { margin: 0; } /* devices: phone is the hero on phones, browser joins on desktop */ .devices { position: relative; margin-top: 40px; display: grid; justify-items: center; } .browser { display: none; } .phone { margin: 0; position: relative; width: min(74vw, 300px); aspect-ratio: 390/800; border-radius: 34px; padding: 9px; background: #1b1a17; box-shadow: 0 40px 70px -30px rgba(0,0,0,.55); } .screen { position: relative; overflow: hidden; } .phone .screen { height: 100%; border-radius: 26px; } .screen img { width: 100%; height: auto; transform: translateY(calc(var(--scroll, 0) * -1px)); will-change: transform; } .chrome { flex: none; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #ECE6DA; font-family: var(--f-mono); font-size: 11px; color: #6b665c; } .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #d4cdbf; } .chrome span { margin-left: 14px; padding: 3px 14px; background: rgba(255,255,255,.7); border-radius: 99px; } /* playable blocks */ .play { display: grid; gap: 24px; margin: 64px 0 56px; } .play-copy h3 { margin: 8px 0 12px; line-height: 1.02; } .play-copy p { margin: 0; } .facts { list-style: none; margin: 0; padding: 0; display: grid; } .facts li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; border-top: 1px solid var(--line); padding: 16px 0; } .facts b { display: block; line-height: .9; } .facts span { font-size: 14.5px; color: var(--muted); } /* ========================================================= BASKET & BOND world ========================================================= */ .bb { font-family: "Instrument Sans", sans-serif; } .bb .case-num, .bb .meta dt, .bb .kick, .bb .swipe-hint { font-family: "IBM Plex Mono", monospace; } .bb-mark { width: 72px; height: auto; } .bb h2 { font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(60px, 19vw, 190px); line-height: .86; letter-spacing: -.02em; } .bb h2 i { color: #556A49; font-style: italic; } .bb-lede { margin: 0; font-family: "Cormorant Garamond", serif; font-size: clamp(26px, 7vw, 40px); line-height: 1.05; } .bb-lede em { font-family: inherit; color: #556A49; } .bb .steps li { background: #FFFCF6; } .bb .steps span { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 26px; color: #B98B57; } .bb .steps h3, .bb .play-copy h3 { font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: clamp(30px, 8vw, 54px); } .bb .steps p, .bb .play-copy p { color: #4C4740; } .bb .kick { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #6D7D5F; } .bb .facts b { font-variant-numeric: lining-nums; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: 50px; color: #556A49; } .bb .browser { border-radius: 4px; } .bb .phone { box-shadow: 0 40px 70px -30px rgba(35,33,28,.5); } .builder { display: grid; gap: 14px; background: #FFFCF6; border: 1px solid #E2D9C8; padding: 14px; margin: 0 calc(var(--gutter) * -.5); } .pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .piece { display: grid; gap: 4px; align-content: start; text-align: left; padding: 6px 6px 10px; background: #FFFCF6; border: 1px solid #E2D9C8; font-family: "Instrument Sans", sans-serif; font-size: 12.5px; line-height: 1.25; color: #23211C; transition: border-color .25s, background .25s; } .piece .ico { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #EFE7D9; margin-bottom: 4px; } .piece b { font-weight: 500; color: #556A49; } .piece[aria-pressed="true"] { background: #556A49; border-color: #556A49; color: #F7F2E9; } .piece[aria-pressed="true"] b { color: #DFE6D6; } .yourbox { display: grid; gap: 14px; align-content: start; border: 1px solid #E2D9C8; padding: 16px; } .yb-head { display: flex; justify-content: space-between; align-items: baseline; } .yb-head span:first-child { font-family: "Cormorant Garamond", serif; font-size: 24px; } .yb-head span:last-child { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .14em; } .yb-empty { margin: 0; font-size: 14px; color: #4C4740; } .yb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .yb-list:empty { display: none; } .yb-list li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; font-size: 14px; animation: ybin .45s var(--ease); } .yb-list img { width: 40px; height: 40px; object-fit: cover; } @keyframes ybin { from { opacity: 0; transform: translateY(-6px); } } .engrave { display: grid; gap: 8px; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6B4E28; background: #DEC7A4; padding: 12px 14px; transition: opacity .3s; } .engrave:has(input:disabled) { opacity: .45; } .engrave input { font-family: "Instrument Sans", sans-serif; font-size: 16px; letter-spacing: 0; text-transform: none; border: 0; border-bottom: 1px solid #A9714E; background: transparent; color: #23211C; padding: 6px 0; outline: none; width: 100%; border-radius: 0; } .engr { display: block; text-align: center; font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 21px; letter-spacing: .2em; color: #5A431F; padding: 6px 0 2px; overflow-wrap: anywhere; } .sum { display: grid; gap: 6px; font-size: 14px; color: #4C4740; } .sum div { display: flex; justify-content: space-between; } .sum .total { border-top: 1px solid #E2D9C8; padding-top: 10px; margin-top: 4px; font-family: "Cormorant Garamond", serif; font-size: 24px; color: #23211C; } .sum .total span:last-child { font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: 22px; } /* ========================================================= BRIGHTKIDS world ========================================================= */ .bk { font-family: "Nunito", sans-serif; background-image: repeating-linear-gradient(-45deg, rgba(242,204,91,.13) 0 22px, transparent 22px 44px); } .bk .case-num, .bk .kick, .bk .swipe-hint { font-size: 11px; text-transform: uppercase; font-family: "Nunito", sans-serif; font-weight: 800; letter-spacing: .18em; color: #5E9479; } .bk-logo { width: 66px; height: 66px; font-size: 36px; border-radius: 18px; } .bk h2 { font-family: "Grandstander", cursive; font-weight: 900; font-size: clamp(50px, 15vw, 170px); line-height: .9; letter-spacing: -.01em; text-shadow: .05em .05em 0 #F2CC5B; } .bk h2 span { display: block; line-height: 1; margin-top: .06em; color: #E07A5F; font-size: .5em; text-shadow: .06em .06em 0 #3D405B; } .bk-lede { margin: 0; font-family: "Gochi Hand", cursive; font-size: clamp(28px, 8vw, 48px); color: #E07A5F; transform: rotate(-3deg); transform-origin: left; } .bk .meta a { color: #C0583E; } .bk .steps li { background: #fff; border: 2px solid #EDE2CC; border-radius: 22px; box-shadow: 0 12px 30px -20px rgba(61,64,91,.4); } .bk .steps span { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #F2CC5B; font-family: "Grandstander", cursive; font-weight: 900; font-size: 22px; box-shadow: 4px 4px 0 #3D405B; } .bk .steps li:nth-child(2) span { background: #81B29A; } .bk .steps li:nth-child(3) span { background: #E07A5F; color: #FCF5E9; } .bk .steps h3, .bk .play-copy h3 { font-family: "Grandstander", cursive; font-weight: 900; font-size: clamp(28px, 7.4vw, 50px); } .bk .facts b { font-family: "Grandstander", cursive; font-weight: 900; font-size: 46px; color: #E07A5F; text-shadow: 3px 3px 0 #3D405B; } .bk .facts li { border-top: 3px dashed #EDE2CC; } .bk .browser { border-radius: 26px; box-shadow: 12px 12px 0 #3D405B; border: 3px solid #3D405B; } .bk .chrome { background: #3D405B; color: #FCF5E9; } .bk .chrome i:nth-child(1) { background: #E07A5F; } .bk .chrome i:nth-child(2) { background: #F2CC5B; } .bk .chrome i:nth-child(3) { background: #81B29A; } .bk .chrome span { background: rgba(255,255,255,.12); } .bk .phone { background: #3D405B; box-shadow: 8px 8px 0 #E07A5F; } .hand { font-family: "Gochi Hand", cursive; font-size: 1.2em; color: #D4674B; } .game-card { background: #F5EBDB; border-radius: 26px; padding: 26px 16px 70px; box-shadow: 8px 8px 0 #3D405B; border: 3px solid #3D405B; position: relative; } .circles { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; } .c { width: clamp(72px, 23vw, 120px); aspect-ratio: 1; border-radius: 50%; border: 3px dashed #9a97a4; position: relative; transition: border-color .3s; } .c::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--col); box-shadow: 4px 4px 0 #3D405B; transform: scale(0); transition: transform .55s cubic-bezier(.3,1.6,.5,1); } .c.filled::after { transform: scale(1); } .c.filled { border-color: transparent; } .words { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .words button { font-family: "Grandstander", cursive; font-weight: 900; font-size: 18px; letter-spacing: .02em; min-height: 48px; padding: 10px 20px; border-radius: 99px; border: 0; background: var(--col); color: #fff; box-shadow: 0 5px 0 rgba(61,64,91,.55); transition: transform .15s, box-shadow .15s, opacity .3s; } .words button[data-w="yellow"] { color: #3D405B; } .words button:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(61,64,91,.55); } .words button.done { opacity: .35; pointer-events: none; } .yay { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; margin: 0; font-family: "Gochi Hand", cursive; font-size: 28px; color: #D4674B; opacity: 0; transform: rotate(-3deg) scale(.8); transition: .5s cubic-bezier(.3,1.6,.5,1); pointer-events: none; } .yay.on { opacity: 1; transform: rotate(-3deg) scale(1); pointer-events: auto; } .yay button { font-family: "Nunito", sans-serif; font-weight: 800; font-size: 14px; background: none; border: 2px solid #3D405B; border-radius: 99px; min-height: 36px; padding: 4px 14px; color: #3D405B; vertical-align: middle; } .langs { padding: 18px 18px 20px; background: #fff; border: 2px solid #EDE2CC; border-radius: 20px; box-shadow: 0 12px 30px -20px rgba(61,64,91,.4); } .lang-btns { display: flex; gap: 8px; margin: 10px 0 14px; } .lang-btns button { font-family: "Nunito", sans-serif; font-weight: 800; border: 2px solid #3D405B; background: transparent; border-radius: 99px; min-height: 44px; min-width: 56px; padding: 4px 16px; color: #3D405B; } .lang-btns button[aria-pressed="true"] { background: #F2CC5B; box-shadow: 3px 3px 0 #3D405B; } .lang-out { margin: 0; font-family: "Grandstander", cursive; font-weight: 900; font-size: 24px; line-height: 1.1; min-height: 2.2em; color: #3D405B; } /* ========================================================= BACKSTAGE ========================================================= */ .backstage { padding: var(--section) 0 calc(var(--section) * .6); } .backstage h2 { padding: 0 var(--gutter); margin: 0 0 48px; font-size: clamp(40px, 11.5vw, 128px); line-height: .94; letter-spacing: -.04em; font-weight: 600; } .backstage h2 em { color: var(--signal); } .process { list-style: none; margin: 0 0 72px; padding: 0 var(--gutter); display: grid; gap: 32px; } .process li { border-left: 1px solid var(--line); padding: 0 0 0 18px; } .process span { font-family: var(--f-mono); font-size: 12px; color: var(--signal); } .process h3 { font-size: 26px; font-weight: 500; letter-spacing: -.02em; margin: 8px 0 8px; } .process p { color: var(--muted); margin: 0; font-size: 15.5px; } .marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 16px 0; } .marquee > div { display: flex; gap: 24px; width: max-content; animation: marq 40s linear infinite; align-items: center; } .marquee span { font-size: 28px; font-weight: 300; letter-spacing: -.03em; white-space: nowrap; } .marquee i { font-style: normal; color: var(--signal); font-size: 22px; } @keyframes marq { to { transform: translateX(-50%); } } /* ========================================================= CONTACT ========================================================= */ .contact { min-height: 88svh; padding: var(--section) var(--gutter) 72px; display: flex; flex-direction: column; justify-content: center; } .contact h2 { font-size: clamp(60px, 19vw, 240px); line-height: .86; letter-spacing: -.055em; font-weight: 700; margin: 16px 0 28px; } .contact h2 em { letter-spacing: -.02em; } .contact-lede { font-size: 18px; max-width: 460px; margin: 0 0 32px; } .big-btn { display: flex; justify-content: space-between; align-items: center; gap: 18px; text-decoration: none; font-size: 22px; font-weight: 500; letter-spacing: -.02em; min-height: 60px; padding: 14px 26px; border-radius: 99px; background: var(--ink); color: var(--bone); transition: gap .4s var(--ease), padding .4s var(--ease); } .foot { display: grid; gap: 10px; padding: 24px var(--gutter) 72px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--line); } .foot a { min-height: 32px; display: inline-flex; align-items: center; } /* ========================================================= ≥ 600px · tablet ========================================================= */ @media (min-width: 600px) { :root { --gutter: 36px; --section: 128px; } .top nav a:not(.nav-cta) { display: inline-flex; align-items: center; } .desk { height: 380px; } .spec-tag { width: 200px; padding: 30px 36px 20px 22px; } .spec-tag small { font-size: 9px; letter-spacing: .18em; } .spec-tag strong { font-size: 30px; } .hero-foot { grid-template-columns: 1fr auto; align-items: end; } .index-head { grid-template-columns: 1fr auto; align-items: end; } .rows a { grid-template-columns: 56px 1fr auto 36px; padding: 28px 0; } .rows .k { grid-column: 3; grid-row: 1; text-align: right; } .rows .n { align-self: center; padding: 0; } .steps li { flex-basis: 60%; } .builder { grid-template-columns: 200px 1fr; gap: 18px; padding: 20px; margin: 0; } .pieces { grid-template-columns: 1fr; align-content: start; } .piece { grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 12px 8px 8px; font-size: 14px; } .piece .ico { grid-row: 1 / 3; width: 46px; height: 46px; margin: 0; } .facts { grid-template-columns: repeat(3, 1fr); gap: 24px; } .facts li { grid-template-columns: 1fr; align-items: start; gap: 8px; padding: 18px 0 0; } .bb .facts b { font-size: 72px; } .bk .facts b { font-size: 64px; } .process { grid-template-columns: 1fr 1fr; row-gap: 48px; } .foot { display: flex; justify-content: space-between; flex-wrap: wrap; } .big-btn { display: inline-flex; font-size: 30px; } .hud { font-size: 11px; } } /* ========================================================= ≥ 960px · desktop ========================================================= */ @media (min-width: 960px) { :root { --gutter: clamp(36px, 4vw, 56px); --section: 18vh; } body { font-size: 17px; } .top { padding: 18px var(--gutter); } .top nav { gap: 32px; font-size: 12px; } .nav-cta { border: 0; padding: 0; min-height: 0; } .hud { right: auto; left: var(--gutter); bottom: 18px; padding: 8px 12px; gap: 10px; } .hud-label, .hud b { font-size: 11px; } .hud-bar { display: block; } .hero { min-height: 100svh; padding: 120px var(--gutter) 96px; justify-content: flex-end; gap: 36px; } .hero-title { font-size: clamp(56px, min(12vw, 21vh), 210px); } .hero-foot p { font-size: 18px; } .desk { position: absolute; inset: 0; height: auto; margin: 0; z-index: 3; pointer-events: none; } .spec { pointer-events: auto; } .spec-tag { --x: 62%; --y: 14%; } .spec-bk { --x: 80%; --y: 44%; } .spec-swatch { --x: 70%; --y: 66%; } .spec-type { --x: 54%; --y: 48%; } .spec-dot { --x: 90%; --y: 12%; } .spec-tag { width: 220px; } .bk-tile { width: 92px; height: 92px; border-radius: 24px; font-size: 52px; box-shadow: 7px 7px 0 #3D405B; } .bk-tile i { right: 16px; bottom: 16px; } .bk-word { font-size: 30px; width: auto; } .spec-swatch { grid-template-columns: repeat(5, 30px); gap: 6px; padding: 14px; } .spec-swatch span { height: 56px; } .spec-swatch small { font-size: 9.5px; } .aa-serif { font-size: 70px; } .aa-kid { font-size: 64px; text-shadow: 4px 4px 0 #E07A5F; } .spec-dot span { width: 64px; height: 64px; box-shadow: 5px 5px 0 #3D405B; } .desk-hint { right: calc(var(--gutter) + 90px); top: 190px; bottom: auto; font-size: 20px; transform: rotate(4deg); } .rows .t { font-size: clamp(30px, 6vw, 84px); } .rows a:hover { padding-left: 18px; color: var(--signal); } .rows a:hover .arrow { transform: rotate(-45deg); } .row-yours:hover .t em { color: var(--signal); } .peek { display: block; position: fixed; left: 0; top: 0; width: 380px; aspect-ratio: 16/10; object-fit: cover; object-position: top; pointer-events: none; z-index: 1; border-radius: 6px; opacity: 0; transform: translate(var(--mx, 0), var(--my, 0)) translate(-50%, -50%) rotate(-3deg) scale(.85); transition: opacity .3s, transform .45s var(--ease); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); } .peek.on { opacity: 1; transform: translate(var(--mx, 0), var(--my, 0)) translate(-50%, -50%) rotate(-3deg) scale(1); } .case-intro { grid-template-columns: repeat(12, 1fr); gap: 20px 24px; align-items: end; margin-bottom: 8vh; } .case-num, .bb-mark, .bk-logo { grid-column: 1 / -1; } .case h2 { grid-column: 1 / 9; } .bb-lede, .bk-lede { grid-column: 8 / -1; margin-bottom: 1em; } .case-desc { grid-column: 1 / 7; font-size: 18px; } .meta { grid-column: 8 / -1; margin: 0; gap: 14px; } .meta div { grid-template-columns: 90px 1fr; } .bb-mark { width: 84px; } .bk-logo { width: 84px; height: 84px; font-size: 46px; border-radius: 22px; box-shadow: 7px 7px 0 #3D405B; } /* pinned stage: page scroll drives the screenshots and the captions */ .pin { height: 280vh; position: relative; } .pin-stage { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(260px, 4fr) 8fr; gap: 4vw; align-items: center; } .swipe-hint { display: none; } .steps { display: grid; margin: 0; padding: 0; overflow: visible; } .steps li { grid-area: 1 / 1; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; } .steps li.on { opacity: 1; transform: none; } .steps span { margin-bottom: 14px; } .steps p { max-width: 380px; } .bb .steps span { font-size: 30px; } .bk .steps span { width: 48px; height: 48px; font-size: 24px; } .devices { display: block; margin: 0; height: min(76vh, 640px); } .browser { display: flex; flex-direction: column; margin: 0; position: absolute; inset: 0 12% 0 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -40px rgba(35,33,28,.55), 0 0 0 1px rgba(0,0,0,.06); } .browser .screen { flex: 1; } .phone { position: absolute; right: 0; bottom: -4%; width: min(26%, 220px); border-radius: 30px; padding: 8px; } .phone .screen { border-radius: 23px; } .bb .devices::before { content: ""; position: absolute; inset: 24px 9% -24px 24px; border: 1px solid #B98B57; opacity: .6; } .play { grid-template-columns: 5fr 7fr; column-gap: 5vw; row-gap: 32px; align-items: center; margin: 14vh 0 10vh; } .bk-play { grid-template-rows: auto auto; } .bk-play .play-copy { grid-column: 1; grid-row: 1; align-self: end; } .bk-play .game { grid-column: 2; grid-row: 1 / 3; } .bk-play .langs { grid-column: 1; grid-row: 2; align-self: start; } .play-copy p { max-width: 420px; } .builder { grid-template-columns: 220px 1fr; gap: 20px; padding: 22px; } .game-card { padding: 40px 40px 84px; border-radius: 28px; box-shadow: 10px 10px 0 #3D405B; } .circles { gap: 28px; margin-bottom: 30px; } .words button { font-size: 20px; padding: 12px 22px; } .yay { font-size: 30px; bottom: 20px; } .lang-out { font-size: 26px; } .backstage h2 { margin-bottom: 10vh; } .process { grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 14vh; } .process li { padding: 0 24px 0 20px; } .process li:nth-child(2) { margin-top: 60px; } .process li:nth-child(3) { margin-top: 120px; } .process li:nth-child(4) { margin-top: 180px; } .process h3 { font-size: 30px; margin: 14px 0 10px; } .process p { font-size: 16px; } .marquee { padding: 22px 0; } .marquee > div { gap: 32px; } .marquee span { font-size: clamp(28px, 4vw, 56px); } .marquee i { font-size: 28px; } .contact { min-height: 100svh; } .contact-lede { font-size: 20px; margin-bottom: 40px; } .big-btn { font-size: clamp(22px, 3vw, 34px); padding: 18px 30px; } .big-btn:hover { gap: 34px; padding-right: 22px; } .foot { padding-bottom: 80px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } }