/* Industricta — paste into Elementor > Site Settings > Custom CSS, or better, enqueue from the child theme. Load ONCE, not per page. */ /* ========================================================================= INDUSTRICTA — mockup stylesheet (Rev B) Dat Design Lab, 2026-09 Design tokens follow the Industricta style sheet Rev A, with the H1 face changed from Jost to Satoshi at the client's request. PRODUCTION NOTE: this mockup loads Satoshi from Fontshare and IBM Plex from Google Fonts via CDN. On the live WordPress site both must be SELF-HOSTED (GDPR — no third-party font call from a Polish site). ========================================================================= */ /* ---------- 1. Brand constants (never change with theme) ---------- */ :root{ --signal:#F97900; /* sampled from the client artwork */ --signal-deep:#D96600; --signal-dim:rgba(249,121,0,.14); --ink:#0B0B0C; --ink-2:#14161A; --ink-3:#1F2328; --steel:#5C6169; --line:#C9CDD2; --concrete:#E6E8EA; --paper:#F4F5F6; --white:#FFFFFF; /* 8px spacing module */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --container:1320px; --gutter:24px; --font-display:"Satoshi","Inter",system-ui,sans-serif; --font-body:"IBM Plex Sans",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace; --ease:cubic-bezier(.2,.6,.2,1); } /* ---------- 2. Theme tokens ---------- */ /* Light theme (default) */ :root{ --bg:var(--paper); --surface:var(--white); --surface-2:var(--concrete); --fg:var(--ink); --fg-2:#3A3E44; --fg-muted:var(--steel); --border:var(--line); --border-strong:#AEB4BB; --accent-text:var(--signal-deep); --nav-bg:rgba(244,245,246,.88); } /* Dark theme */ html[data-theme="dark"]{ --bg:var(--ink); --surface:var(--ink-2); --surface-2:var(--ink-3); --fg:#F2F3F4; --fg-2:#C7CBD0; --fg-muted:#8A9199; --border:#2C3137; --border-strong:#3D444C; --accent-text:var(--signal); --nav-bg:rgba(11,11,12,.86); } /* A band that is dark regardless of the page theme (hero, CTA, footer). In light mode this is the contrast section; in dark mode it steps up to the surface colour so bands stay distinguishable. */ .band--ink{ --bg:var(--ink); --surface:var(--ink-2); --surface-2:var(--ink-3); --fg:#F2F3F4; --fg-2:#C7CBD0; --fg-muted:#8A9199; --border:#2C3137; --border-strong:#3D444C; --accent-text:var(--signal); background:var(--bg); color:var(--fg); } html[data-theme="dark"] .band--ink{ --bg:var(--ink-2); --surface:var(--ink-3); } /* ---------- 3. Reset ---------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;height:auto;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;} ul{margin:0;padding:0;list-style:none;} hr{border:0;border-top:1px solid var(--border);margin:0;} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important;} } /* ---------- 4. Typography ---------- */ h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; color:var(--fg); } h1{ font-size:clamp(2.15rem,6vw,4.6rem); line-height:.98; letter-spacing:-.035em; } @media (min-width:768px){ h1{line-height:.96;} } h2{ font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.05; letter-spacing:-.025em; } h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.015em;} h4{font-size:1rem;line-height:1.35;letter-spacing:-.01em;} p{margin:0 0 1em;} p:last-child{margin-bottom:0;} .eyebrow{ font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-text); margin:0 0 var(--s2); display:block; } .lead{ font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.6; color:var(--fg-2); max-width:62ch; } .muted{color:var(--fg-muted);} .measure{max-width:66ch;} .mono{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em;} /* Placeholder copy marker — visible only when ?review=1 is on the URL */ html[data-review="1"] [data-todo]{ background:var(--signal-dim); box-shadow:inset 0 -1px 0 var(--signal); } /* ---------- 5. Layout ---------- */ .wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } @media (min-width:768px){ .wrap{padding-inline:40px;} } section{background:var(--bg);color:var(--fg);} .band{padding-block:var(--s6);} @media (min-width:768px){ .band{padding-block:var(--s7);} } .band--tight{padding-block:var(--s5);} .band--surface{background:var(--surface);} .band--alt{background:var(--surface-2);} .grid{display:grid;gap:var(--s3);} @media (min-width:768px){ .g-2{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(3,1fr);} .g-4{grid-template-columns:repeat(2,1fr);} } @media (min-width:1024px){ .g-4{grid-template-columns:repeat(4,1fr);} } .split{display:grid;gap:var(--s5);align-items:start;} @media (min-width:900px){ .split{grid-template-columns:1.15fr .85fr;gap:var(--s6);} .split--even{grid-template-columns:1fr 1fr;} .split--rev > :first-child{order:2;} } /* Section head with the 2px orange rule */ .sec-head{margin-bottom:var(--s5);max-width:70ch;} .sec-head h2{position:relative;padding-top:var(--s3);} .sec-head h2::before{ content:"";position:absolute;top:0;left:0; width:56px;height:2px;background:var(--signal); } .sec-head p{margin-top:var(--s2);color:var(--fg-muted);max-width:62ch;} /* ---------- 6. Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:48px;padding:0 26px; font-family:var(--font-display);font-weight:700;font-size:.92rem; letter-spacing:-.01em; border:1px solid transparent;border-radius:0; transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease); white-space:nowrap; } .btn--primary{background:var(--signal);color:#0B0B0C;} .btn--primary:hover{background:var(--signal-deep);color:#fff;} .btn--solid{background:var(--fg);color:var(--bg);} .btn--solid:hover{background:var(--signal);color:#0B0B0C;} .btn--ghost{border-color:var(--border-strong);color:var(--fg);} .btn--ghost:hover{border-color:var(--signal);color:var(--accent-text);} .btn--sm{min-height:42px;padding:0 24px;font-size:.85rem;line-height:1;} .arrow-link{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-display);font-weight:700;font-size:.92rem; color:var(--accent-text); } .arrow-link span{transition:transform .16s var(--ease);display:inline-block;} .arrow-link:hover span{transform:translateX(4px);} /* ---------- 7. Header / nav ---------- */ .hdr{ position:sticky;top:0;z-index:60; background:var(--nav-bg); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); } .hdr__in{display:flex;align-items:center;gap:var(--s3);min-height:72px;} .nav .btn,.nav__tel{flex:0 0 auto;} .logo{display:flex;align-items:center;flex:0 0 auto;} .logo img{height:22px;width:auto;} html[data-theme="dark"] .logo img.logo--dark, .logo img.logo--dark{display:none;} html[data-theme="dark"] .logo img.logo--dark{display:block;} html[data-theme="dark"] .logo img.logo--light{display:none;} .nav{display:none;margin-left:auto;align-items:center;gap:var(--s3);} @media (min-width:1080px){ .nav{display:flex;} } /* must not capture the CTA button or the phone link: both carry their own type and padding, and `.nav a` outranks a single class selector. */ .nav a:not(.btn):not(.nav__tel){ font-family:var(--font-display);font-weight:500;font-size:.92rem; letter-spacing:-.01em;color:var(--fg-2); padding:6px 0;position:relative; transition:color .16s var(--ease); } .nav a:not(.btn):not(.nav__tel):hover{color:var(--fg);} .nav a:not(.btn):not(.nav__tel)[aria-current="page"]{color:var(--fg);} .nav a:not(.btn):not(.nav__tel)[aria-current="page"]::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--signal); } .nav__tel{ font-family:var(--font-mono);font-size:.85rem;font-weight:500; color:var(--accent-text);letter-spacing:.01em; } .burger{ display:flex;margin-left:auto;align-items:center;justify-content:center; width:46px;height:46px;border:1px solid var(--border); } @media (min-width:1080px){ .burger{display:none;} } .burger i{display:block;width:20px;height:2px;background:var(--fg);position:relative;} .burger i::before,.burger i::after{ content:"";position:absolute;left:0;width:20px;height:2px;background:var(--fg); } .burger i::before{top:-6px;} .burger i::after{top:6px;} @media (max-width:540px){ .logo img{height:15px;} } .mob{ display:none;border-top:1px solid var(--border); background:var(--bg);padding:var(--s2) 0 var(--s4); } .mob.is-open{display:block;} @media (min-width:1080px){ .mob{display:none!important;} } .mob a{ display:block;padding:14px 0;border-bottom:1px solid var(--border); font-family:var(--font-display);font-weight:500;font-size:1.05rem; } .mob .mob__sub a{padding-left:18px;font-size:.92rem;color:var(--fg-muted);font-weight:400;} .mob .btn{width:100%;margin-top:var(--s3);} /* ---------- 8. Hero ---------- */ .hero{position:relative;overflow:hidden;padding-block:var(--s7) var(--s6);} @media (min-width:768px){ .hero{padding-block:var(--s8) var(--s7);} } .hero__media{position:absolute;inset:0;z-index:0;} .hero__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.05);} .hero__media::after{ content:"";position:absolute;inset:0; background: linear-gradient(92deg,rgba(11,11,12,.96) 0%,rgba(11,11,12,.9) 44%,rgba(11,11,12,.58) 100%), linear-gradient(to bottom,rgba(11,11,12,.5),rgba(11,11,12,0) 45%); } .hero__in{position:relative;z-index:1;} .hero h1{max-width:17ch;} .hero__h1{font-size:clamp(1.95rem,4.6vw,3.5rem);letter-spacing:-.03em;max-width:19ch;} .hero .lead{margin-top:var(--s3);} .hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);} .hero__meta{ display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4); margin-top:var(--s5);padding-top:var(--s3); border-top:1px solid var(--border); font-family:var(--font-mono);font-size:.76rem;letter-spacing:.06em; text-transform:uppercase;color:var(--fg-muted); } /* ---------- 9. Stat strip ---------- */ .stats{display:grid;gap:1px;background:var(--border);border-block:1px solid var(--border);} @media (min-width:600px){ .stats{grid-template-columns:repeat(2,1fr);} } @media (min-width:1000px){ .stats{grid-template-columns:repeat(4,1fr);} } .stat{background:var(--bg);padding:var(--s4) var(--s3);} .stat b{ display:block;font-family:var(--font-display);font-weight:700; font-size:2.4rem;line-height:1;letter-spacing:-.03em; } .stat span{ display:block;margin-top:10px;font-family:var(--font-mono); font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted); } /* ---------- 10. Cards ---------- */ .cards{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);} @media (min-width:700px){ .cards--2{grid-template-columns:repeat(2,1fr);} } @media (min-width:900px){ .cards--3{grid-template-columns:repeat(3,1fr);} } .card{ background:var(--surface);padding:var(--s4); display:flex;flex-direction:column;gap:var(--s2); position:relative; transition:background .16s var(--ease); } a.card:hover{background:var(--bg);} a.card::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--signal);transform:scaleX(0);transform-origin:left; transition:transform .2s var(--ease); } a.card:hover::after{transform:scaleX(1);} .card__num{ font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em; color:var(--fg-muted); } .card h3{margin-top:4px;} .card p{font-size:.95rem;color:var(--fg-muted);margin:0;} .card__more{margin-top:auto;padding-top:var(--s2);} /* Tile (large category tile, mfastudio-style) */ .tiles{display:grid;gap:var(--s2);} @media (min-width:700px){ .tiles{grid-template-columns:repeat(2,1fr);} } .tile{ position:relative;display:block;overflow:hidden; aspect-ratio:16/10;background:var(--surface-2); } .tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5);transition:transform .4s var(--ease),filter .3s var(--ease);} .tile:hover img{transform:scale(1.04);filter:grayscale(0);} .tile__body{ position:absolute;inset:auto 0 0 0;z-index:1; padding:var(--s4); background:linear-gradient(to top,rgba(11,11,12,.92),rgba(11,11,12,0)); color:#fff; } .tile__body h3{color:#fff;font-size:1.35rem;} .tile__body p{margin:6px 0 0;font-family:var(--font-mono);font-size:.74rem; letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72);} /* Project card */ .proj{display:block;} .proj__img{aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);} .proj__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55);transition:filter .3s var(--ease),transform .4s var(--ease);} .proj:hover .proj__img img{filter:grayscale(0);transform:scale(1.03);} .proj h3{margin-top:var(--s2);font-size:1.08rem;} .proj dl{ display:grid;grid-template-columns:auto 1fr;gap:2px var(--s2); margin:var(--s2) 0 0;font-family:var(--font-mono);font-size:.76rem; color:var(--fg-muted); } .proj dt{letter-spacing:.08em;text-transform:uppercase;} .proj dd{margin:0;color:var(--fg-2);} /* ========================================================================== 11. Client content, v2 page blocks (added 2026-10-06) Append AFTER section 10. ========================================================================== */ /* Three-tile stat strip (was four) */ @media (min-width:600px){ .stats--3{grid-template-columns:repeat(3,1fr);} } .stat b{overflow-wrap:anywhere;} /* Usługi hub has seven cards: the last one spans the row instead of leaving two empty cells in the three-column grid. */ @media (min-width:900px){ .cards--3 > :last-child:nth-child(3n+1){grid-column:1 / -1;} } /* Running copy on service pages, O nas and Zespół */ .prose p{color:var(--fg-2);max-width:68ch;} .prose p.lead{color:var(--fg);} .prose p.muted{color:var(--fg-muted);} .prose p:last-child{margin-bottom:0;} .prose__intro{margin-top:var(--s3);font-weight:500;color:var(--fg);} .prose > .prose__intro:first-child{margin-top:0;} .prose__h{font-size:1.2rem;letter-spacing:-.015em;margin:var(--s5) 0 var(--s2);} .split > div > img{width:100%;border:1px solid var(--border);filter:grayscale(.4);} /* Two stacked links in one contact cell */ .contact-cell .big + .big{margin-top:var(--s1);} /* Footer social links */ .ftr__social{margin-top:var(--s2);} .ftr__social a{text-decoration:underline;text-underline-offset:3px;} /* Luna: bone slider on /zespol/ */ .luna__head{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;justify-content:space-between;} .luna h2{font-size:clamp(1.3rem,2.2vw,1.7rem);} .luna__lock{flex:1 1 300px;max-width:460px;} .luna__lock[hidden],.luna__details[hidden]{display:none;} .luna__lock label{ display:block;margin-bottom:10px;font-family:var(--font-mono);font-size:.74rem; letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted); } .luna__lock input[type="range"]{ -webkit-appearance:none;appearance:none;display:block;width:100%;height:46px;margin:0;padding:0; background:linear-gradient(90deg,var(--signal-dim) var(--p,0%),transparent var(--p,0%)); border:1px dashed var(--border-strong,var(--border));border-radius:0;cursor:grab; } .luna__lock input[type="range"]:active{cursor:grabbing;} .luna__lock input[type="range"]:focus-visible{outline:2px solid var(--signal);outline-offset:3px;} .luna__lock input[type="range"]::-webkit-slider-runnable-track{height:44px;background:transparent;} .luna__lock input[type="range"]::-moz-range-track{height:44px;background:transparent;} .luna__lock input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:72px;height:44px;border:1px solid var(--signal);border-radius:0; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23F97900'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Ccircle cx='7' cy='17' r='5'/%3E%3Ccircle cx='41' cy='7' r='5'/%3E%3Ccircle cx='41' cy='17' r='5'/%3E%3Crect x='7' y='8' width='34' height='8'/%3E%3C/g%3E%3C/svg%3E") center/44px auto no-repeat; } .luna__lock input[type="range"]::-moz-range-thumb{ width:72px;height:44px;border:1px solid var(--signal);border-radius:0;box-sizing:border-box; background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'%3E%3Cg fill='%23F97900'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Ccircle cx='7' cy='17' r='5'/%3E%3Ccircle cx='41' cy='7' r='5'/%3E%3Ccircle cx='41' cy='17' r='5'/%3E%3Crect x='7' y='8' width='34' height='8'/%3E%3C/g%3E%3C/svg%3E") center/44px auto no-repeat; } .luna__lock input[type="range"]:disabled{cursor:default;border-style:solid;border-color:var(--signal);} .luna__details{ display:grid;gap:var(--s4);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--border); } @media (min-width:700px){ .luna__details{grid-template-columns:240px 1fr;align-items:start;gap:var(--s5);} } .luna__photo{aspect-ratio:1;max-width:240px;border:1px solid var(--border);overflow:hidden;background:var(--surface);} .luna__photo img{width:100%;height:100%;object-fit:cover;} @keyframes luna-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} .luna.is-open .luna__details{animation:luna-in .35s var(--ease);} @media (prefers-reduced-motion:reduce){ .luna.is-open .luna__details{animation:none;} } /* ---------- 11. Process / numbered steps ---------- */ .steps{display:grid;gap:0;border-top:1px solid var(--border);} .step{ display:grid;gap:var(--s1) var(--s4);padding-block:var(--s4); border-bottom:1px solid var(--border); } @media (min-width:768px){ .step{grid-template-columns:88px 1fr 1.1fr;align-items:start;} } .step__n{ font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em; color:var(--signal);padding-top:4px; } .step p{color:var(--fg-muted);font-size:.97rem;margin:0;} /* ---------- 12. Spec list ---------- */ .speclist{border-top:1px solid var(--border);} .speclist li{ display:flex;gap:var(--s2);padding:14px 0; border-bottom:1px solid var(--border); font-size:.97rem;color:var(--fg-2); } .speclist li::before{ content:"—";color:var(--signal);font-family:var(--font-mono);flex:0 0 auto; } /* ---------- 13. Person / about ---------- */ .person__photo{ border:1px solid var(--border);background:var(--surface-2); aspect-ratio:4/5;overflow:hidden; } .person__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4);} .person__role{ font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em; text-transform:uppercase;color:var(--accent-text);margin-top:6px; } .person__contact{ margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border); display:grid;gap:6px;font-family:var(--font-mono);font-size:.86rem; } .person__contact a:hover{color:var(--accent-text);} /* ---------- 14. Contact blocks ---------- */ .contact-grid{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);} @media (min-width:700px){ .contact-grid{grid-template-columns:repeat(2,1fr);} } .contact-cell{background:var(--surface);padding:var(--s4);} .contact-cell .eyebrow{margin-bottom:var(--s1);} .contact-cell .big{ font-family:var(--font-display);font-weight:700; font-size:clamp(1.3rem,2.6vw,1.8rem);letter-spacing:-.02em; display:inline-block;word-break:break-word; } .contact-cell .big:hover{color:var(--accent-text);} .contact-cell p{margin:var(--s1) 0 0;font-size:.92rem;color:var(--fg-muted);} /* ---------- 15. CTA band ---------- */ .cta__in{display:grid;gap:var(--s4);align-items:center;} @media (min-width:900px){ .cta__in{grid-template-columns:1.3fr auto;} } .cta h2{max-width:20ch;} .cta__btns{display:flex;flex-wrap:wrap;gap:var(--s2);} /* ---------- 16. Footer ---------- */ .ftr{padding-block:var(--s6) var(--s4);} .ftr__top{display:grid;gap:var(--s5);} @media (min-width:900px){ .ftr__top{grid-template-columns:1.4fr 1fr 1fr 1.1fr;} } .ftr img.ftr__logo{width:240px;margin-bottom:var(--s3);} .ftr h4{ font-family:var(--font-mono);font-size:.72rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted); margin-bottom:var(--s2); } .ftr li{margin-bottom:10px;} .ftr a{font-size:.94rem;color:var(--fg-2);} .ftr a:hover{color:var(--signal);} .ftr__legal{ margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--border); display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);justify-content:space-between; font-family:var(--font-mono);font-size:.74rem;color:var(--fg-muted); } /* ---------- 17. Breadcrumb + page head ---------- */ .crumb{ font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em; text-transform:uppercase;color:var(--fg-muted); padding-top:var(--s4); } .crumb a:hover{color:var(--accent-text);} .pagehead{padding-block:var(--s5) var(--s6);} .pagehead h1{font-size:clamp(2.1rem,5vw,3.6rem);max-width:20ch;} .pagehead .lead{margin-top:var(--s3);} /* ---------- 19. Review index page ---------- */ .idx{max-width:900px;margin-inline:auto;padding-block:var(--s6);} .idx ol{counter-reset:i;border-top:1px solid var(--border);} .idx ol > li{ counter-increment:i;border-bottom:1px solid var(--border); padding:var(--s3) 0;display:grid;gap:4px var(--s3); } @media (min-width:700px){ .idx ol > li{grid-template-columns:40px 1fr 1.2fr;align-items:baseline;} } .idx ol > li::before{content:counter(i,decimal-leading-zero);font-family:var(--font-mono);font-size:.78rem;color:var(--signal);} .idx ol > li a{font-family:var(--font-display);font-weight:700;font-size:1.1rem;letter-spacing:-.02em;} .idx ol > li a:hover{color:var(--accent-text);} .idx ol > li p{margin:0;font-size:.92rem;color:var(--fg-muted);} .note{ border-left:2px solid var(--signal);padding:var(--s2) var(--s3); background:var(--surface);margin-block:var(--s3);font-size:.95rem;color:var(--fg-2); } /* ---------- 20. Specialisation cards (home) ---------- */ .card--spec{padding:var(--s5) var(--s4);gap:var(--s2);} @media (min-width:900px){ .card--spec{padding:var(--s6) var(--s5);} } .card--spec h3{font-size:clamp(1.25rem,2.1vw,1.6rem);} .card--spec .card__intro{color:var(--fg-2);font-size:1rem;} .speclist--tight{border-top:0;margin-top:var(--s1);} .speclist--tight li{padding:9px 0;font-size:.97rem;border-bottom:0;} .speclist--tight li + li{border-top:1px solid var(--border);} .rest-row{ margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--border); font-size:.94rem;color:var(--fg-muted); } .rest-row a{color:var(--fg-2);} .rest-row a:hover{color:var(--accent-text);} /* ---------- 21. Contact + footer company data ---------- */ /* Client asked for the same face as the phone number, one step up in size. */ .contact-data{ font-family:var(--font-display);font-weight:600; font-size:1.22rem;line-height:1.5;letter-spacing:-.015em; color:var(--fg);margin:0; } .ftr__data li{font-family:var(--font-display);font-weight:500;font-size:1.08rem; letter-spacing:-.01em;line-height:1.45;margin-bottom:12px;} .ftr__data a{font-size:1.08rem;} /* pull the contact grid up under the page head */ .pagehead + .band--tight{padding-top:0;} /* ============================================================ 9. Parent theme overrides and menu fixes Added 2026-09-16. Hello Elementor's base stylesheet colours the interaction states of links and buttons in its own palette: the pink burger, the indigo menu hover. The reset in section 3 sets a{color:inherit} and button{background:none}, but those are element selectors, and a:hover and button:hover are more specific, so the parent wins on every hover and active state. Keep this block at the end of the file. ============================================================ */ /* ---- links: take the interaction states back ---- */ a:hover, a:active{ color:inherit; } /* Two components get their colour from a single class and would now lose to the rule above, so they are restated one specificity step higher. Buttons need no restore: .btn--primary:hover already outranks a:hover. */ a.arrow-link:hover, a.arrow-link:active{ color:var(--accent-text); } a.nav__tel:hover, a.nav__tel:active { color:var(--accent-text); } /* ---- burger: never pink, in any state ---- */ .burger{ background:transparent; color:var(--fg); } .burger:hover, .burger:focus, .burger:active{ background:transparent; color:var(--fg); border-color:var(--border-strong); outline:none; } .burger:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; } .burger[aria-expanded="true"]{ border-color:var(--signal); } /* ---- mobile menu ---- */ .mob a:not(.btn):hover{ color:var(--signal); } /* The full-width CTA was caught by `.mob a`, which zeroed its side padding and overrode its type. Same collision that hit the desktop header button. */ .mob .btn{ display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:0 26px; border-bottom:0; font-family:var(--font-display); font-weight:700; font-size:.92rem; } /* ---- desktop nav spacing ---- */ /* 24px of gap put the phone number right up against the orange block. */ .nav__tel, .nav .btn{ margin-left:8px; } /* ========================================================================== 10. Page-body containers + image-slot placeholders (added 2026-09-16) Append AFTER section 9. Verified live on /kontakt/ before being promoted here from the page block's scoped