/* ============================================================================= 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: .75rem; max-width: 60ch; } .section-head .eyebrow { margin: 0; } .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: .4rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1; color: var(--color-text-secondary); padding: .4rem .6rem; border: 1px solid var(--color-border); border-radius: 999px; } .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 { display: grid; gap: 1rem; } .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 { display: flex; flex-direction: column; gap: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; } .card--scope { padding: 2rem; } .card--outline { background: transparent; } .card--elevated { background: var(--color-surface-elevated); border-color: transparent; box-shadow: var(--shadow-elevated); } .card__eyebrow { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0; margin-bottom: 0.9rem; } .card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-text-primary); margin: 0; } .card__body { color: var(--color-text-secondary); font-size: .95rem; line-height: 1.6; margin: 0; } .card__foot { margin-top: auto; padding-top: .4rem; } /* Media band (thumbnail on top). Set a background-image or drop an . */ .card--media { padding: 0; overflow: hidden; } .card--media .card__media { aspect-ratio: 16 / 10; background: var(--color-section-alt); display: block; } .card--media .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .card--media .card__pad { display: flex; flex-direction: column; gap: .6rem; padding: 1.35rem 1.5rem 1.5rem; } /* 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(-3px); border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); } .card--link:hover .card__title { color: var(--color-text-primary); } a.card, a.card:hover { color: inherit; text-decoration: none; } @media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } } .card ul { margin: 0; padding-left: 1.15rem; color: var(--color-text-secondary); display: grid; gap: .42rem; font-size: .9rem; line-height: 1.55; } ul li::marker { color: var(--color-accent); } /* ---- 4. Accordion (native
, no JS) --------------------------------- Markup:
Question
Answer…
Variants: default (bordered) · .accordion--flush (no inset padding). */ .accordion-group { max-width: 850px; margin:0 auto;} .accordion { border-top: 1px solid var(--color-border); } .eyebrow.accordion--eyebrow { margin: 2.75rem 0 0.7rem; } .accordion__item { border-bottom: 1px solid var(--color-border); } .accordion__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem .25rem; font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--color-text-primary); } .accordion__item > summary::-webkit-details-marker { display: none; } .accordion__ico { position: relative; flex: none; width: 1rem; height: 1rem; } .accordion__ico::before, .accordion__ico::after { content: ""; position: absolute; top: 50%; left: 50%; width: .68rem; height: 2px; 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 .25rem 1.25rem; color: var(--color-text-secondary); line-height: 1.65; 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: 1px solid var(--color-border); border-radius: calc(var(--radius) * 2); /*background: var(--color-surface);*/ } .compare-table { width: 100%; border-collapse: collapse; min-width: 40rem; font-size: .95rem; } .compare-table th { padding: 1.2rem 1rem; font-size: .86rem; line-height: 1.5; text-align: left; vertical-align: top; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .compare-table td { padding: 1.2rem 1rem; font-size: .86rem; line-height: 1.5; text-align: left; border-right: 1px solid var(--color-border); border-bottom: 1px solid 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-secondary); } /*.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-text-primary); } @media (max-width: 640px) { .compare { overflow: visible; border: 0; } .compare-table { min-width: 0; } .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* visually hidden */ .compare-table tbody tr { display: block; border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 2); margin-bottom: 1rem; } .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: 1rem; text-align: right; border-right: 0; } .compare-table td::before { content: attr(data-label); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); 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: 1.1rem; } /* --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: 1.5rem; } .section-head__main { display: grid; gap: 1.1rem; } @media (min-width: 900px) { .section-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); 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(.75rem * 1.4 + 1.1rem); } } /* ---- 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). */ .split { display: grid; gap: clamp(2rem, 5vw, 3.25rem); } .split > .section-head { max-width: none; } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .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). */ .split > .section-head + * { margin-top: calc(.75rem * 1.4 + 1.1rem); } } /* ---- 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 { display: grid; /*gap: 1px;*/ /*background: var(--color-border);*/ border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; } .feature-grid--2, .feature-grid--3, .feature-grid--4 { grid-template-columns: 1fr; } .feature { background: var(--color-surface); padding: clamp(1.35rem, 3vw, 1.9rem); display: grid; gap: 1rem; align-content: start; border-bottom: 1px solid var(--color-border); } .feature-grid.outline .feature { background-color: transparent; } .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:1px solid var(--color-border); } .feature:nth-child(-n+2) { border-top:none; } .feature:nth-child(odd) { border-right:1px solid 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:1px solid 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: 1rem; margin-bottom: .9rem; } .feature__ic { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; color: var(--color-text-secondary); } .feature__ic svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .feature__ic--circle { border: 1px solid var(--color-border); border-radius: 50%; } .feature__num { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; color: var(--color-text-secondary); } .feature__title { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; line-height: 1.3; margin: 0; color: var(--color-text-primary); } .feature__body { margin: 0; color: var(--color-text-secondary); font-size: .93rem; 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: 1px solid var(--color-border); } .feature-grid--divided .feature { background: transparent; } @media (min-width: 760px) { .feature-grid--divided .feature { border-left: 1px solid var(--color-border); padding-inline: clamp(1.25rem, 3vw, 1.9rem); } .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: .45rem; padding: 1.4rem 0 1.4rem 1rem; border-top: 1px solid var(--color-border); } .split-list__num { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; color: var(--color-text-secondary); } .split-list__title { font-family: var(--font-body); font-weight: 600; font-size: 1.08rem; line-height: 1.3; margin: 0; color: var(--color-text-primary); } .split-list__body { margin: 0; color: var(--color-text-secondary); font-size: .95rem; line-height: 1.6; max-width: 62ch; } .split-list--numbered .split-list__item { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; } .split-list--numbered .split-list__num { grid-row: 1 / span 2; padding-top: .15rem; } /* ---- 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(1.25rem, 3vw, 1.9rem); } .process__rail { position: relative; display: grid; justify-items: center; } .process__node { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; margin-top:1.5rem; border: 1px solid; /*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-mono); font-size: .78rem; letter-spacing: .06em; color: var(--color-accent); } .process__line { position: absolute; top: 3.75rem; bottom: -1.6rem; left: 50%; width: 1px; background: var(--color-border); transform: translateX(-50%); } .process__step:last-child .process__line { display: none; } .process__body { padding: 1.3rem 0 clamp(1rem, 2vw, 1.5rem); display: grid; gap: .5rem; border-bottom: 1px solid var(--color-border); } .process__step:last-child .process__body { padding-bottom: .3rem; border-bottom: 0; } .process__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0; color: var(--color-text-primary); } .process__body > p { margin: 0; color: var(--color-text-secondary); font-size: .95rem; 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(2rem, 4vw, 3rem); } @media (min-width: 900px) { .section-foot--indent { margin-inline-start: clamp(1.5rem, 10%, 7rem); } } .pull { border-left: 2px solid var(--color-accent); padding: .35rem 0 .35rem 1.4rem; margin: 0; max-width: 70ch; } .pull--wide{max-width: 90ch;} /* Optional heading inside the blockquote — Fraunces. */ .pull__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 .5rem; color: var(--color-text-primary); } /* 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-body); font-weight: 500; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.5; letter-spacing: -0.005em; color: var(--color-text-primary); } .pull__title + .pull__body { font-weight: 400; color: var(--color-text-secondary); }