/* ========================================================================== GSL Marketing — css/gsl-v2.css · "Casablanca Ledger" design system (v3) -------------------------------------------------------------------------- Load order (every page): bootstrap.min.css → style.css → gsl-v2.css → gsl-effects.css [→ rtl.css] Principles: warm paper, ink, one precise gold. Gold = actions + one highlight per screen. Dark only for the home hero, the CTA band and the footer. Proof (real client screenshots in browser frames) instead of stock photography. Hairline rules, tabular numerals, generous asymmetric layout. Every NEW rule uses logical properties (margin-inline, inset-inline-start, padding-inline-end, text-align:start …) so /ar/ (dir="rtl") mirrors itself; css/rtl.css only carries the few things logic props cannot express. Sections 1 Tokens 11 Offer card 2 Reduced motion 12 Work (project) card + browser frame 3 Base / reset 13 Pricing + add-on cards 4 Typography 14 Steps, founder card, check-list, facts 5 Focus + skip link 15 FAQ 6 Links 16 CTA band 7 Layout + grids 17 Footer 8 Buttons + link-arrow 18 Floats (WhatsApp, to-top, chatbot) 9 Header, dropdown, drawer 19 Contact, forms, 404 10 Home hero, page head, proof bar, client names ========================================================================== */ /* -------------------------------------------------------------------------- 1 · TOKENS -------------------------------------------------------------------------- */ :root { /* colour — contrast notes are WCAG 2.x ratios */ --gsl-bg: #F6F4EF; /* warm paper */ --gsl-bg-2: #EFEBE3; /* deeper paper: notes, browser bars */ --gsl-surface: #FFFFFF; --gsl-text: #15161A; /* ink 16.45 on bg · 18.08 on surface */ --gsl-text-2: #5C6067; /* 5.75 on bg · 6.32 on surface · 5.3 on bg-2 */ --gsl-accent: #C9A44A; /* gold — FILL ONLY on light surfaces */ --gsl-accent-hover: #A98731; /* ink label 5.33 */ --gsl-accent-ink: #8A6B21; /* gold as text 4.54 bg · 4.99 surface */ --gsl-accent-tint: #F4ECD8; /* badge / soft highlight */ --gsl-accent-ink-2: #7A5E1C; /* gold text on tint / bg-2: 5.18 tint · 5.13 bg-2 (accent-ink is only 4.24 / 4.20) */ --gsl-success: #0A7C36; --gsl-danger: #B3261E; --gsl-wa: #1FAF54; /* WhatsApp glyph (graphic, 3:1+) */ --gsl-wa-ink: #128C3E; /* WhatsApp fill — white label 4.6 */ --gsl-border: #D9D4C8; --gsl-border-hover: #C7C1B2; --gsl-border-strong: #8E8A80; /* control boundary 3.44 surface */ --gsl-hairline: rgba(21, 22, 26, .10); --gsl-hairline-dark: rgba(255, 255, 255, .10); --gsl-dark: #18191C; --gsl-dark-surface: #1F2126; --gsl-on-dark: #FFFFFF; --gsl-on-dark-2: #B9BBC0; /* 9.15 on dark */ /* type */ --gsl-font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --gsl-fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); --gsl-fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem); --gsl-fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); --gsl-fs-h3: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); --gsl-fs-h4: 1.125rem; --gsl-fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem); --gsl-fs-body: 1.0625rem; --gsl-fs-small: .9375rem; --gsl-fs-xs: .8125rem; --gsl-fs-eyebrow: .8125rem; --gsl-fs-stat: clamp(2.5rem, 2rem + 2vw, 3.5rem); --gsl-lh-display: 1.04; --gsl-lh-h1: 1.1; --gsl-lh-h2: 1.14; --gsl-lh-h3: 1.3; --gsl-lh-h4: 1.4; --gsl-lh-lead: 1.6; --gsl-lh-body: 1.65; --gsl-lh-small: 1.55; --gsl-lh-eyebrow: 1.4; --gsl-measure: 68ch; --gsl-measure-tight: 56ch; --gsl-measure-heading: 24ch; /* space */ --gsl-space-1: .25rem; --gsl-space-2: .5rem; --gsl-space-3: .75rem; --gsl-space-4: 1rem; --gsl-space-5: 1.5rem; --gsl-space-6: 2rem; --gsl-space-7: 3rem; --gsl-space-8: 4rem; --gsl-space-9: 6rem; --gsl-space-10: 8rem; --gsl-section-y: clamp(3rem, 1.5rem + 5vw, 6rem); --gsl-stack-title: clamp(2rem, 1.5rem + 2vw, 3rem); /* layout */ --gsl-container: 1200px; --gsl-container-wide: 1320px; --gsl-container-narrow: 760px; --gsl-gutter: clamp(1rem, .4rem + 2vw, 1.5rem); --gsl-header-h: 72px; --gsl-header-h-mobile: 64px; --gsl-strip-h: 36px; /* elevation */ --gsl-radius-sm: 8px; --gsl-radius: 14px; --gsl-radius-lg: 20px; --gsl-radius-pill: 999px; --gsl-shadow-sm: 0 1px 2px rgba(21, 22, 26, .06), 0 0 0 1px var(--gsl-hairline); --gsl-shadow-md: 0 2px 4px rgba(21, 22, 26, .04), 0 12px 32px -8px rgba(21, 22, 26, .14); --gsl-shadow-lg: 0 24px 64px -16px rgba(21, 22, 26, .28); /* motion */ --gsl-ease-out: cubic-bezier(.2, .7, .2, 1); --gsl-t-fast: 150ms var(--gsl-ease-out); --gsl-t-base: 200ms var(--gsl-ease-out); --gsl-t-slow: 300ms var(--gsl-ease-out); /* template tokens re-pointed so legacy style.css rules stay on-palette */ --theme-color1: var(--gsl-accent); --theme-color2: var(--gsl-dark); --theme-color3: var(--gsl-accent-ink); --text-color: var(--gsl-text-2); } @media (max-width: 991.98px) { :root { --gsl-header-h: var(--gsl-header-h-mobile); --gsl-strip-h: 0px; } } /* -------------------------------------------------------------------------- 2 · REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 3 · BASE / RESET (neutralises the template's style.css globals) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--gsl-header-h) + var(--gsl-space-4)); } body { margin: 0; background: var(--gsl-bg) !important; background-attachment: scroll !important; color: var(--gsl-text); font-family: var(--gsl-font); font-size: var(--gsl-fs-body); line-height: var(--gsl-lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html.has-drawer-open, html.has-drawer-open body { overflow: hidden; } /* style.css: `p, .text { 15px / 30px; #6f7174 }`, `p { margin-bottom:20px }` */ p { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } b, strong { color: inherit; font-weight: 600; } img, svg, video { display: block; max-width: 100%; height: auto; } img, svg, video, canvas, iframe, table { max-width: 100%; } textarea { overflow: auto !important; resize: vertical !important; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } ::selection { background: var(--gsl-dark); color: var(--gsl-on-dark); } [id] { scroll-margin-top: calc(var(--gsl-header-h) + var(--gsl-space-4)); } .row > * { min-width: 0; } pre, code, kbd { overflow-x: auto; } /* Font Awesome markup ships an inline SVG; never paint the old glyph too. */ .fa:has(svg)::before, .fas:has(svg)::before, .far:has(svg)::before, .fab:has(svg)::before, [class*="fa-"]:has(svg)::before { content: none !important; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* -------------------------------------------------------------------------- 4 · TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--gsl-font); font-weight: 600; color: var(--gsl-text); text-wrap: balance; overflow-wrap: break-word; } h1, .gsl-h1 { font-size: var(--gsl-fs-h1); line-height: var(--gsl-lh-h1); letter-spacing: -.03em; } h2, .gsl-h2 { font-size: var(--gsl-fs-h2); line-height: var(--gsl-lh-h2); letter-spacing: -.02em; } h3, .gsl-h3 { font-size: var(--gsl-fs-h3); line-height: var(--gsl-lh-h3); letter-spacing: -.015em; } h4, .gsl-h4 { font-size: var(--gsl-fs-h4); line-height: var(--gsl-lh-h4); letter-spacing: -.01em; } h5, .gsl-h5 { font-size: var(--gsl-fs-body); line-height: var(--gsl-lh-h4); letter-spacing: 0; } h6, .gsl-h6 { font-size: var(--gsl-fs-small); line-height: var(--gsl-lh-h4); letter-spacing: 0; } .gsl-display { font-size: var(--gsl-fs-display); line-height: var(--gsl-lh-display); font-weight: 600; letter-spacing: -.03em; } p, li, dd, dt, figcaption { text-wrap: pretty; } .gsl-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--gsl-space-4); font-size: var(--gsl-fs-eyebrow); line-height: var(--gsl-lh-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gsl-accent-ink); } .gsl-eyebrow::before { content: ""; flex: none; inline-size: 24px; block-size: 2px; background: var(--gsl-accent); } .gsl-lede { margin: var(--gsl-space-4) 0 0; max-width: var(--gsl-measure-tight); font-size: var(--gsl-fs-lead); line-height: var(--gsl-lh-lead); color: var(--gsl-text-2); } .gsl-body { font-size: var(--gsl-fs-body); line-height: var(--gsl-lh-body); max-width: var(--gsl-measure); } .gsl-small { font-size: var(--gsl-fs-small); line-height: var(--gsl-lh-small); color: var(--gsl-text-2); } .prose > * { margin-block: 0; } .prose > * + * { margin-top: 1em; } .prose p { max-width: var(--gsl-measure); color: var(--gsl-text-2); } .prose > h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); } .prose > * + h2 { margin-top: var(--gsl-space-7); } .prose > h2 + p, .prose > h3 + p { margin-top: var(--gsl-space-3); } .prose > .gsl-eyebrow + h2 { margin-top: 0; } .prose .check-list { margin-top: var(--gsl-space-5); } .selected { color: var(--gsl-accent-ink) !important; } .tnum { font-variant-numeric: tabular-nums; } /* dark contexts flip the mapping */ .on-dark { background: var(--gsl-dark); color: var(--gsl-on-dark-2); } .on-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--gsl-on-dark); } .on-dark p, .on-dark .gsl-lede { color: var(--gsl-on-dark-2); } .on-dark .gsl-eyebrow, .on-dark .selected { color: var(--gsl-accent) !important; } /* -------------------------------------------------------------------------- 5 · FOCUS + SKIP LINK style.css ships `:focus { outline:none !important }` — the selectors below are more specific and also !important, so the ring always wins. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gsl-accent-ink) !important; outline-offset: 2px !important; } :is(.on-dark, .home-hero, .cta-band, .site-footer, .site-header__strip, .error-header) :is(a, button):focus-visible { outline-color: var(--gsl-accent) !important; } .btn--primary:focus-visible { box-shadow: 0 0 0 2px var(--gsl-surface) !important; } :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; inset-inline-start: var(--gsl-space-4); top: var(--gsl-space-4); z-index: 3000; padding: 12px 20px; background: var(--gsl-dark); color: var(--gsl-on-dark) !important; font: 600 15px/1.2 var(--gsl-font); border-radius: var(--gsl-radius-sm); text-decoration: none; transform: translateY(calc(-100% - 40px)); transition: transform var(--gsl-t-base); } .skip-link:focus-visible { transform: none; outline-color: var(--gsl-accent) !important; } /* -------------------------------------------------------------------------- 6 · LINKS Buttons are excluded from every context rule: a gold .btn--primary inside a dark band used to inherit the white/gold link colour (2.36:1, invisible on focus). Its label is always --gsl-text. -------------------------------------------------------------------------- */ a { color: var(--gsl-text); font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: color var(--gsl-t-fast), text-decoration-color var(--gsl-t-fast), background-color var(--gsl-t-fast), border-color var(--gsl-t-fast), transform var(--gsl-t-fast), box-shadow var(--gsl-t-fast); } a:hover, a:focus-visible { color: var(--gsl-accent-ink); text-decoration-color: currentColor; } :is(.on-dark, .hero, .main-footer, .site-footer, .footer-upper, .error-header, .call-to-action, .home-hero, .cta-band) a:not([class*="btn"]) { color: var(--gsl-on-dark); } :is(.on-dark, .hero, .main-footer, .site-footer, .footer-upper, .error-header, .call-to-action, .home-hero, .cta-band) a:not([class*="btn"]):is(:hover, :focus-visible) { color: var(--gsl-accent); } a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- 7 · LAYOUT + GRIDS -------------------------------------------------------------------------- */ .auto-container { position: static; width: 100%; max-width: calc(var(--gsl-container) + 2 * var(--gsl-gutter)); margin-inline: auto; padding-inline: var(--gsl-gutter); } .container-narrow { max-width: calc(var(--gsl-container-narrow) + 2 * var(--gsl-gutter)); } .container-wide { max-width: calc(var(--gsl-container-wide) + 2 * var(--gsl-gutter)); } .section { padding-block: var(--gsl-section-y); } .section--bg { background: var(--gsl-bg); } .section--surface { background: var(--gsl-surface); } .section--tint { background: var(--gsl-bg-2); } .section--tint .gsl-eyebrow { color: var(--gsl-accent-ink-2); } /* accent-ink is 4.20 on bg-2 */ .section--flush-top { padding-block-start: 0; } .section--rule { border-block-start: 1px solid var(--gsl-hairline); } .on-dark.section { background: var(--gsl-dark); } .gsl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gsl-space-5); } .gsl-cols-2, .gsl-cols-3, .gsl-cols-4, .gsl-cols-auto { display: grid; gap: var(--gsl-space-5); grid-template-columns: minmax(0, 1fr); } .gsl-cols-2 > *, .gsl-cols-3 > *, .gsl-cols-4 > *, .gsl-cols-auto > *, .gsl-grid > * { min-width: 0; } @media (min-width: 640px) { .gsl-cols-3, .gsl-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .gsl-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .gsl-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .gsl-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .gsl-cols-auto { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); } /* 2-up tablets: a lone third offer/pricing card spans the row instead of orphaning */ @media (min-width: 640px) and (max-width: 991.98px) { .gsl-cols-3 > :is(.offer-card, .pricing-card):last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Section heading block */ .sec-title { margin-bottom: var(--gsl-stack-title); } .sec-title h2, .sec-title .gsl-h2 { max-width: var(--gsl-measure-heading); } .sec-title h2::before, .sec-title h2::after { content: none !important; } .sec-title--center { text-align: center; } .sec-title--center .gsl-eyebrow { justify-content: center; } .sec-title--center h2, .sec-title--center .gsl-lede { margin-inline: auto; } /* heading on the start side, one action on the end side */ .sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gsl-space-5) var(--gsl-space-7); margin-bottom: var(--gsl-stack-title); } .sec-head .sec-title { margin-bottom: 0; } .sec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gsl-space-4) var(--gsl-space-6); margin-top: var(--gsl-space-7); } /* -------------------------------------------------------------------------- 8 · BUTTONS + LINK-ARROW -------------------------------------------------------------------------- */ .btn--primary, .btn--secondary, .btn--wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 0 22px; border: 1px solid transparent; border-radius: var(--gsl-radius-sm); font: 600 16px/1.2 var(--gsl-font); letter-spacing: -.005em; text-align: center; text-decoration: none !important; white-space: normal; cursor: pointer; transition: background-color var(--gsl-t-fast), border-color var(--gsl-t-fast), color var(--gsl-t-fast), transform var(--gsl-t-fast), box-shadow var(--gsl-t-fast); } .btn--primary, .btn--primary:is(:hover, :focus-visible, :active, :visited) { color: var(--gsl-text) !important; } .btn--primary { background: var(--gsl-accent); } /* 7.66 */ .btn--primary:hover { background: var(--gsl-accent-hover); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(138, 107, 33, .55); } /* 5.33 */ .btn--primary:active { transform: none; box-shadow: none; } .btn--secondary { background: transparent; border-color: var(--gsl-border-strong); color: var(--gsl-text) !important; } .btn--secondary:hover { border-color: var(--gsl-text); background: rgba(21, 22, 26, .04); transform: translateY(-1px); } .btn--secondary:active { transform: none; } :is(.on-dark, .home-hero, .cta-band) .btn--secondary, .btn--secondary.on-dark { border-color: rgba(255, 255, 255, .32); color: var(--gsl-on-dark) !important; background: transparent; } :is(.on-dark, .home-hero, .cta-band) .btn--secondary:hover, .btn--secondary.on-dark:hover { border-color: var(--gsl-on-dark); background: rgba(255, 255, 255, .06); } /* WhatsApp: white surface, ink label, green glyph */ .btn--wa { background: var(--gsl-surface); border-color: var(--gsl-border); color: var(--gsl-text) !important; } .btn--wa svg { flex: none; inline-size: 20px; block-size: 20px; fill: var(--gsl-wa); } .btn--wa:hover { border-color: var(--gsl-text); transform: translateY(-1px); box-shadow: var(--gsl-shadow-md); } :is(.home-hero, .cta-band, .on-dark) .btn--wa, .btn--wa-dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .24); color: var(--gsl-on-dark) !important; } :is(.home-hero, .cta-band, .on-dark) .btn--wa:hover, .btn--wa-dark:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); box-shadow: none; } .btn--compact { min-height: 40px; padding: 0 16px; font-size: 15px; } .btn--block { display: flex; width: 100%; } .btn--primary[disabled], .btn--primary[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gsl-space-3); } /* text link with an arrow that nudges 3px on hover (← in RTL, see rtl.css) */ .link-arrow { display: inline-flex; align-items: baseline; gap: 6px; font: 600 var(--gsl-fs-small)/1.4 var(--gsl-font); color: var(--gsl-text); text-decoration: none; } .link-arrow::after { content: "\2192"; display: inline-block; color: var(--gsl-accent-ink); transition: transform var(--gsl-t-fast); } a.link-arrow:hover, a.link-arrow:focus-visible { color: var(--gsl-accent-ink); text-decoration: underline; text-underline-offset: 4px; } a.link-arrow:hover::after, a.link-arrow:focus-visible::after, :is(.offer-card, .work-card):hover .link-arrow::after { transform: translateX(3px); } .link-arrow--out::after { content: "\2197"; } :is(.on-dark, .home-hero, .cta-band) .link-arrow { color: var(--gsl-on-dark); } :is(.on-dark, .home-hero, .cta-band) .link-arrow::after { color: var(--gsl-accent); } :is(.on-dark, .home-hero, .cta-band) a.link-arrow:is(:hover, :focus-visible) { color: var(--gsl-accent); } /* -------------------------------------------------------------------------- 9 · HEADER · DROPDOWN · DRAWER Sticky with no JS: the 36px utility strip scrolls away, the bar pins. -------------------------------------------------------------------------- */ .site-header { position: sticky; top: calc(-1 * var(--gsl-strip-h)); z-index: 900; } .site-header.is-stuck .site-header__bar { box-shadow: 0 10px 30px -12px rgba(21, 22, 26, .18); } .site-header__inner { width: 100%; max-width: calc(var(--gsl-container) + 2 * var(--gsl-gutter)); margin-inline: auto; padding-inline: var(--gsl-gutter); display: flex; align-items: center; gap: var(--gsl-space-4); } /* utility strip — ≥992px */ .site-header__strip { height: var(--gsl-strip-h); background: var(--gsl-dark); color: var(--gsl-on-dark-2); font-size: var(--gsl-fs-xs); overflow: hidden; } .site-header__strip .site-header__inner { height: 100%; justify-content: space-between; } .site-header__strip ul { display: flex; align-items: center; gap: var(--gsl-space-5); margin: 0; } .site-header__strip li { margin: 0; } .site-header__strip a { color: var(--gsl-on-dark); text-decoration: none; } .site-header__strip a:is(:hover, :focus-visible) { color: var(--gsl-accent); } .site-header__social { gap: var(--gsl-space-3) !important; } .site-header__social a { display: grid; place-items: center; inline-size: 24px; block-size: 24px; font-size: 13px; } .site-header__social svg { inline-size: 13px; block-size: 13px; } @media (max-width: 991.98px) { .site-header__strip { display: none; } } /* main bar */ .site-header__bar { min-height: var(--gsl-header-h); background: var(--gsl-surface); border-bottom: 1px solid var(--gsl-hairline); transition: box-shadow var(--gsl-t-base); } .site-header__bar .site-header__inner { min-height: var(--gsl-header-h); } .site-header__logo { flex: none; } .site-header__logo a { display: block; text-decoration: none; } .site-header__logo img { height: 34px; width: auto; } @media (max-width: 575.98px) { .site-header__logo img { height: 30px; } } .site-header__nav { margin-inline-start: auto; } .site-header__nav > ul { display: flex; align-items: center; gap: var(--gsl-space-1); margin: 0; } .site-header__nav a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--gsl-radius-sm); font: 500 15px/1 var(--gsl-font); color: var(--gsl-text); text-decoration: none; } .site-header__nav a:is(:hover, :focus-visible) { color: var(--gsl-accent-ink); background: var(--gsl-bg); } .site-header__nav > ul > li > a[aria-current="page"] { color: var(--gsl-text); box-shadow: inset 0 -2px 0 var(--gsl-accent); border-radius: 0; } .site-header__caret { inline-size: 10px; block-size: 10px; transition: transform var(--gsl-t-fast); } .site-header__nav .dropdown { position: relative; } .site-header__nav .dropdown > ul { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 910; min-width: 290px; padding: 8px; display: none; flex-direction: column; gap: 2px; margin: 0; background: var(--gsl-surface); border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); } /* hover bridge so the pointer can cross the 6px gap */ .site-header__nav .dropdown > ul::before { content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px; } .site-header__nav .dropdown:is(:hover, :focus-within):not(.is-dismissed) > ul { display: flex; } .site-header__nav .dropdown:is(:hover, :focus-within):not(.is-dismissed) .site-header__caret { transform: rotate(180deg); } .site-header__nav .dropdown > ul a { display: flex; width: 100%; padding: 12px 14px; font-size: 15px; white-space: nowrap; } .site-header__nav .dropdown > ul a[aria-current="page"] { color: var(--gsl-accent-ink); background: var(--gsl-bg); } .site-header__nav .dropdown > ul li.is-sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--gsl-hairline); } .site-header__actions { display: flex; align-items: center; gap: var(--gsl-space-2); margin-inline-start: var(--gsl-space-3); } .site-header__wa { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--gsl-border); border-radius: 50%; background: var(--gsl-surface); text-decoration: none; } .site-header__wa svg { inline-size: 20px; block-size: 20px; fill: var(--gsl-wa); } .site-header__wa:is(:hover, :focus-visible) { border-color: var(--gsl-text); } .site-header__toggler { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto; padding: 0; background: transparent; border: 1px solid var(--gsl-border); border-radius: var(--gsl-radius-sm); color: var(--gsl-text); cursor: pointer; } .site-header__toggler svg { inline-size: 18px; block-size: 18px; } @media (max-width: 991.98px) { .site-header__nav, .site-header__actions { display: none; } } @media (min-width: 992px) { .site-header__toggler, .site-header__drawer { display: none !important; } } @media (min-width: 992px) and (max-width: 1099.98px) { .site-header__nav a { padding-inline: 9px; } .site-header__wa { display: none; } } /* drawer */ .site-header__drawer { position: fixed; inset: 0; z-index: 10000; visibility: hidden; } .site-header__drawer.is-open { visibility: visible; } .site-header__drawer__backdrop { position: absolute; inset: 0; background: rgba(10, 11, 14, .5); opacity: 0; transition: opacity var(--gsl-t-slow); } .site-header__drawer.is-open .site-header__drawer__backdrop { opacity: 1; } .site-header__drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(88vw, 380px); display: flex; flex-direction: column; background: var(--gsl-surface); box-shadow: var(--gsl-shadow-lg); transform: translateX(100%); transition: transform 320ms var(--gsl-ease-out); } .site-header__drawer.is-open .site-header__drawer__panel { transform: none; } .site-header__drawer__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--gsl-space-4); min-height: var(--gsl-header-h-mobile); padding-inline: 20px; border-bottom: 1px solid var(--gsl-hairline); } .site-header__drawer__head img { height: 28px; width: auto; } .site-header__drawer__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--gsl-border); border-radius: var(--gsl-radius-sm); color: var(--gsl-text); cursor: pointer; } .site-header__drawer__close svg { inline-size: 16px; block-size: 16px; } .site-header__drawer__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 24px; } .site-header__drawer__heading { margin: 20px 0 4px; font-size: var(--gsl-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gsl-text-2); } .site-header__drawer__nav ul { margin: 0; } .site-header__drawer__nav ul + ul { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gsl-hairline); } .site-header__drawer__nav ul a { display: flex; align-items: center; min-height: 48px; padding: 10px 0; font: 500 17px/1.3 var(--gsl-font); color: var(--gsl-text); text-decoration: none; } .site-header__drawer__nav ul.is-sub a { font-size: 16px; padding-inline-start: 14px; border-inline-start: 2px solid var(--gsl-hairline); min-height: 44px; } .site-header__drawer__nav ul a[aria-current="page"] { color: var(--gsl-accent-ink); border-inline-start-color: var(--gsl-accent); } .site-header__drawer__nav ul a:is(:hover, :focus-visible) { color: var(--gsl-accent-ink); } .site-header__drawer__nav .lang-switch { display: flex; gap: 8px; margin-top: 20px; } .site-header__drawer__nav .lang-switch a, .site-header__drawer__nav .lang-switch .lang-on { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--gsl-radius-pill); background: var(--gsl-bg); font: 600 14px/1 var(--gsl-font); color: var(--gsl-text); text-decoration: none; } .site-header__drawer__nav .lang-switch .lang-on { background: var(--gsl-dark); color: var(--gsl-on-dark); } .site-header__drawer__nav .lang-switch .lang-sep { display: none; } .site-header__drawer__foot { flex: none; display: grid; gap: 10px; padding: 16px 20px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--gsl-hairline); background: var(--gsl-surface); } html.has-drawer-open :is(.wa-float, .scroll-to-top, chatbot-widget) { visibility: hidden !important; } /* language switch (strip, drawer, footer) */ .lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gsl-fs-xs); letter-spacing: .04em; white-space: nowrap; } .lang-switch a { color: var(--gsl-accent-ink); text-decoration: none; font-weight: 500; } .lang-switch a:is(:hover, :focus-visible) { text-decoration: underline; } .lang-switch .lang-on { font-weight: 700; color: var(--gsl-text); } .lang-switch .lang-sep { opacity: .5; } .site-header__strip .lang-switch a { color: var(--gsl-on-dark-2); } .site-header__strip .lang-switch a:is(:hover, :focus-visible) { color: var(--gsl-accent); } .site-header__strip .lang-switch .lang-on, .site-footer .lang-switch .lang-on { color: var(--gsl-on-dark); } .site-footer .lang-switch a { color: var(--gsl-on-dark-2); } .site-footer .lang-switch a:is(:hover, :focus-visible) { color: var(--gsl-accent); } /* -------------------------------------------------------------------------- 10 · HOME HERO · PAGE HEAD · PROOF BAR · CLIENT NAMES -------------------------------------------------------------------------- */ .home-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--gsl-dark); color: var(--gsl-on-dark-2); padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3.5rem, 2rem + 5vw, 6.5rem); } /* ledger hairlines + a single warm glow — CSS only, no image request */ .home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60rem 30rem at 85% 10%, rgba(201, 164, 74, .16), transparent 60%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 48px); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); } .home-hero__grid { display: grid; gap: var(--gsl-space-8); align-items: center; } @media (min-width: 992px) { .home-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--gsl-space-7); } } .home-hero__copy { min-width: 0; } .home-hero .gsl-eyebrow { color: var(--gsl-accent); } .home-hero__title { margin: 0; max-width: 15ch; font-size: var(--gsl-fs-display); line-height: var(--gsl-lh-display); font-weight: 600; letter-spacing: -.035em; color: var(--gsl-on-dark); hyphens: manual; } .home-hero__title em { font-style: normal; color: var(--gsl-accent); } .home-hero__sub { max-width: 50ch; margin: var(--gsl-space-5) 0 0; font-size: var(--gsl-fs-lead); line-height: var(--gsl-lh-lead); color: var(--gsl-on-dark-2); } .home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gsl-space-3); margin-top: var(--gsl-space-6); } .home-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gsl-space-3) var(--gsl-space-6); margin-top: var(--gsl-space-5); } .home-hero__proof { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: var(--gsl-fs-small); color: var(--gsl-on-dark-2); } .home-hero__proof::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--gsl-wa); box-shadow: 0 0 0 4px rgba(31, 175, 84, .18); } @media (max-width: 575.98px) { .home-hero__actions > * { flex: 1 1 100%; } } /* stacked, slightly rotated client screenshots (≥992px only) */ .home-hero__stack { display: none; } @media (min-width: 992px) { .home-hero__stack { display: block; position: relative; aspect-ratio: 1 / .92; margin-inline-end: -8px; } .home-hero__stack .browser-frame { position: absolute; width: 76%; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); } .home-hero__stack .browser-frame:nth-child(1) { inset-block-start: 0; inset-inline-end: 0; transform: rotate(3deg); } .home-hero__stack .browser-frame:nth-child(2) { inset-block-start: 26%; inset-inline-start: 0; transform: rotate(-4deg); z-index: 1; } .home-hero__stack .browser-frame:nth-child(3) { inset-block-end: 0; inset-inline-end: 6%; width: 64%; transform: rotate(1.5deg); z-index: 2; } } /* page head — replaces the stock photo banner on every inner page */ .page-head { position: relative; overflow: hidden; background: var(--gsl-bg); border-bottom: 1px solid var(--gsl-hairline); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); } .page-head::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(40vw, 520px); background: repeating-linear-gradient(180deg, var(--gsl-hairline) 0 1px, transparent 1px 32px); -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); pointer-events: none; } .page-head > * { position: relative; z-index: 1; } .page-head__title { max-width: 18ch; font-size: var(--gsl-fs-h1); line-height: var(--gsl-lh-h1); letter-spacing: -.03em; } .page-head__lede { max-width: 56ch; margin: var(--gsl-space-4) 0 0; font-size: var(--gsl-fs-lead); line-height: var(--gsl-lh-lead); color: var(--gsl-text-2); } .page-head__actions { display: flex; flex-wrap: wrap; gap: var(--gsl-space-3); margin-top: var(--gsl-space-6); } .page-head__meta { display: flex; flex-wrap: wrap; gap: var(--gsl-space-2); margin-top: var(--gsl-space-5); } .breadcrumb { margin: 0 0 var(--gsl-space-5); padding: 0; background: none; } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: var(--gsl-fs-xs); color: var(--gsl-text-2); } .breadcrumb li { display: inline-flex; align-items: center; } .breadcrumb li + li::before { content: "/"; margin-inline: 10px; color: var(--gsl-border-strong); } .breadcrumb a { color: var(--gsl-text-2); text-decoration: none; } .breadcrumb a:is(:hover, :focus-visible) { color: var(--gsl-accent-ink); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--gsl-text); font-weight: 500; } /* chips */ .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--gsl-radius-pill); background: var(--gsl-bg); box-shadow: inset 0 0 0 1px var(--gsl-hairline); font-size: var(--gsl-fs-xs); font-weight: 500; line-height: 1.2; color: var(--gsl-text-2); white-space: nowrap; } .chip--accent { background: var(--gsl-accent-tint); box-shadow: none; color: var(--gsl-accent-ink-2); font-weight: 600; } /* proof bar — four honest facts */ .proof-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } .proof-bar__item { padding: var(--gsl-space-5) var(--gsl-space-4); min-width: 0; } .proof-bar__item:nth-child(odd) { padding-inline-start: 0; } .proof-bar__item:nth-child(even) { border-inline-start: 1px solid var(--gsl-hairline); } .proof-bar__item:nth-child(n+3) { border-block-start: 1px solid var(--gsl-hairline); } @media (min-width: 992px) { .proof-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); } .proof-bar__item { padding: var(--gsl-space-2) var(--gsl-space-6); } .proof-bar__item:nth-child(odd) { padding-inline-start: var(--gsl-space-6); } .proof-bar__item:first-child { padding-inline-start: 0; } .proof-bar__item + .proof-bar__item { border-inline-start: 1px solid var(--gsl-hairline); } .proof-bar__item:nth-child(n+3) { border-block-start: 0; } } .proof-bar__stat { display: block; font-size: var(--gsl-fs-stat); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--gsl-text); } .proof-bar__stat small { font-size: .45em; font-weight: 500; letter-spacing: -.01em; margin-inline-start: 6px; color: var(--gsl-text-2); } .proof-bar__label { display: block; margin-top: var(--gsl-space-3); font-size: var(--gsl-fs-small); line-height: 1.45; color: var(--gsl-text-2); max-width: 22ch; } .client-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gsl-space-3) var(--gsl-space-6); margin-top: var(--gsl-space-6); padding-top: var(--gsl-space-5); border-top: 1px solid var(--gsl-hairline); } .client-names__label { flex: none; margin: 0; font-size: var(--gsl-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gsl-accent-ink); } .client-names__list { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; flex: 1 1 320px; min-width: 0; } .client-names__list li { font-size: var(--gsl-fs-small); font-weight: 500; color: var(--gsl-text); white-space: nowrap; } .client-names__list li:not(:last-child)::after { content: "\00B7"; margin-inline: 12px; color: var(--gsl-accent); font-weight: 700; } /* -------------------------------------------------------------------------- 11 · OFFER CARD (one base card look: surface, 14px, shadow-sm) -------------------------------------------------------------------------- */ .card { position: relative; background: var(--gsl-surface); border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm); } .offer-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: var(--gsl-surface); border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm); transition: transform var(--gsl-t-base), box-shadow var(--gsl-t-base); } .offer-card:hover, .offer-card:focus-within { transform: translateY(-2px); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); } .icon-tile { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 10px; background: var(--gsl-dark); color: var(--gsl-accent); } .icon-tile svg { inline-size: 20px; block-size: 20px; } .offer-card .icon-tile { margin-bottom: var(--gsl-space-5); } .offer-card__title { font-size: var(--gsl-fs-h3); line-height: 1.25; } .offer-card__title a { color: inherit; text-decoration: none; } .offer-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; } /* stretched link */ .offer-card__title a:focus-visible { outline: none !important; } .offer-card:has(.offer-card__title a:focus-visible) { outline: 3px solid var(--gsl-accent-ink); outline-offset: 3px; } .offer-card__outcome { margin: var(--gsl-space-3) 0 0; font-size: var(--gsl-fs-small); line-height: 1.6; color: var(--gsl-text-2); } .offer-card .check-list { margin-top: var(--gsl-space-5); } .offer-card__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gsl-space-2) var(--gsl-space-4); margin-top: auto; padding-top: var(--gsl-space-5); } .offer-card .check-list { margin-bottom: var(--gsl-space-6); } .offer-card .check-list + .offer-card__foot { border-top: 1px solid var(--gsl-hairline); } .offer-card__price { margin: 0; font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } .offer-card__price strong { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; color: var(--gsl-text); font-variant-numeric: tabular-nums; } /* slim full-width row under the three offers */ .offer-strip { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gsl-space-4) var(--gsl-space-6); margin-top: var(--gsl-space-5); padding: var(--gsl-space-5) clamp(1.5rem, 1.2rem + 1vw, 2rem); border-radius: var(--gsl-radius); background: var(--gsl-bg-2); } .offer-strip__text { flex: 1 1 320px; margin: 0; color: var(--gsl-text); } .offer-strip__text strong { display: block; font-weight: 600; } .offer-strip__text span { color: var(--gsl-text-2); font-size: var(--gsl-fs-small); } .offer-strip .icon-tile { background: var(--gsl-surface); color: var(--gsl-text); box-shadow: inset 0 0 0 1px var(--gsl-hairline); } /* -------------------------------------------------------------------------- 12 · WORK CARD + BROWSER FRAME One tab stop per card: the title link is stretched over the whole card. -------------------------------------------------------------------------- */ .browser-frame { display: block; overflow: hidden; background: var(--gsl-surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--gsl-hairline); } .browser-frame__bar { display: flex; align-items: center; gap: 6px; height: 24px; padding-inline: 10px; background: var(--gsl-bg-2); border-bottom: 1px solid var(--gsl-hairline); } .browser-frame__bar > i { flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: rgba(21, 22, 26, .2); } .browser-frame__url { flex: 0 1 auto; min-width: 0; margin-inline: auto; padding: 0 10px; overflow: hidden; border-radius: var(--gsl-radius-pill); background: rgba(255, 255, 255, .7); font-size: 10px; line-height: 15px; color: var(--gsl-text-2); white-space: nowrap; text-overflow: ellipsis; direction: ltr; } .browser-frame__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--gsl-bg-2); } .browser-frame__bar + .browser-frame__img { border-radius: 0; } .browser-frame--lg { border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-lg); } .browser-frame--lg .browser-frame__bar { height: 32px; padding-inline: 14px; } .browser-frame--lg .browser-frame__bar > i { inline-size: 9px; block-size: 9px; } .browser-frame--lg .browser-frame__url { font-size: 12px; line-height: 20px; } .browser-frame--lg { max-width: 1040px; margin-inline: auto; } .browser-frame--lg .browser-frame__img { aspect-ratio: 16 / 10; } .work-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px 10px 0; background: var(--gsl-surface); border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm); transition: transform var(--gsl-t-base), box-shadow var(--gsl-t-base); } .work-card:hover, .work-card:focus-within { transform: translateY(-2px); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); } .work-card .browser-frame__img { transition: transform 600ms var(--gsl-ease-out); } .work-card:hover .browser-frame__img { transform: scale(1.02); } .work-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--gsl-space-3); padding: var(--gsl-space-4) 10px var(--gsl-space-5); } .work-card__title { font-size: var(--gsl-fs-h4); line-height: 1.3; letter-spacing: -.01em; } .work-card__title a { color: inherit; text-decoration: none; } .work-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .work-card__title a:focus-visible { outline: none !important; } .work-card:has(.work-card__title a:focus-visible) { outline: 3px solid var(--gsl-accent-ink); outline-offset: 3px; } .work-card__desc { margin: 0; font-size: var(--gsl-fs-small); line-height: 1.55; color: var(--gsl-text-2); } .work-card__cta { margin-top: auto; padding-top: var(--gsl-space-2); } .work-card[hidden] { display: none; } /* filter chips (projects page) */ .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--gsl-space-6); } .filter-bar button { min-height: 40px; padding: 0 16px; border: 1px solid var(--gsl-border); border-radius: var(--gsl-radius-pill); background: var(--gsl-surface); font: 500 var(--gsl-fs-small)/1 var(--gsl-font); color: var(--gsl-text); cursor: pointer; transition: background-color var(--gsl-t-fast), border-color var(--gsl-t-fast), color var(--gsl-t-fast); } .filter-bar button:hover { border-color: var(--gsl-text); } .filter-bar button[aria-pressed="true"] { background: var(--gsl-dark); border-color: var(--gsl-dark); color: var(--gsl-on-dark); } .filter-bar__count { margin-inline-start: 6px; opacity: .6; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 13 · PRICING CARD + ADD-ON CARD + NOTE BOX -------------------------------------------------------------------------- */ .pricing-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: var(--gsl-surface); border: 0; border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm); } .pricing-card--featured { box-shadow: 0 0 0 2px var(--gsl-accent), var(--gsl-shadow-md); } @media (min-width: 992px) { .pricing-card--featured { margin-block: -12px; padding-block: calc(clamp(1.5rem, 1.2rem + 1vw, 2rem) + 12px); } } .pricing-card__badge { position: absolute; inset-block-start: 0; inset-inline-start: clamp(1.5rem, 1.2rem + 1vw, 2rem); transform: translateY(-50%); margin: 0; padding: 4px 12px; border-radius: var(--gsl-radius-pill); background: var(--gsl-accent-tint); box-shadow: 0 0 0 1px rgba(138, 107, 33, .25); font-size: var(--gsl-fs-xs); font-weight: 600; line-height: 1.4; color: var(--gsl-accent-ink-2); } .pricing-card__title { font-size: var(--gsl-fs-h3); line-height: 1.25; } .pricing-card__desc { margin: var(--gsl-space-2) 0 0; font-size: var(--gsl-fs-small); line-height: 1.55; color: var(--gsl-text-2); } .pricing-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: var(--gsl-space-5) 0 0; padding-top: var(--gsl-space-5); border-top: 1px solid var(--gsl-hairline); color: var(--gsl-text); } .pricing-card__from { font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } .pricing-card__amount { font-size: var(--gsl-fs-stat); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; } .pricing-card__cur { font-size: 1rem; font-weight: 600; color: var(--gsl-text); } .pricing-card__terms { margin: var(--gsl-space-2) 0 0; font-size: var(--gsl-fs-xs); color: var(--gsl-text-2); } .pricing-card .check-list { margin: var(--gsl-space-5) 0 var(--gsl-space-6); } .pricing-card__cta { margin-top: auto; width: 100%; } .pricing-card .link-arrow { margin-top: var(--gsl-space-4); align-self: center; } .pricing-card:hover { transform: none; } .addon-card { display: flex; gap: var(--gsl-space-4); min-width: 0; padding: var(--gsl-space-5); background: var(--gsl-surface); border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm); } .addon-card .icon-tile { background: var(--gsl-bg-2); color: var(--gsl-text); } .addon-card__title { font-size: var(--gsl-fs-h4); line-height: 1.35; } .addon-card__text { margin: 6px 0 0; font-size: var(--gsl-fs-small); line-height: 1.55; color: var(--gsl-text-2); } .addon-card__price { margin: var(--gsl-space-3) 0 0; font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } .addon-card__price strong { color: var(--gsl-text); font-weight: 600; font-variant-numeric: tabular-nums; } .note-box { margin: var(--gsl-space-7) 0 0; padding: var(--gsl-space-4) var(--gsl-space-5); border-radius: var(--gsl-radius-sm); background: var(--gsl-bg-2); font-size: var(--gsl-fs-small); line-height: 1.6; color: var(--gsl-text-2); max-width: none; } .note-box strong { color: var(--gsl-text); } .price-note { font-size: var(--gsl-fs-small); line-height: 1.6; color: var(--gsl-text-2); } /* -------------------------------------------------------------------------- 14 · STEPS · FOUNDER CARD · CHECK-LIST · FACTS -------------------------------------------------------------------------- */ .steps { display: grid; gap: 0; margin: 0; counter-reset: none; } .step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--gsl-space-5); padding-block: var(--gsl-space-5); border-top: 1px solid var(--gsl-hairline); } .step:last-child { border-bottom: 1px solid var(--gsl-hairline); } .step__num { grid-row: span 2; min-width: 2.2ch; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--gsl-accent-ink); } .step__title { font-size: var(--gsl-fs-h4); line-height: 1.35; padding-top: 4px; } .step__text { margin: 0; font-size: var(--gsl-fs-small); line-height: 1.6; color: var(--gsl-text-2); max-width: 52ch; } /* horizontal variant: three columns ≥768px */ @media (min-width: 768px) { .steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gsl-space-6); } .steps--row .step { grid-template-columns: minmax(0, 1fr); padding-block: var(--gsl-space-5) 0; border-bottom: 0 !important; } .steps--row .step__num { grid-row: auto; margin-bottom: var(--gsl-space-3); } } .founder-card { display: grid; gap: var(--gsl-space-5); margin: 0; padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: var(--gsl-surface); border-radius: var(--gsl-radius-lg); box-shadow: var(--gsl-shadow-sm); } .founder-card__photo { inline-size: 96px; block-size: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--gsl-surface), 0 0 0 5px var(--gsl-accent); } .founder-card__label { margin: 0 0 var(--gsl-space-2); font-size: var(--gsl-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gsl-accent-ink); } .founder-card__name { margin: 0; font-size: var(--gsl-fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--gsl-text); } .founder-card__role { margin: 4px 0 0; font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } .founder-card__bio { margin: var(--gsl-space-4) 0 0; font-size: var(--gsl-fs-small); line-height: 1.65; color: var(--gsl-text); } .founder-card .link-arrow { margin-top: var(--gsl-space-4); } @media (min-width: 576px) { .founder-card--wide { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--gsl-space-6); } } /* large founder portrait (about page) */ .portrait { position: relative; margin: 0; } .portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--gsl-radius-lg); box-shadow: var(--gsl-shadow-md); } .portrait figcaption { position: absolute; inset-inline-start: var(--gsl-space-4); inset-block-end: var(--gsl-space-4); padding: 10px 14px; border-radius: var(--gsl-radius-sm); background: rgba(255, 255, 255, .94); box-shadow: var(--gsl-shadow-md); font-size: var(--gsl-fs-small); line-height: 1.4; color: var(--gsl-text-2); } .portrait figcaption strong { display: block; color: var(--gsl-text); } /* ✓ list — tinted disc + accent-ink tick (two layers, so ::before + ::after) */ .check-list { display: grid; gap: 10px; margin: 0; } .check-list li { position: relative; padding-inline-start: 30px; font-size: var(--gsl-fs-small); line-height: 1.55; color: var(--gsl-text); } .check-list li::before, .check-list li::after { content: ""; position: absolute; inset-inline-start: 0; top: .15em; inline-size: 20px; block-size: 20px; border-radius: 50%; } .check-list li::before { background: var(--gsl-accent-tint); } .check-list li::after { background: var(--gsl-accent-ink); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat; } .check-list--lg li { font-size: var(--gsl-fs-body); } /* "what's included" checklist grid (service pages) */ .include-grid { display: grid; gap: var(--gsl-space-3); margin: var(--gsl-space-5) 0 0; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .include-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .include-grid li { position: relative; padding-block: var(--gsl-space-4); padding-inline: calc(var(--gsl-space-4) + 32px) var(--gsl-space-4); background: var(--gsl-surface); border-radius: var(--gsl-radius-sm); box-shadow: var(--gsl-shadow-sm); font-size: var(--gsl-fs-small); line-height: 1.55; color: var(--gsl-text-2); } .include-grid li strong { display: block; margin-bottom: 2px; font-size: var(--gsl-fs-body); color: var(--gsl-text); font-weight: 600; } .include-grid li::before, .include-grid li::after { content: ""; position: absolute; inset-inline-start: var(--gsl-space-4); top: calc(var(--gsl-space-4) + 2px); inline-size: 22px; block-size: 22px; border-radius: 50%; } .include-grid li::before { background: var(--gsl-accent-tint); } .include-grid li::after { background: var(--gsl-accent-ink); -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 15px no-repeat; mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 15px no-repeat; } /* facts row (project detail) */ .facts { max-width: 1040px; margin-inline: auto !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--gsl-space-6) 0 0; border-top: 1px solid var(--gsl-hairline); } @media (min-width: 768px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .facts > div { padding-block: var(--gsl-space-4); padding-inline: 0 var(--gsl-space-4); border-bottom: 1px solid var(--gsl-hairline); min-width: 0; } .facts dt { font-size: var(--gsl-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gsl-text-2); } .facts dd { margin: 6px 0 0; font-weight: 500; color: var(--gsl-text); overflow-wrap: anywhere; } /* two-column content + sticky aside (service detail, about) */ .split { display: grid; gap: var(--gsl-space-8); } @media (min-width: 992px) { .split { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gsl-space-8); align-items: start; } .split--reverse { grid-template-columns: 360px minmax(0, 1fr); } .split__aside { position: sticky; top: calc(var(--gsl-header-h) + var(--gsl-space-5)); } } .split > * { min-width: 0; } /* sticky summary card (service detail sidebar) */ .summary-card { padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: var(--gsl-surface); border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); } .summary-card__label { margin: 0; font-size: var(--gsl-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gsl-accent-ink); } .summary-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: var(--gsl-space-3) 0 0; } .summary-card dl { margin: var(--gsl-space-5) 0 var(--gsl-space-5); border-top: 1px solid var(--gsl-hairline); } .summary-card dl > div { display: flex; justify-content: space-between; gap: var(--gsl-space-4); padding-block: 12px; border-bottom: 1px solid var(--gsl-hairline); font-size: var(--gsl-fs-small); } .summary-card dt { color: var(--gsl-text-2); font-weight: 400; } .summary-card dd { margin: 0; color: var(--gsl-text); font-weight: 500; text-align: end; } .summary-card .btn--primary, .summary-card .btn--wa { width: 100%; } .summary-card .btn--wa { margin-top: 10px; } .summary-card__note { margin: var(--gsl-space-4) 0 0; font-size: var(--gsl-fs-xs); line-height: 1.5; color: var(--gsl-text-2); text-align: center; } .side-nav { margin-top: var(--gsl-space-5); padding: var(--gsl-space-5); border-radius: var(--gsl-radius); background: var(--gsl-bg-2); } .side-nav__title { margin: 0 0 var(--gsl-space-2); font-size: var(--gsl-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gsl-text-2); } .side-nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-block: 10px; font-size: var(--gsl-fs-small); font-weight: 500; color: var(--gsl-text); text-decoration: none; border-bottom: 1px solid var(--gsl-hairline); } .side-nav li:last-child a { border-bottom: 0; } .side-nav a::after { content: "\2192"; color: var(--gsl-text-2); transition: transform var(--gsl-t-fast); } .side-nav a:is(:hover, :focus-visible) { color: var(--gsl-accent-ink-2); } .side-nav a:is(:hover, :focus-visible)::after { transform: translateX(3px); color: var(--gsl-accent-ink); } .side-nav a[aria-current="page"] { color: var(--gsl-accent-ink-2); } .side-nav a[aria-current="page"]::after { content: "\2022"; color: var(--gsl-accent); } /* split variants */ @media (min-width: 992px) { .split--how { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--gsl-space-9); } .split--how .split__aside { top: calc(var(--gsl-header-h) + var(--gsl-space-7)); } .split--match { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gsl-space-8); } .split--match .sec-title { margin-bottom: 0; } .split--founder { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--gsl-space-9); align-items: start; } } .split--how .steps { margin-top: calc(-1 * var(--gsl-space-3)); } /* problem → offer rows (services page) */ .match-list { margin: 0; border-top: 1px solid var(--gsl-hairline); } .match-list__row { display: grid; gap: var(--gsl-space-2) var(--gsl-space-6); padding-block: var(--gsl-space-5); border-bottom: 1px solid var(--gsl-hairline); } @media (min-width: 640px) { .match-list__row { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } } .match-list__problem { margin: 0; font-size: var(--gsl-fs-body); line-height: 1.5; color: var(--gsl-text); } .match-list .link-arrow { white-space: nowrap; } /* -------------------------------------------------------------------------- 15 · FAQ — borderless rows separated by hairlines. Padding lives on the inner element only, so a closed row has no empty gap. -------------------------------------------------------------------------- */ .faq-list { border-top: 1px solid var(--gsl-hairline); } .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--gsl-hairline); border-radius: 0; margin: 0; overflow: visible; } .faq-item > :is(h2, h3, h4) { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: 0; } .faq-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--gsl-space-4); width: 100%; min-height: 64px; padding: 18px 0; background: transparent; border: 0; cursor: pointer; text-align: start; font: 500 var(--gsl-fs-body)/1.45 var(--gsl-font); color: var(--gsl-text); transition: color var(--gsl-t-fast); } .faq-trigger:hover { color: var(--gsl-accent-ink); background: transparent; box-shadow: none; } .faq-icon { position: relative; flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--gsl-bg-2); font-size: 0; /* the "+" text node is replaced by the bars below */ color: var(--gsl-text); transition: background-color var(--gsl-t-base), transform var(--gsl-t-base); } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 12px; block-size: 1.5px; background: currentColor; border-radius: 1px; } .faq-icon::after { transform: rotate(90deg); } .faq-item.is-open .faq-icon { background: var(--gsl-accent); transform: rotate(45deg); } .faq-panel-wrap { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--gsl-t-base), visibility 0s linear 200ms; } .faq-item.is-open .faq-panel-wrap { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--gsl-t-base), visibility 0s; } .faq-panel-wrap > .faq-panel { min-height: 0; overflow: hidden; padding: 0; margin: 0; } .faq-panel-wrap > .faq-panel > * { margin: 0; } .faq-panel { font-size: var(--gsl-fs-small); line-height: 1.7; color: var(--gsl-text-2); max-width: 68ch; } /* the bottom gap belongs to the inner text, so it collapses with the row */ .faq-panel::after { content: ""; display: block; height: 22px; } .faq-panel { padding-inline-end: 48px !important; } /* -------------------------------------------------------------------------- 16 · CTA BAND — the last section on every page -------------------------------------------------------------------------- */ .cta-band { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--gsl-space-6); padding: clamp(1.5rem, .8rem + 4vw, 4rem); border-radius: var(--gsl-radius-lg); background: var(--gsl-dark); color: var(--gsl-on-dark-2); } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40rem 20rem at 100% 0%, rgba(201, 164, 74, .18), transparent 60%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 40px); } @media (min-width: 992px) { .cta-band { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: var(--gsl-space-8); } } .cta-band__title { max-width: 20ch; font-size: var(--gsl-fs-h2); line-height: var(--gsl-lh-h2); letter-spacing: -.02em; color: var(--gsl-on-dark); } .cta-band__lede { max-width: 46ch; margin: var(--gsl-space-4) 0 0; font-size: var(--gsl-fs-body); line-height: 1.6; color: var(--gsl-on-dark-2); } .cta-band__actions { display: grid; gap: var(--gsl-space-4); justify-items: start; } @media (min-width: 992px) { .cta-band__actions { justify-items: end; text-align: end; } } .cta-band__buttons { display: flex; flex-wrap: wrap; gap: var(--gsl-space-3); } @media (min-width: 992px) { .cta-band__buttons { justify-content: flex-end; } } @media (max-width: 575.98px) { .cta-band__buttons > * { flex: 1 1 100%; } .cta-band__actions { justify-items: stretch; } } .cta-band__contact { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: var(--gsl-fs-small); color: var(--gsl-on-dark-2); } @media (min-width: 992px) { .cta-band__contact { justify-content: flex-end; } } .cta-band__contact a { color: var(--gsl-on-dark); text-decoration: none; } .cta-band__contact a:is(:hover, :focus-visible) { color: var(--gsl-accent); text-decoration: underline; } /* -------------------------------------------------------------------------- 17 · FOOTER -------------------------------------------------------------------------- */ .site-footer, .main-footer { background: var(--gsl-dark); color: var(--gsl-on-dark-2); } .site-footer { padding-block: var(--gsl-space-8) calc(var(--gsl-space-5) + 80px); font-size: var(--gsl-fs-small); } /* bottom room for the WhatsApp float */ .site-footer__cols { display: grid; gap: var(--gsl-space-7) var(--gsl-space-6); grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .site-footer__cols { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--gsl-space-6); } } .site-footer__cols > * { min-width: 0; } .site-footer__logo { display: inline-block; text-decoration: none; } .site-footer__logo img { height: 34px; width: auto; } .site-footer__blurb { max-width: 36ch; margin: var(--gsl-space-4) 0 0; line-height: 1.65; color: var(--gsl-on-dark-2); } .site-footer__title { margin: 0 0 var(--gsl-space-4); padding: 0; border: 0; font-size: var(--gsl-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gsl-on-dark); } .site-footer__links { display: grid; gap: 10px; margin: 0; } .site-footer__links li { margin: 0; } .site-footer__links a, .site-footer__contact a { color: var(--gsl-on-dark-2) !important; text-decoration: none; } .site-footer__links a:is(:hover, :focus-visible), .site-footer__contact a:is(:hover, :focus-visible) { color: var(--gsl-on-dark) !important; text-decoration: underline; } .site-footer__contact { display: grid; gap: 12px; margin: 0; } .site-footer__contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.5; } .site-footer__contact svg { inline-size: 15px; block-size: 15px; margin-top: 3px; color: var(--gsl-accent); fill: currentColor; } .site-footer__social { display: flex; gap: 8px; margin: var(--gsl-space-5) 0 0; } .site-footer__social a { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--gsl-hairline-dark); border-radius: 50%; color: var(--gsl-on-dark) !important; text-decoration: none; } .site-footer__social svg { inline-size: 15px; block-size: 15px; } .site-footer__social a:is(:hover, :focus-visible) { background: var(--gsl-accent); border-color: var(--gsl-accent); color: var(--gsl-dark) !important; } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gsl-space-3) var(--gsl-space-5); margin-top: var(--gsl-space-8); padding-top: var(--gsl-space-5); border-top: 1px solid var(--gsl-hairline-dark); font-size: var(--gsl-fs-xs); color: var(--gsl-on-dark-2); } .site-footer__bottom p { margin: 0; } .site-footer__copy { font-size: inherit; line-height: 1.6; color: var(--gsl-on-dark-2); } /* -------------------------------------------------------------------------- 18 · FLOATS — one WhatsApp float (56px circle mobile, pill desktop), scroll-to-top ≥768px only, chatbot kept bottom-left. -------------------------------------------------------------------------- */ .wa-float { position: fixed; inset-inline-end: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 9990; display: flex; align-items: center; justify-content: center; gap: 10px; inline-size: 56px; block-size: 56px; padding: 0; border-radius: 50%; background: var(--gsl-wa-ink) !important; color: var(--gsl-on-dark) !important; box-shadow: 0 10px 28px -6px rgba(10, 11, 14, .45); font: 600 15px/1 var(--gsl-font); text-decoration: none !important; transition: transform var(--gsl-t-fast), box-shadow var(--gsl-t-fast); } .wa-float svg { inline-size: 26px; block-size: 26px; fill: currentColor; } .wa-float span { display: none; } .wa-float:hover { transform: translateY(-2px); color: var(--gsl-on-dark) !important; } @media (min-width: 768px) { .wa-float { inline-size: auto; block-size: 52px; padding-block: 0; padding-inline: 18px 22px; border-radius: var(--gsl-radius-pill); inset-inline-end: 24px; bottom: 24px; } .wa-float svg { inline-size: 22px; block-size: 22px; } .wa-float span { display: inline; } } .scroll-to-top { position: fixed; inset-inline-end: 24px; bottom: 88px; z-index: 9980; display: none; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--gsl-surface); color: var(--gsl-text) !important; box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); line-height: 44px; text-align: center; } .scroll-to-top.is-visible { display: grid; place-items: center; } .scroll-to-top svg { inline-size: 14px; block-size: 14px; } .scroll-to-top:hover { background: var(--gsl-surface); color: var(--gsl-accent-ink) !important; } @media (max-width: 767.98px) { .scroll-to-top, .scroll-to-top.is-visible { display: none !important; } } chatbot-widget { left: 20px !important; right: auto !important; } /* -------------------------------------------------------------------------- 19 · CONTACT · FORMS · 404 -------------------------------------------------------------------------- */ .contact-grid { display: grid; gap: var(--gsl-space-6); } @media (min-width: 992px) { .contact-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: var(--gsl-space-7); } } .contact-grid > * { min-width: 0; } @media (max-width: 991.98px) { .contact-grid__direct { order: -1; } } @media (min-width: 992px) { .contact-grid__direct { position: sticky; top: calc(var(--gsl-header-h) + var(--gsl-space-5)); } } .form-card { padding: clamp(.5rem, .2rem + 1vw, 1rem); background: var(--gsl-surface); border-radius: var(--gsl-radius-lg); box-shadow: var(--gsl-shadow-sm); } .form-card__head { padding: var(--gsl-space-4) var(--gsl-space-4) 0; } .form-card__head h2 { font-size: var(--gsl-fs-h3); } .form-card__head p { margin: 6px 0 0; font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } .crm-form-wrap { margin-top: var(--gsl-space-3); } .crm-form-wrap iframe.crm-form { display: block; width: 100%; height: 900px; border: 0 !important; border-radius: var(--gsl-radius); background: var(--gsl-surface); } @media (max-width: 767.98px) { .crm-form-wrap iframe.crm-form { height: 1150px; } } .direct-card { padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: var(--gsl-dark); border-radius: var(--gsl-radius-lg); color: var(--gsl-on-dark-2); } .direct-card h2 { font-size: var(--gsl-fs-h3); color: var(--gsl-on-dark); } .direct-card > p { margin: var(--gsl-space-2) 0 0; font-size: var(--gsl-fs-small); } .direct-card .btn--wa { width: 100%; margin-top: var(--gsl-space-5); } .direct-card__list { display: grid; margin: var(--gsl-space-5) 0 0; border-top: 1px solid var(--gsl-hairline-dark); } .direct-card__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--gsl-hairline-dark); font-size: var(--gsl-fs-small); line-height: 1.5; } .direct-card__list svg { inline-size: 16px; block-size: 16px; margin-top: 3px; fill: var(--gsl-accent); } .direct-card__list span { display: block; font-size: var(--gsl-fs-xs); color: var(--gsl-on-dark-2); } .direct-card__list a { color: var(--gsl-on-dark) !important; font-weight: 500; text-decoration: none; } .direct-card__list a:is(:hover, :focus-visible) { color: var(--gsl-accent) !important; text-decoration: underline; } .direct-card__list strong { color: var(--gsl-on-dark); font-weight: 500; } .gsl-field label { display: block; margin-bottom: var(--gsl-space-2); font: 600 14px/1.4 var(--gsl-font); color: var(--gsl-text); } .gsl-input { width: 100%; min-height: 48px; padding: 12px 14px; font: 400 16px/1.5 var(--gsl-font); color: var(--gsl-text); background: var(--gsl-surface); border: 1px solid var(--gsl-border-strong); border-radius: var(--gsl-radius-sm); } .gsl-input[aria-invalid="true"] { border-color: var(--gsl-danger); } .gsl-error { display: block; margin-top: 6px; font-size: 13px; color: var(--gsl-danger); } .gsl-help { margin-top: 6px; font-size: 13px; color: var(--gsl-text-2); } .error-hero { padding-block: clamp(4rem, 2rem + 8vw, 8rem); text-align: center; } .error-hero__code { display: block; margin: 0 auto; font-size: clamp(6rem, 3rem + 14vw, 12rem); font-weight: 500; line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--gsl-text); } .error-hero__code span { color: var(--gsl-accent); } .error-hero__title { margin-top: var(--gsl-space-5); font-size: var(--gsl-fs-h2); } .error-hero__text { max-width: 46ch; margin: var(--gsl-space-4) auto 0; font-size: var(--gsl-fs-lead); color: var(--gsl-text-2); } .error-hero .btn-row { justify-content: center; margin-top: var(--gsl-space-6); } /* 320px guards: long tokens wrap rather than widen the page */ .home-hero__sub, .gsl-lede, .page-head__lede, .site-footer__blurb { overflow-wrap: break-word; } /* ========================================================================== 20 · ROUND 2 — polish pass (type, trust logos, platforms, sticky mobile CTA, page-head asides, zellige motif). Overrides earlier sections; keep this block last. Logical properties throughout; RTL extras in rtl.css. ========================================================================== */ :root { --gsl-font-display: "Bricolage Grotesque", "Lexend", system-ui, sans-serif; --gsl-font-accent: "Instrument Serif", Georgia, serif; --gsl-fs-display: clamp(2.6rem, 1.4rem + 4.6vw, 4.75rem); --gsl-zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C9A24A' stroke-opacity='.22'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E"); --gsl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --gsl-grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --gsl-mcta-h: 68px; } /* ---- 20.1 typography: display face for headings, prices and stats ------ */ h1, h2, .gsl-display, .home-hero__title, .page-head__title, .cta-band__title, .proof-bar__stat, .pricing-card__amount, .offer-card__price strong, .step__num, .error-hero__code, .ledger__price, .summary-card__price .pricing-card__amount { font-family: var(--gsl-font-display); font-optical-sizing: auto; } h1, .page-head__title { font-weight: 650; letter-spacing: -.035em; } h2, .cta-band__title, .sec-title h2 { font-weight: 620; letter-spacing: -.028em; } .sec-title h2 { font-family: var(--gsl-font-display); line-height: var(--gsl-lh-h2); } h3, h4 { font-family: var(--gsl-font); } /* small utility h2s keep the UI face */ :is(.site-footer__title, .logo-wall__label, .includes__title, .faq-item > h2) { font-family: var(--gsl-font); letter-spacing: 0; } /* the one accent word: Instrument Serif italic */ :is(h1, h2) em { font-family: var(--gsl-font-accent); font-style: italic; font-weight: 400; font-size: 1.08em; letter-spacing: -.01em; color: var(--gsl-accent-ink); } .section--tint :is(h1, h2) em { color: var(--gsl-accent-ink-2); } :is(.home-hero, .cta-band, .on-dark) :is(h1, h2) em { color: var(--gsl-accent); } .home-hero__title { max-width: 18.5ch; font-size: var(--gsl-fs-display); line-height: .98; font-weight: 650; letter-spacing: -.035em; text-wrap: balance; } .home-hero__title em { font-style: italic; color: var(--gsl-accent); } .page-head__title { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.04; } /* ---- 20.2 buttons (P2) -------------------------------------------------- */ .btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 18px -10px rgba(138, 107, 33, .7); } .btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -10px rgba(138, 107, 33, .75); } :is(.btn--primary, .btn--secondary, .btn--wa, .btn--wa-solid):active { transform: scale(.98); } .btn--wa-solid { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 0 18px; border: 1px solid transparent; border-radius: var(--gsl-radius-sm); background: var(--gsl-wa-ink); color: #fff !important; /* 4.6:1 */ font: 600 16px/1.2 var(--gsl-font); text-decoration: none !important; cursor: pointer; transition: background-color var(--gsl-t-fast), transform var(--gsl-t-fast); } .btn--wa-solid svg { flex: none; inline-size: 20px; block-size: 20px; fill: currentColor; } .btn--wa-solid:hover { background: #0F7A36; } /* 5.6:1 */ :is(.home-hero, .cta-band, .direct-card) .btn--wa-solid:focus-visible { outline-color: var(--gsl-accent) !important; } /* ---- 20.3 header: compact logo, shrink on scroll, animated underline ---- */ .site-header__logo img { height: 36px; transition: height 220ms var(--gsl-ease-out); } @media (max-width: 575.98px) { .site-header__logo img { height: 31px; } } .site-header__bar { transition: box-shadow var(--gsl-t-base), background-color 220ms, min-height 220ms; } .site-header__bar .site-header__inner { transition: min-height 220ms var(--gsl-ease-out); } @media (min-width: 992px) { .site-header.is-compact .site-header__bar { min-height: 60px; margin-block-end: 12px; /* keeps the flow height: no content jump */ background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } .site-header.is-compact .site-header__bar .site-header__inner { min-height: 60px; } .site-header.is-compact .site-header__logo img { height: 32px; } } .site-header__nav > ul > li > a { position: relative; } .site-header__nav > ul > li > a[aria-current="page"] { box-shadow: none; border-radius: var(--gsl-radius-sm); } .site-header__nav > ul > li > a::after { content: ""; position: absolute; inset-inline: 12px; inset-block-end: 3px; block-size: 2px; border-radius: 2px; background: var(--gsl-accent); transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--gsl-ease-out); } .site-header__nav > ul > li > a:is([aria-current="page"], :hover, :focus-visible)::after { transform: scaleX(1); } .site-header__nav > ul > li > a:not([aria-current="page"]):is(:hover, :focus-visible)::after { opacity: .5; } /* FR/AR: shorter header CTA label where the bar gets tight */ .cta-short { display: none; } @media (min-width: 992px) and (max-width: 1199.98px) { .site-header__actions .cta-long { display: none; } .site-header__actions .cta-short { display: inline; } } /* drawer: gold bar on the current page */ .site-header__drawer__nav ul a[aria-current="page"] { padding-inline-start: 14px; border-inline-start: 3px solid var(--gsl-accent); } .site-header__drawer__nav ul.is-sub a[aria-current="page"] { border-inline-start-width: 3px; } /* ---- 20.4 home hero: founder line, grain, warm light, stack depth ------- */ .home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--gsl-grain); opacity: .07; mix-blend-mode: overlay; pointer-events: none; } .home-hero::before { background: radial-gradient(60rem 30rem at 85% 10%, rgba(201, 164, 74, .14), transparent 60%); -webkit-mask-image: none; mask-image: none; } @media (min-width: 992px) { .home-hero__grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); gap: var(--gsl-space-6); } } .home-hero__meta { gap: var(--gsl-space-4) var(--gsl-space-6); margin-top: var(--gsl-space-6); } .hero-founder { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--gsl-fs-small); line-height: 1.45; color: var(--gsl-on-dark-2); } .hero-founder img { flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--gsl-dark), 0 0 0 3.5px var(--gsl-accent); } .hero-founder strong { color: var(--gsl-on-dark); font-weight: 600; } .home-hero__stack { position: relative; } .hero-live-tag { display: none; } @media (min-width: 992px) { .home-hero__stack::before { content: ""; position: absolute; inset: -12% -18% -10% -8%; z-index: -1; background: radial-gradient(closest-side, rgba(201, 164, 74, .26), rgba(201, 164, 74, .08) 55%, transparent); pointer-events: none; } .home-hero__stack .browser-frame { transition: translate 500ms var(--gsl-ease-out); } .home-hero__stack .browser-frame:nth-child(1) { filter: saturate(.55) brightness(.82); translate: calc(var(--px, 0) * 3px) calc(var(--py, 0) * 3px); } .home-hero__stack .browser-frame:nth-child(2) { translate: calc(var(--px, 0) * 4.5px) calc(var(--py, 0) * 4.5px); } .home-hero__stack .browser-frame:nth-child(3) { box-shadow: 0 44px 90px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 6px); } .hero-live-tag { position: absolute; z-index: 3; inset-block-end: -18px; inset-inline-end: 14%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--gsl-radius-pill); background: rgba(24, 25, 28, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 24px -8px rgba(0, 0, 0, .6); font-size: var(--gsl-fs-xs); font-weight: 500; line-height: 1.2; color: var(--gsl-on-dark-2); white-space: nowrap; } .hero-live-tag i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gsl-wa); box-shadow: 0 0 0 3px rgba(31, 175, 84, .22); } .hero-live-tag b { font-weight: 600; color: var(--gsl-on-dark); } } /* mobile: the three frames become a horizontal "proof reel" under the CTAs */ @media (max-width: 991.98px) { .home-hero__grid { gap: var(--gsl-space-7); } .home-hero__stack { display: flex; gap: 12px; margin-inline: calc(-1 * var(--gsl-gutter)); padding: 4px var(--gsl-gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gsl-gutter); scrollbar-width: none; } .home-hero__stack::-webkit-scrollbar { display: none; } .home-hero__stack .browser-frame { flex: 0 0 78%; scroll-snap-align: start; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); } } @media (min-width: 640px) and (max-width: 991.98px) { .home-hero__stack .browser-frame { flex-basis: 46%; } } /* ---- 20.5 trust: logo wall + platform row ------------------------------ */ .trust { background: var(--gsl-surface); padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); border-block-end: 1px solid var(--gsl-hairline); } .trust + .section--proof { border-block-start: 0; padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .logo-wall__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--gsl-space-2) var(--gsl-space-5); margin-block-end: var(--gsl-space-4); } .logo-wall__label { margin: 0; font-size: var(--gsl-fs-small); font-weight: 600; line-height: 1.4; color: var(--gsl-text-2); } .logo-wall__viewport { position: relative; } .logo-wall__track { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; margin: 0; } .logo-wall__track[aria-hidden="true"] { display: none; } .logo-wall__track > li { flex: none; } .logo-wall__item { display: grid; place-items: center; block-size: 56px; padding-inline: 6px; border-radius: var(--gsl-radius-sm); text-decoration: none; } .logo-wall__item > img { grid-area: 1 / 1; block-size: var(--logo-h, 34px); max-block-size: 40px; inline-size: auto; max-inline-size: none; transition: opacity 240ms var(--gsl-ease-out); } .logo-wall__mono { opacity: .55; } .logo-wall__color { opacity: 0; } .logo-wall__item:is(:hover, :focus-visible) .logo-wall__mono { opacity: 1; } .logo-wall__item.has-color:is(:hover, :focus-visible) .logo-wall__mono { opacity: 0; } .logo-wall__item.has-color:is(:hover, :focus-visible) .logo-wall__color { opacity: 1; } .logo-wall__name { font: 600 1.0625rem/1.1 var(--gsl-font-display); letter-spacing: -.015em; color: var(--gsl-text-2); white-space: nowrap; transition: color var(--gsl-t-fast); } .logo-wall__item:is(:hover, :focus-visible) .logo-wall__name { color: var(--gsl-text); } @keyframes gsl-marquee { to { transform: translateX(-100%); } } @keyframes gsl-marquee-rtl { to { transform: translateX(100%); } } @media (max-width: 991.98px) { .logo-wall__item > img { block-size: calc(var(--logo-h, 34px) * .82); max-block-size: 32px; } .logo-wall--marquee .logo-wall__viewport { display: flex; overflow: hidden; margin-inline: calc(-1 * var(--gsl-gutter)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .logo-wall--marquee .logo-wall__track { flex: none; flex-wrap: nowrap; gap: 0 28px; padding-inline-end: 28px; animation: gsl-marquee 36s linear infinite; } .logo-wall--marquee .logo-wall__track[aria-hidden="true"] { display: flex; } .logo-wall--marquee .logo-wall__viewport:is(:hover, :focus-within) .logo-wall__track { animation-play-state: paused; } [dir="rtl"] .logo-wall--marquee .logo-wall__track { animation-name: gsl-marquee-rtl; } } @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { .logo-wall--marquee .logo-wall__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; } .logo-wall--marquee .logo-wall__track { animation: none !important; padding-inline: var(--gsl-gutter); } .logo-wall--marquee .logo-wall__track[aria-hidden="true"] { display: none !important; } } /* static grid variant (about page) */ .logo-wall--grid { margin-block-start: var(--gsl-space-7); padding-block-start: var(--gsl-space-5); border-block-start: 1px solid var(--gsl-hairline); } @media (max-width: 991.98px) { .logo-wall--grid .logo-wall__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; } .logo-wall--grid .logo-wall__name { font-size: .875rem; white-space: normal; text-align: center; } } .platform-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gsl-space-3) var(--gsl-space-5); margin-block-start: var(--gsl-space-5); padding-block-start: var(--gsl-space-5); border-block-start: 1px solid var(--gsl-hairline); } .platform-row__label { margin: 0; font-size: var(--gsl-fs-small); font-weight: 600; color: var(--gsl-text-2); } .platform-row__list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0; } .platform-row__logo img { block-size: 24px; inline-size: auto; max-inline-size: none; } .platform-row__logo:nth-child(3) img { block-size: 30px; } .platform-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: var(--gsl-radius-pill); box-shadow: inset 0 0 0 1px var(--gsl-border); font-size: var(--gsl-fs-xs); font-weight: 600; color: var(--gsl-text); white-space: nowrap; } .platform-pill svg { inline-size: 15px; block-size: 15px; color: var(--gsl-text); } .platform-row--local { margin-block-start: var(--gsl-space-6); padding: var(--gsl-space-5); border: 0; border-radius: var(--gsl-radius); background: var(--gsl-surface); box-shadow: var(--gsl-shadow-sm); } .platform-row--local .platform-row__label { flex: 1 1 100%; color: var(--gsl-text); font-size: var(--gsl-fs-body); } /* ---- 20.6 proof bar ----------------------------------------------------- */ .proof-bar__stat { font-weight: 600; letter-spacing: -.045em; } .proof-bar__stat small { font-family: var(--gsl-font); font-weight: 600; font-size: .32em; letter-spacing: .04em; } /* ---- 20.7 offer cards: featured, display prices, glyph row -------------- */ .offer-card { border: 1.5px solid transparent; transition: transform var(--gsl-t-base), box-shadow var(--gsl-t-base), border-color var(--gsl-t-base); } .offer-card:hover, .offer-card:focus-within { border-color: rgba(201, 164, 74, .55); } .offer-card .icon-tile { transition: background-color var(--gsl-t-base), color var(--gsl-t-base); } .offer-card:is(:hover, :focus-within) .icon-tile { background: var(--gsl-accent); color: var(--gsl-dark); } .offer-card--featured { border-color: var(--gsl-accent); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); } .offer-card--featured .icon-tile { background: var(--gsl-accent); color: var(--gsl-dark); } .offer-card--featured:is(:hover, :focus-within) .icon-tile { background: var(--gsl-dark); color: var(--gsl-accent); } .offer-card__badge { position: absolute; inset-block-start: 0; inset-inline-end: clamp(1.5rem, 1.2rem + 1vw, 2rem); transform: translateY(-50%); margin: 0; padding: 4px 12px; border-radius: var(--gsl-radius-pill); background: var(--gsl-accent-tint); box-shadow: 0 0 0 1px rgba(138, 107, 33, .25); font-size: var(--gsl-fs-xs); font-weight: 600; line-height: 1.4; color: var(--gsl-accent-ink-2); } .offer-card .check-list { margin-block-end: var(--gsl-space-5); } .offer-card__foot { border-block-start: 1px solid var(--gsl-hairline); } .offer-card__price strong { font-size: 1.75rem; font-weight: 650; letter-spacing: -.035em; } .offer-card__cur { font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--gsl-text-2); } .offer-card__platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 var(--gsl-space-5); font-size: var(--gsl-fs-xs); color: var(--gsl-text-2); } .platform-glyphs { display: inline-flex; align-items: center; gap: 9px; color: var(--gsl-text); } .platform-glyphs svg { inline-size: 15px; block-size: 15px; } .offer-strip { background: transparent; border-radius: 0; padding-inline: 0; border-block: 1px solid var(--gsl-hairline); } .offer-strip .icon-tile { background: var(--gsl-surface); } /* ---- 20.8 work cards: logo, slow scroll preview, offline note ---------- */ .work-card__logo { display: block; align-self: flex-start; block-size: var(--logo-h, 28px); inline-size: auto; max-inline-size: 70%; margin-block: calc((34px - var(--logo-h, 28px)) / 2); opacity: .8; } .work-card .browser-frame__img { transition: object-position 2.4s cubic-bezier(.45, 0, .2, 1); object-position: 50% 0; } .work-card:hover .browser-frame__img { transform: none; object-position: 50% 100%; } .work-card__status { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--gsl-space-2); font-size: var(--gsl-fs-xs); font-weight: 500; color: var(--gsl-text-2); } .work-card__status::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--gsl-border-strong); } .work-card--offline:hover { transform: none; } .section--work .container-wide { max-width: calc(1360px + 2 * var(--gsl-gutter)); } .section--work .work-card { box-shadow: 0 1px 2px rgba(21, 22, 26, .05), 0 0 0 1px rgba(21, 22, 26, .07); } /* concept builds: demoted, inside
*/ .section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); } .concepts-toggle { border-block: 1px solid var(--gsl-hairline); } .concepts-toggle > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--gsl-space-4); min-height: 64px; padding-block: var(--gsl-space-4); list-style: none; cursor: pointer; font-weight: 600; color: var(--gsl-text); } .concepts-toggle > summary::-webkit-details-marker { display: none; } .concepts-toggle > summary::after { content: "+"; display: grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--gsl-bg-2); font-size: 20px; font-weight: 400; line-height: 1; transition: transform var(--gsl-t-base), background-color var(--gsl-t-base); } .concepts-toggle[open] > summary::after { transform: rotate(45deg); background: var(--gsl-accent); } .concepts-toggle > summary:hover { color: var(--gsl-accent-ink); } .concepts-toggle__note { margin: 0 0 var(--gsl-space-5); max-width: 68ch; font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } .concept-grid { padding-block-end: var(--gsl-space-6); gap: var(--gsl-space-5) var(--gsl-space-4); } .work-card--concept { padding: 0; background: transparent; box-shadow: none; } .work-card--concept:hover, .work-card--concept:focus-within { transform: none; box-shadow: none; } .work-card--concept .browser-frame__img { filter: grayscale(.6); transition: filter 300ms, object-position 2.4s cubic-bezier(.45, 0, .2, 1); } .work-card--concept:is(:hover, :focus-within) .browser-frame__img { filter: none; } .work-card--concept .work-card__body { padding: var(--gsl-space-3) 2px 0; gap: var(--gsl-space-2); } .work-card--concept .work-card__title { font-size: var(--gsl-fs-body); } .work-card--concept .work-card__cta { display: none; } /* ---- 20.9 steps: big numerals + gold rule ------------------------------ */ .step { position: relative; } .step__num { font-size: clamp(2.5rem, 1.9rem + 2vw, 3.5rem); font-weight: 600; letter-spacing: -.05em; color: var(--gsl-accent-ink); } .step::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: 0; block-size: 2px; background: var(--gsl-accent); transform-origin: left center; transition: transform 900ms var(--gsl-ease-out); } html.fx .steps:not(.is-in) .step::before { transform: scaleX(0); } .steps.is-in .step:nth-child(2)::before { transition-delay: 120ms; } .steps.is-in .step:nth-child(3)::before { transition-delay: 240ms; } @media (min-width: 768px) { .steps--row .step::before { inset-inline-end: auto; inline-size: 64px; } } .split--how .step::before { inline-size: 64px; inset-inline-end: auto; } /* ---- 20.10 FAQ: 280ms, row tint, two-column teaser --------------------- */ .faq-panel-wrap { transition: grid-template-rows 280ms var(--gsl-ease-out), visibility 0s linear 280ms; } .faq-item.is-open .faq-panel-wrap { transition: grid-template-rows 280ms var(--gsl-ease-out), visibility 0s; } .faq-list { margin-inline: -14px; } .faq-item { transition: background-color var(--gsl-t-fast); border-radius: 0; } .faq-item:hover { background: rgba(201, 164, 74, .06); } .faq-trigger, .faq-panel-wrap > .faq-panel { padding-inline: 14px; } .faq-list { border-block-start-color: transparent; } .faq-list .faq-item:first-child { border-block-start: 1px solid var(--gsl-hairline); } .faq-split { display: grid; gap: var(--gsl-space-6); } .faq-split .sec-title { margin-bottom: 0; } .faq-split .sec-foot { margin-top: var(--gsl-space-5); } @media (min-width: 992px) { .faq-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gsl-space-9); align-items: start; } .faq-split > :first-child { position: sticky; top: calc(var(--gsl-header-h) + var(--gsl-space-6)); } } /* ---- 20.11 page head: asides, zellige backdrop -------------------------- */ .page-head::after { content: none; } .page-head__grid { display: grid; gap: var(--gsl-space-6); } .page-head__main { min-width: 0; } .page-head__aside { position: relative; min-width: 0; } .page-head__logo { display: block; block-size: var(--logo-h, 40px); inline-size: auto; max-inline-size: 70%; margin-block-end: var(--gsl-space-5); } @media (max-width: 991.98px) { .page-head__aside:not(.page-head__aside--mobile) { display: none; } } @media (min-width: 992px) { .page-head--aside .page-head__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: var(--gsl-space-8); } .page-head--aside::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 52%; background-image: var(--gsl-zellige); background-size: 64px 64px; -webkit-mask-image: radial-gradient(75% 85% at 100% 50%, #000 15%, transparent 75%); mask-image: radial-gradient(75% 85% at 100% 50%, #000 15%, transparent 75%); pointer-events: none; } } /* pricing: the quote "receipt" */ .receipt { position: relative; max-inline-size: 360px; margin-inline-start: auto; padding: 26px 28px 22px; background: var(--gsl-surface); border-radius: 6px; box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); transform: rotate(-1.5deg); } .receipt::before { /* perforated top edge */ content: ""; position: absolute; inset-inline: 10px; inset-block-start: 10px; border-block-start: 1.5px dashed var(--gsl-border); } .receipt__title { margin: 6px 0 var(--gsl-space-3); font-size: var(--gsl-fs-small); font-weight: 600; color: var(--gsl-text-2); } .receipt__rows { margin: 0; } .receipt__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gsl-space-4); padding-block: 11px; border-block-end: 1px dotted var(--gsl-border-strong); font-size: var(--gsl-fs-small); } .receipt__rows dt { font-weight: 400; color: var(--gsl-text-2); } .receipt__rows dd { margin: 0; font-weight: 600; color: var(--gsl-text); text-align: end; } .receipt__foot { margin: var(--gsl-space-4) 0 0; font: italic 400 1.5rem/1.2 var(--gsl-font-accent); color: var(--gsl-accent-ink); } /* services: ledger of offers */ .ledger { max-inline-size: 400px; margin-inline-start: auto; padding: 24px 26px; background: var(--gsl-surface); border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); } .ledger__title { margin: 0 0 var(--gsl-space-2); font-size: var(--gsl-fs-small); font-weight: 600; color: var(--gsl-text-2); } .ledger__list { margin: 0; } .ledger__list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gsl-space-4); padding-block: 14px; border-block-end: 1px solid var(--gsl-hairline); color: var(--gsl-text); text-decoration: none; } .ledger__name { font-weight: 500; font-size: var(--gsl-fs-small); } .ledger__price { font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; } .ledger__price small { margin-inline-start: 5px; font-family: var(--gsl-font); font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: var(--gsl-text-2); } .ledger__list a:is(:hover, :focus-visible) .ledger__name { color: var(--gsl-accent-ink); text-decoration: underline; text-underline-offset: 3px; } .ledger__note { margin: var(--gsl-space-3) 0 0; font-size: var(--gsl-fs-xs); color: var(--gsl-text-2); } /* work: two overlapping browser frames */ .head-frames { position: relative; aspect-ratio: 4 / 3.1; } .head-frames .browser-frame { position: absolute; } .head-frames .browser-frame:nth-child(1) { inset-block-start: 0; inset-inline-end: 0; inline-size: 78%; transform: rotate(2deg); filter: saturate(.7); box-shadow: var(--gsl-shadow-md); } .head-frames .browser-frame:nth-child(2) { inset-block-end: 0; inset-inline-start: 0; inline-size: 72%; transform: rotate(-3deg); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-lg); } /* about: founder photo */ .head-portrait { margin: 0; margin-inline-start: auto; inline-size: min(100%, 300px); } .head-portrait img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--gsl-radius-lg); box-shadow: var(--gsl-shadow-md); } .head-portrait figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: var(--gsl-space-3); } .head-portrait__city { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--gsl-radius-pill); background: var(--gsl-surface); box-shadow: var(--gsl-shadow-sm); font-size: var(--gsl-fs-xs); font-weight: 600; color: var(--gsl-text); } .head-portrait__langs { display: inline-flex; gap: 4px; } .head-portrait__langs span { display: inline-grid; place-items: center; min-width: 30px; min-height: 26px; padding: 0 6px; border-radius: var(--gsl-radius-pill); background: var(--gsl-dark); color: var(--gsl-on-dark); font-size: 11px; font-weight: 600; letter-spacing: .04em; } @media (max-width: 991.98px) { .head-portrait { display: flex; align-items: center; gap: var(--gsl-space-4); inline-size: 100%; margin: 0; } .head-portrait img { inline-size: 88px; flex: none; border-radius: var(--gsl-radius); } .head-portrait figcaption { margin: 0; } } .cred-card { padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); background: var(--gsl-surface); border-radius: var(--gsl-radius-lg); box-shadow: var(--gsl-shadow-sm); } .cred-card__title { margin: 0 0 var(--gsl-space-2); font-size: var(--gsl-fs-small); font-weight: 600; color: var(--gsl-text-2); } .cred-card dl { margin: 0; } .cred-card dl > div { padding-block: 14px; border-block-end: 1px solid var(--gsl-hairline); } .cred-card dl > div:last-child { border-block-end: 0; padding-block-end: 0; } .cred-card dt { font-size: var(--gsl-fs-xs); font-weight: 500; color: var(--gsl-text-2); } .cred-card dd { margin: 4px 0 0; font-family: var(--gsl-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--gsl-text); } /* contact: reply promise · faq: ask card */ .reply-card, .ask-card { max-inline-size: 400px; margin-inline-start: auto; padding: 24px; background: var(--gsl-surface); border-radius: var(--gsl-radius); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); } .reply-card__status { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; color: var(--gsl-text); } .reply-card__status i { flex: none; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--gsl-wa); box-shadow: 0 0 0 4px rgba(31, 175, 84, .16); } .reply-card__hours { margin: 6px 0 var(--gsl-space-4); padding-inline-start: 19px; font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } .reply-card .btn--wa, .ask-card .btn--wa { inline-size: 100%; } .ask-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--gsl-space-4); align-items: start; } .ask-card__avatar { inline-size: 56px; block-size: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gsl-surface), 0 0 0 4.5px var(--gsl-accent); } .ask-card__title { margin: 0; font-family: var(--gsl-font-display); font-size: 1.375rem; font-weight: 620; letter-spacing: -.02em; line-height: 1.2; color: var(--gsl-text); } .ask-card__text { margin: 6px 0 var(--gsl-space-4); font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } @media (max-width: 991.98px) { .reply-card, .ask-card, .page-head__aside .summary-card { max-inline-size: none; margin: 0; } .page-head__aside--mobile .summary-card dl, .page-head__aside--mobile .summary-card__note { display: none; } .page-head__aside--mobile .summary-card .btn--primary { margin-block-start: var(--gsl-space-4); } } .page-head__aside .summary-card { max-inline-size: 400px; margin-inline-start: auto; } @media (min-width: 992px) { .page-head--aside .page-head__meta { display: none; } } /* ---- 20.12 talk panel, guarantee, includes ---------------------------- */ .talk-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--gsl-space-4) var(--gsl-space-6); padding: clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: var(--gsl-surface); border-radius: var(--gsl-radius-lg); box-shadow: var(--gsl-shadow-sm); } .talk-panel__title { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); } .talk-panel__copy p { margin: 6px 0 0; max-width: 60ch; font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } .talk-panel .icon-tile { inline-size: 48px; block-size: 48px; border-radius: 12px; background: var(--gsl-accent-tint); color: var(--gsl-accent-ink-2); } .talk-panel .icon-tile svg { inline-size: 24px; block-size: 24px; } @media (max-width: 767.98px) { .talk-panel { grid-template-columns: minmax(0, 1fr); } .talk-panel .btn--wa { inline-size: 100%; } } .section--surface + .section--tight.section--bg, .section--tint + .section--tight.section--bg { padding-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); } .guarantee { display: flex; align-items: center; gap: var(--gsl-space-4); margin: 0; padding: var(--gsl-space-4) var(--gsl-space-5); border-radius: var(--gsl-radius); background: var(--gsl-accent-tint); box-shadow: inset 0 0 0 1px rgba(138, 107, 33, .18); font-size: var(--gsl-fs-small); line-height: 1.55; color: var(--gsl-text); } .guarantee p { margin: 0; } .guarantee strong { font-weight: 600; } .guarantee__seal { flex: none; inline-size: 56px; block-size: 56px; } .guarantee--card { margin-block-end: var(--gsl-space-5); } .price-notes { display: grid; gap: var(--gsl-space-4); margin-block-start: var(--gsl-space-7); } .price-notes .note-box { margin: 0; } @media (min-width: 992px) { .price-notes { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; } } .includes { display: grid; gap: var(--gsl-space-5); } .includes__title { margin: 0; font-size: var(--gsl-fs-h4); font-weight: 600; } .includes__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--gsl-space-5) var(--gsl-space-5); margin: 0; } .includes__list li { display: grid; gap: 4px; align-content: start; } .includes__list strong { margin-block-start: var(--gsl-space-2); font-weight: 600; color: var(--gsl-text); } .includes__list span:not(.includes__icon) { font-size: var(--gsl-fs-small); line-height: 1.5; color: var(--gsl-text-2); } .includes__icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 10px; background: var(--gsl-surface); box-shadow: inset 0 0 0 1px var(--gsl-hairline); color: var(--gsl-accent-ink); } .includes__icon svg { inline-size: 20px; block-size: 20px; } .includes__seal { inline-size: 40px; block-size: 40px; } @media (min-width: 1100px) { .includes { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } .includes__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* pricing cards: one CTA each, featured first on small screens */ .pricing-card__title a { color: inherit; text-decoration: none; } .pricing-card__title a:is(:hover, :focus-visible) { color: var(--gsl-accent-ink); text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 991.98px) { .pricing-card--featured { order: -1; } } /* client note (prepared, not rendered until real quotes exist) */ .client-note { margin: 0; padding: var(--gsl-space-6); border-inline-start: 2px solid var(--gsl-accent); } .client-note__quote { margin: 0; font: italic 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.3 var(--gsl-font-accent); color: var(--gsl-text); } .client-note__by { margin-block-start: var(--gsl-space-4); font-size: var(--gsl-fs-small); color: var(--gsl-text-2); } .client-note__by strong { display: block; color: var(--gsl-text); } /* ---- 20.13 CTA band: grain + zellige (lines removed) ------------------- */ .cta-band::before { background: radial-gradient(40rem 20rem at 100% 0%, rgba(201, 164, 74, .18), transparent 60%), var(--gsl-grain-soft); background-size: auto, 180px 180px; } .cta-band::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 60%; z-index: -1; background-image: var(--gsl-zellige); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 90% at 100% 30%, #000 10%, transparent 72%); mask-image: radial-gradient(80% 90% at 100% 30%, #000 10%, transparent 72%); pointer-events: none; } /* ---- 20.14 contact form card ------------------------------------------- */ .form-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gsl-space-2) var(--gsl-space-4); } .form-card__time { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 12px; border-radius: var(--gsl-radius-pill); background: var(--gsl-accent-tint); font-size: var(--gsl-fs-xs); font-weight: 600; color: var(--gsl-accent-ink-2); } .form-card__time::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--gsl-accent-ink-2); } /* ---- 20.15 footer sign-off --------------------------------------------- */ .site-footer .auto-container { position: relative; } .site-footer__sign { margin: var(--gsl-space-7) 0 0; overflow: hidden; font: 650 clamp(3.25rem, .5rem + 12.5vw, 11.5rem)/.8 var(--gsl-font-display); letter-spacing: -.035em; color: rgba(255, 255, 255, .06); white-space: nowrap; user-select: none; pointer-events: none; } .site-footer__contact li:nth-child(2) svg { color: var(--gsl-wa); } /* ---- 20.16 404 recent work --------------------------------------------- */ .error-hero__work { max-width: 880px; margin: var(--gsl-space-8) auto 0; } .error-hero__work-title { margin: 0 0 var(--gsl-space-4); font-size: var(--gsl-fs-small); font-weight: 600; color: var(--gsl-text-2); } .error-hero__frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gsl-space-4); } .error-hero__frame { display: grid; gap: 8px; text-decoration: none; font-size: var(--gsl-fs-small); font-weight: 500; color: var(--gsl-text); } .error-hero__frame .browser-frame { box-shadow: var(--gsl-shadow-sm); transition: transform var(--gsl-t-base), box-shadow var(--gsl-t-base); } .error-hero__frame:hover .browser-frame { transform: translateY(-3px); box-shadow: var(--gsl-shadow-sm), var(--gsl-shadow-md); } @media (max-width: 575.98px) { .error-hero__frames { gap: 10px; } .error-hero__frame { font-size: 12px; } .error-hero__frame .browser-frame__bar { display: none; } } /* ---- 20.17 floats: sticky mobile CTA bar, desktop WA pill ------------- */ .mobile-cta { display: none; } .wa-float { transition: transform var(--gsl-t-fast), box-shadow var(--gsl-t-fast), opacity 200ms, visibility 0s; } html.is-cta-visible .wa-float { opacity: 0; visibility: hidden; transition: opacity 200ms, visibility 0s 200ms; } .scroll-to-top { bottom: 96px; } @media (max-width: 767.98px) { .mobile-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 9985; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 248, 244, .92); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border-block-start: 1px solid var(--gsl-hairline); box-shadow: 0 -8px 24px -16px rgba(21, 22, 26, .3); transition: transform 260ms var(--gsl-ease-out), visibility 0s; } .mobile-cta > * { min-height: 48px; padding-inline: 10px; font-size: 15px; } html.fx .mobile-cta:not(.is-shown) { transform: translateY(110%); visibility: hidden; transition: transform 260ms var(--gsl-ease-out), visibility 0s 260ms; } html.has-drawer-open .mobile-cta { visibility: hidden; } .wa-float, .scroll-to-top, .scroll-to-top.is-visible { display: none !important; } .site-footer { padding-block-end: calc(var(--gsl-space-5) + var(--gsl-mcta-h) + env(safe-area-inset-bottom)); } chatbot-widget { bottom: calc(var(--gsl-mcta-h) + 8px + env(safe-area-inset-bottom)) !important; } } @media (min-width: 768px) { .site-footer { padding-block-end: var(--gsl-space-6); } /* the WA pill may float over the decorative sign-off only */ } /* ---- 20.18 reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .work-card .browser-frame__img, .work-card:hover .browser-frame__img { transition: none !important; object-position: 50% 0 !important; } .home-hero__stack .browser-frame { translate: none !important; } .step::before { transform: none !important; } } /* hero line breaks are art-directed at ≥992px only */ .br-lg { display: none; } @media (min-width: 1200px) { .br-lg { display: inline; } .home-hero__title { max-width: none; } } @media (min-width: 992px) and (max-width: 1199.98px) { .home-hero__title { font-size: clamp(2.6rem, 1rem + 4vw, 3.75rem); } } .browser-frame__url:empty { display: none; } /* offline client sites: never print their (lapsed) domain */