/* ========================================================================= BraveHill site stylesheet - Light "clean business" theme is the default (:root). - The dark DashBot theme is applied via and is a cohesive subset; the full /dashbot design-bundle styles land in the dedicated page build. - Corner-radius convention: 4px. ========================================================================= */ /* ----- tokens: light (BraveHill) ----- */ :root { --paper: #FAFAF7; --paper-2: #F1F1EC; --white: #FFFFFF; --ink: #0F1A14; --ink-2: #38463E; --ink-3: #6B776F; --line: #E4E4DD; --line-2: #D2D2C8; --green: #0F6442; --green-600: #0C5236; --green-700: #0A4630; --green-soft: #E7F0EA; --accent: var(--green); --accent-ink: #FFFFFF; --bg: var(--paper); --surface: var(--white); --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --radius: 4px; --container: 1120px; --pad-x: 24px; --shadow-sm: 0 1px 2px rgba(15,26,20,0.06), 0 1px 1px rgba(15,26,20,0.04); --shadow-md: 0 8px 28px rgba(15,26,20,0.10); --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ----- tokens: dark (DashBot) ----- */ .theme-dark { --paper: #060606; --paper-2: #0E0E0E; --white: #0E0E0E; --ink: #F2F2F2; --ink-2: #B8B8B8; --ink-3: #7A7A7A; --line: #262626; --line-2: #3A3A3A; --accent: #CC0000; --accent-ink: #FFFFFF; --green: #FF1F1F; /* hover/accent in dark */ --green-600: #FF1F1F; --green-soft: rgba(204,0,0,0.14); --bg: var(--paper); --surface: var(--paper-2); --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --shadow-sm: none; --shadow-md: 0 18px 60px rgba(0,0,0,0.6); } /* ----- reset / base ----- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--green-600); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4 { color: var(--text); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.4em; font-weight: 800; } h1 { font-size: clamp(40px, 5.5vw, 68px); } h2 { font-size: clamp(28px, 3.6vw, 42px); } h3 { font-size: 21px; letter-spacing: -0.01em; } p { margin: 0 0 1em; color: var(--text-2); } strong { color: var(--text); font-weight: 650; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); } section { padding: 88px 0; } .section--tight { padding: 56px 0; } .surface { background: var(--surface); } .muted { color: var(--text-3); } .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-600); margin: 0 0 14px; font-weight: 600; } .lead { font-size: 19px; color: var(--text-2); max-width: 56ch; } .center { text-align: center; } .center .lead { margin-inline: auto; } /* ----- buttons ----- */ .btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease), transform .05s, box-shadow .18s var(--ease); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--green-600); box-shadow: var(--shadow-md); } .theme-dark .btn--primary:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(255,30,30,0.45); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); } .btn--ghost:hover { background: var(--paper-2); border-color: var(--text-3); } .btn--lg { padding: 14px 26px; font-size: 16px; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* ----- nav ----- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; gap: 28px; height: 68px; } .nav__brand { display: flex; align-items: center; } .nav__brand img { height: 30px; width: auto; } .theme-dark .nav__brand .brandmark--light { display: none; } .nav__links { display: flex; gap: 26px; margin-left: 8px; } .nav__links a { color: var(--text-2); font-size: 15px; font-weight: 500; } .nav__links a:hover, .nav__links a.is-active { color: var(--text); text-decoration: none; } .nav__spacer { flex: 1; } .nav__cta { font-size: 14px; padding: 9px 16px; } .nav__toggle { display: none; } /* ----- hero (home) ----- */ .hero { padding: 96px 0 72px; position: relative; overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } .hero h1 { margin-bottom: 18px; } .hero .lead { margin-bottom: 28px; } .hero__art { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--green-soft); display: grid; place-items: center; box-shadow: var(--shadow-sm); } .hero__art img { width: 78%; height: auto; } /* ----- DashBot hero (dark, grid-paper background, 3-line headline) ----- */ .db-hero { position: relative; } .db-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(120% 78% at 50% 0%, #000 38%, transparent 76%); mask-image: radial-gradient(120% 78% at 50% 0%, #000 38%, transparent 76%); opacity: .55; } .db-hero > .container { position: relative; z-index: 1; } .db-hero__title { display: flex; flex-direction: column; font-size: clamp(54px, 8vw, 104px); line-height: 0.95; letter-spacing: -0.03em; margin: 8px 0 0; font-weight: 800; } .db-hero__title .accent { color: var(--green); } .db-hero__shot { border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); transform: rotate(-1deg); } .db-hero__shot img { width: 100%; display: block; } /* ----- generic grid of cards ----- */ .grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .cell { background: var(--surface); padding: 30px 26px; transition: background .18s var(--ease); } .cell:hover { background: var(--paper-2); } .cell h3 { margin-bottom: 8px; } .cell p { margin: 0; font-size: 15px; } .icon-tile { width: 44px; height: 44px; border-radius: var(--radius); background: var(--green-soft); color: var(--green-600); display: grid; place-items: center; margin-bottom: 16px; font-size: 20px; } .badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; } .badge--basic { background: var(--paper-2); color: var(--text-3); border: 1px solid var(--line-2); } .badge--pro { background: var(--green-soft); color: var(--green-600); } /* ----- product feature card (home/products) ----- */ .product-card { display: grid; grid-template-columns: 200px 1fr; gap: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; align-items: center; box-shadow: var(--shadow-sm); } .product-card__art { aspect-ratio: 1; border-radius: var(--radius); background: #0E0E0E; display: grid; place-items: center; padding: 22px; } .product-card__art img { width: 100%; } .product-card h3 { font-size: 24px; margin-bottom: 4px; } .product-card .meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); letter-spacing: 0.04em; margin-bottom: 12px; } .pill { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-600); } /* ----- pricing ----- */ .pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; margin: 0 auto; } .tier { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; } .tier--popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .tier__flag { position: absolute; top: -11px; right: 20px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; } .tier__name { font-size: 20px; font-weight: 800; margin: 0; } .tier__tag { color: var(--text-3); font-size: 14px; margin: 4px 0 18px; } .tier__price { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; } .tier__period { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-left: 6px; } .tier .btn { width: 100%; justify-content: center; margin: 20px 0 22px; } .tier ul { list-style: none; margin: 0; padding: 0; } .tier li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-2); padding: 7px 0; border-top: 1px solid var(--line); } .tier li:first-child { border-top: 0; } .tier li .ic { color: var(--green-600); flex: none; } .tier li.off { color: var(--text-3); } .tier li.off .ic { color: var(--line-2); } /* ----- contact ----- */ .contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; } .contact-card h3 { font-size: 17px; } .contact-card a { font-weight: 600; } /* ----- legal pages ----- */ .legal { max-width: 760px; margin: 0 auto; padding: 64px var(--pad-x) 96px; } .legal h1 { font-size: clamp(32px, 4vw, 44px); } .legal .updated { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); letter-spacing: 0.06em; margin: -4px 0 40px; } .legal h2 { font-size: 21px; margin: 36px 0 12px; } .legal p, .legal li { color: var(--text-2); font-size: 15.5px; line-height: 1.75; } .legal ul { padding-left: 22px; } .legal .highlight { background: var(--green-soft); border-left: 3px solid var(--green); padding: 16px 20px; margin: 22px 0; border-radius: 0 var(--radius) var(--radius) 0; } .legal .highlight strong { color: var(--text); } .legal .back { display: inline-block; margin-top: 44px; font-family: var(--font-mono); font-size: 13px; color: var(--text-3); } /* a small inline note marking placeholder content (visible to owner during review) */ .todo-note { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; background: #FFF7E6; border: 1px dashed #E0B651; color: #7A5B12; padding: 8px 12px; border-radius: var(--radius); margin: 10px 0; } .theme-dark .todo-note { background: rgba(255,176,32,0.08); border-color: rgba(255,176,32,0.4); color: #FFB020; } /* ----- DashBot Help page ----- */ .help__head { padding: 56px 0 0; } .help__head h1 { margin-bottom: 6px; } .help__jump { display: flex; gap: 10px; margin-top: 20px; position: sticky; top: 68px; z-index: 20; padding: 10px 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); } .help__jump a { font-family: var(--font-mono); font-size: 13px; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); } .help__jump a:hover { color: var(--text); border-color: var(--text-3); background: var(--paper-2); text-decoration: none; } .help__prose { padding: 20px 0 56px; } .help__prose-inner { max-width: 760px; } .help__prose h2 { font-size: 26px; margin: 18px 0 16px; } .help__prose h3 { font-size: 18px; margin: 30px 0 8px; } .help__prose p, .help__prose li { color: var(--text-2); line-height: 1.7; font-size: 15.5px; } .help__prose ul, .help__prose ol { padding-left: 22px; } .help__prose code { font-family: var(--font-mono); font-size: 13px; background: var(--paper-2); padding: 1px 6px; border-radius: 4px; color: var(--green-700); } .help__topics { padding: 44px 0 96px; border-top: 1px solid var(--line); background: var(--paper-2); } .help__topics h2 { font-size: 26px; margin-bottom: 4px; } .ht-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 10px; } .ht-search, .ht-select { font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--white); color: var(--text); } .ht-search { flex: 1; min-width: 200px; } .ht-clear { padding: 9px 14px; font-size: 14px; } .ht-status { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin: 0 0 14px; } .ht { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14.5px; } .ht th, .ht td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .ht thead th { background: var(--paper-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); font-weight: 600; white-space: nowrap; } .ht-sortable { cursor: pointer; user-select: none; } .ht-sortable:hover { color: var(--text); } .ht-arrow { color: var(--green-600); } .ht-num { width: 52px; color: var(--text-3); font-family: var(--font-mono); font-size: 13px; } .ht-topic { font-weight: 600; color: var(--text); } .ht-desc { color: var(--text-2); } .ht tbody tr:hover { background: var(--paper); } .ht tbody tr:last-child td { border-bottom: 0; } .avail { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .avail--all { background: var(--paper-2); color: var(--text-3); border: 1px solid var(--line-2); } .avail--basic { background: var(--green-soft); color: var(--green-700); } .avail--pro { background: rgba(204,0,0,0.10); color: #B00000; } .ht-empty { font-size: 14px; color: var(--text-2); margin-top: 14px; } .ht-linkbtn { background: none; border: 0; color: var(--green-600); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; } @media (max-width: 760px) { .ht, .ht tbody, .ht tr, .ht td { display: block; width: 100%; } .ht thead { display: none; } .ht { border: 0; background: transparent; } .ht tr { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin-bottom: 10px; padding: 12px 14px 12px 38px; position: relative; } .ht td { border: 0; padding: 2px 0; } .ht td[data-label="#"], .ht td[data-label="Category"], .ht td[data-label="Subcategory"], .ht td[data-label="Description"] { display: none; } .ht tr.open td[data-label="#"], .ht tr.open td[data-label="Category"], .ht tr.open td[data-label="Subcategory"], .ht tr.open td[data-label="Description"] { display: block; } .ht tr.open td[data-label="#"]::before, .ht tr.open td[data-label="Category"]::before, .ht tr.open td[data-label="Subcategory"]::before, .ht tr.open td[data-label="Description"]::before { content: attr(data-label) ": "; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); display: block; margin-top: 8px; } .ht tr::after { content: "\25B8"; position: absolute; left: 14px; top: 12px; color: var(--text-3); transition: transform .15s; } .ht tr.open::after { transform: rotate(90deg); } .ht-topic { font-size: 15px; } } /* ----- Cloud shares (manage + landing) ----- */ .share-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); } .share-row__name { font-weight: 600; color: var(--text); font-size: 16px; } .share-row__meta { font-size: 13px; margin-top: 2px; } .share-row__url { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--green-600); word-break: break-all; } .share-row__actions { display: flex; gap: 8px; align-items: center; flex: none; } .share-row__actions form { margin: 0; } .share-row__actions .btn { padding: 8px 14px; font-size: 13px; } .btn--danger { background: #C0341D; color: #fff; } .btn--danger:hover { background: #A52A16; text-decoration: none; } .import-code { font-family: var(--font-mono); font-size: 18px; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 14px 18px; margin: 8px 0 6px; word-break: break-all; color: var(--green-700); } @media (max-width: 560px) { .share-row { flex-direction: column; align-items: flex-start; } .share-row__actions { width: 100%; } } /* ----- footer ----- */ .footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 28px; } .footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; } .footer__brand img { height: 34px; width: auto; margin-bottom: 14px; } .footer__brand p { font-size: 14px; max-width: 30ch; } .footer h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: 9px; } .footer li a { color: var(--text-2); font-size: 14px; } .footer li a:hover { color: var(--green-600); text-decoration: none; } .footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); } .footer__legalname { max-width: 70ch; } /* ----- 404 ----- */ .notfound { text-align: center; padding: 120px var(--pad-x); } .notfound .code { font-family: var(--font-mono); font-size: 14px; color: var(--green-600); letter-spacing: 0.2em; } /* ----- responsive ----- */ @media (max-width: 900px) { .hero__grid, .grid--3, .grid--2, .pricing, .contact-grid { grid-template-columns: 1fr; } .hero__art { order: -1; } .product-card { grid-template-columns: 1fr; } .product-card__art { max-width: 160px; } .footer__top { grid-template-columns: 1fr 1fr; } .nav__links { display: none; } } @media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } section { padding: 64px 0; } }