/* ========================================================================== Garage Rafid — Deurne (Antwerpen) Design idea: "de lamp boven de werkbank" — a workshop at dusk. Petrol-dark steel, warm brass light, and one clean sheet of paper you can actually read. Type: wide grotesque for signage, narrow grotesque for labels, slab for paperwork. Signature: the work-slip with the brass seal. ========================================================================== */ /* --------------------------------------------------------------- 1. TOKENS */ :root { /* Colour — named for the workshop they come from */ --ink: #17282D; /* petrol steel in shadow — text + dark surfaces */ --ink-2: #1F343A; /* the same steel, one step into the light */ --slate: #405A61; /* cooled metal — secondary text on light */ --chalk: #F0EFEA; /* chalk-painted workshop wall — page ground */ --chalk-2: #E7E5DC; /* the same wall in shade — alternate band */ --paper: #FBFAF6; /* the quote sheet — cards and the slip */ --brass: #B8781C; /* brass fitting — rules, marks */ --brass-lite: #E0A44A; /* the worklamp itself — accents on dark */ --brass-ink: #8A5A10; /* brass darkened for text on light (AA at 5.1:1) */ --text: var(--ink); --text-soft: #4A6067; --text-light: #DCE3E2; --text-dim: #A6B7B8; --rule: rgba(23, 40, 45, .16); --rule-soft: rgba(23, 40, 45, .09); --rule-dark: rgba(220, 227, 226, .18); /* Type */ --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Zilla Slab", Georgia, "Times New Roman", serif; --fs-body: clamp(1.0625rem, 1.02rem + .18vw, 1.15rem); /* 17 → 18.4px */ --fs-lead: clamp(1.15rem, 1.06rem + .42vw, 1.4rem); --fs-small: clamp(1rem, .97rem + .12vw, 1.0625rem); /* 16 → 17px */ --fs-label: .875rem; /* 14px caps */ --fs-micro: .8125rem; /* 13px caps — uppercase letterspaced labels ONLY, never reading text */ --fs-h1: clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem); --fs-h2: clamp(1.85rem, 1.35rem + 2vw, 2.9rem); --fs-h3: clamp(1.2rem, 1.12rem + .35vw, 1.45rem); /* Space */ --sp-2xs: .375rem; --sp-xs: .625rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2.5rem; --sp-xl: 4rem; --sp-2xl: 6rem; --sec-pad: clamp(3.5rem, 2rem + 6vw, 7rem); /* Shape */ --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* Layout */ --wrap: 1180px; --head-h: 58px; --svcnav-h: 0px; } /* ----------------------------------------------------------- 2. BASE/RESET */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--chalk); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.68; letter-spacing: .002em; -webkit-font-smoothing: antialiased; padding-bottom: 68px; /* room for the mobile call bar */ } /* No overflow clipping on : it would break the sticky header in some browsers. Every bleeding decoration clips inside its own section instead. */ h1, h2, h3 { margin: 0; font-weight: 700; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } dl, dd { margin: 0; } address { font-style: normal; } a { color: inherit; } img, svg { max-width: 100%; } ::selection { background: var(--brass-lite); color: var(--ink); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Focus — never hidden, always thick enough to spot */ :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; } .site-head :focus-visible, .hero :focus-visible, .band :focus-visible, .sec--dark :focus-visible, .cta :focus-visible, .promise :focus-visible, .site-foot :focus-visible, .callbar :focus-visible { outline-color: var(--brass-lite); } .skip { position: fixed; /* fixed, not absolute: reachable from any scroll depth */ left: 50%; top: 0; transform: translate(-50%, -140%); z-index: 200; background: var(--brass-lite); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); padding: .8rem 1.4rem; border-radius: 0 0 var(--r-md) var(--r-md); text-decoration: none; transition: transform .25s var(--ease); } .skip:focus { transform: translate(-50%, 0); } /* --------------------------------------------------------- 3. TYPE PATTERNS */ .eyebrow { font-family: var(--font-display); font-weight: 600; font-stretch: 86%; font-size: var(--fs-label); letter-spacing: .155em; text-transform: uppercase; line-height: 1.4; color: var(--brass-lite); margin-bottom: var(--sp-sm); } .eyebrow--dark { color: var(--brass-ink); } .h2 { font-family: var(--font-display); font-weight: 700; font-stretch: 106%; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.017em; color: var(--ink); text-wrap: balance; } .h2--light { color: var(--chalk); } .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-soft); max-width: 44ch; } .textlink { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-stretch: 96%; font-size: var(--fs-small); letter-spacing: .01em; color: var(--brass-ink); text-decoration: none; border-bottom: 2px solid var(--brass); padding-bottom: 2px; min-height: 44px; align-self: flex-start; transition: gap .25s var(--ease), color .25s var(--ease); } .textlink svg { width: 1.1em; height: 1.1em; flex: none; } .textlink:hover { gap: .85rem; color: var(--ink); } .textlink--sm { margin-top: .55rem; } /* --------------------------------------------------------------- 4. LAYOUT */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, .6rem + 2.4vw, 2.5rem); } .wrap--narrow { max-width: 800px; } .sec { padding-block: var(--sec-pad); scroll-margin-top: calc(var(--head-h) + 1.25rem); } .sec--waarom { background: var(--chalk-2); } .sec--dark { background: var(--ink); color: var(--text-light); } .sec-head { max-width: 62ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem); } .sec-head__lead { margin-top: var(--sp-sm); color: var(--text-soft); max-width: 56ch; } /* -------------------------------------------------------------- 5. BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: .7rem 1.15rem; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-stretch: 96%; font-size: var(--fs-small); letter-spacing: .012em; text-decoration: none; border: 1.5px solid transparent; transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); } .btn__ico { width: 1.25em; height: 1.25em; flex: none; } .btn--primary { background: var(--brass-lite); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset; } .btn--primary:hover { background: #EDB55D; transform: translateY(-2px); } .btn--ghost { color: var(--text-light); border-color: rgba(220, 227, 226, .38); } .btn--ghost:hover { border-color: var(--brass-lite); color: #fff; transform: translateY(-2px); } .btn--lg { min-height: 56px; padding: .85rem 1.5rem; font-size: 1.125rem; } .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); } /* --------------------------------------------------------------- 6. HEADER */ .site-head { position: sticky; top: 0; z-index: 60; background: var(--ink); border-bottom: 1px solid rgba(220, 227, 226, .12); transition: box-shadow .3s var(--ease); } .site-head.is-stuck { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); } .site-head__inner { display: flex; align-items: center; flex-wrap: wrap; /* safety valve: wraps rather than overflows */ row-gap: 0; column-gap: clamp(.75rem, .2rem + 1.6vw, 2rem); min-height: var(--head-h); } .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--chalk); margin-right: auto; min-height: 44px; } .brand__mark { width: 26px; height: 26px; flex: none; color: var(--brass-lite); } .brand__name { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: 1.0625rem; letter-spacing: .005em; text-transform: uppercase; } .nav { display: flex; align-items: center; gap: clamp(.15rem, -.2rem + 1.4vw, 1.35rem); } .nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; font-family: var(--font-display); font-weight: 600; font-stretch: 92%; font-size: var(--fs-small); letter-spacing: .02em; color: var(--text-dim); text-decoration: none; transition: color .2s var(--ease); } .nav__link::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 8px; height: 2.5px; background: var(--brass-lite); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); } .nav__link:hover { color: var(--chalk); } .nav__link:hover::after { transform: scaleX(1); } .nav__link.is-current { color: var(--chalk); } .nav__link.is-current::after { transform: scaleX(1); } .head-cta { display: none; } /* ------------------------------------------------------------------ 7. HERO */ .hero { position: relative; background: var(--ink); color: var(--text-light); overflow: hidden; padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 6vw, 7rem); } /* brushed-steel grain: pure CSS, no image files */ .hero::before, .band::before, .cta::before, .promise::before, .sec--dark::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(112deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 6px); pointer-events: none; } .sec--dark, .cta, .promise, .band { position: relative; } .lamp { position: absolute; top: -22%; right: -12%; width: min(760px, 105vw); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(224, 164, 74, .30), rgba(224, 164, 74, .10) 52%, rgba(224, 164, 74, 0) 72%); pointer-events: none; } .hero__inner { position: relative; display: grid; gap: clamp(2.5rem, 1.5rem + 5vw, 4.5rem); align-items: center; } .hero__title { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; font-size: var(--fs-h1); line-height: 1.0; letter-spacing: -.028em; color: var(--chalk); margin-block: .35em .55em; text-wrap: balance; } .hero .lead { color: var(--text-dim); max-width: 46ch; } .langs { margin-top: clamp(1.25rem, 1rem + 1vw, 1.9rem); font-size: var(--fs-small); color: var(--text-dim); } .langs strong { color: var(--chalk); font-weight: 500; } /* ------------------------------------------ 8. SIGNATURE: THE WORK-SLIP */ .slip { --slip-rot: -1.15deg; transform: rotate(var(--slip-rot)); filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .45)); justify-self: center; width: 100%; max-width: 480px; } .slip__paper { background: var(--paper); color: var(--ink); padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); padding-top: clamp(2rem, 1.4rem + 2vw, 2.8rem); border-radius: 0 0 var(--r-sm) var(--r-sm); /* the ruled paper of a work sheet */ background-image: repeating-linear-gradient(180deg, rgba(23, 40, 45, .055) 0 1px, transparent 1px 38px); background-position: 0 96px; /* torn-from-the-pad top edge */ -webkit-mask-image: radial-gradient(circle 7px at 9px 0, transparent 0 7px, #000 7.5px); -webkit-mask-size: 18px 100%; -webkit-mask-repeat: repeat-x; mask-image: radial-gradient(circle 7px at 9px 0, transparent 0 7px, #000 7.5px); mask-size: 18px 100%; mask-repeat: repeat-x; } .slip__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); padding-bottom: .85rem; border-bottom: 2px solid var(--ink); margin-bottom: 1.5rem; } .slip__title { font-family: var(--font-display); font-weight: 700; font-stretch: 90%; font-size: var(--fs-label); letter-spacing: .17em; text-transform: uppercase; } .slip__ref { font-family: var(--font-display); font-weight: 500; font-stretch: 84%; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); } .steps { display: grid; gap: 1.15rem; } .step { display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem; align-items: start; } .step__no { font-family: var(--font-display); font-weight: 700; font-stretch: 78%; font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--brass-ink); line-height: 1.5; } .step__body { display: block; } .step__t { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 102%; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.006em; } .step__d { display: block; font-size: var(--fs-small); line-height: 1.55; color: var(--text-soft); margin-top: .12rem; } .slip__foot { display: flex; align-items: center; gap: var(--sp-sm); margin-top: 1.6rem; padding-top: 1.15rem; border-top: 1px dashed var(--rule); } .slip__note { font-size: var(--fs-small); line-height: 1.5; color: var(--text-soft); font-style: italic; } .stamp { width: clamp(92px, 22vw, 116px); height: auto; flex: none; color: var(--brass); transform: rotate(-7deg); opacity: .92; mix-blend-mode: multiply; } .stamp__ring, .stamp__mid, .stamp__sub { font-family: var(--font-display); fill: currentColor; font-weight: 700; } /* Sized so every string still fits its arc / ring width in the Arial fallback, which runs ~15% wider than Archivo. Glyphs past a textPath's end don't render. */ .stamp__ring { font-size: 11.5px; font-stretch: 88%; letter-spacing: 1.2px; } .stamp__mid { font-size: 16px; font-stretch: 104%; letter-spacing: .3px; } .stamp__sub { font-size: 12px; font-stretch: 86%; letter-spacing: 2.2px; } /* ---------------------------------------------------------- 9. JUMP BAR */ .jumpbar { background: var(--chalk-2); border-bottom: 1px solid var(--rule-soft); } .jumpbar__inner { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem clamp(.75rem, .4rem + 1vw, 1.5rem); padding-block: .5rem; } .jumpbar__label { font-family: var(--font-display); font-weight: 600; font-stretch: 84%; font-size: var(--fs-micro); letter-spacing: .15em; text-transform: uppercase; color: var(--slate); } .jumpbar__list { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; } .jumpbar__list a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-stretch: 94%; font-size: var(--fs-small); color: var(--brass-ink); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s var(--ease); } .jumpbar__list a:hover { border-bottom-color: var(--brass); } /* -------------------------------------------------------- 10. SERVICE GRID */ .svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(.7rem, .45rem + .8vw, 1.1rem); } .svc-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: clamp(1.15rem, .9rem + .8vw, 1.6rem); transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .svc-card:hover { border-color: var(--brass); transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(23, 40, 45, .7); } .svc-card__icon { width: 34px; height: 34px; color: var(--brass-ink); margin-bottom: .9rem; } .svc-card__name { font-family: var(--font-display); font-weight: 700; font-stretch: 104%; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.012em; margin-bottom: .45rem; } .svc-card__desc { font-size: var(--fs-small); line-height: 1.58; color: var(--text-soft); } .svc-card--link { background: var(--chalk-2); border-style: dashed; justify-content: space-between; gap: .9rem; } .svc-card--link:hover { transform: none; box-shadow: none; } /* --------------------------------------------------------- 11. SPEC / OWNER */ .spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); } .spec__item { border-top: 2px solid var(--ink); padding-top: .9rem; } .spec__k { font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.0625rem; line-height: 1.28; letter-spacing: -.008em; margin-bottom: .35rem; } .spec__v { font-size: var(--fs-small); line-height: 1.6; color: var(--text-soft); } .owner { margin: clamp(2.5rem, 1.8rem + 2.5vw, 4rem) 0 0; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.4rem, .9rem + 2vw, 2.75rem); background: var(--paper); border-left: 4px solid var(--brass); border-radius: 0 var(--r-md) var(--r-md) 0; max-width: 46rem; } .owner__q { margin: 0; } .owner__q p { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); line-height: 1.4; font-weight: 500; letter-spacing: -.008em; text-wrap: pretty; } .owner__q p::before { content: "\201C"; color: var(--brass); margin-right: .04em; } .owner__q p::after { content: "\201D"; color: var(--brass); } .owner__by { margin-top: 1.15rem; display: grid; gap: .25rem; } .owner__name { font-family: var(--font-display); font-weight: 700; font-stretch: 88%; font-size: var(--fs-label); letter-spacing: .13em; text-transform: uppercase; } .owner__role { font-size: var(--fs-small); line-height: 1.55; color: var(--text-soft); } /* ---------------------------------------------------------- 12. WERKGEBIED */ .area { display: grid; gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); align-items: start; position: relative; } .area__lead { color: var(--text-dim); max-width: 46ch; } .area__addr { display: flex; align-items: center; gap: .55rem; margin-top: var(--sp-md); font-family: var(--font-display); font-weight: 600; font-stretch: 94%; font-size: var(--fs-small); color: var(--chalk); } .area__pin { width: 22px; height: 22px; flex: none; color: var(--brass-lite); } .area__places-label { font-family: var(--font-display); font-weight: 600; font-stretch: 84%; font-size: var(--fs-label); letter-spacing: .15em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--sp-sm); } .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { padding: .5rem .95rem; border: 1px solid var(--rule-dark); border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 500; font-stretch: 92%; font-size: var(--fs-small); color: var(--text-light); } .chip--more { border-style: dashed; color: var(--brass-lite); border-color: rgba(224, 164, 74, .45); } /* ------------------------------------------------------------------ 13. FAQ */ .faq { border-top: 1px solid var(--rule); } .faq__item { border-bottom: 1px solid var(--rule); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); min-height: 60px; padding: 1rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-stretch: 102%; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.32; letter-spacing: -.008em; transition: color .2s var(--ease); } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; width: .58em; height: .58em; flex: none; border-right: 2.5px solid var(--brass-ink); border-bottom: 2.5px solid var(--brass-ink); transform: rotate(45deg) translate(-.1em, -.1em); transition: transform .3s var(--ease); } .faq__q:hover { color: var(--brass-ink); } .faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-.06em, -.06em); } .faq__a { padding: 0 0 1.4rem; max-width: 62ch; } .faq__a p { color: var(--text-soft); } /* ------------------------------------------------------------------ 14. CTA */ .cta { background: var(--ink-2); color: var(--text-light); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); } .cta__inner { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); align-items: center; position: relative; } .cta__lead { margin-top: var(--sp-sm); color: var(--text-dim); max-width: 48ch; } .actions--cta { margin-top: 0; } /* --------------------------------------------------------------- 15. FOOTER */ .site-foot { background: var(--ink); color: var(--text-dim); border-top: 3px solid var(--brass); padding-top: clamp(2.5rem, 1.8rem + 3vw, 4rem); font-size: var(--fs-small); } .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); } .foot-col--brand { grid-column: span 1; } .brand--foot { margin-right: 0; margin-bottom: .75rem; } .foot-tag { line-height: 1.6; max-width: 34ch; } .foot-h { font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-lite); margin-bottom: .9rem; } .foot-list { display: grid; gap: .1rem; } .foot-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-light); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease); } .foot-list a:hover { border-bottom-color: var(--brass-lite); color: #fff; } .foot-list--sub { margin-top: .5rem; } .foot-list--sub a { color: var(--text-dim); } .foot-addr { margin-top: .9rem; line-height: 1.6; } .foot-langs { line-height: 1.9; color: var(--text-light); } .foot-note { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; justify-content: space-between; align-items: center; padding-block: 1rem 1.25rem; border-top: 1px solid rgba(220, 227, 226, .14); font-size: var(--fs-label); } .foot-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--rule-dark); } .foot-note a:hover { color: var(--brass-lite); } /* ------------------------------------------------- 16. MOBILE ACTION BAR */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; gap: 1px; background: rgba(220, 227, 226, .16); border-top: 1px solid rgba(220, 227, 226, .16); box-shadow: 0 -12px 30px -20px rgba(0, 0, 0, .9); } .callbar__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 64px; padding: .5rem; font-family: var(--font-display); font-weight: 700; font-stretch: 96%; font-size: 1.0625rem; text-decoration: none; } .callbar__btn svg { width: 1.25em; height: 1.25em; flex: none; } .callbar__btn--call { flex: 1.5; background: var(--brass-lite); color: var(--ink); } .callbar__btn--wa { background: var(--ink); color: var(--text-light); } /* --------------------------------------------------- 17. INNER PAGE BANDS */ .band { background: var(--ink); color: var(--text-light); overflow: hidden; padding-block: clamp(2.75rem, 2rem + 4vw, 5rem) clamp(3rem, 2rem + 4.5vw, 5.5rem); } .band__inner { position: relative; max-width: 62ch; } .band__title { font-family: var(--font-display); font-weight: 700; font-stretch: 110%; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.9rem); line-height: 1.02; letter-spacing: -.026em; color: var(--chalk); margin-block: .3em .5em; text-wrap: balance; } .lead--band { color: var(--text-dim); max-width: 54ch; } .band--diensten { background-image: radial-gradient(120% 130% at 88% 8%, rgba(224, 164, 74, .18), rgba(224, 164, 74, 0) 62%); } .band--contact { padding-bottom: clamp(4.5rem, 3rem + 6vw, 8rem); } .band__nut { position: absolute; right: -70px; top: 50%; transform: translateY(-50%); width: clamp(220px, 34vw, 420px); height: auto; color: var(--brass-lite); /* Faint on phones, where the heading runs the full width and crosses it. */ opacity: .1; pointer-events: none; } @media (min-width: 720px) { .band__nut { opacity: .16; } } /* --------------------------------------------------- 18. SERVICE PAGE NAV */ .svcnav { background: var(--chalk-2); border-bottom: 1px solid var(--rule-soft); } .svcnav__inner { padding-block: .4rem; } .svcnav__list { display: flex; flex-wrap: wrap; gap: .4rem; } .svcnav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .95rem; border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--paper); font-family: var(--font-display); font-weight: 600; font-stretch: 92%; font-size: var(--fs-small); color: var(--text-soft); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .svcnav__link:hover { border-color: var(--brass); color: var(--ink); } .svcnav__link.is-active { background: var(--ink); border-color: var(--ink); color: var(--chalk); } /* ------------------------------------------------ 19. SERVICE DETAIL BLOCKS */ .sec--svc { padding-block: var(--sec-pad); } .svc { display: grid; gap: clamp(1rem, .6rem + 1.6vw, 2.5rem); padding-block: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--head-h) + var(--svcnav-h) + 1.25rem); } .svc:first-child { border-top: 0; padding-top: 0; } .svc__head { position: relative; } .svc__num { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 76%; font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: .18em; color: var(--brass-ink); margin-bottom: .9rem; } .svc__icon { width: 44px; height: 44px; color: var(--ink); margin-bottom: .9rem; } .svc__name { font-family: var(--font-display); font-weight: 700; font-stretch: 106%; font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.08; letter-spacing: -.02em; } .svc__tag { margin-top: .55rem; font-size: var(--fs-small); line-height: 1.5; color: var(--brass-ink); font-style: italic; max-width: 30ch; } .svc__body { display: grid; gap: 1rem; max-width: 62ch; } .svc__body p { color: var(--text-soft); } .pointlist { display: grid; gap: .55rem; margin-top: .35rem; } .pointlist li { position: relative; padding-left: 1.7rem; font-size: var(--fs-small); line-height: 1.55; } /* A real checkmark: taller than it is wide, right + bottom borders, 45°. */ .pointlist li::before { content: ""; position: absolute; left: .2rem; top: .42em; width: .4rem; height: .74rem; border: 2px solid var(--brass); border-top: 0; border-left: 0; transform: rotate(42deg); } /* --------------------------------------------------------- 20. PROMISE BAND */ .promise { background: var(--ink); color: var(--text-light); padding-block: clamp(3rem, 2rem + 4vw, 5rem); } .promise__inner { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); align-items: center; justify-items: start; position: relative; } .promise__lead { margin-top: var(--sp-sm); color: var(--text-dim); max-width: 52ch; } .stamp--promise { color: var(--brass-lite); mix-blend-mode: normal; opacity: .95; width: clamp(130px, 26vw, 176px); } /* ---------------------------------------------------------- 21. CONTACT PAGE */ .sec--contact { padding-top: 0; padding-bottom: var(--sec-pad); } .ccard { position: relative; z-index: 2; margin-top: clamp(-4.5rem, -3.5rem - 1.5vw, -2.5rem); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: 0 30px 60px -40px rgba(23, 40, 45, .9); overflow: hidden; } .ccard__row { display: flex; align-items: flex-start; gap: clamp(.9rem, .6rem + 1vw, 1.4rem); padding: clamp(1.15rem, .9rem + 1vw, 1.7rem) clamp(1.1rem, .8rem + 1.4vw, 2rem); border-top: 1px solid var(--rule-soft); text-decoration: none; color: inherit; transition: background-color .2s var(--ease); } .ccard__row:first-child { border-top: 0; } .ccard__row:hover { background: var(--chalk); } .ccard__row--static:hover { background: transparent; } .ccard__row--call { background: rgba(224, 164, 74, .12); } .ccard__row--call:hover { background: rgba(224, 164, 74, .2); } .ccard__ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--ink); color: var(--brass-lite); } .ccard__ico svg { width: 24px; height: 24px; } .ccard__text { display: block; flex: 1; } .ccard__label { display: block; font-family: var(--font-display); font-weight: 600; font-stretch: 84%; font-size: var(--fs-label); letter-spacing: .15em; text-transform: uppercase; color: var(--slate); margin-bottom: .3rem; } .ccard__value { display: block; font-family: var(--font-display); font-weight: 700; font-stretch: 104%; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); line-height: 1.15; letter-spacing: -.018em; color: var(--ink); } .ccard__value--addr { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.3; } .ccard__note { display: block; margin-top: .45rem; font-size: var(--fs-small); line-height: 1.55; color: var(--text-soft); max-width: 46ch; } .ccard__arrow { display: none; align-self: center; color: var(--brass-ink); flex: none; transition: transform .25s var(--ease); } .ccard__arrow svg { width: 26px; height: 26px; } .ccard__row:hover .ccard__arrow { transform: translateX(5px); } /* Prep list */ .prep { display: grid; gap: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem); align-items: start; } .prep__lead { margin-top: var(--sp-sm); color: var(--text-soft); max-width: 48ch; } .prep__list { display: grid; gap: 1.35rem; } .prep__item { display: grid; grid-template-columns: 2.75rem 1fr; grid-template-areas: "no title" ". desc"; gap: .15rem .4rem; border-top: 2px solid var(--ink); padding-top: .85rem; } .prep__no { grid-area: no; font-family: var(--font-display); font-weight: 700; font-stretch: 76%; font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: .1em; color: var(--brass-ink); line-height: 1.6; } .prep__t { grid-area: title; font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-size: 1.0625rem; line-height: 1.3; } .prep__d { grid-area: desc; font-size: var(--fs-small); line-height: 1.55; color: var(--text-soft); } /* Talen */ .talen { position: relative; display: grid; gap: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem); align-items: center; } .talen__lead { margin-top: var(--sp-sm); color: var(--text-dim); max-width: 50ch; } .talen__list { display: grid; gap: 1.1rem; } .talen__item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); border-bottom: 1px solid var(--rule-dark); padding-bottom: .7rem; } .talen__word { font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.25; letter-spacing: -.02em; color: var(--chalk); } /* Zilla Slab and Archivo carry no Arabic, so name a stack the system can meet. */ .talen__item [lang="ar"] { font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif; font-weight: 500; font-stretch: 100%; } .talen__meta { font-family: var(--font-display); font-weight: 600; font-stretch: 84%; font-size: var(--fs-micro); letter-spacing: .15em; text-transform: uppercase; color: var(--brass-lite); } /* -------------------------------------------------------------- 22. MOTION */ /* One orchestrated moment: the lamp warms up, the copy rises, the slip is laid on the bench, and the seal is pressed on top. Everything else is calm. */ @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes lampUp { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } } @keyframes breathe { from { opacity: 1; } to { opacity: .72; } } @keyframes slipDrop { from { opacity: 0; transform: translateY(-20px) rotate(calc(var(--slip-rot) - 1.4deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--slip-rot)); } } @keyframes press { 0% { opacity: 0; transform: rotate(-16deg) scale(1.3); } 55% { opacity: .95; } 100% { opacity: .92; transform: rotate(-7deg) scale(1); } } .js .hero-anim { opacity: 0; animation: riseIn .8s var(--ease-out) forwards; } .js .hero-anim:nth-child(1) { animation-delay: .10s; } .js .hero-anim:nth-child(2) { animation-delay: .18s; } .js .hero-anim:nth-child(3) { animation-delay: .28s; } .js .hero-anim:nth-child(4) { animation-delay: .38s; } .js .hero-anim:nth-child(5) { animation-delay: .46s; } .js .lamp { opacity: 0; animation: lampUp 1.5s var(--ease) .05s forwards, breathe 9s ease-in-out 1.8s infinite alternate; } .js .hero .slip { opacity: 0; animation: slipDrop 1s var(--ease-out) .5s forwards; } .js .hero .stamp { opacity: 0; animation: press .55s var(--ease-out) 1.3s forwards; } .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .hero-anim, .js .lamp, .js [data-reveal] { opacity: 1 !important; transform: none !important; } .js .hero .slip { opacity: 1 !important; transform: rotate(var(--slip-rot)) !important; } .js .hero .stamp { opacity: .92 !important; transform: rotate(-7deg) !important; } .btn:hover, .svc-card:hover { transform: none; } } /* ---------------------------------------------------------- 23. RESPONSIVE */ @media (min-width: 560px) { .ccard__arrow { display: inline-flex; } .prep__item { grid-template-columns: 3rem 1fr; } } @media (min-width: 720px) { .cta__inner { grid-template-columns: 1.35fr auto; } .prep { grid-template-columns: 1fr 1.15fr; } .talen { grid-template-columns: 1.1fr .9fr; } .svc { grid-template-columns: minmax(210px, .8fr) 1.2fr; } .svc__icon { width: 48px; height: 48px; } } @media (min-width: 860px) { :root { --head-h: 74px; --svcnav-h: 58px; } body { padding-bottom: 0; } .callbar { display: none; } .head-cta { display: inline-flex; } .site-head__inner { column-gap: 2rem; } .brand__name { font-size: 1.15rem; } .brand__mark { width: 30px; height: 30px; } .svcnav { position: sticky; top: var(--head-h); z-index: 50; } .svcnav__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; } .svcnav__link { white-space: nowrap; } .area { grid-template-columns: 1fr 1fr; } .promise__inner { grid-template-columns: 1fr auto; justify-items: stretch; } .promise .stamp--promise { justify-self: end; } } @media (min-width: 1000px) { .hero__inner { grid-template-columns: 1.05fr .95fr; } .slip { justify-self: end; max-width: 460px; } .spec { gap: 2.25rem 3rem; } } @media (max-width: 999px) { .slip { --slip-rot: 0deg; max-width: 520px; } .slip__foot { flex-direction: row; } } /* Small phones: the header must stay one legible row, so tighten the gutters and the wordmark rather than shrinking anything you have to read or tap. */ @media (max-width: 519px) { .wrap { padding-inline: 1rem; } .site-head__inner { column-gap: .3rem; } .brand { gap: .4rem; } .brand__mark { width: 21px; height: 21px; } .brand__name { font-size: .875rem; font-stretch: 100%; letter-spacing: .012em; } .nav { column-gap: 0; } /* Nav labels are chrome, not reading text: 15px here buys a single-row header on a 375px screen. Everything you actually read stays ≥16px. */ .nav__link { padding: 0 .3rem; font-size: .9375rem; font-stretch: 86%; } .nav__link::after { left: .3rem; right: .3rem; } .slip__foot { flex-direction: column; align-items: flex-start; gap: .9rem; } .slip__head { flex-direction: column; align-items: flex-start; gap: .25rem; } .foot-note { justify-content: flex-start; } .callbar__btn { font-size: 1rem; gap: .4rem; } }