/* ========================================================================== common.css — OG Calculators design system Loaded on EVERY page: design tokens, reset, typography, buttons, shared components (badges, section headings, icon helpers) + dark theme. ========================================================================== */ /* ------------------------------------------------------------------ Tokens */ :root { /* Brand */ --primary: #6C5CE7; --primary-dark: #5B3EE8; --primary-light: #7C5CFF; --primary-grad: linear-gradient(135deg, #7C5CFF 0%, #5B3EE8 100%); --green: #10B981; --green-dark: #059669; /* Surfaces & text (light theme defaults) */ --bg: #ffffff; --bg-soft: #F6F5FF; --bg-hero: linear-gradient(180deg, #F1EEFF 0%, #F8F7FF 55%, #ffffff 100%); --section-bg: #edeaff7a; /* soft lavender for alternating sections */ --card: #ffffff; --heading: #17142E; --text: #423F55; --muted: #7A7690; --border: #ECEAF6; --border-strong: #E0DDF0; /* Soft tints for icon chips */ --tint-purple: #EDEAFF; --tint-green: #DCF5EA; --tint-red: #FDE6E9; --tint-orange: #FFEBD8; --tint-blue: #E4EEFF; --tint-amber: #FFF3D6; /* Radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(30, 20, 80, .05); --shadow-md: 0 10px 30px rgba(40, 25, 90, .07); --shadow-lg: 0 24px 60px rgba(40, 25, 90, .12); --shadow-primary: 0 12px 26px rgba(92, 62, 232, .32); /* Layout */ --container: 1180px; --header-h: 76px; --font: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --transition: .22s ease; } /* Dark theme — toggled by JS via [data-theme="dark"] on */ [data-theme="dark"] { --bg: #100E1B; --bg-soft: #16132492; --bg-hero: linear-gradient(180deg, #1A1630 0%, #14111F 60%, #100E1B 100%); --section-bg: #241f457a; --card: #1A1730; --heading: #F3F1FB; --text: #C7C3DC; --muted: #948FB0; --border: #2A2643; --border-strong: #322D4F; --tint-purple: #241F45; --tint-green: #12302A; --tint-red: #351E28; --tint-orange: #33261A; --tint-blue: #1B2440; --tint-amber: #322915; --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3); --shadow-md: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5); } /* ------------------------------------------------------------------- Reset */ *, *::before, *::after { box-sizing: border-box; } /* Kill horizontal scroll from off-canvas menu / decorative overflow. `clip` (not `hidden`) so it never turns into a scroll container and the sticky header keeps working. */ html, body { overflow-x: clip; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--heading); font-weight: 700; line-height: 1.2; } p { margin: 0; } a { color: inherit; text-decoration: none; transition: color var(--transition); } img, svg { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* Hide native number-input spin buttons everywhere (site-wide, all pages). The up/down steppers were leaking through on some inputs — kill them globally. */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; appearance: textfield; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- Layout */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } /* Full-width variant (used by the tool workspace pages) — spans the viewport but keeps the site's standard 24px gutters. Overrides Bootstrap's default. */ .container-fluid { width: 100%; max-width: none; margin-inline: auto; padding-inline: 24px; } .section { padding-block: 64px; } .section-tight { padding-block: 44px; } /* Section heading (centered title used across sections) */ .section-head { text-align: center; margin-bottom: 40px; } .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; } .section-head p { margin-top: 10px; color: var(--muted); font-size: 1rem; } /* ---------------------------------------------------------------- Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: .95rem; padding: 12px 22px; border-radius: var(--r-pill); transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary-grad); color: #fff; box-shadow: var(--shadow-primary); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(92, 62, 232, .4); } .btn-green { background: linear-gradient(135deg, #22C55E 0%, #059669 100%); color: #fff; box-shadow: 0 12px 26px rgba(5, 150, 105, .3); } .btn-green:hover { transform: translateY(-2px); } .btn-light { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-md); } .btn-light:hover { transform: translateY(-2px); } .btn-outline { background: var(--card); color: var(--heading); border: 1.5px solid var(--border-strong); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); } .btn-block { width: 100%; } /* ------------------------------------------------------------- Components */ /* Small pill badge, e.g. "Fast • Accurate • 100% Free" */ .badge-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--r-pill); background: var(--tint-purple); color: var(--primary-dark); font-size: .82rem; font-weight: 600; } [data-theme="dark"] .badge-pill { color: var(--primary-light); } /* NEW tag */ .tag-new { font-size: .62rem; font-weight: 700; letter-spacing: .5px; padding: 2px 7px; border-radius: 5px; background: var(--tint-green); color: var(--green-dark); text-transform: uppercase; } /* Rounded tinted square that holds an icon */ .icon-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: var(--tint-purple); } .icon-chip img { width: 26px; height: 26px; } .icon-chip.round { border-radius: var(--r-pill); } .chip-purple { background: var(--tint-purple); } .chip-green { background: var(--tint-green); } .chip-red { background: var(--tint-red); } .chip-orange { background: var(--tint-orange); } .chip-blue { background: var(--tint-blue); } .chip-amber { background: var(--tint-amber); } /* Inline-SVG icon helper — a monochrome icon that follows the current text color via currentColor. Works on file:// AND over http (unlike CSS mask, which Chrome blocks for external SVGs on file://). Usage: (sprite in ) */ .micon { display: inline-block; width: 20px; height: 20px; color: inherit; flex-shrink: 0; } .micon use { color: inherit; } /* -------------------------------------------------------------- Utilities */ .text-primary-c { color: var(--primary); } .text-muted-c { color: var(--muted); } .text-center { text-align: center; } .hidden { display: none !important; } /* Reveal-on-scroll (progressive enhancement; only hides when JS is present) */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ====================== Search type-ahead (search.js) ====================== */ /* Shared by the header box and the hero box: the panel is positioned against whichever pill wraps the input. */ .header-search, .hero-search { position: relative; } .ac-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: 140; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--transition), visibility var(--transition), transform var(--transition); } .ac-panel.open { opacity: 1; visibility: visible; transform: none; } /* The header pill is only 240px wide, so matching the input exactly clipped longer names — "Pythagorean Theorem Calculator" came out as an ellipsis. Let the panel size to its content instead and hang it from the right edge, which is the side that has room, capped so it can never leave the viewport. The hero box on the home page is already wide, so it keeps the shared rule. */ .header-search .ac-panel { left: auto; right: 0; width: max-content; min-width: 100%; max-width: min(430px, calc(100vw - 24px)); } .ac-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--text); } .ac-item.active { background: var(--bg-soft); } .ac-item .ac-icon { width: 32px; height: 32px; border-radius: 9px; } .ac-item .ac-icon img { width: 17px; height: 17px; } .ac-name { flex: 1; min-width: 0; font-size: .9rem; font-weight: 500; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-name b { font-weight: 700; color: var(--primary); } /* The badge says what the visitor is about to open. */ .ac-badge { flex-shrink: 0; font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); } .ac-calculator { background: var(--tint-blue); color: #2563EB; } .ac-tool { background: var(--tint-purple); color: var(--primary); } .ac-category { background: var(--tint-amber); color: #B45309; } [data-theme="dark"] .ac-calculator { color: #8FB4FF; } [data-theme="dark"] .ac-tool { color: #AC9BFF; } [data-theme="dark"] .ac-category { color: #F2BC66; } .ac-empty { padding: 12px 10px; font-size: .86rem; color: var(--muted); text-align: center; } /* Number inputs: never show the browser's up/down spin buttons — they sit on top of the calculator displays (sci-display etc.) and look broken. */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; }