/* ========================================================================== Designely — styles.css Static translation of the Designely design system (tokens + components) plus page-specific styles for the homepage. Google Fonts are loaded via in (not @import) for performance. ========================================================================== */ /* -------------------------------------------------------------------------- tokens/colors.css — extracted from landing direction 1a -------------------------------------------------------------------------- */ :root { /* Base ramps */ --violet-050: #F6F4FF; /* wash surface */ --violet-100: #EEEBFA; /* subtle border / divider */ --violet-200: #E2DCFA; /* tint border (chips, secondary buttons) */ --violet-300: #B7A6FF; /* links & accents on dark */ --violet-500: #6B4CF6; /* PRIMARY brand violet */ --violet-600: #5A3BE0; /* primary hover / pressed */ --ink-900: #241F3D; /* headings, dark surfaces */ --ink-700: #565073; /* body text */ --ink-400: #8B86A3; /* muted / captions */ --coral-500: #FF6B4A; /* accent 1 — energy, step 1 */ --coral-600: #E85835; --green-500: #2EBE72; /* accent 2 — success, growth, step 3 */ --green-600: #27A863; --yellow-400: #FFC53D; /* accent 3 — stickers, highlights, the ✳ */ --yellow-500: #F0B32A; --white: #FFFFFF; /* Semantic aliases */ --color-primary: var(--violet-500); --color-primary-hover: var(--violet-600); --surface-page: var(--white); --surface-wash: var(--violet-050); /* alternating section bg + cards on white */ --surface-brand: var(--violet-500); /* hero / big brand moments */ --surface-ink: var(--ink-900); /* footer / closing CTA */ --text-heading: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-400); --text-on-brand: var(--white); --text-on-brand-muted: rgba(255, 255, 255, 0.88); --text-on-dark: rgba(255, 255, 255, 0.88); --text-on-dark-muted: rgba(255, 255, 255, 0.75); --text-on-dark-faint: rgba(255, 255, 255, 0.55); --link-on-dark: var(--violet-300); --border-subtle: var(--violet-100); --border-tint: var(--violet-200); --border-on-dark: rgba(255, 255, 255, 0.1); /* Process step accents (fixed order) */ --step-1: var(--coral-500); --step-2: var(--violet-500); --step-3: var(--green-500); /* Decorative shapes on brand surfaces */ --shape-on-brand: rgba(255, 255, 255, 0.07); } /* -------------------------------------------------------------------------- tokens/typography.css -------------------------------------------------------------------------- */ :root { --font-display: "Archivo Black", system-ui, sans-serif; --font-body: "Figtree", system-ui, sans-serif; /* Display scale (Archivo Black, tight leading, slight negative tracking) */ --text-hero: clamp(38px, 5.5vw, 66px); /* H1 hero — UPPERCASE */ --text-display: clamp(32px, 4vw, 46px); /* closing CTA headline — UPPERCASE */ --text-h2: clamp(28px, 3.4vw, 40px); /* section titles — sentence case */ --text-h3: clamp(22px, 2.4vw, 28px); /* process step titles */ --text-h4: clamp(20px, 2vw, 24px); /* card titles */ --leading-display: 1.04; --leading-heading: 1.1; --tracking-hero: -1px; --tracking-heading: -0.5px; /* Body scale (Figtree) */ --text-lead: clamp(17px, 1.7vw, 20px); /* hero subline */ --text-body-lg: 18px; --text-body-size: 17px; --text-small: 15px; /* nav links, buttons sm, captions */ --text-caption: 14px; --leading-body: 1.6; /* Specials */ --text-eyebrow: 14px; /* 800, uppercase, +2px tracking */ --tracking-eyebrow: 2px; --text-badge: 15px; /* step badges & stickers */ --logo-size: 22px; } /* -------------------------------------------------------------------------- tokens/spacing.css -------------------------------------------------------------------------- */ :root { --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Vertical rhythm between sections (fluid) */ --space-section: clamp(56px, 9vw, 88px); /* Layout */ --container-max: 1200px; --gutter: clamp(20px, 5vw, 64px); /* page side padding */ --card-gap: 24px; /* grids of cards */ --row-gap: clamp(32px, 5vw, 64px); /* text ↔ image process rows */ } /* -------------------------------------------------------------------------- tokens/effects.css — radius, shadow, motion tokens -------------------------------------------------------------------------- */ :root { /* Radius — pills everywhere interactive, soft-rounded everything else */ --radius-pill: 999px; /* buttons, badges, stickers, chips */ --radius-card: 24px; /* cards */ --radius-image: 20px; /* image frames */ --radius-icon: 18px; /* icon chips */ --radius-input: 14px; /* form fields */ /* Shadows */ --shadow-button-primary: 0 8px 22px rgba(107, 76, 246, 0.35); /* violet button on light */ --shadow-button-on-brand: 0 8px 24px rgba(0, 0, 0, 0.2); /* white button on violet */ --shadow-sticker: 0 6px 16px rgba(0, 0, 0, 0.18); --shadow-float: 0 10px 28px rgba(107, 76, 246, 0.5); /* CTA button on ink */ --shadow-card-raise: 0 12px 32px rgba(36, 31, 61, 0.1); /* optional lifted card */ /* Focus */ --focus-ring: 0 0 0 3px rgba(107, 76, 246, 0.35); --focus-ring-on-dark: 0 0 0 3px rgba(255, 255, 255, 0.4); /* Motion — quick and friendly, no bounces */ --transition-fast: 150ms ease; --transition-med: 250ms ease; } /* -------------------------------------------------------------------------- tokens/base.css — minimal base element styles -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--text-body); background: var(--surface-page); font-size: var(--text-body-size); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); font-weight: 400; /* Archivo Black has a single weight */ margin: 0; } p { margin: 0; } a { color: var(--color-primary); } a:hover { color: var(--color-primary-hover); } img { max-width: 100%; display: block; } /* Focus styles — 3px violet ring per tokens */ a, button { outline: none; } a:focus-visible, button:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-pill); } /* On brand/ink surfaces, use the higher-contrast on-dark ring */ .navbar :is(a, button):focus-visible, .hero :is(a, button):focus-visible, .cta-section :is(a, button):focus-visible, .footer :is(a, button):focus-visible { box-shadow: var(--focus-ring-on-dark); } /* -------------------------------------------------------------------------- components/core/Button.jsx → .btn -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; font-family: var(--font-body); font-weight: 700; border-radius: var(--radius-pill); border: none; text-decoration: none; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } /* Sizes */ .btn--sm { font-size: 14px; padding: 10px 20px; } .btn--md { font-size: 15px; padding: 13px 28px; } .btn--lg { font-size: 17px; padding: 16px 34px; } /* Variants */ .btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-button-primary); } .btn--primary:hover { background: var(--color-primary-hover); color: #fff; } .btn--secondary { background: #fff; color: var(--text-heading); border: 1.5px solid var(--border-tint); } .btn--secondary:hover { background: var(--surface-wash); color: var(--text-heading); } .btn--on-brand { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-button-on-brand); } .btn--on-brand:hover { background: var(--violet-050); color: var(--ink-900); } .btn--ghost-on-dark { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.7); } .btn--ghost-on-dark:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .btn--cta-on-ink { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-float); } .btn--cta-on-ink:hover { background: var(--color-primary-hover); color: #fff; } /* -------------------------------------------------------------------------- components/core/Badge.jsx → .badge -------------------------------------------------------------------------- */ .badge { display: inline-block; font-family: var(--font-display); font-size: var(--text-badge); padding: 8px 18px; border-radius: var(--radius-pill); color: #fff; } .badge--coral { background: var(--step-1); } .badge--violet { background: var(--step-2); } .badge--green { background: var(--step-3); } .badge--yellow { background: var(--yellow-400); color: var(--ink-900); } .badge--ink { background: var(--ink-900); } /* -------------------------------------------------------------------------- components/core/Sticker.jsx → .sticker -------------------------------------------------------------------------- */ .sticker { display: inline-block; font-family: var(--font-body); font-weight: 800; font-size: var(--text-badge); padding: 10px 18px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sticker); pointer-events: none; } .sticker--yellow { background: var(--yellow-400); color: var(--ink-900); } .sticker--green { background: var(--green-500); color: #fff; } .sticker--coral { background: var(--coral-500); color: #fff; } .sticker--violet { background: var(--violet-500); color: #fff; } .sticker--white { background: #fff; color: var(--ink-900); } /* -------------------------------------------------------------------------- components/core/IconChip.jsx → .icon-chip -------------------------------------------------------------------------- */ .icon-chip { width: 56px; height: 56px; border-radius: var(--radius-icon); display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; } .icon-chip--violet { background: var(--violet-500); color: #fff; } .icon-chip--coral { background: var(--coral-500); color: #fff; } .icon-chip--green { background: var(--green-500); color: #fff; } .icon-chip--yellow { background: var(--yellow-400); color: var(--ink-900); } .icon-chip--ink { background: var(--ink-900); color: #fff; } /* -------------------------------------------------------------------------- components/core/Card.jsx → .card -------------------------------------------------------------------------- */ .card { border-radius: var(--radius-card); overflow: hidden; box-sizing: border-box; } .card__body { padding: 40px; } .card--wash { background: var(--surface-wash); } .card--white { background: #fff; border: 1.5px solid var(--border-subtle); } .card--dark { background: var(--surface-ink); color: var(--text-on-dark); } .card--brand { background: var(--surface-brand); color: var(--text-on-brand); } /* -------------------------------------------------------------------------- components/core/SectionHeading.jsx → .section-heading -------------------------------------------------------------------------- */ .section-heading { text-align: center; } .section-heading__eyebrow { color: var(--color-primary); font-family: var(--font-body); font-weight: 800; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .section-heading--on-dark .section-heading__eyebrow { color: var(--violet-300); } .section-heading__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--text-heading); margin: 12px 0 0; } .section-heading--on-dark .section-heading__title { color: #fff; } /* -------------------------------------------------------------------------- components/marketing/NavBar.jsx → .navbar -------------------------------------------------------------------------- */ .navbar { background: var(--surface-brand); position: relative; } .navbar__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 48px; } .navbar__logo { font-family: var(--font-display); font-size: var(--logo-size); color: #fff; letter-spacing: -0.5px; text-decoration: none; } .navbar__logo-mark { color: var(--yellow-400); } .navbar__links { display: flex; gap: 32px; align-items: center; } .navbar__link { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: var(--text-small); text-decoration: none; } .navbar__actions { display: flex; gap: 12px; align-items: center; } .navbar__cta { background: #fff; color: var(--ink-900); font-family: var(--font-body); font-weight: 700; font-size: var(--text-small); padding: 12px 26px; border-radius: var(--radius-pill); text-decoration: none; } /* Hamburger toggle — hidden ≥768px */ .navbar__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: none; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; } .navbar__toggle-bar { width: 22px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform var(--transition-fast), opacity var(--transition-fast); } .navbar.is-open .navbar__toggle-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .navbar.is-open .navbar__toggle-bar:nth-child(2) { opacity: 0; } .navbar.is-open .navbar__toggle-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Mobile dropdown */ .navbar__mobile-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: var(--surface-brand); border-top: 1px solid rgba(127, 127, 127, 0.2); flex-direction: column; gap: 4px; padding: 12px 20px 20px; box-shadow: 0 20px 40px rgba(36, 31, 61, 0.25); } .navbar.is-open .navbar__mobile-menu { display: flex; } .navbar__mobile-link { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 17px; text-decoration: none; padding: 12px 4px; } .navbar__mobile-cta { background: #fff; color: var(--ink-900); font-family: var(--font-body); font-weight: 700; font-size: var(--text-small); padding: 14px 26px; border-radius: var(--radius-pill); text-decoration: none; text-align: center; margin-top: 8px; } @media (max-width: 767px) { .navbar__bar { padding: 16px 20px; } .navbar__links { display: none; } .navbar__actions .navbar__cta { display: none; } .navbar__toggle { display: flex; } } /* -------------------------------------------------------------------------- components/marketing/Footer.jsx → .footer -------------------------------------------------------------------------- */ .footer { background: var(--surface-ink); border-top: 1px solid var(--border-on-dark); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 24px clamp(20px, 5vw, 48px); } .footer__logo { font-family: var(--font-display); font-size: 16px; color: #fff; } .footer__logo-mark { color: var(--yellow-400); } .footer__note { font-family: var(--font-body); font-size: var(--text-caption); color: var(--text-on-dark-faint); } .footer__note a { color: var(--link-on-dark); text-decoration: none; } /* -------------------------------------------------------------------------- components/marketing/WaveDivider.jsx → .wave-divider -------------------------------------------------------------------------- */ .wave-divider { display: block; width: 100%; height: 80px; background: var(--violet-500); } /* -------------------------------------------------------------------------- Image-slot placeholders (no real assets yet) -------------------------------------------------------------------------- */ .image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-image); box-sizing: border-box; border: 1.5px solid var(--border-tint); background: var(--surface-wash); } .image-placeholder__glyph { font-size: clamp(40px, 6vw, 64px); line-height: 1; } /* On the violet hero, use a translucent white panel instead of the wash */ .image-placeholder--on-brand { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); } .image-placeholder--on-brand .image-placeholder__glyph { color: var(--yellow-400); } .image-placeholder--coral .image-placeholder__glyph { color: var(--coral-500); } .image-placeholder--violet .image-placeholder__glyph { color: var(--violet-500); } .image-placeholder--green .image-placeholder__glyph { color: var(--green-500); } /* ========================================================================== Page-specific styles (from ui_kits/website/index.html) ========================================================================== */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); } /* ---- Hero ---- */ .hero { background: var(--surface-brand); position: relative; overflow: hidden; padding: var(--space-section) 0 calc(64px + var(--space-section)); text-align: center; } .hero__container { position: relative; } .hero__shape { position: absolute; border-radius: 50%; background: var(--shape-on-brand); pointer-events: none; } .hero__shape--left { left: -80px; top: 120px; width: 260px; height: 260px; } .hero__shape--right { right: -60px; top: 40px; width: 200px; height: 200px; } .hero__spark { position: absolute; pointer-events: none; } .hero__spark--yellow { left: 9%; top: 64px; font-size: 42px; color: var(--yellow-400); transform: rotate(-12deg); } .hero__spark--coral { right: 11%; top: 210px; font-size: 30px; color: var(--coral-500); transform: rotate(18deg); } .hero__title { font-size: var(--text-hero); line-height: var(--leading-display); letter-spacing: var(--tracking-hero); color: #fff; text-transform: uppercase; max-width: 900px; margin: 0 auto; } .hero__lead { font-size: var(--text-lead); line-height: 1.55; color: var(--text-on-brand-muted); max-width: 620px; margin: 24px auto 0; } .hero-buttons { display: flex; gap: 16px; justify-content: center; margin-top: 36px; } .hero-frame { position: relative; max-width: 940px; height: 400px; margin: 56px auto 0; } .sticker-l { position: absolute; top: -22px; left: -34px; } .sticker-r { position: absolute; top: -22px; right: -30px; } /* ---- Services ---- */ .services { background: #fff; padding: var(--space-section) 0; } .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); margin-top: 44px; } .services-grid h3 { font-size: var(--text-h4); margin: 24px 0 10px; } /* ---- Process ---- */ .process { background: var(--surface-wash); padding: var(--space-section) 0; } .process__container { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 72px); } .process-row { display: flex; gap: var(--row-gap); align-items: center; } .process-row.rev { flex-direction: row-reverse; } .process-row__text { flex: 1; } .process-row__text h3 { font-size: var(--text-h3); margin: 18px 0 12px; } .process-row__text p { font-size: var(--text-body-lg); max-width: 420px; } .process-img { width: 460px; height: 290px; flex: none; } /* ---- CTA (ink) ---- */ .cta-section { background: var(--surface-ink); position: relative; overflow: hidden; padding: var(--space-section) 0; text-align: center; } .cta-section__spark { position: absolute; pointer-events: none; } .cta-section__spark--yellow { left: 8%; top: 70px; font-size: 34px; color: var(--yellow-400); transform: rotate(-14deg); } .cta-section__spark--green { right: 9%; bottom: 80px; font-size: 26px; color: var(--green-500); transform: rotate(12deg); } .cta-section__title { font-size: var(--text-display); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: #fff; text-transform: uppercase; max-width: 760px; margin: 0 auto; } .cta-section__lead { font-size: var(--text-lead); color: var(--text-on-dark-muted); max-width: 520px; margin: 20px auto 36px; } .cta-section__note { font-size: 16px; color: var(--text-on-dark-faint); margin: 24px 0 0; } .cta-section__note a { color: var(--link-on-dark); text-decoration: none; } /* ---- Responsive rules ---- */ @media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } .process-row, .process-row.rev { flex-direction: column; align-items: stretch; gap: 24px; } .process-img { width: 100%; height: 240px; } .hero-frame { height: 300px; } } @media (max-width: 640px) { .hero-buttons { flex-direction: column; align-items: stretch; } .hero-frame { height: 220px; } .sticker-l { left: -8px; } .sticker-r { right: -8px; } }