/** * iTouch — a Modernist tervrendszer komponensrétege. * * A tokenek a theme.json-ból jönnek (--wp--preset--*). Itt csak azt írjuk le, * amit a theme.json nem tud kifejezni: a szemantikus változókat, a sötét mód * átkötését, és a tervben szereplő összetett elrendezéseket. * * A sötét mód úgy működik, hogy a alatt * újradefiniáljuk magukat a WP preset-változókat. Így minden blokk, ami a * paletta színeit használja (has-base-background-color stb.), magától átvált — * nem kell minden blokkra külön sötét szabályt írni. * * A html[data-...] szelektor specificitása (0,1,1), a WP :root-jáé (0,1,0), * ezért a betöltési sorrendtől függetlenül nyerünk. */ /* ══════════════════════════════════════════════════════════════════════════ 1. Szemantikus változók ══════════════════════════════════════════════════════════════════════ */ :root { --itouch-divider: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent); --itouch-muted: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent); --itouch-hover-tint: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent); --itouch-active-tint: color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent); /* Törzsméretű szöveghez a #ec3013 kontrasztja csak ~3.5:1 a világos alapon, ezért a linkek a ramp mélyebb fokát kapják — lásd a Modernist readme-t. */ --itouch-link: var(--wp--custom--accent--700); --itouch-link-hover: var(--wp--preset--color--accent-1); --itouch-on-accent: #ffffff; } @media (prefers-color-scheme: dark) { html:not([data-itouch-theme="light"]) { --wp--preset--color--base: #1c1b1a; --wp--preset--color--contrast: #f3f1f0; --wp--preset--color--accent-3: #272524; --wp--preset--color--accent-4: #33201c; --wp--preset--color--accent-5: #ffc4b8; --itouch-divider: color-mix(in srgb, #f3f1f0 22%, transparent); --itouch-link: var(--wp--custom--accent--400); --itouch-link-hover: var(--wp--custom--accent--300); color-scheme: dark; } } html[data-itouch-theme="dark"] { --wp--preset--color--base: #1c1b1a; --wp--preset--color--contrast: #f3f1f0; --wp--preset--color--accent-3: #272524; --wp--preset--color--accent-4: #33201c; --wp--preset--color--accent-5: #ffc4b8; --itouch-divider: color-mix(in srgb, #f3f1f0 22%, transparent); --itouch-link: var(--wp--custom--accent--400); --itouch-link-hover: var(--wp--custom--accent--300); color-scheme: dark; } html[data-itouch-theme="light"] { color-scheme: light; } body { transition: background-color .2s ease, color .2s ease; } /* ══════════════════════════════════════════════════════════════════════════ 2. Alapok — a Modernist tipográfia és állapotok ══════════════════════════════════════════════════════════════════════ */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, transparent); } a { text-underline-offset: 3px; } .itouch-muted, .has-itouch-muted-color { color: var(--itouch-muted); } /* Nulla lekerekítés mindenütt — a tervrendszer sarokköve. */ .wp-block-button__link, .wp-block-search__input, .wp-block-search__button, .wp-block-image img, .wp-block-post-featured-image img, .wp-block-pullquote, input, select, textarea { border-radius: 0; } /* Fotók fekete-fehérben — a Modernist .grayscale csomagolója. */ .itouch-grayscale img, .itouch-grayscale .wp-block-post-featured-image img { filter: grayscale(1) contrast(1.08); } /* ══════════════════════════════════════════════════════════════════════════ 3. Fejléc ══════════════════════════════════════════════════════════════════════ */ .itouch-header { position: sticky; top: 0; z-index: 20; background: var(--wp--preset--color--base); border-bottom: 2px solid var(--itouch-divider); } .itouch-brand-mark { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--accent-1); } .itouch-brand-mark svg { display: block; } .itouch-header .wp-block-navigation__responsive-container-open, .itouch-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--contrast); } /* Sötét mód kapcsoló — a .btn-secondary megfelelője. */ .itouch-theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-family: var(--wp--preset--font-family--archivo); font-weight: 800; font-size: 13px; line-height: 1.2; color: var(--wp--preset--color--contrast); background: transparent; border: 1px solid var(--itouch-divider); border-radius: 0; cursor: pointer; } .itouch-theme-toggle:hover { background: var(--itouch-hover-tint); } .itouch-theme-toggle:active { background: var(--itouch-active-tint); } .itouch-theme-toggle svg { display: block; width: 14px; height: 14px; } /* A JS a data-attribútum alapján cseréli a feliratot; script nélkül a világos mód felirata marad, és a gomb egyszerűen nem csinál semmit. */ .itouch-theme-toggle .itouch-toggle-dark { display: inline; } .itouch-theme-toggle .itouch-toggle-light { display: none; } html[data-itouch-theme="dark"] .itouch-theme-toggle .itouch-toggle-dark { display: none; } html[data-itouch-theme="dark"] .itouch-theme-toggle .itouch-toggle-light { display: inline; } /* ══════════════════════════════════════════════════════════════════════════ 4. Kártyák, cimkék, meta ══════════════════════════════════════════════════════════════════════ */ .itouch-kicker, .itouch-kicker a { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--accent-1); text-decoration: none; } .itouch-kicker a:hover { text-decoration: underline; } .itouch-meta, .itouch-meta a { font-size: 11px; color: var(--itouch-muted); } .itouch-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .itouch-meta a { color: var(--itouch-muted); text-decoration: underline; } .itouch-meta a:hover { color: var(--wp--preset--color--accent-1); } .itouch-tag, .itouch-tag a { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0; background: var(--wp--preset--color--accent-4); color: var(--wp--preset--color--accent-5); text-decoration: none; } .itouch-tag a { padding: 0; background: transparent; } .itouch-tag a:hover { text-decoration: underline; } .itouch-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--wp--preset--color--accent-3); box-shadow: var(--wp--preset--shadow--sm); } .itouch-card .wp-block-post-title { font-size: 17px; line-height: 1.2; margin: 0; } .itouch-card .wp-block-post-title a { color: inherit; text-decoration: none; } .itouch-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-1); } .itouch-card .wp-block-post-excerpt__excerpt { font-size: 13px; opacity: .8; margin: 0; } .itouch-card .wp-block-post-featured-image { margin: 0; } .itouch-card .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } /* ══════════════════════════════════════════════════════════════════════════ 5. Címlap — hero ══════════════════════════════════════════════════════════════════════ */ .itouch-hero .wp-block-post-title { font-size: var(--wp--preset--font-size--heading-1); margin: 16px 0 12px; } .itouch-hero .wp-block-post-title a { color: inherit; text-decoration: none; } .itouch-hero .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-1); } .itouch-hero .wp-block-post-excerpt__excerpt { font-size: 17px; max-width: 640px; } .itouch-hero .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } /* ══════════════════════════════════════════════════════════════════════════ 6. Archívum — sorok ══════════════════════════════════════════════════════════════════════ */ .itouch-archive-row { border-bottom: 1px solid var(--itouch-divider); padding: 24px 0; } .itouch-archive-row .wp-block-post-featured-image { margin: 0; } .itouch-archive-row .wp-block-post-featured-image img { width: 160px; aspect-ratio: 4 / 3; object-fit: cover; } .itouch-archive-row .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); margin: 8px 0; } .itouch-archive-row .wp-block-post-title a { color: inherit; text-decoration: none; } .itouch-archive-row .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-1); } .itouch-archive-row .wp-block-post-excerpt__excerpt { font-size: 14px; opacity: .8; margin: 0 0 8px; } /* Lapozó — a .btn készlet megjelenése. */ .wp-block-query-pagination { gap: 8px; margin-top: 32px; } .wp-block-query-pagination .page-numbers, .wp-block-query-pagination .wp-block-query-pagination-previous, .wp-block-query-pagination .wp-block-query-pagination-next { display: inline-flex; align-items: center; padding: 8px 14px; font-family: var(--wp--preset--font-family--archivo); font-weight: 800; font-size: 13px; color: var(--wp--preset--color--contrast); border: 1px solid var(--itouch-divider); text-decoration: none; } .wp-block-query-pagination .page-numbers:hover, .wp-block-query-pagination .wp-block-query-pagination-previous:hover, .wp-block-query-pagination .wp-block-query-pagination-next:hover { background: var(--itouch-hover-tint); } .wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); color: var(--itouch-on-accent); } .wp-block-query-pagination-numbers .page-numbers.dots { border-color: transparent; } /* ══════════════════════════════════════════════════════════════════════════ 7. Bejegyzés — forrás, összefoglaló, megosztás ══════════════════════════════════════════════════════════════════════ */ .itouch-single .wp-block-post-content p { font-size: 16px; line-height: 1.7; } .itouch-single .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } /* A forrás sor: "Forrás:" felirat + a metaadatból kötött link. */ .itouch-source-row { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; } .itouch-source-row p { margin: 0; font-size: 11px; color: var(--itouch-muted); } .itouch-source-row .wp-block-buttons { margin: 0; } /* Link kinézetű gomb — a forrás gombhoz és bárhol, ahol a terv sima linket mutat. */ .wp-block-button.is-style-itouch-link .wp-block-button__link { background: transparent; color: var(--itouch-link); padding: 0; font-weight: 400; font-size: inherit; text-decoration: underline; } .wp-block-button.is-style-itouch-link .wp-block-button__link:hover { background: transparent; color: var(--itouch-link-hover); } .itouch-source-row .wp-block-button__link { font-size: 11px; } /* "A lényeg röviden" doboz. */ .itouch-summary { background: var(--wp--preset--color--accent-3); box-shadow: var(--wp--preset--shadow--sm); padding: 12px; margin: 32px 0; } .itouch-summary ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .itouch-summary li::marker { color: var(--wp--preset--color--accent-1); } /* Megosztó sor. */ .itouch-share { display: flex; gap: 8px; flex-wrap: wrap; margin: 32px 0; } .itouch-share__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-family: var(--wp--preset--font-family--archivo); font-weight: 800; font-size: 13px; line-height: 1.2; color: var(--wp--preset--color--contrast); background: transparent; border: 1px solid var(--itouch-divider); border-radius: 0; cursor: pointer; text-decoration: none; } .itouch-share__btn:hover { background: var(--itouch-hover-tint); color: var(--wp--preset--color--contrast); } .itouch-share__btn:active { background: var(--itouch-active-tint); } .itouch-share__btn[hidden] { display: none; } /* ══════════════════════════════════════════════════════════════════════════ 8. Lábléc ══════════════════════════════════════════════════════════════════════ */ .itouch-footer { border-top: 2px solid var(--itouch-divider); margin-top: auto; } .itouch-footer a { color: inherit; text-decoration: none; font-size: 14px; } .itouch-footer a:hover { color: var(--wp--preset--color--accent-1); } .itouch-footer .itouch-brand-mark { width: 24px; height: 24px; } /* ══════════════════════════════════════════════════════════════════════════ 9. Reszponzív ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 781px) { .itouch-hero .wp-block-post-title { font-size: 32px; } .itouch-archive-row .wp-block-post-featured-image img { width: 100%; } .itouch-archive-row .wp-block-post-title { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { body { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ 10. Elválasztó és "Elolvasom" gomb ══════════════════════════════════════════════════════════════════════ */ /* A Modernist erős, 2 képpontos vonala — nem hajszálvonal. */ .wp-block-separator { height: 2px; border: 0; background: var(--itouch-divider); opacity: 1; margin-block: var(--wp--preset--spacing--70); } .wp-block-separator.is-style-wide { width: 100%; max-width: none; } /* A "Tovább" hivatkozás elsődleges gombként. */ .itouch-readmore, a.itouch-readmore { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-family: var(--wp--preset--font-family--archivo); font-weight: 800; font-size: 13px; line-height: 1.2; background: var(--wp--preset--color--accent-1); color: var(--itouch-on-accent); text-decoration: none; border: 0; } .itouch-readmore:hover { background: var(--wp--custom--accent--600); color: var(--itouch-on-accent); } .itouch-readmore:active { background: var(--wp--custom--accent--700); } /* Másodlagos, körvonalas hivatkozás — "Összes cikk →", "Vissza a bloghoz". */ .itouch-link-ghost, a.itouch-link-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; font-family: var(--wp--preset--font-family--archivo); font-weight: 800; font-size: 13px; color: var(--itouch-link); text-decoration: none; } .itouch-link-ghost:hover { background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent); color: var(--itouch-link); }