/* ========================================================================== Ana Dela Cruz · Social Media Manager portfolio template "Build-a-Feed" — sticker-pop design system -------------------------------------------------------------------------- 1. Fonts 6. Hero 11. Results 2. Theme tokens 7. Platforms 12. Testimonials (DM chat) 3. Base 8. Build-a-Feed 13. Tools / Packages / FAQ 4. Components 9. Services 14. Contact / Footer 5. Nav 10. Cases / Calendar 15. Demo switcher, cursor, motion ========================================================================== */ /* 1. FONTS (self-hosted, SIL Open Font License — see fonts/OFL-*.txt) ------- */ @font-face { font-family: "Bricolage"; src: url("../fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2-variations"), url("../fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; } @font-face { font-family: "Jakarta"; src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } /* 2. THEME TOKENS ------------------------------------------------------------ EDIT: brand colours live here. Each theme sets the same variables. --c1..--c4 are accent colours, --on-cX is the readable text colour on top. */ :root, [data-theme="pop"] { --bg: #FFF7EC; --bg-alt: #FFEFD8; --surface: #FFFFFF; --ink: #121212; --ink-2: #44403A; --line: #121212; --shadow: #121212; --shadow-alt: #121212; --dots: rgba(18, 18, 18, .10); --c1: #FF3D8B; --on-c1: #121212; --c2: #2F5BFF; --on-c2: #FFFFFF; --c3: #FFD23F; --on-c3: #121212; --c4: #2BD99F; --on-c4: #121212; --chart-line: #FF3D8B; /* section bands */ --feed-bg: #2448E8; --feed-ink: #FFFFFF; --feed-ink-2: #EEF1FF; --feed-dots: rgba(255, 255, 255, .16); --case-bg: #FFD23F; --case-ink: #121212; --res-bg: #121212; --res-ink: #FFF7EC; --love-bg: #FF3D8B; --love-ink: #121212; --contact-bg: #FFD23F; --contact-ink: #121212; --foot-bg: #121212; --foot-ink: #FFF7EC; /* phone UI */ --ui-bg: #FFFFFF; --ui-ink: #111111; --ui-2: #737373; --ui-line: #E8E8E8; --ui-btn: #EFEFEF; --ui-accent: #2F5BFF; --ui-ph: #F1F1F1; --bw: 3px; --r: 22px; } [data-theme="noir"] { --bg: #0B0B0C; --bg-alt: #141416; --surface: #18181B; --ink: #F4F4EF; --ink-2: #BDBDB5; --line: #F4F4EF; --shadow: #C6FF3D; --shadow-alt: #F4F4EF; --dots: rgba(244, 244, 239, .09); --c1: #C6FF3D; --on-c1: #0B0B0C; --c2: #F4F4EF; --on-c2: #0B0B0C; --c3: #26262B; --on-c3: #C6FF3D; --c4: #3A3A41; --on-c4: #F4F4EF; --chart-line: #C6FF3D; --feed-bg: #101012; --feed-ink: #F4F4EF; --feed-ink-2: #C9C9C2; --feed-dots: rgba(198, 255, 61, .12); --case-bg: #C6FF3D; --case-ink: #0B0B0C; --res-bg: #F4F4EF; --res-ink: #0B0B0C; --love-bg: #151517; --love-ink: #F4F4EF; --contact-bg: #C6FF3D; --contact-ink: #0B0B0C; --foot-bg: #000000; --foot-ink: #F4F4EF; --ui-bg: #000000; --ui-ink: #F5F5F5; --ui-2: #A0A0A0; --ui-line: #262626; --ui-btn: #262626; --ui-accent: #C6FF3D; --ui-ph: #121212; --bw: 2px; } [data-theme="pastel"] { --bg: #FBF7FF; --bg-alt: #F2EBFF; --surface: #FFFFFF; --ink: #2B2146; --ink-2: #554B73; --line: #2B2146; --shadow: #2B2146; --shadow-alt: #2B2146; --dots: rgba(43, 33, 70, .09); --c1: #C8B6FF; --on-c1: #2B2146; --c2: #A8EFD0; --on-c2: #2B2146; --c3: #FFEB99; --on-c3: #2B2146; --c4: #FFC4DD; --on-c4: #2B2146; --chart-line: #7A5AF0; --feed-bg: #E4D9FF; --feed-ink: #2B2146; --feed-ink-2: #463B66; --feed-dots: rgba(43, 33, 70, .10); --case-bg: #D7F6E8; --case-ink: #2B2146; --res-bg: #2B2146; --res-ink: #FBF7FF; --love-bg: #FFE1EE; --love-ink: #2B2146; --contact-bg: #FFF2B8; --contact-ink: #2B2146; --foot-bg: #2B2146; --foot-ink: #FBF7FF; --ui-bg: #FFFFFF; --ui-ink: #1F1833; --ui-2: #6E6787; --ui-line: #ECE6F7; --ui-btn: #F1ECFA; --ui-accent: #7A5AF0; --ui-ph: #F4F0FB; --bw: 2.5px; } :root { --f-display: "Bricolage", "Arial Black", "Helvetica Neue", system-ui, sans-serif; --f-body: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --gutter: clamp(16px, 4vw, 48px); --nav-h: 76px; --sh: 4px 4px 0 var(--shadow); --sh-lg: 7px 7px 0 var(--shadow); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); --focus: var(--ink); interpolate-size: allow-keywords; } /* 3. BASE ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; transition: background-color .4s, color .4s; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; line-height: 1.05; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; } [role="list"], .pills, .stats, .plans, .tool-chips, .ticks, .svc-grid, .pf-stats, .pf-hl, .pf-grid, .dm__thread, .cal-legend { list-style: none; } button { font: inherit; color: inherit; } ::selection { background: var(--c3); color: var(--on-c3); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } main:focus, [tabindex="-1"]:focus { outline: none; } abbr[title] { text-decoration: none; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ico--fill { fill: currentColor; stroke: none; } .container { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; } main > section, .footer { overflow-x: clip; } /* Big screens (≥1800px): widen the grid and let type breathe */ @media (min-width: 1800px) { .container { width: min(100% - 2 * var(--gutter), 1560px); } .nav .nav__inner { max-width: 1560px; } .hero__title { font-size: clamp(7.4rem, 4rem + 3vw, 9.6rem); } .sec-title { font-size: clamp(5.2rem, 3rem + 2vw, 6.4rem); } .hero-phone { width: clamp(304px, 17vw, 360px); } .hero-portrait { width: clamp(214px, 11vw, 260px); } .build .build__grid { grid-template-columns: minmax(0, 1fr) clamp(380px, 22vw, 480px) minmax(0, 1fr); } .build .pf-wrap { --ph: min(100cqh, 222cqw, 900px); } .build .build__title { font-size: clamp(4rem, 2rem + 2vw, 5rem); } .build .build__step h3 { font-size: 1.3rem; } .build .build__step p { font-size: 1.05rem; } .build .chart-card { padding: 24px 24px 18px; } .build .notif { max-width: 280px; font-size: .95rem; } .build .notif__txt b { font-size: 1.2rem; } .build .notif__ico { width: 44px; height: 44px; font-size: 1.3rem; } } .skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: .8em 1.2em; border-radius: 999px; background: var(--c3); color: var(--on-c3); border: var(--bw) solid var(--line); font-weight: 800; text-decoration: none; transition: top .2s; } .skip-link:focus { top: 16px; } /* 4. COMPONENTS ------------------------------------------------------------ */ .pill-label { display: inline-flex; align-items: center; gap: .55em; margin: 0 0 1.1rem; padding: .5em .95em; border: 2px solid currentColor; border-radius: 999px; font: 800 .74rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; } .pill-label::before { content: "✦"; font-size: 1.1em; } .hero__avail.pill-label::before { content: none; } .sec-head { max-width: 860px; margin-bottom: clamp(40px, 6vw, 72px); } .sec-head--center { margin-inline: auto; text-align: center; } .sec-title { font-family: var(--f-display); font-weight: 800; font-stretch: 84%; font-size: clamp(2.3rem, 1.15rem + 4.4vw, 5.2rem); line-height: .96; letter-spacing: -.024em; text-wrap: balance; } .sec-lede { max-width: 54ch; margin: 1.2rem 0 0; font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); color: var(--ink-2); text-wrap: pretty; } .sec-head--center .sec-lede { margin-inline: auto; } .hl-box { display: inline-block; padding: .02em .16em .08em; margin: .04em 0; border: var(--bw) solid var(--line); border-radius: .16em; box-shadow: 4px 4px 0 var(--shadow); rotate: -1.6deg; color: var(--on-c1); background: var(--c1); } .hl-box--c2 { background: var(--c2); color: var(--on-c2); rotate: 1.4deg; } .hl-box--c3 { background: var(--c3); color: var(--on-c3); } .hl-box--c4 { background: var(--c4); color: var(--on-c4); rotate: 1.2deg; } .hl { font-weight: 800; padding: 0 .12em; border-radius: .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hl--c1 { background: var(--c1); color: var(--on-c1); } .hl--c3 { background: var(--c3); color: var(--on-c3); } .hl--c4 { background: var(--c4); color: var(--on-c4); } .btn { --b-bg: var(--surface); --b-ink: var(--ink); --b-sh: var(--shadow); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .85em 1.35em; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--b-bg); color: var(--b-ink); box-shadow: 4px 4px 0 var(--b-sh); font: 800 1rem/1.1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease-pop), box-shadow .25s var(--ease-pop), background-color .3s; } .btn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 7px 7px 0 var(--b-sh); } .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--b-sh); } .btn .ico { transition: transform .3s var(--ease-pop); } .btn:hover .ico { transform: translateX(3px); } .btn--c1 { --b-bg: var(--c1); --b-ink: var(--on-c1); --b-sh: var(--shadow-alt); } .btn--c2 { --b-bg: var(--c2); --b-ink: var(--on-c2); } .btn--c3 { --b-bg: var(--c3); --b-ink: var(--on-c3); } .btn--ghost { --b-bg: var(--surface); } .btn--sm { padding: .62em 1.05em; font-size: .9rem; box-shadow: 3px 3px 0 var(--b-sh); } .btn--lg { padding: 1em 1.6em; font-size: clamp(1rem, .95rem + .25vw, 1.1rem); } .live-dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; background: #20C46B; box-shadow: 0 0 0 0 rgba(32, 196, 107, .55); animation: live 1.8s infinite; } @keyframes live { 70% { box-shadow: 0 0 0 .55em rgba(32, 196, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(32, 196, 107, 0); } } .ticks li { position: relative; padding-left: 2em; margin: .55em 0; } .ticks li::before { content: ""; position: absolute; left: 0; top: .12em; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--c4); border: 2px solid var(--line); } .ticks li::after { content: ""; position: absolute; left: .42em; top: .5em; width: .55em; height: .3em; border: 2.5px solid var(--on-c4); border-top: 0; border-right: 0; rotate: -45deg; } .chip { display: block; padding: .36em .5em; margin-top: 4px; border: 1.5px solid var(--line); border-radius: 7px; font: 800 .68rem/1 var(--f-body); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip--reel { background: var(--c1); color: var(--on-c1); } .chip--carousel { background: var(--c2); color: var(--on-c2); } .chip--story { background: var(--c3); color: var(--on-c3); } .chip--live { background: var(--c4); color: var(--on-c4); } /* 5. NAV & PROGRESS -------------------------------------------------------- */ .progress { position: fixed; inset: 0 0 auto; height: 4px; z-index: 80; pointer-events: none; display: none; } .js .progress { display: block; } .progress__bar { display: block; height: 100%; background: var(--c1); transform-origin: 0 50%; transform: scaleX(0); border-right: 2px solid var(--line); } .nav { position: fixed; inset: 0 0 auto; z-index: 60; padding: 12px var(--gutter) 0; pointer-events: none; transition: transform .5s var(--ease-out); } .nav.is-hidden { transform: translateY(calc(-100% - 12px)); } .nav__inner { pointer-events: auto; position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: 1320px; margin: 0 auto; padding: 7px 7px 7px 16px; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: 999px; box-shadow: var(--sh); } .nav__logo { display: inline-flex; align-items: center; gap: .45em; text-decoration: none; font: 800 1.2rem/1 var(--f-display); letter-spacing: -.03em; margin-right: auto; } .nav__logo-mark { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--c1); color: var(--on-c1); border: 2px solid var(--line); transition: rotate .6s var(--ease-pop); } .nav__logo:hover .nav__logo-mark { rotate: 180deg; } .nav__logo-mark .ico { width: 1em; height: 1em; } .nav__logo-dot { color: var(--c1); -webkit-text-stroke: 1px var(--line); } [data-theme="pastel"] .nav__logo-dot { color: #7A5AF0; -webkit-text-stroke: 0; } .nav__links ul { display: flex; gap: 4px; list-style: none; } .nav__links a { display: block; padding: .55em .9em; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .95rem; transition: background-color .2s, color .2s; } .nav__links a:hover { background: var(--c3); color: var(--on-c3); } .nav__toggle { display: none; align-items: center; gap: .55em; padding: .6em 1em; border: 2px solid var(--line); border-radius: 999px; background: var(--c3); color: var(--on-c3); font-weight: 800; font-size: .9rem; cursor: pointer; } .nav__toggle-lines { display: grid; gap: 4px; width: 16px; } .nav__toggle-lines i { display: block; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease-out); } .nav__toggle[aria-expanded="true"] .nav__toggle-lines i:first-child { transform: translateY(3.25px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-lines i:last-child { transform: translateY(-3.25px) rotate(-45deg); } .menu { pointer-events: auto; position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 110px var(--gutter) 40px; background: var(--c3); color: var(--on-c3); overflow-y: auto; } .menu[hidden] { display: none; } .menu__list { list-style: none; } .menu__list a { display: block; padding: .12em 0; text-decoration: none; font: 800 clamp(2.4rem, 11vw, 4rem)/1.02 var(--f-display); font-stretch: 80%; letter-spacing: -.02em; } .menu__list a:hover { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .1em; } .menu__cta { align-self: flex-start; } @media (max-width: 899.98px) { :root { --nav-h: 68px; } .nav__links, .nav__cta { display: none; } .nav__toggle { display: inline-flex; } .nav__inner { padding: 6px 6px 6px 14px; } .nav__logo { font-size: 1.08rem; } } /* 6. HERO ------------------------------------------------------------------ */ .hero { position: relative; display: flex; align-items: center; min-height: 100svh; overflow: clip; padding: calc(var(--nav-h) + clamp(24px, 3vw, 44px)) 0 clamp(64px, 6vw, 84px); background-color: var(--bg); background-image: radial-gradient(var(--dots) 1.4px, transparent 1.6px); background-size: 24px 24px; } .hero__bg { position: absolute; inset: 0; pointer-events: none; } .hero__sun { position: absolute; right: max(-8vw, calc(50% - 760px)); top: 50%; width: min(52vw, 760px); aspect-ratio: 1; translate: 0 -46%; border-radius: 50%; background: var(--c3); border: var(--bw) solid var(--line); } [data-theme="noir"] .hero__sun { background: radial-gradient(circle at 50% 50%, #1d1d21 0 55%, #141416 56% 100%); border-color: #2c2c31; } .hero__swoosh { position: absolute; left: -4vw; bottom: -13%; width: min(60vw, 820px); fill: none; stroke: var(--c1); stroke-width: 16; stroke-linecap: round; opacity: .9; } .twinkle { position: absolute; width: 34px; height: 34px; color: var(--c2); animation: twinkle 3.2s var(--ease-out) infinite; } .twinkle--1 { left: 6%; top: 18%; color: var(--c1); } .twinkle--2 { left: 46%; top: 12%; width: 22px; height: 22px; animation-delay: -1.2s; } .twinkle--3 { left: 42%; bottom: 14%; width: 26px; height: 26px; color: var(--c4); animation-delay: -2.1s; } [data-theme="noir"] .twinkle { color: var(--c1); } @keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.55) rotate(45deg); } } .hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .hero__copy { position: relative; z-index: 2; } .hero__avail { background: var(--surface); border-color: var(--line); box-shadow: 3px 3px 0 var(--shadow); text-transform: none; letter-spacing: 0; font-size: .86rem; font-weight: 700; } .hero__title { font-family: var(--f-display); font-weight: 800; font-stretch: 92%; font-size: clamp(3rem, 1rem + 5.9vw, 7.4rem); line-height: .92; letter-spacing: -.028em; margin: .12em 0 .42em; } .hero__line { display: block; } .hero__marker { display: inline-block; margin: .07em 0 .08em -.03em; padding: .01em .14em .07em; font-stretch: 75%; background: var(--c1); color: var(--on-c1); border: var(--bw) solid var(--line); border-radius: .13em; box-shadow: 7px 7px 0 var(--shadow); rotate: -2.5deg; } .hero__scroll-word { position: relative; display: inline-block; white-space: nowrap; } .hero__underline { position: absolute; left: 0; right: 0; bottom: -.16em; width: 100%; height: .3em; overflow: visible; fill: none; stroke: var(--c2); stroke-width: 9; stroke-linecap: round; } [data-theme="noir"] .hero__underline { stroke: var(--c1); } [data-theme="pastel"] .hero__underline { stroke: #7A5AF0; } .hero__lede { max-width: 38ch; font-size: clamp(1.06rem, .95rem + .45vw, 1.3rem); color: var(--ink-2); text-wrap: pretty; } .hero__lede strong { color: var(--ink); } .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6rem 0 1.7rem; } .hero__proof { display: flex; align-items: center; gap: 14px; } .hero__proof p { margin: 0; font-size: .92rem; line-height: 1.35; color: var(--ink-2); } .hero__proof strong { color: var(--ink); } .stars { color: #F5A400; letter-spacing: .06em; } [data-theme="noir"] .stars { color: var(--c1); } .ava-stack { display: flex; list-style: none; } .ava-stack li { width: 42px; height: 42px; margin-left: -12px; border-radius: 50%; overflow: hidden; border: 2.5px solid var(--line); background: var(--surface); } .ava-stack li:first-child { margin-left: 0; } .ava-stack img { width: 100%; height: 100%; object-fit: cover; } .hero__visual { position: relative; display: grid; place-items: center; min-height: clamp(520px, 46vw, 680px); } .hero-phone { position: relative; z-index: 2; width: clamp(236px, 21vw, 304px); aspect-ratio: 300 / 620; rotate: 4deg; container-type: inline-size; } .hero-phone__frame { position: absolute; inset: 0; padding: 3.2cqw; border-radius: 15cqw; background: #111; border: var(--bw) solid var(--line); box-shadow: 10px 12px 0 var(--shadow), inset 0 0 0 1.4cqw #2b2b31; } .hero-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 12cqw; background: var(--ui-bg); color: var(--ui-ink); font-size: 3.7cqw; line-height: 1.3; } .hp-status { display: flex; align-items: center; justify-content: space-between; height: 3.2em; padding: 0 1.6em 0 2em; font-weight: 800; font-size: 1.05em; } .hp-status__pill { width: 6.6em; height: 1.9em; border-radius: 2em; background: #000; } .hp-status__icons { display: flex; gap: .3em; } .hp-status__icons i { width: 1.1em; height: .75em; border-radius: .2em; background: currentColor; } .hp-status__icons i:last-child { width: 1.7em; } .hp-top { display: flex; align-items: center; justify-content: space-between; height: 3em; padding: 0 1.1em; } .hp-top__logo { font: 800 1.75em/1 var(--f-display); font-stretch: 80%; letter-spacing: -.04em; } .hp-top__icons { display: flex; gap: .9em; } .hp-top__icons .ico { width: 1.7em; height: 1.7em; stroke-width: 2; } .hp-feed { position: absolute; inset: 6.4em 0 0; overflow: hidden; } .hp-feed__track.is-looping { animation: hpScroll 34s linear infinite; } @keyframes hpScroll { to { transform: translateY(-50%); } } .hp-post { padding-bottom: 1em; } .hp-post__head { display: flex; align-items: center; gap: .6em; padding: .55em 1em; font-size: 1em; } .hp-post__head b { font-weight: 800; } .hp-ava { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--c); color: #111; font-weight: 800; font-size: .9em; box-shadow: 0 0 0 .14em var(--ui-bg), 0 0 0 .3em #FF3D8B; } .hp-dots { margin-left: auto; letter-spacing: .05em; font-size: .8em; color: var(--ui-2); } .hp-post img { width: 100%; aspect-ratio: 1; object-fit: cover; } .hp-post__actions { display: flex; gap: .9em; padding: .7em 1em .3em; } .hp-post__actions .ico { width: 1.75em; height: 1.75em; stroke-width: 2; } .hp-post__actions .ico--liked { fill: #FF3040; stroke: #FF3040; } .hp-save { margin-left: auto; } .hp-post__meta { display: grid; gap: .1em; margin: 0; padding: 0 1em; font-size: .95em; } .hp-post__meta span { color: var(--ui-ink); } .hp-burst { position: absolute; left: 50%; top: 42%; width: 30%; translate: -50% -50%; color: #fff; opacity: 0; pointer-events: none; filter: drop-shadow(0 .4em .9em rgba(0, 0, 0, .3)); } .hp-burst .ico { width: 100%; height: auto; aspect-ratio: 1; } .hp-toasts { position: absolute; left: .7em; right: .7em; top: 3.4em; z-index: 3; } .hp-toast { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: .65em; padding: .75em .9em; border-radius: 1.3em; background: rgba(255, 255, 255, .94); color: #111; border: 2px solid #111; box-shadow: .25em .25em 0 #111; font-size: .98em; line-height: 1.25; opacity: 0; } .hp-toast:first-child { opacity: 1; } .js .hp-toast:first-child { opacity: 0; } .hp-toast__ico { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: #FFE3EF; } [data-theme="noir"] .hp-toast { background: rgba(28, 28, 30, .96); color: #F5F5F5; border-color: #C6FF3D; box-shadow: .25em .25em 0 #C6FF3D; } [data-theme="noir"] .hp-toast__ico { background: #2a2a2e; } .hero-portrait { position: absolute; z-index: 3; left: max(-2%, -24px); bottom: 2%; width: clamp(150px, 14.5vw, 214px); margin: 0; padding: 9px 9px 0; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 16px; box-shadow: var(--sh-lg); rotate: -8deg; } .hero-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 9px; border: 2px solid var(--line); } .hero-portrait figcaption { padding: .5em 0 .65em; text-align: center; font: 800 clamp(.95rem, .8rem + .4vw, 1.15rem)/1 var(--f-display); } .hero-sticker { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .4em; padding: .55em .95em; border: var(--bw) solid var(--line); border-radius: 999px; box-shadow: var(--sh); font: 800 clamp(.88rem, .75rem + .4vw, 1.08rem)/1 var(--f-display); white-space: nowrap; } .hero-sticker--growth { left: 4%; top: 10%; background: var(--c3); color: var(--on-c3); rotate: -7deg; animation: bob 5s ease-in-out infinite; } .hero-sticker--rating { right: 4%; bottom: 16%; background: var(--c4); color: var(--on-c4); rotate: 8deg; animation: bob 4.4s ease-in-out -1.5s infinite; } .hero-sticker--handle { right: -1%; top: 24%; background: var(--c2); color: var(--on-c2); rotate: 5deg; animation: bob 4.8s ease-in-out -.8s infinite; } .hero-sticker--handle .ico { color: var(--on-c2); } .hero-sticker--handle .ico path:last-child { stroke: var(--c2); } @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } .hero__cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: inline-flex; align-items: center; gap: .45em; z-index: 3; padding: .45em .9em; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); font-weight: 800; font-size: .78rem; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; } .hero__cue .ico { rotate: 90deg; animation: cue 1.6s ease-in-out infinite; } @keyframes cue { 50% { translate: 0 3px; } } @media (max-width: 899.98px) { .hero { min-height: auto; padding-top: calc(var(--nav-h) + 36px); } .hero__grid { grid-template-columns: 1fr; gap: 28px; } .hero__title { font-size: clamp(2.9rem, 1rem + 9.6vw, 5.4rem); } .hero__visual { min-height: 0; height: clamp(500px, 120vw, 640px); max-width: 520px; width: 100%; margin-inline: auto; } .hero-phone { width: clamp(220px, 56vw, 280px); } .hero__sun { right: -30vw; top: auto; bottom: 4%; width: 110vw; translate: 0 0; } .hero-portrait { left: 0; bottom: 4%; width: clamp(124px, 34vw, 180px); } .hero-sticker--growth { left: 0; top: 6%; } .hero-sticker--handle { right: 0; top: 30%; } .hero-sticker--rating { right: 2%; bottom: 10%; } .hero__cue { display: none; } .hero__swoosh { width: 120vw; bottom: 34%; opacity: .7; } } @media (max-width: 419.98px) { .hero__ctas .btn { flex: 1 1 100%; } .hero-sticker { font-size: .82rem; } } /* 7. PLATFORMS ------------------------------------------------------------- */ .platforms { position: relative; padding: clamp(44px, 5.5vw, 72px) 0 clamp(52px, 6vw, 80px); background: var(--bg-alt); border-block: var(--bw) solid var(--line); overflow: clip; } .platforms__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.4vw, 30px); text-align: center; } .platforms__title { font: 800 clamp(1.7rem, 1.2rem + 1.9vw, 2.7rem)/1 var(--f-display); font-stretch: 84%; letter-spacing: -.025em; } .platforms__title span { font-weight: 400; font-stretch: 100%; color: var(--ink-2); } .pills { display: flex; flex-wrap: wrap; gap: 14px 12px; justify-content: center; } .pill { display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.05em .6em .75em; border: var(--bw) solid var(--line); border-radius: 999px; box-shadow: var(--sh); font: 800 clamp(1rem, .92rem + .3vw, 1.2rem)/1 var(--f-display); letter-spacing: -.005em; background: var(--surface); color: var(--ink); } .pill .ico { width: 1.45em; height: 1.45em; padding: .22em; border-radius: 50%; background: var(--surface); color: var(--ink); border: 2px solid var(--line); stroke-width: 2.4; } .pill--c1 { background: var(--c1); color: var(--on-c1); } .pill--c2 { background: var(--c2); color: var(--on-c2); } .pill--c3 { background: var(--c3); color: var(--on-c3); } .pill--c4 { background: var(--c4); color: var(--on-c4); } .pill:nth-child(odd) { rotate: -2.5deg; } .pill:nth-child(even) { rotate: 2deg; } .pill:nth-child(3n) { rotate: -1deg; } /* 8. BUILD-A-FEED (signature) -------------------------------------------- */ .build { --focus: var(--feed-ink); position: relative; overflow: clip; color: var(--feed-ink); padding: clamp(80px, 10vw, 140px) 0; background-color: var(--feed-bg); background-image: radial-gradient(var(--feed-dots) 1.5px, transparent 1.7px); background-size: 26px 26px; } .build__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 27vw, 380px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; } .build__copy { position: relative; z-index: 3; } .build__copy .pill-label { color: var(--feed-ink); } .build__title { font: 800 clamp(2.1rem, 1rem + 3vw, 4rem)/.96 var(--f-display); font-stretch: 84%; letter-spacing: -.024em; text-wrap: balance; } .build__zero { position: relative; display: inline-block; opacity: .9; } .build__zero::after { content: ""; position: absolute; left: -4%; right: -4%; top: 52%; height: .11em; background: var(--c1); border-radius: 1em; rotate: -6deg; border: 2px solid var(--line); } [data-theme="pop"] .build__zero::after { background: var(--c3); } .build .hl-box--c3 { border-color: var(--line); } .build__swap { margin-top: clamp(24px, 3vw, 40px); } .build__steps { list-style: none; display: grid; gap: 12px; } .build__step { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; padding: 14px 16px 14px 14px; border-radius: 16px; background: color-mix(in srgb, var(--feed-ink) 9%, transparent); border: 2px solid color-mix(in srgb, var(--feed-ink) 26%, transparent); } .build__num { grid-row: span 2; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: var(--c3); color: var(--on-c3); border: 2px solid var(--line); font: 800 .85rem/1 var(--f-body); } [data-theme="noir"] .build__num { background: var(--c1); color: var(--on-c1); } .build__step h3 { font: 800 1.12rem/1.15 var(--f-display); letter-spacing: -.01em; margin-top: .15em; } .build__step p { margin: .3em 0 0; font-size: .93rem; line-height: 1.45; color: var(--feed-ink-2); } .build__bar { position: absolute; left: 14px; right: 14px; top: -1px; height: 3px; border-radius: 3px; overflow: hidden; background: transparent; } .build__bar i { display: block; height: 100%; background: var(--c3); transform-origin: 0 50%; transform: scaleX(0); } [data-theme="noir"] .build__bar i { background: var(--c1); } .build__result { margin-top: 28px; } .build__stamp { display: inline-flex; align-items: center; gap: .45em; padding: .5em .9em; margin-bottom: 14px; background: var(--c3); color: var(--on-c3); border: 2px solid var(--line); border-radius: 999px; box-shadow: 3px 3px 0 var(--shadow); font: 800 .82rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .08em; rotate: -3deg; } .build__stamp .ico path:last-child { stroke: var(--c3); } [data-theme="noir"] .build__stamp { background: var(--c1); color: var(--on-c1); } [data-theme="noir"] .build__stamp .ico path:last-child { stroke: var(--c1); } .build__result-title { font: 800 clamp(1.9rem, 1rem + 2.5vw, 3.3rem)/.98 var(--f-display); font-stretch: 86%; letter-spacing: -.035em; text-wrap: balance; } .build__handle { color: var(--c3); } [data-theme="noir"] .build__handle { color: var(--c1); } [data-theme="pastel"] .build__handle { color: #6A48E8; } .build__result p { margin: .8em 0 1.1em; color: var(--feed-ink-2); max-width: 40ch; } .build__stage { position: relative; z-index: 4; height: 660px; container-type: size; display: grid; place-items: center; } .pf-wrap { --ph: min(100cqh, 222cqw, 690px); position: relative; height: var(--ph); width: calc(var(--ph) * .45); font-size: calc(var(--ph) / 62); perspective: 1500px; } .pf-floor { position: absolute; left: 6%; right: 6%; bottom: -5%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .35), transparent); } .pf-phone { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-10deg) rotateX(4deg) rotateZ(1.5deg); } .pf-phone__edge { position: absolute; inset: 0; border-radius: 5em; background: #34343b; border: 1px solid rgba(255, 255, 255, .08); } .pf-phone__edge--1 { transform: translateZ(-.55em); background: #2c2c32; } .pf-phone__edge--2 { transform: translateZ(-1.1em); background: #232328; } .pf-phone__edge--3 { transform: translateZ(-1.65em); background: #1a1a1e; box-shadow: 0 2em 4em rgba(0, 0, 0, .35); } .pf-phone__body { position: absolute; inset: 0; padding: .8em; border-radius: 5em; background: #0f0f11; border: var(--bw) solid var(--line); box-shadow: inset 0 0 0 .32em #2e2e35, inset 0 0 0 .55em #070708; } .pf-phone__btn { position: absolute; width: .45em; border-radius: .3em; background: #2e2e35; border: 1px solid var(--line); } .pf-phone__btn--1 { left: -.55em; top: 10em; height: 3em; } .pf-phone__btn--2 { left: -.55em; top: 14.5em; height: 5.5em; } .pf-phone__btn--3 { right: -.55em; top: 13em; height: 7.5em; } .pf-screen { position: relative; height: 100%; overflow: hidden; border-radius: 4.25em; background: var(--ui-bg); color: var(--ui-ink); line-height: 1.25; } .pf-island { position: absolute; z-index: 5; top: 1.75em; left: 50%; translate: -50% 0; width: 8.6em; height: 2.5em; border-radius: 2em; background: #000; } .pf-glare { position: absolute; z-index: 6; inset: .8em; border-radius: 4.25em; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .04) 26%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, .07) 100%); } .pf-top { position: relative; z-index: 3; padding: 0 1.15em; background: var(--ui-bg); } .pf-scroll { position: relative; z-index: 1; padding: 0 1.15em; } .pf-status { display: flex; align-items: center; justify-content: space-between; height: 3.1em; padding: .5em 1.2em 0 1.7em; font-weight: 800; } .pf-status span:first-child { font-size: 1.15em; } .pf-status__icons { display: flex; gap: .3em; } .pf-status__icons i { width: 1.15em; height: .8em; border-radius: .2em; background: currentColor; } .pf-status__icons i:last-child { width: 1.8em; } .pf-bar { display: flex; align-items: center; justify-content: space-between; height: 2.85em; } .pf-bar__name { display: inline-flex; align-items: center; gap: .3em; font-weight: 800; font-size: 1.62em; letter-spacing: -.02em; } .pf-verified { width: .85em; height: .85em; color: #3897F0; vertical-align: middle; } [data-theme="noir"] .pf-verified { color: var(--c1); } [data-theme="noir"] .pf-verified path:last-child { stroke: #000; } .pf-bar__icons { display: flex; gap: 1em; } .pf-bar__icons .ico { width: 2.2em; height: 2.2em; stroke-width: 1.9; } .pf-head { display: flex; align-items: center; gap: 1.4em; padding: .15em 0 .45em; } .pf-avatar { flex: none; position: relative; width: 6em; height: 6em; padding: .28em; border-radius: 50%; background: conic-gradient(from 200deg, #FFD23F, #FF3D8B, #8B5CF6, #FFD23F); } .pf-avatar__img { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: .26em solid var(--ui-bg); background: #2F5BFF; color: #fff; font: 800 1.95em/1 var(--f-display); letter-spacing: -.04em; } [data-theme="noir"] .pf-avatar__img { background: #C6FF3D; color: #000; } [data-theme="pastel"] .pf-avatar__img { background: #7A5AF0; } .pf-stats { flex: 1; display: flex; justify-content: space-around; text-align: center; } .pf-stats li { display: grid; gap: .1em; } .pf-stats b { font-size: 1.55em; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .pf-stats span { font-size: 1.08em; color: var(--ui-ink); } .pf-bio { display: grid; gap: .05em; font-size: 1.06em; line-height: 1.2; } .pf-bio b { font-weight: 800; } .pf-bio__cat { color: var(--ui-2); } .pf-bio p { margin: 0; } .pf-bio__link { color: var(--ui-accent); font-weight: 700; } [data-theme="pop"] .pf-bio__link { color: #00376B; } .pf-hl { display: flex; justify-content: space-between; padding: .6em .15em .42em; } .pf-hl li { display: grid; justify-items: center; gap: .25em; font-size: .92em; } .pf-hl span { display: grid; place-items: center; width: 4.1em; height: 4.1em; border-radius: 50%; background: var(--ui-ph); box-shadow: 0 0 0 .14em var(--ui-bg), 0 0 0 .26em var(--ui-line); font-size: 1.05em; } .pf-tabs { display: flex; justify-content: space-around; height: 2.8em; margin: 0 -1.15em; border-top: 1px solid var(--ui-line); } .pf-tabs span { display: grid; place-items: center; flex: 1; color: var(--ui-2); } .pf-tabs .is-on { color: var(--ui-ink); box-shadow: inset 0 .16em 0 currentColor; } .pf-tabs .ico { width: 1.75em; height: 1.75em; stroke-width: 1.8; } .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .18em; margin: 0 -1.15em; } .pf-tile { position: relative; aspect-ratio: 1; background: var(--ui-ph); outline: .16em dashed color-mix(in srgb, var(--ui-2) 55%, transparent); outline-offset: -.6em; } .pf-tile img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; } .pf-tile__ico { position: absolute; z-index: 2; top: .45em; right: .45em; width: 1.8em; height: 1.8em; color: #fff; stroke-width: 2.2; filter: drop-shadow(0 .1em .2em rgba(0, 0, 0, .45)); } .pf-tile:nth-child(n) { z-index: 1; } /* Notifications around the phone (positions are relative to the phone box) */ .pf-notifs { position: absolute; inset: 0; z-index: 8; pointer-events: none; } .notif { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r, 0deg); display: flex; align-items: center; gap: 10px; width: max-content; max-width: 230px; padding: 9px 14px 9px 9px; border-radius: 18px; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); box-shadow: var(--sh); font: 600 .82rem/1.2 var(--f-body); } .notif__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c3); border: 2px solid var(--line); font-size: 1.05rem; } .notif__txt b { display: block; font: 800 1.02rem/1.1 var(--f-display); letter-spacing: -.01em; } .notif--1 { --x: -14%; --y: 17%; --r: -5deg; } .notif--1 .notif__ico { background: var(--c1); } .notif--2 { --x: 112%; --y: 30%; --r: 4deg; } .notif--2 .notif__ico { background: var(--c4); } .notif--3 { --x: -18%; --y: 50%; --r: 3deg; } .notif--4 { --x: 110%; --y: 66%; --r: -4deg; } .notif--4 .notif__ico { background: var(--c2); } .notif--5 { --x: -10%; --y: 84%; --r: -3deg; } .notif--5 .notif__ico { background: var(--c4); } .notif--6 { --x: 108%; --y: 9%; --r: 5deg; } .notif--6 .notif__ico { background: var(--c1); } .build:not(.is-pinned) .notif { display: none; } .build:not(.is-pinned) .notif--1, .build:not(.is-pinned) .notif--4 { display: flex; } .pf-confetti { position: absolute; inset: 0; z-index: 9; pointer-events: none; } .pf-confetti i { position: absolute; left: 50%; top: 8%; width: 10px; height: 16px; border-radius: 3px; border: 1.5px solid var(--line); opacity: 0; } /* Chart card */ .build__side { position: relative; z-index: 3; display: grid; gap: 16px; } .chart-card { --focus: var(--ink); margin: 0; padding: 18px 18px 14px; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); } .chart-card__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px; margin-bottom: 12px; } .chart-card__label { grid-column: 1 / -1; font: 800 .72rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .chart-card__val { font: 800 clamp(2rem, 1.4rem + 1.6vw, 3rem)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .chart-card__delta { justify-self: end; display: inline-flex; gap: .35em; align-items: baseline; padding: .4em .7em; border-radius: 999px; background: var(--c4); color: var(--on-c4); border: 2px solid var(--line); font-size: .78rem; font-weight: 600; white-space: nowrap; } .chart-card__delta b { font-weight: 800; font-variant-numeric: tabular-nums; } .chart { position: relative; aspect-ratio: 400 / 240; color: var(--chart-line); } .chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .chart__grid line { stroke: var(--ink); stroke-opacity: .13; stroke-width: 1.5; stroke-dasharray: 3 7; } .chart__area { fill: url(#pf-area-grad); } .chart__line { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } [data-theme="pop"] .chart__line { filter: drop-shadow(0 2px 0 rgba(18, 18, 18, .9)); } .chart__head { fill: var(--surface); stroke: var(--line); stroke-width: 3; } .chart__pulse { fill: currentColor; opacity: .35; transform-box: fill-box; transform-origin: center; animation: pulse 1.6s ease-out infinite; } @keyframes pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } } .chart__ms { position: absolute; left: var(--mx); top: var(--my); width: 0; height: 0; } .chart__ms i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--c3); border: 2.5px solid var(--line); } .chart__ms span { position: absolute; bottom: 14px; left: 0; translate: -50% 0; padding: .32em .65em; white-space: nowrap; background: var(--surface); border: 2px solid var(--line); border-radius: 999px; box-shadow: 2px 2px 0 var(--shadow); font: 800 .72rem/1 var(--f-body); } .chart__ms--1 span { translate: -30% 0; } .chart__ms--3 span { left: auto; right: 14px; bottom: auto; top: -11px; translate: 0 0; background: var(--c3); color: var(--on-c3); } .chart__x { display: flex; justify-content: space-between; padding: 8px 2px 0; font-size: .72rem; font-weight: 700; color: var(--ink-2); } .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; } .kpi { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--feed-ink) 10%, transparent); border: 2px solid color-mix(in srgb, var(--feed-ink) 30%, transparent); } .kpi dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--feed-ink-2); } .kpi dd { margin: 4px 0 0; font: 800 1.6rem/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } /* Pinned (JS) layout — desktop */ .build.is-pinned { height: 100svh; padding: calc(var(--nav-h) + 22px) 0 28px; display: flex; } .build.is-pinned .build__grid { height: 100%; } .build.is-pinned .build__stage { height: 100%; } .build.is-pinned .build__swap { display: grid; } .build.is-pinned .build__steps, .build.is-pinned .build__result { grid-area: 1 / 1; margin: 0; } .build.is-pinned .build__result { align-self: start; } /* Short desktop screens (e.g. 1366×768): keep the step list compact */ @media (min-width: 900px) and (max-height: 860px) { .build.is-pinned .build__step { padding: 10px 14px 10px 12px; } .build.is-pinned .build__step p { display: none; } .build.is-pinned .build__step h3 { margin-top: .35em; } .build.is-pinned .build__steps { gap: 10px; } .build.is-pinned .build__title { font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem); } } /* Tablet & mobile */ @media (max-width: 899.98px) { .build__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .build__stage { height: 560px; } .pf-wrap { --ph: min(100cqh, 222cqw, 560px); } .build__side { max-width: 460px; width: 100%; margin-inline: auto; } .notif { max-width: 170px; padding: 6px 10px 6px 6px; gap: 7px; font-size: .68rem; border-radius: 14px; } .notif__ico { width: 26px; height: 26px; font-size: .8rem; } .notif__txt b { font-size: .82rem; } .notif--desk { display: none !important; } .notif--1 { --x: 6%; --y: 20%; } .notif--2 { --x: 96%; --y: 36%; } .notif--3 { --x: 4%; --y: 62%; } .notif--4 { --x: 94%; --y: 80%; } .build.is-pinned { padding: calc(var(--nav-h) + 10px) 0 12px; } .build.is-pinned .build__grid { grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; } .build.is-pinned .build__copy { text-align: center; } .build.is-pinned .build__copy .pill-label { display: none; } .build.is-pinned .build__title { font-size: clamp(1.45rem, 1rem + 2.6vw, 2.3rem); } .build.is-pinned .build__title br { display: none; } .build.is-pinned .build__swap { margin-top: 8px; } .build.is-pinned .build__steps { display: grid; } .build.is-pinned .build__step { grid-area: 1 / 1; padding: 8px 12px; display: flex; justify-content: center; align-items: center; gap: 10px; text-align: left; } .build.is-pinned .build__step p { display: none; } .build.is-pinned .build__step h3 { font-size: 1rem; margin: 0; } .build.is-pinned .build__num { width: 1.9em; height: 1.9em; font-size: .75rem; } .build.is-pinned .build__result { align-self: center; justify-self: center; } .build.is-pinned .build__result p, .build.is-pinned .build__result .btn { display: none; } .build.is-pinned .build__stamp { display: none; } .build.is-pinned .build__result-title { font-size: clamp(1.15rem, .9rem + 1.6vw, 1.7rem); } .build.is-pinned .build__side { max-width: min(100%, 280px, 32svh); } .build.is-pinned .kpis { display: none; } .build.is-pinned .chart-card { padding: 10px 12px 8px; box-shadow: var(--sh); } .build.is-pinned .chart-card__head { margin-bottom: 6px; align-items: center; row-gap: 4px; } .build.is-pinned .chart-card__label { font-size: .6rem; white-space: nowrap; letter-spacing: .06em; } .build.is-pinned .chart-card__val { font-size: 1.3rem; justify-self: start; } .build.is-pinned .chart-card__delta { font-size: .66rem; padding: .3em .55em; } .build.is-pinned .chart__ms span { font-size: .6rem; bottom: 10px; } .build.is-pinned .chart__ms--3 span { top: 9px; bottom: auto; right: 4px; } .build.is-pinned .chart__ms i { width: 10px; height: 10px; left: -5px; top: -5px; border-width: 2px; } .build.is-pinned .chart__x { font-size: .6rem; padding-top: 3px; } } @media (max-width: 899.98px) and (max-height: 720px) { .build.is-pinned .build__swap { display: none; } } /* 9. SERVICES -------------------------------------------------------------- */ .services { padding: clamp(96px, 12vw, 168px) 0; background: var(--bg); } .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); perspective: 1400px; } .svc { position: relative; min-height: 310px; --c: var(--c1); --on: var(--on-c1); transform-style: preserve-3d; } .svc--c2 { --c: var(--c2); --on: var(--on-c2); } .svc--c3 { --c: var(--c3); --on: var(--on-c3); } .svc--c4 { --c: var(--c4); --on: var(--on-c4); } .svc__inner { position: relative; height: 100%; min-height: inherit; } .svc__face { position: relative; display: flex; flex-direction: column; min-height: inherit; height: 100%; padding: clamp(22px, 2.4vw, 32px); border: var(--bw) solid var(--line); border-radius: 26px; box-shadow: var(--sh-lg); background: var(--c); color: var(--on); } .svc__back { margin-top: 16px; background: var(--surface); color: var(--ink); } .svc__num { font: 800 .9rem/1 var(--f-body); letter-spacing: .1em; opacity: .85; } .svc__ico { width: 96px; height: 96px; margin: 14px 0 auto; overflow: visible; } .svc h3 { margin-top: 24px; font: 800 clamp(1.6rem, 1.2rem + 1vw, 2.15rem)/1 var(--f-display); font-stretch: 86%; letter-spacing: -.03em; } .svc__front p { margin: .6em 0 0; font-size: 1rem; line-height: 1.45; max-width: 28ch; } .svc h4 { font: 800 1.35rem/1 var(--f-display); letter-spacing: -.02em; margin-bottom: .6em; } .svc__back .ticks li::before { background: var(--c); } .svc__back .ticks li::after { border-color: var(--on); } .svc__flip { position: absolute; z-index: 5; top: 16px; right: 16px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: var(--bw) solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 3px 3px 0 var(--shadow); cursor: pointer; transition: transform .4s var(--ease-pop), box-shadow .2s; } .svc__flip:hover { transform: rotate(-30deg) scale(1.08); } .svc__flip .ico { width: 22px; height: 22px; } .svc.is-flipped .svc__flip { transform: rotate(180deg); } /* Icon parts */ .svc__ico { --ico-line: var(--line); } [data-theme="noir"] .svc__ico { --ico-line: var(--on); } .svc__ico .s-f1 { fill: var(--surface); stroke: var(--ico-line); stroke-width: 3; } .svc__ico .s-f2 { fill: var(--on); stroke: var(--ico-line); stroke-width: 3; } .svc__ico .s-f3 { fill: var(--c3); stroke: var(--ico-line); stroke-width: 3; stroke-linejoin: round; } .svc--c3 .svc__ico .s-f3 { fill: var(--c1); } .svc__ico .s-line { fill: none; stroke: var(--ico-line); stroke-width: 4; stroke-linecap: round; } .svc__ico .s-dot { fill: var(--c); } .svc__ico .s-heart { fill: var(--c1); stroke: var(--ico-line); stroke-width: 2.5; } .svc--c1 .svc__ico .s-heart { fill: var(--c3); } .svc__ico .s-flash { fill: var(--c3); stroke: var(--ico-line); stroke-width: 2.5; stroke-linejoin: round; } .svc--c3 .svc__ico .s-flash { fill: var(--surface); } .svc__ico .s-wave { fill: none; stroke: var(--ico-line); stroke-width: 4; stroke-linecap: round; } [data-theme="noir"] .svc--c2 .svc__ico .s-f3, [data-theme="noir"] .svc--c1 .svc__ico .s-f3 { fill: #0B0B0C; } .svc__ico * { transform-box: fill-box; transform-origin: center; } /* JS flip mode */ .js .svc__inner { transform-style: preserve-3d; transition: transform .8s var(--ease-pop); } .js .svc__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .js .svc__back { position: absolute; inset: 0; margin: 0; transform: rotateY(180deg); justify-content: center; } .js .svc.is-flipped .svc__inner { transform: rotateY(180deg); } .svc__tilt { transform-style: preserve-3d; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .svc:hover .s-arrow, .svc.is-poked .s-arrow { animation: thunk .9s var(--ease-pop) both; } .svc:hover .s-flash, .svc.is-poked .s-flash { animation: flash .9s ease-out both; } .svc:hover .s-b1, .svc.is-poked .s-b1 { animation: bob2 1.2s ease-in-out infinite; } .svc:hover .s-b2, .svc.is-poked .s-b2 { animation: bob2 1.2s ease-in-out -.6s infinite; } .svc:hover .s-dot, .svc.is-poked .s-dot { animation: typing 1s ease-in-out infinite; } .svc:hover .s-dot:nth-of-type(2) { animation-delay: .15s; } .svc:hover .s-dot:nth-of-type(3) { animation-delay: .3s; } .svc:hover .s-wave--1, .svc.is-poked .s-wave--1 { animation: wave 1s ease-out infinite; } .svc:hover .s-wave--2, .svc.is-poked .s-wave--2 { animation: wave 1s ease-out .25s infinite; } .svc:hover .s-bar, .svc.is-poked .s-bar { transform-origin: 50% 100%; animation: grow .8s var(--ease-pop) both; } .svc:hover .s-bar--2 { animation-delay: .1s; } .svc:hover .s-bar--3 { animation-delay: .2s; } .svc:hover .s-starbig, .svc.is-poked .s-starbig { animation: spin 1.1s var(--ease-pop) both; } .svc:hover .s-h1, .svc.is-poked .s-h1 { animation: floatUp 1.4s ease-out infinite; } .svc:hover .s-h2, .svc.is-poked .s-h2 { animation: floatUp 1.4s ease-out .5s infinite; } } @keyframes thunk { 0% { transform: translate(18px, -18px); opacity: 0; } 60% { transform: translate(-3px, 3px); opacity: 1; } 100% { transform: none; } } @keyframes flash { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.7) rotate(45deg); } } @keyframes bob2 { 50% { transform: translateY(-4px); } } @keyframes typing { 50% { transform: translateY(-3px); opacity: .5; } } @keyframes wave { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(6px); } } @keyframes grow { from { transform: scaleY(.1); } to { transform: scaleY(1); } } @keyframes spin { from { transform: rotate(-180deg) scale(.6); } to { transform: none; } } @keyframes floatUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } } @media (max-width: 1023.98px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639.98px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } .svc { min-height: 300px; } } /* 10. CASE STUDIES --------------------------------------------------------- */ .cases { --focus: var(--case-ink); position: relative; overflow: clip; background: var(--case-bg); color: var(--case-ink); border-block: var(--bw) solid var(--line); } .cases__track { display: grid; gap: clamp(28px, 4vw, 48px); padding: clamp(80px, 10vw, 140px) var(--gutter); max-width: 1320px; margin: 0 auto; } .case--intro .pill-label { color: var(--case-ink); } .cases__title { font: 800 clamp(2.6rem, 1.2rem + 5vw, 6rem)/.92 var(--f-display); font-stretch: 82%; letter-spacing: -.028em; } .cases__title span { display: inline-block; margin-top: .08em; padding: 0 .12em .06em; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: .14em; box-shadow: var(--sh-lg); rotate: -2deg; } .cases__lede { max-width: 36ch; margin-top: 1.4rem; font-size: 1.12rem; } .cases__hint { display: none; align-items: center; gap: .6em; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; } .cases__hint .ico { animation: nudge 1.3s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateX(6px); } } .case { position: relative; } .case:not(.case--intro):not(.case--outro) { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .case__card { --focus: var(--ink); padding: clamp(22px, 2.8vw, 40px); background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: 30px; box-shadow: var(--sh-lg); } .case__tag { display: inline-block; padding: .45em .85em; border-radius: 999px; background: var(--c1); color: var(--on-c1); border: 2px solid var(--line); font: 800 .74rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .08em; } .case--glow .case__tag { background: var(--c4); color: var(--on-c4); } .case--tita .case__tag { background: var(--c3); color: var(--on-c3); } .case__name { margin-top: .4em; font: 800 clamp(2rem, 1.3rem + 2.2vw, 3.4rem)/.95 var(--f-display); font-stretch: 84%; letter-spacing: -.026em; } .case__where { margin: .5em 0 1.1em; font-size: .9rem; color: var(--ink-2); } .case__story p { margin: 0 0 .55em; font-size: .98rem; line-height: 1.5; } .case__story strong { font-weight: 800; } .case__metrics { display: grid; gap: 0; margin: 1.3em 0 0; border-top: 2px solid var(--line); } .metric { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: .7em 0; border-bottom: 2px dashed color-mix(in srgb, var(--line) 30%, transparent); } .metric:last-child { border-bottom: 0; padding-bottom: 0; } .metric dt { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); } .metric dd { margin: 0; display: flex; align-items: baseline; gap: .45em; white-space: nowrap; } .metric__before { font-weight: 700; color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 2px; } .metric__arrow { font-weight: 800; } .metric__after { font: 800 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; padding: .02em .16em; border-radius: .18em; background: var(--c3); color: var(--on-c3); } .case--glow .metric__after { background: var(--c4); color: var(--on-c4); } .case--tita .metric__after { background: var(--c1); color: var(--on-c1); } .case__posts { position: relative; height: clamp(360px, 36vw, 480px); } .case__post { position: absolute; width: 56%; margin: 0; padding: 8px 8px 0; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: 18px; box-shadow: var(--sh-lg); } .case__post img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px; border: 2px solid var(--line); } .case__post figcaption { display: flex; align-items: center; gap: .4em; padding: .55em .3em .6em; font-weight: 800; font-size: .88rem; } .case__post figcaption .ico { color: #FF3040; } .case__post:nth-child(1) { left: 0; top: 6%; rotate: -8deg; z-index: 1; } .case__post:nth-child(2) { left: 22%; top: 0; rotate: 3deg; z-index: 2; } .case__post:nth-child(3) { left: 44%; top: 14%; rotate: 9deg; z-index: 3; } .case--outro { display: grid; justify-items: start; gap: 22px; } .cases__outro-kicker { margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; } .cases__outro-title { margin: 0; font: 800 clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem)/.92 var(--f-display); font-stretch: 80%; letter-spacing: -.028em; } .cases__outro-title span { color: var(--surface); -webkit-text-stroke: var(--bw) var(--line); paint-order: stroke fill; } [data-theme="noir"] .cases__outro-title span { color: transparent; -webkit-text-stroke: 2px var(--case-ink); } .cases__progress { display: none; } /* Horizontal (JS, desktop) */ .cases.is-horizontal { height: 100svh; } .cases.is-horizontal .cases__viewport { height: 100%; } .cases.is-horizontal .cases__track { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(48px, 6vw, 110px); width: max-content; max-width: none; height: 100%; margin: 0; padding: calc(var(--nav-h) + 24px) 7vw 64px; } .cases.is-horizontal .case { flex: none; } .cases.is-horizontal .case:not(.case--intro):not(.case--outro) { width: min(1180px, 84vw); } .cases.is-horizontal .case--intro { width: min(560px, 42vw); } .cases.is-horizontal .case--outro { width: min(620px, 50vw); padding-right: 4vw; } .cases.is-horizontal .cases__hint { display: inline-flex; } .cases.is-horizontal .cases__progress { display: block; position: absolute; left: 7vw; right: 7vw; bottom: 28px; height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--case-ink) 14%, transparent); overflow: hidden; border: 2px solid var(--line); } .cases.is-horizontal .cases__progress span { display: block; height: 100%; background: var(--case-ink); transform-origin: 0 50%; transform: scaleX(0); } @media (min-width: 900px) and (max-height: 820px) { .cases.is-horizontal .case__story p { font-size: .9rem; margin-bottom: .4em; } .cases.is-horizontal .case__where { margin-bottom: .7em; } .cases.is-horizontal .metric { padding: .45em 0; } .cases.is-horizontal .case__card { padding: 22px 28px; } .cases.is-horizontal .case__name { font-size: clamp(1.8rem, 1rem + 2vw, 2.6rem); } } @media (max-width: 899.98px) { .case:not(.case--intro):not(.case--outro) { grid-template-columns: minmax(0, 1fr); } .case__posts { height: clamp(250px, 70vw, 380px); max-width: 440px; width: 92%; margin-inline: auto; } .case__post { width: 54%; } .case + .case { margin-top: 24px; } } /* CALENDAR */ .calendar { padding: clamp(96px, 12vw, 168px) 0; background: var(--bg); overflow: clip; } .calendar__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 80px); align-items: center; } .cal-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2rem; } .cal-legend li { display: flex; align-items: center; gap: .6em; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); font-size: .92rem; font-weight: 600; } .cal-legend .chip { margin: 0; width: 6.6em; flex: none; text-align: center; font-size: .7rem; text-overflow: clip; } .cal-legend__n { font: 800 1.35rem/1 var(--f-display); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; } .cal { padding: clamp(14px, 2vw, 24px); background: var(--surface); border: var(--bw) solid var(--line); border-radius: 28px; box-shadow: var(--sh-lg); rotate: 1deg; } .cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 12px; flex-wrap: wrap; } .cal__month { font: 800 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1 var(--f-display); letter-spacing: -.03em; } .cal__meta { margin: 0; display: inline-flex; align-items: center; gap: .45em; padding: .45em .8em; border-radius: 999px; background: var(--c4); color: var(--on-c4); border: 2px solid var(--line); font-weight: 800; font-size: .82rem; } .cal__planned { font-variant-numeric: tabular-nums; } .cal__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 5px; } .cal__table th { padding: 4px 0 6px; font: 800 .7rem/1 var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); } .cal__table td { height: clamp(66px, 6.6vw, 96px); padding: 5px; vertical-align: top; border-radius: 10px; background: var(--bg); border: 2px solid color-mix(in srgb, var(--line) 22%, transparent); } .cal__table td.is-out { background: transparent; border-style: dashed; } .cal__d { display: block; font: 800 .78rem/1 var(--f-body); margin: 1px 0 4px 2px; } @media (max-width: 1023.98px) { .calendar__grid { grid-template-columns: minmax(0, 1fr); } .cal { rotate: 0deg; } } @media (max-width: 599.98px) { .cal { padding: 10px 8px; border-radius: 20px; } .cal__table { border-spacing: 3px; } .cal__table td { height: 54px; padding: 3px; border-radius: 7px; } .cal__d { font-size: .66rem; margin-bottom: 3px; } .cal__table .chip { height: 8px; padding: 0; margin-top: 3px; border-radius: 4px; border-width: 1px; font-size: 0; line-height: 0; } .cal-legend { grid-template-columns: 1fr 1fr; gap: 8px; } .cal-legend li { padding: 8px 10px; font-size: .84rem; gap: .5em; } .cal-legend .chip { width: 14px; height: 14px; padding: 0; border-radius: 50%; font-size: 0; } .cal-legend__n { font-size: 1.15rem; min-width: 0; } } /* 11. RESULTS -------------------------------------------------------------- */ .results { --focus: var(--res-ink); padding: clamp(96px, 12vw, 168px) 0; background: var(--res-bg); color: var(--res-ink); overflow: clip; } .results .pill-label { color: var(--res-ink); } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .stat { --c: var(--c1); --on: var(--on-c1); position: relative; display: grid; align-content: space-between; gap: 18px; min-height: clamp(210px, 19vw, 270px); padding: clamp(20px, 2.2vw, 30px); background: var(--c); color: var(--on); border: var(--bw) solid var(--res-ink); border-radius: 26px; box-shadow: 7px 7px 0 var(--res-ink); } .stat--c2 { --c: var(--c2); --on: var(--on-c2); } .stat--c3 { --c: var(--c3); --on: var(--on-c3); } .stat--c4 { --c: var(--c4); --on: var(--on-c4); } .stat:nth-child(odd) { rotate: -1.5deg; } .stat:nth-child(even) { rotate: 1.5deg; translate: 0 18px; } [data-theme="noir"] .stat { border-color: #0B0B0C; box-shadow: 7px 7px 0 #0B0B0C; } .stat__num { font: 800 clamp(3rem, 1.6rem + 3.6vw, 6rem)/.86 var(--f-display); font-stretch: 80%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .stat__ico { position: absolute; top: -18px; right: 18px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--surface); border: var(--bw) solid var(--res-ink); box-shadow: 3px 3px 0 var(--res-ink); font-size: 1.45rem; rotate: 10deg; } [data-theme="noir"] .stat__ico { border-color: #0B0B0C; box-shadow: 3px 3px 0 #0B0B0C; background: #F4F4EF; } .stat__label { font-weight: 700; font-size: 1rem; line-height: 1.35; max-width: 20ch; } @media (max-width: 1023.98px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 459.98px) { .stats { gap: 14px; } .stat { min-height: 180px; padding: 16px; border-radius: 20px; } .stat__label { font-size: .86rem; } .stat:nth-child(even) { translate: 0 10px; } } /* 12. TESTIMONIALS — DM chat ----------------------------------------------- */ .love { --focus: var(--love-ink); padding: clamp(96px, 12vw, 168px) 0; background: var(--love-bg); color: var(--love-ink); overflow: clip; border-block: var(--bw) solid var(--line); } .love .pill-label { color: var(--love-ink); } .love .sec-lede { color: inherit; opacity: .92; } .love__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .love__copy { position: sticky; top: calc(var(--nav-h) + 48px); } .dm { --focus: var(--ink); width: 100%; max-width: 660px; justify-self: end; overflow: hidden; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: 30px; box-shadow: 10px 10px 0 var(--shadow); } .dm__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 2px solid color-mix(in srgb, var(--line) 18%, transparent); } .dm__avas { display: flex; flex: none; } .dm__avas img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); } .dm__avas img + img { margin-left: -14px; } .dm__who { display: grid; line-height: 1.25; margin-right: auto; } .dm__who b { font: 800 1.02rem/1.2 var(--f-display); } .dm__who span { display: inline-flex; align-items: center; gap: .45em; font-size: .78rem; color: var(--ink-2); } .dm__who .live-dot { width: .5em; height: .5em; } .dm__icons { display: flex; gap: 14px; } .dm__icons .ico { width: 22px; height: 22px; } .dm__thread { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 18px 18px; background-image: radial-gradient(var(--dots) 1.2px, transparent 1.4px); background-size: 18px 18px; } .msg { display: flex; align-items: flex-end; gap: 10px; max-width: 88%; } .msg--out { align-self: flex-end; flex-direction: row-reverse; max-width: 70%; } .msg__ava { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); margin-bottom: 22px; } .msg__body { position: relative; margin: 0; min-width: 0; } .bubble { position: relative; margin: 0; padding: 12px 16px; border-radius: 22px 22px 22px 7px; background: var(--bg-alt); border: 2px solid var(--line); font-size: 1rem; line-height: 1.45; text-wrap: pretty; } .bubble p { margin: 0; } .msg--out .bubble { border-radius: 22px 22px 7px 22px; background: var(--c2); color: var(--on-c2); font-weight: 600; } .msg__who { margin: 6px 0 0 6px; font-size: .78rem; font-weight: 700; color: var(--ink-2); } .bubble.has-react::after { content: "❤️"; position: absolute; right: -8px; bottom: -14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); font-size: .8rem; animation: react .5s var(--ease-pop) both; } @keyframes react { from { transform: scale(0) rotate(-40deg); } to { transform: none; } } .typing { display: none; } .js .typing { position: absolute; left: 0; bottom: 26px; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 20px 20px 20px 7px; background: var(--bg-alt); border: 2px solid var(--line); opacity: 0; transform-origin: 0 100%; } .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .5; animation: dot 1s ease-in-out infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; } @keyframes dot { 30% { transform: translateY(-4px); opacity: 1; } 60% { transform: none; opacity: .5; } } .dm__bar { display: flex; align-items: center; gap: 12px; margin: 0 14px 14px; padding: 7px 14px 7px 7px; border: 2px solid color-mix(in srgb, var(--line) 30%, transparent); border-radius: 999px; color: var(--ink-2); } .dm__cam { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c2); color: var(--on-c2); } .dm__input { flex: 1; font-size: .92rem; } @media (max-width: 899.98px) { .love__grid { grid-template-columns: minmax(0, 1fr); } .love__copy { position: static; } .dm { justify-self: stretch; } .msg { max-width: 94%; } .msg--out { max-width: 80%; } .bubble { font-size: .95rem; } } /* 13. TOOLS · PACKAGES · FAQ ---------------------------------------------- */ .tools { padding: clamp(64px, 8vw, 104px) 0; background: var(--bg-alt); border-bottom: var(--bw) solid var(--line); overflow: clip; } .tools__inner { display: flex; align-items: center; gap: 28px 56px; flex-wrap: wrap; } .tools__title { font: 800 clamp(1.8rem, 1.2rem + 2.4vw, 3rem)/.95 var(--f-display); font-stretch: 82%; letter-spacing: -.035em; } .tool-chips { display: flex; flex-wrap: wrap; gap: 12px; flex: 1 1 560px; } .tool-chips li { display: inline-flex; align-items: center; gap: .6em; padding: .55em 1em .55em .55em; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; box-shadow: 3px 3px 0 var(--shadow); font-weight: 800; font-size: clamp(.92rem, .86rem + .25vw, 1.05rem); } .tool-chips .ico { width: 1.9em; height: 1.9em; padding: .38em; border-radius: 10px; background: var(--c3); color: var(--on-c3); border: 2px solid var(--line); stroke-width: 2.3; } .tool-chips li:nth-child(4n+2) .ico { background: var(--c1); color: var(--on-c1); } .tool-chips li:nth-child(4n+3) .ico { background: var(--c4); color: var(--on-c4); } .tool-chips li:nth-child(4n+4) .ico { background: var(--c2); color: var(--on-c2); } .tool-chips li:nth-child(odd) { rotate: -1.5deg; } .tool-chips li:nth-child(even) { rotate: 1.5deg; } .packages { padding: clamp(96px, 12vw, 168px) 0; background: var(--bg); overflow: clip; } .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; } .plan { --focus: var(--ink); position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: 30px; box-shadow: var(--sh-lg); } .plan--hot { --focus: var(--on-c2); background: var(--c2); color: var(--on-c2); translate: 0 -18px; box-shadow: 10px 10px 0 var(--shadow); } [data-theme="noir"] .plan--hot { background: var(--c1); color: var(--on-c1); --focus: var(--on-c1); box-shadow: 10px 10px 0 var(--shadow-alt); } .plan__sticker { position: absolute; top: -20px; right: 22px; display: inline-flex; align-items: center; gap: .35em; padding: .55em 1em; background: var(--c3); color: var(--on-c3); border: var(--bw) solid var(--line); border-radius: 999px; box-shadow: 3px 3px 0 var(--shadow); font: 800 .88rem/1 var(--f-display); rotate: 6deg; animation: wiggle 2.8s ease-in-out infinite; } [data-theme="noir"] .plan__sticker { background: #0B0B0C; color: var(--c1); border-color: #0B0B0C; } @keyframes wiggle { 0%, 70%, 100% { rotate: 6deg; } 76% { rotate: -4deg; } 82% { rotate: 10deg; } 88% { rotate: 2deg; } } .plan__name { font: 800 clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1 var(--f-display); letter-spacing: -.03em; } .plan__for { margin: .45em 0 1.2em; font-size: .95rem; opacity: .9; } .plan__price { display: flex; align-items: baseline; gap: .2em; margin: 0 0 1.1em; padding-bottom: 1.1em; border-bottom: 2px dashed currentColor; } .plan__from { font-weight: 700; font-size: .9rem; margin-right: .3em; } .plan__amt { font: 800 clamp(2.6rem, 2rem + 1.8vw, 3.6rem)/.9 var(--f-display); letter-spacing: -.05em; } .plan__per { font-weight: 800; } .plan__list { margin-bottom: 1.6em; } .plan--hot .ticks li::before { background: var(--c3); } .plan--hot .ticks li::after { border-color: var(--on-c3); } .plan__cta { margin-top: auto; align-self: stretch; } .plan--hot .btn--c1 { --b-sh: var(--shadow); } [data-theme="noir"] .plan--hot .btn--c1 { --b-bg: #0B0B0C; --b-ink: var(--c1); --b-sh: #F4F4EF; border-color: #0B0B0C; } .packages__note { margin: 40px auto 0; text-align: center; font-size: .92rem; color: var(--ink-2); } @media (max-width: 899.98px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } .plan--hot { translate: 0 0; } } .faq { padding: clamp(96px, 12vw, 168px) 0; background: var(--bg-alt); border-top: var(--bw) solid var(--line); } .faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .faq__head { position: sticky; top: calc(var(--nav-h) + 32px); } .qa { margin-bottom: 14px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 22px; box-shadow: var(--sh); overflow: hidden; transition: box-shadow .3s, translate .3s var(--ease-pop); } .qa[open] { box-shadow: var(--sh-lg); translate: -2px -2px; } .qa summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 20px 72px 20px 24px; font: 800 clamp(1.08rem, 1rem + .35vw, 1.28rem)/1.25 var(--f-display); letter-spacing: -.01em; } .qa summary::-webkit-details-marker { display: none; } .qa summary:focus-visible { outline-offset: -6px; border-radius: 18px; } .qa__icon { position: absolute; right: 18px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--c3); border: 2px solid var(--line); transition: rotate .45s var(--ease-pop), background-color .3s; } .qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; margin: -1.5px 0 0 -7px; border-radius: 2px; background: var(--on-c3); } .qa__icon::after { rotate: 90deg; } .qa[open] .qa__icon { rotate: 135deg; background: var(--c1); } .qa[open] .qa__icon::before, .qa[open] .qa__icon::after { background: var(--on-c1); } .qa__a { padding: 0 24px 22px; color: var(--ink-2); } .qa__a p { margin: 0; max-width: 60ch; } .qa::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; } .qa[open]::details-content { block-size: auto; } @media (max-width: 899.98px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } .faq__head { position: static; } } /* 14. CONTACT & FOOTER ----------------------------------------------------- */ .contact { --focus: var(--contact-ink); position: relative; padding: clamp(110px, 13vw, 180px) 0 clamp(96px, 11vw, 150px); background: var(--contact-bg); color: var(--contact-ink); text-align: center; overflow: clip; border-top: var(--bw) solid var(--line); } .contact .pill-label { color: var(--contact-ink); } .contact__bg { position: absolute; inset: 0; pointer-events: none; } .contact__spark { position: absolute; color: var(--contact-ink); } .contact__spark--1 { left: 8%; top: 18%; width: 54px; height: 54px; animation: twinkle 3.6s ease-in-out infinite; } .contact__spark--2 { right: 10%; top: 30%; width: 36px; height: 36px; animation: twinkle 3s ease-in-out -1s infinite; } .contact__spark--3 { right: 16%; bottom: 14%; width: 48px; height: 48px; color: var(--c1); stroke: var(--line); animation: bob 3.4s ease-in-out infinite; } [data-theme="noir"] .contact__spark--3 { color: #0B0B0C; } .contact__inner { position: relative; } @media (max-width: 599.98px) { .contact__spark--1 { left: 4%; top: 7%; width: 34px; height: 34px; } .contact__spark--2 { display: none; } .contact__spark--3 { right: 6%; bottom: 5%; width: 34px; height: 34px; } } .contact__title { font: 800 clamp(3.5rem, 1rem + 9.4vw, 10rem)/.86 var(--f-display); letter-spacing: -.03em; font-stretch: 88%; } .contact__line { display: block; } .contact__line--2 { display: inline-block; margin-top: .06em; padding: .02em .16em .1em; font-stretch: 75%; background: var(--c1); color: var(--on-c1); border: var(--bw) solid var(--line); border-radius: .12em; box-shadow: 10px 10px 0 var(--shadow-alt); rotate: -2.5deg; } [data-theme="noir"] .contact__line--2 { background: #0B0B0C; color: var(--c1); border-color: #0B0B0C; box-shadow: 10px 10px 0 #F4F4EF; } .contact__lede { max-width: 46ch; margin: 2rem auto 0; font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); } .dm-card { --focus: var(--ink); max-width: 600px; margin: clamp(36px, 5vw, 56px) auto 0; padding: 22px; text-align: left; background: var(--surface); color: var(--ink); border: var(--bw) solid var(--line); border-radius: 30px; box-shadow: 10px 10px 0 var(--shadow); rotate: -1deg; } .dm-card__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid color-mix(in srgb, var(--line) 18%, transparent); } .dm-card__head img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line); } .dm-card__head > span { display: grid; line-height: 1.3; } .dm-card__head b { font: 800 1.1rem/1.2 var(--f-display); } .dm-card__head > span > span { font-size: .82rem; color: var(--ink-2); } .dm-card__bubble { margin: 18px 0 18px auto; max-width: 88%; width: fit-content; padding: 12px 16px; border-radius: 22px 22px 7px 22px; background: var(--c2); color: var(--on-c2); border: 2px solid var(--line); font-weight: 600; line-height: 1.45; } .dm-card__caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: currentColor; animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .dm-card__actions { display: flex; flex-wrap: wrap; gap: 12px; } .dm-card__actions .btn { flex: 1 1 220px; } .dm-card__email { display: inline-flex; align-items: center; gap: .5em; margin-top: 18px; font-weight: 800; font-size: 1.05rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .dm-card__email:hover { text-decoration-color: var(--c1); } .dm-card__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .dm-card__socials a { display: inline-flex; align-items: center; gap: .45em; padding: .45em .85em; border-radius: 999px; border: 2px solid var(--line); text-decoration: none; font-weight: 700; font-size: .88rem; transition: background-color .2s, color .2s; } .dm-card__socials a:hover { background: var(--c3); color: var(--on-c3); } .footer { --focus: var(--foot-ink); padding: 56px 0 104px; background: var(--foot-bg); color: var(--foot-ink); overflow: clip; } .footer__mark { margin: 0 0 28px; font: 800 clamp(3rem, 1rem + 10.4vw, 11.5rem)/.82 var(--f-display); font-stretch: 78%; letter-spacing: -.03em; color: var(--foot-ink); white-space: nowrap; } .footer__mark span { color: var(--c1); } [data-theme="pastel"] .footer__mark span { color: var(--c3); } .footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 22px; border-top: 2px solid color-mix(in srgb, var(--foot-ink) 30%, transparent); font-size: .92rem; } .footer__row p { margin: 0; } .footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .footer__links a { font-weight: 700; text-decoration: none; } .footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; } .footer__credit { margin: 18px 0 0; font-size: .82rem; opacity: .85; } /* 15. DEMO SWITCHER · CURSOR STICKER · MOTION ----------------------------- */ /* DEMO ONLY: remove for client sites */ .demo-switch { --focus: var(--ink); position: fixed; left: 14px; bottom: 14px; z-index: 70; display: flex; align-items: center; gap: 4px; padding: 5px; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-radius: 999px; box-shadow: 3px 3px 0 var(--shadow); } .demo-switch__tag { padding: .45em .7em; border-radius: 999px; background: var(--ink); color: var(--bg); font: 800 .62rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; } .demo-switch__btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; } .demo-switch__sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); transition: transform .3s var(--ease-pop); } .demo-switch__btn:hover .demo-switch__sw { transform: scale(1.15) rotate(30deg); } .demo-switch__btn[aria-pressed="true"] .demo-switch__sw { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4.5px var(--ink); } .demo-switch__sw--pop { background: conic-gradient(#FF3D8B 0 33%, #2F5BFF 0 66%, #FFD23F 0); } .demo-switch__sw--noir { background: conic-gradient(#0B0B0C 0 50%, #C6FF3D 0 80%, #F4F4EF 0); } .demo-switch__sw--pastel { background: conic-gradient(#C8B6FF 0 33%, #A8EFD0 0 66%, #FFEB99 0); } @media (max-width: 599.98px) { .demo-switch { left: 10px; bottom: 10px; padding: 3px; gap: 2px; } .demo-switch__tag { padding: .4em .5em; font-size: .55rem; } .demo-switch__btn { width: 28px; height: 28px; } .demo-switch__sw { width: 20px; height: 20px; } } .demo-switch__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* /DEMO ONLY */ .cursor-sticker { position: fixed; left: 0; top: 0; z-index: 65; width: 112px; height: 112px; pointer-events: none; opacity: 0; display: none; } .cursor-sticker svg { width: 100%; height: 100%; overflow: visible; } .cs-bg { fill: var(--c3); stroke: var(--line); stroke-width: 3; } .cs-text { font: 800 13px var(--f-display); letter-spacing: 1.2px; fill: var(--on-c3); text-transform: uppercase; } .cs-spin { transform-origin: 60px 60px; animation: csSpin 9s linear infinite; } .cs-heart { fill: var(--c1); stroke: var(--line); stroke-width: 2.5; } @keyframes csSpin { to { transform: rotate(360deg); } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .js .cursor-sticker { display: block; } } /* Loops pause when their section is off-screen (class toggled by JS) */ .is-paused, .is-paused * { animation-play-state: paused !important; } /* Progressive enhancement: hide intro states only when JS is running */ .js .hero [data-intro] { opacity: 0; } .js .hero__title { visibility: hidden; } .no-anim .hero [data-intro] { opacity: 1 !important; } .no-anim .hero__title { visibility: visible !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .live-dot { animation: none; } .hp-feed__track.is-looping { animation: none; } } @media print { .nav, .demo-switch, .cursor-sticker, .progress { display: none !important; } }