/* ========================================================================== Tipox — ipari műgyanta padlórendszerek Ported from the Claude Design project "Tipox Landing.dc.html" (132bf26f-4686-4b5f-9325-bc06825ad18e). Colour, type and spacing values are kept 1:1 with the design; the dc-template's inline styles are lifted into classes. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { --ink: #101214; --ink-2: #3a4046; --ink-3: #5a6067; --ink-4: #6e747a; --ink-5: #a1a6ab; --red: #d8232a; --red-hi: #bc1b22; --red-link: #a8171d; --red-soft: #f0575c; /* on dark grounds */ --dark: #0c0e10; --wash: #f4f4f2; --card-hi: #fafaf8; --line: rgba(16, 18, 20, .13); --line-soft: rgba(16, 18, 20, .09); --line-strong: rgba(16, 18, 20, .20); --line-dark: rgba(255, 255, 255, .15); --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; --gutter: clamp(22px, 5vw, 80px); --gutter-header: clamp(18px, 4vw, 64px); --maxw: 1340px; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* the header is sticky, so anchors need to clear it */ scroll-padding-top: 78px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: var(--red); text-decoration: none; } a:hover { color: var(--red-link); } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } @keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { [class*="rise"] { animation: none !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--red); color: #fff; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600; transition: top .16s ease; } .skip-link:focus { top: 0; color: #fff; } /* Language trees both live in the document; `data-lang` on paints one. */ [data-lang="hu"] .lang-en, [data-lang="en"] .lang-hu { display: none !important; } /* -------------------------------------------------------------------------- 3. Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 14px clamp(16px, 3vw, 28px); flex-wrap: wrap; min-height: 66px; padding: 11px var(--gutter-header); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid var(--line-soft); } /* Safari and Firefox without backdrop-filter would show text over content. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(255, 255, 255, .97); } /* Without the blur, the 3% that shows through the menu sheet is a crisp ghost of the hero rather than a diffuse wash. Go fully opaque instead. */ .mobile-menu { background: #fff; } } .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .brand__logo { height: 30px; width: auto; display: block; } .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(14px, 2vw, 30px); font-size: 14.5px; color: var(--ink-2); flex: 1 1 auto; min-width: 0; } .site-nav a { color: var(--ink-2); } .site-nav a:hover { color: var(--ink); } .header-tools { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } .lang-switch { display: flex; align-items: stretch; border: 1px solid rgba(16, 18, 20, .16); border-radius: 8px; overflow: hidden; font-size: 11px; letter-spacing: .08em; } .lang-switch__btn { padding: 6px 9px; background: transparent; color: var(--ink-4); border: 0; cursor: pointer; font: inherit; letter-spacing: inherit; } .lang-switch__btn:hover { color: var(--ink); } [data-lang="hu"] .lang-switch__btn[value="hu"], [data-lang="en"] .lang-switch__btn[value="en"] { background: var(--ink); color: #fff; cursor: default; } .btn-quote { padding: 10px 18px; background: var(--red); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(216, 35, 42, .34); } .btn-quote:hover { background: var(--red-hi); color: #fff; } .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 4.5px; width: 42px; height: 42px; padding: 0 10px; background: transparent; border: 1px solid rgba(16, 18, 20, .16); border-radius: 9px; cursor: pointer; } .menu-toggle:hover { background: rgba(16, 18, 20, .04); } .menu-toggle span { display: block; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.1px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); } .mobile-menu { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid rgba(16, 18, 20, .1); box-shadow: 0 20px 44px rgba(16, 18, 20, .12); padding: 8px var(--gutter-header) 22px; } .mobile-menu.is-open { display: flex; } /* Each row is wrapped in a .lang-* span, so the anchor is an inline child of a flex item — without display:block its vertical padding collapses and the rows pile on top of each other. */ .mobile-menu > * { display: block; } .mobile-menu a { display: block; padding: 15px 0; font-size: 17px; font-weight: 500; color: var(--ink); border-bottom: 1px solid rgba(16, 18, 20, .08); } .mobile-menu a:hover { color: var(--red); } .mobile-menu .btn-quote { margin-top: 18px; padding: 15px 20px; border-radius: 9px; font-size: 15.5px; text-align: center; border-bottom: 0; color: #fff; } /* The design swaps nav for a hamburger below 880px. */ @media (max-width: 879px) { .site-nav { display: none; } .header-tools .btn-quote { display: none; } .menu-toggle { display: flex; } } /* -------------------------------------------------------------------------- 4. Hero -------------------------------------------------------------------------- */ .hero { background: var(--dark); color: #fff; } .hero__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); align-items: stretch; } .hero__copy { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: clamp(56px, 7vw, 104px) var(--gutter); animation: riseIn .7s cubic-bezier(.2, .7, .2, 1) both; } .hero__stack { display: flex; flex-direction: column; gap: 26px; } .eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red); } .eyebrow--dark { color: var(--red-soft); } .hero h1 { margin: 0; font-size: clamp(38px, 5.2vw, 74px); line-height: .99; letter-spacing: -.028em; font-weight: 700; max-width: 15ch; text-wrap: balance; } .hero__lead { margin: 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.58; color: rgba(255, 255, 255, .72); max-width: 47ch; text-wrap: pretty; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; } .btn { padding: 14px 24px; border-radius: 9px; font-size: 15.5px; font-weight: 600; display: inline-block; } .btn--primary { background: var(--red); color: #fff; } .btn--primary:hover { background: var(--red-hi); color: #fff; } .btn--ghost { border: 1px solid rgba(255, 255, 255, .24); color: #fff; font-weight: 500; } .btn--ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; } .btn--lg { padding: 16px 30px; border-radius: 10px; font-size: 16.5px; } .hero__figure { position: relative; min-height: clamp(320px, 42vw, 560px); background: var(--dark); } .hero__photo { position: absolute; inset: 0; background-image: url('../img/ref/ref-warehouse.jpeg'); background-size: cover; background-position: 62% 50%; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(97deg, #0c0e10 0%, rgba(12, 14, 16, .62) 26%, rgba(12, 14, 16, 0) 72%); } /* Stacked layout: the gradient must fade upward, not leftward. */ @media (max-width: 939px) { .hero__scrim { background: linear-gradient(0deg, rgba(12, 14, 16, .55) 0%, rgba(12, 14, 16, 0) 60%), linear-gradient(180deg, #0c0e10 0%, rgba(12, 14, 16, 0) 34%); } } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); border-top: 1px solid rgba(255, 255, 255, .13); } .stat { padding: 26px var(--gutter); display: flex; flex-direction: column; gap: 5px; border-left: 1px solid rgba(255, 255, 255, .11); } .stat:first-child { border-left: 0; } .stat__num { font-size: 27px; font-weight: 600; letter-spacing: -.024em; } .stat__label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } /* -------------------------------------------------------------------------- 5. Section scaffolding -------------------------------------------------------------------------- */ .section { padding: clamp(72px, 9vw, 132px) var(--gutter); } .section--bound { max-width: var(--maxw); margin: 0 auto; } .section--dark { background: var(--dark); color: #fff; } .section--wash { background: var(--wash); } .section--edge { border-top: 1px solid rgba(16, 18, 20, .1); } .wrap { max-width: var(--maxw); margin: 0 auto; } .wrap--narrow { max-width: 1120px; margin: 0 auto; } .stack { display: flex; flex-direction: column; gap: 44px; } .stack--wide { gap: 48px; } .stack--tight { gap: 40px; } .section-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; } .section-head--sm { max-width: 640px; } .section-head--md { max-width: 680px; } .section-head h2 { margin: 0; font-size: clamp(28px, 3.5vw, 50px); line-height: 1.04; letter-spacing: -.026em; font-weight: 700; } .section-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; } /* -------------------------------------------------------------------------- 6. Systems grid -------------------------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .card { background: #fff; padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 10px; min-height: 186px; transition: background .16s ease; } .card:hover { background: var(--card-hi); } .card__num { font-size: 11px; letter-spacing: .14em; color: var(--ink-5); } .card h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.014em; } .card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-3); } /* -------------------------------------------------------------------------- 7. Technical data -------------------------------------------------------------------------- */ .spec { display: flex; flex-direction: column; } .spec__head, .spec__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .spec__head { gap: 24px; padding-bottom: 14px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .42); } .spec__row { gap: 8px 24px; padding: 22px 0; border-top: 1px solid var(--line-dark); } .spec__row:last-child { border-bottom: 1px solid var(--line-dark); } .spec__key { font-size: 20px; font-weight: 600; letter-spacing: -.016em; } .spec__val { font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .66); } /* -------------------------------------------------------------------------- 8. Process -------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(28px, 3vw, 44px); } .step { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--line-strong); padding-top: 20px; } .step__num { font-size: 11.5px; letter-spacing: .14em; color: var(--red); } .step h3 { margin: 0; font-size: 19.5px; font-weight: 600; letter-spacing: -.014em; } .step p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-3); } /* -------------------------------------------------------------------------- 9. References -------------------------------------------------------------------------- */ .gallery { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 24px); } .shot { margin: 0; display: flex; flex-direction: column; gap: 12px; } .shot--wide { flex: 1 1 58%; min-width: min(100%, 300px); } .shot--narrow { flex: 1 1 30%; min-width: min(100%, 240px); } .shot__img { border-radius: 12px; background-color: #e8e8e6; background-size: cover; background-position: center; } .shot__img--garage-red { aspect-ratio: 2.72; background-image: url('../img/ref/ref-garage-red.jpeg'); } .shot__img--garage-grey { aspect-ratio: 1; background-image: url('../img/ref/ref-garage-grey.jpeg'); } .shot__img--plant { aspect-ratio: 2.1; background-image: url('../img/ref/ref-plant.jpeg'); } .shot__img--texture { aspect-ratio: 2.55; background-image: url('../img/ref/ref-texture.jpeg'); } .shot figcaption { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); } /* -------------------------------------------------------------------------- 10. Contact -------------------------------------------------------------------------- */ .contact { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; } .contact h2 { margin: 0; font-size: clamp(30px, 4vw, 56px); line-height: 1.03; letter-spacing: -.028em; font-weight: 700; text-wrap: balance; } .contact__lead { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--ink-3); max-width: 52ch; text-wrap: pretty; } .contact .btn--lg { margin-top: 6px; } .contact__mail { font-size: 13px; } .contact__mail a { color: var(--ink); } .contact__mail a:hover { color: var(--red); } /* Named phone contacts, sitting under the email line in the contact block. The design is an email-only funnel, so this is an addition — kept in the same type scale so it reads as part of it rather than bolted on. */ .people { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 48px; margin-top: 2px; } .person { display: flex; flex-direction: column; gap: 5px; } .person__name { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-5); } .person__tel { font-size: 19px; font-weight: 600; letter-spacing: -.016em; color: var(--ink); white-space: nowrap; } .person__tel:hover { color: var(--red); } .ask-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; width: 100%; margin-top: 24px; text-align: left; } .ask { background: #fff; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; } .ask__num { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-5); } .ask__label { font-size: 16px; font-weight: 600; } /* -------------------------------------------------------------------------- 11. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--dark); color: #fff; padding: clamp(44px, 5vw, 64px) var(--gutter); } .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; } .footer__brand { display: flex; flex-direction: column; gap: 10px; } .footer__mark { font-size: 26px; font-weight: 700; letter-spacing: -.02em; } .footer__meta { font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .5); } .footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .footer__links a { color: rgba(255, 255, 255, .78); } .footer__links a:hover { color: #fff; } /* -------------------------------------------------------------------------- 12. Print -------------------------------------------------------------------------- */ @media print { .site-header, .menu-toggle, .mobile-menu, .btn-row, .hero__figure { display: none !important; } body, .hero, .section--dark, .site-footer { background: #fff !important; color: #000 !important; } .section { padding: 18px 0; page-break-inside: avoid; } .spec__val, .hero__lead, .footer__meta { color: #333 !important; } }