/* * bakti-ui.css — Shared Baktinet 3 UI component library * * Design tokens + reusable components extracted from the Framer UI designs. * Import this in any page to get consistent styling without re-deriving values. * * Requires Google Fonts loaded in : * Stack Sans Notch (300, 600) — display/headings * Ubuntu (400, 500) — body/buttons */ /* ================================================================ DESIGN TOKENS ================================================================ */ :root { /* Colors */ --bakti-bg-dark: rgb(29, 35, 41); --bakti-bg-darker: rgb(17, 20, 24); --bakti-text-light: rgb(234, 242, 248); --bakti-accent-cyan: rgb(0, 255, 229); --bakti-btn-bg: rgb(234, 242, 248); --bakti-btn-text: rgb(29, 35, 41); /* Typography */ --bakti-font-display: 'Stack Sans Notch', sans-serif; --bakti-font-body: 'Ubuntu', sans-serif; /* Button tokens */ --bakti-btn-radius: 48px; --bakti-btn-padding: 9px 16px; --bakti-btn-shadow: rgba(0, 0, 0, 0.18) 0px 0.6px 0.6px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.3px 2.3px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px; } /* ================================================================ RESET & BASE ================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--bakti-font-body); background-color: var(--bakti-bg-dark); color: var(--bakti-text-light); min-height: 100vh; overflow-x: hidden; } /* ================================================================ TYPOGRAPHY ================================================================ */ /* Large display heading (e.g. page titles) */ .bakti-title { font-family: var(--bakti-font-display); font-size: 48px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--bakti-text-light); } /* Smaller display heading */ .bakti-title--sm { font-size: 32px; font-weight: 300; line-height: 1.4; } /* Standard body text */ .bakti-text { font-family: var(--bakti-font-body); font-size: 17px; font-weight: 400; line-height: 1.55; color: var(--bakti-text-light); } /* Cyan accent variant */ .bakti-text--cyan { color: var(--bakti-accent-cyan); } /* Underlined link */ .bakti-link { font-family: var(--bakti-font-body); font-size: 17px; font-weight: 400; color: var(--bakti-text-light); text-decoration: underline; transition: color 0.15s ease; } .bakti-link:hover { color: var(--bakti-accent-cyan); } .bakti-link:focus-visible { outline: 2px solid var(--bakti-accent-cyan); outline-offset: 2px; } /* ================================================================ BUTTON — .bakti-btn Default: filled light pill with dark text Variants: --ghost, --outline ================================================================ */ .bakti-btn { display: inline-flex; align-items: center; gap: 8px; padding: var(--bakti-btn-padding); background-color: var(--bakti-btn-bg); border: none; border-radius: var(--bakti-btn-radius); box-shadow: var(--bakti-btn-shadow); text-decoration: none; cursor: pointer; transition: transform 0.15s ease; font-family: var(--bakti-font-body); font-size: 17px; } .bakti-btn:hover:not(:disabled) { transform: scale(1.03); } .bakti-btn:active:not(:disabled) { transform: scale(0.97); } .bakti-btn:disabled { opacity: 0.5; cursor: default; } .bakti-btn:focus-visible { outline: 2px solid var(--bakti-accent-cyan); outline-offset: 2px; } .bakti-btn-text { font-family: var(--bakti-font-body); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--bakti-btn-text); } /* Small inline arrow (18×18, inherits parent color) */ .bakti-btn-arrow { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } .bakti-btn-arrow svg { width: 100%; height: 100%; } /* Circular arrow badge (38×38, gradient bg) — sits flush within button height */ .bakti-btn-arrow-circle { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(50% 50%, rgb(212, 212, 212) 0%, rgb(255, 255, 255) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin: -8px 0; } .bakti-btn-arrow-circle svg { width: 20px; height: 20px; } /* --- Ghost variant: transparent bg, light text --- */ .bakti-btn--ghost { background-color: transparent; box-shadow: none; } .bakti-btn--ghost .bakti-btn-text { color: var(--bakti-text-light); } .bakti-btn--ghost .bakti-btn-arrow svg { color: var(--bakti-text-light); } /* --- Outline variant: transparent bg, light border --- */ .bakti-btn--outline { background-color: transparent; border: 1px solid var(--bakti-text-light); box-shadow: none; } .bakti-btn--outline .bakti-btn-text { color: var(--bakti-text-light); }