/* * COMPONENTS * Load after tokens.css. Global foundations and reusable UI, not page layouts. * Variants are additive: class="button button--secondary". */ .sr-only { position: absolute; width: var(--border-width-thin); height: var(--border-width-thin); padding: 0; margin: calc(-1 * var(--border-width-thin)); overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 0; left: var(--space-5); z-index: var(--z-skip); padding: var(--space-3) var(--space-5); background: var(--color-primary); color: var(--color-on-primary); transform: translateY(-150%); } .skip-link:focus { transform: translateY(var(--space-3)); } /* Contrast is an explicit surface, not a second site-wide theme. */ .card--contrast { --color-heading: var(--color-on-contrast); --color-text: var(--color-on-contrast); --color-text-muted: var(--color-on-contrast-muted); --color-text-link: var(--color-on-contrast-accent); --color-focus: var(--color-on-contrast-accent); --icon-tile-bg: var(--color-surface-contrast-soft); --icon-tile-color: var(--color-highlight); color: var(--color-on-contrast); background: var(--color-surface-contrast); } /* Text labels and icons */ .eyebrow { display: flex; align-items: center; gap: var(--eyebrow-gap); margin-bottom: var(--eyebrow-space); font-family: var(--font-family-mono); font-size: var(--eyebrow-size); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); text-transform: uppercase; letter-spacing: var(--letter-spacing-eyebrow); color: var(--color-accent); } /*.eyebrow::before { content: ""; width: var(--eyebrow-line-width); height: var(--border-width-thin); flex: 0 0 auto; background: currentColor; }*/ .eyebrow--plain::before { display: none; } .card--contrast .eyebrow { color: var(--color-on-contrast-accent); } .icon { width: var(--icon-size-md); height: var(--icon-size-md); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .icon--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); } .icon--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); } .icon__tone { fill: var(--color-surface-accent); stroke: none; } .icon--premium { stroke-width: var(--icon-stroke-premium); } .icon-tile { display: inline-grid; place-items: center; width: var(--icon-tile-size); height: var(--icon-tile-size); flex: 0 0 auto; border: var(--border-default); border-radius: var(--icon-tile-radius); color: var(--icon-tile-color); background: var(--icon-tile-bg); } .icon-tile--premium { width: var(--icon-tile-size-lg); height: var(--icon-tile-size-lg); background: var(--gradient-surface); box-shadow: var(--shadow-inset), var(--shadow-sm); } .icon-tile--premium .icon { width: var(--icon-size-lg); height: var(--icon-size-lg); } .icon-tile--contrast { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-highlight); } /* Buttons: primary, secondary, contrast and ghost; independent size variants. */ .button { --_button-bg: var(--button-primary-bg); --_button-text: var(--button-primary-text); --_button-border: var(--button-primary-bg); --_button-hover: var(--button-primary-hover-bg); display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap); min-height: var(--button-height); padding: var(--space-3) var(--button-padding-inline); border: var(--border-width-thin) var(--border-style) var(--_button-border); border-radius: var(--button-radius); background: var(--_button-bg); color: var(--_button-text); font-size: var(--button-font-size); font-weight: var(--button-font-weight); line-height: var(--line-height-label); text-align: center; transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .button--primary { --_button-bg: var(--button-primary-bg); --_button-text: var(--button-primary-text); } .button--secondary { --_button-bg: var(--button-secondary-bg); --_button-text: var(--button-secondary-text); --_button-border: var(--button-secondary-border); --_button-hover: var(--color-surface-accent); } .button--contrast { --_button-bg: var(--button-contrast-bg); --_button-text: var(--button-contrast-text); --_button-border: var(--button-contrast-bg); --_button-hover: var(--color-surface); } .button--ghost { --_button-bg: var(--color-transparent); --_button-text: var(--color-text-link); --_button-border: var(--color-transparent); --_button-hover: var(--color-surface-secondary); } .button--sm { min-height: var(--button-height-sm); padding: var(--space-2) var(--space-4); font-size: var(--font-size-caption); } .button .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); } .button:disabled, .button[aria-disabled="true"] { opacity: var(--opacity-muted); cursor: not-allowed; } @media (hover: hover) { .button:not(:disabled):not([aria-disabled="true"]):hover { background: var(--_button-hover); border-color: var(--_button-hover); transform: translateY(var(--hover-lift)); } } .text-link { display: inline-flex; align-items: center; gap: var(--space-4); min-height: var(--touch-target); border-bottom: var(--border-width-thin) var(--border-style) currentColor; font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--color-text-link); } .text-link .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); } /* Cards: the same component is used by principles, results, proof and benefits. */ .card { min-width: 0; display: flex; flex-direction: column; padding: var(--card-padding); background: var(--card-background); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); } .card--primary { --card-background: var(--color-surface); } .card--secondary { --card-background: var(--color-surface-secondary); } .card--muted { --card-background: var(--color-surface-muted); } .card--outline { --card-background: var(--color-transparent); --card-shadow: var(--shadow-none); } .card--contrast { --card-background: var(--color-surface-contrast); --card-border: var(--border-width-thin) var(--border-style) var(--color-surface-contrast); } .card--media { padding: 0; overflow: hidden; } .card--interactive { transition: background var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); } @media (hover: hover) { .card--interactive:hover { background: var(--color-surface-hover); transform: translateY(var(--hover-lift-lg)); box-shadow: var(--shadow-md); } } .card__body { display: flex; flex-direction: column; flex: 1; padding: var(--card-padding); gap: var(--card-gap); min-width: 0; } .card__media { position: relative; height: var(--card-media-height); flex: 0 0 auto; border-bottom: var(--border-default); background: var(--color-surface-secondary); overflow: hidden; } .card__icon { margin-bottom: var(--space-5); } .card__title { margin: 0; font-size: var(--card-title-size); line-height: var(--line-height-heading); } .card__description { font-size: var(--card-description-size); line-height: var(--line-height-relaxed); } .card > .card__title + .card__description { margin-top: var(--space-3); } .card__kicker { font-family: var(--font-family-mono); font-size: var(--font-size-micro); letter-spacing: var(--letter-spacing-label); color: var(--color-text-link); } .card__footer { margin-top: auto; padding-top: var(--space-5); border-top: var(--border-default); } .card--contrast .card__footer { border-color: var(--color-border-contrast); } .tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .tags > span { font-size: var(--font-size-label-sm); line-height: var(--line-height-label); padding: var(--space-1-5) var(--space-2-5); border: var(--border-default); border-radius: var(--tag-radius); color: var(--color-text-link); } .card__body > .tags { margin-top: auto; padding-top: var(--space-1); } /* Disclosure / accordion component. Native details works without JavaScript. */ .disclosure { padding: 0; overflow: hidden; } .disclosure__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--card-padding); font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--color-heading); } .disclosure__summary > .icon-tile { grid-column: var(--grid-span-full); margin-bottom: var(--space-2); } .disclosure__content { padding: 0 var(--card-padding) var(--card-padding); } .disclosure__topic { padding-top: var(--space-5); border-top: var(--border-default); } .disclosure__topic + .disclosure__topic { margin-top: var(--space-6); } .disclosure__topic h3 { font-size: var(--font-size-body); margin-bottom: var(--space-3); } .disclosure__topic p { font-size: var(--font-size-small); line-height: var(--line-height-relaxed); } .disclosure__topic ul { display: grid; gap: var(--space-2-5); margin-top: var(--space-4); } .disclosure__topic li { padding-left: var(--space-3-5); position: relative; font-size: var(--font-size-caption); color: var(--color-text-muted); line-height: var(--line-height-relaxed); } .disclosure__topic li::before { content: ""; position: absolute; top: var(--list-marker-offset); left: 0; width: var(--border-width-thick); height: var(--border-width-thick); border-radius: var(--radius-circle); background: var(--color-accent); } .toggle-plus { width: var(--icon-size-sm); height: var(--icon-size-sm); transition: transform var(--duration-fast) var(--ease-standard); } details[open] > summary .toggle-plus { transform: rotate(45deg); } .accordion > details { border-top: var(--border-default); } .accordion > details:last-child { border-bottom: var(--border-default); } .accordion summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-6) 0; font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); } .accordion .toggle-plus { color: var(--color-accent); } .accordion details > p { padding: 0 var(--space-9) var(--space-7) 0; font-size: var(--font-size-body-sm); line-height: var(--line-height-relaxed); } /* Segmented tabs and browser chrome can be reused by any demonstration. */ .tabs { display: flex; gap: var(--space-1); padding: var(--tab-padding); border: var(--border-default); border-radius: var(--tab-radius); background: var(--color-surface); } .tabs__button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-xs); background: var(--color-transparent); color: var(--color-text-muted); font-size: var(--font-size-label); } .tabs__button[aria-selected="true"] { background: var(--color-primary); color: var(--color-on-primary); } .tabs__button .icon { width: var(--icon-size-sm); height: var(--icon-size-sm); } .browser-frame { overflow: hidden; border: var(--browser-border); border-radius: var(--browser-radius); background: var(--color-surface); box-shadow: var(--shadow-md); } .browser-bar { display: flex; align-items: center; gap: var(--space-1); height: var(--browser-toolbar-height); padding: 0 var(--space-3); border-bottom: var(--border-default); background: var(--color-surface-muted); } .browser-bar > i { width: var(--browser-dot-size); height: var(--browser-dot-size); border-radius: var(--radius-circle); background: var(--color-border-strong); } .browser-bar > span { margin-inline: auto; font-family: var(--font-family-mono); font-size: var(--font-size-micro); color: var(--color-text-muted); } .browser-bar > .icon { width: var(--font-size-label); height: var(--font-size-label); color: var(--color-text-muted); } /* Site chrome */ /* Breakpoints mirror tokens.css; var() is not valid in media conditions. */ @media (max-width: 1000px) { } @media (max-width: 800px) { .editorial-list p, .accordion details > p { font-size: var(--font-size-body); } } @media (max-width: 520px) { .disclosure__summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); } .disclosure__summary > .icon-tile { grid-column: auto; margin-bottom: 0; width: var(--icon-tile-size); height: var(--icon-tile-size); } .disclosure__topic h3 { font-size: var(--font-size-lead); } .disclosure__topic p, .disclosure__topic li { font-size: var(--font-size-body-sm); } .accordion details > p { padding-right: 0; } } @media (max-width: 360px) { } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* Readable navigation fallback when the enhancement script is unavailable. */ @media (max-width: 800px) { } /* Secondary actions also adapt when reused on a contrast surface. */ .surface-contrast .button--secondary, .card--contrast .button--secondary { --_button-text: var(--color-on-primary); --_button-border: var(--color-border-contrast); --_button-hover: var(--color-surface-contrast-soft); } .surface-contrast .button--ghost, .card--contrast .button--ghost { --_button-hover: var(--color-surface-contrast-soft); } /* Retained utilities still used by page content. No alternate button/card definitions. */ /* ============================================================================= Avielon Studio · components.css Shared, reusable UI components. Loaded AFTER site.css on every page. Token-only (zero hardcoded hex) so every component adapts to light/dark and inverts automatically inside .section--contrast. Page-specific section styles still live with their own view; this file is the shared vocabulary pages compose from, so elements look the same everywhere. Contents: 1. Section header block (.section-head) 2. Tags / pills (.tag) 3. Cards (.card, --outline, --elevated, --link, --media) 4. Accordion (native
/, no JS) 5. Comparison table (.compare) 6. Section header (.section-head · --split · --wide) 7. Split layout (.split — header left, content right) 8. Feature grid (.feature-grid — icon + title + body) 9. Split list (.split-list — ruled list, numbers optional) 10. Process (.process — numbered vertical sequence) 11. Closing pull (.pull — accent-ruled summary line) ============================================================================= */ /* ---- 1. Section header block ------------------------------------------------- eyebrow + title + lead, grouped so every section opens the same way. */ .section-head { display: grid; gap: var(--space-rem-0-75); max-width: 60ch; } .section-head .lead { margin: 0; } .section-head--center { justify-items: center; text-align: center; margin-inline: auto; } /* ---- 2. Tags / pills --------------------------------------------------------- Mono utility face — for service tags, case-study metadata, filters. */ .tag { display: inline-flex; align-items: center; gap: var(--space-rem-0-4); font-family: var(--font-family-mono); font-size: var(--font-size-68rem); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-1em); text-transform: uppercase; line-height: var(--line-height-art-1); color: var(--color-text-muted); padding: var(--space-rem-0-4) var(--space-rem-0-6); border: var(--size-1) var(--border-style) var(--color-border); border-radius: var(--size-999); } .tag--accent { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); } /* ---- 3. Cards ---------------------------------------------------------------- Three base variants + two modifiers. Usage: .card surface + hairline — the workhorse (service lists, grids) .card--outline transparent + hairline — quiet / dense / secondary info .card--elevated raised surface + soft shadow — featured / emphasis only Modifiers (combine with any base): .card--link whole card clickable: hover lift + accent border .card--media has a .card__media thumbnail band on top Rule: at most one --elevated cluster per section; outline for dense grids. */ .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } .card-grid--4 { grid-template-columns: repeat(4, 1fr); } } .card--scope { padding: var(--space-rem-2); } .card--elevated { background: var(--color-surface-elevated); border-color: transparent; box-shadow: var(--shadow-elevated); } .card__eyebrow { font-family: var(--font-family-mono); font-size: var(--font-size-68rem); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-14em); text-transform: uppercase; color: var(--color-text-muted); margin: 0; margin-bottom: var(--space-rem-0-9); } .card__foot { margin-top: auto; padding-top: var(--space-rem-0-4); } /* Media band (thumbnail on top). Set a background-image or drop an . */ /* Clickable card — the whole card is a link. Hover lifts + accent hairline. */ .card--link { cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card--link:hover { transform: translateY(var(--length-px-negative-3)); border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); } @media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } } /* ---- 4. Accordion (native
, no JS) --------------------------------- Markup:
Question
Answer…
Variants: default (bordered) · .accordion--flush (no inset padding). */ .accordion-group { max-width: var(--size-850); margin:0 auto; } .accordion__item { border-bottom: var(--size-1) var(--border-style) var(--color-border); } .accordion__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-rem-1); padding: var(--space-rem-1-15) var(--space-rem-0-25); font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-1-02rem); line-height: var(--line-height-heading); color: var(--color-heading); } .accordion__item > summary::-webkit-details-marker { display: none; } .accordion__ico { position: relative; flex: none; width: var(--length-rem-1); height: var(--length-rem-1); } .accordion__ico::before, .accordion__ico::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--length-rem-0-68); height: var(--size-2); background: var(--color-accent); transform: translate(-50%, -50%); transition: transform .25s ease, opacity .2s ease; } .accordion__ico::after { transform: translate(-50%, -50%) rotate(90deg); } .accordion__item[open] > summary .accordion__ico::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; } .accordion__panel { padding: 0 var(--space-rem-0-25) var(--space-rem-1-25); color: var(--color-text-muted); line-height: var(--line-height-body); max-width: 68ch; } .accordion--flush { border-top: 0; } .accordion--flush .accordion__item { border-bottom-color: color-mix(in srgb, var(--color-border) 70%, transparent); } @media (prefers-reduced-motion: reduce) { .accordion__ico::before, .accordion__ico::after { transition: none; } } /* ---- 5. Comparison table ("Yaklaşım Karşılaştırma") ------------------------- Semantic . First column is a sticky row-header; the "ours" column is emphasised. Horizontal scroll on narrow viewports; transforms to stacked cards under 640px using data-label on each
. */ .compare { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--size-1) var(--border-style) var(--color-border); border-radius: calc(var(--radius) * 2); /*background: var(--color-surface);*/ } .compare-table { width: 100%; border-collapse: collapse; min-width: var(--length-rem-40); font-size: var(--font-size-95rem); } .compare-table th { padding: var(--space-rem-1-2) var(--space-rem-1); font-size: var(--font-size-86rem); line-height: var(--line-height-label); text-align: left; vertical-align: top; border-right: var(--size-1) var(--border-style) var(--color-border); border-bottom: var(--size-1) var(--border-style) var(--color-border); } .compare-table td { padding: var(--space-rem-1-2) var(--space-rem-1); font-size: var(--font-size-86rem); line-height: var(--line-height-label); text-align: left; border-right: var(--size-1) var(--border-style) var(--color-border); border-bottom: var(--size-1) var(--border-style) var(--color-border); } .compare-table tr > :last-child { border-right: 0; } .compare-table tbody > tr:last-child > th { border-bottom: 0; } .compare-table tbody > tr:last-child > td { border-bottom: 0; } .compare-table tbody td { color: var(--color-text-muted); } /*.compare-table thead th { font-size: 1rem; letter-spacing: .1em; color: var(--color-text-secondary); font-weight: 500; }*/ .compare-table th[scope="row"] { position: sticky; left: 0; } .compare-table thead tr { position: sticky; top: 0; } /* the Avielon / "ours" column — subtle teal wash + accent top marker */ .compare-table .is-ours { background: color-mix(in srgb, var(--color-accent) 7%, transparent); } .compare-table thead th.is-ours { color: var(--color-accent); /*border-top: 1px solid var(--color-accent);*/ } .compare-table tbody td.is-ours { color: var(--color-heading); } @media (max-width: 640px) { .compare { overflow: visible; border: 0; } .compare-table { min-width: 0; } .compare-table thead { position: absolute; width: var(--size-1); height: var(--size-1); overflow: hidden; clip: rect(0 0 0 0); } /* visually hidden */ .compare-table tbody tr { display: block; border: var(--size-1) var(--border-style) var(--color-border); border-radius: calc(var(--radius) * 2); margin-bottom: var(--space-rem-1); } .compare-table tbody tr > :first-child { border-top-left-radius: calc(var(--radius) * 2); border-top-right-radius: calc(var(--radius) * 2); } .compare-table tbody tr > :last-child { border-bottom-left-radius: calc(var(--radius) * 2); border-bottom-right-radius: calc(var(--radius) * 2); } .compare-table tr > :last-child { border-bottom: 0; } .compare-table th[scope="row"] { position: static; display: block; border-right: 0; background: var(--color-section-alt); } .compare-table td { display: flex; justify-content: space-between; gap: var(--space-rem-1); text-align: right; border-right: 0; } .compare-table td::before { content: attr(data-label); font-family: var(--font-family-mono); font-size: var(--font-size-64rem); letter-spacing: var(--letter-spacing-08em); text-transform: uppercase; color: var(--color-text-muted); text-align: left; } .compare-table .is-ours { border-radius: 0; } } @media (min-width: 641px) { .compare-table thead { background: var(--color-surface); } .compare-table th[scope="row"] { background: var(--color-surface); } } /* ============================================================================= SECTION PATTERNS (standardised section building blocks) Every page composes sections from the same vocabulary. All token-only, so each pattern inverts automatically inside .section--contrast and stays correct in both themes. HEADER LAYOUTS (pick one per section): • Stacked — .section-head (title over lead; --wide for image 5) • Split — .section-head--split (title left, lead right; images 1/3/4) CONTENT PATTERNS: • .feature-grid icon + title + body grid (images 1 & 3) • .split-list ruled list beside a header (image 2) • .process numbered vertical sequence (image 4) • .pull accent-ruled summary after a grid/list (image 1 footer) NUMBER RULE (locked): ordinals appear ONLY when items form a genuine sequence (a process / ordered steps). Catalogue cards and lists carry none. ACCENT NOTE: the eyebrow is now always accent — treat it as the section's fixed accent signature. Within the section BODY keep to one further accent touch at most (a .pull rule, one process node, or a CTA), never more. ============================================================================= */ /* ---- 6. Section header layouts --------------------------------------------- Base .section-head (block 1) is the STACKED head: eyebrow › title › lead. */ .section-head { gap: var(--space-rem-1-1); } /* --wide: stacked head that breathes wider on large screens (image 5). Full width on small; up to 70% (readability-capped) from 1024px up. */ .section-head--wide { max-width: 100%; } @media (min-width: 1024px) { .section-head--wide { max-width: min(75%, 85ch); } .section-head--wide .lead { max-width: 100%; } } /* --split: title (with its eyebrow) on the left, lead on the right (images 1/3/4). Needs a .section-head__main wrapper around eyebrow + title so the two columns place cleanly regardless of how many elements sit on the left. */ .section-head--split { max-width: none; gap: var(--space-rem-1-5); } .section-head__main { display: grid; gap: var(--space-rem-1-1); } @media (min-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(var(--space-rem-2), 5vw, var(--space-rem-4-5)); align-items: start; } /* Drop the lead to the TITLE baseline, not the eyebrow: push it down by the eyebrow line (.75rem * 1.4) plus the eyebrow-to-title gap (1.1rem). */ .section-head--split .lead { max-width: 48ch; margin-top: calc(var(--space-rem-0-75) * 1.4 + var(--space-rem-1-1)); } } /* ---- 7. Split layout — header column + content column ---------------------- Header (or any left rail) on the left, the pattern on the right (image 2; also the alternative "header left / process right" arrangement). */ @media (min-width: 900px) { .split--cta { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } /* The content column starts at the header TITLE, not its eyebrow: same drop as the split lead (eyebrow line + eyebrow-to-title gap). */ } /* ---- 8. Feature grid — icon + title + body -------------------------------- Cell markup:
… 01 ← ONLY when ordered

…

…

Grids: --2 / --3 / --4 columns. Default look is the hairline-ruled grid (image 3). Use --divided for the lighter "columns on paper" row (image 1). */ .feature-grid--2, .feature-grid--3, .feature-grid--4 { grid-template-columns: 1fr; } .feature { background: var(--color-surface); padding: clamp(var(--space-rem-1-35), 3vw, var(--space-rem-1-9)); display: grid; gap: var(--space-rem-1); align-content: start; border-bottom: var(--size-1) var(--border-style) var(--color-border); } .feature:last-child { border-bottom:none; } @media (min-width: 640px) { .feature-grid--2, .feature-grid--3, .feature-grid--4 { grid-template-columns: repeat(2, 1fr); } .feature { border-bottom: none; border-top:var(--size-1) var(--border-style) var(--color-border); } .feature:nth-child(-n+2) { border-top:none; } .feature:nth-child(odd) { border-right:var(--size-1) var(--border-style) var(--color-border); } } @media (min-width: 1000px) { .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } .feature-grid--4 { grid-template-columns: repeat(4, 1fr); } .feature-grid--3 .feature:nth-child(-n+3), .feature-grid--4 .feature:nth-child(-n+4) { border-top:none; } .feature-grid--3 .feature, .feature-grid--4 .feature { border-right:var(--size-1) var(--border-style) var(--color-border); } .feature-grid--3 .feature:nth-child(3n), .feature-grid--4 .feature:nth-child(4n) { border-right:none; } } .feature__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-rem-1); margin-bottom: var(--space-rem-0-9); } .feature__ic { width: var(--length-rem-2-5); height: var(--length-rem-2-5); flex: none; display: grid; place-items: center; color: var(--color-text-muted); } .feature__ic svg { width: var(--length-rem-1-35); height: var(--length-rem-1-35); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .feature__ic--circle { border: var(--size-1) var(--border-style) var(--color-border); border-radius: 50%; } .feature__num { font-family: var(--font-family-mono); font-size: var(--font-size-7rem); letter-spacing: var(--letter-spacing-08em); color: var(--color-text-muted); } .feature__title { font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-1-05rem); line-height: var(--line-height-art-1-3); margin: 0; color: var(--color-heading); } .feature__body { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-93rem); line-height: var(--line-height-1-6); } /* Lighter "columns on paper" row — vertical hairlines, no box (image 1). Best for a single row of 3–4; pair with .feature__ic--circle. */ .feature-grid--divided { background: transparent; border: 0; border-radius: 0; gap: 0; border-block: var(--size-1) var(--border-style) var(--color-border); } .feature-grid--divided .feature { background: transparent; } @media (min-width: 760px) { .feature-grid--divided .feature { border-left: var(--size-1) var(--border-style) var(--color-border); padding-inline: clamp(var(--space-rem-1-25), 3vw, var(--space-rem-1-9)); } .feature-grid--divided .feature:first-child { border-left: 0; padding-inline-start: 0; } } /* ---- 9. Split list — ruled list beside a header (image 2) ------------------ of:
  • 01 ← ONLY when ordered

    …

    …

    • Add --numbered to switch on the left number gutter. */ .split-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .split-list__item { display: grid; gap: var(--space-rem-0-45); padding: var(--space-rem-1-4) 0 var(--space-rem-1-4) var(--space-rem-1); border-top: var(--size-1) var(--border-style) var(--color-border); } .split-list__num { font-family: var(--font-family-mono); font-size: var(--font-size-7rem); letter-spacing: var(--letter-spacing-08em); color: var(--color-text-muted); } .split-list__title { font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-1-08rem); line-height: var(--line-height-art-1-3); margin: 0; color: var(--color-heading); } .split-list__body { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-95rem); line-height: var(--line-height-1-6); max-width: 62ch; } .split-list--numbered .split-list__item { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-rem-1-5); } .split-list--numbered .split-list__num { grid-row: 1 / span 2; padding-top: var(--space-rem-0-15); } /* ---- 10. Process — numbered vertical sequence (image 4) -------------------- A genuine sequence, so it IS numbered. For the "header left / steps right" variant, drop a .process inside the right column of a .split.
    01

    …

    …

    …
    */ .process { display: grid; gap: 0; } .process__step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(var(--space-rem-1-25), 3vw, var(--space-rem-1-9)); } .process__rail { position: relative; display: grid; justify-items: center; } .process__node { width: var(--length-rem-2-75); height: var(--length-rem-2-75); flex: none; border-radius: 50%; margin-top:var(--space-rem-1-5); border: var(--size-1) var(--border-style); /*var(--color-border);*/ border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); background: var(--color-background); display: grid; place-items: center; position: relative; z-index: 1; font-family: var(--font-family-mono); font-size: var(--font-size-78rem); letter-spacing: var(--letter-spacing-06em); color: var(--color-accent); } .process__line { position: absolute; top: var(--length-rem-3-75); bottom: var(--length-rem-negative-1-6); left: 50%; width: var(--size-1); background: var(--color-border); transform: translateX(-50%); } .process__step:last-child .process__line { display: none; } .process__body { padding: var(--space-rem-1-3) 0 clamp(var(--space-rem-1), 2vw, var(--space-rem-1-5)); display: grid; gap: var(--space-rem-0-5); border-bottom: var(--size-1) var(--border-style) var(--color-border); } .process__step:last-child .process__body { padding-bottom: var(--space-rem-0-3); border-bottom: 0; } .process__title { font-family: var(--font-family-display); font-weight: var(--font-weight-medium); font-size: var(--font-size-clamp-1-15rem-1rem-5vw-1-4rem); line-height: var(--line-height-1-25); letter-spacing: var(--letter-spacing-negative-0-01em); margin: 0; color: var(--color-heading); } .process__body > p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-95rem); line-height: var(--line-height-1-6); max-width: 68ch; } /* ---- 11. Closing pull — accent-ruled blockquote after a grid/list (image 1) ─ The synthesis blockquote (same shape as the "Yaklasim" pull). Sits in a .section-foot so it keeps its distance; --indent offsets it inward on wide screens. Body text is Inter; an optional .pull__title is Fraunces. */ .section-foot { margin-top: clamp(var(--space-rem-2), 4vw, var(--space-rem-3)); } @media (min-width: 900px) { .section-foot--indent { margin-inline-start: clamp(var(--space-rem-1-5), 10%, var(--space-rem-7)); } } .pull { border-left: var(--size-2) var(--border-style) var(--color-accent); padding: var(--space-rem-0-35) 0 var(--space-rem-0-35) var(--space-rem-1-4); margin: 0; max-width: 70ch; } .pull--wide { max-width: 90ch; } /* Optional heading inside the blockquote — Fraunces. */ .pull__title { font-family: var(--font-family-display); font-weight: var(--font-weight-medium); font-size: var(--font-size-clamp-1-15rem-1rem-5vw-1-4rem); line-height: var(--line-height-1-25); letter-spacing: var(--letter-spacing-negative-0-01em); margin: 0 0 var(--space-rem-0-5); color: var(--color-heading); } /* Blockquote body — Inter. Standalone (no title) reads as a prominent line; under a .pull__title it reads as the supporting description. */ .pull p, .pull__body { margin: 0; font-family: var(--font-family-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-clamp-1-05rem-1rem-35vw-1-25rem); line-height: var(--line-height-label); letter-spacing: var(--letter-spacing-negative-0-005em); color: var(--color-heading); } .pull__title + .pull__body { font-weight: var(--font-weight-regular); color: var(--color-text-muted); } /* ============================================================================= Avielon Studio · page-patterns.css Shared large-scale composition for public marketing pages. Load order: tokens.css -> site.css -> components.css -> page-patterns.css -> page CSS This file owns page/section composition that can recur on the homepage, service pages and other marketing pages. Content-specific visuals and one-off section treatments stay in the page stylesheet. ============================================================================= */ /* ---- Page shell + section rhythm ----------------------------------------- */ .studio-page { overflow: clip; } .studio-page section { position: relative; } .studio-page p { text-wrap: pretty; } /* Components define the section-head structure; page-patterns owns the larger vertical spacing between the heading block and the section body. */ .section-head { margin-bottom: clamp(var(--space-rem-2-6), 5vw, var(--space-rem-4-5)); } .section-head--split { margin-bottom: clamp(var(--space-rem-2-8), 6vw, var(--space-rem-5)); } /* ---- Hero ---------------------------------------------------------------- */ .hero-visual { min-width: 0; } .hero-panel { border: var(--size-1) var(--border-style) var(--color-border); background: color-mix(in srgb, var(--color-surface) 78%, transparent); padding: clamp(var(--space-rem-1-5), 4vw, var(--space-rem-2-3)); box-shadow: var(--shadow-elevated); } .hero-note { margin: var(--space-rem-0-2) 0 0; padding-top: var(--space-rem-1-1); border-top: var(--size-1) var(--border-style) var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-9rem); line-height: var(--line-height-art-1-55); max-width: 64ch; } .hero-meta { list-style: none; margin: 0; padding: var(--space-rem-1-25) 0 0; border-top: var(--size-1) var(--border-style) var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-rem-0-6) var(--space-rem-1-2); } .hero-meta li { font-family: var(--font-family-mono); font-size: var(--font-size-66rem); letter-spacing: var(--letter-spacing-08em); text-transform: uppercase; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: var(--space-rem-0-55); } /*.hero-meta li + li::before { content: '·'; margin-right: .65rem; color: var(--color-border); }*/ .hero-meta li::before { content: ""; width: var(--size-5); height: var(--size-5); border-radius: 50%; background: var(--color-accent); } /* ---- Reusable action groups ---------------------------------------------- */ /* ---- Mid-page CTA band ---------------------------------------------------- */ .cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(var(--length-rem-20), .85fr); gap: clamp(var(--space-rem-3), 8vw, var(--space-rem-8)); align-items: end; } .cta-band__copy { display: grid; gap: var(--space-rem-1); } .cta-band__copy h2 { max-width: 16ch; } .cta-band__aside { display: grid; gap: var(--space-rem-1-2); } .cta-band__aside p { margin: 0; color: var(--color-text-muted); } /* ---- FAQ ----------------------------------------------------------------- */ /* ---- Related content ------------------------------------------------------ */ .related-card .card__foot { margin-top: var(--space-rem-1-1); } /* ---- Closing CTA ---------------------------------------------------------- */ .closing-cta { padding-block: clamp(var(--space-rem-5), 11vw, var(--space-rem-9-5)); background: var(--gradient-hero); } .closing-cta__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(var(--length-rem-18), .75fr); gap: clamp(var(--space-rem-3), 8vw, var(--space-rem-8)); align-items: end; } .closing-cta__title { font-size: var(--font-size-clamp-3rem-2rem-4vw-5-6rem); line-height: var(--line-height-art-1); letter-spacing: var(--letter-spacing-negative-03em); max-width: 14ch; } .closing-cta__aside { display: grid; gap: var(--space-rem-1-3); } .closing-cta__aside p { margin: 0; color: var(--color-text-muted); } /* ---- Responsive ----------------------------------------------------------- */ @media (max-width: 980px) { .cta-band__inner, .closing-cta__inner { grid-template-columns: 1fr; } } @media (max-width: 720px) { .hero-meta { display: grid; gap: var(--space-rem-0-45); } } @media (prefers-reduced-motion: reduce) { .studio-page * { scroll-behavior: auto; } } .page-section-nav { position: sticky; top: var(--size-68); z-index: 80; background: color-mix(in srgb, var(--color-background) 90%, transparent); border-bottom: var(--size-1) var(--border-style) var(--color-border); backdrop-filter: blur(var(--size-10)); } .page-section-nav__inner { min-height: var(--size-48); display: flex; align-items: center; gap: var(--space-rem-2); overflow-x: auto; scrollbar-width: none; } .page-section-nav__inner::-webkit-scrollbar { display: none; } .page-section-nav__label { flex: none; font-family: var(--font-family-mono); font-size: var(--font-size-62rem); letter-spacing: var(--letter-spacing-1em); text-transform: uppercase; color: var(--color-text-muted); } .page-section-nav__links { display: flex; align-items: center; gap: var(--space-rem-1-5); } .page-section-nav__links a { position: relative; flex: none; padding: var(--size-14) 0 var(--size-13); font-size: var(--font-size-78rem); font-weight: var(--font-weight-bold); color: var(--color-text-muted); } .page-section-nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--size-2); background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .page-section-nav__links a:hover, .page-section-nav__links a[aria-current="location"] { color: var(--color-heading); } .page-section-nav__links a[aria-current="location"]::after { transform: scaleX(1); } @media (max-width: 820px) { .page-section-nav { top: var(--size-68); } .page-section-nav__label { display: none; } } /* ============================================================================= Avielon Studio · site.css Global foundation (base reset, type utilities, buttons) + site chrome (header, mega menus, footer, mobile menu). Loaded after tokens.css on every page. Page-specific section styles live with their own view, not here. ============================================================================= */ /* ---- Base ---- */ @media (prefers-reduced-motion: reduce) { } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* ---- Type utilities (global, reused across pages) ---- */ /* ---- Eyebrow (section kicker / sub-service breadcrumb) ---------------------- Mono, uppercase, tracked. The WHOLE eyebrow is accent-toned; it opens the line directly with NO leading glyph or number. Two shapes: - Simple label:

    Bakis acisi

    - Sub-service breadcrumb (parent hub -> current page):

    Tasarim · Kurumsal web sitesi

    The current page (leaf) carries the full accent; the parent is a quieter link to the hub; the separator is muted -- so the hierarchy reads at a glance. */ .eyebrow__parent { color: var(--color-text-muted); transition: color .2s ease; } .eyebrow__parent:hover { color: var(--color-accent); } .eyebrow__sep { color: var(--color-text-muted); margin-inline: .5ch; } .eyebrow__leaf { color: var(--color-accent); } /* Deprecated: the old leading "\2014 / \00B7" prefix. Hidden so any legacy shows no glyph until it is removed from the view. New breadcrumbs use .eyebrow__sep for the middle separator instead. */ .t-display { font-family: var(--font-family-display); font-weight: var(--font-weight-regular); font-size: var(--font-size-clamp-2-75rem-1-6rem-4vw-4-5rem); line-height: var(--line-height-1-05); letter-spacing: var(--letter-spacing-negative-0-02em); margin: 0; font-optical-sizing: auto; } .t-h2 { font-family: var(--font-family-display); font-weight: var(--font-weight-medium); font-size: var(--font-size-clamp-1-75rem-1-3rem-1-6vw-2-25rem); line-height: var(--line-height-display); letter-spacing: var(--letter-spacing-negative-0-01em); margin: 0; } .t-h3 { font-family: var(--font-family-display); font-weight: var(--font-weight-medium); font-size: var(--font-size-clamp-1-4rem-1-1rem-1vw-1-75rem); line-height: var(--line-height-1-2); letter-spacing: var(--letter-spacing-negative-0-01em); margin: 0; } .t-h4 { font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-lead); line-height: var(--line-height-heading); margin: 0; } .lead { font-size: var(--font-size-clamp-1-05rem-98rem-4vw-1-25rem); line-height: var(--line-height-1-6); color: var(--color-text-muted); max-width: 56ch; } .body { color: var(--color-text-muted); max-width: 64ch; } .body strong { color: var(--color-heading); font-weight: var(--font-weight-bold); } .small { font-size: var(--font-size-875rem); line-height: var(--line-height-art-1-55); } .button { font-family:var(--font-family-body); } .button--contrast { --_button-hover:var(--color-white); } .button--secondary { --_button-text:var(--color-heading); } .button svg, .text-link svg { width:var(--icon-size-sm); height:var(--icon-size-sm); flex-shrink:0; } .text-link { border:0; border-bottom:var(--border-width-thin) var(--border-style) currentColor; padding:0; background:var(--color-transparent); font-family:var(--font-family-body); cursor:pointer; } .text-link:hover { color:var(--color-accent); } .button--block { width:100%; } .card--flat { --card-shadow:var(--shadow-none); } .card--compact { --card-padding:var(--space-5); } .card--spacious { --card-padding:var(--space-10); } /* ---- Buttons ---- */ .cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-rem-0-5); font-family: var(--font-family-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-92rem); line-height: var(--line-height-art-1); padding: var(--space-rem-0-8) var(--space-rem-1-3); border-radius: var(--radius); cursor: pointer; border: var(--size-1) var(--border-style) transparent; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .cta-primary { background: var(--color-accent); color: var(--color-on-accent); } .cta-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); transform: translateY(var(--length-px-negative-1)); } .cta-ghost { background: transparent; color: var(--color-heading); border-color: var(--color-border); } .cta-ghost:hover { border-color: var(--color-heading); color: var(--color-heading); } /* Quiet / low-commitment link-button (e.g. "İşlerimizi İnceleyin"). Text + arrow, no fill. */ .cta-quiet { background: transparent; border-color: transparent; color: var(--color-accent); padding-inline: 0; } .cta-quiet:hover { color: var(--color-accent-hover); transform: none; } .cta-quiet .arr { transition: transform .2s ease; } .cta-quiet:hover .arr { transform: translateX(var(--size-3)); } /* Size modifiers */ .cta--sm { padding: var(--space-rem-0-55) var(--space-rem-1); font-size: var(--font-size-82rem); } .cta--lg { padding: var(--space-rem-1) var(--space-rem-1-6); font-size: var(--font-size-body); } @media (prefers-reduced-motion: reduce) { .cta:hover, .cta-quiet:hover .arr { transform: none; } } :where(.product-content) svg { width:var(--size-24); height:var(--size-24); flex-shrink:0; }