/* ============================================================ KÖKSAL ATTORNEY PARTNERSHIP — Brand Design System koksal-brand.css · v1.0 The canonical token + component library. Reuse this file across websites, microsites and digital brochures. ============================================================ */ /* ---- Fonts (Google Fonts) ---------------------------------- Load in the host document BEFORE this stylesheet: ------------------------------------------------------------- */ :root { /* —— Brand color: Crimson (from the mark) —— */ --crimson-700: #821F25; --crimson-600: #A4282E; /* PRIMARY brand red */ --crimson-500: #B83840; --crimson-400: #C8545A; --crimson-tint: #F3E6E3; /* soft wash for backgrounds */ --crimson-tint-2: #EAD7D4; /* —— Brand chrome surfaces (deep oxblood crimson — large branded fields) —— Per brand guidelines: the cover/hero wears the brand crimson, NOT near-black. */ --crimson-surface: #6B1920; /* deep oxblood — hero / cover field */ --crimson-surface-2: #7E2128; /* raised oxblood — top of gradient */ --crimson-surface-3: #561218; /* deepened oxblood — gradient floor */ --crimson-line: rgba(245,242,236,.16); /* hairlines on crimson */ --crimson-fg: #F4E8E5; /* primary text on crimson */ --crimson-fg-dim: rgba(244,232,229,.62); --crimson-accent: #EBBDB8; /* numerals, eyebrow, emphasis on crimson */ /* —— Ink & neutrals (warm) —— */ --ink-900: #1C1B19; /* near-black, headlines on light */ --ink-800: #211F1D; /* primary text */ --graphite-700: #45433F; /* secondary text */ --stone-600: #6E6D6A; /* the logo gray / tertiary */ --stone-500: #8C8A85; /* muted captions */ --mist-400: #B6B2A8; /* disabled / faint */ --mist-300: #CCC8BD; /* strong hairline */ --hairline: #E2DED4; /* default borders */ --hairline-soft: #ECE8DF; /* —— Surfaces (warm paper) —— */ --paper: #F5F2EC; /* page background */ --paper-alt: #EEEAE1; /* alternating section */ --ivory: #FBFAF6; /* cards / raised */ --white: #FFFFFF; /* —— Dark surfaces — repointed to deep crimson —— */ /* The brand never uses near-black as a large background. Any "dark" surface wears the deep crimson, matching hero/footer. */ --ink-surface: #6B1920; /* dark sections → deep crimson */ --ink-surface-2: #7E2128; /* dark raised → raised crimson */ --ink-line: rgba(245,242,236,.16); /* borders on crimson */ /* —— Type families —— */ --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* —— Type scale (fluid, 16px base) —— */ --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem); --fs-h1: clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem); --fs-h2: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem); --fs-h4: 1.18rem; --fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-caption: 0.8125rem; --fs-eyebrow: 0.75rem; /* —— Spacing scale (8pt) —— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* —— Radius —— */ --r-sm: 2px; --r-md: 4px; --r-lg: 6px; /* —— Shadow (restrained, paper-like) —— */ --shadow-sm: 0 1px 2px rgba(28,27,25,.06), 0 1px 1px rgba(28,27,25,.04); --shadow-md: 0 4px 14px rgba(28,27,25,.07), 0 1px 3px rgba(28,27,25,.05); --shadow-lg: 0 18px 48px rgba(28,27,25,.12), 0 4px 12px rgba(28,27,25,.06); /* —— Motion —— */ --ease: cubic-bezier(.22,.61,.36,1); --dur: .28s; /* —— Layout —— */ --maxw: 1200px; --gutter: clamp(20px, 5vw, 64px); } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body.koksal { margin: 0; background: var(--ivory); color: var(--ink-800); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .koksal h1, .koksal h2, .koksal h3, .koksal h4 { font-family: var(--font-serif); color: var(--ink-900); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 var(--sp-4); text-wrap: balance; } .koksal h1 { font-size: var(--fs-h1); } .koksal h2 { font-size: var(--fs-h2); } .koksal h3 { font-size: var(--fs-h3); letter-spacing: -0.005em; } .koksal h4 { font-size: var(--fs-h4); font-weight: 600; } .koksal p { margin: 0 0 var(--sp-4); text-wrap: pretty; } /* :where() keeps this at zero specificity so component classes (.k-btn, .k-link, nav, footer) win cleanly */ :where(.koksal) a { color: var(--crimson-600); text-decoration: none; } /* ============================================================ TYPOGRAPHIC UTILITIES ============================================================ */ .k-display { font-family: var(--font-serif); font-size: var(--fs-display); font-weight: 500; line-height: 1.04; letter-spacing: -0.018em; color: var(--ink-900); } .k-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--graphite-700); font-weight: 400; } .k-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--crimson-600); display: inline-flex; align-items: center; gap: var(--sp-3); } .k-eyebrow--stone { color: var(--stone-600); } .k-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; display: inline-block; } .k-eyebrow.k-eyebrow--bare::before { display: none; } .k-caption { font-size: var(--fs-caption); color: var(--stone-500); letter-spacing: 0.01em; } .k-kicker { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--stone-500); text-transform: uppercase; } .k-muted { color: var(--stone-600); } .k-serif { font-family: var(--font-serif); } .k-italic { font-style: italic; } /* ============================================================ GRAPHIC DEVICE — the crimson rule & chevron (from the mark) ============================================================ */ .k-rule { border: 0; height: 2px; width: 100%; background: var(--hairline); margin: var(--sp-6) 0; } .k-rule--crimson { background: var(--crimson-600); height: 2px; } .k-rule--short { width: 56px; height: 2px; background: var(--crimson-600); } .k-rule--double { height: 0; border: 0; border-top: 1px solid var(--hairline); position: relative; } .k-rule--double::after { content:""; position:absolute; left:0; top:3px; width: 56px; height: 2px; background: var(--crimson-600); } /* chevron accent — echoes the split "K" */ .k-chevron { display: inline-block; width: 0; height: 0; border-top: 0.46em solid transparent; border-bottom: 0.46em solid transparent; border-left: 0.5em solid var(--crimson-600); vertical-align: middle; } /* ============================================================ BUTTONS ============================================================ */ .k-btn { --_bg: var(--crimson-600); --_fg: #fff; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--sp-3); padding: 14px 26px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--_bg); color: var(--_fg); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); text-decoration: none; line-height: 1; } .k-btn:hover { background: var(--crimson-700); } .k-btn:active { transform: translateY(1px); } .k-btn .k-btn__arrow { transition: transform var(--dur) var(--ease); } .k-btn:hover .k-btn__arrow { transform: translateX(4px); } .k-btn--ink { --_bg: var(--ink-900); } .k-btn--ink:hover { background: #000; } .k-btn--outline { background: transparent; color: var(--ink-900); border-color: var(--mist-300); } .k-btn--outline:hover { border-color: var(--ink-900); background: transparent; } .k-btn--ghost { background: transparent; color: var(--crimson-600); padding-left: 0; padding-right: 0; border-radius: 0; } .k-btn--ghost:hover { background: transparent; color: var(--crimson-700); } .k-btn--on-dark { background: #fff; color: var(--ink-900); } .k-btn--on-dark:hover { background: var(--paper); } .k-btn--on-dark.k-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); } .k-btn--on-dark.k-btn--outline:hover { border-color: #fff; } .k-btn--sm { padding: 9px 16px; font-size: var(--fs-caption); } .k-btn--lg { padding: 17px 34px; } /* text link with animated underline */ .k-link { position: relative; color: var(--ink-900); font-weight: 500; background-image: linear-gradient(var(--crimson-600), var(--crimson-600)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: left 100%; transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease); padding-bottom: 1px; } .k-link:hover { color: var(--crimson-600); background-size: 100% 1.5px; } /* ============================================================ TAGS / PILLS / BADGES ============================================================ */ .k-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.02em; padding: 5px 12px; border: 1px solid var(--hairline); border-radius: 100px; color: var(--graphite-700); background: var(--ivory); } .k-tag--crimson { color: var(--crimson-700); border-color: var(--crimson-tint-2); background: var(--crimson-tint); } .k-tag--solid { background: var(--crimson-700); color: #fff; border-color: transparent; } /* ============================================================ CARDS ============================================================ */ .k-card { background: var(--ivory); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-6); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .k-card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--mist-300); } /* practice-area card with top crimson keyline */ .k-card--practice { position: relative; padding-top: calc(var(--sp-6) + 4px); border-top: 3px solid var(--crimson-600); border-radius: 0 0 var(--r-md) var(--r-md); } .k-card__index { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--crimson-600); letter-spacing: 0.06em; margin-bottom: var(--sp-3); } .k-card__title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink-900); margin: 0 0 var(--sp-3); font-weight: 500; } .k-card__body { color: var(--graphite-700); font-size: var(--fs-small); margin: 0; } /* person card */ .k-person__photo { aspect-ratio: 4/5; width: 100%; object-fit: cover; background: var(--paper-alt); border-radius: var(--r-sm); filter: grayscale(1) contrast(1.02); transition: filter .5s var(--ease); } .k-person:hover .k-person__photo { filter: grayscale(0) contrast(1); } .k-person__name { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 600; color: var(--ink-900); margin: var(--sp-4) 0 2px; } .k-person__role { font-size: var(--fs-caption); color: var(--crimson-600); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } /* ============================================================ QUOTE & STATS ============================================================ */ .k-quote { font-family: var(--font-serif); font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.1rem); line-height: 1.32; font-weight: 400; color: var(--ink-900); letter-spacing: -0.01em; position: relative; padding-left: var(--sp-6); border-left: 2px solid var(--crimson-600); text-wrap: pretty; } .k-quote__cite { display: block; margin-top: var(--sp-4); font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; color: var(--stone-600); letter-spacing: 0.02em; } .k-quote__cite span { color: var(--stone-500); font-weight: 400; } .k-stat__value { font-family: var(--font-serif); font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); font-weight: 500; line-height: 1; color: var(--ink-900); letter-spacing: -0.02em; } .k-stat__value em { font-style: normal; color: var(--crimson-600); } .k-stat__label { font-size: var(--fs-small); color: var(--stone-600); margin-top: var(--sp-3); max-width: 24ch; } /* ============================================================ LAYOUT HELPERS ============================================================ */ .k-container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .k-grid { display: grid; gap: var(--sp-6); } .k-grid--2 { grid-template-columns: repeat(2, 1fr); } .k-grid--3 { grid-template-columns: repeat(3, 1fr); } .k-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 860px){ .k-grid--3, .k-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .k-grid--2, .k-grid--3, .k-grid--4 { grid-template-columns: 1fr; } } /* ============================================================ NAVIGATION (web header) ============================================================ */ .k-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--gutter); background: rgba(245,242,236,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); } .k-nav__logo { height: 38px; width: auto; display: block; } .k-nav__menu { display: flex; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; align-items: center; } .k-nav__menu a { font-size: var(--fs-small); font-weight: 500; color: var(--ink-800); letter-spacing: 0.01em; position: relative; padding: 6px 0; } .k-nav__menu a::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--crimson-600); transition: width var(--dur) var(--ease); } .k-nav__menu a:hover::after { width: 100%; } .k-nav__lang { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--stone-600); letter-spacing: 0.08em; } .k-nav__lang b { color: var(--ink-900); } /* ============================================================ FOOTER (web) ============================================================ */ .k-footer { background: var(--crimson-surface); color: var(--crimson-fg-dim); padding: var(--sp-9) var(--gutter) var(--sp-6); } .k-footer a { color: var(--crimson-fg-dim); } .k-footer a:hover { color: #fff; } .k-footer__logo { height: 44px; margin-bottom: var(--sp-5); } .k-footer__col h5 { font-family: var(--font-sans); font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,232,229,.58); margin: 0 0 var(--sp-4); font-weight: 600; } .k-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-small); } .k-footer__bottom { display:flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--crimson-line); font-size: var(--fs-caption); color: rgba(244,232,229,.5); } /* ============================================================ IMAGE PLACEHOLDER (striped) — drop real photography here ============================================================ */ .k-img { position: relative; background-color: var(--paper-alt); background-image: repeating-linear-gradient(135deg, rgba(110,109,106,.10) 0, rgba(110,109,106,.10) 1px, transparent 1px, transparent 11px); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; overflow: hidden; } .k-img__note { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--stone-600); text-align: center; letter-spacing: 0.02em; padding: var(--sp-3) var(--sp-4); background: rgba(251,250,246,.7); border: 1px solid var(--hairline); } .k-img--duotone { background: var(--ink-surface); } /* A real photo dropped into a .k-img placeholder fills the box; the striped pattern and the "Portre" note are suppressed. Without this, the placeholder note renders beside the featured image (both are flex-centered children). */ .k-img:has(> img) { background-image: none; } .k-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .k-img:has(> img) .k-img__note { display: none; } /* dark section */ .k-dark { background: var(--ink-surface); color: var(--paper); } .k-dark h1, .k-dark h2, .k-dark h3, .k-dark h4 { color: var(--paper); } .k-dark .k-lead { color: #C9C5BC; }