@charset "UTF-8"; /* ============================================================ Dip Palit — dippalit.com Stylesheet v1.2 Same identity as v1.0: navy + blue, Raleway display / Nunito body. Rebuilt on a token system with fluid type, intrinsic grids, dark mode and modern selectors. Loaded font weights (see ): Raleway 600/700/800, Nunito 400/600/700. Do not use weights outside that set. CONTENTS 01 Tokens 02 Reset & base 03 Typography 04 Layout primitives 05 Navigation 06 Buttons 07 Hero 08 Section furniture 09 Statistics <- the emphasis of this design 10 Cards 11 Process & timeline 12 Blog 13 Prose & article 14 Callouts 15 Tables 16 Lists & checklists 17 Pricing 18 Forms, contact, about 19 CTA, Upwork, footer 20 Motion 21 Dark mode 22 Print ============================================================ */ /* ═══ 01 TOKENS ═══════════════════════════════════════════ */ :root { color-scheme: light; /* Brand — unchanged from v1.0 */ --navy: #0F172A; --blue: #2563EB; --sky: #60A5FA; /* figures on dark surfaces */ --accent: #1D4ED8; --white: #FFFFFF; /* Neutrals */ --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-600: #475569; --gray-800: #1E293B; /* Status */ --green: #059669; --green-light: #ECFDF5; --amber: #D97706; --amber-light: #FEF3C7; --red: #DC2626; --red-light: #FEF2F2; /* Derived tints — one source of truth instead of hardcoded hexes */ --blue-light: color-mix(in srgb, var(--blue) 6%, var(--white)); --blue-mid: color-mix(in srgb, var(--blue) 14%, var(--white)); --blue-ring: color-mix(in srgb, var(--blue) 22%, transparent); /* Semantic surfaces — what components actually reference */ --surface: var(--white); --surface-sunk: var(--gray-50); --surface-card: var(--white); --surface-dark: var(--navy); --ink: var(--navy); --ink-muted: var(--gray-600); --ink-faint: var(--gray-400); --ink-on-dark: var(--white); --line: var(--gray-200); --line-strong: var(--gray-300); /* Type */ --font-display: 'Raleway', ui-sans-serif, system-ui, sans-serif; --font-body: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif; /* Fluid scale — no breakpoint jumps */ --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-base: clamp(0.975rem, 0.95rem + 0.12vw, 1.0625rem); --t-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --t-xl: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); --t-2xl: clamp(1.45rem, 1.25rem + 0.9vw, 1.9rem); --t-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.45rem); --t-4xl: clamp(2.2rem, 1.6rem + 2.8vw, 3.5rem); /* Figures — deliberately outside the text scale */ --t-stat: clamp(1.75rem, 1.4rem + 1.4vw, 2.3rem); --t-stat-lg: clamp(2.1rem, 1.6rem + 2.2vw, 2.9rem); /* Spacing */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3.5rem; --s-9: 5rem; --section-y: clamp(3.25rem, 7vw, 5.75rem); /* Measure */ --container: 1180px; --measure: 68ch; /* Radius — by role, not uniform */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 100px; /* Layered shadows */ --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.05); --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 12px -2px rgb(15 23 42 / 0.07); --shadow-lg: 0 2px 4px rgb(15 23 42 / 0.04), 0 12px 28px -6px rgb(15 23 42 / 0.10); --ease: cubic-bezier(0.32, 0.72, 0, 1); --nav-h: 64px; } /* ═══ 02 RESET & BASE ═════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--s-5)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--t-base); line-height: 1.7; color: var(--ink); background: var(--surface); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; height: auto; } a { color: var(--blue); text-underline-offset: 0.18em; } button, input, textarea, select { font: inherit; color: inherit; } :where(ul, ol) { padding-inline-start: 1.15rem; } /* Anchor targets clear the fixed nav */ [id] { scroll-margin-top: calc(var(--nav-h) + var(--s-5)); } ::selection { background: var(--blue-ring); color: var(--navy); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 1000; background: var(--blue); color: var(--white); padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-sm) 0; font-weight: 700; text-decoration: none; } .skip-link:focus { inset-inline-start: 0; } /* ═══ 03 TYPOGRAPHY ═══════════════════════════════════════ */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.14; letter-spacing: -0.022em; text-wrap: balance; color: var(--ink); } h3, h4 { font-weight: 700; letter-spacing: -0.015em; } p { text-wrap: pretty; } strong, b { font-weight: 700; } .highlight { color: var(--blue); } .hero-title .highlight { position: relative; display: inline-block; } /* ═══ 04 LAYOUT PRIMITIVES ════════════════════════════════ */ main { padding-top: var(--nav-h); } section { padding-block: var(--section-y); } .si { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .bg-gray { background: var(--surface-sunk); } .bg-navy { background: var(--surface-dark); color: var(--ink-on-dark); background-image: radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 70%); } .bg-navy :is(h1, h2, h3, h4) { color: var(--ink-on-dark); } /* Two same-coloured bands in a row would double their padding */ .bg-gray + .bg-gray, .bg-navy + .bg-navy { padding-block-start: 0; } /* ═══ 05 NAVIGATION ═══════════════════════════════════════ */ body > nav { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-inline: clamp(1.25rem, 3vw, 2rem); background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease); } @supports (backdrop-filter: blur(1px)) { body > nav { background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(180%) blur(16px); } } /* Rule appears only once the page scrolls under it */ @supports (animation-timeline: scroll()) { body > nav { animation: nav-border linear both; animation-timeline: scroll(); animation-range: 0 120px; } @keyframes nav-border { to { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } } } @supports not (animation-timeline: scroll()) { body > nav { border-bottom-color: var(--line); } } .nav-logo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; white-space: nowrap; } .nav-logo span { color: var(--blue); } .nav-links { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.65rem); list-style: none; padding: 0; margin: 0; } .nav-links a { position: relative; font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); text-decoration: none; padding-block: 0.4rem; transition: color 0.18s var(--ease); } .nav-links a:hover { color: var(--blue); } .nav-links a.active { color: var(--ink); } .nav-links a.active::after { content: ""; position: absolute; inset-inline: 0; bottom: -0.1rem; height: 2px; border-radius: 2px; background: var(--blue); } .nav-dropdown { position: relative; } .nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 0; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); padding-block: 0.4rem; transition: color 0.18s var(--ease); } .nav-dropdown-toggle:hover, .nav-dropdown:hover .nav-dropdown-toggle { color: var(--blue); } .nav-dropdown-toggle i { font-size: 0.7em; transition: rotate 0.2s var(--ease); } .nav-dropdown:is(:hover, :focus-within) .nav-dropdown-toggle i { rotate: 180deg; } .nav-dropdown-menu { position: absolute; top: calc(100% + 0.6rem); inset-inline-start: 50%; min-width: 17rem; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: var(--s-2); list-style: none; margin: 0; opacity: 0; visibility: hidden; translate: -50% 6px; transition: opacity 0.18s var(--ease), translate 0.18s var(--ease), visibility 0.18s; } .nav-dropdown:is(:hover, :focus-within, .active) .nav-dropdown-menu { opacity: 1; visibility: visible; translate: -50% 0; } .nav-dropdown.active .nav-dropdown-toggle { color: var(--blue); } .nav-dropdown.active .nav-dropdown-toggle i { rotate: 180deg; } .nav-dropdown-menu a { display: block; padding: 0.55rem 0.8rem; border-radius: var(--r-sm); font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); text-decoration: none; } .nav-dropdown-menu a:hover { background: var(--blue-light); color: var(--blue); } .nav-cta { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--blue); color: var(--white) !important; padding: 0.5rem 1.05rem; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgb(37 99 235 / 0.3); transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease); } .nav-cta:hover { background: var(--accent); box-shadow: 0 2px 10px rgb(37 99 235 / 0.35); } .nav-cta::after { display: none !important; } /* Icon-only control: guarantee a 44px tap target even if the icon font is slow, blocked or fails to load. */ .nav-mobile-toggle { display: none; place-items: center; width: 2.75rem; height: 2.75rem; background: none; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--ink); border-radius: var(--r-sm); } .nav-mobile-toggle:hover { background: var(--surface-sunk); } @media (max-width: 960px) { .nav-mobile-toggle { display: grid; } .nav-links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-4); background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; display: none; } .nav-links.active { display: flex; } .nav-links > li { border-bottom: 1px solid var(--line); } .nav-links > li:last-child { border-bottom: 0; } .nav-links a, .nav-dropdown-toggle { width: 100%; padding: 0.85rem 0.25rem; font-size: 0.95rem; } .nav-links a.active::after { display: none; } .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; translate: none; border: 0; box-shadow: none; padding: 0 0 var(--s-3) var(--s-4); min-width: 0; display: none; } .nav-dropdown:is(:focus-within, .active, .open) .nav-dropdown-menu { display: block; translate: none; } .nav-cta { justify-content: center; margin-top: var(--s-3); } } /* ═══ 06 BUTTONS ══════════════════════════════════════════ */ .btn-primary, .btn-secondary, .btn-upwork, .btn-w, .btn-wa, .btn-ow { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.82rem 1.6rem; border-radius: var(--r-pill); font-size: 0.9rem; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), translate 0.18s var(--ease); } :is(.btn-primary, .btn-secondary, .btn-upwork, .btn-w, .btn-wa, .btn-ow):active { translate: 0 1px; } .btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 1px 2px rgb(37 99 235 / 0.25), 0 6px 16px -4px rgb(37 99 235 / 0.35); } .btn-primary:hover { background: var(--accent); box-shadow: 0 2px 4px rgb(37 99 235 / 0.25), 0 10px 22px -6px rgb(37 99 235 / 0.45); } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } .btn-secondary:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); } .btn-upwork { background: #14A800; color: var(--white); box-shadow: 0 1px 2px rgb(20 168 0 / 0.25), 0 6px 16px -4px rgb(20 168 0 / 0.3); } .btn-upwork:hover { background: #108A00; } .btn-w { background: var(--white); color: var(--navy); box-shadow: 0 6px 20px -6px rgb(0 0 0 / 0.45); } .btn-w:hover { background: var(--gray-100); } .btn-ow { background: transparent; color: var(--white); border-color: rgb(255 255 255 / 0.35); } .btn-ow:hover { border-color: var(--white); background: rgb(255 255 255 / 0.1); } .btn-wa { background: #25D366; color: #04301A; } .btn-wa:hover { background: #1FBA59; } /* ═══ 07 HERO ═════════════════════════════════════════════ */ .hero-title { font-size: var(--t-4xl); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; margin-bottom: var(--s-5); max-width: 17ch; } @media (max-width: 940px) { .hero-title { max-width: 22ch; } } .hero-sub { font-size: var(--t-lg); color: var(--ink-muted); max-width: 54ch; margin-bottom: var(--s-6); line-height: 1.65; } .hero-badges, .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .hero-actions { gap: var(--s-4); margin-bottom: var(--s-7); } .hero-badges { margin-bottom: var(--s-6); } .hero-badge, .hb { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 700; color: var(--ink-muted); background: var(--surface-card); border: 1px solid var(--line); padding: 0.4rem 0.9rem; border-radius: var(--r-pill); } /* availability flag in the hero reads as a live signal, not a neutral chip */ .hero-badge { background: var(--blue-light); border-color: var(--blue-mid); color: var(--accent); margin-bottom: var(--s-5); } .hero-badge i, .hb i { color: var(--blue); font-size: 0.9em; } /* The print control is