/* Grafische Kwekerij — site styles
* Brand: mint #C9E6E9 / yellow #F9D500 / white. Faustina · Lexend · Fira Sans.
*
* One global stylesheet. Block templates in templates/blocks/ reference these
* classes by name. Override tokens on :root to retheme without touching
* component CSS.
*/
/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
--gk-yellow: #F9D500;
--gk-yellow-deep: #DAB62C;
--gk-mint: #C9E6E9;
--gk-mint-deep: #A7CFD3;
--gk-paper: #ffffff;
--gk-cream: #fafaf7;
--gk-ink: #14181a;
--gk-dim: #6c7174;
--gk-faint: #dfe3e5;
--gk-radius: 14px;
--gk-font-display: "Faustina", Georgia, serif;
--gk-font-ui: "Lexend", system-ui, sans-serif;
--gk-font-body: "Fira Sans", system-ui, sans-serif;
}
/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body{
font-family: var(--gk-font-body);
font-size: 18px;
line-height: 1.55;
color: var(--gk-ink);
background: var(--gk-paper);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* ── Type ────────────────────────────────────────────────────────────────── */
.gk-disp{
font-family: var(--gk-font-display);
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.02;
}
.gk-ui { font-family: var(--gk-font-ui); font-weight: 500; }
.gk-mono { font-family: var(--gk-font-body); font-weight: 500;
letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
h1, h2, h3, h4 { margin: 0; }
h1 { font-family: var(--gk-font-display); }
h2 { font-family: var(--gk-font-ui); font-weight: 500; font-size: 32px; }
/* ── Layout ──────────────────────────────────────────────────────────────── */
.gk-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 36px; }
.gk-band { padding: 64px 0; }
.gk-band--tight { padding: 40px 0; }
.gk-band--mint { background: var(--gk-mint); }
.gk-band--mint-deep { background: var(--gk-mint-deep); }
.gk-band--yellow { background: var(--gk-yellow); }
.gk-band--yellow-deep { background: var(--gk-yellow-deep); }
.gk-band--paper { background: var(--gk-paper); }
/* ── Site header / nav ───────────────────────────────────────────────────── */
.gk-header{
background: var(--gk-paper);
}
.gk-header__bar{
display: flex;
align-items: center;
gap: 32px;
padding: 10px 0;
}
.gk-header__logo img { height: 72px; width: auto; }
.gk-header__spacer { flex: 1; }
.gk-nav{ display: flex; }
.gk-nav__list{
list-style: none; margin: 0; padding: 0;
display: flex; gap: 28px;
font-size: 18px;
font-family: var(--gk-font-ui);
font-weight: 500;
font-size: 16px;
}
.gk-nav__link{ text-decoration: none; cursor: pointer; }
.gk-nav__link.is-active{ font-weight: 600; }
/* Hamburger (mobile) */
.gk-burger{
display: none;
width: 44px; height: 44px;
border: 0; background: transparent; cursor: pointer; padding: 0;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.gk-burger span{
display: block; width: 22px; height: 2px;
background: var(--gk-ink); border-radius: 2px;
}
/* Mobile menu drawer */
.gk-nav-mobile{
display: none;
border-top: 1px solid var(--gk-faint);
background: var(--gk-paper);
}
.gk-nav-mobile__list{
list-style: none; margin: 0; padding: 8px 0;
font-family: var(--gk-font-ui); font-weight: 500;
}
.gk-nav-mobile__list a{
display: block; padding: 12px 28px; text-decoration: none; font-size: 18px;
}
.gk-nav-mobile__list a.is-active{ font-weight: 600; }
/* Open state — JS toggles `.gk-nav-open` on via assets/js/site.js.
(We used to key off `.gk-nav[aria-expanded="true"] + .gk-nav-mobile`, but
those two elements aren't adjacent siblings — .gk-nav is nested inside
.gk-header__bar while .gk-nav-mobile is its uncle — so the rule never
matched and the drawer stayed hidden.) */
.gk-nav-open .gk-nav-mobile{ display: block; }
@media (max-width: 800px){
.gk-nav .gk-nav__list { display: none; }
.gk-burger { display: inline-flex; }
}
/* ── Buttons / pills ─────────────────────────────────────────────────────── */
.gk-pill{
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px;
border-radius: 999px;
background: var(--gk-mint-deep);
color: var(--gk-ink);
font-family: var(--gk-font-ui);
font-weight: 500;
font-size: 14px;
border: 0;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: transform .12s ease, background .15s ease;
}
.gk-pill:hover { transform: translateY(-1px); }
.gk-pill--yellow { background: var(--gk-yellow); }
.gk-pill--yellow-deep { background: var(--gk-yellow-deep); }
.gk-pill--mint { background: var(--gk-mint); }
.gk-pill--mint-deep { background: var(--gk-mint-deep); }
.gk-pill--ink { background: var(--gk-ink); color: var(--gk-paper); }
.gk-pill--paper { background: var(--gk-paper); }
.gk-pill--ghost { background: transparent; border: 1px solid var(--gk-ink); }
.gk-btn{
padding: 10px 20px;
font-weight: 600;
}
/* ── Image placeholder (replace with real ![]()
) ─────────────────────────── */
.gk-img{
position: relative;
background: #d6d6d6;
border-radius: var(--gk-radius);
overflow: hidden;
color: #555;
}
.gk-img::before, .gk-img::after{
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top right, transparent calc(50% - .6px), #bfbfbf 50%, transparent calc(50% + .6px));
}
.gk-img::after{
background: linear-gradient(to top left, transparent calc(50% - .6px), #bfbfbf 50%, transparent calc(50% + .6px));
}
.gk-img__label{
position: absolute; left: 10px; bottom: 10px;
background: rgba(255,255,255,.9); color: #444;
font-family: var(--gk-font-body); font-size: 10px;
padding: 2px 7px; border-radius: 4px;
letter-spacing: .04em; text-transform: uppercase;
}
.gk-img--4x3 { aspect-ratio: 4 / 3; }
.gk-img--4x5 { aspect-ratio: 4 / 5; }
.gk-img--1x1 { aspect-ratio: 1 / 1; }
/* Real ![]()
tags don't show the crossed-diagonals — kill the pseudo-elements
and make the image fill its (aspect-ratio'd) box. */
img.gk-img::before, img.gk-img::after { content: none; }
img.gk-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ── Cards ───────────────────────────────────────────────────────────────── */
.gk-card{
background: var(--gk-paper);
border-radius: var(--gk-radius);
overflow: hidden;
}
.gk-card--yellow { background: var(--gk-yellow); }
.gk-card--yellow-deep { background: var(--gk-yellow-deep); }
.gk-card--mint { background: var(--gk-mint); }
.gk-card--mint-deep { background: var(--gk-mint-deep); }
.gk-card--paper { background: var(--gk-paper); }
.gk-card--shadow { box-shadow: 0 6px 24px rgba(0,0,0,.06); }
/* Colour variants shared by the bespoke card blocks. Every card-style block
(info_card, construction_card, quote_card, workshop_card, plus the generic
.gk-card used by praktisch/booking) accepts mint | yellow | paper so a card
can be recoloured to sit on any band. */
.gk-info-card.gk-info-card--mint,
.gk-construction-card.gk-construction-card--mint { background: var(--gk-mint); }
.gk-info-card.gk-info-card--mint-deep,
.gk-construction-card.gk-construction-card--mint-deep { background: var(--gk-mint-deep); }
.gk-info-card.gk-info-card--yellow,
.gk-construction-card.gk-construction-card--yellow { background: var(--gk-yellow); }
.gk-info-card.gk-info-card--yellow-deep,
.gk-construction-card.gk-construction-card--yellow-deep { background: var(--gk-yellow-deep); }
.gk-info-card.gk-info-card--paper,
.gk-construction-card.gk-construction-card--paper { background: var(--gk-paper); }
/* Quote card sits on a deep-mint by default; an explicit colour wins via the
compound selector (higher specificity than the .gk-workshop--quote base). */
.gk-workshop--quote.gk-workshop--mint { background: var(--gk-mint); }
.gk-workshop--quote.gk-workshop--mint-deep { background: var(--gk-mint-deep); }
.gk-workshop--quote.gk-workshop--yellow { background: var(--gk-yellow); }
.gk-workshop--quote.gk-workshop--yellow-deep { background: var(--gk-yellow-deep); }
.gk-workshop--quote.gk-workshop--paper { background: var(--gk-paper); }
/* ── Hero (homepage) ─────────────────────────────────────────────────────── */
.gk-hero{
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 36px;
align-items: start;
}
.gk-hero__title{
font-family: var(--gk-font-display);
font-weight: 600;
font-size: 40px;
line-height: 1.02;
margin: 0 0 26px;
}
.gk-hero__kicker{
font-family: var(--gk-font-ui);
font-size: 32px;
font-weight: 300;
margin: 0 0 -5px;
}
.gk-hero__lead{
font-family: var(--gk-font-ui);
font-size: 17px;
line-height: 1.65;
margin: 0 0 22px;
max-width: 480px;
}
.gk-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.gk-hero__media { position: relative; }
.gk-hero__media img,
.gk-hero__media .gk-img{
border-radius: var(--gk-radius);
aspect-ratio: 4 / 4;
}
/* When a construction card is present: stack image + card as a column.
Image gets top-only radius; card gets bottom-only radius, sits flush. */
.gk-hero__media:has(.gk-construction-card){
display: flex;
flex-direction: column;
}
.gk-hero__media:has(.gk-construction-card) img,
.gk-hero__media:has(.gk-construction-card) .gk-img{
border-radius: var(--gk-radius) var(--gk-radius) 0 0;
aspect-ratio: auto;
flex: 1;
}
.gk-hero__media .gk-construction-card{
position: static;
border-radius: 0 0 var(--gk-radius) var(--gk-radius);
box-shadow: none;
}
.gk-construction-card{
position: absolute;
left: 0; right: 0; bottom: -44px;
background: var(--gk-paper);
border-radius: var(--gk-radius);
padding: 22px;
box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.gk-construction-card--standalone{
position: static; box-shadow: none;
}
.gk-construction-card h3 { font-family: var(--gk-font-ui); font-weight: 600; font-size: 22px; margin-bottom: 6px; }
.gk-construction-card p { font-size: 15px; line-height: 1.55; margin: 0; }
/* ── Info trio (Voor wie / Wat / Bereikbaarheid) ─────────────────────────── */
.gk-info-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
/* Explicit even though it's the grid default — guards against future
refactors that might switch this to `align-items: start` for some
reason and silently introduce ragged-bottom cards again. */
align-items: stretch;
}
.gk-info-card{
background: var(--gk-yellow);
border-radius: var(--gk-radius);
padding: 26px;
/* Equal-height cards regardless of body length.
`height: 100%` makes the card fill its grid cell — works even outside
a stretching grid (e.g. inside a flexbox row, a CSS-columns layout, or
a containing block that's been reset to `align-items: start`).
`display: flex; flex-direction: column` lets the body push the
fixed-height title to the top and absorb extra space itself. */
height: 100%;
display: flex;
flex-direction: column;
}
.gk-info-card__title{
font-family: var(--gk-font-ui);
font-weight: 600;
font-size: 22px;
margin: 0 0 8px;
}
.gk-info-card p { margin: 0; font-size: 15px; line-height: 1.55; }
/* ── Feature (title + image + text, image left or right) ──────────────────── */
.gk-feature{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
/* image_align: right → push the media after the text */
.gk-feature--right .gk-feature__media{ order: 2; }
.gk-feature__img{
aspect-ratio: 1 / 1;
width: 100%;
border-radius: var(--gk-radius);
}
.gk-feature__title{
font-family: var(--gk-font-ui);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
font-size: clamp(20px, 2vw, 24px);
margin: 0 0 14px;
}
.gk-feature__body{ font-size: 17px; line-height: 1.5; }
.gk-feature__body p{ margin: 0 0 1em; }
.gk-feature__body p:last-child{ margin-bottom: 0; }
@media (max-width: 700px){
.gk-feature{ grid-template-columns: 1fr; gap: 24px; }
.gk-feature--right .gk-feature__media{ order: 0; }
}
/* ── Section heading ─────────────────────────────────────────────────────── */
.gk-section-head{ margin-bottom: 28px; }
.gk-section-head__kicker{
display: block;
font-family: var(--gk-font-body); font-weight: 500;
letter-spacing: .04em; text-transform: uppercase; font-size: 12px;
color: var(--gk-dim); margin-bottom: 4px;
}
.gk-section-head__title{
font-family: var(--gk-font-display);
font-weight: 600;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.02;
margin: 0 0 10px;
}
.gk-section-head__lead{
font-family: var(--gk-font-body);
font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; margin: 0; max-width: 580px;
}
/* ── Workshop grid + card ────────────────────────────────────────────────── */
.gk-workshop-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.gk-workshop{
background: var(--gk-mint);
border-radius: 20px;
overflow: hidden;
/* height:100% makes every card fill its grid cell so cards in a row match
the tallest. The image and body each take half (flex 1 1 50%), and the
body's foot is pinned to the bottom via margin-top:auto. */
height: 100%;
min-height: 440px;
display: flex;
flex-direction: column;
}
.gk-workshop--mint { background: var(--gk-mint); }
.gk-workshop--mint-deep { background: var(--gk-mint-deep); }
.gk-workshop--yellow { background: var(--gk-yellow); }
.gk-workshop--yellow-deep { background: var(--gk-yellow-deep); }
.gk-workshop--paper { background: var(--gk-paper); }
.gk-workshop--quote { background: var(--gk-mint-deep); padding: 24px; min-height: 380px;
display: flex; flex-direction: column; justify-content: space-between; }
/* Top half: the image, full-bleed, with the tags overlaid top-left.
A fixed aspect-ratio keeps every card's image the same height regardless
of how much body copy sits below it. */
.gk-workshop__media{
position: relative;
flex: 0 0 auto;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.gk-workshop__media .gk-img,
.gk-workshop__media img{
position: absolute;
inset: 0;
width: 100%; height: 100%;
border-radius: 0;
object-fit: cover;
}
.gk-workshop__meta{
position: absolute; top: 14px; left: 14px; right: 14px;
display: flex; gap: 8px; flex-wrap: wrap;
}
/* Bottom half: title, description, button. */
.gk-workshop__body{
flex: 1 1 auto;
padding: 24px;
display: flex;
flex-direction: column;
}
.gk-workshop__title{
font-family: var(--gk-font-display);
font-weight: 600;
font-size: 24px;
line-height: 1.05;
margin: 0 0 10px;
}
.gk-workshop__lead{ font-size: 15px; line-height: 1.5; margin: 0; }
.gk-workshop__foot{ margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 12px; }
.gk-workshop__quote{
font-family: var(--gk-font-ui);
font-weight: 300; font-size: 22px; line-height: 1.3; margin: 0;
}
.gk-workshop__circle{
width: 38px; height: 38px; border-radius: 999px; background: var(--gk-paper);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--gk-font-ui); font-weight: 600; font-size: 18px;
transition: transform .15s ease, background .15s ease;
}
/* Quote card as a link — strip the default anchor look, keep the card layout,
and let the whole surface react on hover (the › circle is the affordance). */
.gk-workshop--quote-link{
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.gk-workshop--quote-link:hover{
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.gk-workshop--quote-link:hover .gk-workshop__circle{
transform: translateX(3px);
background: var(--gk-yellow);
}
.gk-workshop--quote-link:focus-visible{
outline: 2px solid var(--gk-ink);
outline-offset: 2px;
}
/* ── Eigen groep band ────────────────────────────────────────────────────── */
.gk-group{ text-align: center; }
.gk-band:has(.gk-group),
.gk-band:has(.gk-newsletter) { padding-top: 34px; padding-bottom: 34px; }
.gk-group h2 {
max-width: 700px; margin: 0 auto 12px;
}
.gk-group p { font-family: var(--gk-font-display); font-style: italic; font-size: 22px; max-width: 800px; margin: 0 auto 22px; line-height: 1.6; }
.gk-group:not(:has(h2)) p { margin-top: 22px; }
/* ── Footer ──────────────────────────────────────────────────────────────── */
.gk-footer{
background: var(--gk-yellow);
padding: 48px 0;
}
.gk-footer__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.gk-footer__col h5{
font-family: var(--gk-font-body); font-weight: 500;
letter-spacing: .04em; text-transform: uppercase; font-size: 12px;
margin: 0 0 10px;
}
.gk-footer__col p, .gk-footer__col a { margin: 0; font-size: 14px; line-height: 1.55; }
.gk-footer__link { display: block; }
.gk-footer__legal a:not(:last-child)::after { content: ' · '; }
.gk-footer__col--end { text-align: right; font-size: 12px; }
/* ── Workshops list page ─────────────────────────────────────────────────── */
.gk-filter-bar{
margin-top: 26px;
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.gk-filter-bar__spacer { flex: 1; }
.gk-list-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
/* ── Workshop detail ─────────────────────────────────────────────────────── */
.gk-breadcrumb{
font-family: var(--gk-font-body); font-size: 13px; color: var(--gk-dim);
padding: 14px 0;
}
.gk-breadcrumb a { text-decoration: none; }
.gk-breadcrumb a:hover { text-decoration: underline; }
.gk-breadcrumb__sep { margin: 0 8px; }
/* Separator between consecutive crumbs (children render / directly). */
.gk-breadcrumb > :not(:last-child)::after { content: '·'; margin: 0 8px; color: var(--gk-dim); }
.gk-breadcrumb__current { color: var(--gk-ink); }
.gk-detail-hero{
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 36px;
align-items: end;
}
.gk-detail-hero__media{
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
height: 360px;
}
.gk-detail-hero__media > :nth-child(1) { grid-row: span 2; }
.gk-detail-hero__media .gk-img { height: 100%; aspect-ratio: auto; }
.gk-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gk-detail-title{
font-family: var(--gk-font-display);
font-weight: 600;
font-size: 40px;
margin: 0 0 26px; line-height: 1.02;
}
.gk-detail-lead { font-family: var(--gk-font-ui); font-size: 17px; line-height: 1.65; margin: 0 0 22px; max-width: 480px; }
.gk-detail-body{
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 32px;
}
.gk-detail-body h2{
margin: 0 0 10px;
}
.gk-detail-body h3{
font-family: var(--gk-font-display);
font-weight: 600; font-size: 22px;
margin: 0 0 8px;
}
.gk-detail-body p, .gk-detail-body ul { line-height: 1.65; }
.gk-detail-body ul { padding-left: 18px; margin: 0; }
.gk-booking{ padding: 24px; }
.gk-booking h3{
font-family: var(--gk-font-display); font-weight: 600; font-size: 24px; margin: 0 0 10px;
}
.gk-booking__row{
display: grid;
grid-template-columns: 1fr 1fr 100px;
gap: 8px;
padding: 14px 0;
align-items: center;
border-top: 1px dashed rgba(20,24,26,.2);
}
.gk-booking__row:first-of-type { border-top: 1px solid rgba(20,24,26,.18); }
.gk-booking__date{ font-family: var(--gk-font-display); font-weight: 600; font-size: 18px; }
.gk-booking__time, .gk-booking__spots{
font-family: var(--gk-font-body); font-weight: 500;
letter-spacing: .04em; text-transform: uppercase; font-size: 12px; color: var(--gk-dim);
}
.gk-booking__spots--full { color: #c3552e; }
.gk-praktisch { padding: 22px; }
.gk-praktisch h4 { font-family: var(--gk-font-ui); font-weight: 600; font-size: 17px; margin: 0 0 6px; }
.gk-praktisch ul { padding-left: 18px; margin: 0; font-size: 14px; line-height: 1.7; }
/* ── Related grid ────────────────────────────────────────────────────────── */
.gk-related{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: stretch;
}
.gk-related__card { padding: 16px; height: 100%; display: flex; flex-direction: column; }
.gk-related__card .gk-img { aspect-ratio: 4 / 3; border-radius: 10px; margin-bottom: 10px; }
.gk-related__card .meta { display: flex; gap: 6px; margin-bottom: 8px; }
.gk-related__card .title { font-family: var(--gk-font-display); font-weight: 600; font-size: 22px; margin: 0; }
/* ── "Onder constructie" badge ───────────────────────────────────────────── */
.gk-bouw-badge{
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: var(--gk-paper);
border-radius: 999px;
font-family: var(--gk-font-ui);
font-weight: 500;
font-size: 13px;
}
.gk-bouw-badge::before{
content: ""; width: 8px; height: 8px;
background: var(--gk-yellow); border-radius: 999px;
}
.gk-bouw-badge--mint{ background: var(--gk-mint); }
/* ── Forms ───────────────────────────────────────────────────────────────── */
/* All form-control classes live here. The Twig block `blocks/form.html.twig`
composes them from a `fields` array; you can also write the markup by hand —
classes are the source of truth, not the block. Inputs sit on white inside
any band (mint/yellow/paper) so contrast stays predictable. */
.gk-form{
display: grid;
gap: 18px;
font-family: var(--gk-font-body);
color: var(--gk-ink);
}
.gk-form--card{
background: var(--gk-paper);
border-radius: var(--gk-radius);
padding: 28px;
box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
/* Row: label + control + help/error. */
.gk-field{ display: grid; gap: 6px; min-width: 0; }
.gk-field--inline{
grid-template-columns: minmax(140px, max-content) 1fr;
align-items: center;
gap: 14px;
}
.gk-field--inline > .gk-help,
.gk-field--inline > .gk-error{ grid-column: 2; }
/* Grid of rows — drop two/three fields side by side. */
.gk-form__grid{
display: grid; gap: 18px; grid-template-columns: repeat(12, 1fr);
/* Top-align fields so a field WITHOUT help text in one column doesn't get
vertically stretched to match a neighbour WITH help text in the other —
which used to puff the inner input-group from 44 → 55.5 px. */
align-items: start;
}
.gk-form__grid > .gk-field{ grid-column: span 12; }
.gk-form__grid > .gk-field--col6{ grid-column: span 6; }
.gk-form__grid > .gk-field--col4{ grid-column: span 4; }
.gk-form__grid > .gk-field--col3{ grid-column: span 3; }
/* Label / help / error */
.gk-label{
font-family: var(--gk-font-ui);
font-weight: 500;
font-size: 14px;
line-height: 1.3;
color: var(--gk-ink);
}
.gk-label__req{ color: #c3552e; margin-left: 2px; }
.gk-label__hint{
font-family: var(--gk-font-body);
font-weight: 400;
font-size: 12px;
color: var(--gk-dim);
margin-left: 6px;
}
.gk-help{
font-size: 12px;
line-height: 1.45;
color: var(--gk-dim);
}
.gk-error{
font-size: 12px;
line-height: 1.45;
color: #c3552e;
}
/* Base control — shared by text inputs, textarea, native select. */
.gk-input{
appearance: none;
-webkit-appearance: none;
width: 100%;
min-height: 44px;
padding: 10px 14px;
background: var(--gk-paper);
border: 1px solid var(--gk-faint);
border-radius: 10px;
font-family: var(--gk-font-body);
font-size: 15px;
line-height: 1.4;
color: var(--gk-ink);
transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.gk-input::placeholder{ color: #a4a8aa; }
.gk-input:hover{ border-color: #c6cbce; }
.gk-input:focus,
.gk-input:focus-visible{
outline: none;
border-color: var(--gk-ink);
box-shadow: 0 0 0 3px var(--gk-mint);
}
.gk-input:disabled,
.gk-input[aria-disabled="true"]{
background: #f3f3f0;
color: var(--gk-dim);
cursor: not-allowed;
}
.gk-input[aria-invalid="true"],
.gk-field--invalid .gk-input{
border-color: #c3552e;
box-shadow: 0 0 0 3px rgba(195,85,46,.15);
}
textarea.gk-input{ min-height: 120px; resize: vertical; padding-top: 12px; }
/* Native select with custom chevron — uses the .gk-input base + a wrapper for the icon. */
.gk-select{ position: relative; }
.gk-select select.gk-input{
padding-right: 40px;
background-image:
linear-gradient(45deg, transparent 50%, var(--gk-ink) 50%),
linear-gradient(135deg, var(--gk-ink) 50%, transparent 50%);
background-position:
right 18px top 50%,
right 13px top 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.gk-select select.gk-input::-ms-expand{ display: none; }
/* Native