/* Service subpage layer. * * The design tokens this file works to: container 1260px / gutter 30px, * section spacing 8.125rem, the gap and radius scales, and the heading ramp * 4 / 3.25 / 2.875 / 2.375 / 2 / 1.5rem at line-height 1.2. The hero keeps the * site character: near-black ground, purple bloom, tag pill, sans + italic * serif headline pairing. * style.css owns the shared shell, header and footer; this file only adds what * the subpages need on top. */ :root { --page-max: 1260px; --page-gutter: 30px; --page-medium: 1160px; --page-narrow: 980px; --section-space: 8.125rem; --gap-2: 8px; --gap-3: 10px; --gap-4: 15px; --gap-5: 20px; --gap-6: 30px; --gap-7: 40px; --gap-9: 60px; --gap-10: 70px; --radius-xs: 5px; --radius-s: 10px; --radius-l: 20px; --surface-tint: #f8efff; --surface-plain: #ffffff; --line-tint: #dcd4e3; --gray-1: #2a222f; --gray-3: #706c6a; --gray-4: #aaa6a2; --gray-5: #c4c2c0; /* Overridden per service on */ --accent: #a941dc; --accent-soft: #d36cff; --accent-ink: #5d087f; --accent-wash: rgba(169, 65, 220, 0.12); /* --accent is tuned for fills and dark surfaces; --accent-text is the darker variant that clears 4.5:1 on both light surfaces (white and the tint). */ --accent-text: #a436da; } body[data-service="egyedi-szoftverfejlesztes"] { --accent: #a941dc; --accent-soft: #d36cff; --accent-ink: #5d087f; --accent-wash: rgba(169, 65, 220, .12); --accent-text: #a436da; } body[data-service="3d-ar-prototipus"] { --accent: #2f9fc4; --accent-soft: #5fd2f0; --accent-ink: #0c4a60; --accent-wash: rgba(47, 159, 196, .13); --accent-text: #237793; } body[data-service="eszkozkommunikacio-iot"] { --accent: #8a9a24; --accent-soft: #c4d861; --accent-ink: #3a4210; --accent-wash: rgba(138, 154, 36, .14); --accent-text: #5f6b18; } body[data-service="folyamatautomatizacio-rpa"] { --accent: #c9761f; --accent-soft: #ffa551; --accent-ink: #6b3705; --accent-wash: rgba(201, 118, 31, .13); --accent-text: #a15f19; } body[data-service="minosegbiztositas-tesztautomatizacio"] { --accent: #2f9469; --accent-soft: #57d3a0; --accent-ink: #0d4a32; --accent-wash: rgba(47, 148, 105, .13); --accent-text: #287d59; } body[data-service="termekmenedzsment-it-tanacsadas"] { --accent: #c74a86; --accent-soft: #f284b8; --accent-ink: #6a1740; --accent-wash: rgba(199, 74, 134, .13); --accent-text: #bf3b7a; } body[data-service="adatvedelem-dpo"] { --accent: #4a63c9; --accent-soft: #8ba0f5; --accent-ink: #1c2a6b; --accent-wash: rgba(74, 99, 201, .13); --accent-text: #4a63c9; } /* ---------------------------------------------------------------- layout -- */ .page-shell { width: min(var(--page-max), calc(100vw - var(--page-gutter) * 2)); margin-inline: auto; } .page-shell.is-medium { max-width: var(--page-medium); } .page-shell.is-narrow { max-width: var(--page-narrow); } .band { position: relative; padding: var(--section-space) 0; } .band.is-tight { padding: calc(var(--section-space) * .62) 0; } .band.on-tint { background: var(--surface-tint); } .band.on-plain { background: var(--surface-plain); } .band.on-dark { color: #efeaf2; background: var(--ink); } .band.on-dark h2, .band.on-dark h3 { color: #f6f2f8; } .band.on-dark p { color: var(--gray-5); } /* --------------------------------------------------------- section heads -- */ .band-head { max-width: 900px; margin-bottom: var(--gap-10); } .band-head.is-centered { max-width: 760px; margin-inline: auto; text-align: center; } .band-head .no-break { white-space: nowrap; } .band-head h2 { margin: 0; color: var(--ink); font-family: "Funnel Display", sans-serif; font-size: clamp(34px, 3.4vw, 52px); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; } .band-head .no-break { white-space: nowrap; } /* Light heading only where the band is dark. This pair was accidentally split once - the light colour ended up on a bare `.band-head h2` - which painted every section heading on every service page in the dark-band colour, leaving them nearly invisible on the white and tinted bands. */ .band.on-dark .band-head h2 { color: #f6f2f8; } .band-head p { max-width: 720px; margin: 18px 0 0; color: var(--gray-3); font-family: "Rubik", sans-serif; font-size: 18px; line-height: 1.6; } .band-head.is-centered p { margin-inline: auto; } .band.on-dark .band-head p { color: var(--gray-4); } .band-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--accent-text); font-family: "Figtree", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } .band-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; } .band-head.is-centered .band-kicker::before { display: none; } .band.on-dark .band-kicker { color: var(--accent-soft); } /* ------------------------------------------------------------------ hero -- */ .service-hero { position: relative; isolation: isolate; padding: 190px 0 96px; overflow: hidden; color: #ded9e1; background: radial-gradient(ellipse 80% 60% at 72% 12%, var(--accent-wash), transparent 62%), linear-gradient(160deg, #0d0910 0%, #130b18 46%, #09080b 100%); } .service-hero-backdrop { position: absolute; z-index: -2; inset: 0; opacity: .5; background: url("media/backdrop-grid.webp") center / cover no-repeat; } .service-hero-bloom { position: absolute; z-index: -1; top: -340px; right: 6%; width: 620px; height: 620px; border-radius: 50%; opacity: .6; pointer-events: none; background: radial-gradient(circle, #fff 0 4%, var(--accent-soft) 13%, var(--accent) 30%, transparent 66%); filter: blur(18px); } /* The hero drops a light beam into the composition from above; the accent colour is layered over the beam image with a screen blend so each service keeps its own hue. */ .service-hero-beam { position: absolute; z-index: -1; top: -230px; right: -3%; width: 620px; height: 760px; opacity: .22; pointer-events: none; background: url("media/beam-light.webp") center top / contain no-repeat; mask-image: radial-gradient(ellipse 60% 70% at 50% 34%, #000 8%, transparent 74%); mix-blend-mode: screen; } .service-hero-beam::after { content: ""; position: absolute; inset: 0; opacity: .7; background: linear-gradient(180deg, transparent 8%, var(--accent) 46%, transparent 88%); mix-blend-mode: color; } .service-hero-glyph { position: absolute; z-index: -1; right: 8%; bottom: -90px; width: 340px; height: 340px; opacity: .5; pointer-events: none; color: var(--accent-soft); } .service-hero-glyph svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: .5; fill: none; } .service-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); align-items: center; gap: clamp(36px, 5vw, 70px); } .service-hero-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #ded5e3; background: rgba(255, 255, 255, .05); font-family: "Figtree", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; } .service-hero-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 16px var(--accent-soft); } .service-hero-tag.is-spread { padding: 12px 16px; border-color: rgba(255, 255, 255, .13); color: #d6ced9; background-image: linear-gradient(270deg, rgba(145, 0, 255, .08) 5%, rgba(213, 0, 255, .09) 94%); backdrop-filter: blur(7px); font-size: 13px; letter-spacing: .02em; text-transform: none; white-space: nowrap; } .service-hero h1 { max-width: 16ch; margin: 0; color: #f4f0f6; font-family: "Figtree", sans-serif; font-size: clamp(38px, 4.3vw, 66px); font-weight: 400; letter-spacing: -.045em; line-height: 1.06; } .service-hero h1 em { display: block; color: #ece0f2; font-family: "Playfair Display", serif; font-style: italic; font-weight: 400; letter-spacing: -.03em; } .service-hero-lead { max-width: 62ch; margin: 28px 0 0; color: #a9a2ad; font-family: "Figtree", sans-serif; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6; } .service-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; } .service-hero-panel { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-l); backdrop-filter: blur(3px); background: rgba(21, 18, 22, .42); } .service-hero-panel h2 { margin: 0 0 4px; color: #cfc7d4; font-family: "Figtree", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .service-hero-panel ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .service-hero-panel li { display: flex; align-items: flex-start; gap: 11px; color: #ded8e2; font-family: "Rubik", sans-serif; font-size: 15px; line-height: 1.4; } .service-hero-panel li svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-soft); stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* --------------------------------------------------------- buttons (CTA) -- */ .action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 8px 9px 8px 26px; border: 0; border-radius: 999px; font-family: "Figtree", sans-serif; font-size: 16px; font-weight: 600; transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease; } .action-solid { color: #fff; background: radial-gradient(circle at 46% -30%, rgba(255, 255, 255, .4), transparent 40%), linear-gradient(180deg, var(--accent), var(--accent-ink)); box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 12px 32px rgba(21, 18, 22, .34); } .action-solid:hover, .action-solid:focus-visible { transform: translateY(-2px); box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 18px 44px rgba(21, 18, 22, .46); } .action-orb { display: grid; flex: 0 0 40px; width: 40px; height: 40px; margin-left: auto; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: transform 220ms ease, background 220ms ease; } .action-orb svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } .action-solid:hover .action-orb, .action-solid:focus-visible .action-orb { background: rgba(255, 255, 255, .22); transform: rotate(45deg); } .action-ghost { padding-inline: 4px; color: #cdc6d2; font-weight: 500; } .action-ghost:hover, .action-ghost:focus-visible { color: #fff; } .action[aria-disabled="true"] { cursor: default; opacity: .84; } .action[aria-disabled="true"]:hover { transform: none; box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 12px 32px rgba(21, 18, 22, .34); } /* ---------------------------------------------------- breadcrumb and toc -- */ .crumbs { padding: 24px 0 0; background: var(--surface-plain); } .crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; color: var(--gray-3); font-family: "Figtree", sans-serif; font-size: 13px; list-style: none; } .crumbs li + li::before { margin-right: 8px; color: #8d8880; content: "/"; } .crumbs a { text-decoration: underline; text-decoration-color: var(--line-tint); text-underline-offset: 3px; } .crumbs a:hover, .crumbs a:focus-visible { color: var(--accent); } .crumbs [aria-current="page"] { color: var(--ink); } .reading-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 4vw, 70px); align-items: start; } .toc { position: sticky; top: 104px; padding: 26px 24px; border: 1px solid var(--line-tint); border-radius: var(--radius-l); background: var(--surface-plain); } .toc h2 { margin: 0 0 16px; color: var(--ink); font-family: "Figtree", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .toc ol { display: grid; gap: 2px; margin: 0; padding: 0; counter-reset: toc; list-style: none; } .toc a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--gray-3); font-family: "Rubik", sans-serif; font-size: 14px; line-height: 1.35; transition: color 160ms ease, background 160ms ease; } .toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero) " "; color: #857f78; font-size: 11px; letter-spacing: .06em; } .toc a:hover, .toc a:focus-visible { color: var(--ink); background: var(--accent-wash); } .toc a[aria-current="true"] { color: var(--accent); background: var(--accent-wash); font-weight: 500; } /* ---------------------------------------------------------------- prose --- */ .chapter + .chapter { margin-top: clamp(56px, 6vw, 96px); } .chapter-head { padding-bottom: 18px; border-bottom: 1px solid var(--line-tint); margin-bottom: 30px; } .chapter-head h2 { margin: 0; color: var(--ink); font-family: "Funnel Display", sans-serif; font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; } .chapter-index { display: block; margin-bottom: 10px; color: var(--accent-text); font-family: "Figtree", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; } .prose h3 { margin: 34px 0 12px; color: var(--ink); font-family: "Funnel Display", sans-serif; font-size: clamp(20px, 1.6vw, 25px); font-weight: 500; letter-spacing: -.02em; line-height: 1.28; } .prose > h3:first-child { margin-top: 0; } .prose p { max-width: 68ch; margin: 0 0 16px; color: var(--gray-3); font-family: "Rubik", sans-serif; font-size: 17px; line-height: 1.72; } .prose p strong { color: var(--gray-1); font-weight: 500; } .prose .lede { max-width: 62ch; color: var(--gray-1); font-family: "Figtree", sans-serif; font-size: 20px; line-height: 1.6; } /* ------------------------------------------------------- content blocks --- */ .checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-4) var(--gap-6); margin: 24px 0 8px; padding: 0; list-style: none; } .checklist li { display: flex; align-items: flex-start; gap: 11px; color: var(--gray-3); font-family: "Rubik", sans-serif; font-size: 15.5px; line-height: 1.5; } .checklist li::before { display: grid; flex: 0 0 19px; width: 19px; height: 19px; margin-top: 3px; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-wash); content: "\2713"; font-size: 11px; font-weight: 700; line-height: 1; } .band.on-dark .checklist li { color: var(--gray-5); } .band.on-dark .checklist li::before { color: var(--accent-soft); background: rgba(255, 255, 255, .09); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--gap-6); margin-top: 34px; } .card-grid.is-duo { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .note-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--line-tint); border-radius: var(--radius-s); background: var(--surface-plain); transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease; } .note-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 16px 40px rgba(21, 18, 22, .07); } .note-card h3 { display: flex; align-items: flex-start; gap: 11px; margin: 0; color: var(--ink); font-family: "Funnel Display", sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; } .note-card h3 svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; color: var(--accent); stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } .note-card p { margin: 0; color: var(--gray-3); font-family: "Rubik", sans-serif; font-size: 15.5px; line-height: 1.65; } .note-card p + p { margin-top: 12px; } .band.on-dark .note-card { border-color: rgba(255, 255, 255, .1); backdrop-filter: blur(2px); background: rgba(42, 34, 47, .45); } .band.on-dark .note-card h3 { color: #f4f0f6; } .band.on-dark .note-card h3 svg { color: var(--accent-soft); } .band.on-dark .note-card p { color: var(--gray-5); } .band.on-dark .note-card:hover { border-color: var(--accent-soft); box-shadow: 0 18px 46px rgba(0, 0, 0, .38); } .callout { display: flex; gap: 16px; margin: 30px 0; padding: 24px 26px; border-left: 3px solid var(--accent); border-radius: var(--radius-xs); background: var(--accent-wash); } .callout svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; color: var(--accent); stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; } .callout h3 { margin: 0 0 8px; color: var(--ink); font-family: "Funnel Display", sans-serif; font-size: 19px; font-weight: 500; } .callout p { max-width: 72ch; margin: 0; color: var(--gray-1); font-family: "Rubik", sans-serif; font-size: 16px; line-height: 1.65; } .callout p + p { margin-top: 10px; } /* ------------------------------------------------------------- process ---- */ /* Fixed column counts (not auto-fit) so the dashed connector can be drawn per step and hidden on the last item of each row without guessing the wrap. */ .flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-9) var(--gap-6); /* It is an

, so it arrives with the browser's list indent and markers. The indent pushed every step 40px to the right of its track - barely visible in three columns, but in the single column of a phone it threw the whole sequence off centre and clipped the right edge. */ margin: 0; padding: 0; list-style: none; } .flow-step::before { content: ""; position: absolute; z-index: 0; top: 27px; left: calc(50% + 34px); width: calc(50% + var(--gap-6) - 34px); height: 1px; border-top: 1px dashed var(--accent); opacity: .5; } .flow-step:nth-child(3n)::before, .flow-step:last-child::before { display: none; } .flow-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--gap-4); text-align: center; } .flow-badge { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(180deg, var(--accent-soft), var(--accent)); box-shadow: 0 0 0 8px var(--surface-tint); font-family: "Figtree", sans-serif; font-size: 18px; font-weight: 600; } .flow-step h3 { margin: 0; color: var(--ink); font-family: "Funnel Display", sans-serif; font-size: 20px; font-weight: 500; line-height: 1.3; } .flow-step p { max-width: 34ch; margin: 0; color: var(--gray-3); font-family: "Rubik", sans-serif; font-size: 15.5px; line-height: 1.6; } /* ----------------------------------------------------------------- faq ---- */ .faq-band { position: relative; overflow: hidden; } .faq-glow { position: absolute; z-index: 0; top: -230px; right: -190px; width: 620px; height: 620px; opacity: .3; pointer-events: none; background: url("media/glow-orb.webp") center / contain no-repeat; filter: blur(46px); } .faq-list { position: relative; z-index: 1; display: grid; gap: 12px; max-width: 940px; margin-inline: auto; } .faq-item { border: 1px solid var(--line-tint); border-radius: var(--radius-s); background: var(--surface-plain); transition: border-color 200ms ease, box-shadow 200ms ease; } .faq-item[open] { border-color: var(--accent); box-shadow: 0 14px 36px rgba(21, 18, 22, .07); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; color: var(--ink); cursor: pointer; font-family: "Funnel Display", sans-serif; font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; line-height: 1.35; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line-tint); border-radius: 50%; color: var(--accent); content: "+"; font-family: "Figtree", sans-serif; font-size: 19px; font-weight: 400; transition: transform 220ms ease, background 220ms ease, color 220ms ease, border-color 220ms ease; } .faq-item[open] summary::after { border-color: transparent; color: #fff; background: var(--accent); transform: rotate(45deg); } .faq-answer { padding: 0 24px 22px; } .faq-answer p { max-width: 74ch; margin: 0; color: var(--gray-3); font-family: "Rubik", sans-serif; font-size: 16.5px; line-height: 1.72; } .faq-answer p + p { margin-top: 12px; } /* ------------------------------------------------------------ closing ----- */ .closing { position: relative; isolation: isolate; overflow: hidden; color: #efe9f1; background: radial-gradient(circle at 50% 108%, var(--accent-wash), transparent 42%), #0e0a11; } .closing-bloom { position: absolute; z-index: -1; top: -320px; left: 50%; width: 760px; height: 600px; border-radius: 50%; opacity: .5; background: radial-gradient(circle, rgba(255, 255, 255, .3), var(--accent) 26%, transparent 66%); transform: translateX(-50%); filter: blur(14px); } .closing-layout { display: flex; flex-direction: column; align-items: center; text-align: center; } .closing h2 { max-width: 22ch; margin: 0; color: #f5f0f7; font-family: "Funnel Display", sans-serif; font-size: clamp(32px, 3.9vw, 60px); font-weight: 500; letter-spacing: -.035em; line-height: 1.12; } .closing p { max-width: 64ch; margin: 26px 0 32px; color: #a9a1ad; font-family: "Rubik", sans-serif; font-size: 17.5px; line-height: 1.7; } .closing-micro { max-width: 56ch; margin: 0 0 30px; color: #cfc7d4; font-family: "Figtree", sans-serif; font-size: 16px; line-height: 1.55; } .closing-hint { margin: 20px 0 0; color: #a49cab; font-family: "Figtree", sans-serif; font-size: 13px; letter-spacing: .04em; } /* ------------------------------------------------------------- related ---- */ /* Fixed three-up rather than auto-fit: the six service cards would otherwise break 4 + 2 on a wide screen and leave a ragged hole in the second row. */ .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-5); } .related-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--line-tint); border-radius: var(--radius-s); background: var(--surface-plain); transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease; } .related-card:hover, .related-card:focus-within { transform: translateY(-4px); border-color: var(--card-accent, var(--accent)); box-shadow: 0 18px 44px rgba(21, 18, 22, .09); } .related-index { color: var(--card-accent-text, var(--accent-text)); font-family: "Figtree", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; } .related-card h3 { margin: 0; color: var(--ink); font-family: "Funnel Display", sans-serif; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; } .related-card h3 a::after { position: absolute; border-radius: inherit; content: ""; inset: 0; } .related-card p { margin: 0; color: var(--gray-3); font-family: "Rubik", sans-serif; font-size: 15.5px; line-height: 1.6; } .related-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; color: var(--card-accent-text, var(--accent-text)); font-family: "Figtree", sans-serif; font-size: 15px; font-weight: 600; } .related-more svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: transform 200ms ease; } .related-card:hover .related-more svg { transform: translate(3px, -3px); } /* --------------------------------------------------------------- pager ---- */ .pager { padding: 46px 0 84px; background: var(--surface-plain); } .pager-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-5); } .pager-link { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border: 1px solid var(--line-tint); border-radius: var(--radius-s); transition: border-color 200ms ease, background 200ms ease, transform 200ms ease; } .pager-link:hover, .pager-link:focus-visible { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-wash); } .pager-link.is-next { flex-direction: row-reverse; text-align: right; } .pager-arrow { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line-tint); border-radius: 50%; color: var(--accent-text); } .pager-arrow svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; } .pager-label { display: block; color: #5f5b57; font-family: "Figtree", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .pager-title { display: block; margin-top: 5px; color: var(--ink); font-family: "Funnel Display", sans-serif; font-size: 18px; font-weight: 500; line-height: 1.3; } /* --------------------------------------------------------- responsive ----- */ @media (max-width: 1180px) { :root { --section-space: 6rem; } .reading-layout { grid-template-columns: 1fr; } .toc { position: static; display: grid; grid-template-columns: 1fr; gap: 4px; } .toc ol { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-hero { padding: 158px 0 74px; } .service-hero-beam { right: -6%; opacity: .34; } .service-hero-glyph { display: none; } .service-hero-grid { grid-template-columns: 1fr; gap: 40px; } .service-hero h1 { max-width: 20ch; } .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-step:nth-child(3n)::before { display: block; } .flow-step:nth-child(2n)::before, .flow-step:last-child::before { display: none; } } @media (max-width: 860px) { :root { --section-space: 4.75rem; --page-gutter: 20px; } .related-grid { grid-template-columns: 1fr; } .service-hero { padding: 132px 0 62px; } .band-head { margin-bottom: 40px; } .chapter-head { margin-bottom: 24px; } .prose p { font-size: 16.5px; } .prose .lede { font-size: 18px; } .flow { grid-template-columns: 1fr; gap: var(--gap-7); } .flow-step::before, .flow-step:nth-child(2n)::before, .flow-step:nth-child(3n)::before { display: none; } .pager { padding-bottom: 60px; } .pager-inner { grid-template-columns: 1fr; } .closing p { font-size: 16.5px; } } @media (max-width: 560px) { :root { --page-gutter: 17px; } .service-hero-tag.is-spread { width: 100%; justify-content: space-evenly; gap: 0; padding: 11px 0; font-size: clamp(8.5px, 3.05vw, 12px); letter-spacing: -.01em; white-space: nowrap; } .service-hero-tag.is-spread > b { font-weight: inherit; } .service-hero-tag.is-spread > span { white-space: nowrap; } .service-hero-actions { align-items: stretch; flex-direction: column; } .service-hero-actions .action { width: 100%; } .action-ghost { justify-content: flex-start; } .service-hero-panel { padding: 18px; } .note-card, .related-card { padding: 22px; } .faq-item summary { gap: 14px; padding: 17px 18px; } .faq-answer { padding: 0 18px 18px; } .callout { flex-direction: column; gap: 12px; padding: 20px; } .toc { padding: 20px 18px; } } /* --------------------------------------------------- generated-page extras -- */ /* The header is fixed, so in-page anchors need room above the target. */ .chapter[id], .band[id], @media (max-width: 860px) { .chapter[id], .band[id], } .hero-headline.is-long { font-size: clamp(32px, 3.4vw, 52px); max-width: 21ch; } .hero-headline.is-longest { font-size: clamp(28px, 2.9vw, 44px); max-width: 26ch; } .service-hero-panel li span { flex: 1; } .note-card h3 span { flex: 1; } .intro-prose { max-width: 74ch; } .chapter.is-panel { padding: 34px 34px 30px; border: 1px solid var(--line-tint); border-radius: var(--radius-l); background: var(--surface-tint); } .chapter.is-panel .chapter-head { border-bottom-color: rgba(21, 18, 22, .12); } .chapter.is-panel .note-card { background: var(--surface-plain); } .band-gap { height: 1px; margin: var(--gap-10) 0; background: rgba(255, 255, 255, .11); } .reading-body { min-width: 0; } @media (max-width: 560px) { .chapter.is-panel { padding: 24px 20px 20px; } } /* ---------------------------------------------------------- legal pages -- */ /* The legal documents reuse the service shell, but they carry no glyph and no second hero column, so the copy runs the full width of the grid. */ .service-hero.is-plain { padding-bottom: 74px; } .service-hero-grid.is-single { grid-template-columns: minmax(0, 1fr); } .service-hero-grid.is-single .service-hero-copy { max-width: 760px; } .legal-page .reading-body h3 { margin-top: 34px; } .legal-page .reading-body ul { gap: 10px; } .legal-foot { padding: 0 0 96px; background: var(--paper, #fff); } .legal-foot p { margin: 0; padding-top: 22px; border-top: 1px solid rgba(21, 18, 22, .12); color: #6d6672; font-family: "Figtree", sans-serif; font-size: 14px; } /* Legal pages list registry data and statutory rights, not capabilities, so the tick marks are dropped and the rows run full width as a data list. */ .legal-page .checklist { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 22px 0 10px; } .legal-page .checklist li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4px 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(21, 18, 22, .08); } .legal-page .checklist li:last-child { padding-bottom: 0; border-bottom: 0; } .legal-page .checklist li::before { content: none; } .legal-page .checklist li strong { color: var(--black, #151216); font-weight: 500; } @media (max-width: 720px) { .legal-page .checklist li { grid-template-columns: minmax(0, 1fr); } }