/* * Sathvika Solutions (Satsol) — design tokens * Source of truth: Main_Website/IMPLEMENTATION-GUIDE.md section 2 ("Design system") * and the Satsol Portal mockup. Every page in dist/ links this file first. */ :root { /* Color */ --ink: #14181D; /* body text / dark surfaces */ --paper: #F7F5F1; /* page background */ --accent: #F0552B; /* primary brand / CTA */ --accent-hover: #C93F16; /* CTA hover/active */ --muted: #6B7280; /* secondary text */ --border: #E5E1D8; /* card/section borders on light surfaces */ --alt: #EFEBE3; /* alternating section background */ /* Layout */ --content-width: 1240px; --section-pad: 96px; --radius-sm: 4px; --radius-lg: 8px; /* Typography */ --font-heading: 'Familjen Grotesk', sans-serif; --font-body: 'Schibsted Grotesk', sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; margin: 0; } a { color: inherit; text-decoration: none; } /* Shared layout helpers ---------------------------------------------- */ .container { max-width: var(--content-width); margin: 0 auto; padding: 0 24px; } .section { padding: var(--section-pad) 0; } .section-alt { background: var(--alt); } .kicker { font-size: 13px; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); font-weight: 700; } /* Buttons -------------------------------------------------------------- */ .btn { display: inline-block; border-radius: var(--radius-sm); padding: 14px 28px; font-weight: 600; font-size: 16px; cursor: pointer; border: none; font-family: var(--font-body); transition: background .15s ease, border-color .15s ease, color .15s ease; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } /* Cards ------------------------------------------------------------------ */ .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); } /* Header / nav ---------------------------------------------------------- * Desktop: logo left, inline nav right. Below 900px the nav collapses into * a slide-down panel toggled by nav.js (id="navToggle" -> .nav-open on * or #siteNav — see nav.js for the exact toggle target). */ .site-header { background: var(--ink); position: sticky; top: 0; z-index: 100; } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; } .site-header__logo img { height: 32px; display: block; } .site-nav { display: flex; align-items: center; gap: 32px; } .site-nav a { color: #E8E6E1; font-size: 15px; font-weight: 500; } .site-nav a:hover { color: var(--accent); } .site-nav__cta { padding: 10px 22px !important; } .site-nav__cta:hover { color: #fff !important; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; padding: 0; } .nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; } /* Hamburger nav breakpoint: below 900px, hide the inline nav behind the * toggle button; nav.js adds/removes .nav-open on #siteNav to reveal it. */ @media (max-width: 899px) { .site-nav { position: absolute; top: 76px; left: 0; right: 0; background: var(--ink); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; display: none; } .site-nav.nav-open { display: flex; } .site-nav a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); } .site-nav__cta { margin-top: 12px; text-align: center; } .nav-toggle { display: flex; } .nav-toggle.nav-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.nav-open span:nth-child(2) { opacity: 0; } .nav-toggle.nav-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* Footer ------------------------------------------------------------------ */ .site-footer { background: var(--ink); color: #B8BDC4; padding: var(--section-pad) 0 32px; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 48px; } .site-footer h2 { color: #fff; font-size: 18px; margin-bottom: 16px; } .site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .site-footer__links a:hover { color: var(--accent); } .site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; font-size: 13.5px; color: #8A9099; } @media (max-width: 899px) { .site-footer__grid { grid-template-columns: 1fr; gap: 32px; } }