/* Theme Name: Gökhan Güzel Theme URI: https://gokhanguzel.com/ Author: Gökhan Güzel Author URI: https://gokhanguzel.com/ Description: Custom, from-scratch, Elementor-compatible WordPress theme for gokhanguzel.com — a personal brand / one-person studio. Not a block/FSE theme, not a Hello Elementor child. Targets WordPress 7.0 + PHP 8.1+ + Elementor 4.x (Free). Version: 1.0.0 Requires at least: 6.9 Tested up to: 7.0 Requires PHP: 8.1 Text Domain: gokhanguzel Domain Path: /languages License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: blog, portfolio, custom-logo, translation-ready, rtl-language-support, full-width-template, custom-menu */ /* ========================================================================== 1. Design tokens (spec §1 — reused verbatim from the existing homepage) ========================================================================== */ :root { /* Light mode (default) */ --bg: #F6F5F2; --ink: #1A1A1A; --secondary: #6E6E73; --tertiary: #B2B2B7; --border: rgba(20, 20, 20, .12); --border-strong: rgba(20, 20, 20, .22); --card-bg: rgba(255, 255, 255, .55); --accent: #E8590C; --purple: #6D28D9; --grad: linear-gradient(96deg, #6D28D9 0%, #9333EA 38%, #E8590C 100%); /* Hero signal-graphic (home) */ --svg-line: #D9D7D2; --svg-dot: #2C2C2E; --svg-dot-soft: #B7B5AF; /* Type & layout */ --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --maxw: 1320px; /* Reading column: the single source of truth for the body-text measure that the article body, the entry-meta (tags) and the share row all bind to, so they share one left edge + width across every single template (§13/§18). */ --measure: 760px; /* Derived spacing / radii (kept minimal; layout lives in later steps) */ --gutter: clamp(1rem, 4vw, 2rem); --radius: 14px; } /* Dark mode — automatic by OS preference … */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0D0D0F; --ink: #F3F3F4; --secondary: #9A9AA2; --tertiary: #56565E; --border: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .22); --card-bg: rgba(255, 255, 255, .03); --accent: #F4733A; --purple: #8B5CF6; --grad: linear-gradient(96deg, #8B5CF6 0%, #A855F7 38%, #F4733A 100%); --svg-line: rgba(255, 255, 255, .14); --svg-dot: #E6E6EA; --svg-dot-soft: #5A5A62; } } /* … and an explicit override hook (the theme toggle sets data-theme on ). */ :root[data-theme="dark"] { --bg: #0D0D0F; --ink: #F3F3F4; --secondary: #9A9AA2; --tertiary: #56565E; --border: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .22); --card-bg: rgba(255, 255, 255, .03); --accent: #F4733A; --purple: #8B5CF6; --grad: linear-gradient(96deg, #8B5CF6 0%, #A855F7 38%, #F4733A 100%); --svg-line: rgba(255, 255, 255, .14); --svg-dot: #E6E6EA; --svg-dot-soft: #5A5A62; } /* ========================================================================== 2. Base / reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; font-feature-settings: "kern", "liga", "calt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; } p { margin: 0 0 1rem; } code, kbd, pre, samp { font-family: var(--mono); font-size: .9375em; } /* ========================================================================== 3. Layout helpers (the gradient + content rail that the whole shell shares) ========================================================================== */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .gradient-bg { background: var(--grad); color: #fff; } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); } /* Accessibility: skip link (markup added in wp-template-hierarchy step) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: .75rem 1rem; background: var(--ink); color: var(--bg); border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } /* ========================================================================== 4. "Reveal" motion (spec §1 — light enhancement, never blocks content) The reveal script (added in a later step) puts `.js-reveal` on and then adds `.is-revealed` as elements enter the viewport. The hidden initial state is gated behind `.js-reveal`, so without JS — or before the script runs — `.reveal` elements are fully visible. Content is never blocked on JS. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; } .js-reveal .reveal.is-revealed { opacity: 1; transform: none; } } /* WordPress core alignment / accessibility utilities */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute; word-wrap: normal !important; } .alignwide { max-width: min(100%, 1100px); margin-inline: auto; } .alignfull { max-width: none; } .aligncenter { margin-inline: auto; } /* ========================================================================== 5. Site shell: header, footer, main landmark ========================================================================== */ .site-header { border-bottom: 1px solid var(--border); } .custom-logo-link { display: inline-flex; } .site-main { min-height: 50vh; } .site-section { padding-block: clamp(2rem, 6vw, 4rem); } .site-footer { margin-top: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--border); padding-block: clamp(2rem, 6vw, 4rem); } /* ========================================================================== 6. Listing layout, cards, entry meta, pagination, comments ========================================================================== */ .page-header { padding-block: clamp(1.5rem, 5vw, 3rem) 1.5rem; } .page-title { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); } .archive-description { color: var(--secondary); max-width: 60ch; } /* Card grid for listings. NOTE: no margin/padding reset here — most grids also carry .container, whose margin-inline:auto (centering) and padding-inline (gutter) must survive the cascade. */ .post-list { display: grid; gap: clamp(1rem, 3vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); list-style: none; } .card-post { display: flex; flex-direction: column; overflow: hidden; } .card-post__thumb { display: block; } .card-post__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .card-post__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.5rem 1.5rem; } .card-post__title { margin: 0; font-size: 1.25rem; } .card-post__title a { color: var(--ink); } .card-post__title a:hover { color: var(--accent); text-decoration: none; } .card-post__excerpt { color: var(--secondary); margin: 0; } .entry-meta, .card-post__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--secondary); font-family: var(--mono); font-size: .8125rem; margin: 0; } .entry-meta a, .card-post__meta a { color: var(--secondary); } .entry-header { padding-block: clamp(1.5rem, 5vw, 3rem) 1rem; } .entry-title { font-size: clamp(1.9rem, 5vw, 3rem); margin: 0 0 .5rem; } .entry-content { margin-block: 1.5rem; } .entry-content > * + * { margin-top: 1rem; } .post-thumbnail img { width: 100%; border-radius: var(--radius); } .entry-footer { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--border); color: var(--secondary); font-size: .9375rem; } /* Pagination (the_posts_pagination markup) */ .pagination { margin-block: clamp(2rem, 6vw, 4rem); } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .pagination .page-numbers { display: inline-flex; min-width: 2.5rem; min-height: 2.5rem; align-items: center; justify-content: center; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); } .pagination .page-numbers.current { background: var(--grad); border-color: transparent; color: #fff; } .pagination a.page-numbers:hover { border-color: var(--border-strong); text-decoration: none; } /* No-results block */ .no-results { padding-block: clamp(2rem, 6vw, 4rem); } /* Search form */ .search-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; } .search-form .search-field { flex: 1 1 16rem; padding: .6rem .8rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card-bg); color: var(--ink); font: inherit; } .search-form .search-submit { padding: .6rem 1.1rem; border: 0; border-radius: 10px; background: var(--grad); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } /* Comments */ .comments-area { margin-top: clamp(2rem, 6vw, 4rem); } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list .children { list-style: none; margin: 0; padding-inline-start: clamp(1rem, 4vw, 2.5rem); } .comment-body { padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .comment-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--secondary); font-size: .875rem; margin-bottom: .5rem; } .comment-respond { margin-top: 1.5rem; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: .6rem .8rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card-bg); color: var(--ink); font: inherit; } .comment-form .submit { padding: .6rem 1.1rem; border: 0; border-radius: 10px; background: var(--grad); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } /* 404 */ .error-404 .page-content { display: flex; flex-direction: column; gap: 1.5rem; } /* ========================================================================== 7. Free Elementor integration guards (spec §10 — content-width handoff) The theme owns the chrome; on full-width templates Elementor owns the in-page width. These rules stop the theme from double-constraining the Elementor body. Set Elementor → Settings → Layout → Content Width to 1320 to match --maxw. ========================================================================== */ /* Full-width template wrapper: edge-to-edge, no theme max-width or padding — Elementor's own (boxed/full) container controls the inner width. */ .elementor-full { width: 100%; max-width: none; margin: 0; padding: 0; } /* The theme full-width page template must not add side/vertical rails that would offset edge-to-edge Elementor sections. */ .page-template-page-elementor-full .site-main { margin: 0; } /* When an Elementor-built page renders through a full-width wrapper, let the Elementor root use the full column rather than a nested max-width. */ .elementor-full .elementor { width: 100%; max-width: none; } /* ========================================================================== 8. Library modules (prompt / skill / script — spec §8) ========================================================================== */ .lead { font-size: 1.125rem; color: var(--secondary); } .field { margin-block: clamp(1.5rem, 4vw, 2.5rem); } .field-title { font-size: 1.1rem; margin: 0 0 .75rem; } .mono { font-family: var(--mono); } /* Code blocks + copy */ .code-block-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; } .code-actions { display: flex; gap: .5rem; flex-wrap: wrap; } .code-block { margin: 0; padding: 1rem 1.25rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; font-family: var(--mono); font-size: .875rem; line-height: 1.6; white-space: pre; -webkit-overflow-scrolling: touch; } .code-block code { font-family: inherit; font-size: inherit; white-space: inherit; } .code-block--inline { padding: .6rem 1rem; } .copy-btn, .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card-bg); color: var(--ink); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; text-decoration: none; } .copy-btn:hover, .btn:hover { border-color: var(--accent); text-decoration: none; } .copy-btn.is-copied { border-color: transparent; background: var(--grad); color: #fff; } .btn--repo, .btn--download { background: var(--grad); border-color: transparent; color: #fff; } /* Chips + badges */ .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; } .chip { display: inline-flex; align-items: center; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 999px; font-size: .8125rem; color: var(--secondary); } .chip a { color: inherit; text-decoration: none; } .chip a:hover { color: var(--accent); text-decoration: none; } .badges { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-block: .5rem; } .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 8px; font-family: var(--mono); font-size: .75rem; font-weight: 600; background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--ink); border: 1px solid var(--border); } .badge--account { background: color-mix(in srgb, var(--accent) 16%, transparent); } /* Repeating structured content (setup steps, parameter tables, manifests) moved to the Gutenberg body in the ACF FREE migration — it renders inside .entry-content.article-body and reuses the §13 body/table styles. */ .wysiwyg > * + * { margin-top: 1rem; } /* Library cards (archive listings) */ .card-lib { display: flex; flex-direction: column; } /* JS search/category filtering sets the native `hidden` attribute on cards; without this, `.card-lib { display: flex }` (same specificity, author origin) beats the UA `[hidden]{display:none}` rule and filtered-out cards stay visible. */ .card-lib[hidden] { display: none; } .card-lib__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.5rem 1.5rem; } .card-lib__title { margin: 0; font-size: 1.2rem; } .card-lib__title a { color: var(--ink); } .card-lib__title a:hover { color: var(--accent); text-decoration: none; } .card-lib__excerpt { margin: 0; color: var(--secondary); } /* ========================================================================== 9. Resource Library UX: toolbar, clickable cards, drawer, states (Faz B) ========================================================================== */ /* Toolbar */ .lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-block: 1rem; } /* Search is a JS-only enhancement — hidden until library.js adds .lib-js. */ .lib-toolbar__search { display: none; } .lib-js .lib-toolbar__search { display: flex; flex: 1 1 18rem; } .lib-toolbar__input { width: 100%; padding: .55rem .8rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card-bg); color: var(--ink); font: inherit; } .lib-toolbar__chips { display: flex; flex-wrap: wrap; gap: .4rem; } /* Active chip: inverted AND bolder (colour is not the only signal). */ .chip--filter { cursor: pointer; font-weight: 500; } .chip--filter.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; } /* Clickable cards (stretched-link pattern) */ .card-lib { position: relative; } .card-lib__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .card-lib__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } .lib-js .card-lib { cursor: pointer; } /* Inner actions sit above the stretched link so they remain independently clickable. */ .card-lib .copy-btn, .card-lib .card-action { position: relative; z-index: 1; } /* Card code/prompt preview: CSS line-clamp (no JS reflow → no CLS). Full text stays in the DOM so the Copy button still copies everything. */ .card-preview { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; max-height: 5.5em; margin: 0; font-size: .8125rem; } .btn--ghost { background: var(--card-bg); color: var(--ink); } .badge--i18n { background: color-mix(in srgb, var(--purple) 12%, transparent); } /* No-matches (client search) */ .lib-no-matches { color: var(--secondary); padding-block: 2rem; } /* Drawer — native (top layer: no position:fixed, no CLS). */ .lib-drawer { width: min(920px, 100%); max-width: 920px; max-height: 90vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--ink); margin: auto; } .lib-drawer::backdrop { background: rgba(0, 0, 0, .5); } .lib-drawer__panel { display: flex; flex-direction: column; max-height: 90vh; } .lib-drawer__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--bg); } .lib-drawer__title { margin: 0; font-size: 1.25rem; } .lib-drawer__actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; } .lib-drawer__close { border: 0; background: transparent; color: var(--ink); font-size: 1.1rem; line-height: 1; padding: .35rem .5rem; cursor: pointer; border-radius: 8px; } /* The single internal scroll container (no nested scrollers). */ .lib-drawer__body { overflow-y: auto; padding: 1.25rem; } .lib-drawer__body:focus { outline: none; } .lib-drawer__error { color: var(--accent); } /* Loading skeleton: neutral blocks, no shimmer, fixed sizes (no layout shift). */ .lib-skeleton { display: flex; flex-direction: column; gap: .75rem; } .lib-skeleton__line { height: 1rem; border-radius: 6px; background: var(--border); } .lib-skeleton__block { height: 12rem; border-radius: var(--radius); background: var(--border); } /* Background scroll lock while the drawer is open. */ .lib-scroll-lock { overflow: hidden; } /* ========================================================================== 10. Contact form (Audit CTA target) ========================================================================== */ .btn--primary { background: var(--grad); border-color: transparent; color: #fff; } .contact-page .entry-content { max-width: 60ch; } .contact-form { max-width: 38rem; display: grid; gap: 1rem; } .contact-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; } .contact-field label { font-weight: 600; } .contact-field input, .contact-field textarea { width: 100%; padding: .6rem .8rem; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card-bg); color: var(--ink); font: inherit; } .contact-actions { margin: 0; } /* Honeypot: hidden from people, present for bots. Not display:none so some bots still fill it; kept out of the accessibility tree + tab order. */ .contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-message { padding: .75rem 1rem; border-radius: 10px; border: 1px solid var(--border); } .contact-message--ok { background: color-mix(in srgb, var(--purple) 12%, transparent); } .contact-message--error { background: color-mix(in srgb, var(--accent) 14%, transparent); } /* ========================================================================== 11. Skill "Add this skill" action + file manifest (spec §6.4 / §6.5) ========================================================================== */ .skill-add { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--card-bg); } .skill-add .field-title { margin-top: 0; } /* The trigger is styled as a primary button; hide the native marker. */ .skill-add__steps summary { list-style: none; width: max-content; max-width: 100%; } .skill-add__steps summary::-webkit-details-marker { display: none; } .skill-add__steps summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* "Instructions" mode disclosure body: the install command copy block. */ .skill-add__cmd { margin-top: 1rem; } /* ========================================================================== 12. Design-system header, footer & coded home page (1:1 with the source homepage). Bare element selectors from the source are scoped to .site-header / .site-footer / .home so they never leak to library cards (.card-lib), archive titles, or single

s. ========================================================================== */ /* ---------- site header (sticky, blurred) ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: .5px solid var(--border); } .site-header .nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; padding-inline: 48px; /* 1:1 with source (overrides .container --gutter). */ } .site-header .logo { display: flex; align-items: center; gap: 14px; flex: none; } .site-header .logo-mark { width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; letter-spacing: .02em; } .site-header .logo-text { font-weight: 600; font-size: 16px; letter-spacing: .06em; } .site-header nav.main ul { display: flex; gap: 34px; margin: 0; padding: 0; list-style: none; font-size: 15px; } .site-header nav.main a { color: var(--ink); position: relative; display: inline-block; padding: 6px 0; transition: opacity .15s; } .site-header nav.main a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--accent); transition: right .22s ease; } .site-header nav.main a:hover::after, .site-header nav.main a:focus-visible::after, .site-header nav.main .current-menu-item > a::after, .site-header nav.main a[aria-current="page"]::after { right: 0; } /* Active page: keep the underline filled + a touch heavier so the current section reads at a glance (the coded nav now emits aria-current). */ .site-header nav.main a[aria-current="page"] { font-weight: 600; } /* Keyboard focus is visible on the link itself, not only via the underline. */ .site-header nav.main a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; } .site-header .nav-right { display: flex; align-items: center; gap: 16px; flex: none; } .btn-ghost { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; border: 1px solid var(--border-strong); border-radius: 9px; padding: 11px 18px; color: var(--ink); transition: .18s; } .btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); } .btn-ghost svg { transition: transform .2s; } .btn-ghost:hover svg { transform: translateX(3px); } .theme-toggle { width: 42px; height: 42px; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .18s; } .theme-toggle:hover { border-color: var(--ink); transform: rotate(25deg); } .burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; } .burger span { width: 24px; height: 1.6px; background: var(--ink); transition: .2s; } .burger.x span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); } .burger.x span:nth-child(2) { opacity: 0; } .burger.x span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); } /* mobile nav overlay */ .mobnav { display: none; position: fixed; inset: 78px 0 0; background: var(--bg); z-index: 55; padding: 36px 48px; flex-direction: column; gap: 4px; counter-reset: gg-m; } .mobnav.open { display: flex; } .mobnav ul { list-style: none; margin: 0; padding: 0; } .mobnav a { display: block; font-size: 28px; font-weight: 600; padding: 16px 0; border-bottom: .5px solid var(--border); color: var(--ink); } .mobnav a::before { counter-increment: gg-m; content: counter(gg-m, decimal-leading-zero); font-family: var(--mono); font-size: 14px; color: var(--accent); margin-right: 16px; } /* Current page in the overlay: accent label + persistent accent rule, so the active section is obvious on mobile too (aria-current drives it). */ .mobnav a[aria-current="page"] { color: var(--accent); } /* CTA inside the overlay. It is a .btn-ghost (border + ink text = AA in both modes) made full-width + accent-bordered so it reads as the primary action without an aggressive fill. The numbered ::before counter is suppressed. */ .mobnav .mobnav-cta { display: inline-flex; justify-content: center; gap: 9px; margin-top: 26px; padding: 15px 18px; font-size: 16px; border-color: var(--accent); border-radius: 10px; } .mobnav .mobnav-cta::before { content: none; counter-increment: none; } .mobnav .mobnav-cta:hover { border-color: var(--accent); transform: translateY(-1px); } /* ---------- home: hero ---------- Spacing scale (homepage rhythm, clamp-based so it tracks viewport without per-breakpoint one-offs): hero top clamp(48,5vw,72), section bottoms clamp(40,4.5vw,64), cta bottom clamp(36,4.5vw,56), home footer clamp(32,4vw,44). align-items:start (not center) so the left column starts at a fixed point regardless of text length — EN/TR/DE share one vertical rhythm (was center: the shorter-text language floated ~25px lower). */ .home .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; padding: clamp(48px, 5vw, 72px) 48px clamp(40px, 4.5vw, 64px); max-width: var(--maxw); margin: 0 auto; } .home .eyebrow { display: flex; align-items: center; gap: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); margin-bottom: 30px; } .home .eyebrow-line { width: 46px; height: 1.5px; background: var(--accent); display: inline-block; flex: none; } .home .hero h1 { font-size: clamp(36px, 4.2vw, 52px); font-weight: 500; line-height: 1.07; letter-spacing: -.022em; max-width: 640px; margin: 0 0 30px; } .home .hero h1 .dot { color: var(--accent); } .home .hero-sub { color: var(--secondary); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 44ch; margin-bottom: 44px; } .home .link-arrow { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-size: 16px; color: var(--ink); position: relative; padding-bottom: 7px; } .home .link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 2px; background: var(--accent); } .home .link-arrow svg { color: var(--accent); transition: transform .2s; } .home .link-arrow:hover svg { transform: translateX(5px); } /* Hero CTA group: primary button + secondary text link side by side. */ .home .hero-cta { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .home .hero-cta__primary { padding: 13px 22px; font-size: 15px; border-radius: 11px; } .home .hero-cta__primary svg { transition: transform .2s; } .home .hero-cta__primary:hover svg { transform: translateX(4px); } .home .hero-cta a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; } /* Closing conversion band (after the index grid). */ .home .home-cta { max-width: var(--maxw); margin: 0 auto; padding: 0 48px clamp(36px, 4.5vw, 56px); /* was 104 — removed the pre-footer dead air. */ display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .home .home-cta__text { margin: 0; max-width: 48ch; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.4; color: var(--ink); } .home .home-cta__btn { flex: none; padding: 13px 22px; font-size: 15px; border-radius: 11px; } .home .home-cta__btn svg { transition: transform .2s; } .home .home-cta__btn:hover svg { transform: translateX(4px); } .home .home-cta__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .home .hero-visual { position: relative; } .home .hero-visual svg { width: 100%; height: auto; display: block; overflow: visible; } .home .hero-visual .hero-network { margin: 0 auto; } .home .hero-network__wire { fill: none; stroke: url(#ggNetworkGradient); stroke-width: 1.4; stroke-linecap: round; opacity: .28; } .home .hero-network__pulse { fill: none; stroke: url(#ggNetworkGradient); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 14 86; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgba(180, 70, 160, .5)); animation: gg-network-travel linear infinite; } .home .hero-network__dot { fill: url(#ggNetworkGradient); transform-box: fill-box; transform-origin: center; animation: gg-network-beat ease-in-out infinite; } .home .hero-network__stop--start { animation: gg-network-start 7s linear infinite; } .home .hero-network__stop--middle { animation: gg-network-middle 7s linear infinite; } .home .hero-network__stop--end { animation: gg-network-end 7s linear infinite; } .home .hero-emblem__stop--start { animation: gg-emblem-start 8s linear infinite; } .home .hero-emblem__stop--middle { animation: gg-emblem-middle 8s linear infinite; } .home .hero-emblem__stop--end { animation: gg-emblem-end 8s linear infinite; } @keyframes gg-network-travel { to { stroke-dashoffset: 0; } } @keyframes gg-network-beat { 0%, 100% { transform: scale(.7); opacity: .45; } 50% { transform: scale(1.25); opacity: 1; } } @keyframes gg-network-start { 0%, 100% { stop-color: #6a30c9; } 33% { stop-color: #e8632c; } 66% { stop-color: #c4429a; } } @keyframes gg-network-middle { 0%, 100% { stop-color: #c4429a; } 33% { stop-color: #6a30c9; } 66% { stop-color: #e8632c; } } @keyframes gg-network-end { 0%, 100% { stop-color: #e8632c; } 33% { stop-color: #c4429a; } 66% { stop-color: #6a30c9; } } @keyframes gg-emblem-start { 0%, 100% { stop-color: #c94b9a; } 33% { stop-color: #5e35b1; } 66% { stop-color: #e8632c; } } @keyframes gg-emblem-middle { 0%, 100% { stop-color: #8e3f9e; } 33% { stop-color: #c94b9a; } 66% { stop-color: #5e35b1; } } @keyframes gg-emblem-end { 0%, 100% { stop-color: #4b2e83; } 33% { stop-color: #e8632c; } 66% { stop-color: #c94b9a; } } .home .signal-line { fill: none; stroke: var(--svg-line); stroke-width: 1.1; } .home .dot-soft { fill: var(--svg-dot-soft); } .home .dot-ink { fill: var(--svg-dot); } .home .dot-acc { fill: var(--accent); } /* ---------- home: index grid ---------- */ .home .index { padding: 8px 48px clamp(36px, 4vw, 48px); /* bottom tightened: the home-cta band follows. */ max-width: var(--maxw); margin: 0 auto; } .home .grid { display: grid; /* Columns track the actual card count (--gg-cols set in PHP: 5 without the About card, 6 with) so the desktop row is always full — no trailing empty column when About is unpublished. */ grid-template-columns: repeat(var(--gg-cols, 5), 1fr); gap: 18px; } .home .card { position: relative; border: 1px solid var(--border); border-radius: 15px; padding: 26px 22px 28px; background: var(--card-bg); min-height: 200px; /* was 280 — de-hollow the cards (content is bottom-pinned). */ display: flex; flex-direction: column; color: var(--ink); transition: .2s ease; overflow: hidden; } .home .card:hover { transform: translateY(-4px); border-color: var(--border-strong); } .home .card .num { font-family: var(--mono); font-size: 27px; font-weight: 400; color: var(--tertiary); line-height: 1; } .home .card .corner { position: absolute; top: 26px; right: 22px; color: var(--tertiary); transition: .2s; } .home .card:hover .corner { color: var(--ink); transform: translate(2px, -2px); } .home .card .body { margin-top: auto; } .home .card h3 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 12px; } .home .card p { color: var(--secondary); font-size: 14.5px; line-height: 1.5; margin: 0; } .home .card.is-active { border-color: var(--accent); } .home .card.is-active .num { color: var(--accent); } .home .card .underline { width: 0; } .home .card.is-active .underline { width: 26px; height: 2.5px; background: var(--accent); border-radius: 2px; margin-top: 11px; } /* ---------- site footer (design-system) ---------- */ .site-footer { border-top: .5px solid var(--border); padding: 32px 0 40px; } /* Homepage only: the global .site-footer margin-top (clamp 3–6rem ≈ 96px) plus the home-cta band created ~200px of dead air before the footer. Tighten it for the home so the closing CTA connects to the footer; other pages (Audit/Contact/ blog) keep the global margin untouched. */ body.home .site-footer { margin-top: clamp(2rem, 4vw, 2.75rem); } .site-footer .footer-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 14px; color: var(--secondary); flex-wrap: wrap; padding-inline: 48px; /* 1:1 with source (overrides .container --gutter). */ } .site-footer .footer-tag { font-weight: 500; } .site-footer .footer-social { display: flex; gap: 22px; align-items: center; } .site-footer .footer-social a { color: var(--secondary); display: flex; transition: color .15s; } .site-footer .footer-social a:hover { color: var(--ink); } /* ---------- home: load reveal + hero-svg draw (pure CSS, reduced-motion safe). Scoped to .home so the global JS-gated .reveal (library cards) is untouched. */ .home .reveal { opacity: 0; transform: translateY(16px); animation: gg-rise .7s cubic-bezier(.2, .7, .2, 1) forwards; } .home .reveal.d1 { animation-delay: .05s; } .home .reveal.d2 { animation-delay: .12s; } .home .reveal.d3 { animation-delay: .19s; } .home .reveal.d4 { animation-delay: .26s; } .home .reveal.d5 { animation-delay: .33s; } .home .reveal.d6 { animation-delay: .40s; } @keyframes gg-rise { to { opacity: 1; transform: none; } } .home .hero-visual .draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: gg-draw 1.6s ease forwards .3s; } @keyframes gg-draw { to { stroke-dashoffset: 0; } } .home .hero-visual .fadein { opacity: 0; animation: gg-fin .9s ease forwards .9s; } @keyframes gg-fin { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .home .reveal, .home .hero-visual .draw, .home .hero-visual .fadein, .home .hero-network__pulse, .home .hero-network__dot, .home .hero-network__stop, .home .hero-emblem__stop { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; } } /* ---------- home + header/footer responsive (1:1 breakpoints) ---------- */ @media (max-width: 1180px) { .home .grid { grid-template-columns: repeat(3, 1fr); } .home .card { min-height: 200px; } } @media (max-width: 980px) { .site-header nav.main, .site-header .btn-ghost { display: none; } .site-header .burger { display: flex; } /* Single column; tighter gap. Vertical padding inherits the base clamp (no per-breakpoint override) so the stacked mobile hero is not over-tall. */ .home .hero { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); } .home .hero-visual { max-width: 460px; margin: 0 auto; width: 100%; } } @media (max-width: 720px) { .site-header .nav-wrap, .home .hero, .home .index { padding-left: 24px; padding-right: 24px; } .mobnav { padding-left: 24px; padding-right: 24px; } .home .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .home .card { min-height: 0; padding: 22px 18px 24px; } /* Cap the decorative hero visual so it does not eat a whole mobile screen. */ .home .hero-visual { max-width: 340px; } .site-footer .footer-wrap { flex-direction: column; align-items: flex-start; gap: 18px; padding-left: 24px; padding-right: 24px; } } @media (max-width: 440px) { .site-header .logo-text { display: none; } } /* ========================================================================== 13. Insights blog engine (single + landing + category — Adım "blog motoru") Scoped to .blog-* / .article-* / .toc / .faq-item / .key-facts / .quick-answer + .featured-post so nothing leaks into the library modules (.card-lib) or the coded home (.home). Tokens only, no inline styles, zero-CLS layout. ========================================================================== */ /* --- Single: hero ------------------------------------------------------- */ .blog-hero { padding-block: clamp(2rem, 6vw, 4rem) 0; max-width: 980px; } .blog-hero__eyebrow, .blog-landing__eyebrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .9rem; font-family: var(--mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); } .blog-hero__cat, .blog-landing__eyebrow a { color: var(--accent); font-weight: 600; } .blog-hero__title { margin: 0 0 .75rem; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.02em; max-width: 24ch; } .blog-hero__meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin: 0; color: var(--secondary); font-size: .9375rem; } .blog-hero__media { margin: clamp(1.25rem, 4vw, 2rem) 0 0; } .blog-hero__media img { width: 100%; border-radius: var(--radius); } /* --- Single: quick answer (GEO short-answer) ----------------------------- */ .quick-answer { max-width: 980px; padding-block: clamp(1.25rem, 3vw, 1.75rem) 0; } .quick-answer__card { position: relative; padding: 1.25rem 1.5rem 1.1rem; border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); border-radius: var(--radius); background: var(--card-bg); } .quick-answer__title { margin: 0 0 .4rem; font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .quick-answer__card p { margin: 0; font-size: 1.0625rem; line-height: 1.65; } .quick-answer__card p + p { margin-top: .6rem; } /* --- Single: key facts strip --------------------------------------------- */ .key-facts { max-width: 980px; padding-block: clamp(1rem, 3vw, 1.5rem) 0; } .key-facts__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: 0; } .key-facts__item { padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); } .key-facts__label { margin: 0 0 .15rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary); } .key-facts__value { margin: 0; font-weight: 700; } /* --- Single: article grid (sticky TOC + body) ----------------------------- */ .article-grid { display: grid; /* minmax(0,…), not bare 1fr: a wide table/code block in the body must not inflate the track past the viewport (1fr min = min-content blowout). */ grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(1.5rem, 4vw, 2.5rem); max-width: 1180px; } @media (min-width: 960px) { .article-grid { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } } .article-body { max-width: var(--measure); font-size: 1.0625rem; } /* TOC card: server-rendered, fixed layout (zero CLS); JS only toggles classes. Mobile/tablet (1-col grid): plain block above the article, no sticky. */ .article-aside .toc { padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); } /* Desktop (2-col grid): the sticky element must be the ASIDE, not the .toc — with .article-grid { align-items: start } the aside shrinks to the TOC's own height, so a sticky child would have zero room to stick. The grid ROW is as tall as the article body, so the start-aligned aside itself sticks fine. top = sticky header (78px) + breathing room; a long TOC scrolls internally. */ @media (min-width: 960px) { .article-aside { position: sticky; top: 96px; } .article-aside .toc { max-height: calc(100vh - 120px); overflow-y: auto; } } .toc__title { margin: 0 0 .6rem; font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--secondary); } .toc__list { margin: 0; padding: 0; list-style: none; } .toc__item { margin: 0; } .toc__item--h3 { padding-inline-start: .9rem; } .toc__link { display: block; padding: .3rem .5rem; border-inline-start: 2px solid transparent; border-radius: 6px; color: var(--secondary); font-size: .9rem; line-height: 1.35; } .toc__link:hover { color: var(--ink); text-decoration: none; } .toc__link.is-active { color: var(--accent); border-inline-start-color: var(--accent); font-weight: 600; background: var(--card-bg); } /* --- Single: body content polish ----------------------------------------- */ .article-body h2 { margin: 2.2rem 0 .8rem; font-size: clamp(1.4rem, 3vw, 1.75rem); scroll-margin-top: 96px; } .article-body h3 { margin: 1.6rem 0 .6rem; font-size: 1.2rem; scroll-margin-top: 96px; } .article-body img { border-radius: var(--radius); } .article-body blockquote { margin: 1.5rem 0; padding: .5rem 0 .5rem 1.25rem; border-inline-start: 3px solid var(--purple); color: var(--secondary); } .article-body pre { overflow-x: auto; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); } /* Tables: wrapped server-side in a focusable scroll region (a11y). */ .table-scroll { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--radius); } .table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .article-body table { width: 100%; min-width: 560px; margin: 0; border-collapse: collapse; font-size: .9375rem; } .article-body th, .article-body td { padding: .65rem .9rem; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; } .article-body thead th { font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--secondary); border-bottom: 1px solid var(--border-strong); } .article-body tbody tr:last-child td { border-bottom: 0; } /* --- Single: FAQ accordion (native
, opens without JS) ----------- */ .faq-item { margin: 0 0 .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); } .faq-item__q { padding: .9rem 1.1rem; font-weight: 700; cursor: pointer; list-style-position: inside; } .faq-item__q:hover { color: var(--accent); } .faq-item__q:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } .faq-item[open] .faq-item__q { border-bottom: 1px solid var(--border); color: var(--accent); } .faq-item__a { padding: .9rem 1.1rem .4rem; } /* --- Single: contact CTA --------------------------------------------------- */ .post-cta { max-width: 1180px; padding-block: 0 clamp(1.5rem, 4vw, 2.5rem); } .post-cta__card { padding: clamp(1.5rem, 4vw, 2.25rem); text-align: center; } .post-cta__title { margin: 0 0 .4rem; font-size: clamp(1.3rem, 3vw, 1.6rem); } .post-cta__text { margin: 0 auto 1.1rem; max-width: 52ch; color: var(--secondary); } /* --- Single: related posts -------------------------------------------------- */ .related-posts { padding-block: 0 clamp(2rem, 5vw, 3.5rem); } .related-posts__title { margin: 0 0 1rem; font-size: clamp(1.3rem, 3vw, 1.6rem); } /* --- Landing (/insights/) + category header -------------------------------- */ /* Spans the same 1320 rail as the featured card + grid below, so all three share one left edge; the intro line keeps its own 62ch measure cap. */ .blog-landing__header { padding-block: clamp(2rem, 6vw, 4rem) 1.5rem; } .blog-landing__intro { margin: .5rem 0 0; max-width: 62ch; color: var(--secondary); font-size: 1.0625rem; } .blog-landing__count { margin: .75rem 0 0; font-family: var(--mono); font-size: .8125rem; color: var(--secondary); } .blog-landing__cats { margin-top: 1.25rem; } .blog-landing__cats .chip a, a.chip { text-decoration: none; } .chip__count { margin-inline-start: .35rem; color: var(--tertiary); font-size: .75rem; } /* --- Landing: featured (latest) post --------------------------------------- */ .featured-post-wrap { padding-block: 0 clamp(1.25rem, 3vw, 2rem); } .featured-post { display: grid; grid-template-columns: 1fr; overflow: hidden; } @media (min-width: 880px) { .featured-post { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; } } .featured-post__thumb { display: block; height: 100%; } .featured-post__thumb img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .featured-post__body { padding: clamp(1.25rem, 3.5vw, 2.25rem); } .featured-post__eyebrow { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 .75rem; } .featured-post__badge { padding: .2rem .6rem; border-radius: 999px; background: var(--grad); color: #fff; font-family: var(--mono); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .featured-post__cat { font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .featured-post__title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: -.015em; } .featured-post__title a { color: var(--ink); } .featured-post__title a:hover { color: var(--accent); text-decoration: none; } .featured-post__excerpt { color: var(--secondary); margin: 0 0 .75rem; } .featured-post__excerpt p { margin: 0; } /* --- Cards: category chip row ----------------------------------------------- */ .card-post__chip { margin: 0; } .card-post__chip .chip { display: inline-block; padding: .15rem .6rem; border: 1px solid var(--border); border-radius: 999px; font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--secondary); } .card-post__chip .chip:hover { color: var(--accent); border-color: var(--border-strong); } /* --- Motion safety: anchor jumps obey reduced-motion ------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ========================================================================== 14. AI Lab hub (page-ai-lab.php — prompt + skill strips) ========================================================================== */ /* Coded GEO answer-block (fallback intro when the Elementor body is empty). */ .ai-lab-answer { margin: 0; max-width: 62ch; color: var(--secondary); font-size: 1.0625rem; } /* Strip header: section title + "View all →" on one baseline. */ .lab-strip__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: clamp(1rem, 2.5vw, 1.5rem); } .lab-strip__title { margin: 0; font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -.01em; } .lab-strip__all { font-family: var(--mono); font-size: .875rem; font-weight: 600; white-space: nowrap; color: var(--accent); text-decoration: none; } .lab-strip__all:hover, .lab-strip__all:focus-visible { text-decoration: underline; } /* ========================================================================== 15. Audit page (.gga-) — 1:1 translation of tools/audit-mockup-reference.html Every measurement, spacing, type size/weight, letter-spacing, radius and breakpoint is copied verbatim from the reference. Only colour ROLES are remapped: --bg/--ink/--accent/fonts reuse the theme tokens (light+dark); roles with no theme equivalent get --gga-* tokens carrying the reference values for both modes. Scoped entirely under .gga- — nothing leaks out. The CTA block is intentionally fixed-dark in BOTH modes (reference design). ========================================================================== */ :root { /* Reference [data-theme="light"] values (theme default is light). Deviation (justified): --gga-ter darkened from the reference #A6A59D — 2.27:1 on the page bg, below WCAG AA 4.5:1 for the 11px labels using it. */ --gga-surface: #FFFFFF; --gga-hd: #121214; --gga-sec: #6B6B70; --gga-ter: #6F6E68; /* Deviation (justified): small accent-coloured text — the raw accent is 3.3–3.6:1 on the light bg, sub-AA at 11–15px. Deeper same-family orange for light; the dark-mode accent already passes (≈6.3:1). */ --gga-ac-ink: #C2410C; --gga-line: rgba(20, 20, 20, .11); --gga-line2: rgba(20, 20, 20, .22); --gga-ok: #0F6E56; --gga-warn: #854F0B; --gga-bad: #A32D2D; /* Selection tint (Contact §16 — reference --acb). */ --gga-ac-bg: rgba(232, 89, 12, .07); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Reference :root (dark) values. */ --gga-surface: #141417; --gga-hd: #F6F6F8; --gga-sec: #9A9AA2; /* Deviation (justified): lightened from reference #67676F (3.46:1, sub-AA). */ --gga-ter: #84848D; --gga-ac-ink: var(--accent); --gga-line: rgba(255, 255, 255, .09); --gga-line2: rgba(255, 255, 255, .17); --gga-ok: #5DCAA5; --gga-warn: #FAC775; --gga-bad: #F09595; /* Selection tint (Contact §16 — reference --acb). */ --gga-ac-bg: rgba(244, 115, 58, .10); } } :root[data-theme="dark"] { --gga-surface: #141417; --gga-hd: #F6F6F8; --gga-sec: #9A9AA2; /* Deviation (justified): lightened from reference #67676F (3.46:1, sub-AA). */ --gga-ter: #84848D; --gga-ac-ink: var(--accent); --gga-line: rgba(255, 255, 255, .09); --gga-line2: rgba(255, 255, 255, .17); --gga-ok: #5DCAA5; --gga-warn: #FAC775; --gga-bad: #F09595; /* Selection tint (Contact §16 — reference --acb). */ --gga-ac-bg: rgba(244, 115, 58, .10); } /* --- Shell ----------------------------------------------------------------- */ .gga-wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; } /* --- Utility strip (full-bleed) --------------------------------------------- */ .gga-util { display: flex; justify-content: space-between; align-items: center; padding: 8px 32px; border-bottom: 0.5px solid var(--gga-line); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gga-ter); } .gga-util .gga-slot { display: flex; align-items: center; gap: 8px; color: var(--gga-sec); } .gga-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gga-ok); } @media (prefers-reduced-motion: no-preference) { .gga-dot { animation: gga-pls 2s ease-in-out infinite; } @keyframes gga-pls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } } /* --- Hero -------------------------------------------------------------------- */ .gga-hero { padding: 62px 0 46px; } .gga-kick { display: flex; align-items: baseline; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gga-ter); } .gga-kick .gga-big { font-size: 13px; color: var(--gga-ac-ink); } .gga-kick .gga-rl { flex: none; width: 34px; height: 1px; background: var(--accent); align-self: center; } .gga-h1 { font-size: 55px; line-height: .98; font-weight: 800; letter-spacing: -.035em; margin: 26px 0 0; color: var(--gga-hd); } .gga-h1 .gga-ind { display: block; padding-left: 52px; } .gga-h1 .gga-out { color: transparent; -webkit-text-stroke: 1.5px var(--gga-hd); } .gga-lead { font-size: 15.5px; color: var(--gga-sec); max-width: 46ch; margin: 24px 0 0; } .gga-ctar { display: flex; align-items: center; gap: 18px; margin: 28px 0 0; flex-wrap: wrap; } .gga-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); /* Deviation (justified): reference uses #fff on the accent — 3.58:1 light / 2.85:1 dark, sub-AA for 14px text. Dark ink passes both modes (≥4.7:1). */ color: #121214; font-weight: 600; font-size: 14px; padding: 13px 22px; border-radius: 10px; text-decoration: none; } .gga-btng { display: inline-flex; align-items: center; gap: 7px; color: var(--gga-hd); font-weight: 500; font-size: 14px; text-decoration: none; border-bottom: 1.5px solid var(--gga-hd); padding-bottom: 2px; } .gga-dstrip { display: flex; margin: 40px 0 0; border-top: 0.5px solid var(--gga-line2); border-bottom: 0.5px solid var(--gga-line2); } .gga-dcell { flex: 1; padding: 13px 0 13px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gga-sec); border-left: 0.5px solid var(--gga-line); } .gga-dcell:first-child { border-left: none; padding-left: 0; } .gga-dcell b { display: block; color: var(--gga-hd); font-size: 14px; font-weight: 500; letter-spacing: .02em; margin-bottom: 2px; } /* --- Exhibit A (ledger + finding) -------------------------------------------- */ .gga-exh { padding: 50px 0 54px; border-bottom: 0.5px solid var(--gga-line); display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: start; } .gga-exlab { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gga-ter); grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; } .gga-exlab .gga-xr { display: inline-block; width: 34px; height: 1px; background: var(--gga-line2); } .gga-ledger { background: var(--gga-surface); border: 0.5px solid var(--gga-line2); border-radius: 10px; padding: 20px 20px 14px; position: relative; } .gga-stamp { position: absolute; top: -13px; right: 14px; transform: rotate(-3deg); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gga-ac-ink); border: 1px solid var(--gga-ac-ink); border-radius: 3px; padding: 4px 9px; background: var(--bg); } .gga-lt2 { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gga-ter); padding-bottom: 10px; border-bottom: 0.5px solid var(--gga-line2); } .gga-lr2 { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 0.5px solid var(--gga-line); font-size: 13.5px; } .gga-lr2:last-child { border-bottom: none; } .gga-lr2 .gga-nm { flex: 1; color: var(--ink); } .gga-lr2 .gga-sh { font-family: var(--mono); font-size: 12px; color: var(--gga-sec); width: 42px; text-align: right; } .gga-lr2 .gga-gd { font-family: var(--mono); font-size: 13px; font-weight: 500; width: 18px; text-align: center; } .gga-gok { color: var(--gga-ok); } .gga-gwr { color: var(--gga-warn); } .gga-gbd { color: var(--gga-bad); } .gga-exn { padding-top: 34px; } .gga-exn .gga-fnd { font-size: 16px; font-weight: 600; color: var(--gga-hd); line-height: 1.45; letter-spacing: -.01em; } .gga-exn .gga-fnd em { font-style: normal; color: var(--gga-ac-ink); } .gga-exn .gga-ftn { font-size: 12px; color: var(--gga-ter); margin-top: 14px; line-height: 1.6; } /* --- Sector ticker (full-bleed marquee; static when reduced motion) ---------- */ .gga-tick { border-bottom: 0.5px solid var(--gga-line); overflow: hidden; white-space: nowrap; padding: 11px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gga-ter); } .gga-tick span { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .gga-tick span { animation: gga-mq 26s linear infinite; } @keyframes gga-mq { to { transform: translateX(-50%); } } } /* --- Contents ----------------------------------------------------------------- */ .gga-toc { padding: 50px 0; border-bottom: 0.5px solid var(--gga-line); } .gga-toct { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gga-ter); } .gga-tocr { display: flex; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 0.5px solid var(--gga-line); text-decoration: none; color: var(--ink); } .gga-tocr:last-child { border-bottom: none; } .gga-tocr .gga-n { font-family: var(--mono); font-size: 13px; color: var(--gga-ac-ink); width: 26px; } .gga-tocr .gga-t { font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--gga-hd); } .gga-tocr .gga-s { font-size: 12.5px; color: var(--gga-ter); margin-left: auto; font-family: var(--mono); } /* --- Chapters ------------------------------------------------------------------ */ .gga-ch { padding: 56px 0; border-bottom: 0.5px solid var(--gga-line); display: grid; grid-template-columns: 120px 1fr; gap: 24px; } /* Reference c5 carries an inline border-bottom:none; inline styles are not allowed in the theme, so the last chapter gets this modifier class instead. */ .gga-ch--last { border-bottom: none; } .gga-gn { font-size: 88px; font-weight: 800; line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--gga-line2); } .gga-cht { font-size: 27px; font-weight: 700; letter-spacing: -.025em; color: var(--gga-hd); line-height: 1.1; margin: 0; } .gga-chs { font-size: 14px; color: var(--gga-sec); max-width: 52ch; margin: 12px 0 0; } .gga-lay2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 22px 0 0; } .gga-li2 { display: flex; gap: 11px; padding: 9px 0; border-bottom: 0.5px solid var(--gga-line); font-size: 13px; color: var(--ink); } .gga-li2 .gga-mn { font-family: var(--mono); font-size: 11px; color: var(--gga-ter); width: 20px; flex: none; padding-top: 2px; } .gga-spec { display: inline-flex; flex-wrap: wrap; margin: 24px 0 0; border: 0.5px solid var(--gga-line2); border-radius: 6px; overflow: hidden; } .gga-spec span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gga-sec); padding: 9px 14px; border-left: 0.5px solid var(--gga-line); } .gga-spec span:first-child { border-left: none; color: var(--gga-hd); } .gga-spec b { color: var(--gga-ac-ink); font-weight: 500; } .gga-ftno { font-size: 11.5px; color: var(--gga-ter); margin-top: 12px; } /* --- ch02: terms table ----------------------------------------------------------- */ .gga-terms { width: 100%; border-collapse: collapse; margin: 24px 0 0; font-size: 12.5px; } .gga-terms th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gga-ter); text-align: left; padding: 0 12px 10px; border-bottom: 0.5px solid var(--gga-line2); font-weight: 500; } .gga-terms th.gga-hot { color: var(--gga-ac-ink); } .gga-terms td { padding: 11px 12px; border-bottom: 0.5px solid var(--gga-line); vertical-align: top; color: var(--gga-sec); line-height: 1.5; } .gga-terms td:first-child, .gga-terms th:first-child { padding-left: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gga-ter); width: 96px; } .gga-terms td b { color: var(--gga-hd); font-weight: 600; font-family: var(--mono); font-size: 13px; } .gga-terms tr:last-child td { border-bottom: none; } /* --- ch03: sector tabs + file ------------------------------------------------------ */ .gga-tabs { display: flex; gap: 6px; margin: 24px 0 0; } .gga-tab { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--gga-sec); border: 0.5px solid var(--gga-line2); border-bottom: none; border-radius: 0; padding: 9px 14px; cursor: pointer; background: transparent; } .gga-tab.on { color: var(--gga-hd); background: var(--gga-surface); border-top: 2px solid var(--accent); padding-top: 8px; } .gga-file { background: var(--gga-surface); border: 0.5px solid var(--gga-line2); padding: 20px; } .gga-file .gga-fh { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gga-ac-ink); padding-bottom: 12px; border-bottom: 0.5px solid var(--gga-line2); } .gga-file .gga-fl { display: flex; gap: 12px; padding: 11px 0; border-bottom: 0.5px solid var(--gga-line); font-size: 13.5px; color: var(--ink); line-height: 1.5; } .gga-file .gga-fl:last-child { border-bottom: none; } .gga-file .gga-fl .gga-ar { color: var(--gga-ac-ink); flex: none; } /* Progressive tabs: with JS off all five sector files render stacked (readable); audit-tabs.js adds .gga-files-js and shows only the .on file like the reference. */ .gga-files .gga-file + .gga-file { margin-top: 12px; } .gga-files-js .gga-file { display: none; } .gga-files-js .gga-file.on { display: block; } .gga-files-js .gga-file + .gga-file { margin-top: 0; } /* --- ch04: fit ---------------------------------------------------------------------- */ .gga-fit2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 22px 0 0; } .gga-fh2 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 10px; border-bottom: 0.5px solid var(--gga-line2); } .gga-fh2.gga-y { color: var(--gga-ok); } .gga-fh2.gga-n { color: var(--gga-bad); } .gga-fl2 { display: flex; gap: 11px; padding: 10px 0; border-bottom: 0.5px solid var(--gga-line); font-size: 13px; color: var(--gga-sec); line-height: 1.45; } .gga-fl2 .gga-mk { font-family: var(--mono); flex: none; width: 14px; } .gga-fl2.gga-y .gga-mk { color: var(--gga-ok); } .gga-fl2.gga-n .gga-mk { color: var(--gga-bad); } /* --- ch05: FAQ (native details, like the reference) ---------------------------------- */ .gga-faq { margin: 22px 0 0; border-top: 0.5px solid var(--gga-line); } .gga-faq details { border-bottom: 0.5px solid var(--gga-line); } .gga-faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: 15px; font-weight: 500; display: flex; align-items: baseline; gap: 14px; color: var(--gga-hd); } .gga-faq summary::-webkit-details-marker { display: none; } .gga-faq summary .gga-qn { font-family: var(--mono); font-size: 11.5px; color: var(--gga-ter); flex: none; } .gga-faq summary .gga-pl { color: var(--gga-ter); margin-left: auto; flex: none; font-family: var(--mono); } .gga-faq details[open] summary .gga-pl { color: var(--gga-ac-ink); } .gga-faq .gga-fa { font-size: 13.5px; color: var(--gga-sec); padding: 0 0 18px 38px; line-height: 1.6; max-width: 60ch; } /* --- Closing CTA (intentionally fixed-dark in BOTH modes, per the reference) --------- */ .gga-cta { background: #0F0F12; border: 0.5px solid var(--gga-line); border-radius: 14px; padding: 50px 32px; position: relative; overflow: hidden; margin-top: 54px; } .gga-cta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(96deg, #7C3AED, #9333EA, #F4733A); } .gga-cta .gga-ck { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; /* Deviation (justified): reference #67676F is 3.3:1 on the fixed-dark CTA. */ color: #8A8A92; } .gga-cta .gga-h { font-size: 34px; font-weight: 800; color: #F6F6F8; letter-spacing: -.03em; line-height: 1.05; margin: 16px 0 0; } .gga-cta .gga-h em { font-style: normal; color: transparent; -webkit-text-stroke: 1.2px #F4733A; } .gga-cta .gga-s { font-size: 13.5px; color: #9A9AA2; margin: 16px 0 0; max-width: 46ch; } .gga-pbtn { display: inline-flex; align-items: center; gap: 8px; background: #F4733A; /* Deviation (justified): #fff on the accent is 2.85:1; dark ink is 5.9:1. */ color: #121214; font-weight: 600; font-size: 14px; padding: 13px 22px; border-radius: 10px; text-decoration: none; margin-top: 24px; } .gga-cta .gga-mn { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; /* Deviation (justified): reference #56565E is 2.6:1 on the fixed-dark CTA. */ color: #84848D; margin: 22px 0 0; } /* --- Outline wordmark ------------------------------------------------------------------ */ .gga-bigwm { font-size: 57px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gga-line2); padding: 46px 0 0; user-select: none; } /* --- Mobile (reference 600px breakpoint) ------------------------------------------------- */ @media (max-width: 600px) { .gga-h1 { font-size: 38px; } .gga-h1 .gga-ind { padding-left: 24px; } .gga-exh { grid-template-columns: 1fr; } .gga-ch { grid-template-columns: 1fr; } .gga-gn { font-size: 54px; } .gga-lay2, .gga-fit2 { grid-template-columns: 1fr; } .gga-dstrip { flex-wrap: wrap; } .gga-dcell { flex: 1 1 50%; padding-left: 0; border-left: none; } /* Deviation (justified): reference overflows 13px at 375 (.tabs never wraps); wrap mirrors the reference's own .dstrip mobile pattern. */ .gga-tabs { flex-wrap: wrap; } } /* ========================================================================== 16. Contact page (.ggc-) — 1:1 translation of tools/contact-mockup-reference.html Every measurement, spacing, type size/weight, letter-spacing, radius and breakpoint is copied verbatim from the reference. Colour ROLES map to the theme/§15 tokens (single source): --bg/--ink/--accent/--sans/--mono are the theme tokens; --sf→--gga-surface, --hd→--gga-hd, --sec→--gga-sec, --ter→--gga-ter, --ln→--gga-line, --ln2→--gga-line2, --aci→--gga-ac-ink, --ok→--gga-ok, --acb→--gga-ac-bg (the one new token, defined in §15 blocks). Deviations (justified, no other value touched): - reference --sf2 (#1A1A1F dark / #FFFFFF light) has no theme/§15 token → mapped to --gga-surface (light identical #FFFFFF; dark Δ #1A1A1F→#141417, ~2% lightness on the control fills — single-source rule wins). - focus rings: reference hardcodes rgba(232,89,12,.3/.22) in BOTH modes → derived from the token instead: color-mix(in srgb, var(--accent) 30%/22%, transparent). Light mode computes to the exact reference values; dark mode follows the dark accent (#F4733A) instead of keeping the light orange. - submit button: reference #FFF on #E8590C is 3.58:1 (light) / 2.85:1 (dark), sub-AA — same fix as §15 .gga-btn but token-derived: light ink var(--gga-hd) (#121214 → 5.27:1), dark ink var(--bg) (#0D0D0F → 6.82:1). - reference inline style on the Faster-paths label → .ggc-glab--alt class. - radio/checkbox groups are real
/ (a11y) with UA chrome reset so they render byte-identical to the reference
s. - no-:has() fallback: .is-checked class (JS) + :focus-within ring, gated behind @supports not selector(:has(*)) — modern browsers never match it. Scoped entirely under .ggc- — nothing leaks out. ========================================================================== */ /* --- Shell ----------------------------------------------------------------- */ .ggc-wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; } /* --- Utility strip (full-bleed) --------------------------------------------- */ .ggc-util { display: flex; justify-content: space-between; align-items: center; padding: 8px 32px; border-bottom: 0.5px solid var(--gga-line); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gga-ter); } .ggc-util .ggc-slot { display: flex; align-items: center; gap: 8px; color: var(--gga-sec); } .ggc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gga-ok); } @media (prefers-reduced-motion: no-preference) { .ggc-dot { animation: ggc-pls 2s ease-in-out infinite; } @keyframes ggc-pls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } } /* --- Hero ------------------------------------------------------------------- */ .ggc-hero { padding: 56px 0 38px; } .ggc-kick { display: flex; align-items: baseline; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gga-ter); } .ggc-kick .ggc-big { font-size: 13px; color: var(--gga-ac-ink); } .ggc-kick .ggc-rl { flex: none; width: 34px; height: 1px; background: var(--accent); align-self: center; } .ggc-h1 { font-size: 52px; line-height: .99; font-weight: 800; letter-spacing: -.035em; margin: 24px 0 0; color: var(--gga-hd); } .ggc-h1 .ggc-ind { display: block; padding-left: 48px; } .ggc-h1 .ggc-out { color: transparent; -webkit-text-stroke: 1.5px var(--gga-hd); } .ggc-lead { font-size: 15px; color: var(--gga-sec); max-width: 50ch; margin: 20px 0 0; } /* --- Two-column grid ---------------------------------------------------------- */ .ggc-grid { display: grid; grid-template-columns: .92fr 1.4fr; gap: 30px; padding: 42px 0 56px; align-items: start; } .ggc-glab { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gga-ter); display: flex; align-items: center; gap: 12px; } .ggc-glab .ggc-xr { display: inline-block; width: 34px; height: 1px; background: var(--gga-line2); } /* Reference: inline style="padding-bottom:6px" on the Faster-paths label. */ .ggc-glab--alt { padding-bottom: 6px; } /* --- Left: channels, facts, note --------------------------------------------- */ .ggc-chnl { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 0.5px solid var(--gga-line); text-decoration: none; color: var(--ink); } .ggc-chnl:first-child { border-top: 0.5px solid var(--gga-line2); } .ggc-chnl .ggc-ci { width: 38px; height: 38px; border: 0.5px solid var(--gga-line2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--gga-ac-ink); font-size: 17px; flex: none; } .ggc-chnl .ggc-ct { font-size: 14.5px; font-weight: 600; color: var(--gga-hd); } .ggc-chnl .ggc-cs { font-family: var(--mono); font-size: 11px; color: var(--gga-ter); margin-top: 1px; } .ggc-chnl .ggc-ar { margin-left: auto; color: var(--gga-ter); } .ggc-facts { margin-top: 26px; border-top: 0.5px solid var(--gga-line2); } .ggc-frow { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 0.5px solid var(--gga-line); font-size: 12.5px; } .ggc-frow .ggc-fk { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gga-ter); } .ggc-frow .ggc-fv { color: var(--ink); text-align: right; } .ggc-note { margin-top: 24px; border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; } .ggc-note .ggc-nt { font-size: 13px; color: var(--gga-sec); margin: 0; } .ggc-note .ggc-nt em { font-style: normal; color: var(--gga-ac-ink); font-weight: 600; } /* --- Right: the brief card ----------------------------------------------------- */ .ggc-brief { background: var(--gga-surface); border: 0.5px solid var(--gga-line2); border-radius: 12px; padding: 26px 26px 24px; position: relative; } .ggc-stamp { position: absolute; top: -13px; right: 18px; transform: rotate(-3deg); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gga-ac-ink); border: 1px solid var(--gga-ac-ink); border-radius: 3px; padding: 4px 9px; background: var(--bg); } .ggc-bt2 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gga-ter); padding-bottom: 6px; border-bottom: 0.5px solid var(--gga-line2); display: flex; justify-content: space-between; } .ggc-bt2 .ggc-req b { color: var(--gga-ac-ink); font-weight: 500; } .ggc-fld { padding: 18px 0 0; } .ggc-fl3 { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; color: var(--gga-hd); } .ggc-fn3 { font-family: var(--mono); font-size: 11px; color: var(--gga-ac-ink); font-weight: 500; } .ggc-rq { color: var(--gga-ac-ink); } .ggc-opt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gga-ter); margin-left: auto; } /* A11y structure: groups are real fieldsets; UA chrome reset so the render matches the reference
s. (.ggc-fld fieldsets keep the 18px top pad.) */ fieldset.ggc-fld, .ggc-qgrp { border: 0; margin: 0; min-width: 0; } .ggc-qgrp { padding: 0; } /* Float pulls the legend out of its over-the-border magic position into the content flow, so the fieldset's 18px top pad + the group's own margins land exactly like the reference
s. Fieldsets are BFCs — the float stays in. */ legend.ggc-fl3, legend.ggc-qlab { float: left; width: 100%; padding: 0; } legend.ggc-fl3 + *, legend.ggc-qlab + * { clear: both; } /* --- Service cards (01) -------------------------------------------------------- */ .ggc-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; } .ggc-sc { position: relative; border: 1.5px solid var(--gga-line2); border-radius: 10px; padding: 13px 14px; cursor: pointer; background: var(--gga-surface); min-height: 64px; display: block; } .ggc-sc input { position: absolute; opacity: 0; pointer-events: none; } .ggc-sc .ggc-st { font-size: 13.5px; font-weight: 600; color: var(--gga-hd); padding-right: 22px; } .ggc-sc .ggc-ss { font-family: var(--mono); font-size: 11px; color: var(--gga-ter); margin-top: 3px; } .ggc-sc .ggc-ck { position: absolute; top: 11px; right: 11px; width: 18px; height: 18px; border: 1.5px solid var(--gga-line2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: transparent; font-size: 11px; } .ggc-sc:has(input:checked) { border-color: var(--accent); background: var(--gga-ac-bg); } .ggc-sc:has(input:checked) .ggc-ck { border-color: var(--accent); color: var(--gga-ac-ink); } .ggc-sc:has(input:checked) .ggc-ss { color: var(--gga-ac-ink); } .ggc-sc:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .ggc-route { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--gga-ac-ink); margin-top: 10px; min-height: 18px; } /* --- Text inputs ----------------------------------------------------------------- */ .ggc-fld input[type="text"], .ggc-fld input[type="email"], .ggc-fld textarea { width: 100%; margin-top: 9px; background: transparent; border: 0.5px solid var(--gga-line2); border-radius: 8px; color: var(--ink); font-family: var(--sans); font-size: 15px; padding: 13px 14px; outline: none; min-height: 48px; } .ggc-fld input::placeholder, .ggc-fld textarea::placeholder { color: var(--gga-ter); } .ggc-fld input:focus, .ggc-fld textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .ggc-fld textarea { min-height: 96px; resize: vertical; } .ggc-vok { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gga-ok); margin-top: 6px; } .ggc-hint { font-size: 12px; color: var(--gga-ter); margin-top: 6px; } /* --- Spend chips (05) -------------------------------------------------------------- */ .ggc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ggc-chip { position: relative; font-family: var(--mono); font-size: 11.5px; color: var(--gga-sec); border: 1.5px solid var(--gga-line2); border-radius: 99px; padding: 9px 15px; cursor: pointer; background: var(--gga-surface); min-height: 38px; display: inline-flex; align-items: center; gap: 7px; } .ggc-chip input { position: absolute; opacity: 0; pointer-events: none; } .ggc-chip .ggc-ti { font-size: 13px; color: transparent; width: 13px; } .ggc-chip:has(input:checked) { border-color: var(--accent); background: var(--gga-ac-bg); color: var(--gga-hd); font-weight: 500; } .ggc-chip:has(input:checked) .ggc-ti { color: var(--gga-ac-ink); } .ggc-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* --- Quick answers (06) --------------------------------------------------------------- */ .ggc-qlab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gga-ter); margin-top: 12px; } .ggc-qas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; } .ggc-qa { position: relative; font-size: 12.5px; color: var(--gga-sec); border: 1.5px solid var(--gga-line2); border-radius: 8px; padding: 8px 12px; cursor: pointer; background: var(--gga-surface); display: inline-flex; align-items: center; gap: 8px; line-height: 1.35; } .ggc-qa input { position: absolute; opacity: 0; pointer-events: none; } .ggc-qa b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--gga-ac-ink); font-weight: 500; } .ggc-qa .ggc-ti { font-size: 13px; color: transparent; width: 13px; flex: none; } .ggc-qa:has(input:checked) { border-color: var(--accent); background: var(--gga-ac-bg); color: var(--gga-hd); } .ggc-qa:has(input:checked) .ggc-ti { color: var(--gga-ac-ink); } .ggc-qa:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* --- Consent + submit row ---------------------------------------------------------------- */ .ggc-cons { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; padding-top: 18px; border-top: 0.5px solid var(--gga-line2); } .ggc-cons input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; } .ggc-cons label { font-size: 12.5px; color: var(--gga-sec); line-height: 1.55; } .ggc-cons a { color: var(--gga-ac-ink); text-decoration: underline; text-underline-offset: 2px; } .ggc-brow { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; } .ggc-sbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); /* Deviation (justified, token-derived): reference #FFF is 3.58:1 light / 2.85:1 dark, sub-AA — see §16 header. Light ink #121214 → 5.27:1. */ color: var(--gga-hd); font-weight: 600; font-size: 14.5px; padding: 14px 24px; border-radius: 10px; border: none; cursor: pointer; font-family: var(--sans); min-height: 48px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ggc-sbtn { /* Dark ink on the dark accent: #0D0D0F on #F4733A → 6.82:1. */ color: var(--bg); } } :root[data-theme="dark"] .ggc-sbtn { color: var(--bg); } .ggc-brow .ggc-bm { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gga-ter); } /* --- Faster paths + wordmark ----------------------------------------------------------------- */ .ggc-altq { padding: 0 0 56px; } .ggc-aqr { display: flex; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 0.5px solid var(--gga-line); text-decoration: none; } .ggc-aqr:first-child { border-top: 0.5px solid var(--gga-line2); } .ggc-aqr .ggc-n { font-family: var(--mono); font-size: 13px; color: var(--gga-ac-ink); width: 26px; flex: none; } .ggc-aqr .ggc-t { font-size: 16px; font-weight: 600; color: var(--gga-hd); } .ggc-aqr .ggc-s { font-size: 12px; color: var(--gga-ter); margin-left: auto; font-family: var(--mono); text-align: right; } .ggc-bigwm { font-size: 55px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gga-line2); padding: 40px 0 0; user-select: none; } /* --- No-:has() fallback (progressive; modern browsers never match) ------------ */ @supports not selector(:has(*)) { .ggc-sc.is-checked, .ggc-chip.is-checked, .ggc-qa.is-checked { border-color: var(--accent); background: var(--gga-ac-bg); } .ggc-chip.is-checked, .ggc-qa.is-checked { color: var(--gga-hd); } .ggc-chip.is-checked { font-weight: 500; } .ggc-sc.is-checked .ggc-ck { border-color: var(--accent); color: var(--gga-ac-ink); } .ggc-sc.is-checked .ggc-ss { color: var(--gga-ac-ink); } .ggc-chip.is-checked .ggc-ti, .ggc-qa.is-checked .ggc-ti { color: var(--gga-ac-ink); } .ggc-sc:focus-within, .ggc-chip:focus-within, .ggc-qa:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } } /* --- 600px breakpoint (reference) ---------------------------------------------- */ @media (max-width: 600px) { .ggc-h1 { font-size: 36px; } .ggc-h1 .ggc-ind { padding-left: 22px; } .ggc-grid { grid-template-columns: 1fr; } .ggc-svc { grid-template-columns: 1fr; } } /* ========================================================================== 17. Language switcher (.lang-switcher) — header EN / TR / DE Mono 11px codes, "/" separators, no flags (dossier voice). Active language uses --gga-ac-ink (the AA-safe accent ink from §15 — the raw accent is 3.3:1 at 11px in light mode, sub-AA); hover = ink. Desktop copy sits left of the theme toggle and hides at the 980px header breakpoint; the mobnav copy provides ≥40px touch targets. Pure links, no JS. ========================================================================== */ .lang-switcher ul { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; } .lang-switcher li { display: flex; align-items: center; } .lang-switcher li + li::before { content: "/"; content: "/" / ""; font-family: var(--mono); font-size: 11px; color: var(--tertiary); padding: 0 2px; } .lang-switcher a { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--secondary); text-decoration: none; padding: 8px 5px; transition: color .18s; } .lang-switcher a:hover, .lang-switcher a:focus-visible { color: var(--ink); } .lang-switcher a.is-active { color: var(--gga-ac-ink); font-weight: 500; } /* Visually separate the language switcher from the CTA in the desktop header right-cluster (a thin rule + a little breathing room). Header copy only — the mobnav copy keeps its own spacing. */ .site-header .nav-right .lang-switcher { padding-left: 16px; border-left: 1px solid var(--border); } @media (max-width: 980px) { /* The mobnav copy takes over below the header breakpoint (same rule that hides nav.main + .btn-ghost). */ .site-header .lang-switcher { display: none; } } /* Mobile overlay copy: bigger touch targets, no list counters/borders from the .mobnav a rules. content:none removes the ::before box, so the gg-m counter never increments on switcher links (menu numbering stays intact). */ .mobnav .lang-switcher { margin-top: 18px; } .mobnav .lang-switcher a { font-size: 14px; padding: 12px 10px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: none; } .mobnav .lang-switcher a::before { content: none; } .mobnav .lang-switcher li + li::before { font-size: 14px; padding: 0 4px; } /* ========================================================================== 18. Social share row (WhatsApp / X / LinkedIn) — inc/share.php Server-rendered links, no JS. Mobile-first, dark-aware, brand hover, visible focus. Alignment: the row binds to --measure (the reading column, §13) and is emitted right after the tags row (.entry-footer) on every single template, so body text + tags + share share one left edge, one width and ONE divider (the tags row's own border-top; the share row adds none, to avoid a stacked / half-width rule). On the post the share call lives inside .article-body; on the library singles it follows .entry-footer in the same .container — and the library tags row is capped to --measure below so it matches too. ========================================================================== */ .gg-share { /* Brand constants (network identity, not the theme palette) kept as named tokens so the hover rules carry no inline magic hex. */ --gg-brand-whatsapp: #25D366; --gg-brand-linkedin: #0A66C2; --gg-brand-x: var(--ink); display: flex; flex-wrap: wrap; align-items: center; /* SHARE label baseline-centred to the button row. */ gap: .75rem 1rem; max-width: var(--measure); /* same reading column as the body + tags. */ margin-top: 1.5rem; /* same vertical rhythm as .entry-footer. */ } /* Cap the library tags row to the reading measure so tags + share + body text share one left edge and width (the post's tags already sit in .article-body, which is --measure). Code/badge blocks deliberately stay full-bleed. */ .library-single .entry-footer { max-width: var(--measure); } .gg-share__title { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--secondary); } .gg-share__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; } .gg-share__item { margin: 0; } .gg-share__link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; /* a11y touch target */ padding: .5rem .875rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--ink); background: var(--card-bg); font-size: .875rem; font-weight: 600; line-height: 1; text-decoration: none; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .gg-share__icon { flex: 0 0 auto; width: 20px; height: 20px; } .gg-share__label { white-space: nowrap; } /* Cosmetic share count: shares the title's scale/weight/colour so it reads as meta, baseline-centred to the pills by the nav's align-items (no own border, no layout shift). Tokens only; dark-mode legible via --secondary. */ .gg-share__count { font-size: .8125rem; font-weight: 600; color: var(--secondary); white-space: nowrap; } /* Hover / focus: tint to each network's brand colour. Focus is keyboard-only (:focus-visible) and reuses the global 3px accent outline (base reset §2). */ .gg-share__link:hover, .gg-share__link:focus-visible { text-decoration: none; } .gg-share__link--whatsapp:hover, .gg-share__link--whatsapp:focus-visible { color: var(--gg-brand-whatsapp); border-color: var(--gg-brand-whatsapp); } .gg-share__link--x:hover, .gg-share__link--x:focus-visible { color: var(--gg-brand-x); border-color: var(--gg-brand-x); } .gg-share__link--linkedin:hover, .gg-share__link--linkedin:focus-visible { color: var(--gg-brand-linkedin); border-color: var(--gg-brand-linkedin); } /* Mobile: stack the SHARE label above the button grid; the list already flex-wraps the pills as whole units (no ragged overflow, no h-scroll). */ @media (max-width: 480px) { .gg-share { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .gg-share__link { transition: none; } } /* ========================================================================== 19. Elementor compatibility layer — theme stays the colour authority Elementor's Default Kit prints fixed default Globals on body.elementor-kit-{id} (--e-global-color-text:#7A7A7A, accent #61CE70, primary #6EC1E4, font Roboto) that ignore the theme's light/dark token system. We RE-POINT those Elementor Global custom properties at the theme tokens on the .elementor content wrapper, so any widget bound to a Global colour/font follows light/dark automatically. The theme is the single source of truth; Elementor is layout/content only. Why .elementor (not body): the vars live on body.elementor-kit-{id}; setting them on the nearer ancestor .elementor overrides them for the whole Elementor subtree regardless of the kit id — no !important, no hardcoded hex, fully reversible (delete §19). Per-widget explicit colours (higher specificity / inline) still win, so intentional widget styling is untouched. ========================================================================== */ .elementor { /* Global colours → theme tokens (auto light/dark, [data-theme] + OS pref). */ --e-global-color-primary: var(--accent); --e-global-color-secondary: var(--purple); --e-global-color-text: var(--ink); --e-global-color-accent: var(--accent); /* Global typography → theme font stack (kills the Roboto default + the second web-font payload; one font system per the performance skill). */ --e-global-typography-primary-font-family: var(--sans); --e-global-typography-secondary-font-family: var(--sans); --e-global-typography-text-font-family: var(--sans); --e-global-typography-accent-font-family: var(--sans); } /* Structural wrappers stay transparent so the theme body background shows through in both modes. Elementor renders INTENTIONAL section/widget backgrounds via higher-specificity per-element selectors, so those still apply; this only neutralises the implicit/default backgrounds. */ .elementor, .elementor .e-con, .elementor .e-con-inner, .elementor .elementor-section, .elementor .elementor-container, .elementor .elementor-widget, .elementor .elementor-widget-container { background-color: transparent; } /* Default widget text inherits the theme's main text colour unless the widget sets its own (per-widget rules are more specific and still win). */ .elementor .elementor-widget-container { color: inherit; } /* ========================================================================== 20. Elementor-Audit faithful compatibility (§15 .gga- rendered 1:1 inside Elementor's native container/widget wrapper DOM — tools/elementor-native- audit2.php). Scoped under .elementor; no global leak; reuses §15 --gga-* tokens (no new hex). Three jobs: (a) neutralise Elementor's own box model so §15 owns layout, (b) promote inner widget nodes so §15 leaf flex/grid works, (c) re-assert §15 section layout + restyle native Tabs/Accordion to the .gga look at a specificity that beats Elementor's .e-con / widget defaults. ========================================================================== */ /* a. Neutralise Elementor container box model (vars → 0 so §15 paddings, set below at higher specificity, win; gap 0 so §15 margins control rhythm). */ .elementor [class*="gga-"].e-con { --gap: 0px; --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0; gap: 0; width: 100%; max-width: none; min-height: 0; } /* Widget wrappers: kill Elementor inter-widget margin (§15 margins drive). */ .elementor [class*="gga-"].elementor-widget { margin: 0; } /* b. Promote each widget's inner container to display:contents so the .gga- class on the wrapper directly parents the real content (spans/

/), letting §15 inner flex/grid (kick, dcell, spec, li2, fl2, exlab, tocr cells, ledger cells) render verbatim. Inner Elementor nodes inherit typography. */ .elementor [class*="gga-"].elementor-widget > .elementor-widget-container { display: contents; } .elementor [class*="gga-"] .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; } .elementor [class*="gga-"] .elementor-widget-text-editor p { margin: 0; } .elementor [class*="gga-"] .elementor-widget-text-editor { color: inherit; } /* c. Rail + section layout, re-asserted over Elementor's .e-con flex. */ .elementor .gga-wrap { max-width: 1100px; margin-inline: auto; padding: 0 32px; display: block; } .elementor .gga-util { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 32px; border-bottom: .5px solid var(--gga-line); } .elementor .gga-hero { display: block; padding: 62px 0 46px; } .elementor .gga-util { --flex-direction: row; } .elementor .gga-ctar { --flex-direction: row; display: flex; flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; } .elementor .gga-dstrip { --flex-direction: row; display: flex; flex-direction: row; margin-top: 40px; border-top: .5px solid var(--gga-line2); border-bottom: .5px solid var(--gga-line2); } .elementor .gga-exh { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: start; padding: 50px 0 54px; border-bottom: .5px solid var(--gga-line); } .elementor .gga-exlab { grid-column: 1 / -1; } .elementor .gga-ledger { display: block; position: relative; background: var(--gga-surface); border: .5px solid var(--gga-line2); border-radius: 10px; padding: 20px 20px 14px; } .elementor .gga-lr2 { --flex-direction: row; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 11px 0; border-bottom: .5px solid var(--gga-line); } .elementor .gga-lr2:last-child { border-bottom: none; } .elementor .gga-exn { display: block; padding-top: 34px; } .elementor .gga-tick { padding: 11px 0; border-bottom: .5px solid var(--gga-line); overflow: hidden; white-space: nowrap; } .elementor .gga-toc { display: block; padding: 50px 0; border-bottom: .5px solid var(--gga-line); } .elementor .gga-tocr { --flex-direction: row; display: flex; flex-direction: row; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: .5px solid var(--gga-line); } .elementor .gga-tocr:last-child { border-bottom: none; } .elementor .gga-ch { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 56px 0; border-bottom: .5px solid var(--gga-line); } .elementor .gga-ch--last { border-bottom: none; } .elementor .gga-chbody { display: block; } .elementor .gga-lay2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 22px; } .elementor .gga-fit2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; } .elementor .gga-fitcol { display: block; } /* CTA fixed-dark in BOTH modes (§15) — re-assert over §19's transparent .e-con. */ .elementor .gga-cta { display: block; background: #0F0F12; border: .5px solid var(--gga-line); border-radius: 14px; padding: 50px 32px; position: relative; overflow: hidden; margin-top: 54px; } .elementor .gga-cta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(96deg, #7C3AED, #9333EA, #F4733A); } /* Buttons → §15 .gga-btn / .gga-btng / .gga-pbtn look (Elementor button core). */ .elementor .gga-btn .elementor-button, .elementor .gga-pbtn .elementor-button { background: var(--accent); color: #121214; font-weight: 600; font-size: 14px; padding: 13px 22px; border-radius: 10px; border: none; } .elementor .gga-pbtn .elementor-button { background: #F4733A; } .elementor .gga-pbtn { margin-top: 24px; } .elementor .gga-btng .elementor-button { background: transparent; color: var(--gga-hd); font-weight: 500; font-size: 14px; padding: 0 0 2px; border: none; border-bottom: 1.5px solid var(--gga-hd); border-radius: 0; } .elementor .gga-btn .elementor-button:hover { background: var(--accent); } /* d. Decorative bits that were standalone in §15. */ .elementor .gga-slot { display: inline-flex; align-items: center; gap: 8px; } .elementor .gga-slot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gga-ok); flex: none; } .elementor .gga-tickspan { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .elementor .gga-tickspan { animation: gga-mq 26s linear infinite; } .elementor .gga-util .gga-slot::before { animation: gga-pls 2s ease-in-out infinite; } } /* e. Native Tabs widget → §15 .gga-tabs / .gga-file look. */ .elementor .gga-sectortabs .elementor-tabs-wrapper { display: flex; gap: 6px; border: none; } .elementor .gga-sectortabs .elementor-tab-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--gga-sec); border: .5px solid var(--gga-line2); border-bottom: none; border-radius: 0; padding: 9px 14px; background: transparent; } .elementor .gga-sectortabs .elementor-tab-title.elementor-active { color: var(--gga-hd); background: var(--gga-surface); border-top: 2px solid var(--accent); padding-top: 8px; } .elementor .gga-sectortabs .elementor-tab-content, .elementor .gga-sectortabs .elementor-tabs-content-wrapper { background: var(--gga-surface); border: .5px solid var(--gga-line2); } .elementor .gga-sectortabs .elementor-tab-content { padding: 20px; } .elementor .gga-sectortabs .gga-fl { display: flex; gap: 12px; padding: 11px 0; border-bottom: .5px solid var(--gga-line); font-size: 13.5px; color: var(--ink); line-height: 1.5; } .elementor .gga-sectortabs .gga-fl:last-child { border-bottom: none; } .elementor .gga-sectortabs .gga-ar { color: var(--gga-ac-ink); flex: none; } /* f. Native Accordion → §15 .gga-faq look. */ .elementor .gga-faq.elementor-widget { border-top: .5px solid var(--gga-line); margin-top: 22px; } .elementor .gga-faq .elementor-accordion-item { border: none; border-bottom: .5px solid var(--gga-line); } .elementor .gga-faq .elementor-tab-title { padding: 16px 0; font-size: 15px; font-weight: 500; color: var(--gga-hd); border: none; background: transparent; display: flex; align-items: baseline; gap: 14px; } .elementor .gga-faq .gga-qn { font-family: var(--mono); font-size: 11.5px; color: var(--gga-ter); flex: none; } .elementor .gga-faq .elementor-accordion-icon { margin-left: auto; color: var(--gga-ter); } .elementor .gga-faq .elementor-active .elementor-accordion-icon { color: var(--gga-ac-ink); } .elementor .gga-faq .elementor-tab-content { padding: 0 0 18px 38px; font-size: 13.5px; color: var(--gga-sec); line-height: 1.6; border: none; } /* g. Mobile parity (§15 reference 600px). */ @media (max-width: 600px) { .elementor .gga-exh, .elementor .gga-ch, .elementor .gga-lay2, .elementor .gga-fit2 { grid-template-columns: 1fr; } .elementor .gga-dstrip { flex-wrap: wrap; } }