/* =========================== SABIT INC — SITE-WIDE SKIN Dark. Clean. Subtle orange. Drop in: Design → Custom CSS =========================== */ :root { --bg: #000; /* page background */ --ink: #eaeaea; /* primary text */ --muted: #8a8a8a; /* secondary text */ --edge: #2a2a2a; /* borders */ --accent: #ff3b30; /* crimson hit for emphasis */ --orange: #ff9500; /* your “touch of beauty” */ --card: #111; /* surfaces */ --radius: 16px; /* global rounding */ --shadow: 0 8px 24px rgba(0,0,0,.35); } /* Base */ html, body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; } /* Selection color */ ::selection { background: color-mix(in oklab, var(--orange) 24%, black); color: #000; } /* Typography scale */ h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.08; letter-spacing: .01em; } h1 { font-size: clamp(28px, 5vw, 56px); } h2 { font-size: clamp(24px, 4vw, 40px); } h3 { font-size: clamp(18px, 2.8vw, 24px); } h4 { font-size: clamp(16px, 2.2vw, 18px); } p, li { color: var(--ink); line-height: 1.7; } p + p { margin-top: .8em; } /* Orange underline for headings (subtle, clean) */ h1, h2 { text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--orange) 60%, transparent); text-decoration-thickness: 2px; text-underline-offset: .22em; } /* Links */ a { color: var(--orange); text-decoration: none; } a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; } a:focus-visible { outline: 2px solid color-mix(in oklab, var(--orange) 65%, white); outline-offset: 2px; border-radius: 6px; } /* Buttons (works on generic links + Squarespace buttons) */ .btn, .sqs-block-button .sqs-block-button-element, .sqs-button-element, button[type="submit"] { appearance: none; background: transparent; border: 1px solid var(--edge); color: var(--ink); padding: 10px 16px; border-radius: 14px; font-size: 15px; letter-spacing: .02em; transition: background .2s, color .2s, border-color .2s, transform .06s; display: inline-flex; align-items: center; gap: 8px; } .btn:hover, .sqs-block-button .sqs-block-button-element:hover, .sqs-button-element:hover, button[type="submit"]:hover { background: var(--orange); color: #000; border-color: var(--orange); } .btn:active, .sqs-block-button .sqs-block-button-element:active, .sqs-button-element:active, button[type="submit"]:active { transform: translateY(1px); } /* Primary accent variant (add .is-accent to any button) */ .is-accent { border-color: var(--orange); color: var(--orange); } .is-accent:hover { background: var(--orange); color: #000; } /* Cards / blocks */ .card, .sqs-block-content, .sqs-gallery-design-grid .sqs-gallery-meta { background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); } /* Images */ img { border-radius: 12px; } .sqs-block-image img { border-radius: 16px; } /* Video blocks (keep content clickable over video) */ .sqs-block-video { border-radius: 16px; overflow: hidden; } .sqs-block-video video { display: block; } /* Section padding harmony (doesn’t fight template spacing) */ section, .sqs-section { padding-top: clamp(40px, 8vw, 96px); padding-bottom: clamp(40px, 8vw, 96px); } /* Lists readability */ ul, ol { padding-left: 1.2em; } li + li { margin-top: .35em; } /* Blockquotes */ blockquote { margin: 1.2em 0; padding: .8em 1em; border-left: 3px solid var(--orange); background: #0b0b0b; color: var(--muted); border-radius: 8px; } /* Tables (just in case you drop receipts) */ table { width: 100%; border-collapse: collapse; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; } th, td { padding: 10px 12px; border-bottom: 1px solid var(--edge); } thead th { background: #0e0e0e; color: var(--ink); text-align: left; } tbody tr:hover { background: #0d0d0d; } /* Forms (Squarespace) */ .sqs-form input[type="text"], .sqs-form input[type="email"], .sqs-form input[type="tel"], .sqs-form textarea, input[type="search"] { background: #0e0e0e; color: var(--ink); border: 1px solid var(--edge); border-radius: 12px; padding: 10px 12px; } .sqs-form input::placeholder, .sqs-form textarea::placeholder { color: #6f6f6f; } /* Header polish if template has a fixed header (keeps it readable over dark reels) */ header, .header, .site-header, .Header { backdrop-filter: saturate(140%) blur(6px); background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.65) 60%, transparent); border-bottom: 1px solid rgba(255,255,255,.06); } /* Footer subtlety */ footer, .Footer { border-top: 1px solid rgba(255,255,255,.08); color: var(--muted); } footer a, .Footer a { color: var(--orange); } /* Orange “glow” only on subtle accents */ hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--orange) 45%, transparent), transparent); margin: 24px 0; } /* Hover lift for gallery items/cards */ .sqs-gallery-design-grid .sqs-gallery-thumbnails > figure, .card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .sqs-gallery-design-grid .sqs-gallery-thumbnails > figure:hover, .card:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: 0 12px 28px rgba(0,0,0,.45); } /* Reduce motion respect */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html, body { scroll-behavior: auto; } } /* Optional: subtle entrance fade for sections (if not already animated by template) */ @media (prefers-reduced-motion: no-preference) { .sqs-section { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .sqs-section:where(:is(:target, :hover)) { opacity: 1; transform: none; } } /* If that last bit is too extra on your template, delete it. */

Video Block

Double-click here to add a video by URL or embed code. Learn more

Upcoming events

Session 1

10.21 7:00-8:00PM
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

RSVP
Session 2

10.21 7:00-8:00PM
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

RSVP
Session 3

10.21 7:00-8:00PM
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

RSVP

Session 1

Session 2

Session 3