/* ============================================================
LIIT PROJECTS — CUSTOM CSS
Tone: structured · clean · efficient · premium
Built for Squarespace 7.1
Install: Website → Website Tools → Custom CSS (or press "/" and type "Custom CSS")
Paste the whole file. It previews live before you save.
Notes:
- Set your fonts and colors in Site Styles FIRST. This file handles
the refinements the Style panel can't: spacing, tracking, motion.
- If a rule doesn't take effect, Squarespace's own styles are winning —
add !important to that line (e.g. letter-spacing: 0.14em !important;).
- Blocks marked OPTIONAL are commented out. Uncomment to switch on.
============================================================ */
/* ---- 1. Global polish ------------------------------------ */
/* Crisper text rendering + smooth in-page scrolling. */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html {
scroll-behavior: smooth;
}
/* ---- 2. Headings ----------------------------------------- */
/* Tighter letter-spacing + line-height = modern, premium. */
/* Large type especially benefits from negative tracking. */
h1 {
letter-spacing: -0.02em;
line-height: 1.08;
}
h2 {
letter-spacing: -0.015em;
line-height: 1.15;
}
h3,
h4 {
letter-spacing: -0.008em;
line-height: 1.25;
}
/* ---- 3. Body text ---------------------------------------- */
/* More line-height = easier to read = reads more premium. */
p,
li,
.sqsrte-large {
line-height: 1.7;
letter-spacing: 0.003em;
}
/* ---- 4. Buttons ------------------------------------------ */
/* Restrained, structured: squared corners, wide tracking, */
/* a subtle lift on hover. This is the most opinionated block. */
.sqs-block-button-element {
text-transform: uppercase; /* premium/editorial. Delete this line for sentence case. */
letter-spacing: 0.14em;
font-weight: 500;
border-radius: 2px; /* near-sharp = structured. Raise for softer, drop to 0 for hard edges. */
transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}
.sqs-block-button-element:hover {
transform: translateY(-2px);
opacity: 0.92;
}
/* ---- 5. Navigation --------------------------------------- */
/* A touch of tracking + a quiet hover fade. */
.header-nav-item a {
letter-spacing: 0.06em;
font-weight: 500;
transition: opacity 0.2s ease;
}
.header-nav-item a:hover {
opacity: 0.6;
}
/* ---- 6. Links -------------------------------------------- */
/* Smooth state changes everywhere. */
a {
transition: opacity 0.2s ease, color 0.2s ease;
}
/* ---- 7. OPTIONAL — image hover lift ---------------------- */
/* Subtle zoom on hover. Premium on project tiles, but applies */
/* to ALL images (logos, testimonial photos too). Uncomment */
/* only if you like it everywhere, or scope it to one section. */
/*
.sqs-block-image-figure { overflow: hidden; }
.sqs-block-image-figure img { transition: transform 0.6s ease; }
.sqs-block-image-figure:hover img { transform: scale(1.04); }
*/
/* ---- 8. OPTIONAL — text selection color ------------------ */
/* Replace #1a1a1a with your brand color for a small premium */
/* detail when visitors highlight text. */
/*
::selection { background: #1a1a1a; color: #ffffff; }
*/
/* ---- 9. OPTIONAL — more breathing room per section ------- */
/* "Premium" lives in whitespace. To add space to a specific */
/* section: right-click it → Inspect → copy its data-section-id,*/
/* paste below, uncomment. (Editor section spacing is usually */
/* enough — only reach for this if a section feels cramped.) */
/*
[data-section-id="PASTE-ID-HERE"] {
padding-top: 7vw;
padding-bottom: 7vw;
}
*/
